.briefly-native-emoji { font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",emoji,sans-serif; font-weight:400; font-style:normal; }
@font-face { font-family: "Briefly Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.ttf") format("truetype"); }
@font-face { font-family: "Briefly Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.ttf") format("truetype"); }
@font-face { font-family: "Briefly Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.ttf") format("truetype"); }
@font-face { font-family: "Briefly Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-700.ttf") format("truetype"); }

/* Canonical stylesheet. Edit component rules directly; do not append patch blocks. */
/* The document stays fixed; only message lists scroll when the keyboard opens. */
@media (max-width:1024px), (pointer:coarse) {
  html body {position:fixed;inset:0;height:100%;overscroll-behavior:none;}
  html #root {position:absolute;top:var(--app-top,0px);height:var(--app-height,100dvh);overflow:hidden;}
  html[data-keyboard="open"] .briefly-ui .composer-wrap {padding-bottom:6px;}
  html[data-keyboard="open"] .modal.thread-modal .thread-composer {margin-bottom:6px;}
}
html,body,#root {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body {
  height: var(--app-height, 100dvh);
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 "Briefly Inter",Arial,sans-serif;
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.shell {
  height: var(--app-height, 100dvh);
  display: grid;
  grid-template-columns: 340px minmax(0,1fr);
  overflow: hidden;
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
}

.workspace-head {
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.workspace-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  text-align: left;
  background: none;
  color: var(--text);
}

.workspace-logo {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-weight: 700;
}

.workspace-meta {
  min-width: 0;
  flex: 1;
}

.workspace-kicker {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

.workspace-name {
  font-size: 16px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-switch-hint {
  color: var(--muted);
}

.workspace-switch-hint small {
  display: none;
}

.workspace-switch-hint b {
  font-size: 16px;
}

.sidebar-tools {
  display: flex;
  gap: 8px;
  padding: 14px 14px 6px;
}

.sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 0 10px;
  background: var(--panel);
  color: var(--muted);
}

.sidebar-search input {
  width: 100%;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  font-size: 14px;
  color: var(--text);
}

.sidebar-search input::placeholder {
  color: var(--muted);
}

.quick-new {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: transparent;
  font-size: 22px;
  color: var(--muted);
}

.quick-new:hover {
  background: var(--hover);
}

.nav-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 8px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

#conversationNav {
  min-width: 0;
}

.folder-tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sidebar);
  padding: 0 6px;
  border-bottom: 1px solid var(--line);
}

.folder-tabs::-webkit-scrollbar {
  display: none;
}

.folder-tab {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.folder-tab:hover {
  color: var(--text);
}

.folder-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.folder-tab b {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.folder-list-head {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.folder-list-head strong {
  font-weight: 500;
}

.folder-add {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 18px;
}

.folder-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 66px;
  min-height: 66px;
  padding: 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  color: var(--text);
}

.nav-item:hover {
  background: var(--hover);
}

.nav-item.active {
  background: var(--active);
  color: var(--active-text);
}

.nav-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 5px;
}

.nav-top,.nav-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.nav-label {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 600;
}

.nav-time {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
}

.nav-preview {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.nav-item.has-unread .nav-label {
  font-weight: 750;
}

.nav-item.has-unread .nav-preview {
  color: var(--text);
}

.nav-fav {
  width: 18px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  opacity: 0;
  font-size: 14px;
}

.nav-item:hover .nav-fav,.nav-fav:focus-visible,.nav-fav.on {
  opacity: 1;
}

.nav-fav.on {
  color: var(--accent);
}

.avatar,.chat-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  object-fit: cover;
  background: var(--avatar);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

.avatar.nav-avatar,.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.avatar.sm {
  width: 32px;
  height: 32px;
  font-size: 11px;
}

.avatar.lg {
  width: 82px;
  height: 82px;
  font-size: 26px;
}

.avatar.xl {
  width: 104px;
  height: 104px;
  font-size: 32px;
}

.chat-avatar {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.chat-avatar img {
  min-width: 0;
  min-height: 0;
  object-position: center;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
}

.presence-avatar {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
}

.presence-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--sidebar);
  border-radius: 50%;
  background: var(--muted-2);
}

.presence-avatar.online .presence-dot {
  background: var(--online);
}

.sidebar-foot {
  height: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--sidebar-foot);
  cursor: pointer;
  min-height: 82px;
}

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

.me-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.me-name {
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.me-status {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}

#logoutBtn {
  display: none;
}

#themeBtn {
  font-size: 22px;
  flex-shrink: 0;
}

.shell > .main {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  background: var(--panel);
}

.chat-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line);
}

.chat-head-title-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  color: var(--text);
}

.chat-head-avatar {
  display: flex;
  flex-shrink: 0;
}

.chat-head-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
}

.chat-title {
  font-size: 17px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-sub {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55vw;
}

.chat-head-chevron {
  color: var(--muted);
  font-size: 22px;
  margin-left: 6px;
}

.chat-spacer {
  flex: 1;
}

.members-pill {
  display: none;
}

.messages {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px max(18px,calc((100% - 940px)/2));
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  overscroll-behavior: contain;
}

.message-date-separator { display: flex; justify-content: center; clear: both; padding: 14px 0; }
.message-date-separator span,.message-date-floating span { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 5px 13px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); color: var(--muted); font-size: 12px; line-height: 1.4; text-align: center; }
.message-date-floating { position: sticky; top: 8px; height: 0; z-index: 9; text-align: center; pointer-events: none; }
.message-date-floating[hidden] { display: none; }
.message-date-floating span { box-shadow: 0 2px 8px #0000000d; }

.message {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  padding: 3px 0;
  margin: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.message:hover,.message.context-menu-open {
  background: transparent;
}

.message.mine {
  justify-content: flex-end;
}

.message.theirs {
  justify-content: flex-start;
}

.message-avatar {
  flex-shrink: 0;
  padding: 0 0 3px;
}

.message-stack {
  max-width: min(80%,640px);
}

.message-content-flat {
  position: relative;
  background: var(--bubble-in);
  border: 1px solid color-mix(in srgb,var(--line) 60%,transparent);
  padding: 8px 12px 6px;
  border-radius: 12px 12px 12px 4px;
  min-width: 0;
  box-shadow: 0 1px 1px #00000008;
  text-align: left;
}

.message.mine .message-stack {
  text-align: left;
}

.msg-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 3px;
  cursor: pointer;
}

.msg-body {
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0;
}

.briefly-ui .msg-body.emoji-only, .modal.thread-modal .thread-body.emoji-only {
  font-size: 48px;
  line-height: 1.25;
}

.msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
}

.msg-time {
  font-size: 11px;
  color: var(--muted-2);
}

.message.grouped {
  padding-top: 1px;
  padding-bottom: 2px;
}

.message.grouped .message-avatar {
  visibility: hidden;
}

.message.grouped .msg-name {
  display: none;
}

.composer-wrap {
  position: relative;
  padding: 10px max(18px,calc((100% - 940px)/2)) 14px;
  background: var(--bg);
  min-height: 72px;
  z-index: 4;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--panel-soft);
  padding: 6px;
}

.composer:focus-within {
  border-color: var(--accent);
}

.composer textarea {
  min-width: 0;
  flex: 1;
  resize: none;
  min-height: 38px;
  max-height: 180px;
  padding: 7px 5px;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
}

.composer textarea::placeholder {
  color: var(--muted);
}

.composer button {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  padding: 7px;
  background: none;
  color: var(--muted);
  font-size: 20px;
}

.composer button:hover {
  background: var(--hover);
}

.composer .send {
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 16px;
}

.composer .send:hover {
  background: var(--accent-hover);
}

.composer svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.compose-symbol {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  pointer-events: none;
}

.composer button:focus-visible,.thread-composer button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.composer button:disabled,.thread-send:disabled {
  opacity: .45;
  cursor: default;
}

.composer .voice-mic-svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.composer-voice.recording {
  color: var(--danger);
}

.account-menu {
  position: fixed;
  width: 220px;
  z-index: 95;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow);
}

.account-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text);
  font-size: 13px;
}

.account-menu button:hover {
  background: var(--hover);
}

.account-menu button:last-child {
  color: var(--danger);
}

* {
  box-sizing: border-box;
}

button,input,textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none;
}

.auth {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(440px,100%);
  background: var(--panel);
  border: 1px solid var(--line);
}

.brandmark {
  background: var(--accent);
  color: var(--accent-contrast);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}

.auth h1 {
  letter-spacing: -.02em;
  margin: 0 0 8px;
}

.auth p {
  color: var(--muted);
  margin: 0 0 22px;
  line-height: 1.45;
}

.field {
  display: grid;
  gap: 7px;
  margin: 13px 0;
}

.field label {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}

.field input,.field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 12px;
  outline: none;
  background: var(--panel);
  color: var(--text);
}

.field input:focus,.field textarea:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--text) 10%,transparent);
}

.primary {
  border: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 9px;
  padding: 10px 14px;
  font-weight: 700;
}

.primary:hover {
  background: var(--accent-hover);
}

.ghost {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  border-radius: 9px;
  padding: 9px 12px;
}

.ghost:hover {
  background: var(--hover);
}

.error {
  background: var(--danger-soft);
  color: var(--danger);
  padding: 10px 12px;
  border-radius: 9px;
  margin-top: 12px;
  font-size: 13px;
}

.icon-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
}

.icon-btn:hover {
  background: var(--hover);
  color: var(--text);
}

.badge {
  text-align: center;
}

.empty {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.empty strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  margin-bottom: 6px;
}

.receipt-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 13px;
  margin-left: -2px;
  color: var(--muted-2);
  vertical-align: middle;
  border: 0;
  background: transparent;
  padding: 0;
  flex: 0 0 auto;
}

.receipt-check svg {
  width: 15px;
  height: 10px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.receipt-check.read {
  cursor: pointer;
  color: var(--receipt);
}

.receipt-check.read:hover {
  color: var(--text);
}

.attachment {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  background: var(--panel-soft);
  max-width: 420px;
}

.attachment:hover {
  background: var(--hover);
}

.attachment .fileicon {
  font-size: 18px;
}

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

.reaction-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.reaction {
  border: 1px solid var(--line-strong);
  background: var(--panel-soft);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
}

.reaction .reaction-emoji { font-size: 22px; line-height: 1.15; }
.reaction .reaction-count { font-size: 12px; line-height: 1; }

.reaction:hover {
  background: var(--hover);
}

.reaction.mine {
  border-color: var(--text);
  background: var(--active);
}

.file-preview {
  display: none;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line-strong);
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 9px;
  background: var(--panel-soft);
  font-size: 12px;
}

.file-preview.show {
  display: flex;
}

.attachment-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.attachment-queue-items {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
  padding-bottom: 4px;
}

.attachment-queue-item {
  position: relative;
  flex: 0 0 110px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
}

.attachment-queue-item img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 4px;
}

.attachment-queue-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 16px;
}

.attachment-queue-item button {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 23px;
  height: 23px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.main.attachment-dragging #messages {
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
}

.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(8,9,11,.45);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50;
  backdrop-filter: blur(2px);
}

