/* webrade custom styles, layered on top of 7.css */

@font-face {
  font-family: "Helvetica Neue";
  src: url("/fonts/helvetica.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html, body,
button, input, select, textarea,
.title-bar-text {
  font-family: "Helvetica Neue", Calibri, "Segoe UI", Tahoma, sans-serif;
}

html, body,
button, input, select, textarea,
.title-bar-text {
  font-family: "Helvetica Neue", Calibri, "Segoe UI", Tahoma, sans-serif;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: #e2e4e9;
  transition: background-color 0.15s ease;
}

/* ===== dark mode ===== */
/* overrides 7.css's theme variables directly so every window, button,
   listview, scrollbar etc. built on top of them goes dark automatically */
html[data-theme="dark"] body {
  background: #1a1c22;
}

html[data-theme="dark"] {
  --w7-surface: #23252b;
  --w7-el-bg: #2a2d34;
  --w7-el-bg-d: #2e3138;
  --w7-el-bg-s-1: #22242a;
  --w7-el-bg-s-2: #17181c;
  --w7-el-sd: inset 0 0 0 1px #ffffff14;
  --w7-el-sd-a: inset 1px 1px 0 #0006, inset -1px 1px 0 #0002;
  --w7-el-bd: #45484f;
  --w7-el-bd-h: #5b9bd5;
  --w7-el-bd-a: #4d7ea8;
  --w7-el-bd-d: #3a3d44;
  --w7-el-c: #e8e9ec;
  --w7-el-c-d: #6b6e76;
  --w7-el-grad-h: linear-gradient(#2c3844 45%, #223244 0, #1c2c3c);
  --w7-el-grad-a: linear-gradient(#28394a, #1f3244 30% 50%, #16283a 50%, #0f1d2c);
  --w7-li-bd-hl: #3d6a8a;
  --w7-li-bg-hl: linear-gradient(#ffffff12, #2a3d4f66 90%, #ffffff0f);
  --w7-bl-bd: #000000b3;
  --w7-w-bd: #000000cc;
  --w7-w-bg: #2b3f57;
  --w7-wct-bd: #00000066;
  --w7-wct-sd: inset 0 0 0 1px #ffffff1a;
}

html[data-theme="dark"] .window-body {
  color: var(--w7-el-c);
}

html[data-theme="dark"] button,
html[data-theme="dark"] [role="button"] {
  color: var(--w7-el-c);
}

html[data-theme="dark"] .title-bar-text {
  color: #f2f3f5;
  text-shadow: none;
}

html[data-theme="dark"] .message-row {
  border-bottom-color: #2e3138;
}

html[data-theme="dark"] .message-row:hover {
  background: #24272e;
}

html[data-theme="dark"] .message-row.own {
  background: transparent;
}

html[data-theme="dark"] .message-row.own:hover {
  background: #24272e;
}

html[data-theme="dark"] .message-content,
html[data-theme="dark"] .message-sender-name {
  color: #e8e9ec;
}

html[data-theme="dark"] .message-sender-name {
  color: #7fb2e8;
}

html[data-theme="dark"] .message-meta,
html[data-theme="dark"] .message-edited-tag,
html[data-theme="dark"] .channel-sub,
html[data-theme="dark"] .hint-text,
html[data-theme="dark"] .friends-section-title,
html[data-theme="dark"] .profile-card-username {
  color: #9a9ea6;
}

html[data-theme="dark"] .channel-item {
  border-bottom-color: #33363d;
}

html[data-theme="dark"] .channel-item:hover {
  background: #2a3542;
}

html[data-theme="dark"] .channel-item.active {
  background: #2f4058;
}

html[data-theme="dark"] .message-reply-quote {
  background: #232f3d;
  border-left-color: #4d7ea8;
  color: #b7bcc4;
}

html[data-theme="dark"] .reply-preview {
  background: #232f3d;
  border-left-color: #4d9ade;
}

html[data-theme="dark"] .reply-preview-text {
  color: #d5d7db;
}

html[data-theme="dark"] .context-menu {
  background: #23252b;
  border-color: #000c;
  box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.6), inset 0 0 0 1px #ffffff14;
  color: #e8e9ec;
}

html[data-theme="dark"] .context-menu li.separator {
  background: #3a3d44;
}

html[data-theme="dark"] .friend-item {
  border-bottom-color: #33363d;
}

html[data-theme="dark"] .attachment-thumb {
  border-color: #45484f;
}

html[data-theme="dark"] .error-text {
  color: #ff8a80;
}

html[data-theme="dark"] .invite-item {
  border-bottom-color: #33363d;
}

html[data-theme="dark"] .message-row.deleted .message-content,
html[data-theme="dark"] .message-status,
html[data-theme="dark"] .channel-empty,
html[data-theme="dark"] .friends-empty,
html[data-theme="dark"] .attachment-preview,
html[data-theme="dark"] .invite-status-used {
  color: #9a9ea6;
}

html[data-theme="dark"] .channel-name,
html[data-theme="dark"] .friend-item-name,
html[data-theme="dark"] .profile-card-name,
html[data-theme="dark"] .dropzone-sub {
  color: #e8e9ec;
}

html[data-theme="dark"] .dropzone-text,
html[data-theme="dark"] .reply-preview-label span,
html[data-theme="dark"] .reply-quote-name {
  color: #7fb2e8;
}

html[data-theme="dark"] .reply-preview-label {
  color: #b7bcc4;
}

html[data-theme="dark"] .invite-status-open {
  color: #6fce6f;
}

html[data-theme="dark"] .invite-key-text {
  color: #e8e9ec;
}

html[data-theme="dark"] .theme-toggle-btn img {
  filter: invert(1) brightness(1.6);
}

.site-banner {
  width: 100%;
  min-height: 40px;
  padding: 10px 16px;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  font-size: 15px;
  display: flex;
  align-items: center;
}

.error-text {
  color: #b00;
  font-size: 12px;
  margin: 6px 0 0;
}

#app-layout {
  display: flex;
  height: calc(100vh - 40px);
  zoom: 1.33;
}

#channel-list {
  width: 220px;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: var(--w7-w-space);
  box-sizing: border-box;
}

#channel-list .window-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

#channel-list .window-body::-webkit-scrollbar {
  display: none;
}

#chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  margin: var(--w7-w-space);
  box-sizing: border-box;
}

