@tencentcloud/chat-uikit-react 0.0.1

package/dist/esm/index.d.css

@@ -0,0 +1,1281 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: "";
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.tui-kit {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: #FFFFFF;
+  text-align: initial;
+}
+.tui-conversation {
+  height: 100%;
+  min-width: 360px;
+  max-width: 400px;
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-right: 1px solid #F9FAFB;
+  text-align: initial;
+}
+.tui-conversation .tui-conversation-header {
+  display: flex;
+  padding: 10px 20px;
+}
+.tui-conversation .tui-conversation-header .tui-conversation-create-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+}
+.tui-conversation .no-result {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.tui-conversation .no-result-icon {
+  margin: 100px auto 50px;
+}
+.tui-conversation .no-result-message {
+  color: #999999;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+.message-default {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-family: SF Pro Text;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 17px;
+}
+.message-default .avatar {
+  width: 45px;
+}
+.message-default .avatar img {
+  width: 45px;
+}
+.message-default .content {
+  padding: 0 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.message-default .content .name {
+  display: inline-block;
+  padding-bottom: 3px;
+}
+
+.in {
+  display: flex;
+  flex-direction: row;
+  justify-self: flex-start;
+}
+.in .content {
+  align-items: flex-start;
+  flex: 1;
+}
+
+.out {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-self: flex-end;
+}
+.out .content {
+  align-items: flex-end;
+  flex: 1;
+}
+
+.tip {
+  justify-self: center;
+}
+
+.bubble {
+  padding: 8px 16px;
+}
+.bubble-in {
+  border-radius: 16px 16px 16px 0;
+}
+.bubble-out {
+  border-radius: 16px 16px 0 16px;
+}
+
+.message-status {
+  display: flex;
+  align-items: flex-end;
+  align-self: flex-end;
+}
+.message-status .time {
+  width: max-content;
+  font-weight: 400;
+  padding: 5px 0 0 10px;
+  font-size: 12px;
+  line-height: 14px;
+  text-align: right;
+  color: #7A7A7A;
+}
+
+.message-image, .message-video {
+  position: relative;
+}
+.message-image .message-status, .message-video .message-status {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+.message-image .message-status .time, .message-video .message-status .time {
+  color: #FFFFFF;
+}
+
+.message-text {
+  display: flex;
+}
+.message-text-content {
+  display: inline;
+  word-break: break-word;
+  font-family: "SF Pro Text";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+}
+.message-text-content .message-status {
+  display: inline-flex;
+  float: right;
+  clear: right;
+}
+
+.message-text,
+.message-tip {
+  font-family: "SF Pro Text";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+}
+.message-text .text-img,
+.message-tip .text-img {
+  width: 20px;
+  height: 20px;
+}
+
+.message-image {
+  background: #FFFFFF;
+}
+.message-image img {
+  max-width: 300px;
+}
+.message-image .big-image {
+  max-width: 95%;
+  max-height: 95%;
+}
+
+.message-video {
+  max-width: 300px;
+}
+.message-video .snap-video {
+  position: relative;
+}
+.message-video .snap-video::before {
+  position: absolute;
+  z-index: 1;
+  content: "";
+  width: 0px;
+  height: 0px;
+  border: 15px solid transparent;
+  border-left: 20px solid #ffffff;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+}
+.message-video video {
+  width: 100%;
+  border-radius: 10px;
+}
+.message-video .play-video {
+  max-width: 95%;
+  max-height: 95%;
+}
+
+.message-file {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ddd;
+}
+.message-file-main {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  background: #FFFFFF;
+  border-radius: 4px;
+}
+.message-file-main .icon {
+  margin-right: 7px;
+}
+.message-file-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.message-file-footer .time {
+  padding-top: 10px;
+}
+.message-file-size {
+  padding-top: 10px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: #7A7A7A;
+}
+
+.message-merger {
+  display: flex;
+  flex-direction: column;
+  background: #ECEBEB;
+}
+.message-merger h3 {
+  padding-bottom: 4px;
+  border-bottom: 1px solid #a1a1a1;
+}
+.message-merger-list {
+  opacity: 0.6;
+}
+.message-merger-item {
+  padding-top: 4px;
+}
+
+.meesage-bubble-reply {
+  background: #ECEBEB;
+  padding: 8px 16px;
+}
+.meesage-bubble-reply-in {
+  border-radius: 16px 16px 16px 0;
+}
+.meesage-bubble-reply-out {
+  border-radius: 16px 16px 0px 16px;
+}
+.meesage-bubble-reply .message-text {
+  border-radius: none;
+  border: none;
+}
+.meesage-bubble-reply .bubble {
+  padding: 0;
+}
+.meesage-bubble-reply .bubble-in {
+  border-radius: 0;
+}
+.meesage-bubble-reply-main {
+  position: relative;
+  padding: 10px 14px;
+  margin-bottom: 10px;
+  background: #FFFFFF;
+}
+.meesage-bubble-reply-main::before {
+  content: "";
+  position: absolute;
+  width: 6px;
+  height: 100%;
+  background: #D9D9D9;
+  top: 0;
+  left: 0;
+}
+.meesage-bubble-reply-main .title {
+  font-family: "SF Pro Text";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  padding-bottom: 10px;
+}
+.meesage-bubble-reply-main .message-context {
+  opacity: 0.6;
+}
+
+.meesage-bubble {
+  display: flex;
+  align-items: flex-end;
+}
+.meesage-bubble-status {
+  margin: 3px;
+}
+.meesage-bubble-context {
+  display: flex;
+  align-items: center;
+}
+.meesage-bubble-context .message-context {
+  flex: 1;
+}
+
+.icon-fail {
+  width: 14px;
+  height: 14px;
+  border-radius: 14px;
+  position: relative;
+  background: #FA5151;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+.icon-fail::before {
+  position: absolute;
+  content: "!";
+  color: #FFFFFF;
+  font-size: 12px;
+}
+
+.message-face {
+  display: flex;
+  flex-direction: column;
+}
+.message-face .img {
+  max-width: 88px;
+}
+
+.loading {
+  display: inline-block;
+  position: relative;
+}
+.loading .img, .loading video {
+  min-width: 60px;
+  min-height: 60px;
+  max-width: 300px;
+  border-radius: 10px;
+}
+.loading::before {
+  position: absolute;
+  content: "";
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.loading::after {
+  position: absolute;
+  content: "";
+  border: 5px solid #f3f3f3;
+  border-top: 5px solid #555;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: inline-block;
+  animation: spin 2s linear infinite;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.message-plugin {
+  width: 32px;
+  margin: 0 5px;
+}
+.message-plugin .icon-more {
+  transform: scale(1.5);
+}
+.message-plugin .plugin-popup-box {
+  top: 100%;
+  bottom: auto;
+}
+.message-plugin-top {
+  top: auto !important;
+  bottom: 100% !important;
+}
+.message-plugin-left {
+  left: -140px !important;
+}
+.message-plugin-box {
+  padding: 6px 0;
+}
+.message-plugin-item {
+  min-width: 144px;
+  padding: 6px 13px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 500;
+  font-size: 12.8px;
+  line-height: 15px;
+}
+.message-plugin-item:hover {
+  background: rgba(0, 110, 255, 0.1);
+  color: #147aff;
+}
+.message-plugin-item .del {
+  color: #FF584C;
+}
+
+.message-custom {
+  display: flex;
+  word-break: break-all;
+}
+.message-custom a {
+  color: #679ce1;
+  text-decoration: none;
+  font-family: "SF Pro Text";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+}
+
+.message-revoke {
+  color: #999999;
+}
+
+.message-text, .message-custom {
+  border: 1px solid #DDDDDD;
+}
+
+.bubble-out {
+  background: #F2F7FF;
+  border: 1px solid #F2F7FF;
+}
+
+.meesage-bubble-reply-out {
+  background: #F2F7FF;
+}
+.meesage-bubble-reply-out .meesage-bubble-reply-main .message-text {
+  background: none;
+}
+
+.message-tip {
+  color: #999999;
+}
+
+.tip .bubble .edit {
+  color: #147aff;
+}
+.plugin {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.plugin-popup {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 8px;
+}
+.plugin-popup-box {
+  position: absolute;
+  z-index: 2;
+  bottom: 100%;
+}
+
+.plugin-popup-box {
+  background: #FFFFFF;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+}
+.tui-message-input {
+  display: flex;
+  flex-direction: column;
+}
+.tui-message-input-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: 14px 12px;
+}
+.tui-message-input-main .input-box {
+  flex: 1;
+  display: flex;
+  padding: 0 8px;
+  position: relative;
+  min-height: 20px;
+  max-height: 200px;
+  border-radius: 15px;
+  overflow: hidden;
+  padding: 10px;
+}
+.tui-message-input-main .input-box .input-visibility-content {
+  word-break: break-all;
+  visibility: hidden;
+  max-width: -webkit-fill-available;
+  font-family: "SF Pro Text";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  padding: 1px 2px;
+}
+.tui-message-input-main .input-box textarea {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: -webkit-fill-available;
+  height: -webkit-fill-available;
+  flex: 1;
+  font-family: "SF Pro Text";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  margin: 9px;
+  resize: none;
+  border: none;
+  background: none;
+}
+.tui-message-input-main .input-box textarea:focus, .tui-message-input-main .input-box textarea:active {
+  border: none;
+  outline: none;
+}
+.tui-message-input-main .disabled {
+  display: none;
+}
+
+ul li {
+  list-style: none;
+}
+
+.input-plugin-popup {
+  position: relative;
+}
+.input-plugin-popup-box {
+  position: absolute;
+  z-index: 2;
+  bottom: 30px;
+}
+
+.input-plugin-item {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+  display: flex;
+}
+.input-plugin-item span {
+  padding: 0 17px;
+}
+
+.emoji-picker .face-list {
+  min-width: 265px;
+  padding: 10px 5px;
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 120px;
+  overflow-y: auto;
+}
+.emoji-picker .face-list-item {
+  padding: 5px;
+  cursor: pointer;
+}
+.emoji-picker .face-list-item img {
+  width: 20px;
+}
+.emoji-picker .face-list-item .face-img {
+  width: 38px;
+}
+.emoji-picker .face-tab {
+  display: flex;
+  align-items: center;
+  min-width: 265px;
+}
+.emoji-picker .face-tab-item {
+  cursor: pointer;
+  width: 24px;
+  padding: 10px;
+}
+.emoji-picker .face-tab-item img {
+  width: 100%;
+}
+
+.upload-picker {
+  position: relative;
+  padding: 10px 16px;
+  min-width: 180px;
+}
+.upload-picker:hover {
+  background: rgba(0, 110, 255, 0.1);
+  color: #147aff;
+}
+.upload-picker input {
+  position: absolute;
+  cursor: pointer;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.input-quote {
+  padding: 7px 16px;
+  background: #F9F9F9;
+  display: flex;
+  align-items: center;
+}
+.input-quote-content {
+  flex: 1;
+  background: #FFFFFF;
+  padding: 2px 14px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  color: #000000;
+}
+.input-quote-content::before {
+  content: "";
+  position: absolute;
+  width: 6px;
+  height: 100%;
+  background: #999999;
+  top: 0;
+  left: 0;
+}
+.input-quote-content span {
+  padding-top: 8px;
+  opacity: 0.6;
+}
+.input-quote .icon {
+  margin: 0 5px 0 16px;
+}
+
+.tui-forward {
+  background: #FFFFFF;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 300px;
+}
+.tui-forward-header {
+  display: flex;
+  align-items: center;
+  padding: 24px 20px;
+}
+.tui-forward-title {
+  padding: 0 16px;
+  font-family: "SF Pro Text";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 17px;
+}
+.tui-forward-main {
+  padding: 0 20px;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+.tui-forward-main .no-result {
+  font-family: PingFang SC;
+  font-size: 14px;
+  font-style: normal;
+  line-height: 20px;
+  padding: 10px;
+  text-align: center;
+  color: #999999;
+}
+.tui-forward-search {
+  padding: 10px 15px;
+}
+.tui-forward-list {
+  padding: 13px 0;
+}
+.tui-forward-list-title {
+  font-family: "PingFang SC";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+}
+.tui-forward-list-item {
+  padding: 6px 0;
+  font-family: "PingFang SC";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.tui-forward-list-item .info {
+  display: flex;
+  align-items: center;
+}
+.tui-forward-list-item .info-nick {
+  padding: 0 13px;
+  font-family: "PingFang SC";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  min-width: 180px;
+  max-width: 300px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.tui-forward-footer {
+  background: rgba(249, 249, 249, 0.94);
+  padding: 13px 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.tui-forward-footer .button {
+  cursor: pointer;
+  background: #0365F9;
+  border-radius: 31px;
+  padding: 10px 21px;
+  font-family: "PingFang SC";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: #FFFFFF;
+  border: none;
+}
+.tui-forward-footer-name {
+  flex: 1;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.tui-message-input .tui-kit-input-box--focus {
+  outline: 1px solid #147AFF;
+}
+.tui-message-input .input-box {
+  border: 1px solid #D3DAF3;
+  background: #FFFFFF;
+}
+
+.input-plugin-popup-box {
+  background: rgba(249, 249, 249, 0.94);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 16px;
+}
+.tui-kit-avatar {
+  display: flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+}
+.tui-kit-avatar.circle .avatar-image {
+  border-radius: 50%;
+}
+.tui-kit-avatar.square .avatar-image {
+  border-radius: 4px;
+}
+.tui-kit-avatar img {
+  width: 100%;
+  height: 100%;
+}
+.tui-kit-avatar:hover .tui-kit-avatar-edit {
+  display: flex;
+}
+.tui-kit-avatar-edit {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.33);
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+.tui-kit-avatar-list {
+  position: absolute;
+  z-index: 2;
+  top: 100%;
+  background: #FFFFFF;
+  border-radius: 5px;
+  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  min-width: 200px;
+  max-width: 400px;
+  padding: 10px;
+}
+.tui-kit-avatar-list-item {
+  padding: 10px;
+}
+.tui-kit-avatar-list-item img {
+  width: 40px;
+}
+.conversation-list-container {
+  overflow-x: hidden;
+  height: 100%;
+}
+
+.conversation-preview-container {
+  display: flex;
+  align-items: center;
+  background-color: #FFFFFF;
+  border: none;
+  width: 100%;
+  height: 64px;
+  cursor: pointer;
+  line-height: 17px;
+  padding: 0 20px;
+}
+.conversation-preview-container .content {
+  flex: 1;
+  text-align: left;
+  max-width: 58%;
+  min-width: 58%;
+  margin-left: 10px;
+}
+.conversation-preview-container .content .title {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 17px;
+  font-family: "SF Pro Text";
+  padding: 1px 0;
+}
+.conversation-preview-container .content .message {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #7A7A7A;
+  font-family: "SF Pro Text";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 1px 0;
+}
+.conversation-preview-container .external {
+  min-width: 90px;
+  text-align: right;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.conversation-preview-container .external .unread {
+  height: 19px;
+  padding: 1px 0;
+}
+.conversation-preview-container .external .time {
+  color: #7A7A7A;
+  font-family: "SF Pro Text";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 1px 0;
+}
+.conversation-preview-container .external .more--hover {
+  display: flex;
+  justify-content: right;
+}
+.conversation-preview-container .external .more--hover .icon-more {
+  transform: scale(1.5);
+}
+.conversation-preview-container .external .more--hover .more-handle-box {
+  top: 0;
+  right: 0;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  bottom: initial;
+  padding: 14px 0;
+  box-sizing: border-box;
+  text-align: start;
+  white-space: nowrap;
+}
+.conversation-preview-container .external .more--hover .more-handle-box .more-handle-item {
+  font-size: 16px;
+  line-height: 19px;
+  padding: 6px 16px;
+  cursor: pointer;
+  font-weight: 500;
+  box-sizing: border-box;
+}
+.conversation-preview-container .external .more--hover .more-handle-box .more-handle-item:hover {
+  background: #147AFF;
+  opacity: 0.6;
+  color: #FFFFFF !important;
+}
+.conversation-preview-container:hover {
+  background-color: rgba(0, 110, 255, 0.1);
+}
+.conversation-preview-container.conversation-preview-content--pin {
+  background-color: rgba(242, 242, 242, 0.831372549);
+}
+.conversation-preview-container.conversation-preview-content--active {
+  background-color: rgba(0, 110, 255, 0.1);
+}
+.conversation-preview-container.conversation-preview-content--active .title {
+  color: rgb(20, 122, 255);
+}
+.conversation-preview-container.conversation-preview-content--unread .unread {
+  width: 16px;
+  height: 13px;
+  background: #FF3742;
+  border-radius: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 5px 1px;
+  color: #FFFFFF;
+  font-size: 11px;
+  font-weight: 700;
+  margin: 2px 0 2px auto;
+}
+.tui-chat-header {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.tui-chat-header-left {
+  display: flex;
+  align-items: center;
+}
+.tui-chat-header-left .header-content {
+  padding: 0 8px;
+}
+.tui-chat-header-right .header-handle-more {
+  padding: 10px 3px;
+}
+.tui-chat-header .title {
+  font-family: "SF Pro Text";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 17px;
+}
+.tui-chat-header .system {
+  height: 32px;
+}
+
+.tui-chat-header {
+  background: #FFFFFF;
+}
+.chat {
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background: #FFFFFF;
+}
+ul, li, div, p, label, span {
+  margin: 0;
+  padding: 0;
+}
+
+ul li {
+  list-style: none;
+}
+
+.message-list {
+  flex: 1;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+  padding: 0 20px;
+}
+.message-list-item {
+  display: grid;
+  padding: 5px 0;
+}
+.message-list .no-more {
+  text-align: center;
+  font-family: SF Pro Text;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 17px;
+  color: #999999;
+}
+.tui-profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 30%;
+  max-width: 400px;
+  min-width: 360px;
+  height: 100%;
+}
+.tui-profile-header {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  line-height: 32px;
+}
+.tui-profile-header h1 {
+  font-weight: 600;
+  padding: 0 11px;
+}
+.tui-profile-main {
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.tui-profile-avatar {
+  margin: 13px 0;
+  position: relative;
+}
+.tui-profile .displayFlex {
+  display: flex;
+}
+.tui-profile-nick {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 29px;
+  text-align: center;
+}
+.tui-profile-nick .show {
+  padding-left: 25px;
+}
+.tui-profile-ID {
+  padding: 6px 0;
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: #666666;
+}
+.tui-profile-list {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+}
+.tui-profile-list-item {
+  padding: 20px 0 0;
+}
+.tui-profile-list-item h4 {
+  padding-bottom: 3px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.6);
+}
+.tui-profile-div-with-edit {
+  padding: 4px 0;
+  border-bottom: 1px solid #EEEEEE;
+}
+.tui-profile-edit {
+  border-bottom: none !important;
+}
+
+.tui-profile-birthday .react-date-picker__wrapper {
+  display: none !important;
+}
+.tui-profile-birthday .react-date-picker__calendar {
+  position: static !important;
+}
+.tui-profile-birthday-calendar {
+  border: none !important;
+}
+
+.tui-profile {
+  background: #ffffff;
+}
+.tui-profile-header {
+  background: #f9fafb;
+}
+.conversation-search-result.no-result {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.conversation-search-result.no-result-icon {
+  margin: 100px auto 50px;
+}
+.conversation-search-result.no-result-message {
+  color: #999999;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.conversation-search-input {
+  height: 36px;
+  width: 100%;
+}
+.tui-kit-input-box {
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  background: rgba(249, 249, 249, 0.94);
+  padding: 0 8px;
+  height: 36px;
+  box-sizing: border-box;
+}
+.tui-kit-input-box.tui-kit-input-box--focus {
+  outline: 1px solid #147AFF;
+}
+.tui-kit-input-box.tui-kit-input-border--bottom {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  outline: none;
+  border-radius: 0;
+}
+.tui-kit-input-box .tui-kit-input {
+  margin-left: 6px;
+  margin-right: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: transparent;
+  border-radius: 10px;
+  border: none;
+  box-sizing: border-box;
+}
+.tui-kit-input-box .tui-kit-input:focus {
+  border: none;
+  outline: none;
+}
+.tui-kit-input-box .tui-kit-input::placeholder {
+  font-weight: 400;
+  color: rgba(67, 60, 63, 0.6);
+  padding: 2px 0;
+}
+.tui-manage {
+  display: flex;
+  flex-direction: column;
+  width: 22%;
+  max-width: 300px;
+  min-width: 200px;
+  border-left: 1px solid #f9fafb;
+}
+.tui-manage .red {
+  color: #FF584C !important;
+}
+.tui-manage .tui-manage-title {
+  display: flex;
+  align-items: center;
+  padding: 24px 20px;
+}
+.tui-manage .tui-manage-title span {
+  margin-left: 10px;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 17px;
+}
+.tui-manage .tui-manage-container .tui-manage-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.tui-manage .tui-manage-container .tui-manage-info .info-avatar {
+  margin-top: 40px;
+  margin-bottom: 20px;
+}
+.tui-manage .tui-manage-container .tui-manage-info .info-name {
+  text-align: center;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 29px;
+  margin-bottom: 10px;
+}
+.tui-manage .tui-manage-container .tui-manage-info .info-id {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: #666666;
+  margin-bottom: 30px;
+  text-align: center;
+}
+.tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box {
+  display: flex;
+  background: rgba(249, 249, 249, 0.94);
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box:nth-child(2) {
+  margin-top: 10px;
+  cursor: pointer;
+}
+.tui-manage .tui-manage-container .tui-manage-handle .manage-handle-box .manage-handle-title {
+  font-size: 16px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.6);
+}