.modal {
  background: var(--panel);
  width: min(520px,100%);
  max-height: 86vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.modal-head {
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
}

.modal-head h2 {
  font-size: 18px;
  margin: 0;
  flex: 1;
}

.modal-body {
  padding: 20px;
}

.modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Compact discard confirmation, shared by message and chat editors. */
.modal.edit-discard-confirm { width:min(360px,100%); max-height:calc(100dvh - 40px); border-radius:14px; box-sizing:border-box; }
.modal.edit-discard-confirm > .modal-head { padding:14px 16px 8px; border:0; gap:8px; }
.modal.edit-discard-confirm > .modal-head h2 { font-size:16px; line-height:1.3; }
.modal.edit-discard-confirm > .modal-head .close { width:28px; height:28px; min-width:28px; min-height:28px; padding:0; flex:none; font-size:20px; }
.modal.edit-discard-confirm > .modal-body { padding:0 16px 14px; }
.modal.edit-discard-confirm .modal-body p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.modal.edit-discard-confirm > .modal-foot { padding:0 16px 16px; border:0; display:flex; flex-direction:row; flex-wrap:nowrap; gap:8px; justify-content:flex-end; }
.modal.edit-discard-confirm > .modal-foot button { width:auto; min-width:0; min-height:36px; padding:8px 12px; font-size:13px; line-height:1.3; border-radius:9px; white-space:normal; }
.modal.edit-discard-confirm .discard-edit { color:#e15d64; }
.modal.edit-discard-confirm:focus { outline:none; }
@media (max-width:360px) {
 .modal.edit-discard-confirm > .modal-foot { flex-wrap:wrap; }
 .modal.edit-discard-confirm > .modal-foot button { flex:1 1 auto; }
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 18px;
}

.segmented button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 8px;
  border-radius: 7px;
}

.segmented button.active {
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.member-list {
  border: 1px solid var(--line);
  border-radius: 10px;
  max-height: 260px;
  overflow: auto;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}

.member-row:last-child {
  border-bottom: 0;
}

.member-row label {
  flex: 1;
}

.reader-list {
  display: grid;
  gap: 2px;
}

.reader-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
}

.reader-row:hover,.clickable:hover {
  background: var(--hover);
}

.clickable {
  cursor: pointer;
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

.invite-box {
  display: flex;
  gap: 8px;
}

.invite-box input {
  flex: 1;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 10px;
  background: var(--panel-soft);
  color: var(--text);
}

.profile-edit-avatar {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.chat-avatar-button { display: flex; align-items: center; justify-content: center; align-self: center; line-height: 1; border: 0; background: transparent; padding: 0; cursor: pointer; flex-shrink: 0; border-radius: 12px; }
.chat-avatar-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Profile card: canonical component styles. */
.modal.profile-modal { width: min(400px,calc(100vw - 24px)); max-height: calc(var(--app-height,100dvh) - 24px); display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; }
.profile-modal .modal-head { padding: 14px 16px; flex-shrink: 0; }
.profile-modal .modal-head h2 { font-size: 16px; font-weight: 600; }
.profile-modal .modal-body { padding: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.profile-sheet { padding: 16px; }
.profile-hero { display: flex; gap: 12px; align-items: center; }
.profile-avatar-open { border: 0; padding: 0; background: none; flex: 0 0 80px; cursor: zoom-in; border-radius: 20px; }
.profile-avatar-open .avatar { width: 80px; height: 80px; border-radius: 20px; margin: 0; font-size: 28px; }
.profile-identity { min-width: 0; flex: 1; }
.profile-name-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.profile-name { font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.profile-badge { display: inline-flex; max-width: 100%; overflow-wrap: anywhere; padding: 2px 5px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--muted); font-size: 10px; font-weight: 500; }
.profile-subtitle { color: var(--muted); font-size: 12px; margin: 3px 0; overflow-wrap: anywhere; }
.profile-status { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.profile-status:empty { display: none; }
.profile-bio { padding: 12px 14px; border: 1px solid var(--line); background: var(--panel-soft); border-radius: 12px; margin-top: 16px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.profile-bio-label { color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.profile-actions { margin: 14px 0; }
.profile-actions button { width: 100%; min-height: 38px; border-radius: 9px; font-size: 13px; padding: 8px 12px; }
.profile-info { border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; overflow: hidden; }
.profile-info > * + * { border-top: 1px solid var(--line); }
.profile-info-row,.profile-id-row { width: 100%; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 8px; padding: 8px 0; border: 0; background: none; color: var(--text); text-align: left; }
.profile-id-row { grid-template-columns: 24px minmax(0,1fr) auto; cursor: pointer; }
.profile-id-row:hover { background: var(--hover); border-radius: 8px; }
.profile-info-icon { color: var(--muted); font-size: 14px; text-align: center; }
.profile-info-label { display: block; color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.profile-info-value,.profile-id-row strong { font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
.profile-id-row>span:nth-child(2) { min-width: 0; }
.profile-id-row strong { font-size: 11px; }
.profile-id-row em { font-style: normal; font-size: 11px; color: var(--muted); }
.profile-push { border-top: 1px solid var(--line); padding: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.profile-push>div { min-width: 0; flex: 1 1 145px; display: flex; flex-direction: column; gap: 4px; }
.profile-push b { font-size: 12px; font-weight: 500; }
.profile-push span { font-size: 11px; color: var(--muted); }
.profile-push button { padding: 6px 9px; border-radius: 8px; font-size: 12px; min-height: 34px; }
.profile-account-actions { border-top: 1px solid var(--line); padding-top: 8px; }
.profile-logout { border: 0; background: none; color: var(--danger); padding: 8px 0; font-size: 13px; cursor: pointer; }
@media (hover:none) { .profile-actions button,.profile-push button,.profile-logout,.profile-id-row { min-height: 44px; } }

.profile-icon { width: 18px; height: 18px; flex: 0 0 18px; vertical-align: middle; color: var(--muted); }
.profile-notifications { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 12px; margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); color: var(--text); cursor: pointer; }
.profile-notifications > span:first-of-type { flex: 1; min-width: 0; }
.profile-notifications b { display: block; font-size: 13px; font-weight: 500; }
.profile-notifications small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.modal.profile-photo-modal { width: min(720px,calc(100vw - 24px)); }
.profile-photo { display: block; width: 100%; max-height: 70dvh; object-fit: contain; border-radius: 12px; }
.profile-avatar-placeholder { display: grid; place-items: center; padding: 32px; }
.profile-avatar-placeholder .avatar { width: 160px; height: 160px; font-size: 56px; }
.modal.notification-modal { width: min(360px,calc(100vw - 24px)); }
.notification-modal .modal-head { padding: 12px 16px; }
.notification-modal .modal-head h2 { font-size: 16px; }
.notification-modal .modal-foot { padding: 10px 16px; flex-shrink: 0; }
.notification-modal .modal-foot button { min-height: 36px; padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.notification-settings { padding: 4px 16px 12px; }

.notification-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  min-height: 42px;
  position: relative;
  cursor: pointer;
}
.notification-toggle input.status-dnd { position: absolute; right: 0; width: 36px; height: 22px; opacity: 0; cursor: pointer; margin: 0; }
.notification-toggle .status-switch { flex: 0 0 36px; }
.notification-hint { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 8px 0 0; }
.notification-sound-picker { margin: 8px 0 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-soft); }
.notification-volume { display: flex; align-items: center; gap: 12px; padding: 13px 2px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.notification-volume svg { width: 20px; height: 20px; display: block; }
.notification-volume input { flex: 1; min-width: 0; width: 100%; accent-color: var(--accent); cursor: pointer; }
.notification-volume output { min-width: 36px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.notification-sound-list { border: 0; padding: 6px 0; margin: 0; min-width: 0; }
.notification-sound-list legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.notification-sound-option { display: block; position: relative; cursor: pointer; }
.notification-sound-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.notification-sound-row { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 9px; color: var(--text); font-size: 14px; }
.notification-sound-row svg { width: 21px; height: 21px; color: var(--muted); flex-shrink: 0; }
.notification-sound-check { margin-left: auto; visibility: hidden; }
.notification-sound-option:hover .notification-sound-row { background: var(--hover); }
.notification-sound-option input:checked + .notification-sound-row { background: var(--active); color: var(--accent); }
.notification-sound-option input:checked + .notification-sound-row svg { color: var(--accent); }
.notification-sound-option input:checked + .notification-sound-row .notification-sound-check { visibility: visible; }
.notification-sound-option input:focus-visible + .notification-sound-row { outline: 2px solid var(--accent); outline-offset: -2px; }
.notification-mode { display: grid; grid-template-columns: 88px minmax(0,1fr); align-items: center; gap: 10px; font-size: 13px; padding: 6px 0; }
.notification-mode select { width: 100%; min-width: 0; min-height: 36px; padding: 7px 8px; font-size: 12px; color: var(--text); background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; }
.notification-details { padding-top: 8px; border-top: 1px solid var(--line); }
.notification-details summary { cursor: pointer; color: var(--muted); font-size: 11px; }
@media(max-width:420px) { .notification-mode select { font-size: 16px; } .notification-mode { grid-template-columns: 1fr; gap: 5px; } }

/* Text is edited in its existing slot; no alternate form or geometry. */
.profile-sheet [data-profile-field] { min-width: 0; }
.profile-sheet [data-profile-field]:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.profile-sheet .profile-empty-badge { visibility: hidden; }
.profile-sheet.profile-editing .profile-empty-badge { visibility: visible; }
.profile-sheet.profile-editing [data-profile-field] { cursor: text; border-radius: 3px; outline: 1px dashed var(--line); outline-offset: 2px; }
.profile-sheet.profile-editing [data-profile-field]:focus { outline: 1px solid var(--accent); background: var(--panel-soft); }
.profile-sheet [data-profile-field="bio"] { white-space: pre-wrap; min-height: 1.5em; }
.profile-sheet .profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-sheet .profile-actions button { flex: 1 1 0; width: auto; min-width: 0; }
.profile-sheet #profileEditError { flex: 1 0 100%; color: var(--danger, #bf3030); font-size: 12px; }
.profile-sheet #profileEditError:empty { display: none; }
.profile-sheet .profile-avatar-open { position: relative; }
.profile-sheet.profile-editing .profile-avatar-open { cursor: pointer; }
.profile-avatar-edit-hint { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 0; color: white; background: #0009; font-size: 10px; line-height: 1.4; border-radius: 0 0 20px 20px; pointer-events: none; }

/* Shared emoji picker for messages, reactions and statuses. */
.emoji-pop { position:fixed; z-index:310; box-sizing:border-box; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:16px; padding:10px; width:min(360px,calc(100vw - 16px)); max-height:calc(var(--app-height,100dvh) - 16px); display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.emoji-heading { font-size:12px; font-weight:600; color:var(--muted); padding:2px 4px; }
.emoji-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); align-content:start; overflow:auto; min-height:0; height:216px; overscroll-behavior:contain; }
.emoji-pop button { border:0; background:transparent; color:var(--text); border-radius:7px; padding:4px; cursor:pointer; }
.emoji-grid button { font-size:26px; min-height:40px; }
.emoji-categories { display:flex; flex-shrink:0; gap:2px; overflow-x:auto; padding-top:6px; border-top:1px solid var(--line); }
.emoji-categories button { flex:1 0 28px; font-size:19px; height:36px; }
.emoji-pop button:hover,.emoji-pop button:focus-visible,.emoji-categories button[aria-selected="true"] { background:var(--active); }
.briefly-filters .folder-create-icon { margin-left:auto; width:28px; min-width:28px; padding:0; font-size:20px; }
.modal.chat-folder-modal { width:min(440px,calc(100vw - 24px)); max-height:calc(var(--app-height,100dvh) - 24px); display:flex; flex-direction:column; overflow:hidden; border-radius:16px; }
.chat-folder-modal .modal-head { padding:16px 18px; flex:0 0 auto; }
.chat-folder-modal .modal-head h2 { font-size:17px; }
.chat-folder-modal .modal-body { padding:14px 18px; min-height:0; overflow:auto; }
.chat-folder-modal .modal-foot { display:flex; gap:8px; padding:12px 18px; flex:0 0 auto; }
.chat-folder-modal .modal-foot button { padding:8px 12px; border:0; border-radius:8px; font-size:13px; cursor:pointer; }
.chat-folder-modal .folder-delete { margin-right:auto; color:var(--danger); background:transparent; }
.chat-folder-modal .folder-cancel { background:var(--hover); color:var(--text); }
.chat-folder-editor { display:flex; flex-direction:column; gap:10px; }
.chat-folder-editor>label { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); }
.chat-folder-editor input:not([type="checkbox"]) { width:100%; box-sizing:border-box; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:var(--panel-soft); color:var(--text); font-size:16px; }
.folder-selection-count { font-size:12px; color:var(--muted); }
.folder-choices { max-height:36dvh; overflow:auto; }
.folder-choice { position:relative; display:flex; align-items:center; gap:10px; min-height:54px; padding:0 8px; border-radius:9px; cursor:pointer; }
.folder-choice:hover,.folder-choice:has(input:checked) { background:var(--active); }
.folder-choice input { position:absolute; opacity:0; width:1px; height:1px; }
.folder-choice:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:-2px; }
.folder-choice .avatar,.folder-choice .chat-avatar { width:32px; height:32px; min-width:32px; }
.folder-choice-copy { min-width:0; flex:1; display:flex; flex-direction:column; }
.folder-choice-copy b { font-size:13px; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.folder-choice-copy small { font-size:11px; color:var(--muted); }
.folder-choice-check { width:18px; height:18px; border:1px solid var(--line-strong); border-radius:50%; display:grid; place-items:center; color:transparent; font-size:12px; }
.folder-choice:has(input:checked) .folder-choice-check { background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
.folder-error { color:var(--danger); font-size:12px; }

.theme-menu {
  position:fixed; z-index:90; width:244px; max-width:calc(100vw - 16px);
  max-height:calc(var(--app-height,100dvh) - 16px); overflow:auto; box-sizing:border-box;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:6px;
}
.theme-menu-title { padding:9px 12px 7px; color:var(--muted); font-size:12px; font-weight:500; }
.theme-option { width:100%; min-height:42px; display:grid; grid-template-columns:20px minmax(0,1fr) 16px; align-items:center; gap:10px; border:0; background:transparent; color:var(--text); padding:9px 12px; border-radius:9px; text-align:left; cursor:pointer; }
.theme-option:hover { background:var(--hover); }
.theme-option.active { background:var(--active); }
.theme-option .theme-icon { display:flex; color:var(--muted); }
.theme-option .theme-icon svg { width:20px; height:20px; }
.theme-option b { font-size:13px; font-weight:500; white-space:nowrap; }
.theme-option .theme-status { display:flex; color:var(--muted); }
.theme-option .theme-status svg { width:16px; height:16px; }
.theme-option.active .theme-status { color:var(--accent); }
.theme-menu-divider { height:1px; margin:6px 10px; background:var(--line); }

.toast {
  max-width: min(440px,calc(100vw - 32px));
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 11px 14px;
  border-radius: 10px;
  z-index: 100;
  box-shadow: var(--shadow);
  font-size: 13px;
}

@media (max-width:820px) {
  .badge {
    display: none;
  }
}

.section-head {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 2px 5px;
}

.section-toggle {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 5px;
  text-align: left;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .025em;
}

.section-toggle:hover {
  background: var(--hover);
  color: var(--text);
}

.section-toggle .chev {
  font-size: 13px;
  width: 12px;
  text-align: center;
  transition: transform .14s ease;
}

.section-toggle b {
  margin-left: auto;
  font-size: 10px;
  font-weight: 650;
  color: var(--muted-2);
}

.section-add {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 7px;
  font-size: 18px;
  line-height: 1;
}

.section-add:hover {
  background: var(--hover);
  color: var(--text);
}

.section-empty {
  padding: 8px 12px;
  color: var(--muted-2);
  font-size: 11px;
}

.badge {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--panel);
  font-size: 9.5px;
  font-weight: 760;
}

@media (max-width:820px) {
  .section-head {
    display: none;
  }
}

.section-head,.section-list {
  all: unset;
}

.workspace-chevron {
  font-size: 18px;
  color: var(--muted);
  padding-right: 4px;
}

.workspace-list {
  display: grid;
  gap: 7px;
}

.workspace-option {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 24px;
  align-items: center;
  gap: 11px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel-soft);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.workspace-option:hover {
  background: var(--hover);
  border-color: var(--line-strong);
}

.workspace-option.active {
  background: var(--active);
  border-color: var(--line-strong);
}

.workspace-option-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-weight: 800;
}

.workspace-option span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.workspace-option b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-option small {
  color: var(--muted);
}

.workspace-option i {
  font-style: normal;
  color: var(--text);
}

.workspace-create-card {
  margin-top: 10px;
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.workspace-create-card:hover {
  background: var(--hover);
}

.workspace-create-card>span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--panel-soft);
  font-size: 24px;
}

.workspace-create-card>div {
  display: grid;
  gap: 3px;
}

.workspace-create-card small {
  color: var(--muted);
}

.field-hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.field textarea {
  width: 100%;
  resize: vertical;
  min-height: 96px;
}

.chat-ident {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.profile-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.profile-presence i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-2);
}

.profile-presence.online {
  color: var(--online);
}

.profile-presence.online i {
  background: var(--online);
}

.workspace-option-logo {
  background: var(--avatar-bg,var(--avatar));
  color: #fff;
}

.reply-preview {
  display: none;
  margin: 0 0 10px;
}

.reply-preview.show {
  display: block;
}

.reply-preview-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--panel-soft);
}

.reply-preview-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.reply-preview-copy b {
  font-size: 12px;
}

.reply-preview-copy span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-ref {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  cursor: pointer;
}

.reply-ref-name {
  font-weight: 760;
  color: var(--text);
}

.reply-ref-text {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.thread-chip {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
}

.thread-chip:hover {
  background: var(--hover);
  color: var(--text);
  border-color: var(--line-strong);
}

.thread-chip.filled {
  background: color-mix(in srgb,var(--accent) 14%, var(--panel));
  border-color: color-mix(in srgb,var(--accent) 38%, var(--line));
  color: var(--text);
}

.thread-root {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.thread-list {
  flex-direction: column;
  gap: 12px;
  overflow: auto;
}

.thread-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.thread-avatar {
  flex: 0 0 auto;
}

.thread-bubble {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--panel-soft);
}

.thread-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.thread-head span {
  font-size: 12px;
  color: var(--muted-2);
}

.thread-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.link-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 0;
}

.link-btn:hover {
  color: var(--text);
}

.thread-composer {
  flex-direction: column;
  margin-top: 10px;
}

.thread-composer textarea {
  border-radius: 12px;
}

.thread-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

html[data-theme="dark"] .thread-bubble {
  background: #151a21;
}

@media (max-width:760px) {
  .thread-list {
    max-height: 40vh;
  }
}

.format-pop button {
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  display: grid;
  place-items: center;
}

.format-pop button:hover {
  background: var(--hover);
}

.thread-chip {
  display: none;
}

.thread-link {
  font-weight: 650;
  cursor: pointer;
}

.thread-link:hover {
  color: var(--text);
  text-decoration: underline;
}

.reply-ref {
  margin-bottom: 6px;
  border-left-width: 2px;
}

.thread-root-shell {
  padding: 22px 0 18px;
}

.thread-comments-head {
  padding: 13px 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}

.thread-list {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  display: block;
  padding: 10px 0 18px;
  scrollbar-gutter: stable;
}

.thread-entry {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 10px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.thread-entry .thread-avatar {
  width: 48px;
  display: flex;
  justify-content: center;
}

.thread-entry-main {
  min-width: 0;
  padding-top: 1px;
}

.thread-entry-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 4px;
}

.thread-entry-head b {
  font-size: 14px;
  font-weight: 760;
  cursor: pointer;
  color: var(--text);
}

.thread-entry-head span {
  font-size: 12px;
  color: var(--muted-2);
  font-weight: 500;
}

.thread-body {
  font-size: 14px;
  line-height: 1.48;
  color: var(--text);
  word-break: break-word;
  white-space: normal;
}

.thread-body p {
  margin: 0;
}

.thread-entry .reply-ref {
  max-width: 620px;
  margin: 5px 0 7px;
}

.thread-attachment {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
}

.thread-reactions {
  margin-top: 8px;
}

.thread-empty {
  padding: 34px 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.thread-loading {
  padding: 24px 12px;
}

.thread-reply-preview {
  display: none;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  border-radius: 9px;
  background: var(--panel-soft);
  align-items: center;
  gap: 10px;
}

.thread-reply-preview.show {
  display: flex;
}

.thread-reply-preview>div {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.thread-reply-preview b {
  font-size: 11.5px;
}

.thread-reply-preview span {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thread-composer {
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--panel-soft);
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 42px 44px;
  align-items: end;
  gap: 3px;
  box-shadow: none;
}

.thread-composer:focus-within {
  border-color: var(--muted);
}

.thread-compose-center {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.thread-composer textarea {
  min-height: 44px;
  max-height: 180px;
  width: 100%;
  resize: none;
  border: 0;
  outline: 0;
  padding: 12px 6px 10px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.thread-compose-icon,.thread-send {
  width: 36px;
  height: 36px;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 7px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
}

.thread-compose-icon:hover {
  background: var(--hover);
  color: var(--text);
}

.thread-send {
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 17px;
}

.thread-file-chip {
  display: none;
  padding: 7px 6px 0;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
}

.thread-file-chip.show {
  display: flex;
}

.thread-file-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.thread-file-chip button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
}

html[data-theme="dark"] .thread-comments-head {
  border-color: #292d2b;
  color: #8e938f;
}

html[data-theme="dark"] .thread-composer {
  background: #1b1e1c;
  border-color: #343835;
}

html[data-theme="dark"] .thread-reply-preview {
  background: #1d211e;
}

html[data-theme="dark"] .thread-attachment {
  background: #1d201e;
  border-color: #303430;
}

@media (max-width:900px) {
  .thread-root-shell {
    padding: 14px 0 12px;
  }

  .thread-entry {
    grid-template-columns: 40px minmax(0,1fr);
    gap: 9px;
    padding: 9px 6px;
  }

  .thread-entry .thread-avatar {
    width: 40px;
  }

  .thread-composer {
    grid-template-columns: 38px minmax(0,1fr) 38px 40px;
  }
}

.ui-smile-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thread-emoji {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  transition: background .15s ease,color .15s ease,transform .15s ease;
}

.thread-emoji:hover {
  background: var(--hover);
  color: var(--text);
}

.thread-emoji:active {
  transform: scale(.94);
}

.thread-emoji .ui-smile-icon {
  pointer-events: none;
}

.reply-ref:hover {
  background: transparent;
}

.reply-ref-name {
  font-size: 11.5px;
  line-height: 1.2;
}

.reply-ref-text {
  font-size: 11.5px;
  line-height: 1.2;
}

.thread-link {
  margin: 3px 7px 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
}

html[data-theme="dark"] .reply-ref {
  border-left-color: #8fb6a7;
}

html:not([data-theme="dark"]) {
  --app-shell: #dfe4e9;
  --sidebar-bg: #eef1f4;
  --sidebar-head: #e5e9ed;
  --sidebar-card: #ffffff;
  --sidebar-card-hover: #f8fafb;
  --sidebar-card-active: #dde3e8;
  --chat-bg: #ffffff;
  --messages-bg: #fafbfc;
  --chat-head-bg: #ffffff;
  --composer-area: #f5f7f9;
  --bubble-me: #edf2f4;
  --bubble-other: #ffffff;
}

html:not([data-theme="dark"]) body {
  background: var(--app-shell);
}

html[data-theme="dark"] body {
  background: var(--app-shell);
}

.reply-ref {
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  margin: 1px 0 6px;
  padding: 2px 0 2px 8px;
  background: transparent;
  border: 0;
  border-left: 2px solid #8a949e;
  border-radius: 0;
}

.chat-info-modal {
  width: min(560px,calc(100vw - 24px));
}

.chat-info-sheet {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.chat-info-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.chat-info-title {
  color: var(--text);
  font-weight: 780;
  letter-spacing: -.02em;
}

.chat-info-type {
  margin-top: 4px;
  color: var(--muted);
}

.chat-info-description {
  max-width: 440px;
  margin-top: 12px;
  color: var(--text);
}

.chat-info-edit {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
}

.chat-info-edit textarea {
  resize: vertical;
  min-height: 92px;
}

.chat-info-section-title {
  justify-content: space-between;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 760;
  color: var(--text);
}

.chat-info-section-title span {
  color: var(--muted);
  font-weight: 650;
}

.chat-info-members {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chat-info-member {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 11px;
  text-align: left;
}

.chat-info-member:hover {
  background: var(--hover);
}

.chat-info-member > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-info-member b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.chat-info-member small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.chat-info-member i {
  color: var(--muted);
  font-size: 20px;
  font-style: normal;
}

.chat-info-empty {
  color: var(--muted);
  padding: 15px;
  text-align: center;
}

.chat-info-modal .modal-foot {
  grid-template-columns: repeat(
        auto-fit,
        minmax(160px,1fr)
      );
}

.chat-info-modal .modal-foot button {
  min-width: 0;
  min-height: 46px;
  margin: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-info-avatar-wrap {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}

.chat-info-section-title {
  display: grid;
  grid-template-columns: minmax(0,1fr)
      auto
      auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
}

.chat-info-add-member {
  height: 36px;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  white-space: nowrap;
  font-size: 12px;
}

.chat-info-section-title > span {
  min-width: 26px;
  text-align: right;
}

.chat-member-picker-help {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 12px;
}

.chat-member-picker-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 430px;
  overflow: auto;
}

.chat-member-pick {
  display: grid;
  grid-template-columns: 22px
      42px
      minmax(0,1fr)
      24px;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}

.chat-member-pick:hover {
  background: var(--hover);
}

.chat-member-pick:has(input:checked) {
  background: var(--active);
  border-color: var(--line-strong);
}

.chat-member-pick input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: currentColor;
}

.chat-member-pick > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-member-pick b,.chat-member-pick small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-member-pick b {
  color: var(--text);
  font-size: 14px;
}

.chat-member-pick small {
  color: var(--muted);
  font-size: 12px;
}

.chat-member-check {
  color: var(--text);
  opacity: 0;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.chat-member-pick:has(input:checked)
.chat-member-check {
  opacity: 1;
}

.chat-members-add-modal .modal-foot {
  display: grid;
  grid-template-columns: repeat(
        auto-fit,
        minmax(150px,1fr)
      );
  gap: 10px;
}

.chat-members-add-modal .modal-foot button {
  min-height: 44px;
  width: 100%;
  margin: 0;
  border-radius: 11px;
}

.voice-mic-svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes voicePulse {
  0%,100% {
    transform: scale(1);
  }

  50% {
    transform: scale(.9);
  }
}

.voice-recording-badge {
  position: absolute;
  right: 30px;
  top: -38px;
  z-index: 8;
  min-height: 32px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.voice-recording-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e44848;
  flex: 0 0 auto;
}

.voice-recording-badge span {
  font-size: 13px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.voice-recording-badge b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.voice-player {
  width: min(360px,100%);
  min-height: 54px;
  margin-top: 7px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 40px
      minmax(0,1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel-soft);
}

.voice-player audio {
  display: none;
}

.voice-play {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  color: var(--panel);
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 14px;
  cursor: pointer;
}

.voice-player-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.voice-progress {
  position: relative;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
}

.voice-progress > div {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--text);
  pointer-events: none;
}

.voice-time-row {
  gap:12px;white-space:nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

@media (max-width:760px) {
  .voice-recording-badge {
    left: 10px;
    right: 10px;
    top: -40px;
    justify-content: center;
  }

  .voice-recording-badge b {
    display: none;
  }

  .chat-info-section-title {
    grid-template-columns: minmax(0,1fr)
          auto;
  }

  .chat-info-add-member {
    grid-column: 1 / -1;
    width: 100%;
    order: 3;
  }
}

@media (max-width:760px) {
  .voice-player {
    width: min(
          280px,
          100%
        );
    box-sizing: border-box;
  }

  .modal-back {
    padding: max(
            8px,
            env(safe-area-inset-top)
          )
          8px
          max(
            8px,
            env(safe-area-inset-bottom)
          );
  }

  .modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(
            100dvh - 16px
          );
    border-radius: 15px;
  }

  .chat-info-modal {
    width: 100%;
  }
}

.license-screen { height:100%; overflow:auto; box-sizing:border-box; display:flex; padding:28px 16px; background:#f7f8fb; color:#20242c; }
.license-box { box-sizing:border-box; width:100%; max-width:408px; min-width:0; margin:auto; padding:28px; border:1px solid #e8eaf0; border-radius:18px; background:#fff; box-shadow:0 8px 32px #20242c05; }
.license-brand { display:flex; align-items:center; gap:10px; margin-bottom:24px; font-size:18px; font-weight:650; letter-spacing:-.02em; }
.license-logo { display:block; border-radius:10px; }
.license-box h1 { font-size:24px; line-height:1.25; letter-spacing:-.025em; margin:0 0 8px; }
.license-box p { font-size:13px; line-height:1.6; color:#78808d; margin:0 0 22px; }
.license-tabs { display:grid; grid-template-columns:1fr 1.25fr; gap:4px; padding:4px; background:#f2f3f7; border-radius:10px; margin-top:20px; }
.license-box button { box-sizing:border-box; width:100%; min-height:43px; padding:10px 12px; border:0; border-radius:9px; background:#5260d9; color:#fff; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.license-box button:disabled { opacity:.55; cursor:wait; }
.license-box .license-tabs button { min-height:34px; padding:8px 5px; font-size:12px; white-space:nowrap; background:transparent; color:#727987; }
.license-box .license-tabs button[aria-selected=true] { background:#fff; color:#272e40; box-shadow:0 1px 4px #20242c0c; }
.license-box [hidden] { display:none!important; }
.license-box form { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; margin:22px 0 0; }
.license-box label { font-size:12px; font-weight:600; color:#4e5666; margin-top:3px; }
.license-box input { box-sizing:border-box; width:100%; min-width:0; min-height:43px; padding:10px 12px; border:1px solid #dde1e9; border-radius:9px; background:#fff; color:#20242c; font:inherit; font-size:16px; }
.license-box input:focus { outline:2px solid #5260d933; border-color:#7580e2; }
.license-box button:focus-visible,.license-id summary:focus-visible { outline:2px solid #7580e2; outline-offset:3px; }
.license-box form button { margin-top:7px; }
.license-box .license-link { min-height:34px; margin-top:15px; padding:6px; background:transparent; color:#737b8b; font-size:12px; font-weight:500; }
.license-notice { margin-top:22px; }
.license-notice b { display:block; font-size:16px; margin-bottom:8px; }
.license-box .license-notice p { margin-bottom:16px; }
.license-pending-label { display:inline-block; margin-bottom:12px; padding:5px 8px; border-radius:6px; background:#f1f3ff; color:#5563b7; font-size:11px; }
.license-id { margin-top:20px; padding-top:16px; border-top:1px solid #eff0f4; color:#8b929e; font-size:10px; }
.license-id summary { cursor:pointer; list-style:none; text-align:center; }
.license-id summary::-webkit-details-marker { display:none; }
.license-id span { display:block; margin-top:7px; text-align:center; overflow-wrap:anywhere; }
.license-box #licenseError:empty { display:none; }
.license-box #licenseError:not(:empty) { margin-top:14px; padding:11px 12px; border-radius:9px; font-size:12px; line-height:1.5; background:#fff2f0; color:#a84135; overflow-wrap:anywhere; }
@media(max-width:480px){ .license-box{padding:24px 20px;} .license-screen{padding:16px 12px;} }

.modal.chat-info-modal {
  border-width: 0 0 0 1px;
}

button.mobile-chats-open,.mobile-chats-close,#mobileChatsBackdrop {
  display: none;
}

@media (max-width:1000px) and (min-width:761px) {
  .shell {
    grid-template-columns: 290px minmax(0,1fr);
  }

  .workspace-head {
    padding: 12px;
  }

  .message {
    padding-left: 0;
    padding-right: 0;
  }

  .chat-head {
    padding: 0 18px;
  }

  .composer-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width:760px) {
  .shell {
    display: block;
  }

  .shell > .main {
    grid-template-rows: 64px minmax(0,1fr) auto;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(360px,92vw);
    z-index: 42;
    transform: translateX(-100%);
    transition: transform .18s ease;
  }

  .mobile-chats-open .sidebar {
    transform: translateX(0);
  }

  #mobileChatsBackdrop {
    position: fixed;
    inset: 0;
    z-index: 41;
    background: #0007;
  }

  .mobile-chats-open #mobileChatsBackdrop {
    display: block;
  }

  button.mobile-chats-open {
    display: grid;
    place-items: center;
    width: 32px;
    height: 36px;
    flex-shrink: 0;
    border: 0;
    background: none;
    color: var(--text);
    padding: 5px;
  }

  button.mobile-chats-open svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
  }

  .mobile-chats-close {
    display: block;
    position: absolute;
    top: 3px;
    right: 3px;
    border: 0;
    background: var(--sidebar);
    color: var(--muted);
    font-size: 16px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }

  .chat-head {
    padding: 0 12px;
    gap: 8px;
  }

  .chat-head-title-btn {
    gap: 9px;
  }


  .chat-sub {
    max-width: 60vw;
  }

  .chat-title {
    font-size: 14px;
  }

  .messages {
    padding: 12px 10px;
  }

  .message {
    padding: 3px 0;
    gap: 6px;
  }

  .message-stack {
    max-width: 86%;
  }

  .message-avatar .avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  .msg-body {
    font-size: 14px;
  }

  .composer-wrap {
    padding: 8px 10px max(10px,env(safe-area-inset-bottom));
    min-height: 64px;
  }

  .composer {
    gap: 1px;
  }

  .composer button {
    width: 30px;
    height: 36px;
    padding: 4px;
  }

  .composer textarea {
    font-size: 16px;
  }

  .sidebar-foot {
    padding-bottom: max(12px,env(safe-area-inset-bottom));
  }

  .modal-back {
    padding: 10px;
  }

  .modal {
    max-height: 92dvh;
  }

  .modal.chat-info-modal {
    width: 100vw;
  }
}

@media (hover:none) {
  .nav-fav {
    opacity: 1;
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

.message.mine:not(.album-tile) .message-content-flat {
  background: var(--bubble-out);
  border-radius: 12px 12px 4px 12px;
}

.message.context-menu-open .message-content-flat {
  outline: 1px solid var(--accent);
}

.message.search-hit .message-content-flat {
  outline: 2px solid var(--accent);
}

.nav-item > .chat-avatar,.nav-item .avatar.nav-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 44px;
  max-height: 44px;
  flex: 0 0 44px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
}


.chat-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.chat-head-actions svg,.chat-tool-search svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.chat-menu {
  position: fixed;
  right: 18px;
  top: 62px;
  width: 220px;
  z-index: 96;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.chat-menu button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  text-align: left;
  padding: 11px 10px;
  font-size: 13px;
}

.chat-menu button:hover {
  background: var(--hover);
}

.modal.chat-tools-modal {
  border-width: 0 0 0 1px;
}

.chat-tools-modal .modal-head {
  flex-shrink: 0;
}

.chat-tools-modal .modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  gap: 12px;
}

.chat-tool-heading {
  color: var(--muted);
}

.chat-tool-search {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
}

.chat-tool-search span {
  display: flex;
}

.chat-tool-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
}

.chat-tool-tabs {
  display: flex;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
}

.chat-tool-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  white-space: nowrap;
}

.chat-tool-tabs button.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.chat-tool-scope {
  color: var(--muted);
  line-height: 1.4;
}

.chat-tool-results {
  min-height: 0;
  overflow: auto;
  flex: 1;
}

.chat-tool-empty {
  padding: 36px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.chat-search-result {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  text-align: left;
  padding: 14px 8px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.chat-search-result:hover {
  background: var(--hover);
}

.chat-result-meta {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.chat-material {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}

.chat-material img,.chat-material video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  border-radius: 7px;
  background: var(--bg);
}

.chat-material audio {
  width: 100%;
  height: 40px;
}

.chat-material-link {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.chat-tool-results mark {
  background: #f1d985;
  color: #222;
  padding: 0 1px;
  border-radius: 2px;
}

.tool-more {
  width: 100%;
  margin: 12px 0;
}

@media (max-width:760px) {
  .chat-head {
    gap: 6px;
  }

  .chat-head-actions {
    gap: 1px;
  }

  .chat-head-actions .icon-btn {
    width: 30px;
  }

  .chat-head-chevron {
    display: none;
  }


  .chat-sub {
    max-width: 37vw;
  }

  .chat-menu {
    right: 8px;
    top: 56px;
  }

  .modal.chat-tools-modal {
    width: 100vw;
  }

  .chat-tool-search input {
    font-size: 16px;
  }
}

[data-avatar-tone="0"] {
  background: #bd7256;
  color: #fff;
}

[data-avatar-tone="1"] {
  background: #b39443;
  color: #fff;
}

[data-avatar-tone="2"] {
  background: #6f9a74;
  color: #fff;
}

[data-avatar-tone="3"] {
  background: #599f9b;
  color: #fff;
}

[data-avatar-tone="4"] {
  background: #688bb0;
  color: #fff;
}

[data-avatar-tone="5"] {
  background: #7a80b7;
  color: #fff;
}

[data-avatar-tone="6"] {
  background: #9b79af;
  color: #fff;
}

[data-avatar-tone="7"] {
  background: #b76e95;
  color: #fff;
}

[data-avatar-tone="8"] {
  background: #ab686a;
  color: #fff;
}

[data-avatar-tone="9"] {
  background: #897961;
  color: #fff;
}

[data-avatar-tone="10"] {
  background: #638f9a;
  color: #fff;
}

[data-avatar-tone="11"] {
  background: #7d899c;
  color: #fff;
}

.folder-empty {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 18px;
  text-align: center;
  color: var(--muted);
}

.folder-empty>div {
  font-size: 24px;
  line-height: 1.2;
  color: var(--muted-2);
}

.folder-empty strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.folder-empty>span {
  display: block;
  max-width: 240px;
  font-size: 12px;
  line-height: 1.5;
}

.push-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Wallpaper editor uses the same spacing, surfaces and controls as profile settings. */
.wallpaper-modal { width:min(460px,calc(100vw - 24px)); max-height:calc(var(--app-height,100dvh) - 24px); display:flex; flex-direction:column; overflow:hidden; border-radius:16px; }
.wallpaper-modal .modal-head { padding:14px 18px; flex-shrink:0; }
.wallpaper-modal .modal-head h2 { font-size:16px; font-weight:600; }
.wallpaper-modal .modal-body { padding:16px 18px; overflow-y:auto; min-height:0; }
.wallpaper-modal .modal-foot { padding:12px 18px; flex-shrink:0; gap:8px; }
.wallpaper-modal .modal-foot button { min-height:38px; border-radius:9px; padding:8px 16px; font-size:13px; }
.wallpaper-modal .wp-reset { margin-right:auto; background:transparent; border:0; color:var(--muted); }
.wallpaper-settings { display:grid; gap:16px; }
.wallpaper-settings p { margin:0; }
.wallpaper-settings [hidden] { display:none !important; }
.wp-note { font-size:12px; color:var(--muted); }
.wp-field-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:13px; font-weight:500; }
.wallpaper-preview { min-height:162px; box-sizing:border-box; border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; background:var(--bg); }
.wp-preview-day { align-self:center; padding:3px 9px; background:var(--panel); color:var(--muted); border-radius:20px; font-size:10px; }
.wallpaper-preview > span { max-width:90%; padding:9px 12px; background:var(--panel); color:var(--text); border-radius:12px 12px 12px 3px; box-shadow:0 1px 2px #0001; font-size:13px; }
.wallpaper-preview > span:last-child { align-self:flex-end; border-radius:12px 12px 3px 12px; }
.wallpaper-preview small { margin-left:9px; color:var(--muted); font-size:10px; white-space:nowrap; }
.wp-scope-switch { display:flex; gap:3px; padding:3px; border:1px solid var(--line); background:var(--bg); border-radius:10px; }
.wp-scope-switch button { flex:1; min-width:0; min-height:34px; padding:6px 10px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:13px; font-weight:500; cursor:pointer; }
.wp-scope-switch button[aria-pressed="true"] { background:var(--panel); color:var(--text); box-shadow:0 1px 3px #0001; }
.wp-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.wp-choice { display:grid; gap:7px; min-width:0; padding:6px; border:1px solid var(--line); border-radius:11px; background:var(--panel); color:var(--muted); font:inherit; font-size:11px; cursor:pointer; }
.wp-choice:hover { border-color:var(--line-strong); background:var(--hover); }
.wp-choice[aria-pressed="true"] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); color:var(--text); }
.wp-sample { display:flex; align-items:center; justify-content:center; height:42px; border-radius:6px; background:var(--bg); }
.wp-sample svg { width:21px; height:21px; color:var(--muted); }
.wp-sample-color { background:#dce4ed; }
.wp-sample-dots { background-color:#e7ecdf; background-image:radial-gradient(#82977566 1px,transparent 1px); background-size:10px 10px; }
.wp-sample-waves { background:repeating-linear-gradient(135deg,#e5eaf5 0px,#e5eaf5 8px,#ccd5e7 9px,#ccd5e7 10px); }
.wp-palette { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wp-swatch,.wp-custom-color { position:relative; width:32px; height:32px; flex:0 0 32px; box-sizing:border-box; border:1px solid var(--line-strong); border-radius:50%; cursor:pointer; }
.wp-swatch[aria-pressed="true"] { outline:2px solid var(--accent); outline-offset:3px; }
.wp-custom-color { display:grid; place-items:center; font-size:20px; color:var(--muted); background:var(--bg); }
.wp-custom-color input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.wp-upload { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:42px; padding:10px; border:1px solid var(--line-strong); border-radius:10px; background:var(--panel); color:var(--text); font:inherit; font-size:13px; cursor:pointer; }
.wp-upload:hover { background:var(--hover); }
.wp-upload svg { width:18px; height:18px; color:var(--muted); }
.wp-file-hint { display:block; margin-top:7px; color:var(--muted); font-size:11px; text-align:center; }
.wp-dim-label { display:block; }
.wp-dim-value { color:var(--muted); font-size:12px; font-weight:400; }
.wp-dim { display:block; width:100%; margin:0; padding:0; min-height:22px; accent-color:var(--accent); }
.wp-error { color:var(--danger,#b42318); font-size:12px; }
.wp-error:empty { display:none; }
.wallpaper-settings button:disabled,.wallpaper-modal .modal-foot button:disabled { opacity:.5; cursor:wait; }
@media (max-width:760px) {
  .wallpaper-modal .modal-body { padding:14px; }
  .wallpaper-modal .modal-head,.wallpaper-modal .modal-foot { padding:12px 14px; }
  .wallpaper-modal .modal-foot button,.wp-scope-switch button { min-height:44px; }
  .wp-swatch,.wp-custom-color { width:36px; height:36px; flex-basis:36px; }
}

.push-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 12px;
  margin: 0 auto 8px;
  max-width: 940px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.push-banner[hidden] {
  display: none !important;
}

.push-banner-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

.push-banner-action {
  flex-shrink: 0;
  border: 0;
  padding: 3px 5px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.push-banner-action:hover {
  text-decoration: underline;
}

.push-banner-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.push-banner-action:disabled {
  opacity: .65;
  cursor: wait;
}

@media (max-width:600px) {
  .push-banner {
    justify-content: space-between;
    font-size: 11px;
    gap: 8px;
    padding: 7px 9px;
    margin-bottom: 6px;
  }
}

.workspace-admin-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 12px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}

.workspace-admin-link:hover {
  background: var(--hover);
}

.workspace-admin-link span {
  color: var(--muted);
  font-size: 20px;
}

.modal.compact-create {
  width: min(460px,calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.compact-create .modal-head {
  padding: 18px 20px;
  flex-shrink: 0;
}

.compact-create .modal-head h2 {
  font-size: 19px;
}

.compact-create .modal-body {
  padding: 16px 20px;
  min-height: 0;
  overflow: auto;
}

.compact-create .modal-foot {
  padding: 12px 20px;
  flex-shrink: 0;
}

.compact-create .modal-foot button {
  min-height: 40px;
  padding: 9px 20px;
  font-size: 14px;
}

.compact-create .segmented {
  margin-bottom: 18px;
  padding: 3px;
  border-radius: 10px;
  display: flex;
}

.compact-create .segmented button {
  flex: 1;
  padding: 9px 6px;
  font-size: 13px;
  border-radius: 7px;
}

.compact-create .field {
  margin: 0 0 14px;
}

.compact-create .field > label {
  display: block;
  font-size: 13px;
  margin-bottom: 7px;
}

.compact-create #convName,.compact-create .create-search {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
}

.compact-create .create-search {
  margin: 0 0 10px;
}

.compact-create .hidden,.compact-create [hidden] {
  display: none !important;
}

.compact-create #privateField > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  cursor: pointer;
}

.compact-create #privateField b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.compact-create #privateField small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.compact-create #isPrivate {
  appearance: none;
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 21px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 20px;
  background: var(--line-strong);
  cursor: pointer;
}

.compact-create #isPrivate:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 15px;
  height: 15px;
  background: white;
  border-radius: 50%;
  transition: transform .15s;
}

.compact-create #isPrivate:checked {
  background: var(--accent);
}

.compact-create #isPrivate:checked:before {
  transform: translateX(15px);
}

.compact-create .member-list {
  max-height: 260px;
  overflow: auto;
  border: 0;
  display: block;
}

.compact-create .member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}

.compact-create .member-row:hover,.compact-create .member-row.chosen {
  background: var(--hover);
}

.compact-create .member-row .avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  font-size: 13px;
}

.compact-create .member-row label {
  flex: 1;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.compact-create .member-row b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.compact-create .member-row .muted {
  font-size: 11px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-create .member-row input {
  appearance: auto;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0 2px 0 auto;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.compact-create .create-empty {
  padding: 18px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.compact-create .create-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 8px;
}

.compact-create input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width:600px) {
  .compact-create #convName,.compact-create .create-search {
    font-size: 16px;
  }
}

.message-menu {
  max-height: calc(var(--app-height, 100dvh) - 16px);
  overflow-y: auto;
  position: fixed;
  z-index: 300;
  min-width: 210px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  padding: 5px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.message-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}

.message-menu button:hover,.message-menu button:focus-visible {
  background: var(--hover);
}

.message.is-selected .message-content-flat,.thread-entry.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.message-selection-bar,.message-pins-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-size: 12px;
}

.message-selection-bar span {
  flex: 1;
}

.message-selection-bar button {
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 5px;
}

.message-pins-bar {
  width: 100%;
  text-align: left;
  color: var(--muted);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.forwarded-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.pin-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pin-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.pin-card p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 6px 0;
}

.pin-card button {
  border: 0;
  background: var(--panel-soft);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text);
}

.forward-targets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 45vh;
  overflow: auto;
}

.forward-targets button {
  text-align: left;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 12px;
}

.forward-targets button:hover {
  background: var(--hover);
}

.edit-message-text {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.message-action-error {
  color: var(--danger);
  margin-top: 8px;
  font-size: 12px;
}

.message-menu button:disabled {
  opacity: .5;
}

.message:focus-visible,.thread-entry:focus-visible {
  outline: 1px solid var(--accent);
}

.forward-search {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
  padding: 10px;
  margin-bottom: 10px;
}

.pins-head-wrap .message-pins-bar {
  display: block;
  margin: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 20px;
  max-width: 100%;
}

@media (max-width:760px) {
  .shell > .main > .chat-head,.pins-head-wrap > .chat-head {
    min-height: 64px;
  }
}

.shell > .main {
  grid-template-rows: auto minmax(0,1fr) auto;
}

.shell > .main > .chat-head,.pins-head-wrap > .chat-head {
  min-height: 64px;
}

.pins-head-wrap {
  min-width: 0;
  background: var(--panel);
}

#messagePinsBar.pins-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.pins-jump {
  flex: 1;
  min-width: 0;
  display: flex;
  text-align: left;
  padding: 3px 0 3px 12px;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.pins-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pins-copy > strong {
  font-size: 13px;
  line-height: 18px;
  font-weight: 650;
  color: var(--accent);
}

.pins-copy > span {
  font-size: 15px;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pins-all {
  flex-shrink: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.pins-all:hover,.pins-jump:hover {
  background: var(--hover);
}

.pin-highlight .message-content-flat {
  animation: pin-focus 2.4s ease-out;
}

@keyframes pin-focus {
  0%,45% {
    box-shadow: 0 0 0 3px var(--accent);
  }

  100% {
    box-shadow: 0 0 0 3px transparent;
  }
}

@media (max-width:760px) {
  .shell > .main > .chat-head,.pins-head-wrap > .chat-head {
    min-height: 64px;
  }

  #messagePinsBar.pins-preview {
    padding: 9px 12px;
    gap: 8px;
  }

  .pins-copy > span {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pin-highlight .message-content-flat {
    animation: none;
    outline: 2px solid var(--accent);
  }
}

.me-badge{
  font-size: 11px !important;
  padding: 3px 7px !important;
  white-space: nowrap;
}

.live-indicator,.presence-dot {
  --live-color: #85909c;
}

.live-online {
  --live-color: #53a578;
}

.live-away {
  --live-color: #d39b35;
}

.live-dnd {
  --live-color: #cf6371;
}

.live-call {
  --live-color: #8474cb;
}

.live-offline {
  --live-color: #85909c;
}

.presence-avatar.live-away .presence-dot {
  background: #d39b35;
}

.presence-avatar.live-dnd .presence-dot {
  background: #cf6371;
}

.presence-avatar.live-call .presence-dot {
  background: #8474cb;
}

.presence-avatar.live-online .presence-dot {
  background: #53a578;
}

.live-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live-color);
  flex: 0 0 8px;
}

.live-self {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.live-self span {
  margin-left: 2px;
}

.profile-live {
  display: block;
  color: var(--live-color);
  border: 0;
  background: none;
  padding: 0;
  margin: 5px 0;
  font-size: 12px;
  text-align: left;
}

.profile-live:before {
  content: "●";
  margin-right: 6px;
}

button.profile-live {
  cursor: pointer;
}

.sidebar-foot .me-status {
  font-size: 12px;
}

.sidebar-foot .me-name-row {
  flex-wrap: wrap;
  gap: 6px;
}

.me-badge{
  background: color-mix(in srgb,var(--text) 8%,var(--panel)) !important;
  color: var(--text) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}

.modal-back:has(.chat-info-modal),.modal-back:has(.chat-tools-modal) {
  justify-items: center;
  align-items: center;
  padding: 18px;
  background: #0007;
  backdrop-filter: blur(4px);
}

.modal.chat-info-modal,.modal.chat-tools-modal {
  height: auto;
  max-height: calc(100dvh - 36px);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal.chat-info-modal .modal-body {
  overflow: auto;
  min-height: 0;
  padding: 20px;
}

.modal.chat-tools-modal {
  height: min(700px,calc(100dvh - 36px));
}

.chat-info-modal .modal-head,.chat-info-modal .modal-foot {
  flex-shrink: 0;
  padding: 16px 20px;
}

.chat-info-modal .modal-foot {
  justify-content: flex-end;
  gap: 8px;
}

.chat-info-modal .modal-foot button {
  width: auto;
  padding: 9px 16px;
  font-size: 13px;
}

.chat-info-modal [hidden] {
  display: none !important;
}

.chat-info-hero {
  padding: 0 !important;
}

.chat-info-title {
  font-size: 22px !important;
  margin: 14px 0 5px !important;
}

.chat-info-description {
  font-size: 14px !important;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 14px 0 !important;
}

.chat-info-type {
  font-size: 12px !important;
}

.chat-info-avatar-wrap {
  margin: 0 auto !important;
}

.chat-avatar-change,.chat-edit-toggle {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 10px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 12px;
  margin-top: 8px;
}

.chat-info-edit {
  padding: 12px !important;
  margin: 12px 0 !important;
}

.chat-info-edit input,.chat-info-edit textarea {
  font-size: 14px;
}

.chat-material-shortcuts {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 18px 0;
}

.chat-material-shortcuts button {
  flex: 1;
  padding: 9px 10px;
  font-size: 12px;
}

.chat-managed-member {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-managed-member .chat-info-member {
  flex: 1;
  min-width: 0;
}

.chat-remove-member {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.chat-remove-member:hover {
  background: var(--hover);
  color: var(--danger);
}

.chat-leave {
  width: 100%;
  margin-top: 18px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: none;
  color: var(--danger);
  cursor: pointer;
}

.media-viewer-modal {
  width: min(1000px,95vw);
}

.media-viewer {
  text-align: center;
}

.media-viewer img {
  display: block;
  max-width: 100%;
  max-height: 75dvh;
  object-fit: contain;
  margin: auto;
}

.modal.chat-info-modal {
  width: min(440px,calc(100vw - 24px));
}

.chat-info-modal .modal-head {
  padding: 15px 18px;
  gap: 10px;
}

.chat-info-modal .modal-head h2 {
  font-size: 16px;
  flex: 1;
}

.chat-info-modal .modal-body {
  padding: 18px;
}

.chat-info-modal .chat-info-sheet {
  gap: 14px;
}

.chat-info-modal .chat-info-hero {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  column-gap: 14px;
  row-gap: 5px;
  text-align: left;
  align-items: start;
}

.chat-info-modal .chat-info-avatar-wrap {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0 !important;
}

.chat-info-modal .chat-info-avatar-wrap .chat-avatar {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  border-radius: 16px;
}

.chat-info-modal .chat-info-title {
  grid-column: 2;
  margin: 6px 0 0 !important;
  font-size: 19px !important;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.chat-info-modal .chat-info-type {
  grid-column: 2;
  margin: 0;
  font-size: 12px !important;
}

.chat-info-modal .chat-info-description {
  grid-column: 1 / -1;
  max-width: none;
  margin: 10px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.5;
}

.chat-info-modal .chat-edit-toggle {
  margin: 0;
  padding: 6px 8px;
  border: 0;
  background: none;
  font-size: 12px;
}

.chat-info-modal .chat-material-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.chat-info-modal .chat-material-shortcuts button {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  width: 100%;
  min-height: 39px;
  padding: 8px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  text-align: left;
  font-size: 13px;
}

.chat-info-modal .chat-material-shortcuts button:hover {
  background: var(--hover);
}

.chat-material-shortcuts svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
}

.chat-material-shortcuts span {
  flex: 1;
}

.chat-material-shortcuts i {
  font-style: normal;
  color: var(--muted);
}

.chat-info-modal .chat-info-section-title {
  font-size: 12px;
  padding: 0;
}

.chat-info-modal .chat-info-add-member {
  font-size: 12px;
  padding: 6px 9px;
}

.chat-info-modal .chat-info-members {
  gap: 2px;
}

.chat-info-modal .chat-info-member {
  padding: 7px 4px;
  grid-template-columns: 34px minmax(0,1fr) 16px;
  gap: 10px;
}

.chat-info-modal .chat-info-member .avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.chat-info-modal .chat-info-member b {
  font-size: 13px;
}

.chat-info-modal .chat-info-member small {
  font-size: 11px;
}

.chat-info-modal .chatInfoClose {
  display: none;
}

.chat-info-modal .modal-foot {
  display: none;
}

.chat-info-modal .modal-foot:has(.chatInfoSave:not([hidden])) {
  display: flex;
}

.chat-info-modal .chat-leave {
  margin-top: 0;
  padding: 10px;
  font-size: 13px;
}

.chat-info-modal .chat-info-edit {
  margin: 0 !important;
}

.chat-info-modal .chat-info-edit .chat-avatar-change {
  margin: 0 0 10px;
}

.briefly-ui,.briefly-ui * {
  box-sizing: border-box;
}

.briefly-ui {
  font: 14px/1.45 "Briefly Inter",Arial,sans-serif;
  height: var(--app-height, 100dvh);
  overflow: hidden;
  display: grid;
  grid-template-columns: 276px minmax(0,1fr);
  grid-template-rows: minmax(0,1fr);
}

.briefly-topbar {
  grid-column: 1/-1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sidebar);
  border-bottom: 1px solid var(--line);
  padding: 8px 20px;
}

.briefly-topbar .sidebar-search {
  margin: 0;
  display: flex;
  align-items: center;
  width: min(580px,70%);
  height: 34px;
  min-height: 0;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.briefly-topbar input {
  font: 13px inherit;
  color: var(--text);
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  min-width: 0;
  width: 100%;
}

.briefly-topbar kbd {
  font-size: 11px;
  white-space: nowrap;
  color: var(--muted);
}

.briefly-ui>.sidebar {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  width: auto;
  padding: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
}

.briefly-ui .workspace-head {
  display: flex;
  align-items: center;
  border: 0;
  background: var(--sidebar);
}

.briefly-ui .workspace-switch {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 0;
  background: none;
  flex: 1;
}

.briefly-ui .workspace-meta {
  flex: 1;
}

.briefly-ui .workspace-switch-hint small,.briefly-ui .workspace-invite,.briefly-ui .sidebar-tools[hidden] {
  display: none !important;
}

.briefly-ui .quick-new {
  min-width: 28px;
  padding: 0;
  flex: 0 0 28px;
}

.briefly-ui .nav-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  overflow-anchor: none;
}

.briefly-filters {
  display: grid;
  gap: 2px;
  margin: 0 0 16px;
}

.briefly-filters button {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  background: none;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.briefly-filters button:hover {
  background: var(--hover);
}

.briefly-filters .selected {
  color: var(--active-text);
  background: var(--active);
  font-weight: 600;
}

.briefly-filters b,.bfx-count {
  margin-left: auto;
  font-size: 10px;
  line-height: 18px;
  padding: 0 6px;
  min-width: 18px;
  text-align: center;
  border-radius: 10px;
  background: #3563f5;
  color: white;
}

.briefly-section {
  margin: 0 0 15px;
}

.briefly-section-head {
  display: flex;
  height: 29px;
  align-items: center;
  gap: 4px;
}

.briefly-section-head button {
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  height: 26px;
}

.briefly-section-head [data-new],.briefly-section-head [data-folder-edit] {
  font-size:18px; width:26px; flex:0 0 26px; padding:0;
}
.briefly-section-head .section-label {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.briefly-section-head button:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  text-align: left;
  font-weight: 600;
  min-width:0;
}
.briefly-section-head small {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  flex-shrink:0;
}

.briefly-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted);
}

.briefly-ui .nav-item.bfx-row {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
}

.briefly-ui .bfx-row::before {
  display: none;
}

.briefly-ui .bfx-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.briefly-ui .bfx-avatar .avatar,.briefly-ui .bfx-avatar .chat-avatar,.briefly-ui .bfx-avatar .presence-avatar {
  flex: 0 0 36px !important;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 14px;
}

.briefly-ui .bfx-avatar .chat-avatar {
  overflow: hidden;
  display: grid;
  place-items: center;
}

.briefly-ui .bfx-avatar img {
  object-fit: cover;
}

.briefly-ui .bfx-avatar .presence-avatar {
  position: relative;
  display: flex;
  overflow: visible;
}

.briefly-ui .bfx-avatar .presence-dot {
  width: 7px;
  height: 7px;
  right: -1px;
  bottom: 0;
  border: 2px solid var(--sidebar);
}

.bfx-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 450;
}

.has-unread .bfx-label {
  font-weight: 650;
}

.briefly-ui .bfx-star {
  position: static;
  flex: 0 0 18px;
  height: 24px;
  width: 18px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 14px;
  color: var(--muted);
  opacity: 0;
}

.briefly-ui .bfx-row:hover .bfx-star,.briefly-ui .bfx-row:focus-within .bfx-star,.briefly-ui .bfx-star.on {
  opacity: 1;
}

.briefly-ui .sidebar-foot {
  flex: 0 0 auto;
  gap: 9px;
}

.briefly-ui .sidebar-foot .avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  object-fit: cover;
}

.briefly-ui .me-status {
  font-size: 11px;
  line-height: 16px;
}

.briefly-ui .me-badge {
  font-size: 9px;
  padding: 1px 5px;
  border: 0;
  background: var(--active);
  color: var(--active-text);
  box-shadow: none;
}

.briefly-ui #themeBtn {
  display: none;
}

.briefly-ui>.main {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.briefly-ui .pins-head-wrap {
  flex: 0 0 auto;
  min-height: 0;
}

.briefly-ui #chatHead {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 64px;
  height: 64px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.briefly-ui .chat-title {
  line-height: 22px;
}

.briefly-ui .chat-sub {
  line-height: 17px;
}

.chat-head-avatar .chat-avatar,.chat-head-avatar .avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  max-width: 34px;
  max-height: 34px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}

.briefly-ui #messagePinsBar.pins-preview,.briefly-ui #messagePinsBar {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
}

.briefly-ui .pins-copy {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}

.briefly-ui .pins-copy > strong {
  color: var(--accent);
}

.briefly-ui #messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  padding: 24px max(26px,calc((100% - 1060px)/2));
  scrollbar-width: thin;
}

.briefly-ui .message {
  padding: 4px 0;
  gap: 9px;
}

.briefly-ui .message.grouped {
  padding: 2px 0;
}

.briefly-ui .message-stack {
  max-width: min(82%,660px);
}

.briefly-ui .message:not(.album-tile) .message-content-flat {
  padding: 9px 12px 5px;
  border: 0 !important;
  border-radius: 10px 10px 10px 3px;
  box-shadow: none !important;
  background: var(--bubble-in) !important;
}

.briefly-ui .message.mine:not(.album-tile) .message-content-flat {
  border-radius: 10px 10px 3px 10px;
  background: var(--bubble-out) !important;
}

.briefly-ui .msg-body {
  font-size: 14px;
  line-height: 1.5;
}

.briefly-ui .msg-name {
  font-size: 11px;
  line-height: 16px;
  margin-bottom: 3px;
}

.briefly-ui .msg-time {
  font-size: 10px;
}

.briefly-ui .msg-meta {
  margin-top: 3px;
}

.briefly-ui .message-avatar .avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
  object-fit: cover;
}

.briefly-ui #composerWrap {
  flex: 0 0 auto;
  background: var(--panel);
  padding: 12px max(20px,calc((100% - 1100px)/2)) 18px;
  border: 0;
}

.briefly-ui #composer {
  min-height: 50px;
  padding: 5px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 25px;
  background: var(--panel);
  box-shadow: none;
  gap: 4px;
}

.briefly-ui #text {
  font-size: 14px;
  line-height: 21px;
  padding: 8px 4px;
  background: transparent;
}

.briefly-ui #composer .send {
  height: 34px;
  width: 34px;
  min-width: 34px;
  padding: 6px;
  margin: 3px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
}

.briefly-ui #composer #fileBtn {
  width: 32px;
  height: 32px;
  margin: 4px;
  border-radius: 50%;
  padding: 5px;
  background: var(--hover);
  color: var(--muted);
}

.briefly-ui button:focus-visible,.briefly-ui [role=button]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width:760px) {
  .briefly-ui {
    display: flex;
  }

  .briefly-topbar {
    display: none;
  }

  .briefly-ui>.main {
    width: 100%;
  }

  .briefly-ui>.sidebar {
    width: min(300px,92vw);
    height: var(--app-height, 100dvh);
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 42;
  }

  .briefly-ui .sidebar-tools {
    padding: 0 14px 12px;
  }

  .briefly-ui .sidebar-search {
    width: 100%;
    height: 38px;
  }

  .briefly-ui .sidebar-search kbd {
    display: none;
  }

  .briefly-ui #chatHead {
    padding: 8px 12px;
  }

  .briefly-ui #messages {
    padding: 16px 12px;
  }

  .briefly-ui .bfx-star {
    opacity: 1;
  }

  .briefly-ui #messagePinsBar {
    padding: 8px 12px !important;
  }
}

.briefly-ui .sidebar-tools {
  display: flex;
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  gap: 0;
}

.briefly-ui .sidebar-tools .sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.briefly-ui .sidebar-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: inherit;
  outline: none;
}

.briefly-ui .bfx-contact {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.briefly-ui .bfx-contact .bfx-label {
  flex: 0 1 auto;
  min-width: 0;
}

.briefly-ui .bfx-contact-badge {
  display: inline-block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 82px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 1px 5px;
  font-size: 10px;
  line-height: 16px;
  border: 1px solid var(--line);
  box-shadow: none;
}

@media (max-width:760px) {
  .briefly-ui .sidebar-search input {
    font-size: 16px;
  }
}

.bfx-search-heading {
  padding: 14px 10px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.bfx-search-note {
  padding: 0 10px 10px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.bfx-search-result {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  border-radius: 8px;
}

.bfx-search-result:hover {
  background: var(--active);
}

.bfx-search-result small {
  font-size: 11px;
  color: var(--muted);
}

.bfx-search-result span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.bfx-search-result mark {
  background: var(--active);
  color: var(--accent);
  font-weight: 600;
}

.bfx-more {
  width: 100%;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.bfx-team-menu {
  position: fixed;
  z-index: 10000;
  width: 300px;
  max-width: calc(100vw - 16px);
  overflow: auto;
  padding: 7px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 36px #0003;
  font: 13px/1.4 "Briefly Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  box-sizing: border-box;
}

.bfx-menu-caption {
  padding: 7px 10px;
  font-size: 11px;
  color: var(--muted);
}

.bfx-team-menu button,.bfx-team-menu a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}

.bfx-team-menu button:hover,.bfx-team-menu a:hover,.bfx-team-menu .current {
  background: var(--active);
}

.bfx-team-menu small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.bfx-team-menu i {
  margin-left: auto;
  color: var(--accent);
  font-style: normal;
}

.bfx-team-icon {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--line);
  font-weight: 600;
}

.bfx-menu-divider {
  height: 1px;
  background: var(--line);
  margin: 6px;
}

.bfx-team-menu :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.briefly-ui>.sidebar>.workspace-head {
  order: 0 !important;
  position: relative !important;
  top: auto !important;
  flex-shrink: 0 !important;
}

.briefly-ui>.sidebar>.sidebar-tools {
  order: 1 !important;
  position: relative !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-shrink: 0 !important;
}

.briefly-ui>.sidebar>.nav-scroll {
  order: 2 !important;
  min-height: 0 !important;
}

.briefly-ui>.sidebar>.sidebar-foot {
  order: 3 !important;
}

.briefly-ui .sidebar-tools .sidebar-search {
  width: 100% !important;
  position: relative !important;
  order: 0 !important;
}

.briefly-ui #messagePinsBar .pins-jump {
  border-left: 0 !important;
  padding-left: 0 !important;
  box-shadow: none !important;
}

.bfx-count {
  font-style: normal;
}

.briefly-ui #brieflyComments:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.briefly-ui #brieflyComments:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.briefly-ui .briefly-filters button:focus-visible {
  outline: 1px solid var(--muted);
  outline-offset: -2px;
}

.notification-hit {
  animation: briefly-notification-hit 3s ease-out;
}

@keyframes briefly-notification-hit {
  0%,50% {
    outline: 2px solid var(--accent);
    background: var(--active);
  }

  100% {
    outline-color: transparent;
  }
}

.bfx-photo {
  display: block;
  width: 320px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  position: relative;
  background: var(--bg);
}

.bfx-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  margin: 0 !important;
}

.bfx-photo-fallback {
  display: none;
}

.bfx-photo.failed .bfx-photo-fallback {
  display: block;
  padding: 20px;
}

.bfx-lightbox {
  padding: 36px;
  border: 0;
  background: #11151bee;
  width: min(96vw,1200px);
  height: 90vh;
  max-height: 90dvh;
  border-radius: 16px;
  color: white;
}

.bfx-lightbox::backdrop {
  background: #000a;
}

.bfx-lightbox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bfx-lightbox button {
  position: absolute;
  right: 8px;
  top: 4px;
  background: transparent;
  color: white;
  border: 0;
  font-size: 30px;
  cursor: pointer;
}

.modal.chat-tools-modal {
  width: min(760px,calc(100vw - 24px)) !important;
  max-height: 88dvh !important;
  border-radius: 18px !important;
}

.chat-tools-modal .modal-head {
  padding: 18px 22px !important;
}

.chat-tools-modal h2 {
  font-size: 20px !important;
}

.chat-tools-modal .modal-body {
  padding: 16px 22px !important;
}

.chat-tool-heading,.chat-tool-scope {
  font-size: 12px !important;
}

.chat-tool-search {
  margin: 12px 0 !important;
  padding: 8px 12px !important;
}

.chat-tool-search input {
  font-size: 14px !important;
}

.chat-tool-tabs {
  gap: 12px !important;
}

.chat-tool-tabs button {
  font-size: 14px !important;
  padding: 10px 0 !important;
}

.chat-tool-results:has(.chat-material img) {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

.chat-tool-results:has(.chat-material img) .chat-material {
  padding: 0 !important;
  border: 0 !important;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.chat-tool-results:has(.chat-material img) .chat-material>a:has(img) {
  order: -1;
  display: block;
}

.chat-tool-results .chat-material img {
  display: block !important;
  width: 100% !important;
  height: auto;
  aspect-ratio: 1;
  max-height: none !important;
  object-fit: cover !important;
  margin: 0 !important;
}

.chat-tool-results:has(.chat-material img) .chat-material-link {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.chat-tool-results:has(.chat-material img) .chat-result-meta {
  font-size: 11px;
  margin-top: 4px;
}

.chat-tool-results .tool-more {
  grid-column: 1/-1;
}

@media (max-width:560px) {
  .chat-tool-results:has(.chat-material img) {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .bfx-photo {
    width: 260px;
  }

  .chat-tool-tabs {
    overflow-x: auto;
  }
}

.briefly-ui > main.main.bfx-comments-open > :not(#bfxCommentsPanel) {
  display: none !important;
}

#bfxCommentsPanel {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--panel);
  scrollbar-gutter: stable;
}

.discussion-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.discussion-heading>div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.discussion-heading h2 {
  line-height: 24px;
  margin: 0;
  flex: 1;
}

.discussion-heading button {
  border: 0;
  background: none;
  color: var(--muted);
  padding: 8px;
  cursor: pointer;
  border-radius: 5px;
  font: inherit;
}

.discussion-heading button:hover {
  background: var(--hover);
  color: var(--text);
}

.discussion-heading nav {
  display: flex;
  gap: 20px;
  overflow: auto;
  margin-top: 12px;
}

.discussion-heading nav button {
  padding: 10px 0;
  border-radius: 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  font-size: 13px;
}

.discussion-heading nav .selected {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.discussion-feed {
  margin: auto;
}

.discussion-card {
  border-bottom: 1px solid var(--line);
}

.discussion-card>header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.discussion-source {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font: inherit;
  font-size: 12px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.discussion-source:hover {
  color: var(--accent);
}

.discussion-source span {
  margin-left: 4px;
}

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

.discussion-actions button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
}

.discussion-actions button[aria-pressed="true"] {
  color: var(--accent);
}

.discussion-actions button:hover {
  background: var(--hover);
}

.discussion-original {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);
  gap: 10px;
  text-align: left;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  cursor: pointer;
}

.discussion-original .avatar,.discussion-reply-avatar .avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  font-size: 11px;
}

.discussion-byline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 18px;
}

.discussion-byline b {
  font-size: 13px;
  font-weight: 600;
}

.discussion-byline time {
  font-size: 11px;
  color: var(--muted);
}

.discussion-body {
  display: block;
  margin-top: 4px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.discussion-open {
  display: flex;
  align-items: center;
  gap: 5px;
  width: calc(100% - 42px);
  margin: 10px 0 10px 42px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.discussion-open b {
  color: var(--accent);
  font-weight: 500;
}

.discussion-open>span {
  margin-left: auto;
  color: var(--accent);
}

.discussion-preview {
  margin-left: 42px;
  border-left: 2px solid var(--line);
  padding: 2px 0 2px 12px;
  font-size: 12px;
  min-height: 24px;
}

.discussion-reply {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 8px;
  margin: 9px 0;
}

.discussion-reply-avatar .avatar {
  width: 26px;
  height: 26px;
  min-width: 26px;
}

.discussion-reply p {
  margin: 3px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}

.discussion-unread {
  font-size: 11px;
  color: var(--accent);
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.discussion-retry {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.discussion-compose {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin: 12px 0 0 42px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.discussion-compose:focus-within {
  border-color: var(--accent);
}

.discussion-compose textarea {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  max-height: 110px;
  resize: none;
  border: 0;
  background: none;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 20px;
  padding: 7px 6px;
}

.discussion-compose button {
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
}

.discussion-compose :disabled {
  opacity: .55;
  cursor: wait;
}

.discussion-empty {
  text-align: center;
  padding: 72px 20px;
  color: var(--muted);
  font-size: 13px;
}

.discussion-empty strong {
  display: block;
  color: var(--text);
  font-size: 16px;
}

.discussion-empty p {
  margin: 10px 0;
}

.modal-back.thread-drawer {
  inset: var(--app-top,0px) 0 auto auto;
  height: var(--app-height,100dvh);
  width: min(440px,100vw);
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: none;
  backdrop-filter: none;
  z-index: 50;
}

.modal.thread-modal {
  width: 100%;
  height: var(--app-height, 100dvh);
  max-height: var(--app-height, 100dvh);
  border-radius: 0;
  border: 0;
  color: var(--text);
  box-shadow: -8px 0 30px #0000000d;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal.thread-modal .modal-head h2 {
  font-size: 16px;
  font-weight: 650;
  flex: 1;
  margin: 0;
}

.modal.thread-modal .modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  gap: 8px;
}

.modal.thread-modal .modal-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto auto;
  overflow: hidden;
  padding: 0 14px 12px;
  background: var(--panel);
}

.modal.thread-modal .thread-root-shell {
  max-height: calc(var(--app-height,100dvh) * .25);
  overflow: auto;
  margin: 12px 0 0;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.modal.thread-modal .thread-list {
  min-height: 0;
  overflow: auto;
  padding: 10px 0;
}

.modal.thread-modal .thread-avatar .avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 11px;
}

.modal.thread-modal .thread-entry-head {
  flex-wrap: wrap;
  gap: 3px 8px;
  align-items: baseline;
}

.modal.thread-modal .thread-entry-head span {
  font-size: 11px;
}

.modal.thread-modal .thread-entry-main {
  min-width: 0;
}

.modal.thread-modal .thread-entry.root {
  padding: 0;
  border: 0;
}

.modal.thread-modal .thread-body {
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.5;
}

.modal.thread-modal .thread-composer {
  grid-template-columns: 32px minmax(0,1fr) 32px 36px;
  gap: 3px;
  padding: 6px;
  margin: 8px 0 0;
  border: 1px solid var(--line);
}

.modal.thread-modal .thread-composer textarea {
  min-height: 36px;
  max-height: 110px;
  font-size: 14px;
  padding: 7px 2px;
  background: transparent;
  border: 0;
}

.modal.thread-modal .thread-compose-icon {
  width: 32px;
  height: 36px;
  padding: 5px;
  border-radius: 50%;
}

.modal.thread-modal .thread-send {
  width: 36px;
  height: 36px;
  padding: 7px;
  border-radius: 50%;
}

@media (min-width:1100px) {
  body:has(.thread-drawer) .briefly-ui>.main {
    margin-right: 440px;
  }
}

@media (max-width:760px) {
  .modal-back.thread-drawer {
    width: 100%;
    background: var(--panel);
  }

  /* Keep the chat mounted (draft and scroll), but out of view and tab order. */
  body:has(> .thread-drawer) #root {
    visibility: hidden;
  }

  .discussion-heading {
    padding: 12px 14px 0;
  }

  .discussion-feed {
    padding: 0 14px;
  }

  .discussion-heading nav {
    gap: 16px;
  }

  .discussion-preview {
    margin-left: 0;
    margin-top: 10px;
  }

  .discussion-compose {
    margin-left: 0;
  }

  .discussion-compose textarea {
    font-size: 16px;
  }

  .modal.thread-modal .thread-composer textarea {
    font-size: 16px;
  }

  .discussion-card {
    padding: 16px 0;
  }
}

.thread-subscription {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.thread-subscription svg {
  width: 19px;
  height: 19px;
}

.thread-subscription:hover {
  background: var(--panel-soft);
}

.thread-subscription:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.thread-subscription[aria-pressed="true"] {
  color: var(--accent);
  background: var(--panel-soft);
}

.subscription-dot {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  border: 1px solid var(--panel);
}

.thread-subscription[aria-pressed="true"] .subscription-dot {
  background: var(--accent);
}

.thread-subscription:not([aria-pressed]) .subscription-dot {
  display: none;
}

.thread-subscription:disabled {
  opacity: .5;
  cursor: wait;
}

/* Personal status: one component, shared emoji picker. */
.modal-back.personal-status-back {
  display: flex;
  background: transparent;
  backdrop-filter: none;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 12px 12px 82px;
  z-index: 110;
}
.modal.personal-status-menu {
  width: 360px;
  max-width: 100%;
  max-height: calc(var(--app-height, 100dvh) - 94px);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 16px 48px #0004;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  color: var(--text);
}
.personal-status-menu .modal-head { padding: 16px; border-bottom: 0; flex-shrink: 0; }
.personal-status-menu .modal-head h2 { font-size: 16px; font-weight: 600; }
.personal-status-menu .modal-body { padding: 0 16px 12px; overflow: auto; min-height: 0; }
.personal-status-menu .modal-foot { display: flex; justify-content: space-between; padding: 12px 16px; gap: 8px; border-top: 1px solid var(--line); flex-shrink: 0; }
.personal-status-menu .modal-foot button { min-height: 40px; padding: 8px 14px; border-radius: 10px; font-size: 13px; }
.personal-status-input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); padding: 3px; gap: 4px; }
.personal-status-input:focus-within { border-color: var(--accent); }
.personal-status-input .status-emoji { width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; font-size: 24px; cursor: pointer; flex-shrink: 0; }
.personal-status-input .status-text { min-width: 0; flex: 1; padding: 8px 4px; border: 0; outline: none; background: transparent; color: var(--text); font-size: 16px; box-shadow: none; }
.status-duration { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.status-duration label { font-size: 12px; color: var(--muted); }
.status-duration select,.status-availability select { font-size: 13px; color: var(--text); background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; padding: 7px; max-width: 190px; min-height: 36px; }
.status-error { color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 8px; }
.status-error:empty { display: none; }
.status-presets { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0; }
.status-presets button { display: flex; align-items: center; gap: 6px; padding: 7px 9px; min-height: 36px; border: 1px solid var(--line); border-radius: 9px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.status-presets button:hover,.status-presets button[aria-pressed="true"] { background: var(--hover); border-color: var(--accent); }
.status-presets button>span { font-size: 18px; }
.status-presets b { font-size: 12px; font-weight: 500; }
.status-availability { padding-top: 12px; border-top: 1px solid var(--line); }
.status-availability label { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; min-height: 40px; margin-bottom: 6px; cursor: pointer; }
.status-availability .status-dnd { position: absolute; right: 0; width: 40px; height: 24px; opacity: 0; cursor: pointer; margin: 0; }
.status-switch { width: 36px; height: 22px; border-radius: 20px; background: var(--muted); pointer-events: none; padding: 3px; box-sizing: border-box; }
.status-switch::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform .15s; }
.status-dnd:checked + .status-switch { background: var(--accent); }
.status-dnd:checked + .status-switch::before { transform: translateX(14px); }
.status-dnd:focus-visible + .status-switch { outline: 2px solid var(--accent); outline-offset: 3px; }
.status-availability>small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }
.personal-status-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.personal-status-menu button:disabled { opacity: .5; cursor: wait; }

.personal-status-badge {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.personal-status-badge[hidden] {
  display: none;
}

.live-self {
  max-width: 100%;
  text-align: left;
}

.live-self>span:first-of-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width:600px) {
  .personal-status-badge { max-width: 110px; }
  .personal-status-menu select { font-size: 16px; }
  .personal-status-menu .modal-foot button,.status-presets button { min-height: 44px; }
}

.photo-album {
  width: min(440px,86%);
  padding: 5px;
  margin: 5px 0 5px 42px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bubble-in);
  overflow: hidden;
  flex-shrink: 0;
  align-self: flex-start;
}

.photo-album.mine {
  margin-left: auto;
  align-self: flex-end;
  background: var(--bubble-out);
}

.album-author {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 7px 9px;
  cursor: pointer;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 4px;
}

.album-grid.odd>.message:last-child {
  grid-column: 1/-1;
}

.album-grid>.message {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.album-grid .message-stack {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.album-grid .message-content-flat {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
}

.album-grid .message-avatar,.album-grid .msg-name,.album-grid .msg-body,.album-grid .msg-meta {
  display: none;
}

.album-grid .bfx-photo {
  width: 100%;
  max-width: none;
  border-radius: 6px;
  aspect-ratio: 1;
  display: block;
}

.album-grid .bfx-photo img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.album-grid.odd>.message:last-child .bfx-photo {
  aspect-ratio: 2;
}

.album-caption {
  padding: 8px 7px 3px;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.album-footer {
  padding: 2px 7px 4px;
}

.album-footer .msg-meta {
  display: flex;
  justify-content: flex-end;
}

.album-grid .reaction-row {
  padding: 3px;
}

.album-grid .thread-link {
  font-size: 11px;
}

.bfx-lightbox .gallery-close {
  right: 12px;
  top: 8px;
}

.bfx-lightbox .gallery-prev,.bfx-lightbox .gallery-next {
  top: calc(50% - 24px);
  width: 44px;
  height: 48px;
  border-radius: 24px;
  background: #0006;
  font-size: 38px;
  line-height: 1;
}

.bfx-lightbox .gallery-prev {
  left: 8px;
  right: auto;
}

.bfx-lightbox .gallery-next {
  right: 8px;
}

.bfx-lightbox button:disabled {
  opacity: .25;
  cursor: default;
}

.bfx-lightbox button[hidden] {
  display: none;
}

.bfx-lightbox button:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

.gallery-count {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
}

.gallery-error {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 45%;
  text-align: center;
}

.gallery-error[hidden] {
  display: none;
}

@media (max-width:600px) {
  .photo-album {
    width: 86%;
    margin-left: 30px;
  }

  .photo-album.mine {
    margin-left: auto;
  }

  .bfx-lightbox {
    width: 100vw;
    height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    border-radius: 0;
    padding: 46px 0;
  }

  .bfx-lightbox .gallery-prev,.bfx-lightbox .gallery-next {
    width: 36px;
    height: 42px;
  }
}

.msg-actions,.thread-actionbar {
  position: absolute;
  right: 0;
  top: -18px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

.msg-actions::after,.thread-actionbar::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}

.msg-actions button,.thread-actionbar button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.msg-actions svg,.thread-actionbar svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.msg-actions button:hover,.thread-actionbar button:hover {
  background: var(--hover);
  color: var(--text);
}

.msg-actions button:focus-visible,.thread-actionbar button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

body:not(:has(.message:hover, .thread-entry:hover)) .message:focus-visible .msg-actions,
body:not(:has(.message:hover, .thread-entry:hover)) .message:has(button:focus-visible) .msg-actions,
body:not(:has(.message:hover, .thread-entry:hover)) .thread-entry:focus-visible .thread-actionbar,
body:not(:has(.message:hover, .thread-entry:hover)) .thread-entry:has(button:focus-visible) .thread-actionbar {
  opacity: 1;
  pointer-events: auto;
}

@media (hover:hover) {
  .message:hover .msg-actions,.thread-entry:hover .thread-actionbar {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (hover:none) {
  .msg-actions,.thread-actionbar { display: none; }
}

.message-stack {
  min-width: min(96px,100%);
}

.album-tile .msg-actions {
  top: 4px;
  right: 4px;
}

.thread-actionbar {
  top: 0;
}

.message.sending .msg-actions {
  display: none;
}

.format-pop { position:fixed; z-index:260; padding:4px; width:max-content; max-width:calc(100vw - 16px); box-sizing:border-box; border:1px solid var(--line-strong); border-radius:11px; background:var(--panel); box-shadow:var(--shadow-soft); }
.format-main,.format-extra>div { display:flex; gap:2px; }
.format-extra { border-top:1px solid var(--line); padding-top:4px; margin-top:4px; }
.format-extra[hidden] { display:none; }
.format-colors { justify-content:center; }

.format-pop [data-fmt="bold"] {
  font-weight: 700;
}

.format-pop [data-fmt="italic"] {
  font-style: italic;
}

.format-pop [data-fmt="underline"] {
  text-decoration: underline;
}

.format-pop [data-fmt="strike"] {
  text-decoration: line-through;
}

.format-pop [data-fmt="yellow"] {
  color: #b98300;
}

.format-pop [data-fmt="green"] {
  color: #268351;
}

.format-pop [data-fmt="blue"] {
  color: #397bc4;
}

.format-pop [data-fmt="pink"] {
  color: #b74c7e;
}

.text-highlight {
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
  box-decoration-break: clone;
}

.highlight-yellow {
  background: #f7cd6660;
}

.highlight-green {
  background: #55bb8060;
}

.highlight-blue {
  background: #669fe960;
}

.highlight-pink {
  background: #eb7cac60;
}

.message-spoiler {
  display: inline;
  background: var(--line-strong);
  border-radius: 4px;
  cursor: pointer;
  box-decoration-break: clone;
}

.message-spoiler:not(.revealed)>span {
  visibility: hidden;
}

.message-spoiler.revealed {
  background: var(--hover);
}

.message-spoiler:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

pre.message-code {
  display: block;
  max-width: 100%;
  overflow: auto;
  white-space: pre;
  tab-size: 4;
  margin: 6px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  font: 13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
  color: var(--text);
}

pre.message-code code {
  white-space: inherit;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
}

.msg-body ul,.msg-body ol,.thread-body ul,.thread-body ol {
  margin: 4px 0;
  padding-left: 24px;
  white-space: normal;
}

/* BRIEFLY CROSS PLATFORM BASE START */
*,
*::before,
*::after {
  box-sizing: border-box;
}

button,
input,
textarea,
select {
  font-family: var(--ui-font);
  color: inherit;
}

/*
 * Убираем платформенный вид только у обычных кнопок и текстовых полей.
 * Checkbox/radio/file/select намеренно не трогаем.
 */
button,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
textarea {
  -webkit-appearance: none;
  appearance: none;
}
/* BRIEFLY CROSS PLATFORM BASE END */

:root {
  color-scheme: light;
  --ui-font:"Briefly Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ui-r: 10px;
  --bg: #f6f7fb;
  --panel: #ffffff;
  --panel-soft: #f1f3f9;
  --sidebar: #ffffff;
  --sidebar-foot: #ffffff;
  --text: #0b1020;
  --muted: #5b6275;
  --muted-2: #667088;
  --line: #e4e7ef;
  --line-strong: #d3d8e4;
  --hover: #f1f3f9;
  --active: #eaf0fe;
  --active-text: #0b1020;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-contrast: #ffffff;
  --danger: #c8372d;
  --danger-soft: #fdeceb;
  --badge: #2563eb;
  --receipt: #8a93a8;
  --online: #2f9e5b;
  --avatar: #7b8294;
  --bubble-in: #ffffff;
  --bubble-out: #ffffff;
  --shadow: 0 18px 50px #0b102022;
  --shadow-soft: 0 6px 24px #0b102012;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1118;
  --panel: #141821;
  --panel-soft: #1a1f2b;
  --sidebar: #121620;
  --sidebar-foot: #121620;
  --text: #e8ebf3;
  --muted: #9aa3b6;
  --muted-2: #8d97ad;
  --line: #232a38;
  --line-strong: #323b4d;
  --hover: #1b2130;
  --active: #1c2744;
  --active-text: #e8ebf3;
  --accent: #7ea2ff;
  --accent-hover: #9db8ff;
  --accent-contrast: #0b1020;
  --danger: #f08a82;
  --danger-soft: #3a2326;
  --badge: #7ea2ff;
  --receipt: #93a0bd;
  --online: #4cc27f;
  --avatar: #7b8294;
  --bubble-in: #141821;
  --bubble-out: #141821;
  --shadow: 0 18px 50px #0007;
  --shadow-soft: 0 6px 24px #0004;
}

html,body {
  font-family: var(--ui-font);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,input,textarea,select {
  font-family: inherit;
}

::selection {
  background: color-mix(in srgb,var(--accent) 26%,transparent);
}

.msg-time,.nav-time,.msg-meta {
  font-variant-numeric: tabular-nums;
}

.avatar,.chat-avatar {
  border-radius: 50%;
}

.primary:focus-visible,.icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (min-width:1001px) {
  .shell {
    grid-template-columns: clamp(264px,20vw,296px) minmax(0,1fr);
  }
}

.briefly-ui .workspace-head {
  flex: 0 0 60px;
  height: 60px;
  min-height: 60px;
  padding: 0 12px;
  gap: 6px;
}

.briefly-ui .workspace-switch {
  gap: 10px;
  padding: 4px 6px;
  margin-left: -6px;
  border-radius: var(--ui-r);
}

.briefly-ui .workspace-switch:hover {
  background: var(--hover);
}

.briefly-ui .workspace-logo {
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 14px;
  font-weight: 700;
}

.briefly-ui .workspace-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.briefly-ui .workspace-name {
  order: 1;
  font-size: 14px;
  line-height: 18px;
  font-weight: 650;
  letter-spacing: -.005em;
}

.briefly-ui .workspace-kicker {
  order: 2;
  margin: 0;
  font-size: 11.5px;
  line-height: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.briefly-ui .workspace-switch-hint b {
  font-size: 14px;
  color: var(--muted);
}

.briefly-ui .quick-new {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--ui-r);
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

.briefly-ui .quick-new:hover {
  background: var(--hover);
  color: var(--accent);
}

.briefly-ui .sidebar-tools {
  padding: 2px 12px 10px;
}

.briefly-ui .sidebar-tools .sidebar-search {
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--ui-r);
  background: var(--bg);
  color: var(--muted);
}

.briefly-ui .sidebar-search:focus-within {
  border-color: var(--accent);
  background: var(--panel);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
}

.briefly-ui .sidebar-search input {
  font-size: 13px;
}

@media (hover:hover) and (min-width:761px) {
  .briefly-ui .sidebar-search::after {
    content: "Ctrl K";
    flex: none;
    padding: 0 5px;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    font-size: 10.5px;
    line-height: 16px;
    color: var(--muted);
  }

  .briefly-ui .sidebar-search:focus-within::after {
    display: none;
  }
}

.briefly-ui .briefly-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0 6px;
}

.briefly-ui .briefly-filters button {
  width: auto;
  height: 28px;
  padding: 0 12px;
  gap: 0;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.briefly-ui .briefly-filters button:hover {
  background: var(--hover);
  color: var(--text);
}

.briefly-ui .briefly-filters .selected {
  background: var(--active);
  color: var(--accent);
  font-weight: 600;
}

.briefly-ui #brieflyComments {
  flex: 0 0 100%;
  justify-content: flex-start;
}

.briefly-ui .briefly-filters b,.briefly-ui .bfx-count {
  margin-left: 6px;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--badge);
  color: var(--accent-contrast);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 18px;
}

.briefly-ui #brieflyComments b,.briefly-ui .bfx-count {
  margin-left: auto;
}

.briefly-ui .nav-scroll {
  padding: 0 6px 10px;
}

.briefly-ui .briefly-section {
  margin: 0 0 6px;
}

.briefly-ui .briefly-section-head {
  height: 28px;
  padding: 0 4px;
}

.briefly-ui .briefly-section-head button {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}

.briefly-ui .nav-item.bfx-row {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  margin: 1px 0;
  padding: 6px 8px;
  gap: 10px;
  border-radius: var(--ui-r);
}

.briefly-ui .bfx-row:hover {
  background: var(--hover);
}

.briefly-ui .bfx-row.active {
  background: var(--active);
  color: var(--active-text);
}

.briefly-ui .bfx-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

.briefly-ui .bfx-avatar .avatar,.briefly-ui .bfx-avatar .chat-avatar,.briefly-ui .bfx-avatar .presence-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}

.briefly-ui .bfx-avatar img {
  width: 36px !important;
  height: 36px !important;
}

.briefly-ui .bfx-label {
  font-size: 13.5px;
  font-weight: 500;
}

.briefly-ui .bfx-row.has-unread .bfx-label {
  font-weight: 650;
}

.briefly-ui .bfx-contact-badge {
  border-radius: 99px;
  background: var(--hover);
  color: var(--muted);
  font-weight: 500;
}

.briefly-ui .sidebar-foot {
  min-height: 64px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--sidebar);
}

.briefly-ui .me-name {
  font-size: 13px;
  font-weight: 600;
}

.briefly-ui .me-status {
  margin-top: 1px;
}

.briefly-ui>.main {
  background: var(--bg);
}

.shell.briefly-ui .chat-head {
  min-height: 60px;
  padding: 0 16px;
  background: var(--panel);
}

.briefly-ui .chat-title {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.005em;
}

.briefly-ui .chat-sub {
  font-size: 12px;
}

.briefly-ui .chat-head-copy {
  gap: 1px;
}

.briefly-ui .chat-head-chevron {
  margin-left: 2px;
  font-size: 18px;
  color: var(--muted-2);
}

.briefly-ui #messagePinsBar.pins-preview,.briefly-ui #messagePinsBar {
  width:calc(100% - 24px);max-width:760px;height:36px;min-height:36px;
  margin:4px auto 6px;padding:0 8px !important;gap:6px;
  background:var(--panel-soft);border:1px solid var(--line);border-radius:9px;
}
.briefly-ui #messagePinsBar .pins-copy {
  flex:1;flex-direction:row;align-items:center;gap:8px;
  border-left:0 !important;padding-left:0 !important;overflow:hidden;
}
.briefly-ui .pins-copy > strong {font-size:11px;line-height:18px;white-space:nowrap;flex-shrink:0}
.briefly-ui .pins-copy > span {min-width:0;flex:1;font-size:12px;line-height:18px;color:var(--text)}
.briefly-ui .pins-copy > span strong {font-size:inherit;line-height:inherit;color:inherit}
.briefly-ui #messagePinsBar .pins-all {
  display:flex;align-items:center;justify-content:center;gap:4px;
  height:30px;min-width:30px;padding:4px;border:0;background:transparent;border-radius:6px;
}
.briefly-ui #messagePinsBar .pins-all svg {width:17px;height:17px}
.briefly-ui #messagePinsBar .pins-all:hover {background:var(--hover)}

.briefly-ui .composer-wrap {
  padding: 6px max(16px,calc((100% - 900px)/2),env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,calc((100% - 900px)/2),env(safe-area-inset-left));
  background: var(--bg);
}

.briefly-ui .composer {
  border-color: var(--line-strong);
  border-radius: 16px;
  background: var(--panel);
}

.briefly-ui .composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
}

.briefly-ui .composer button {
  width: 34px;
  height: 34px;
}

.briefly-ui .composer .send {
  background: var(--accent);
  color: var(--accent-contrast);
}

.briefly-ui .composer .send:hover {
  background: var(--accent-hover);
}

@media (min-width:761px) {
  .briefly-ui .composer textarea {
    font-size: 14px;
  }
}

.modal.thread-modal {
  background: var(--panel);
  border-left: 1px solid var(--line);
}

.modal.thread-modal .thread-root-shell {
  padding: 14px 14px 12px;
}

.modal.thread-modal .thread-comments-head {
  padding: 8px 14px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.modal.thread-modal .thread-entry {
  grid-template-columns: 30px minmax(0,1fr);
  gap: 10px;
  padding: 8px 14px;
  border-radius: 0;
}

.modal.thread-modal .thread-entry .thread-avatar {
  width: 30px;
}

.modal.thread-modal .thread-entry .avatar {
  width: 30px;
  height: 30px;
}

.modal.thread-modal .thread-entry-head b {
  font-size: 13px;
  font-weight: 600;
}

.modal.thread-modal .thread-composer {
  border-color: var(--line-strong);
  border-radius: 14px;
  background: var(--panel);
}

.discussion-heading {
  padding: 14px 20px 0;
}

.discussion-heading h2 {
  font-size: 16px;
  font-weight: 650;
}

.discussion-feed {
  max-width: 820px;
  padding: 16px 20px;
}

.discussion-card {
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.discussion-source {
  color: var(--accent);
  font-weight: 600;
}

.auth {
  background: var(--bg);
}

.auth-card {
  padding: 32px;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.brandmark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.auth h1 {
  font-size: 24px;
  font-weight: 650;
}

.auth form .primary {
  width: 100%;
  margin-top: 10px;
  padding: 11px 14px;
}

/* Touch screens: native keyboard, comfortable controls and display cutouts. */
@media (pointer: coarse) {
  .briefly-ui .composer button { width: 44px; height: 44px; }
  .briefly-ui .composer textarea, .modal textarea, .modal input, .discussion-compose textarea { font-size: 16px; }
  .message-menu button { min-height: 44px; }
}
@media (max-width: 760px) {
  .shell > .main { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); box-sizing: border-box; }
  .shell.briefly-ui .chat-head { padding-top: env(safe-area-inset-top); }
  .briefly-ui #composerWrap {
    min-height: 0;
    padding: 6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
  .briefly-ui #composer {
    min-width: 0;
    min-height: 50px;
    padding: 2px;
    gap: 0;
    border-radius: 20px;
    box-shadow: none;
  }
  .briefly-ui #composer button,
  .briefly-ui #composer #fileBtn,
  .briefly-ui #composer .send {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 10px;
  }
  .briefly-ui #text {
    min-width: 0;
    min-height: 44px;
    font-size: 16px;
    line-height: 22px;
    padding: 11px 2px;
  }
  .briefly-ui #pushBanner {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 4px;
    margin-bottom: 4px;
    gap: 8px;
    font-size: 12px;
    justify-content: space-between;
  }
  .briefly-ui #pushBanner .push-banner-action { min-height: 44px; }
  html[data-keyboard="open"] .briefly-ui #composerWrap { padding-bottom: 4px; }
  .modal.thread-modal .modal-head { padding-top: max(16px,env(safe-area-inset-top)); }
  .modal.thread-modal .thread-composer { margin-bottom: max(12px,env(safe-area-inset-bottom)); }
  .sidebar { padding-top: env(safe-area-inset-top); box-sizing: border-box; }
}