#message-list-wrap {
  flex: 1;
  min-height: 0;
}

#message-list {
  height: 100%;
  overflow-y: auto;
  padding: 14px;
  box-sizing: border-box;
}

.message-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid #e2e2e2;
  position: relative;
}

.message-row:hover {
  background: #f5f7fa;
}

.message-row.own {
  background: transparent;
}

.message-row.own:hover {
  background: #f5f7fa;
}

.message-row.deleted .message-content {
  color: #888;
  font-style: italic;
}

.message-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 2px;
  background: #6a7ba0;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  text-transform: uppercase;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #b7c4d9, 1px 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.message-row-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-row-body {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.message-sender-name {
  font-size: 12px;
  font-weight: bold;
  color: #2a4d7a;
  cursor: pointer;
}

.message-sender-name:hover {
  text-decoration: underline;
}

.message-meta {
  font-size: 10px;
  color: #777;
}

.message-edited-tag {
  font-size: 10px;
  color: #999;
  font-style: italic;
}

.message-content {
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.message-reply-quote {
  display: flex;
  flex-direction: column;
  border-left: 3px solid #8ba9d6;
  background: #dfe8f6;
  padding: 3px 8px;
  margin-bottom: 4px;
  font-size: 11px;
  color: #555;
  border-radius: 2px;
  max-width: 90%;
}

.message-reply-quote .reply-quote-name {
  font-weight: bold;
  color: #2a4d7a;
}

.message-status-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

/* hover-only quick action, top right of the row, msn-style single react button */
.message-hover-actions {
  position: absolute;
  top: 4px;
  right: 8px;
  display: none;
}

.message-row:hover .message-hover-actions {
  display: flex;
}

.message-react-btn {
  min-width: 0;
  min-height: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-react-btn img {
  width: 13px;
  height: 13px;
}

/* emoticon codes rendered as text, same as classic msn messenger's chat
   input, styled as a small bordered chip rather than a rendered image
   since we don't have the original wlm .png sprite sheet on hand */
.emoticon-glyph {
  font-family: "Segoe UI", "Helvetica Neue", monospace;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: -0.2px;
}

.emoticon-picker {
  position: fixed;
  z-index: 400;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 4px;
  width: 190px;
  background: var(--w7-surface, #fff);
  border: 1px solid var(--w7-w-bd, #000000b3);
  box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.35), inset 0 0 0 1px #fffd;
  border-radius: 3px;
}

.emoticon-picker-item {
  min-width: 0;
  min-height: 0;
  width: 34px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reaction-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.reaction-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  padding: 2px 7px;
  background: var(--w7-el-bg, #f2f2f2);
  border: 1px solid var(--w7-el-bd, #8e8f8f);
  border-radius: 10px;
  box-shadow: none;
}

.reaction-chip:hover {
  border-color: var(--w7-el-bd-h, #3c7fb1);
}

.reaction-chip.mine {
  background: var(--w7-el-grad-a, linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db));
  border-color: var(--w7-el-bd-h, #3c7fb1);
}

.reaction-count {
  font-size: 10px;
  color: #555;
}

.reaction-chip.mine .reaction-count {
  color: #1a3d5c;
}

html[data-theme="dark"] .emoticon-picker {
  background: #23252b;
  border-color: #000c;
}

html[data-theme="dark"] .emoticon-glyph {
  color: #e8e9ec;
}

html[data-theme="dark"] .reaction-chip {
  color: #e8e9ec;
}

html[data-theme="dark"] .reaction-count {
  color: #9a9ea6;
}

html[data-theme="dark"] .reaction-chip.mine .reaction-count {
  color: #dbeeff;
}

.message-status {
  font-size: 10px;
  color: #888;
}

.read-ticks {
  display: inline-flex;
  align-items: center;
  gap: -6px;
  height: 13px;
}

.read-ticks img {
  width: 13px;
  height: 13px;
  display: block;
  margin-left: -6px;
}

.read-ticks img:first-child {
  margin-left: 0;
}

.read-ticks.sent img {
  filter: grayscale(1) brightness(1.15);
}

.read-ticks.read img {
  filter: hue-rotate(190deg) saturate(3.2) brightness(1.05);
}

.message-attachment img {
  max-width: 220px;
  display: block;
  margin-top: 4px;
  border-radius: 3px;
}

.message-attachment a {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

/* channel list */
.window-body-flush {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: calc(100% - 20px);
}

.channel-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}

.channel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #d8d8d8;
}

.channel-item:hover {
  background: #dfe8f6;
}

.channel-item.active {
  background: #c6d8f0;
}

.channel-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #6a7ba0;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  overflow: hidden;
}

.channel-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.channel-info {
  flex: 1;
  min-width: 0;
}

.channel-name {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-sub {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-unread {
  background: #c0392b;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  border-radius: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.channel-empty {
  padding: 16px 10px;
  font-size: 12px;
  color: #777;
  text-align: center;
}

.sidebar-actions {
  padding: var(--w7-w-space);
  border-top: 1px solid #999;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-actions button {
  width: 100%;
}

.icon-label-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: flex-start;
  text-align: left;
  padding-left: 10px;
}

.icon-label-btn img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 4px;
}

/* qt-flavored segmented control for the appearance switcher, sunken
   groove holding two raised/pressed segments, like a Qt QButtonGroup */
.theme-switcher {
  display: flex;
  gap: 0;
  background: var(--w7-el-bg-s-1, #ebebeb);
  border: 1px solid var(--w7-el-bd, #8e8f8f);
  border-radius: var(--w7-el-bdr, 3px);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.15);
  padding: 2px;
}

.theme-switcher-option {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  min-height: 24px;
}

.theme-switcher-option:before {
  content: none;
}

.theme-switcher-option .theme-switcher-check {
  width: 12px;
  height: 12px;
  opacity: 0;
}

.theme-switcher-option.active {
  background: var(--w7-el-grad-a, linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db));
  border-color: var(--w7-el-bd-h, #3c7fb1);
  box-shadow: inset 0 0 0 1px #fffc;
}

.theme-switcher-option.active .theme-switcher-check {
  opacity: 1;
}

html[data-theme="dark"] .theme-switcher-option.active .theme-switcher-check {
  filter: invert(1) brightness(1.8);
}

/* composer */
.composer {
  border-top: 1px solid #999;
  padding: 10px 12px;
}

.composer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.composer-row input[type="text"] {
  flex: 1;
}

.icon-btn {
  min-width: 36px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn img {
  width: 16px;
  height: 16px;
  display: block;
}

.attachment-preview {
  margin-top: 6px;
  font-size: 12px;
  color: #444;
  display: flex;
  align-items: center;
  gap: 8px;
}

.attachment-preview[hidden] {
  display: none;
}

.attachment-preview .remove-attachment {
  font-size: 10px;
  padding: 1px 6px;
}

.attachment-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 1px solid #999;
}

/* drag and drop overlay covering the message list */
.dropzone-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(70, 128, 196, 0.16);
  border: 3px dashed #4580c4;
  box-sizing: border-box;
  pointer-events: none;
}

.dropzone-overlay[hidden] {
  display: none;
}

.dropzone-box {
  background: #fff;
  border: 1px solid #4580c4;
  border-radius: 4px;
  padding: 18px 26px;
  text-align: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
}

.dropzone-box img {
  width: 32px;
  height: 32px;
  opacity: 0.75;
}

.dropzone-text {
  font-size: 14px;
  font-weight: bold;
  color: #2a4d7a;
  margin-top: 6px;
}

.dropzone-sub {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}

html[data-theme="dark"] .dropzone-overlay {
  background: rgba(77, 122, 168, 0.22);
  border-color: #5b9bd5;
}

html[data-theme="dark"] .dropzone-box {
  background: #23252b;
  border-color: #5b9bd5;
}

html[data-theme="dark"] .dropzone-text {
  color: #7fb2e8;
}

html[data-theme="dark"] .dropzone-sub {
  color: #9a9ea6;
}

/* multi attachment preview, chips in a wrapping row */
.attachment-preview {
  flex-wrap: wrap;
  gap: 6px;
}

.attachment-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #eef3fb;
  border: 1px solid #c6d8f0;
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 11px;
  max-width: 220px;
}

.attachment-chip .attachment-thumb {
  width: 22px;
  height: 22px;
  border-radius: 2px;
}

.attachment-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="dark"] .attachment-chip {
  background: #2a3542;
  border-color: #3a4658;
  color: #e8e9ec;
}

/* modal dialog, replaces window.prompt/alert */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-overlay:not([hidden]) {
  display: flex;
}

/* win7 dialogs get roomier inner padding than the default 7.css window-body */
.modal-overlay .window-body {
  padding: 16px;
}

.modal-overlay .title-bar-text {
  padding: 1px 2px;
}

.modal-overlay .field-row-stacked {
  margin-bottom: 10px;
}

.modal-overlay .field-row-stacked:last-child {
  margin-bottom: 0;
}

/* invite key list, admin panel */
.invite-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
}

.invite-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid #ddd;
  font-size: 11px;
}

