{"version":3,"file":"static/css/3063.29d9de76.chunk.css","mappings":"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","sources":["pages/dashboard/Message/message.css"],"sourcesContent":["@import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600,700&display=swap&subset=latin-ext');\n\n:root {\n  --body-bg-color: #e5ecef;\n  --theme-bg-color: #fff;\n  --settings-icon-hover: #9fa7ac;\n  --developer-color: #f9fafb;\n  --input-bg: #f8f8fa;\n  --input-chat-color: #a2a2a2;\n  --border-color: #eef2f4;\n  --body-font: 'Manrope', sans-serif;\n  --body-color: #273346;\n  --settings-icon-color: #c1c7cd;\n  --msg-message: #969eaa;\n  --chat-text-bg: #f1f2f6;\n  --theme-color: #0086ff;\n  --msg-date: #c0c7d2;\n  --button-bg-color: #f0f7ff;\n  --button-color: var(--theme-color);\n  --detail-font-color: #919ca2;\n  --msg-hover-bg: rgba(238, 242, 244, 0.4);\n  --active-conversation-bg: linear-gradient(to right, rgba(238, 242, 244, 0.4) 0%, rgba(238, 242, 244, 0) 100%);\n  --overlay-bg: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 0) 0%,\n    rgba(255, 255, 255, 1) 65%,\n    rgba(255, 255, 255, 1) 100%\n  );\n  --chat-header-bg: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1) 0%,\n    rgba(255, 255, 255, 1) 78%,\n    rgba(255, 255, 255, 0) 100%\n  );\n}\n\n[data-theme='purple'] {\n  --theme-color: #9f7aea;\n  --button-color: #9f7aea;\n  --button-bg-color: rgba(159, 122, 234, 0.12);\n}\n\n[data-theme='green'] {\n  --theme-color: #38b2ac;\n  --button-color: #38b2ac;\n  --button-bg-color: rgba(56, 178, 171, 0.15);\n}\n\n[data-theme='orange'] {\n  --theme-color: #ed8936;\n  --button-color: #ed8936;\n  --button-bg-color: rgba(237, 137, 54, 0.12);\n}\n\n.dark-mode {\n  --body-bg-color: #1d1d1d;\n  --theme-bg-color: #27292d;\n  --border-color: #323336;\n  --body-color: #d1d1d2;\n  --active-conversation-bg: linear-gradient(to right, rgba(47, 50, 56, 0.54), rgba(238, 242, 244, 0) 100%);\n  --msg-hover-bg: rgba(47, 50, 56, 0.54);\n  --chat-text-bg: #383b40;\n  --chat-text-color: #b5b7ba;\n  --msg-date: #626466;\n  --msg-message: var(--msg-date);\n  --overlay-bg: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #27292d 65%, #27292d 100%);\n  --input-bg: #2f3236;\n  --chat-header-bg: linear-gradient(to bottom, #27292d 0%, #27292d 78%, rgba(255, 255, 255, 0) 100%);\n  --settings-icon-color: #7c7e80;\n  --developer-color: var(--border-color);\n  --button-bg-color: #393b40;\n  --button-color: var(--body-color);\n  --input-chat-color: #6f7073;\n  --detail-font-color: var(--input-chat-color);\n}\n\n.blue {\n  background-color: #0086ff;\n}\n\n.purple {\n  background-color: #9f7aea;\n}\n\n.green {\n  background-color: #38b2ac;\n}\n\n.orange {\n  background-color: #ed8936;\n}\n\n* {\n  outline: none;\n  box-sizing: border-box;\n}\n\nimg {\n  max-width: 100%;\n}\n\nbody {\n  background-color: var(--body-bg-color);\n  font-family: var(--body-font);\n  color: var(--body-color);\n}\n\nhtml {\n  box-sizing: border-box;\n  -webkit-font-smoothing: antialiased;\n}\n\n.app {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--theme-bg-color);\n  max-width: 1600px;\n  height: 100vh;\n  margin: 0 auto;\n  overflow: hidden;\n}\n\n.header {\n  height: 80px;\n  width: 100%;\n  border-bottom: 1px solid var(--border-color);\n  display: flex;\n  align-items: center;\n  padding: 0 20px;\n}\n\n.wrapper {\n  width: 100%;\n  display: flex;\n  flex-grow: 1;\n  overflow: hidden;\n}\n\n.conversation-area,\n.detail-area {\n  width: 340px;\n  flex-shrink: 0;\n}\n\n.detail-area {\n  border-left: 1px solid var(--border-color);\n  margin-left: auto;\n  padding: 30px 30px 0 30px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n.chat-area-main{\n    display: flex;\n    flex-direction: column-reverse;\n}\n.image-preview{\n    background: #f1f2f6;\n    padding: 20px;\n    width: 100%;\n}\n.image-preview img{\n    border-radius: 10px;\n}\n.chat-area {\n  flex-grow: 1;\n}\n\n.search-bar {\n  height: 80px;\n  z-index: 3;\n  position: relative;\n  margin-left: 280px;\n\n  input {\n    height: 100%;\n    width: 100%;\n    display: block;\n    background-color: transparent;\n    border: none;\n    color: var(--body-color);\n    padding: 0 54px;\n    background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23c1c7cd'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e\");\n    background-repeat: no-repeat;\n    background-size: 16px;\n    background-position: 25px 48%;\n    font-family: var(--body-font);\n    font-weight: 600;\n    font-size: 15px;\n    &::placeholder {\n      color: var(--input-chat-color);\n    }\n  }\n}\n\n.logo {\n  color: var(--theme-color);\n  width: 38px;\n  flex-shrink: 0;\n\n  svg {\n    width: 100%;\n  }\n}\n\n.user-settings {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin-left: auto;\n  flex-shrink: 0;\n  & > * + * {\n    margin-left: 14px;\n  }\n}\n\n.dark-light {\n  width: 22px;\n  height: 22px;\n  color: var(--settings-icon-color);\n  flex-shrink: 0;\n\n  svg {\n    width: 100%;\n    fill: transparent;\n    transition: 0.5s;\n  }\n}\n\n.user-profile {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n\n.settings {\n  color: var(--settings-icon-color);\n  width: 22px;\n  height: 22px;\n  flex-shrink: 0;\n}\n\n.conversation-area {\n  border-right: 1px solid var(--border-color);\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n\n.msg-profile {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  object-fit: cover;\n  margin-right: 15px;\n  &.group {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: var(--border-color);\n\n    svg {\n      width: 60%;\n    }\n  }\n}\n\n.msg {\n  display: flex;\n  align-items: center;\n  padding: 20px;\n  cursor: pointer;\n  transition: 0.2s;\n  position: relative;\n  &:hover {\n    background-color: var(--msg-hover-bg);\n  }\n  &.active {\n    background: var(--active-conversation-bg);\n    border-left: 4px solid var(--theme-color);\n  }\n  &.online:before {\n    content: '';\n    position: absolute;\n    background-color: #23be7e;\n    width: 9px;\n    height: 9px;\n    border-radius: 50%;\n    border: 2px solid var(--theme-bg-color);\n    left: 50px;\n    bottom: 19px;\n  }\n}\n\n.msg-username {\n  margin-bottom: 4px;\n  font-weight: 600;\n  font-size: 15px;\n}\n\n.msg-detail {\n  overflow: hidden;\n}\n\n.msg-content {\n  font-weight: 500;\n  font-size: 13px;\n  display: flex;\n}\n\n.msg-message {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--msg-message);\n}\n\n.msg-date {\n  font-size: 14px;\n  color: var(--msg-date);\n  margin-left: 3px;\n  &:before {\n    content: '•';\n    margin-right: 2px;\n  }\n}\n\n.add {\n  position: sticky;\n  bottom: 25px;\n  background-color: var(--theme-color);\n  width: 60px;\n  height: 60px;\n  border: 0;\n  border-radius: 50%;\n  background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus'%3e%3cpath d='M12 5v14M5 12h14'/%3e%3c/svg%3e\");\n  background-repeat: no-repeat;\n  background-position: 50%;\n  background-size: 28px;\n  box-shadow: 0 0 16px var(--theme-color);\n  margin: auto auto -55px;\n  flex-shrink: 0;\n  z-index: 1;\n  cursor: pointer;\n}\n\n.overlay {\n  position: sticky;\n  bottom: 0;\n  left: 0;\n  width: 340px;\n  flex-shrink: 0;\n  background: var(--overlay-bg);\n  height: 80px;\n}\n\n.chat-area {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  &-header {\n    display: flex;\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    width: 100%;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px;\n    background: var(--chat-header-bg);\n  }\n  &-profile {\n    width: 32px;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n  &-title {\n    font-size: 18px;\n    font-weight: 600;\n  }\n  &-main {\n    flex-grow: 1;\n  }\n}\n\n.chat-msg-img {\n  height: 40px;\n  width: 40px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n\n.chat-msg-profile {\n  flex-shrink: 0;\n  margin-top: auto;\n  margin-bottom: -20px;\n  position: relative;\n}\n\n.chat-msg-date {\n  position: absolute;\n  left: calc(100% + 12px);\n  bottom: 0;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--msg-date);\n  white-space: nowrap;\n}\n\n.chat-msg {\n  display: flex;\n  padding: 0 20px 45px;\n  &-content {\n    margin-left: 12px;\n    max-width: 70%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  &-text {\n    background-color: var(--chat-text-bg);\n    padding: 15px;\n    border-radius: 20px 20px 20px 0;\n    line-height: 1.5;\n    font-size: 14px;\n    font-weight: 500;\n    & + & {\n      margin-top: 10px;\n    }\n  }\n}\n\n.chat-msg-text {\n  color: var(--chat-text-color);\n  background-color: var(--chat-text-bg);\n  padding: 15px;\n  border-radius: 20px 20px 20px 0;\n  line-height: 1.5;\n  font-size: 14px;\n  font-weight: 500;\n}\n.chat-msg-text + .chat-msg-text {\n  margin-top: 10px;\n}\n\n.owner {\n  flex-direction: row-reverse;\n  .chat-msg-content {\n    margin-left: 0;\n    margin-right: 12px;\n    align-items: flex-end;\n  }\n  .chat-msg-text {\n    background-color: var(--theme-color);\n    color: #fff;\n    border-radius: 20px 20px 0 20px;\n  }\n  .chat-msg-date {\n    left: auto;\n    right: calc(100% + 12px);\n  }\n}\n\n.chat-msg-text img {\n  max-width: 300px;\n  width: 100%;\n}\n\n.chat-area-footer {\n  display: flex;\n  border-top: 1px solid var(--border-color);\n  width: 100%;\n  padding: 10px 20px;\n  align-items: center;\n  background-color: var(--theme-bg-color);\n  position: sticky;\n  bottom: 0;\n  left: 0;\n}\n\n.chat-area-footer svg {\n  color: var(--settings-icon-color);\n  width: 20px;\n  flex-shrink: 0;\n  cursor: pointer;\n  &:hover {\n    color: var(--settings-icon-hover);\n  }\n\n  & + svg {\n    margin-left: 12px;\n  }\n}\n\n.chat-area-footer input {\n  border: none;\n  color: var(--body-color);\n  background-color: var(--input-bg);\n  padding: 12px;\n  border-radius: 6px;\n  font-size: 15px;\n  margin: 0 12px;\n  width: 100%;\n  &::placeholder {\n    color: var(--input-chat-color);\n  }\n}\n\n.detail-area-header {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  .msg-profile {\n    margin-right: 0;\n    width: 60px;\n    height: 60px;\n    margin-bottom: 15px;\n  }\n}\n\n.detail-title {\n  font-size: 18px;\n  font-weight: 600;\n  margin-bottom: 10px;\n}\n\n.detail-subtitle {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--msg-date);\n}\n\n.detail-button {\n  border: 0;\n  background-color: var(--button-bg-color);\n  padding: 10px 14px;\n  border-radius: 5px;\n  color: var(--button-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-grow: 1;\n  font-weight: 500;\n  svg {\n    width: 18px;\n    margin-right: 10px;\n  }\n  &:last-child {\n    margin-left: 8px;\n  }\n}\n\n.detail-buttons {\n  margin-top: 20px;\n  display: flex;\n  width: 100%;\n}\n\n.detail-area input {\n  background-color: transparent;\n  border: none;\n  width: 100%;\n  color: var(--body-color);\n  background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23c1c7cd'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e\");\n  background-repeat: no-repeat;\n  background-size: 16px;\n  background-position: 100%;\n  font-family: var(--body-font);\n  font-weight: 600;\n  font-size: 14px;\n  border-bottom: 1px solid var(--border-color);\n  padding: 14px 0;\n  &::placeholder {\n    color: var(--detail-font-color);\n  }\n}\n\n.detail-changes {\n  margin-top: 40px;\n}\n\n.detail-change {\n  color: var(--detail-font-color);\n  font-family: var(--body-font);\n  font-weight: 600;\n  font-size: 14px;\n  border-bottom: 1px solid var(--border-color);\n  padding: 14px 0;\n  display: flex;\n  svg {\n    width: 16px;\n    margin-left: auto;\n  }\n}\n\n.colors {\n  display: flex;\n  margin-left: auto;\n}\n\n.color {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  cursor: pointer;\n  &.selected {\n    background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E\");\n    background-size: 10px;\n    background-position: center;\n    background-repeat: no-repeat;\n  }\n  &:not(:last-child) {\n    margin-right: 4px;\n  }\n}\n\n.detail-photo-title {\n  display: flex;\n  align-items: center;\n\n  svg {\n    width: 16px;\n  }\n}\n\n.detail-photos {\n  margin-top: 30px;\n  text-align: center;\n}\n\n.detail-photo-title {\n  color: var(--detail-font-color);\n  font-weight: 600;\n  font-size: 14px;\n  margin-bottom: 20px;\n  svg {\n    margin-right: 8px;\n  }\n}\n\n.detail-photo-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-column-gap: 6px;\n  grid-row-gap: 6px;\n  grid-template-rows: repeat(3, 60px);\n\n  img {\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n    border-radius: 8px;\n    object-position: center;\n  }\n}\n\n.view-more {\n  color: var(--theme-color);\n  font-weight: 600;\n  font-size: 15px;\n  margin: 25px 0;\n}\n\n.follow-me {\n  text-decoration: none;\n  font-size: 14px;\n  width: calc(100% + 60px);\n  margin-left: -30px;\n  display: flex;\n  align-items: center;\n  margin-top: auto;\n  overflow: hidden;\n  color: #9c9cab;\n  padding: 0 20px;\n  height: 52px;\n  flex-shrink: 0;\n  position: relative;\n  justify-content: center;\n  svg {\n    width: 16px;\n    height: 16px;\n    margin-right: 8px;\n  }\n}\n\n.follow-text {\n  display: flex;\n  align-items: center;\n  transition: 0.3s;\n}\n\n.follow-me:hover {\n  .follow-text {\n    transform: translateY(100%);\n  }\n  .developer {\n    top: 0;\n  }\n}\n\n.developer {\n  position: absolute;\n  color: var(--detail-font-color);\n  font-weight: 600;\n  left: 0;\n  top: -100%;\n  display: flex;\n  transition: 0.3s;\n  padding: 0 20px;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--developer-color);\n  width: 100%;\n  height: 100%;\n}\n\n.developer img {\n  border-radius: 50%;\n  width: 26px;\n  height: 26px;\n  object-fit: cover;\n  margin-right: 10px;\n}\n\n.dark-mode {\n  .search-bar input,\n  .detail-area input {\n    background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%236f7073'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e\");\n  }\n  .dark-light svg {\n    fill: #ffce45;\n    stroke: #ffce45;\n  }\n  .chat-area-group span {\n    color: #d1d1d2;\n  }\n}\n\n.chat-area-group {\n  flex-shrink: 0;\n  display: flex;\n  * {\n    border: 2px solid var(--theme-bg-color);\n  }\n  * + * {\n    margin-left: -5px;\n  }\n\n  span {\n    width: 32px;\n    height: 32px;\n    background-color: var(--button-bg-color);\n    color: var(--theme-color);\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 14px;\n    font-weight: 500;\n  }\n}\n\n@media (max-width: 1120px) {\n  .detail-area {\n    display: none;\n  }\n}\n\n@media (max-width: 780px) {\n  .conversation-area {\n    display: none;\n  }\n  .search-bar {\n    margin-left: 0;\n    flex-grow: 1;\n    input {\n      padding-right: 10px;\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}