/* Code tokens inherit a theme-specific palette; plain text remains selectable. */
.message-code .syntax-keyword { color: #7c3aed; }
.message-code .syntax-string { color: #18733b; }
.message-code .syntax-number { color: #a44b09; }
.message-code .syntax-comment { color: #667085; font-style: italic; }
.message-code .syntax-function { color: #175cd3; }
[data-theme="dark"] .message-code .syntax-keyword { color: #c4a7ff; }
[data-theme="dark"] .message-code .syntax-string { color: #8bd5a0; }
[data-theme="dark"] .message-code .syntax-number { color: #f5b97a; }
[data-theme="dark"] .message-code .syntax-comment { color: #9ca8ba; }
[data-theme="dark"] .message-code .syntax-function { color: #8cbdff; }

/* Mentions: composer suggestions and saved recipient links. */
.mention-picker { position:fixed; z-index:320; width:min(320px,calc(100vw - 16px)); overflow-y:auto; border:1px solid var(--line); border-radius:12px; padding:5px; background:var(--panel); box-shadow:var(--shadow); }
.mention-picker button { display:flex; align-items:center; width:100%; gap:9px; padding:8px; border:0; border-radius:8px; text-align:left; background:none; color:var(--text); min-height:44px; cursor:pointer; }
.mention-picker button[aria-selected="true"],.mention-picker button:hover { background:var(--hover); }
.mention-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--panel-soft); color:var(--accent); flex-shrink:0; }
.mention-picker b,.mention-picker small { display:block; font-size:13px; overflow-wrap:anywhere; }
.mention-picker small { font-size:11px; color:var(--muted); margin-top:2px; }
.message-mention { display:inline; padding:1px 4px; border:0; border-radius:5px; background:var(--active); color:var(--accent); font:inherit; cursor:pointer; overflow-wrap:anywhere; }
.mention-person { display:flex; align-items:center; gap:10px; padding:8px; }

.format-preview-body { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; }

#composerWrap { position:relative; }
.chat-navigation { position:absolute; right:18px; bottom:calc(100% + 12px); display:flex; flex-direction:column; gap:8px; z-index:12; }
.chat-navigation[hidden],.chat-navigation button[hidden] { display:none; }
.chat-navigation button { position:relative; display:grid; place-items:center; width:38px; height:38px; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--text); box-shadow:0 3px 12px #0002; font-size:20px; cursor:pointer; }
.chat-navigation button:hover { background:var(--hover); }
.chat-navigation small { position:absolute; top:-5px; right:-5px; padding:1px 4px; min-width:15px; border-radius:10px; background:var(--accent); color:var(--accent-contrast); font-size:10px; }
@media (hover:none) { .chat-navigation button { width:44px; height:44px; } }

.modal.message-info-modal{width:min(420px,calc(100vw - 24px))}
.message-info-list{max-height:min(48vh,380px);overflow:auto}
.message-info-person{display:flex;align-items:center;gap:10px;padding:9px 0}
.message-info-person>.message-info-person-text{flex:1;min-width:0}.message-info-person b{font-size:14px}.message-info-person small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.message-info-person>span{font-size:24px}

.modal.reminder-modal{width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border-radius:18px;overflow:auto}
.reminder-modal>.modal-head{padding:22px 24px 14px;border:0}.reminder-modal>.modal-head h2{font-size:21px;letter-spacing:-.4px}
.reminder-modal>.modal-body{padding:8px 24px 18px}.reminder-modal>.modal-foot{padding:0 24px 22px;border:0;display:flex;align-items:center;gap:8px}
.reminder-preview{display:flex;gap:10px;border-left:3px solid var(--line);padding:2px 0 2px 12px;margin:2px 0 24px;align-items:flex-start}
.reminder-preview>.avatar{flex-shrink:0;width:34px;height:34px}.reminder-preview-text{min-width:0;flex:1}.reminder-preview-text>div{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}.reminder-preview b{font-size:13px}.reminder-preview time{font-size:11px;color:var(--muted)}.reminder-preview p{font-size:14px;line-height:1.45;margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;white-space:pre-wrap}
.reminder-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.reminder-options>button{min-width:0;min-height:72px;padding:12px 6px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.reminder-options small{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:11px;font-weight:400}.reminder-options>button[aria-pressed="true"]{border-color:#5096fa;background:rgba(51,133,255,.07);color:#2876df}.reminder-options>button[aria-pressed="true"] small{color:inherit}.reminder-options>button:hover{border-color:#5096fa}.reminder-options>button:focus-visible{outline:2px solid #5096fa;outline-offset:2px}
.reminder-custom{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:12px}.reminder-custom[hidden],.reminder-modal [hidden]{display:none!important}
.reminder-month{display:flex;align-items:center;gap:4px;margin-bottom:8px}.reminder-month b{flex:1;font-size:13px;text-transform:capitalize}.reminder-month button{width:30px;height:30px;border:0;background:transparent;color:var(--text);font-size:24px;border-radius:7px;cursor:pointer}.reminder-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.reminder-days>span{text-align:center;font-size:11px;color:var(--muted);padding:5px}.reminder-days button{height:30px;border:0;border-radius:7px;background:transparent;color:var(--text);font:inherit;font-size:12px;cursor:pointer}.reminder-days button:hover:not(:disabled),.reminder-month button:hover:not(:disabled){background:#eef3ff}.reminder-days button[aria-pressed="true"]{background:#2864f4!important;color:white}.reminder-days button:disabled,.reminder-month button:disabled{opacity:.3;cursor:default}.reminder-days button:focus-visible{outline:2px solid #5096fa;outline-offset:1px}.reminder-clock{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);margin-top:10px;padding-top:10px;font-size:12px;color:var(--muted)}.reminder-clock>span:first-child{margin-right:auto}.reminder-clock input{box-sizing:border-box;width:42px;min-width:0;height:34px;padding:4px;text-align:center;font:inherit;font-size:16px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:7px}
.message-reminder{display:inline-flex;align-items:center;justify-content:center;width:24px;height:22px;padding:0;border:0;border-radius:6px;background:transparent;color:#326ddd;cursor:pointer;vertical-align:middle}.message-reminder:hover{background:#e8efff}.message.mine .message-reminder{color:inherit}
.reminder-alert{position:fixed;right:16px;bottom:90px;z-index:1100;box-sizing:border-box;width:min(310px,calc(100vw - 32px));padding:12px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 24px #00000014}.reminder-alert-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;color:var(--muted);font-size:11px}.reminder-alert-head button{border:0;background:transparent;color:var(--muted);width:24px;height:24px;font-size:19px;cursor:pointer}.reminder-quote{display:block;width:100%;border:0;border-left:3px solid #5684ed;border-radius:3px;padding:4px 10px;text-align:left;background:transparent;color:var(--text);font:inherit;cursor:pointer}.reminder-quote>b{display:block;font-size:12px;margin-bottom:4px;color:#326ddd}.reminder-quote>span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:13px;line-height:1.45}

.reminder-modal [data-save-reminder]{margin-left:auto;display:flex;align-items:center;gap:7px}.reminder-modal>.modal-foot button{min-height:38px;padding:8px 12px;border-radius:9px}.reminder-modal [data-remove-reminder]{color:var(--muted)}.reminder-modal .message-action-error:empty{display:none}.reminder-modal .message-action-error:not(:empty){margin-top:12px}
@media(max-width:420px){.reminder-modal>.modal-head{padding:18px 16px 12px}.reminder-modal>.modal-head h2{font-size:19px}.reminder-modal>.modal-body{padding:8px 16px 18px}.reminder-modal>.modal-foot{padding:0 16px 18px}.reminder-options{grid-template-columns:repeat(2,minmax(0,1fr))}.reminder-preview{margin-bottom:18px}.reminder-modal>.modal-foot button{font-size:12px;padding:8px 10px}}


/* Email verification / password recovery */
.mail-auth-link { display:block; margin:14px auto 0; border:0; background:transparent; color:var(--accent,#5b8cff); cursor:pointer; padding:8px; font:inherit; }
.mail-auth-link:hover { text-decoration:underline; }

/* Account security follows the profile card theme. */
.modal.security-profile-modal { width:min(440px,calc(100vw - 24px)); }
.security-profile-modal .modal-head { padding:16px 18px; }
.security-profile-modal .modal-body { padding:16px; overflow-y:auto; }
.security-profile-modal .modal-foot { padding:12px 16px; flex-shrink:0; }
.security-profile-modal .modal-foot button { min-height:36px; padding:7px 12px; font:500 13px/1.4 var(--ui-font); }
.account-security { display:grid; gap:10px; min-width:0; }
.account-security .security-section { border:1px solid var(--line); border-radius:12px; background:var(--panel); min-width:0; overflow:hidden; }
.account-security .security-section>summary { display:flex; align-items:center; gap:12px; padding:15px 16px; color:var(--text); font-size:14px; font-weight:600; line-height:1.4; cursor:pointer; list-style:none; }
.account-security .security-section>summary::-webkit-details-marker { display:none; }
.account-security .security-section>summary::after { content:""; width:6px; height:6px; margin-left:auto; margin-right:2px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); flex-shrink:0; }
.account-security .security-section[open]>summary::after { transform:rotate(225deg); }
.account-security .security-section>summary:hover { background:var(--hover); }
.account-security .security-section>summary:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; border-radius:10px; }
.account-security .security-content { display:grid; gap:14px; padding:0 16px 16px; }
.account-security p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.account-security form { display:grid; gap:12px; min-width:0; margin:0; }
.account-security label { display:grid; gap:6px; color:var(--text); font-size:12px; font-weight:500; line-height:1.4; }
.account-security input { appearance:none; display:block; width:100%; min-width:0; box-sizing:border-box; min-height:40px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:9px; background:var(--panel-soft); color:var(--text); font:400 14px/1.4 var(--ui-font); outline:none; transition:border-color .15s,box-shadow .15s; }
.account-security input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.account-security button { width:auto; justify-self:start; max-width:100%; min-height:38px; padding:9px 14px; font:500 13px/1.4 var(--ui-font); border-radius:9px; cursor:pointer; }
.account-security button:disabled { opacity:.55; cursor:wait; }
.account-security [hidden] { display:none!important; }
.account-security pre,.account-security code { display:block; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; font-size:13px; line-height:1.6; background:var(--panel-soft); border:1px solid var(--line); border-radius:8px; padding:10px; }
.account-security [data-enrollment],.account-security [data-email-actions],.account-security [data-recovery] { display:grid; gap:12px; min-width:0; }
.account-security [data-recovery] h4 { margin:0; font-size:13px; }
.account-security [data-qr] { width:100%; max-width:220px; box-sizing:border-box; background:white; border-radius:10px; padding:12px; }
.account-security [data-qr] svg,.account-security [data-qr] canvas { display:block; max-width:100%; height:auto; }
.account-security .security-content summary { color:var(--text); cursor:pointer; font-size:13px; padding:8px 0; }
.account-security .security-content details[open]>summary { margin-bottom:8px; }
.account-security [data-security-message] { padding:0 4px; color:var(--text); }
.account-security [data-security-message]:empty { display:none; }
@media(max-width:480px) {
 .security-profile-modal .modal-head { padding:14px 16px; }
 .security-profile-modal .modal-body { padding:12px; }
 .account-security input { font-size:16px; }
 .account-security button { min-height:42px; }
}

/* Chat details: compact view and editor, scoped above legacy modal rules. */
.modal.chat-info-modal { width:min(440px,calc(100vw - 32px)); height:auto; max-height:calc(100dvh - 40px); display:flex; flex-direction:column; overflow:hidden; border-radius:18px; }
.modal.chat-info-modal [hidden] { display:none !important; }
.modal.chat-info-modal > .modal-head { padding:16px 20px; gap:12px; flex:none; border-bottom:1px solid var(--line); }
.modal.chat-info-modal > .modal-head h2 { font-size:17px; line-height:1.35; }
.modal.chat-info-modal > .modal-head .close { flex:none; width:28px; min-width:28px; height:28px; min-height:28px; padding:0; font-size:21px; }
.modal.chat-info-modal > .modal-body { padding:0; overflow:auto; min-height:0; }
.modal.chat-info-modal .chat-info-sheet { display:flex; flex-direction:column; gap:0; }
.modal.chat-info-modal .chat-info-hero { display:grid; padding:22px 24px 20px !important; grid-template-columns:64px minmax(0,1fr); grid-template-rows:auto auto auto; gap:3px 16px; align-items:start; text-align:left; }
.modal.chat-info-modal .chat-info-avatar-wrap { grid-column:1; grid-row:1 / span 2; margin:0 !important; }
.modal.chat-info-modal .chat-info-avatar-wrap .chat-avatar,.modal.chat-info-modal .chat-info-avatar-wrap .avatar { width:64px !important; height:64px !important; min-width:64px; min-height:64px; max-width:64px; max-height:64px; border-radius:16px; }
.modal.chat-info-modal .chat-info-title { grid-column:2; grid-row:1; font-size:20px !important; line-height:1.25; margin:5px 0 0 !important; overflow-wrap:anywhere; }
.modal.chat-info-modal .chat-info-type { grid-column:2; grid-row:2; font-size:13px !important; line-height:1.4; margin:0; }
.modal.chat-info-modal .chat-info-description { grid-column:1 / -1; grid-row:3; max-width:none; margin:12px 0 0 !important; font-size:14px !important; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.modal.chat-info-modal .chat-info-description.muted { color:var(--muted); }
.modal.chat-info-modal .chat-material-shortcuts { display:flex; flex-direction:column; gap:0; margin:0; padding:0; border:0; border-radius:0; }
.modal.chat-info-modal .chat-material-shortcuts button { display:flex; flex:none; align-items:center; gap:12px; width:100%; min-height:46px; padding:12px 24px; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; text-align:left; font-size:14px; line-height:1.5; }
.modal.chat-info-modal .chat-material-shortcuts button:hover { background:var(--hover); }
.modal.chat-info-modal .chat-material-shortcuts button svg { display:none; }
.modal.chat-info-modal .chat-material-shortcuts button span { flex:1; }
.modal.chat-info-modal .chat-material-shortcuts button i { color:var(--muted); font-style:normal; }
.modal.chat-info-modal .chat-info-section-title { display:flex; justify-content:flex-start; align-items:center; gap:5px; min-height:0; margin:0; padding:16px 24px 8px; border-top:1px solid var(--line); font-size:13px; }
.modal.chat-info-modal .chat-info-section-title > span { min-width:0; text-align:left; font-weight:400; }
.modal.chat-info-modal .chat-info-add-member { margin-left:auto; min-height:32px; height:auto; padding:4px 0 4px 10px; border:0; border-radius:6px; background:transparent; color:var(--accent); font-size:13px; font-weight:600; }
.modal.chat-info-modal .chat-info-members { padding:0 16px 12px; max-height:230px; overflow:auto; gap:2px; }
.modal.chat-info-modal .chat-info-member { padding:10px 8px; grid-template-columns:38px minmax(0,1fr) 16px; gap:12px; }
.modal.chat-info-modal .chat-info-member .avatar { width:38px; height:38px; }
.modal.chat-info-modal .chat-info-member b { font-size:14px; }
.modal.chat-info-modal .chat-info-member small { font-size:12px; }
.modal.chat-info-modal .chat-leave { margin:0; padding:14px 24px; min-height:46px; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; color:#ef625b; font-size:14px; width:100%; }
.modal.chat-info-modal .chat-info-edit { padding:24px !important; margin:0 !important; border:0; background:transparent; }
.modal.chat-info-modal .chat-info-photo-edit { display:flex; gap:18px; align-items:center; margin-bottom:22px; }
.modal.chat-info-modal .chat-info-photo-preview { width:72px; height:72px; flex:0 0 72px; }
.modal.chat-info-modal .chat-info-photo-preview > img,.modal.chat-info-modal .chat-info-photo-preview .chat-avatar { width:72px; height:72px; min-width:72px; min-height:72px; border-radius:17px; object-fit:cover; }
.modal.chat-info-modal .chat-avatar-change,.modal.chat-info-modal .chat-edit-toggle { position:static; border:0; background:transparent; color:var(--accent); padding:4px 0; font-size:14px; font-weight:600; margin:0; }
.modal.chat-info-modal .chat-info-edit .chat-avatar-change { margin:0; }
.modal.chat-info-modal .chat-info-edit .field { margin:0 0 16px; }
.modal.chat-info-modal .chat-info-edit label { display:block; margin-bottom:6px; font-size:13px; }
.modal.chat-info-modal .chat-info-edit input,.modal.chat-info-modal .chat-info-edit textarea { width:100%; font-size:16px; padding:12px; border-radius:10px; box-sizing:border-box; }
.modal.chat-info-modal .chat-info-edit textarea { min-height:110px; resize:vertical; }
.modal.chat-info-modal .field small { display:block; text-align:right; color:var(--muted); margin-top:5px; font-size:12px; }
.modal.chat-info-modal .chat-info-error { color:#ef625b; white-space:pre-wrap; font-size:13px; }
.modal.chat-info-modal > .modal-foot { display:flex; padding:16px 24px; gap:10px; flex:none; border-top:1px solid var(--line); justify-content:flex-end; }
.modal.chat-info-modal > .modal-foot button { min-height:40px; padding:10px 18px; border-radius:10px; font-size:14px; }
.modal.chat-info-modal .chatInfoClose { display:inline-flex; }
@media(max-width:480px) {
 .modal.chat-info-modal { width:calc(100vw - 32px); max-height:calc(100dvh - 32px); }
 .modal.chat-info-modal > .modal-head { padding:14px 16px; gap:8px; }
 .modal.chat-info-modal > .modal-head h2 { font-size:16px; }
 .modal.chat-info-modal .chat-info-hero { padding:20px 18px 18px !important; gap:3px 12px; }
 .modal.chat-info-modal .chat-info-title { font-size:18px !important; }
 .modal.chat-info-modal .chat-info-edit { padding:20px 18px !important; }
 .modal.chat-info-modal .chat-material-shortcuts button { padding:12px 18px; }
 .modal.chat-info-modal .chat-info-section-title { padding:14px 18px 6px; }
 .modal.chat-info-modal > .modal-foot { padding:14px 18px; }
}

/* Video cards and a dark viewer, consistent across themes. */
.video-attachment { position:relative; display:block; width:320px; max-width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:14px; background:#171b23; color:#fff; text-decoration:none; isolation:isolate; }
.video-attachment .video-preview { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.video-preview-fallback { position:absolute; inset:0; display:grid; place-items:center; padding-top:70px; font-size:13px; color:#b7bfcc; }
.preview-ready .video-preview-fallback { display:none; }
.video-preview-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:rgba(0,0,0,.55); pointer-events:none; }
.video-preview-play svg { width:25px; height:25px; margin-left:3px; }
.video-duration { position:absolute; bottom:9px; right:10px; padding:3px 7px; border-radius:6px; background:rgba(0,0,0,.65); font-size:12px; font-variant-numeric:tabular-nums; }
.bfx-video-viewer { width:min(1100px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); box-sizing:border-box; padding:0; border:1px solid #303540; border-radius:14px; background:#101217; color:#f5f6fa; overflow:auto; color-scheme:dark; }
.bfx-video-viewer::backdrop { background:rgba(0,0,0,.86); }
.bfx-video-viewer .video-title { height:52px; box-sizing:border-box; display:flex; align-items:center; margin:0; padding:0 104px 0 18px; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bfx-video-viewer button,.bfx-video-viewer .video-download { display:inline-grid; place-items:center; width:36px; height:36px; min-width:36px; padding:7px; box-sizing:border-box; border:0; border-radius:8px; background:transparent; color:#f5f6fa; cursor:pointer; }
.bfx-video-viewer button:hover,.bfx-video-viewer .video-download:hover { background:#292e38; }
.bfx-video-viewer svg { width:22px; height:22px; }
.bfx-video-viewer .video-close { position:absolute; top:8px; right:10px; }
.bfx-video-viewer .video-download { position:absolute; top:8px; right:54px; }
.bfx-video-viewer > video { display:block; width:100%; height:auto; max-height:calc(100dvh - 160px); background:#000; object-fit:contain; }
.bfx-video-viewer .video-controls { display:flex; align-items:center; gap:10px; padding:10px 12px; }
.bfx-video-viewer .video-time { font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bfx-video-viewer input[type=range] { height:24px; min-width:0; padding:0; border:0; box-shadow:none; accent-color:#a8b8ff; background:transparent; cursor:pointer; }
.bfx-video-viewer .video-seek { flex:1; width:auto; }
.bfx-video-viewer .video-volume { flex:none; width:72px; }
.bfx-video-viewer .video-error { padding:0 18px; font-size:14px; color:#bcc3cf; }
.bfx-video-viewer [hidden] { display:none !important; }
.bfx-video-viewer:fullscreen { width:100vw; height:100dvh; max-height:none; border:0; border-radius:0; display:flex; flex-direction:column; }
.bfx-video-viewer:fullscreen > video { flex:1; min-height:0; max-height:none; }
@media(max-width:540px) {
 .bfx-video-viewer .video-controls { flex-wrap:wrap; gap:5px; padding:8px; }
 .bfx-video-viewer .video-seek { order:-1; flex:1 0 100%; }
 .bfx-video-viewer .video-time { margin-right:auto; }
 .bfx-video-viewer .video-volume { width:55px; }
 .bfx-video-viewer > video { max-height:calc(100dvh - 200px); }
}

/* Visual message editors. Markdown is kept only in the API value. */
.rich-message-input.ProseMirror{position:relative;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;outline:none;min-width:0;box-sizing:border-box;color:var(--text);font:inherit;line-height:1.45;cursor:text;tab-size:4}
.rich-message-input p{margin:0;min-height:1.45em}
.rich-message-input p+p{margin-top:0}
.rich-message-input[data-empty="true"]::before{content:attr(data-placeholder);color:var(--muted);position:absolute;pointer-events:none}
.rich-message-input[aria-disabled="true"]{opacity:.55;cursor:default}
.rich-message-input .rich-spoiler{background:var(--border,#d8dbe5);border-radius:4px;color:inherit;padding:0 2px}
.rich-message-input .rich-mention{color:var(--accent,#2563eb);background:rgba(94,120,240,.1);border-radius:3px}
.rich-message-input a{color:var(--accent,#2563eb);text-decoration:underline;cursor:text}
.rich-message-input blockquote{border-left:3px solid var(--accent,#2563eb);margin:4px 0;padding-left:10px}
.rich-message-input ul,.rich-message-input ol{margin:4px 0;padding-left:24px}
.rich-message-input pre{white-space:pre-wrap;margin:4px 0;padding:8px;border-radius:6px;background:var(--bg,#eef0f6);font:13px/1.5 monospace}
.rich-message-input code{font-family:monospace;background:rgba(128,128,128,.12);border-radius:3px;padding:0 2px}
.rich-message-input pre code{background:none;padding:0}
.composer .rich-message-input{flex:1;width:100%;min-height:32px;max-height:180px;padding:5px 0;border:0;background:transparent;resize:none;font-size:15px}
.thread-compose-center .rich-message-input{width:100%;min-height:32px;max-height:180px;padding:6px 4px;background:transparent;border:0;font-size:15px}
.discussion-compose .rich-message-input{flex:1;min-height:40px;max-height:180px;padding:10px 12px;border:1px solid var(--border,#ddd);border-radius:12px;background:var(--panel,#fff);font-size:14px}
.modal .rich-message-input.edit-message-text{width:100%;min-height:120px;max-height:45vh;overflow-y:auto;padding:12px;border:1px solid var(--border,#ddd);border-radius:12px;background:var(--panel,#fff)}
.rich-message-input .ProseMirror-selectednode{outline:2px solid var(--accent,#2563eb)}
.rich-message-input .ProseMirror-separator{display:inline!important;border:0!important;margin:0!important;width:0!important;height:0!important}
.rich-message-input.ProseMirror-hideselection *::selection{background:transparent}
.rich-message-input.ProseMirror-hideselection *::-moz-selection{background:transparent}