.invite-key-text {
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-status-used {
  color: #999;
}

.invite-status-open {
  color: #1a7a1a;
}

.toast {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 200;
}

/* chat header identity, replaces plain "direct message" text with name + pfp */
.chat-title-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}

.chat-title-identity.clickable {
  cursor: pointer;
}

.chat-title-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6a7ba0;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  text-transform: uppercase;
}

.chat-title-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* connection status dot, msn-messenger style, green when live, amber
   pulsing while a dropped socket is trying to reconnect */
.live-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b0b0b0;
  box-shadow: inset 0 0 0 1px #0002;
  flex-shrink: 0;
  margin-left: 2px;
}

.live-indicator.live {
  background: #4caf50;
  box-shadow: 0 0 3px #4caf50aa, inset 0 0 0 1px #2e7d32;
}

.live-indicator.reconnecting {
  background: #e0a72e;
  box-shadow: 0 0 3px #e0a72eaa, inset 0 0 0 1px #a97a1c;
  animation: live-indicator-pulse 1s ease-in-out infinite;
}

@keyframes live-indicator-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* reply preview above composer */
.reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #dfe8f6;
  border-left: 3px solid #2a7ade;
  padding: 4px 8px;
  margin-bottom: 6px;
  font-size: 12px;
  border-radius: 2px;
}

.reply-preview[hidden] {
  display: none;
}

.reply-preview-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.reply-preview-label {
  font-size: 10px;
  color: #555;
}

.reply-preview-label span {
  font-weight: bold;
  color: #2a4d7a;
}

.reply-preview-text {
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

/* context menu, styled to match 7.css window chrome since 7.css has no native menu */
.context-menu {
  position: fixed;
  z-index: 300;
  list-style: none;
  margin: 0;
  padding: 2px;
  min-width: 160px;
  background: var(--w7-surface, #fff);
  border: 1px solid var(--w7-w-bd, #000000b3);
  box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.4), inset 0 0 0 1px #fffd;
  border-radius: 2px;
  font-size: 12px;
}

.context-menu[hidden] {
  display: none;
}

.context-menu li {
  padding: 5px 10px 5px 6px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.context-menu li img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.context-menu li.danger img {
  filter: grayscale(1) sepia(1) hue-rotate(-50deg) saturate(6);
}

.context-menu li:hover {
  background: #316ac5;
  color: #fff;
}

.context-menu li.danger {
  color: #a00;
}

.context-menu li.danger:hover {
  background: #a00;
  color: #fff;
}

.context-menu li.separator {
  height: 1px;
  padding: 0;
  margin: 3px 2px;
  background: #ccc;
  cursor: default;
}

.context-menu li.separator:hover {
  background: #ccc;
}

/* profile card */
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
}

.profile-card-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #6a7ba0;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.profile-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-card-name {
  font-size: 15px;
  font-weight: bold;
}

.profile-card-username {
  font-size: 12px;
  color: #666;
}

.profile-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

/* friends list */
.hint-text {
  font-size: 11px;
  color: #666;
  margin: 4px 0 0;
}

.friends-section {
  margin-top: 10px;
}

.friends-section-title {
  font-size: 11px;
  font-weight: bold;
  color: #555;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.friends-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 160px;
  overflow-y: auto;
}

.friend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  border-bottom: 1px solid #eee;
}

.friend-item-name {
  flex: 1;
  font-size: 12px;
  cursor: pointer;
}

.friend-item-name:hover {
  text-decoration: underline;
}

.friend-item-actions {
  display: flex;
  gap: 4px;
}

.small-icon-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 20px;
  font-size: 10px;
  padding: 1px 8px 1px 6px;
}

.small-icon-btn img {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.small-icon-btn.danger {
  color: #a00;
}

html[data-theme="dark"] .small-icon-btn.danger {
  color: #ff8a80;
}

.friends-empty {
  font-size: 11px;
  color: #888;
  padding: 4px 2px;
}

.default-avatar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.default-avatar-option {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  background: none;
}

.default-avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.default-avatar-option.selected {
  border-color: #3a6ea5;
}

/* ---------- chat title action buttons (call, pins) ---------- */

.chat-title-action-btn {
  min-width: 22px;
  min-height: 20px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-title-action-btn img {
  width: 14px;
  height: 14px;
}

/* ---------- pinned bar ---------- */

.pinned-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  margin: var(--w7-w-space);
  margin-bottom: 0;
  background: #fff6d5;
  border: 1px solid #e0c876;
  font-size: 11px;
}

.pinned-bar img {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

#pinned-bar-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#pinned-bar-view {
  font-size: 11px;
  padding: 1px 8px;
}

html[data-theme="dark"] .pinned-bar {
  background: #4a4222;
  border-color: #7a6c2c;
  color: #e8e9ec;
}

/* ---------- typing indicator ---------- */

.typing-indicator {
  padding: 2px 14px;
  font-size: 11px;
  font-style: italic;
  color: #666;
  min-height: 16px;
}

html[data-theme="dark"] .typing-indicator {
  color: #aaa;
}

/* ---------- mention autocomplete ---------- */

.mention-suggestions {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 220px;
  max-height: 160px;
  overflow-y: auto;
  list-style: none;
  margin: 0 0 4px 0;
  padding: 2px;
  background: var(--w7-surface, #fff);
  border: 1px solid var(--w7-w-bd, #999);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 20;
}

.mention-suggestion-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 12px;
  cursor: pointer;
}

.mention-suggestion-item.active,
.mention-suggestion-item:hover {
  background: #3a6ea5;
  color: #fff;
}

.message-mention-tag {
  background: rgba(88, 101, 242, 0.16);
  color: #4552d6;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: bold;
}

html[data-theme="dark"] .message-mention-tag {
  background: rgba(88, 101, 242, 0.3);
  color: #a6acfa;
}

.message-row.mentions-me {
  background: rgba(88, 101, 242, 0.08);
  border-left: 2px solid #5865f2;
}

html[data-theme="dark"] .message-row.mentions-me {
  background: rgba(88, 101, 242, 0.16);
  border-left: 2px solid #5865f2;
}

.message-row.jump-highlight {
  background: #fff8e0;
}

html[data-theme="dark"] .message-row.jump-highlight {
  background: #423a1c;
}

/* ---------- search / mentions / pins result lists ---------- */

.search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}

.search-result-item {
  padding: 6px 4px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-size: 12px;
}

.search-result-item:hover {
  background: #f5f7fa;
}

.search-result-meta {
  font-size: 10px;
  color: #888;
  margin-bottom: 2px;
}

.search-result-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

html[data-theme="dark"] .search-result-item {
  border-bottom-color: #444;
}

html[data-theme="dark"] .search-result-item:hover {
  background: #333;
}

/* ---------- pin action on a message row ---------- */

.message-pin-tag {
  font-size: 10px;
  color: #a3801a;
  font-weight: bold;
  margin-left: 6px;
}

/* ---------- call ui ---------- */

.call-videos {
  position: relative;
  width: 100%;
  height: 220px;
  background: #111;
  overflow: hidden;
}

#call-remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}

#call-local-video {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 90px;
  height: 68px;
  object-fit: cover;
  border: 1px solid #fff;
  background: #222;
}

.call-status {
  text-align: center;
  font-size: 12px;
  margin: 8px 0;
  color: #555;
}

html[data-theme="dark"] .call-status {
  color: #ccc;
}

.call-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.incoming-call-from {
  text-align: center;
  font-size: 13px;
  padding: 8px 0;
}