/* Appearance tokens: data-theme="light"/"dark"; unset follows system. */
:root {
  color-scheme:light;
  --ink:#202b3b;
  --muted:#8190a3;
  --line:#e8edf3;
  --soft:#f4f6f5;
  --paper:#fff;
  --canvas:#eef3f0;
  --rail:#f4f8f5;
  --brand:#16816f;
  --brand-strong:#106b5c;
  --brand-soft:#e4f4ee;
  --brand-ink:#176b5c;
  --own-bubble:#d9f1e7;
  --own-ink:#24483f;
  --own-meta:#668d81;
  --chat-canvas:#f1f5f3;
  --pattern:#d7e2db;
  --danger:#d45460;
  --danger-soft:#fff0f2;
  --success:#46aa90;
  --warning:#af7c2a;
  --warning-soft:#fff6e5;
  --overlay:rgba(25,37,57,.3);
  --shadow:0 12px 42px rgba(31,48,76,.12);
  --bubble-shadow:0 1px 2px rgba(34,55,82,.035);
  --focus:rgba(22,129,111,.24);
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  color:var(--ink);
  background:var(--canvas)
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --ink:#e2ede7;
  --muted:#8eaaa0;
  --line:#2b3c35;
  --soft:#1d3029;
  --paper:#192923;
  --canvas:#12221c;
  --rail:#17251f;
  --brand:#29957e;
  --brand-strong:#36aa90;
  --brand-soft:#213f37;
  --brand-ink:#87dfc5;
  --own-bubble:#244e41;
  --own-ink:#edf4ff;
  --own-meta:#92c2ad;
  --chat-canvas:#121f1d;
  --pattern:#2e423b;
  --danger:#ee8390;
  --danger-soft:#3c2937;
  --success:#6ac4a9;
  --warning:#dcb77b;
  --warning-soft:#373328;
  --overlay:rgba(3,9,17,.62);
  --shadow:0 15px 48px rgba(0,0,0,.25);
  --bubble-shadow:0 1px 2px rgba(0,0,0,.1);
  --focus:rgba(67,184,150,.3)
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --ink:#e2ede7;
    --muted:#8eaaa0;
    --line:#2b3c35;
    --soft:#1d3029;
    --paper:#192923;
    --canvas:#12221c;
    --rail:#17251f;
    --brand:#29957e;
    --brand-strong:#36aa90;
    --brand-soft:#213f37;
    --brand-ink:#87dfc5;
    --own-bubble:#244e41;
    --own-ink:#edf4ff;
    --own-meta:#92c2ad;
    --chat-canvas:#121f1d;
    --pattern:#2e423b;
    --danger:#ee8390;
    --danger-soft:#3c2937;
    --success:#6ac4a9;
    --warning:#dcb77b;
    --warning-soft:#373328;
    --overlay:rgba(3,9,17,.62);
    --shadow:0 15px 48px rgba(0,0,0,.25);
    --bubble-shadow:0 1px 2px rgba(0,0,0,.1);
    --focus:rgba(67,184,150,.3)
  }
}
* {
  box-sizing:border-box
}
html,body {
  min-width:320px;
  min-height:100%;
  margin:0
}
body {
  min-height:100dvh;
  overflow:hidden;
  background:var(--canvas)
}
button,input,textarea,select {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  color:inherit
}
button:not(:disabled),[role="button"] {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.45
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:2px
}
svg {
  display:block;
  width:22px;
  height:22px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.hidden {
  display:none!important
}
.muted {
  color:var(--muted)
}
.eyebrow {
  margin:0 0 7px;
  color:var(--muted);
  font-size:11px;
  font-weight:650;
  letter-spacing:.09em
}
.brand-lockup {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  font-weight:650;
  letter-spacing:.04em
}
.brand-mark {
  display:grid;
  width:44px;
  height:44px;
  flex:0 0 44px;
  place-items:center;
  border-radius:13px;
  color:#fff;
  background:#16816f;
  font-family:"Songti SC","SimSun",Georgia,serif;
  font-size:24px;
  font-weight:600
}
.brand-mark.large {
  width:56px;
  height:56px;
  flex-basis:56px;
  font-size:28px;
  border-radius:17px
}
.boot-screen {
  position:fixed;
  z-index:100;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:var(--paper);
  padding:24px
}
.boot-screen strong {
  font-size:20px;
  font-weight:650
}
.boot-screen p {
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px
}

.boot-screen .boot-recovery { max-width:290px; line-height:1.65; margin-top:14px }
.boot-reload { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; color:var(--brand-strong); font-size:14px; font-weight:600; text-underline-offset:4px }
@media (max-width:420px) { .boot-screen { flex-direction:column; text-align:center } }

/* Account entry */
.auth-view {
  display:grid;
  grid-template-columns:1fr 1fr;
  height:100dvh;
  overflow:auto;
  background:var(--paper)
}
.auth-presentation {
  position:relative;
  display:flex;
  min-height:720px;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:64px clamp(36px,7vw,120px);
  border-right:1px solid var(--line);
  background:var(--rail)
}
.auth-presentation>.brand-lockup {
  position:absolute;
  top:40px;
  left:44px
}
.presentation-copy {
  position:relative;
  z-index:1;
  width:100%
}
.presentation-copy .eyebrow {
  color:var(--brand-ink);
  font-size:12px;
  letter-spacing:.12em
}
.presentation-copy h1 {
  margin:20px 0 22px;
  font-size:clamp(32px,3vw,46px);
  font-weight:650;
  line-height:1.42;
  letter-spacing:-1.4px
}
.presentation-copy>p:last-child {
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.95
}
.auth-preview {
  width:min(100%,360px);
  margin-top:40px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--paper);
  box-shadow:0 12px 28px rgba(25,55,90,.04)
}
.preview-header {
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:17px;
  margin-bottom:16px;
  border-bottom:1px solid var(--line)
}
.preview-avatar {
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 36px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#7d9bbf;
  font-size:17px
}
.preview-header strong,.preview-header small,.preview-file strong,.preview-file small {
  display:block
}
.preview-header strong {
  font-size:13px;
  font-weight:650
}
.preview-header small {
  margin-top:4px;
  color:var(--muted);
  font-size:10px
}
.preview-header i {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--success);
  vertical-align:1px
}
.preview-header>svg {
  width:17px;
  height:17px;
  margin-left:auto;
  color:var(--muted)
}
.preview-message {
  width:fit-content;
  max-width:92%;
  padding:10px 12px 7px;
  border-radius:11px 11px 11px 3px;
  background:var(--soft);
  font-size:12px;
  line-height:1.6
}
.preview-message small {
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
  text-align:right
}
.preview-message.own {
  margin:12px 0 0 auto;
  border-radius:11px 11px 3px 11px;
  color:var(--own-ink);
  background:var(--own-bubble)
}
.preview-message.own small,.preview-message small span {
  color:var(--own-meta)
}
.preview-file {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:8px;
  padding:10px 12px;
  border-radius:3px 11px 11px;
  background:var(--soft)
}
.preview-file-icon {
  display:grid;
  width:32px;
  height:37px;
  place-items:center;
  border-radius:7px;
  color:var(--brand);
  background:var(--brand-soft)
}
.preview-file-icon svg {
  width:19px;
  height:19px
}
.preview-file strong {
  font-size:11px;
  font-weight:600
}
.preview-file small {
  margin-top:4px;
  color:var(--muted);
  font-size:9px
}
.preview-file>svg {
  width:16px;
  height:16px;
  margin-left:auto;
  color:var(--brand)
}
.auth-presentation-footer {
  position:absolute;
  bottom:30px;
  left:44px;
  margin:0;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.08em
}
.auth-presentation-footer span {
  padding:0 8px
}
.auth-panel {
  display:flex;
  min-width:0;
  min-height:680px;
  align-items:center;
  justify-content:center;
  padding:50px 36px
}
.auth-card {
  width:min(100%,350px)
}
.mobile-brand {
  display:none
}
.auth-card>.eyebrow {
  color:var(--brand-ink);
  font-size:11px
}
.auth-card h2 {
  margin:12px 0 10px;
  font-size:28px;
  font-weight:650;
  letter-spacing:-.8px
}
.auth-card>.muted {
  margin:0;
  font-size:13px;
  line-height:1.7
}
#admin-entry-gate {
  grid-template-columns:1fr;
  background:var(--rail)
}
#admin-entry-gate .auth-panel {
  min-height:100dvh
}
#admin-entry-gate .auth-card {
  padding:32px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper);
  box-shadow:0 16px 40px rgba(25,55,90,.08)
}
#admin-entry-gate h1 {
  margin:12px 0 10px;
  font-size:26px;
  font-weight:650;
  letter-spacing:-.6px
}
.auth-tabs {
  display:flex;
  gap:4px;
  margin:28px 0 24px;
  padding:4px;
  border-radius:10px;
  background:var(--soft)
}
.auth-tab {
  min-height:37px;
  flex:1;
  border:0;
  border-radius:7px;
  color:var(--muted);
  background:transparent;
  font-size:13px;
  font-weight:600
}
.auth-tab.active {
  color:var(--ink);
  background:var(--paper);
  box-shadow:0 1px 4px rgba(24,43,68,.08)
}
.field-label {
  display:block;
  margin:18px 0 8px;
  color:var(--ink);
  font-size:12px;
  font-weight:600
}
input,textarea,select {
  width:100%;
  min-width:0;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--ink);
  background:var(--paper);
  transition:border-color 130ms ease
}
input {
  height:45px;
  padding:0 13px;
  font-size:13px
}
input::placeholder,textarea::placeholder {
  color:var(--muted);
  opacity:.85
}
textarea {
  resize:none;
  padding:12px 14px;
  line-height:1.55
}
select {
  min-height:40px;
  padding:0 10px;
  font-size:13px
}
input:focus,textarea:focus,select:focus {
  border-color:var(--brand);
  outline:2px solid var(--focus);
  outline-offset:0
}
.primary-button,.secondary-button,.danger-button,.button {
  min-height:42px;
  padding:0 18px;
  border-radius:9px;
  font-size:13px;
  font-weight:600
}
.primary-button,.button-primary {
  position:relative;
  border:1px solid #16816f;
  color:#fff;
  background:#16816f
}
.primary-button:hover:not(:disabled),.button-primary:hover:not(:disabled) {
  border-color:#106b5c;
  background:#106b5c
}
.primary-button.wide {
  width:100%;
  margin-top:25px;
  min-height:45px
}
.secondary-button,.button-secondary {
  border:1px solid var(--line);
  background:var(--paper)
}
.secondary-button:hover:not(:disabled),.button-secondary:hover:not(:disabled) {
  background:var(--soft)
}
.danger-button,.button-danger {
  border:1px solid transparent;
  color:var(--danger);
  background:var(--danger-soft)
}
.danger-button:hover:not(:disabled),.button-danger:hover:not(:disabled) {
  border-color:var(--danger)
}
.button-spinner,.mini-spinner {
  width:16px;
  height:16px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:spin 700ms linear infinite
}
.button-spinner {
  display:none;
  margin:auto
}
.mini-spinner {
  display:inline-block;
  width:14px;
  height:14px;
  color:var(--brand)
}
.is-busy .button-label {
  display:none
}
.is-busy .button-spinner {
  display:block
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
.form-error {
  margin:12px 0 0;
  padding:10px 12px;
  border-radius:8px;
  color:var(--danger);
  background:var(--danger-soft);
  font-size:12px;
  line-height:1.7;
  overflow-wrap:anywhere
}
.privacy-note {
  margin:22px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.9
}
.auth-cooldown {
  margin:12px 0;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
  overflow-wrap:anywhere
}
.auth-cooldown-countdown {
  display:block;
  margin-top:4px;
  color:var(--ink);
  font-weight:650;
  font-variant-numeric:tabular-nums
}
.auth-cooldown-countdown:empty {
  display:none
}

/* Main frame */
.app-view,.workspace {
  height:100dvh;
  min-height:0
}
.workspace {
  position:relative;
  display:grid;
  grid-template-columns:64px 318px minmax(0,1fr);
  width:100%;
  overflow:hidden;
  background:var(--paper)
}
.nav-rail {
  position:relative;
  z-index:15;
  display:flex;
  min-height:0;
  flex-direction:column;
  align-items:center;
  gap:28px;
  padding:22px 8px 18px;
  border-right:1px solid var(--line);
  background:var(--rail)
}
.nav-rail .brand-mark {
  width:36px;
  height:36px;
  flex-basis:36px;
  border-radius:11px;
  font-size:21px
}
.nav-rail nav {
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:center;
  gap:8px
}
.rail-button {
  display:grid;
  width:44px;
  height:44px;
  padding:0;
  place-items:center;
  border:0;
  border-radius:12px;
  color:var(--muted);
  background:transparent
}
.rail-button.active {
  color:var(--brand);
  background:var(--brand-soft)
}
.rail-button svg {
  width:23px;
  height:23px
}
.rail-bottom {
  position:relative;
  margin-top:auto
}
.avatar-button {
  display:grid;
  padding:3px;
  place-items:center;
  border:1px solid transparent;
  border-radius:50%;
  background:transparent
}
.avatar-button:hover {
  border-color:var(--line)
}
.avatar-button .avatar {
  width:36px;
  height:36px;
  flex-basis:36px;
  font-size:15px
}
.profile-menu,.conversation-menu {
  position:absolute;
  z-index:60;
  width:234px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
  box-shadow:var(--shadow)
}
.profile-menu {
  bottom:0;
  left:54px
}
.profile-menu>strong {
  display:block;
  padding:9px 10px 3px;
  font-size:14px;
  overflow-wrap:anywhere
}
.profile-menu>.muted {
  display:block;
  padding:0 10px 8px;
  font-size:11px;
  overflow-wrap:anywhere
}
.menu-divider {
  height:1px;
  margin:3px 2px 5px;
  background:var(--line)
}
.menu-item {
  display:flex;
  width:100%;
  min-height:40px;
  align-items:center;
  gap:11px;
  padding:8px 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  font-size:12px;
  text-align:left
}
.menu-item:hover {
  background:var(--soft)
}
.menu-item svg {
  width:18px;
  height:18px;
  color:var(--muted)
}
.menu-danger,.menu-danger svg {
  color:var(--danger)
}
.conversation-menu {
  top:calc(100% + 12px);
  right:0;
  width:195px
}
.conversation-pane {
  position:relative;
  z-index:10;
  display:flex;
  min-height:0;
  min-width:0;
  flex-direction:column;
  border-right:1px solid var(--line);
  background:var(--paper)
}
.pane-header {
  display:flex;
  min-height:94px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:22px 22px 16px
}
.pane-header .eyebrow {
  margin-bottom:5px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.13em
}
.pane-header h1 {
  margin:0;
  font-size:22px;
  font-weight:650;
  letter-spacing:-.7px
}
.icon-button {
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  padding:0;
  place-items:center;
  border:0;
  border-radius:10px;
  color:var(--muted);
  background:transparent
}
.icon-button:hover {
  color:var(--brand);
  background:var(--brand-soft)
}
#new-group-button {
  color:var(--brand);
  background:var(--brand-soft)
}
.start-chat {
  position:relative;
  padding:0 16px 4px
}
.search-box {
  position:relative;
  display:flex;
  min-width:0;
  height:40px;
  align-items:center;
  gap:9px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:10px;
  background:var(--soft)
}
.search-box:focus-within {
  border-color:var(--focus)
}
.search-box>svg {
  width:18px;
  height:18px;
  color:var(--muted)
}
.search-box input {
  height:38px;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  font-size:12px;
  box-shadow:none
}
.search-box input:focus {
  outline:0
}
.search-box .mini-spinner {
  flex:0 0 14px
}
.search-results {
  position:absolute;
  z-index:35;
  top:calc(100% + 2px);
  right:12px;
  left:12px;
  max-height:340px;
  overflow:auto;
  padding:5px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--paper);
  box-shadow:var(--shadow)
}
.search-result {
  display:flex;
  width:100%;
  min-height:59px;
  align-items:center;
  gap:10px;
  padding:9px;
  border:0;
  border-radius:7px;
  background:transparent;
  text-align:left
}
.search-result:hover {
  background:var(--soft)
}
.search-result .avatar {
  width:36px;
  height:36px;
  flex-basis:36px;
  font-size:15px
}
.search-result-text {
  min-width:0;
  flex:1
}
.search-result-text strong,.search-result-text span {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.search-result-text strong {
  font-size:12px;
  font-weight:600
}
.search-result-text span {
  margin-top:3px;
  color:var(--muted);
  font-size:10px
}
.result-action {
  color:var(--brand);
  font-size:10px;
  white-space:nowrap
}
.search-empty {
  padding:23px 14px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
  line-height:1.7
}
.conversation-filters {
  display:flex;
  flex:0 0 auto;
  gap:23px;
  min-height:48px;
  padding:0 24px;
  margin:3px 0 7px;
  border-bottom:1px solid var(--line)
}
.conversation-filter {
  position:relative;
  padding:0 1px;
  border:0;
  color:var(--muted);
  background:transparent;
  font-size:12px;
  font-weight:600
}
.conversation-filter.active,.conversation-filter[aria-selected="true"] {
  color:var(--brand)
}
.conversation-filter.active::after,.conversation-filter[aria-selected="true"]::after {
  position:absolute;
  bottom:-1px;
  right:-4px;
  left:-4px;
  height:3px;
  border-radius:3px 3px 0 0;
  background:var(--brand);
  content:""
}
.conversation-list {
  min-height:0;
  flex:1;
  overflow-y:auto;
  padding:0 8px 12px
}
.conversation-item {
  position:relative;
  display:flex;
  width:100%;
  min-height:76px;
  align-items:center;
  gap:11px;
  padding:12px 11px;
  margin-bottom:2px;
  border:0;
  border-radius:10px;
  background:transparent;
  text-align:left
}
.conversation-item:hover {
  background:var(--soft)
}
.conversation-item.active {
  background:var(--brand-soft)
}
.conversation-main {
  min-width:0;
  flex:1
}
.conversation-title-row {
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px
}
.conversation-title {
  overflow:hidden;
  font-size:13px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap
}
.conversation-time {
  flex:0 0 auto;
  color:var(--muted);
  font-size:10px;
  font-weight:400
}
.conversation-preview {
  overflow:hidden;
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap
}
.unread-badge {
  display:grid;
  min-width:18px;
  height:18px;
  flex:0 0 auto;
  place-items:center;
  align-self:flex-end;
  padding:0 5px;
  margin:0 0 1px -4px;
  border-radius:9px;
  color:#fff;
  background:#16816f;
  font-size:10px;
  font-weight:650
}
.conversation-item.muted .unread-badge,.conversation-item.is-muted .unread-badge,.unread-badge.muted {
  background:var(--muted)
}
.conversation-indicators {
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:5px;
  color:var(--muted);
  font-size:10px
}
.conversation-indicators svg,.conversation-pin,.conversation-mute {
  width:12px;
  height:12px
}
.conversation-item.muted {
  color:var(--ink)
}
.avatar {
  display:grid;
  width:46px;
  height:46px;
  flex:0 0 46px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:19px;
  font-weight:550
}
.avatar-large {
  width:43px;
  height:43px;
  flex-basis:43px;
  font-size:18px
}
.avatar-round {
  border-radius:50%
}
.avatar-0 {
  background:#6290ca
}
.avatar-1 {
  background:#77a294
}
.avatar-2 {
  background:#bd9879
}
.avatar-3 {
  background:#8794c1
}
.avatar-4 {
  background:#ab8cad
}
.avatar-5 {
  background:#c3a369
}
.avatar-6 {
  background:#6d9dad
}
.avatar-7 {
  background:#c38991
}
.avatar-8 {
  background:#91a882
}
.avatar-9 {
  background:#9a8fbf
}
.avatar-10 {
  background:#6caaae
}
.avatar-11 {
  background:#b79b88
}
.list-skeleton {
  padding:12px 18px
}
.list-skeleton span {
  display:block;
  height:57px;
  margin-bottom:12px;
  border-radius:10px;
  background:var(--soft);
  animation:pulse 1.4s ease-in-out infinite alternate
}
@keyframes pulse {
  to {
    opacity:.45
  }
}
.empty-state {
  display:flex;
  min-height:180px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px;
  text-align:center
}
.empty-state.compact {
  min-height:240px
}
.empty-state strong {
  margin-top:14px;
  font-size:13px;
  font-weight:600
}
.empty-state p {
  max-width:230px;
  margin:9px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.9
}
.empty-icon {
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:14px;
  color:var(--brand);
  background:var(--brand-soft);
  font-size:21px
}

/* Conversation canvas */
.chat-pane {
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background-color:var(--chat-canvas);
  background-image:radial-gradient(circle at 1px 1px,var(--pattern) .65px,transparent .8px);
  background-size:26px 26px
}
.chat-placeholder {
  display:flex;
  height:100%;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px;
  text-align:center
}
.placeholder-art {
  display:grid;
  width:76px;
  height:76px;
  place-items:center;
  margin-bottom:20px;
  border:1px solid var(--line);
  border-radius:23px;
  color:var(--brand);
  background:var(--paper);
  box-shadow:var(--bubble-shadow)
}
.placeholder-art svg {
  width:43px;
  height:43px;
  stroke-width:1.4
}
.chat-placeholder h2 {
  margin:0;
  font-size:17px;
  font-weight:600
}
.chat-placeholder p {
  max-width:280px;
  margin:11px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.9
}
.active-chat {
  display:flex;
  height:100%;
  min-height:0;
  min-width:0;
  flex-direction:column
}
.chat-header {
  position:relative;
  z-index:20;
  display:flex;
  min-height:76px;
  flex:0 0 auto;
  align-items:center;
  gap:12px;
  padding:14px 24px;
  border-bottom:1px solid var(--line);
  background:var(--paper)
}
.mobile-back {
  display:none
}
.chat-title-wrap {
  min-width:0;
  flex:1
}
.chat-title-wrap h2,.chat-title-wrap p {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.chat-title-wrap h2 {
  margin:0;
  font-size:15px;
  font-weight:650;
  letter-spacing:-.1px
}
.chat-title-wrap p {
  margin:5px 0 0;
  font-size:11px
}
.chat-actions {
  position:relative;
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:3px
}
.chat-actions .icon-button {
  width:35px;
  height:35px;
  flex-basis:35px
}
.chat-actions .icon-button svg {
  width:20px;
  height:20px
}
.connection-state {
  display:flex;
  order:-1;
  align-items:center;
  gap:6px;
  margin-right:10px;
  color:var(--muted);
  font-size:10px;
  white-space:nowrap
}
.status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--warning)
}
.connection-state.live .status-dot {
  background:var(--success)
}
.connection-state.offline .status-dot {
  background:var(--danger)
}
.message-scroller {
  min-height:0;
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:22px clamp(18px,3vw,44px) 16px;
  scrollbar-gutter:stable
}
.message-list {
  display:flex;
  width:min(100%,950px);
  min-height:0;
  flex-direction:column;
  margin:0 auto;
  padding-bottom:6px
}
.message-row {
  display:flex;
  width:100%;
  align-items:flex-end;
  gap:8px;
  margin-bottom:12px
}
.message-row.own {
  justify-content:flex-end
}
.message-row .avatar {
  width:29px;
  height:29px;
  flex-basis:29px;
  margin-bottom:1px;
  font-size:12px
}
.message-stack {
  min-width:0;
  max-width:min(78%,590px)
}
.message-sender {
  margin:0 0 5px 2px;
  color:var(--brand-ink);
  font-size:10px;
  font-weight:600
}
.message-bubble {
  padding:10px 13px 7px;
  border:1px solid var(--line);
  border-radius:13px 13px 13px 4px;
  background:var(--paper);
  box-shadow:var(--bubble-shadow)
}
.message-row.own .message-bubble {
  border-color:transparent;
  border-radius:13px 13px 4px 13px;
  color:var(--own-ink);
  background:var(--own-bubble)
}
.message-text {
  overflow-wrap:anywhere;
  font-size:13px;
  line-height:1.65;
  white-space:pre-wrap
}
.message-bubble.media-bubble {
  max-width:min(100%,660px);
  padding:6px 6px 7px;
  overflow:hidden
}
.message-media {
  min-width:0;
  max-width:100%
}
.message-image-link,.message-image {
  display:block
}
.message-image {
  width:auto;
  max-width:min(420px,100%);
  max-height:430px;
  border-radius:8px;
  object-fit:contain;
  background:var(--soft)
}
.message-audio {
  display:block;
  width:330px;
  min-width:0;
  max-width:100%;
  height:46px
}
.message-video {
  display:block;
  width:450px;
  max-width:100%;
  height:auto;
  max-height:430px;
  border-radius:8px;
  background:#0d1725;
  object-fit:contain
}
.message-file-link {
  display:flex;
  width:310px;
  min-width:0;
  max-width:100%;
  align-items:center;
  gap:10px;
  padding:11px;
  border-radius:8px;
  color:inherit;
  background:var(--soft);
  text-decoration:none
}
.message-row.own .message-file-link {
  background:rgba(127,165,216,.1)
}
.message-file-mark {
  display:grid;
  width:37px;
  height:43px;
  flex:0 0 37px;
  place-items:center;
  border-radius:8px;
  color:var(--brand);
  background:var(--brand-soft);
  font-size:21px
}
.message-file-copy {
  min-width:0;
  flex:1
}
.message-file-copy strong,.message-file-copy span,.message-media-unavailable strong,.message-media-unavailable span {
  display:block
}
.message-file-copy strong {
  overflow:hidden;
  font-size:12px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap
}
.message-file-copy span,.message-media-detail,.message-media-unavailable span {
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
  line-height:1.5
}
.message-row.own .message-file-copy span,.message-row.own .message-media-detail,.message-row.own .message-media-unavailable span {
  color:var(--own-meta)
}
.message-media-detail {
  max-width:100%;
  padding:1px 3px 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.message-media-unavailable {
  width:280px;
  min-width:0;
  max-width:100%;
  padding:13px;
  border-radius:8px;
  background:var(--soft)
}
.message-media-unavailable strong {
  font-size:12px;
  overflow-wrap:anywhere
}
.message-caption {
  padding:8px 5px 0
}
.message-meta {
  display:flex;
  min-height:12px;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-top:4px;
  color:var(--muted);
  font-size:9px;
  line-height:1.4
}
.message-row.own .message-meta {
  color:var(--own-meta)
}
.message-status {
  padding:0;
  border:0;
  background:transparent;
  font:inherit
}
.message-status.failed {
  color:var(--danger)
}
.message-status.unknown {
  color:var(--warning);
  cursor:pointer
}
.message-status.sending {
  opacity:.85
}
.day-divider {
  align-self:center;
  margin:0 0 23px;
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  background:var(--paper);
  font-size:10px;
  line-height:1.25
}
.load-older {
  display:block;
  margin:0 auto 18px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--brand-ink);
  background:var(--paper);
  font-size:10px
}
.message-loading {
  padding:15px;
  color:var(--muted);
  font-size:12px;
  text-align:center
}
.message-composer {
  display:flex;
  min-width:0;
  flex:0 0 auto;
  align-items:flex-end;
  gap:10px;
  padding:13px 22px max(15px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:var(--paper)
}
.attachment-button {
  display:grid;
  width:40px;
  height:46px;
  flex:0 0 40px;
  place-items:center;
  padding:0;
  border:0;
  border-radius:10px;
  color:var(--muted);
  background:transparent
}
.attachment-button:hover:not(:disabled) {
  color:var(--brand);
  background:var(--brand-soft)
}
.composer-field {
  position:relative;
  width:min(100%,1000px);
  min-width:0;
  margin-left:auto
}
.composer-field textarea {
  display:block;
  width:100%;
  min-height:46px;
  max-height:144px;
  padding:12px 62px 12px 14px;
  border:1px solid transparent;
  border-radius:12px;
  background:var(--soft);
  font-size:13px;
  line-height:21px;
  field-sizing:content
}
.composer-field textarea:focus {
  border-color:var(--focus);
  outline:0
}
.message-counter {
  position:absolute;
  right:12px;
  bottom:8px;
  color:var(--muted);
  font-size:8px;
  pointer-events:none;
  opacity:.75
}
.send-button {
  display:grid;
  width:44px;
  height:44px;
  flex:0 0 44px;
  place-items:center;
  margin-bottom:1px;
  padding:0;
  border:0;
  border-radius:13px;
  color:#fff;
  background:#16816f
}
.send-button:hover:not(:disabled) {
  background:#106b5c
}
.send-button:disabled {
  opacity:.4
}
.send-button svg {
  width:21px;
  height:21px
}
.attachment-status {
  display:flex;
  min-height:49px;
  align-items:center;
  gap:9px;
  margin-bottom:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--soft)
}
.attachment-status-icon {
  display:grid;
  width:29px;
  height:31px;
  flex:0 0 29px;
  place-items:center;
  border-radius:8px;
  color:var(--brand);
  background:var(--brand-soft);
  font-size:18px
}
.attachment-status-copy {
  min-width:0;
  flex:1
}
.attachment-status-copy strong,.attachment-status-copy span {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.attachment-status-copy strong {
  font-size:11px;
  font-weight:600
}
.attachment-status-copy span {
  margin-top:4px;
  color:var(--muted);
  font-size:10px
}
.attachment-status-action,.attachment-status-close {
  min-height:30px;
  padding:3px 5px;
  border:0;
  border-radius:6px;
  color:var(--brand);
  background:transparent;
  font-size:11px
}
.attachment-status-close {
  min-width:28px;
  color:var(--muted);
  font-size:21px
}
.new-messages-button {
  min-height:32px;
  flex:0 0 auto;
  align-self:center;
  padding:6px 13px;
  margin:4px 12px 8px;
  border:1px solid var(--line);
  border-radius:17px;
  color:var(--brand);
  background:var(--paper);
  box-shadow:var(--bubble-shadow);
  font-size:11px
}
.media-download {
  display:inline-block;
  margin-top:7px;
  padding-left:3px;
  color:var(--brand-ink);
  font-size:10px;
  text-decoration:none
}
.media-download:hover {
  text-decoration:underline
}
.media-load-error {
  max-width:100%;
  margin:6px 3px;
  color:var(--muted);
  font-size:11px;
  line-height:1.7
}
.message-row.search-highlight .message-bubble,.message-row.highlight .message-bubble,.message-highlight .message-bubble {
  outline:2px solid var(--brand);
  outline-offset:3px
}

/* Search drawer */
.chat-search-panel {
  position:absolute;
  z-index:30;
  top:0;
  right:0;
  bottom:0;
  display:flex;
  width:320px;
  min-width:0;
  flex-direction:column;
  border-left:1px solid var(--line);
  background:var(--paper);
  box-shadow:-10px 0 28px rgba(25,45,70,.035)
}
.search-panel-header {
  display:flex;
  min-height:76px;
  flex:0 0 auto;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid var(--line)
}
.search-panel-header h2 {
  margin:0;
  font-size:15px;
  font-weight:650
}
.search-panel-header .eyebrow {
  margin-bottom:5px;
  font-size:10px
}
.chat-search-box {
  flex:0 0 auto;
  margin:18px 16px 10px
}
.chat-search-results {
  min-height:0;
  flex:1;
  overflow:auto;
  padding:5px 10px 16px
}
.search-panel-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:62px 18px;
  color:var(--muted);
  text-align:center
}
.search-panel-empty svg {
  width:31px;
  height:31px;
  margin-bottom:17px;
  color:var(--brand);
  stroke-width:1.3
}
.search-panel-empty strong {
  font-size:12px;
  font-weight:550;
  color:var(--ink)
}
.search-panel-empty p {
  margin:10px 0 0;
  font-size:11px;
  line-height:1.8
}
.chat-search-results>button,.chat-search-result,.message-search-result {
  display:block;
  width:100%;
  padding:13px 11px;
  margin-bottom:4px;
  border:0;
  border-radius:9px;
  background:transparent;
  text-align:left
}
.chat-search-results>button:hover,.chat-search-result:hover,.message-search-result:hover {
  background:var(--soft)
}
.chat-search-results strong,.search-result-sender {
  display:block;
  color:var(--ink);
  font-size:12px;
  font-weight:600
}
.chat-search-results p,.chat-search-result .search-result-text {
  display:block;
  margin:7px 0;
  color:var(--ink);
  font-size:12px;
  line-height:1.7;
  white-space:normal;
  overflow-wrap:anywhere
}
.chat-search-results time,.chat-search-results small,.search-result-meta,.search-result-time {
  color:var(--muted);
  font-size:10px
}
.chat-search-results mark {
  padding:0 2px;
  border-radius:2px;
  color:var(--brand-ink);
  background:var(--brand-soft)
}
.search-more {
  flex:0 0 auto;
  margin:10px 16px 16px
}

/* Dialogs and granular administration */
.modal {
  width:min(500px,calc(100vw - 32px));
  max-height:min(780px,calc(100dvh - 48px));
  padding:0;
  overflow:visible;
  border:1px solid var(--line);
  border-radius:17px;
  color:var(--ink);
  background:var(--paper);
  box-shadow:var(--shadow)
}
.modal::backdrop {
  background:var(--overlay);
  backdrop-filter:blur(3px)
}
.modal-card {
  position:relative;
  max-height:min(780px,calc(100dvh - 48px));
  padding:24px;
  overflow:auto;
  border-radius:inherit
}
.modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:23px
}
.modal-header h2 {
  margin:0;
  overflow-wrap:anywhere;
  font-size:19px;
  font-weight:650;
  letter-spacing:-.4px
}
.modal-header .eyebrow {
  margin-bottom:7px;
  font-size:10px
}
.modal-card>.search-box {
  margin-top:8px
}
.modal-results {
  position:relative;
  top:auto;
  right:auto;
  left:auto;
  max-height:210px;
  margin-top:8px;
  box-shadow:none
}
.selected-members {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px
}
.member-chip {
  display:inline-flex;
  min-height:29px;
  align-items:center;
  gap:6px;
  padding:3px 6px 3px 9px;
  border-radius:15px;
  color:var(--brand-ink);
  background:var(--brand-soft);
  font-size:11px
}
.member-chip button {
  display:grid;
  width:20px;
  height:20px;
  padding:0;
  place-items:center;
  border:0;
  border-radius:50%;
  color:var(--brand-ink);
  background:transparent;
  font-size:16px
}
.modal-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  margin-top:24px
}
.rename-group-form .field-label {
  margin-top:0
}
.inline-action-field {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px
}
.inline-action-field .secondary-button {
  min-width:66px
}
.group-member-heading {
  display:flex;
  min-height:42px;
  align-items:center;
  justify-content:space-between;
  margin-top:20px
}
.group-member-heading .field-label {
  display:inline;
  margin:0 8px 0 0
}
#group-member-count {
  font-size:11px
}
.group-member-list {
  display:flex;
  max-height:345px;
  min-height:74px;
  flex-direction:column;
  overflow-y:auto;
  border:1px solid var(--line);
  border-radius:11px
}
.group-member-row {
  display:flex;
  flex-shrink:0;
  min-width:0;
  min-height:67px;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:11px;
  border-bottom:1px solid var(--line)
}
.group-member-row:last-child {
  border-bottom:0
}
.group-member-row .avatar {
  width:36px;
  height:36px;
  flex-basis:36px;
  font-size:15px
}
.group-member-identity {
  min-width:80px;
  flex:1
}
.group-member-identity strong,.group-member-identity span {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.group-member-identity strong {
  font-size:12px;
  font-weight:600
}
.group-member-identity span {
  margin-top:4px;
  color:var(--muted);
  font-size:10px
}
.group-member-role,.status-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border-radius:5px;
  color:var(--brand-ink);
  background:var(--brand-soft);
  font-size:10px;
  font-weight:550;
  white-space:nowrap
}
.group-member-actions {
  display:flex;
  max-width:100%;
  flex:0 0 auto;
  flex-wrap:wrap;
  align-items:center;
  gap:5px
}
.group-owner-transfer,.group-member-remove,.group-admin-button,.group-member-actions>button {
  min-height:30px;
  padding:0 8px;
  border:1px solid transparent;
  border-radius:7px;
  color:var(--brand);
  background:var(--brand-soft);
  font-size:10px;
  white-space:nowrap
}
.group-member-remove {
  color:var(--danger)!important;
  background:var(--danger-soft)!important
}
.group-member-empty {
  display:grid;
  min-height:90px;
  place-items:center;
  padding:20px;
  color:var(--muted);
  font-size:12px
}
.group-owner-note {
  margin:13px 0 0;
  padding:11px 12px;
  border-radius:8px;
  color:var(--muted);
  background:var(--soft);
  font-size:11px;
  line-height:1.9
}
.group-manage-actions {
  justify-content:space-between
}
.group-manage-actions .secondary-button {
  margin-left:auto
}
.group-permissions {
  display:flex;
  width:100%;
  min-width:0;
  flex:0 0 100%;
  grid-column:1/-1;
  flex-wrap:wrap;
  gap:8px;
  padding:11px 0 0;
  border-top:1px solid var(--line)
}
.group-permissions .permission-option {
  flex:1 1 130px
}
.group-permissions>button {
  min-height:34px;
  font-size:11px
}
.admin-dialog {
  width:min(900px,calc(100vw - 40px))
}
.admin-card {
  padding:26px
}
.admin-content {
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:20px
}
.admin-content>p {
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.8
}
.admin-section {
  padding:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper)
}
.admin-section h3,.admin-content h3 {
  margin:0 0 13px;
  font-size:14px;
  font-weight:650
}
.admin-section>p {
  margin:6px 0 14px;
  color:var(--muted);
  font-size:11px;
  line-height:1.8
}
.admin-user-row {
  display:flex;
  min-width:0;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--line)
}
.admin-user-row:last-child {
  border-bottom:0;
  padding-bottom:0
}
.admin-user-identity {
  min-width:0;
  flex:1
}
.admin-user-identity strong {
  display:block;
  font-size:13px;
  font-weight:600
}
.admin-user-identity small,.admin-user-identity span {
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  overflow-wrap:anywhere
}
.admin-user-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px
}
.admin-user-actions button {
  min-height:34px;
  font-size:11px
}
.permission-grid {
  display:grid;
  width:100%;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:10px 0 0
}
.permission-option {
  display:flex;
  min-height:41px;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  background:var(--soft);
  font-size:11px;
  line-height:1.6;
  cursor:pointer
}
.permission-option:has(input:checked) {
  border-color:var(--focus);
  background:var(--brand-soft)
}
input[type="checkbox"],input[type="radio"] {
  width:15px;
  height:15px;
  flex:0 0 15px;
  margin:0;
  accent-color:var(--brand)
}
.permission-option small {
  display:block;
  color:var(--muted);
  font-size:10px
}
.admin-toolbar,.admin-search-form {
  display:flex;
  min-width:0;
  flex-wrap:wrap;
  align-items:center;
  gap:10px
}
.admin-toolbar {
  justify-content:space-between
}
.admin-search-form {
  flex:1
}
.admin-search-input {
  min-width:150px;
  flex:1
}
.admin-permissions-form {
  display:flex;
  width:100%;
  flex:0 0 100%;
  flex-wrap:wrap;
  gap:9px
}
.admin-permissions-form>button {
  margin-top:8px
}
.admin-audit-row {
  padding:12px 0;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  line-height:1.8;
  overflow-wrap:anywhere
}
.admin-audit-row strong {
  color:var(--ink);
  font-weight:600
}
.admin-content table {
  width:100%;
  border-collapse:collapse;
  font-size:12px
}
.admin-content th {
  color:var(--muted);
  font-weight:550;
  text-align:left
}
.admin-content th,.admin-content td {
  padding:12px 9px;
  border-bottom:1px solid var(--line)
}
.admin-content pre {
  max-width:100%;
  overflow:auto;
  padding:14px;
  border-radius:9px;
  color:var(--muted);
  background:var(--soft);
  font-size:11px;
  line-height:1.7
}
.toast-region {
  position:fixed;
  z-index:1000;
  right:22px;
  bottom:22px;
  display:flex;
  width:min(340px,calc(100vw - 32px));
  flex-direction:column;
  gap:8px;
  pointer-events:none
}
.toast {
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--ink);
  background:var(--paper);
  box-shadow:var(--shadow);
  font-size:12px;
  line-height:1.65
}
.toast.error {
  border-left:3px solid var(--danger)
}
noscript {
  position:fixed;
  z-index:200;
  inset:auto 20px 20px;
  padding:15px;
  border-radius:12px;
  color:var(--danger);
  background:var(--paper);
  text-align:center
}
::-webkit-scrollbar {
  width:6px;
  height:6px
}
::-webkit-scrollbar-track {
  background:transparent
}
::-webkit-scrollbar-thumb {
  border-radius:6px;
  background:color-mix(in srgb,var(--muted) 27%,transparent)
}
::-webkit-scrollbar-thumb:hover {
  background:color-mix(in srgb,var(--muted) 45%,transparent)
}

/* Responsive layouts follow the same 760px chat visibility boundary as the client. */
@media (min-width:1101px) {
  .workspace:has(#chat-search-panel:not(.hidden)) {
    grid-template-columns:60px 260px minmax(0,1fr) 300px;
  }
  .chat-search-panel {
    position:relative;
    grid-column:4;
    width:auto;
    min-height:0;
    box-shadow:none;
  }
}
@media (min-width:1320px) {
  .workspace:has(#chat-search-panel:not(.hidden)) {
    grid-template-columns:64px 300px minmax(0,1fr) 320px;
  }
}
@media (max-width:1180px) {
  .workspace {
    grid-template-columns:60px 286px minmax(0,1fr);
  }
  .nav-rail {
    padding-left:6px;
    padding-right:6px;
  }
  .chat-header {
    padding-right:15px;
    padding-left:18px;
  }
  .connection-state .status-text {
    display:none;
  }
  .connection-state {
    margin-right:5px;
  }
  .message-scroller {
    padding-right:20px;
    padding-left:20px;
  }
  .message-stack {
    max-width:86%;
  }
  .auth-presentation {
    padding-left:40px;
    padding-right:40px;
  }
}
@media (max-width:920px) {
  .workspace {
    grid-template-columns:56px 260px minmax(0,1fr);
  }
  .nav-rail {
    padding-left:4px;
    padding-right:4px;
  }
  .pane-header {
    padding-left:17px;
    padding-right:17px;
  }
  .conversation-item > .avatar {
    width:40px;
    height:40px;
    flex-basis:40px;
  }
  .chat-header {
    gap:8px;
    padding:11px 12px;
  }
  #chat-avatar {
    display:none;
  }
  .message-composer {
    gap:5px;
    padding-left:12px;
    padding-right:12px;
  }
  .auth-view {
    grid-template-columns:1fr;
  }
  .auth-presentation {
    display:none;
  }
  .auth-panel {
    min-height:100dvh;
    padding:45px 36px;
  }
  .mobile-brand {
    display:flex;
    margin-bottom:42px;
  }
}
@media (max-width:760px) {
  .workspace {
    grid-template-columns:56px minmax(0,1fr);
  }
  .conversation-pane, .chat-pane {
    grid-column:2;
    grid-row:1;
  }
  .chat-pane {
    display:none;
  }
  body.mobile-chat-open .conversation-pane {
    display:none;
  }
  body.mobile-chat-open .chat-pane {
    display:block;
  }
  .mobile-back {
    display:grid;
  }
  .chat-header {
    min-height:68px;
    padding:11px 12px;
  }
  .chat-actions .icon-button {
    width:33px;
    height:36px;
    flex-basis:33px;
  }
  .chat-search-panel {
    left:56px;
    width:auto;
  }
  .message-scroller {
    padding:20px 15px 12px;
  }
  .message-stack {
    max-width:84%;
  }
  .message-row .avatar {
    display:none;
  }
  .message-composer {
    padding:10px 11px;
  }
  .message-image, .message-video {
    max-width:min(100%,68vw);
  }
  .message-audio, .message-media, .message-file-link, .message-media-unavailable {
    min-width:0;
    max-width:100%;
  }
  .profile-menu {
    left:48px;
  }
}
@media (max-width:470px) {
  .workspace {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto;
  }
  .nav-rail {
    grid-column:1;
    grid-row:2;
    flex-direction:row;
    justify-content:space-between;
    min-height:58px;
    padding:6px 20px calc(6px + env(safe-area-inset-bottom));
    border-right:0;
    border-top:1px solid var(--line);
  }
  .nav-rail nav {
    width:auto;
  }
  .nav-rail .brand-mark {
    width:33px;
    flex-basis:33px;
    height:33px;
    font-size:19px;
  }
  .rail-button {
    width:43px;
    height:39px;
  }
  .rail-bottom {
    margin-top:0;
  }
  .avatar-button .avatar {
    width:33px;
    height:33px;
  }
  .profile-menu {
    left:auto;
    right:0;
    bottom:49px;
  }
  .conversation-pane, .chat-pane {
    grid-column:1;
    grid-row:1;
  }
  body.mobile-chat-open .nav-rail {
    display:none;
  }
  body.mobile-chat-open .workspace {
    grid-template-rows:minmax(0,1fr);
  }
  .pane-header {
    min-height:89px;
    padding:19px 21px 13px;
  }
  .conversation-item > .avatar {
    width:47px;
    height:47px;
    flex-basis:47px;
  }
  .conversation-item {
    min-height:77px;
  }
  .conversation-title {
    font-size:14px;
  }
  .chat-header {
    min-height:66px;
    gap:5px;
    padding:9px 8px;
  }
  .mobile-back {
    width:32px;
    flex:0 0 32px;
  }
  .chat-actions {
    gap:1px;
  }
  .chat-actions .icon-button {
    width:31px;
    flex-basis:31px;
  }
  #chat-title {
    font-size:15px;
  }
  #chat-subtitle {
    font-size:10px;
  }
  .connection-state {
    margin-right:2px;
  }
  .message-scroller {
    padding:17px 13px 12px;
  }
  .message-stack {
    max-width:87%;
  }
  .message-bubble {
    padding:9px 12px 7px;
  }
  .message-composer {
    gap:6px;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  }
  .message-composer textarea {
    min-height:44px;
    padding:11px 45px 11px 12px;
  }
  .send-button {
    width:40px;
    height:40px;
    flex:0 0 40px;
  }
  .attachment-button {
    width:32px;
    flex:0 0 32px;
  }
  .message-counter {
    right:7px;
    font-size:8px;
  }
  .chat-search-panel {
    left:0;
    z-index:40;
  }
  .modal {
    width:calc(100vw - 22px);
    max-height:calc(100dvh - 30px);
  }
  .modal-card {
    padding:20px;
  }
  .group-member-actions {
    flex-basis:100%;
    justify-content:flex-end;
    padding-left:46px;
  }
  .group-member-actions button {
    min-height:32px;
  }
  .group-permissions {
    padding-left:0;
  }
  .admin-permissions-form label {
    width:100%;
  }
  .permission-grid {
    grid-template-columns:1fr;
  }
  .admin-toolbar {
    align-items:stretch;
  }
  .admin-toolbar > button {
    width:100%;
  }
  .admin-content table {
    display:block;
    overflow:auto;
  }
  .toast-region {
    right:12px;
    bottom:12px;
    left:12px;
    width:auto;
  }
  .auth-panel {
    padding:27px;
  }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    scroll-behavior:auto !important;
    animation:none !important;
    transition:none !important;
  }
}
.admin-audit-row time {
  display:block;
  margin-top:4px;
  font-size:10px;
}
.group-permissions > strong {
  flex-basis:100%;
  font-size:12px;
  font-weight:600;
}
.admin-user-identity .status-chip {
  display:inline-flex;
  margin-top:7px;
  color:var(--brand-ink);
  font-size:10px;
}
.profile-menu {
  max-height: min(680px, 85dvh);
  overflow-y: auto;
}
.device-retention-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 8px 4px;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
}
.device-retention-option input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--brand);
}
.device-retention-note {
  margin: 0 8px 10px;
  font-size: 11px;
  line-height: 1.65;
  color: var(--muted);
}
.session-description {
  margin: 0 0 18px;
  line-height: 1.75;
  font-size: 13px;
}
.storage-actions {
  flex-wrap: wrap;
}
.about-card {
  max-height: min(780px, 90dvh);
  overflow-y: auto;
}
.about-card > p, .about-availability p {
  font-size: 13px;
  line-height: 1.9;
}
.about-availability {
  padding: 18px;
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--soft);
}
.about-availability strong {
  font-size: 12px;
  color: var(--brand-ink);
}
.about-availability p {
  margin: 7px 0 14px;
}
.about-availability p:last-child {
  margin-bottom: 0;
}

/* Account verification and group invitations reuse the product modal system. */
.invitation-notice {
  margin:0 0 18px;
  padding:12px 15px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--ink);
  background:var(--soft);
  font-size:13px;
  line-height:1.7;
}
.verification-card > .muted {
  margin:0 0 18px;
  font-size:13px;
  line-height:1.7;
}
.invitation-create-form {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  margin-bottom:18px;
}
.invitation-create-form label {
  display:grid;
  gap:8px;
  min-width:0;
  font-size:13px;
  font-weight:600;
}
.invitation-create-form select,
.invitation-create-form input {
  width:100%;
  min-width:0;
  min-height:42px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--ink);
  background:var(--paper);
  font:inherit;
}
.invitation-create-form > button {
  grid-column:1/-1;
  justify-self:start;
}
.invitation-created {
  padding:16px;
  margin-bottom:18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--soft);
}
.invitation-created .muted {
  font-size:12px;
  line-height:1.7;
}
.invitation-created-url { min-width:0; }
.invitation-preview-card #invitation-preview-content {
  display:grid;
  gap:12px;
}
.invitation-preview-card .invitation-account {
  padding:12px 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}
.invitation-row {
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.invitation-row p {
  margin:7px 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.65;
}
#invitation-created-url {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:520px) {
  .invitation-preview-card .modal-actions:has(#invitation-preview-retry:not(.hidden)) {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .invitation-preview-card .modal-actions button { white-space:nowrap; }
  .invitation-preview-card .modal-actions:has(#invitation-preview-retry:not(.hidden)) #invitation-join {
    grid-column:1/-1;
  }
  .invitation-create-form { grid-template-columns:1fr; }
  .invitation-created .inline-action-field { flex-wrap:wrap; }
  .invitation-created .inline-action-field input { flex-basis:100%; }
}


/* Firefly IM: a shared desktop workspace and focused mobile pages. */
.brand-mark { background:transparent; border-radius:0; }
.brand-mark img, .preview-avatar img { display:block; width:100%; height:100%; object-fit:contain; }
.preview-avatar { background:transparent; }
.workspace { grid-template-columns:68px 320px minmax(0,1fr); }
.conversation-pane { grid-column:2; grid-row:1; }
.chat-pane { grid-column:3; grid-row:1; background-size:30px 30px; }
.nav-rail { padding:23px 7px 18px; gap:30px; background:var(--rail); }
.nav-rail .brand-mark { width:43px; height:43px; flex-basis:43px; }
.nav-rail nav { gap:11px; }
.rail-button { position:relative; width:52px; height:60px; gap:3px; align-content:center; border-radius:14px; }
.rail-button > span { font-size:10px; font-weight:600; }
.rail-button.active { color:var(--brand-ink); }
.nav-unread { position:absolute; top:3px; right:1px; min-width:16px; padding:2px 4px; border:2px solid var(--rail); border-radius:10px; background:var(--danger); color:#fff; font-size:8px; font-style:normal; }
.pane-header { min-height:100px; padding:22px 22px 18px; }
.pane-header h1 { font-size:23px; letter-spacing:-.04em; }
.conversation-header > .icon-button { border-radius:50%; background:var(--brand-soft); color:var(--brand-ink); }
.search-box { border-color:transparent; background:var(--soft); }
.conversation-item { min-height:79px; }
.conversation-item.active { background:var(--brand-soft); }
.conversation-preview.conversation-draft { color:var(--brand-ink); font-weight:500; }
.conversation-load-error { margin:12px 18px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--soft); }
.conversation-load-error p { margin:0 0 12px; color:var(--muted); font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.conversation-load-error button { min-height:44px; max-width:100%; white-space:normal; }
.read-receipts-card { width:100%; max-width:100%; min-width:0; }
.read-receipts-card > .muted { font-size:13px; line-height:1.7; }
.read-receipts-toolbar { display:flex; align-items:center; gap:12px; margin:18px 0; }
.read-receipts-toolbar p { flex:1; min-width:0; margin:0; font-size:12px; line-height:1.7; }
.read-receipts-toolbar button { flex:0 0 auto; min-height:44px; }
.read-receipt-section { padding:14px 0; border-top:1px solid var(--line); }
.read-receipt-section h3 { margin:0 0 12px; font-size:14px; }
.read-receipt-section > p { margin:0; font-size:13px; }
.read-receipt-list { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.read-receipt-row { display:flex; align-items:center; gap:12px; min-width:0; }
.read-receipt-row .avatar { width:38px; height:38px; flex:0 0 38px; }
.read-receipt-user { min-width:0; display:grid; gap:3px; overflow-wrap:anywhere; }
.read-receipt-user strong { font-size:13px; }
.read-receipt-user small { font-size:12px; }
.chat-header { min-height:76px; background:color-mix(in srgb,var(--paper) 95%,transparent); }
.message-composer { position:relative; gap:13px; padding:16px 22px; border-top:1px solid var(--line); background:var(--paper); }
.message-composer textarea { border-color:transparent; background:var(--soft); border-radius:13px; }
.attachment-button { width:38px; height:40px; flex-basis:38px; border-radius:12px; background:var(--soft); }
.attachment-menu { position:absolute; z-index:45; bottom:calc(100% + 10px); left:18px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:min(350px,calc(100vw - 40px)); padding:15px 12px; gap:7px; border:1px solid var(--line); border-radius:17px; box-shadow:var(--shadow); background:var(--paper); }
.attachment-menu button { display:grid; justify-items:center; gap:9px; min-width:0; padding:5px 1px; border:0; background:transparent; font-size:11px; }
.attachment-choice-icon { display:grid; place-items:center; width:45px; height:45px; border-radius:14px; background:var(--brand-soft); color:var(--brand-ink); font-size:23px; }
.attachment-menu button:hover .attachment-choice-icon { background:color-mix(in srgb,var(--brand) 18%,var(--paper)); }
.section-page { grid-column:2/-1; grid-row:1; min-width:0; min-height:0; overflow:auto; padding:0 48px 44px; background:var(--soft); }
.workspace:not([data-section="messages"]) .chat-pane { display:none; }
.section-page-header { display:flex; align-items:center; justify-content:space-between; max-width:960px; padding:40px 0 28px; margin:0 auto; }
.section-page-header h1 { margin:0 0 10px; font-size:28px; letter-spacing:-.045em; }
.section-page-header p:not(.eyebrow) { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }
.section-page-body { max-width:960px; margin:0 auto; }
.people-search-card, .settings-card { padding:25px; border:1px solid var(--line); border-radius:17px; background:var(--paper); }
.people-search-card h2, .settings-card h2 { margin:0 0 13px; font-size:15px; }
.people-search-card > p { margin:0 0 20px; font-size:12px; line-height:1.8; }
.people-search-card .start-chat { padding:0; }
.people-search-card .search-box { min-height:48px; }
.people-search-card .search-results { position:static; max-height:none; margin:18px 0 0; box-shadow:none; border:0; padding:0; }
.people-search-card .search-result { padding:15px 8px; border-bottom:1px solid var(--line); border-radius:0; }
.people-search-card .search-result:last-child { border-bottom:0; }
.people-guide { display:flex; align-items:flex-start; gap:16px; max-width:570px; margin:29px auto; padding:0 15px; }
.guide-icon { display:grid; place-items:center; width:39px; height:39px; flex:0 0 39px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--brand-ink); font-size:22px; }
.people-guide strong { font-size:13px; }
.people-guide p { margin:8px 0; color:var(--muted); font-size:12px; line-height:1.9; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.settings-profile { grid-column:1/-1; display:flex; align-items:center; gap:17px; min-height:115px; }
.settings-profile .avatar { width:62px; height:62px; flex:0 0 62px; font-size:23px; }
.settings-profile > div { min-width:0; flex:1; }
.settings-profile h2 { margin:0 0 7px; font-size:20px; overflow-wrap:anywhere; }
.settings-profile p { margin:0; font-size:12px; overflow-wrap:anywhere; }
.settings-profile > .status-chip { flex:0 0 auto; }
.settings-row { display:flex; width:100%; min-height:76px; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; }
.settings-row:last-child { border-bottom:0; padding-bottom:0; }
.settings-row > span:first-child { min-width:0; }
.settings-row strong, .settings-row small { display:block; }
.settings-row strong { font-size:13px; font-weight:550; }
.settings-row small { margin-top:7px; color:var(--muted); font-size:11px; line-height:1.7; }
.settings-row > span:last-child { color:var(--muted); font-size:23px; }
.settings-row:hover strong { color:var(--brand-ink); }
.settings-card .device-retention-option { margin:11px 0 0; padding:13px 0 7px; font-size:13px; }
.settings-card .device-retention-note { margin:0 0 0 24px; }
.settings-logout { grid-column:1/-1; justify-self:start; min-width:170px; color:var(--danger); border-color:var(--line); background:var(--paper); }

/* The administrator surface remains a real modal to retain visibility and step-up guarantees. */
#admin-dialog { width:min(1440px,calc(100vw - 48px)); height:calc(100dvh - 48px); max-height:calc(100dvh - 48px); overflow:hidden; border-radius:20px; }
#admin-dialog .admin-workspace { display:flex; height:100%; max-height:none; min-height:0; padding:0; overflow:hidden; flex-direction:column; }
.admin-workspace-header { flex:0 0 auto; min-height:86px; padding:19px 27px; margin:0; border-bottom:1px solid var(--line); background:var(--paper); }
.admin-brand { display:flex; gap:12px; align-items:center; }
.admin-brand > img { width:42px; height:42px; object-fit:contain; }
.admin-brand .eyebrow { font-size:10px; margin-bottom:5px; }
.admin-brand h2 { font-size:17px; }
#admin-content { display:grid; grid-template-columns:212px minmax(0,1fr); flex:1; gap:0; min-height:0; overflow:hidden; }
.admin-navigation { padding:27px 16px; border-right:1px solid var(--line); background:var(--paper); }
.admin-nav-label { margin:0 12px 18px; color:var(--muted); font-size:10px; letter-spacing:.1em; }
.admin-nav-item { display:flex; align-items:center; width:100%; min-height:45px; margin-bottom:8px; padding:11px 15px; border:0; border-radius:10px; color:var(--muted); background:transparent; font-size:13px; text-align:left; }
.admin-nav-item.active { color:var(--brand-ink); background:var(--brand-soft); font-weight:650; }
.admin-nav-item:hover { color:var(--brand-ink); background:var(--soft); }
.admin-nav-note { margin:29px 12px 0; color:var(--muted); font-size:10px; line-height:1.8; }
.admin-main { min-width:0; min-height:0; overflow:auto; padding:26px 30px 36px; background:var(--soft); }
.admin-page-heading { display:flex; gap:18px; justify-content:space-between; align-items:center; margin-bottom:24px; }
.admin-breadcrumb { margin:0 0 20px; color:var(--muted); font-size:11px; }
.admin-page-heading h2 { margin:0 0 9px; font-size:23px; letter-spacing:-.035em; }
.admin-page-heading .muted { margin:0; font-size:12px; }
.admin-refresh { flex:0 0 auto; min-width:68px; }
.admin-filter-card { display:flex; flex-wrap:wrap; align-items:end; gap:14px; padding:20px; margin:0 0 22px; border:1px solid var(--line); border-radius:13px; background:var(--paper); }
.admin-filter-field { display:grid; min-width:125px; flex:1; gap:9px; color:var(--muted); font-size:11px; }
.admin-filter-field:first-child { flex:2; min-width:180px; }
.admin-filter-field input, .admin-filter-field select { width:100%; min-width:0; height:41px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; color:var(--ink); background:var(--paper); }
.admin-filter-card > button { min-height:41px; padding:10px 17px; }
#admin-dialog .admin-results { padding:0 20px; overflow:hidden; }
.admin-table-heading { display:grid; grid-template-columns:minmax(120px,1fr) 110px 90px minmax(170px,1fr); gap:15px; padding:16px 0 16px 54px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
#admin-dialog .admin-user-row { display:grid; grid-template-columns:39px minmax(120px,1fr) 110px 90px minmax(170px,1fr); gap:15px; padding:18px 0; align-items:center; }
#admin-dialog .admin-user-row > .avatar { width:39px; height:39px; flex-basis:39px; }
#admin-dialog .admin-user-identity span { margin-top:6px; font-size:10px; }
.admin-role-cell { color:var(--ink); font-size:11px; }
.admin-status-cell { display:flex; align-items:center; }
.status-active { color:var(--brand-ink); background:var(--brand-soft); border-color:transparent; }
.status-disabled { color:var(--danger); background:var(--danger-soft); border-color:transparent; }
#admin-dialog .status-chip { white-space:nowrap; padding:5px 9px; font-size:10px; }
#admin-dialog .admin-user-actions { justify-content:flex-end; gap:7px; }
#admin-dialog .admin-user-actions button { min-height:33px; padding:8px 10px; font-size:10px; }
#admin-dialog .admin-permissions-form { grid-column:1/-1; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--soft); }
.admin-pagination { display:flex; gap:15px; min-height:68px; justify-content:space-between; align-items:center; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.admin-pagination > button { min-height:34px; font-size:11px; }
#admin-dialog .admin-audit-row { padding:20px 0; }
#admin-dialog .admin-audit-row strong { font-size:13px; color:var(--ink); }
#admin-dialog .admin-audit-row p { line-height:1.9; }
.audit-differences { display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:13px 0 0; list-style:none; }
.audit-differences li { padding:6px 9px; border-radius:7px; color:var(--ink); background:var(--soft); font-size:10px; line-height:1.7; }
.group-manage-card > #group-invitations-button { margin:7px 0 13px; }
.group-member-heading { padding-top:19px; margin-top:15px; border-top:1px solid var(--line); }
.about-card > .modal-header { padding-bottom:17px; border-bottom:1px solid var(--line); }

@media (min-width:1101px) {
  .workspace:has(#chat-search-panel:not(.hidden)) { grid-template-columns:68px 278px minmax(0,1fr) 300px; }
}
@media (min-width:1440px) {
  .workspace:has(#chat-search-panel:not(.hidden)) { grid-template-columns:68px 320px minmax(0,1fr) 320px; }
}
@media (min-width:761px) and (max-width:1100px) {
  .workspace { grid-template-columns:68px 275px minmax(0,1fr); }
  .chat-search-panel { left:68px; }
  .section-page { padding-left:30px; padding-right:30px; }
}
@media (max-width:1180px) {
  #admin-content { grid-template-columns:170px minmax(0,1fr); }
  .admin-main { padding:22px; }
  #admin-dialog .admin-user-row { grid-template-columns:34px minmax(110px,1fr) 92px 75px minmax(120px,1fr); gap:10px; }
  .admin-table-heading { grid-template-columns:minmax(110px,1fr) 92px 75px minmax(120px,1fr); gap:10px; padding-left:44px; }
  #admin-dialog .admin-user-actions { flex-direction:column; align-items:stretch; }
}
@media (max-width:900px) {
  .settings-grid { grid-template-columns:1fr; }
  #admin-dialog { width:calc(100vw - 26px); height:calc(100dvh - 26px); max-height:calc(100dvh - 26px); }
  #admin-content { grid-template-columns:145px minmax(0,1fr); }
  .admin-navigation { padding:25px 10px; }
  .admin-main { padding:22px 18px; }
  .admin-table-heading { display:none; }
  #admin-dialog .admin-user-row { grid-template-columns:39px minmax(0,1fr) auto; gap:10px 13px; }
  .admin-role-cell { grid-column:2; grid-row:2; }
  .admin-status-cell { grid-column:3; grid-row:1; }
  #admin-dialog .admin-user-actions { grid-column:2/-1; flex-direction:row; justify-content:flex-start; }
  #admin-dialog .admin-results { padding:0 18px; }
}
@media (max-width:760px) {
  .workspace { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }
  .conversation-pane, .chat-pane, .section-page { grid-column:1; grid-row:1; }
  .nav-rail { grid-column:1; grid-row:2; flex-direction:row; min-height:69px; padding:8px 22px calc(8px + env(safe-area-inset-bottom)); gap:0; border-right:0; border-top:1px solid var(--line); background:var(--paper); }
  .nav-rail > .brand-mark, .nav-rail > .rail-bottom { display:none; }
  .nav-rail nav { flex:1; width:100%; flex-direction:row; justify-content:space-around; gap:12px; }
  .rail-button { width:min(100px,27vw); height:50px; padding:4px 16px; gap:1px; border-radius:17px; }
  .rail-button > span { font-size:10px; }
  .rail-button svg { width:22px; height:22px; }
  .nav-unread { top:0; right:17px; border-color:var(--paper); }
  body.mobile-chat-open .nav-rail { display:none; }
  body.mobile-chat-open .workspace { grid-template-rows:minmax(0,1fr); }
  .pane-header { min-height:96px; padding:22px 22px 16px; }
  .pane-header .eyebrow { font-size:10px; }
  .pane-header h1 { font-size:24px; }
  .conversation-item { min-height:83px; padding:15px 20px; }
  .conversation-item > .avatar { width:46px; height:46px; flex-basis:46px; }
  .conversation-title { font-size:14px; }
  .conversation-preview { margin-top:7px; font-size:12px; }
  .chat-header { min-height:68px; }
  .chat-search-panel { left:0; }
  .message-composer { gap:8px; padding:11px 12px calc(11px + env(safe-area-inset-bottom)); }
  .attachment-button { width:34px; flex-basis:34px; }
  .attachment-menu { left:12px; width:min(350px,calc(100vw - 24px)); }
  .section-page { padding:0 19px 28px; }
  .section-page-header { padding:27px 3px 25px; }
  .section-page-header h1 { font-size:27px; }
  .people-search-card, .settings-card { padding:20px; border-radius:17px; }
  .settings-grid { gap:15px; }
  .settings-profile { gap:13px; min-height:110px; }
  .settings-profile .avatar { width:54px; height:54px; flex-basis:54px; font-size:20px; }
  .settings-profile h2 { font-size:19px; }
  .settings-profile > .status-chip { font-size:9px; }
  .settings-logout { justify-self:stretch; min-height:44px; }
}
@media (max-width:600px) {
  #admin-dialog { width:100vw; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .admin-workspace-header { min-height:75px; padding:15px 19px; }
  .admin-brand > img { width:35px; height:35px; }
  .admin-brand h2 { font-size:16px; }
  #admin-content { display:flex; flex-direction:column; }
  .admin-navigation { display:flex; flex:0 0 auto; overflow-x:auto; gap:7px; padding:12px 16px; border-right:0; border-bottom:1px solid var(--line); }
  .admin-nav-label, .admin-nav-note { display:none; }
  .admin-nav-item { width:auto; min-height:39px; flex:1 0 auto; justify-content:center; margin:0; padding:10px 12px; font-size:12px; }
  .admin-main { flex:1; padding:22px 15px 30px; }
  .admin-breadcrumb { margin-bottom:17px; font-size:10px; }
  .admin-page-heading { margin-bottom:22px; gap:10px; }
  .admin-page-heading h2 { font-size:23px; }
  .admin-page-heading .muted { font-size:11px; }
  .admin-filter-card { gap:12px; padding:17px; }
  .admin-filter-field:first-child { flex:0 0 100%; }
  .admin-filter-field { flex:1; min-width:110px; }
  .admin-filter-card > button { flex:1; }
  #admin-dialog .admin-results { padding:0 16px; border-radius:13px; }
  #admin-dialog .admin-user-row { padding:18px 0; }
  #admin-dialog .admin-permissions-form { padding:12px; }
  .admin-pagination { min-height:64px; }
}

.pane-brand { display:flex; align-items:center; gap:6px; }
.pane-brand > img { width:18px; height:18px; object-fit:contain; }

/* Peer, discovery and account sections share the same rail/list/detail grammar. */
.nav-rail { gap:20px; padding:20px 7px 14px; }
.nav-rail > .brand-mark { order:3; width:28px; height:28px; flex-basis:28px; opacity:.8; }
.nav-rail .rail-account { order:0; margin:0; }
.rail-account .profile-menu { bottom:auto; top:0; left:58px; }
.nav-rail nav { order:1; flex:1; min-height:0; }
#nav-settings { margin-top:auto; }
.pane-header { position:relative; min-height:77px; padding:18px 20px; justify-content:center; }
.pane-header h1 { font-size:20px; letter-spacing:-.03em; text-align:center; }
.pane-header > .icon-button { position:absolute; right:18px; width:35px; height:35px; }
.conversation-header .pane-brand { display:none; }
.conversation-item > .avatar { width:52px; height:52px; flex-basis:52px; }
.conversation-item { min-height:84px; gap:12px; }
.contact-detail-pane, .settings-detail-pane { grid-column:3; grid-row:1; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--soft); }
.contact-detail-header { display:flex; flex:0 0 auto; align-items:center; gap:12px; height:77px; padding:16px 25px; border-bottom:1px solid var(--line); background:var(--paper); }
.contact-detail-header h2 { flex:1; min-width:0; margin:0; font-size:17px; }
.contact-detail-content { flex:1; min-height:0; overflow:auto; padding:28px; }
.contacts-pane { display:flex; flex-direction:column; min-height:0; }
.contact-shortcuts { padding:5px 18px 13px; border-bottom:1px solid var(--line); }
.contact-shortcuts button { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:8px 4px; border:0; background:transparent; text-align:left; font-size:13px; }
.contact-shortcuts button > span:last-child { margin-left:auto; color:var(--muted); font-size:20px; }
.shortcut-symbol { display:grid; place-items:center; width:37px; height:37px; border-radius:11px; background:var(--brand-soft); color:var(--brand-ink); font-size:23px; }
.contact-shortcuts button:first-child .shortcut-symbol { background:var(--warning-soft); color:var(--warning); }
.contact-group-toolbar { display:flex; align-items:center; flex:0 0 auto; gap:8px; padding:9px 15px; }
.contact-group-toolbar select { flex:1; min-width:0; padding:8px 5px; border:0; background:var(--paper); color:var(--muted); font-size:12px; }
.contact-list-wrap { position:relative; flex:1; min-height:0; display:flex; overflow:hidden; }
.contact-list { flex:1; min-width:0; overflow:auto; }
.contact-letter { padding:7px 19px; margin:0; background:var(--soft); color:var(--muted); font-size:11px; font-weight:600; }
.contact-row { display:flex; align-items:center; gap:11px; width:100%; min-height:73px; padding:12px 17px; border:0; background:transparent; text-align:left; }
.contact-row.active, .contact-row:hover { background:var(--brand-soft); }
.contact-row > .avatar { width:45px; height:45px; flex-basis:45px; }
.contact-row-copy { display:grid; gap:6px; min-width:0; flex:1; }
.contact-row-copy strong { overflow-wrap:anywhere; font-size:13px; font-weight:600; }
.contact-row-copy small { color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.contact-row-copy p { margin:3px 0; font-size:13px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.contact-alphabet { display:flex; flex:0 0 20px; flex-direction:column; justify-content:center; gap:2px; padding:5px 1px; overflow:auto; }
.contact-alphabet button { min-height:23px; padding:2px; border:0; color:var(--muted); background:transparent; font-size:10px; }
.contact-list-footer { display:flex; flex:0 0 auto; flex-wrap:wrap; gap:9px; justify-content:center; align-items:center; min-height:46px; padding:10px 13px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.contact-list-footer button { min-height:30px; padding:5px 9px; font-size:11px; }
.contact-profile-card { max-width:680px; margin:0 auto; padding:30px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.contact-profile-hero { display:flex; align-items:center; gap:19px; margin-bottom:23px; }
.contact-profile-hero .avatar { width:72px; height:72px; flex-basis:72px; font-size:28px; }
.contact-profile-hero > div { min-width:0; }
.contact-profile-hero h2 { margin:0; font-size:21px; overflow-wrap:anywhere; }
.contact-profile-hero p { margin:8px 0; font-size:12px; overflow-wrap:anywhere; }
.contact-preference-form { display:grid; gap:19px; padding:24px 0; margin-top:23px; border-top:1px solid var(--line); }
.field-label { display:grid; gap:9px; color:var(--muted); font-size:12px; }
.text-input, #contact-request-message, #contact-group-name { width:100%; min-width:0; min-height:42px; padding:11px 13px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink); font:inherit; }
#contact-request-message { margin-top:9px; resize:vertical; }
.contact-preference-form > button { justify-self:start; }
.contact-request-tabs { display:flex; gap:8px; margin-bottom:19px; }
.contact-request-tabs .active { color:var(--brand-ink); border-color:var(--brand); background:var(--brand-soft); }
.contact-pending-badge { min-width:21px; padding:3px 6px; border-radius:12px; background:var(--danger); color:#fff; font-size:10px; line-height:1.2; font-style:normal; text-align:center; }
.contact-request-summary { margin:-7px 0 17px; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.contact-request-filters { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.contact-request-filters button { min-height:36px; padding:7px 12px; font-size:12px; }
.contact-request-filters .active { color:var(--brand-ink); border-color:var(--brand); background:var(--brand-soft); }
.contact-request-feedback { margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:10px; }
.contact-request-feedback .search-empty { padding:0; margin:0 0 10px; }
.contact-request-budget { margin:14px 0; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--brand-soft); }
.contact-request-budget p { margin:0 0 9px; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.contact-request-budget button { min-height:36px; padding:7px 11px; font-size:12px; }
.privacy-current { margin:22px 0; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--brand-soft); color:var(--ink); font-size:13px; line-height:1.8; white-space:pre-line; overflow-wrap:anywhere; }
.privacy-form { display:grid; gap:12px; }
.privacy-form > .muted { margin:0 0 12px; font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.privacy-form .field-label { color:var(--ink); font-size:13px; }
.privacy-form select { min-height:44px; }
.privacy-form .profile-actions { margin:3px 0 12px; }
#privacy-status { white-space:pre-line; overflow-wrap:anywhere; }
.contact-request-row { display:flex; align-items:flex-start; flex-wrap:wrap; gap:14px; padding:22px; margin-bottom:12px; border:1px solid var(--line); border-radius:13px; background:var(--paper); }
.contact-request-row > .avatar { width:44px; height:44px; flex-basis:44px; }
.contact-request-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.contact-groups-content { margin-top:20px; max-height:55dvh; overflow:auto; }
.contact-group-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:8px; padding:13px 0; border-bottom:1px solid var(--line); }
.contact-group-row > span { font-size:11px; }
.contact-group-row button { padding:7px 9px; font-size:11px; }
.people-result-row { display:flex; flex-wrap:wrap; align-items:center; gap:13px; padding:20px 2px; border-bottom:1px solid var(--line); }
.people-result-actions { display:flex; flex-wrap:wrap; gap:7px; }
.people-result-actions button { min-height:36px; font-size:11px; padding:8px 12px; }
.settings-list-pane { min-height:0; overflow:auto; }
.settings-list-pane .settings-profile { min-height:125px; padding:20px 23px; margin-bottom:8px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.settings-list-pane .settings-profile .avatar { width:55px; height:55px; flex-basis:55px; }
.settings-list-pane .settings-profile h2 { font-size:17px; }
.settings-menu-list { padding:0 12px 18px; }
.settings-menu-list .settings-row { min-height:71px; padding:14px 14px; border:0; border-radius:10px; }
.settings-menu-list .settings-row small { margin-top:5px; font-size:10px; }
.settings-row.active { background:var(--brand-soft); }
.settings-row.active strong { color:var(--brand-ink); }
.settings-signout strong { color:var(--danger); }
.settings-detail-body { flex:1; min-height:0; overflow:auto; padding:36px; }
.settings-detail-section { max-width:780px; margin:0 auto; padding:32px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.settings-detail-section h2 { font-size:22px; margin:0 0 17px; }
.settings-detail-section > p { margin:0 0 25px; font-size:13px; line-height:1.9; }
.settings-welcome-logo { display:block; width:100px; height:100px; object-fit:contain; margin:0 0 22px; }
.appearance-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.appearance-options button { display:grid; gap:13px; padding:13px; border:1px solid var(--line); border-radius:13px; background:var(--paper); text-align:left; }
.appearance-options button[aria-pressed=true] { border-color:var(--brand); box-shadow:0 0 0 2px var(--focus); }
.appearance-preview { display:block; position:relative; height:145px; border-radius:9px; background:#f3f6f4; box-shadow:inset 35px 0 #fff; }
.appearance-preview::before, .appearance-preview::after { content:""; position:absolute; left:50px; right:25px; top:35px; height:26px; border-radius:7px; background:#fff; }
.appearance-preview::after { left:75px; right:12px; top:80px; background:#d9f1e7; }
.dark-preview { background:#12221c; box-shadow:inset 35px 0 #21362c; }
.dark-preview::before { background:#2b4136; }
.dark-preview::after { background:#30614d; }
.discover-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.discover-entry { display:flex; align-items:center; gap:18px; padding:23px; min-width:0; border:1px solid var(--line); border-radius:15px; background:var(--paper); color:var(--ink); text-decoration:none; }
.discover-entry:hover { border-color:var(--brand); }
.discover-icon { display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px; border-radius:14px; background:var(--brand-soft); color:var(--brand-ink); }
.discover-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.discover-entry-copy { display:grid; min-width:0; flex:1; gap:9px; }
.discover-entry-copy strong { font-size:15px; overflow-wrap:anywhere; }
.discover-entry-copy small { color:var(--muted); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.discover-content > .search-empty { grid-column:1/-1; }
#admin-dialog { width:100vw; height:100dvh; max-width:none; max-height:100dvh; margin:0; border:0; border-radius:0; }
.admin-return-chat { min-width:90px; white-space:nowrap; }
.admin-workspace-header { min-height:70px; padding:12px 24px; }
#admin-content { grid-template-columns:212px minmax(0,1fr); }
.admin-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-top:20px; }
.admin-stat-card { display:grid; gap:17px; padding:21px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.admin-stat-card span { font-size:12px; }
.admin-stat-card strong { font-size:25px; font-weight:600; }
.admin-stat-note { font-size:11px; line-height:1.8; color:var(--muted); padding:5px 0 12px; }
.admin-trend-card, .admin-latest-users { padding:23px 0; border-top:1px solid var(--line); }
.admin-trend-card h3, .admin-latest-users h3 { font-size:14px; margin:0 0 24px; }
.admin-trend { display:flex; gap:8px; padding:0 0 14px; overflow:auto; align-items:end; }
.admin-trend-column { display:flex; flex:1 0 24px; flex-direction:column; gap:8px; align-items:center; min-width:0; font-size:10px; color:var(--muted); }
.admin-trend-column small { writing-mode:vertical-rl; font-size:9px; }
.admin-trend-meter { appearance:none; width:100%; height:12px; }
.admin-trend-meter::-webkit-meter-bar { border:0; background:var(--soft); }
.admin-trend-meter::-webkit-meter-optimum-value { background:var(--brand); }
.admin-latest-user { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line); font-size:12px; }
.admin-latest-user > time { margin-left:auto; }
.admin-group-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto auto; gap:15px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line); font-size:12px; }
.admin-group-row p { margin:7px 0; font-size:11px; }
.admin-group-row small { display:block; font-size:10px; line-height:1.8; }
.admin-group-row > div { min-width:0; overflow-wrap:anywhere; }
.admin-discovery-row { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:18px; align-items:center; padding:23px 0; border-bottom:1px solid var(--line); }
.admin-discovery-row p { font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.admin-discovery-row small { font-size:11px; }
.discover-url { color:var(--brand-ink); }
.discovery-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; grid-column:1/-1; padding:24px; margin:20px 0; border:1px solid var(--line); border-radius:13px; background:var(--soft); }
.discovery-conflict { grid-column:1/-1; min-width:0; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--paper); overflow-wrap:anywhere; }
.discovery-conflict:empty { display:none; }
.discovery-conflict > p { margin:8px 0; font-size:12px; line-height:1.7; }
.discovery-conflict > button { margin:8px 8px 0 0; max-width:100%; white-space:normal; }
.discovery-editor > h3 { grid-column:1/-1; margin:0; font-size:16px; }
.discovery-editor > label:has(textarea), .discovery-editor > label:has(input[type=url]) { grid-column:1/-1; }
.admin-main > .primary-button { margin-bottom:15px; }
.reply-composer { display:flex; flex:0 0 auto; align-items:center; gap:14px; padding:12px 24px; border-top:1px solid var(--line); background:var(--paper); }
.reply-composer > div { min-width:0; flex:1; padding-left:10px; border-left:3px solid var(--brand); }
.reply-composer strong { font-size:11px; color:var(--brand-ink); }
.reply-composer p { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:5px 0 0; font-size:12px; color:var(--muted); }
.message-quote { display:grid; gap:5px; width:100%; min-width:0; text-align:left; padding:8px 10px; margin:0 0 9px; border:0; border-left:3px solid var(--brand); border-radius:5px; background:color-mix(in srgb,var(--brand) 7%,transparent); }
.message-quote strong { color:var(--brand-ink); font-size:11px; }
.message-quote span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; font-size:12px; line-height:1.5; }
.message-actions { display:flex; justify-content:flex-start; padding:2px 4px 0; }
.own .message-actions { justify-content:flex-end; }
.message-actions button { padding:2px 8px; border:0; background:transparent; color:var(--muted); font-size:10px; opacity:0; min-height:23px; }
.message-row:hover .message-actions button, .message-actions button:focus-visible { opacity:1; }
.confirmation-card .modal-actions { flex-wrap:wrap; }

@media (min-width:761px) {
  .nav-rail > nav { display:flex; flex-direction:column; width:100%; }
  .nav-rail > .brand-mark { display:none; }
  #nav-settings { margin-bottom:3px; }
}
@media (max-width:1100px) {
  .contact-detail-content, .settings-detail-body { padding:22px; }
  .contact-profile-card, .settings-detail-section { padding:23px; }
  .admin-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .discover-content { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .nav-rail { padding:7px 12px calc(7px + env(safe-area-inset-bottom)); }
  .nav-rail nav { gap:5px; flex-direction:row; }
  .rail-button { width:calc((100vw - 40px)/4); max-width:96px; height:51px; padding:5px; }
  #nav-settings { margin:0; }
  .pane-header { min-height:72px; padding:17px 20px; }
  .pane-header h1 { font-size:21px; }
  .conversation-item > .avatar { width:52px; height:52px; flex-basis:52px; }
  .contact-detail-pane, .settings-detail-pane, .contacts-pane, .settings-list-pane { grid-column:1; grid-row:1; }
  .workspace[data-section=contacts] .contact-detail-pane, .workspace[data-section=settings] .settings-detail-pane { display:none; }
  body.mobile-contact-open .workspace[data-section=contacts] .contacts-pane, body.mobile-settings-open .workspace[data-section=settings] .settings-list-pane { display:none; }
  body.mobile-contact-open .workspace[data-section=contacts] .contact-detail-pane, body.mobile-settings-open .workspace[data-section=settings] .settings-detail-pane { display:flex; }
  .contact-detail-header { height:68px; padding:13px; gap:6px; }
  .contact-detail-content, .settings-detail-body { padding:17px; }
  .contact-profile-card, .settings-detail-section { padding:22px; }
  .contact-profile-hero { gap:14px; }
  .contact-profile-hero .avatar { width:55px; height:55px; flex-basis:55px; font-size:22px; }
  .contact-request-row { padding:17px; gap:12px; }
  .contact-request-actions { flex-basis:100%; padding-left:56px; }
  .contact-request-actions button { flex:1; min-height:40px; }
  .contact-row { min-height:76px; }
  .contact-alphabet { flex-basis:25px; }
  .contact-alphabet button { min-height:27px; }
  .settings-menu-list { padding:9px 18px 18px; }
  .settings-menu-list .settings-row { min-height:76px; border-bottom:1px solid var(--line); }
  .settings-list-pane { background:var(--paper); }
  .settings-list-pane .settings-profile { padding:25px; background:var(--soft); }
  .appearance-options { gap:10px; }
  .appearance-preview { height:115px; box-shadow:inset 22px 0 #fff; }
  .dark-preview { box-shadow:inset 22px 0 #21362c; }
  .appearance-preview::before { left:30px; right:12px; top:25px; }
  .appearance-preview::after { left:46px; right:8px; top:68px; }
  .people-result-actions { flex-basis:100%; padding-left:58px; }
  .people-result-actions button { flex:1; }
  .message-actions button { opacity:1; min-height:27px; }
  .reply-composer { padding:10px 14px; }
}
@media (max-width:600px) {
  #admin-content { display:flex; }
  .admin-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .admin-stat-card { padding:15px; gap:14px; }
  .admin-stat-card strong { font-size:23px; }
  .admin-stat-card span { font-size:11px; }
  .admin-workspace-header { padding:12px 15px; }
  .admin-return-chat { padding:9px 11px; min-width:78px; font-size:12px; }
  .admin-group-row { grid-template-columns:36px minmax(0,1fr) auto; gap:11px; }
  .admin-group-row > .muted { grid-column:2; }
  .admin-discovery-row { grid-template-columns:42px minmax(0,1fr); gap:13px; }
  .admin-discovery-row > .admin-user-actions { grid-column:2; flex-direction:row !important; }
  .discovery-editor { grid-template-columns:1fr; padding:15px; }
  .discovery-editor > * { min-width:0; }
  .admin-latest-user > time { flex-basis:100%; margin-left:49px; }
  .contact-group-row { grid-template-columns:minmax(0,1fr) auto auto; }
  .contact-group-row > span { grid-column:1; grid-row:2; }
}

.rail-connection { margin-top:auto; max-width:54px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:9px; }
.rail-connection::before { content:""; display:inline-block; width:5px; height:5px; margin-right:4px; border-radius:50%; background:var(--warning); vertical-align:middle; }
.rail-connection.live::before { background:var(--success); }
.rail-connection.offline::before { background:var(--danger); }
#nav-settings { margin-top:0; }
@media (max-width:760px) { .rail-connection { display:none; } }

.appearance-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.system-preview { background:linear-gradient(90deg,#f3f6f4 50%,#12221c 50%); box-shadow:inset 22px 0 #e4eae6; }
.system-preview::before { background:#fff; }
.system-preview::after { background:#30614d; }
@media (max-width:760px) {
  .appearance-options { gap:8px; }
  .appearance-options button { padding:8px; }
  .appearance-options button strong { font-size:11px; }
  .appearance-preview { height:105px; }
  .appearance-preview::before { left:21px; right:5px; height:22px; }
  .appearance-preview::after { left:30px; right:5px; height:22px; top:65px; }
}

/* Discovery keeps the same 320px list and scoped detail navigation as contacts. */
.discover-pane { display:flex; flex-direction:column; min-height:0; background:var(--paper); }
.discover-list-note { flex:0 0 auto; margin:0; padding:10px 21px 15px; color:var(--muted); font-size:11px; border-bottom:1px solid var(--line); }
.discover-content { display:block; flex:1; min-height:0; overflow:auto; max-width:none; margin:0; }
.discover-list-entry { width:100%; gap:13px; padding:18px; border:0; border-bottom:1px solid var(--line); border-radius:0; text-align:left; background:var(--paper); }
.discover-list-entry .discover-icon { width:44px; height:44px; flex-basis:44px; border-radius:12px; }
.discover-list-entry .discover-entry-copy strong { font-size:13px; }
.discover-list-entry .discover-entry-copy small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:11px; }
.discover-list-entry.active, .discover-list-entry:hover { background:var(--brand-soft); }
.discover-detail-pane { grid-column:3; grid-row:1; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--soft); }
.discover-detail-content { flex:1; min-height:0; overflow:auto; padding:36px; }
.discover-detail-card { max-width:730px; margin:0 auto; padding:34px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.discover-detail-card > .discover-icon { width:64px; height:64px; margin-bottom:25px; border-radius:18px; }
.discover-detail-card h2 { margin:0 0 17px; font-size:23px; overflow-wrap:anywhere; }
.discover-detail-description { margin:0 0 27px; font-size:14px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; }
.discover-destination { display:grid; gap:10px; padding:17px; border:1px solid var(--line); border-radius:11px; font-size:12px; }
.discover-destination strong { font-weight:550; overflow-wrap:anywhere; }
.discover-external-note { margin:18px 0 23px; color:var(--muted); font-size:12px; }
.discover-open { display:inline-flex; align-items:center; justify-content:center; min-height:42px; text-decoration:none; }
.discover-placeholder { display:flex; min-height:350px; height:100%; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.discover-placeholder > .discover-icon { width:72px; height:72px; margin-bottom:20px; border-radius:21px; }
.discover-placeholder h2 { margin:0 0 14px; font-size:20px; }
.discover-placeholder p { max-width:360px; margin:0; font-size:13px; line-height:1.9; }
@media (max-width:1100px) { .discover-detail-content { padding:22px; } .discover-detail-card { padding:25px; } }
@media (max-width:760px) {
  .discover-detail-pane { grid-column:1; grid-row:1; }
  .workspace[data-section=discover] .discover-detail-pane { display:none; }
  body.mobile-discover-open .workspace[data-section=discover] .discover-pane { display:none; }
  body.mobile-discover-open .workspace[data-section=discover] .discover-detail-pane { display:flex; }
  .discover-detail-content { padding:17px; }
  .discover-detail-card { padding:23px; }
  .discover-list-entry { min-height:91px; padding:19px; }
  .discover-detail-card h2 { font-size:21px; }
}

/* Confirmed-message tools keep the existing chat layout and touch targets. */
.message-actions { gap:4px; }
.message-actions button { min-height:32px; padding:5px 10px; }
.message-actions .message-menu-action { opacity:1; }
.message-tombstone { margin:2px 0; color:var(--muted); font-style:italic; font-size:13px; }
.message-action-card { width:100%; max-width:100%; min-width:0; max-height:88dvh; overflow:auto; }
#message-action-content { min-width:0; max-width:100%; }
#message-action-content > * { min-width:0; max-width:100%; }
.message-action-preview,.favorite-preview { margin:0 0 18px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; max-height:180px; overflow:auto; }
.message-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.message-action-grid button,.message-editor button,.forward-target,.favorite-actions button { min-height:44px; }
.message-editor { display:grid; gap:14px; }
.message-editor label { display:grid; gap:9px; }
.message-editor textarea { width:100%; resize:vertical; min-height:140px; }
.forward-targets { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; margin-top:16px; max-height:44dvh; overflow:auto; }
.forward-target { width:100%; overflow-wrap:anywhere; text-align:left; justify-content:flex-start; }
.favorites-content { max-height:68dvh; overflow:auto; }
.favorite-row { margin:13px 0; padding:19px; background:var(--soft); border:1px solid var(--line); border-radius:12px; }
.favorite-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.group-settings-content { margin:15px 0; }
.group-settings-form { display:grid; gap:14px; padding:17px; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.group-settings-form label { display:grid; gap:9px; }
.group-settings-form textarea { width:100%; resize:vertical; }
.group-settings-form .group-mute-option { display:flex; align-items:flex-start; gap:10px; line-height:1.6; }
.group-mute-option input { flex:0 0 auto; margin-top:4px; }
.group-announcement,.group-muted-notice { margin:0; padding:10px 18px; background:var(--brand-soft); border-top:1px solid var(--line); color:var(--ink); font-size:12px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.group-announcement { max-height:88px; overflow:auto; }
.group-muted-notice { background:var(--warning-soft); }
@media(max-width:760px) {
  .message-actions button { min-height:44px; padding:6px 12px; }
  .message-action-grid { grid-template-columns:1fr 1fr; }
  .favorite-row { padding:15px; }
}

.group-announcement,.group-muted-notice { flex:0 0 auto; }

/* Account presentation is updated without rebuilding media or editable forms. */
.avatar { position:relative; overflow:hidden; }
.avatar-fallback { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.avatar-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.own-avatar-editor { display:flex; align-items:flex-start; gap:20px; padding-bottom:25px; margin-bottom:25px; border-bottom:1px solid var(--line); }
.own-avatar-editor > .avatar { width:76px; height:76px; flex:0 0 76px; font-size:27px; }
.profile-avatar-controls { min-width:0; flex:1; }
.profile-avatar-controls input[type=file] { max-width:100%; font:inherit; font-size:12px; }
.profile-avatar-controls > p { font-size:12px; line-height:1.8; }
.profile-avatar-preview { width:100px; height:100px; object-fit:cover; border-radius:18px; display:block; margin:14px 0; }
.profile-actions { display:flex; flex-wrap:wrap; gap:9px; margin:15px 0; }
.profile-actions button, .block-list-row button { min-height:44px; }
.own-profile-form { display:grid; gap:18px; }
.own-profile-form .field-label { display:grid; gap:9px; }
.own-profile-form textarea { resize:vertical; min-height:112px; }
.profile-bio { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.8; margin:15px 0 23px; }
#settings-detail-profile .profile-feedback { margin:0; padding:10px 12px; border-radius:8px; color:var(--ink); background:var(--soft); font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
#settings-detail-profile .profile-feedback-success, .profile-toast:not(.error) { color:var(--brand-ink); background:var(--brand-soft); }
#settings-detail-profile .profile-feedback-error { color:var(--danger); background:var(--danger-soft); }
.user-profile-card { width:min(530px,94vw); }
.profile-block-note { font-size:12px; line-height:1.8; }
.profile-section-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; flex-wrap:wrap; margin-bottom:20px; }
.profile-section-heading h2 { margin:0; }
.block-list-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:17px 0; border-bottom:1px solid var(--line); }
.block-user-button { display:grid; gap:5px; min-width:0; flex:1; border:0; background:transparent; padding:0; text-align:left; overflow-wrap:anywhere; }
.block-user-button strong { font-size:14px; }
.block-user-button small { font-size:12px; }
.contact-block-controls { border-top:1px solid var(--line); padding-top:15px; }
@media(max-width:760px) {
  .own-avatar-editor { flex-wrap:wrap; gap:15px; }
  .profile-avatar-controls { flex-basis:100%; }
  .profile-actions > button { flex:1 1 auto; }
  .block-list-row > .danger-button, .block-list-row > .secondary-button { margin-left:52px; }
}

/* Shared pins and per-target forwarding extend the existing message tools. */
.pinned-message-bar { display:flex; flex:0 0 auto; align-items:center; gap:12px; padding:7px 18px; border-bottom:1px solid var(--line); background:var(--paper); min-width:0; }
.pinned-message-jump { flex:1; display:grid; min-width:0; min-height:44px; text-align:left; gap:4px; border:0; border-left:3px solid var(--brand); padding:3px 11px; background:transparent; color:var(--ink); }
.pinned-message-jump strong { color:var(--brand-ink); font-size:12px; }
.pinned-message-jump span { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pinned-message-count { min-height:44px; flex:0 0 auto; border:0; border-radius:8px; background:var(--brand-soft); padding:8px 12px; font-size:12px; color:var(--brand-ink); }
.pinned-message-card { width:100%; max-width:100%; min-width:0; max-height:88dvh; overflow:auto; }
.pinned-message-row { padding:15px 0; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.pinned-message-preview { min-width:0; flex:1; display:grid; gap:8px; text-align:left; border:0; background:transparent; color:var(--ink); min-height:44px; }
.pinned-message-preview span { font-size:13px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pinned-message-preview time { font-size:11px; }
.pinned-message-row > button { min-height:44px; }
.forward-choice { display:flex; align-items:center; min-height:64px; gap:12px; padding:10px 13px; border:1px solid var(--line); border-radius:10px; cursor:pointer; background:var(--paper); }
.forward-choice:has(input:checked) { border-color:var(--brand); background:var(--brand-soft); }
.forward-choice input { flex:0 0 auto; width:18px; height:18px; accent-color:var(--brand); }
.forward-choice .avatar { width:36px; height:36px; flex:0 0 36px; }
.forward-choice-name { min-width:0; font-size:13px; overflow-wrap:anywhere; }
.forward-result { display:flex; min-width:0; max-width:100%; align-items:center; gap:12px; padding:13px; border:1px solid var(--line); border-radius:10px; }
.forward-result-copy { min-width:0; flex:1; }
.forward-result-copy strong { font-size:13px; overflow-wrap:anywhere; }
.forward-result-state { font-size:12px; line-height:1.7; margin:5px 0 0; color:var(--muted); overflow-wrap:anywhere; }
.forward-result[data-status=success] .forward-result-state { color:var(--brand-ink); }
.forward-result[data-status=failed] .forward-result-state { color:var(--danger); }
.forward-result[data-status=unknown] .forward-result-state { color:var(--warning); }
.forward-result button { min-height:44px; }
.forward-summary { font-size:12px; line-height:1.8; color:var(--brand-ink); }
.forward-notice { font-size:12px; line-height:1.8; color:var(--muted); overflow-wrap:anywhere; }
.forward-source-version { display:block; font-size:11px; margin-top:8px; color:var(--muted); }
.password-change-form { display:grid; gap:18px; max-width:520px; margin:24px 0; }
.accessibility-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.password-change-form .field-label { display:grid; gap:8px; }
.shared-attachments-dialog { width:min(680px,calc(100vw - 32px)); }
.shared-attachments-card,.emoji-card { width:100%; max-width:100%; min-width:0; max-height:88dvh; overflow:auto; }
.shared-attachments-search { display:flex; align-items:flex-end; gap:10px; margin-bottom:14px; }
.shared-attachments-search .field-label { flex:1; min-width:0; display:grid; gap:8px; }
.shared-attachments-search button { min-height:44px; flex:0 0 auto; }
.attachment-kind-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.attachment-kind-tab { border:1px solid var(--line); background:var(--paper); color:var(--muted); border-radius:9px; padding:8px 14px; min-height:40px; cursor:pointer; }
.attachment-kind-tab[aria-pressed=true] { background:var(--brand-soft); border-color:var(--brand-soft); color:var(--brand-ink); font-weight:600; }
.shared-attachments-content { display:grid; grid-template-columns:minmax(0,1fr); }
.shared-attachment-row { display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); min-width:0; }
.shared-attachment-icon { flex:0 0 42px; height:46px; border-radius:11px; display:grid; place-items:center; font-size:25px; color:var(--brand-ink); background:var(--brand-soft); }
.shared-attachment-body { min-width:0; flex:1; display:grid; gap:8px; }
.shared-attachment-name { font-size:14px; overflow-wrap:anywhere; line-height:1.6; }
.shared-attachment-body > .muted { font-size:11px; overflow-wrap:anywhere; line-height:1.7; }
.shared-attachment-caption { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; font-size:13px; line-height:1.7; }
.shared-attachment-actions { display:flex; flex-wrap:wrap; gap:7px; }
.shared-attachment-actions .secondary-button { min-height:40px; font-size:12px; padding:8px 10px; text-decoration:none; }
.shared-attachment-preview { width:100%; max-height:360px; object-fit:contain; border-radius:10px; background:var(--soft); }
audio.shared-attachment-preview { min-width:0; height:48px; }
#shared-attachments-more { margin-top:18px; width:100%; }
.emoji-button { flex:0 0 36px; align-self:flex-end; margin-bottom:3px; font-size:26px; color:var(--muted); }
.emoji-card > .field-label { display:grid; gap:8px; }
.emoji-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; min-height:100px; padding:8px 0; }
.emoji-choice { min-width:0; min-height:44px; border:0; border-radius:8px; background:transparent; font-size:25px; cursor:pointer; }
.emoji-choice:hover,.emoji-choice:focus-visible { background:var(--brand-soft); }
.emoji-grid .search-empty { grid-column:1/-1; }
.group-moderation-form { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); display:grid; gap:10px; }
.group-moderation-form .field-label,.member-restriction-form .field-label { display:grid; gap:8px; }
.member-restriction-form { display:grid; gap:16px; }
.group-settings-form > button { margin:4px 6px 4px 0; }
@media(max-width:760px) {
  #chat-attachments-button { display:none; }
  .shared-attachments-dialog { width:calc(100vw - 24px); }
  .shared-attachments-card,.emoji-card { max-height:90dvh; }
  .shared-attachment-row { gap:10px; }
  .shared-attachment-icon { flex-basis:32px; height:38px; font-size:21px; }
  .shared-attachment-actions .secondary-button { min-height:44px; }
  .emoji-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .emoji-button { flex-basis:30px; width:30px; }
  .message-composer { gap:5px; }
}
.forward-footer { display:flex; flex-wrap:wrap; width:100%; min-width:0; max-width:100%; gap:9px; position:sticky; bottom:-24px; padding:14px 0; background:var(--paper); }
.forward-footer button { min-width:0; max-width:100%; min-height:44px; white-space:normal; overflow-wrap:anywhere; }
.conversation-filters { flex-wrap:wrap; }
.conversation-filter { white-space:nowrap; }
.voice-button { flex:0 0 38px; width:38px; height:44px; color:var(--brand-ink); }
.voice-button svg { width:22px; height:22px; }
.attachment-menu { grid-template-columns:repeat(5,minmax(0,1fr)); }
.voice-dialog { width:min(560px,calc(100vw - 32px)); }
.voice-card { width:100%; }
.voice-timer { margin:24px 0 14px; text-align:center; font-variant-numeric:tabular-nums; font-size:34px; font-weight:650; letter-spacing:1px; color:var(--brand-ink); }
.voice-status { min-height:2.8em; text-align:center; color:var(--ink); }
.voice-preview { display:block; width:100%; margin:18px 0; }
.voice-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:18px 0; }
.voice-actions button { min-height:44px; }
.experience-form { display:grid; gap:20px; margin-top:22px; }
.experience-form fieldset { min-width:0; margin:0; padding:6px 18px 14px; border:1px solid var(--line); border-radius:16px; }
.experience-form legend { padding:0 7px; font-weight:650; }
.experience-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.experience-toggle:last-child { border-bottom:0; }
.experience-toggle span { min-width:0; }
.experience-toggle small { display:block; color:var(--muted); line-height:1.6; margin-top:5px; }
.experience-toggle input { flex:0 0 20px; width:20px; height:20px; accent-color:var(--brand); }
.experience-reading { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.notification-device { margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.setting-toggle { display:flex; align-items:center; gap:12px; min-height:44px; font-weight:600; }
.setting-toggle input { width:20px; height:20px; accent-color:var(--brand); }
.composer-draft-feedback { display:flex; align-items:center; flex-wrap:wrap; gap:3px 9px; color:var(--muted); font-size:11px; line-height:1.5; padding:0 4px 4px; }
.draft-feedback-action { padding:4px 0; background:none; border:0; color:var(--brand-ink); font-size:inherit; font-weight:650; text-align:left; }
.draft-conflict-dialog { width:min(760px,calc(100vw - 32px)); }
.draft-conflict-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.draft-conflict-columns section { min-width:0; }
.draft-conflict-preview { min-height:100px; max-height:260px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--soft); color:var(--ink); font:inherit; font-size:14px; line-height:1.7; user-select:text; }
.message-reactions { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; max-width:100%; }
.message-select-control { align-self:center; flex:0 0 36px; width:36px; min-height:44px; border:0; border-radius:50%; color:var(--brand-ink); background:transparent; font-size:23px; }
.message-select-control[aria-checked="true"] { background:var(--brand-soft); }
.selected-message .message-bubble { box-shadow:0 0 0 2px var(--brand); }
.message-selection-bar { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:10px 18px; background:var(--paper); border-top:1px solid var(--line); }
.message-selection-bar strong { margin-right:auto; font-size:13px; }
.message-selection-bar button { min-height:40px; padding:8px 11px; font-size:12px; }
.message-tasks-quick { display:block; flex-shrink:0; margin:0; border:0; border-top:1px solid var(--line); background:var(--brand-soft); color:var(--brand-ink); font-size:12px; padding:8px 14px; }
.message-tasks-dialog { width:min(820px,calc(100vw - 32px)); }
.message-tasks-card { width:100%; }
.batch-retention-setting { padding:12px 15px; border:1px solid var(--line); border-radius:12px; margin:12px 0 20px; }
.batch-retention-setting label { display:flex; align-items:center; gap:10px; min-height:44px; font-weight:600; }
.batch-retention-setting input { width:20px; height:20px; accent-color:var(--brand); }
.batch-retention-setting p { margin:6px 0; font-size:12px; line-height:1.6; }
.message-tasks-content { display:grid; gap:18px; min-width:0; }
.message-task-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--soft); }
.message-task-card h3 { font-size:17px; margin:0 0 10px; }
.message-task-summary,.message-task-notice { font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.message-task-notice { color:var(--muted); }
.message-task-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.message-task-actions button { min-height:40px; font-size:12px; white-space:normal; overflow-wrap:anywhere; }
.message-task-target { padding:14px 0 0; margin-top:14px; border-top:1px solid var(--line); min-width:0; }
.message-task-target h4 { margin:0 0 6px; overflow-wrap:anywhere; }
.message-task-target p { font-size:12px; }
.message-task-jobs { padding-left:25px; font-size:12px; line-height:1.7; }
.message-task-jobs li { padding:4px 0; overflow-wrap:anywhere; }
.message-task-jobs [data-status="success"] { color:var(--brand-ink); }
.message-task-jobs [data-status="failed"],.message-task-jobs [data-status="unknown"] { color:var(--danger); }
.group-permission-editor-notice { width:100%; color:var(--warning); font-size:12px; line-height:1.6; }
@media(max-width:760px) {
  .message-select-control { flex-basis:28px; width:28px; min-height:44px; font-size:20px; }
  .message-selection-bar { padding:8px 10px; gap:6px; }
  .message-selection-bar strong { width:100%; }
  .message-selection-bar button,.message-task-actions button { min-height:44px; }
  .message-tasks-card { padding:18px; }
  .message-task-card { padding:14px; }
  .message-task-actions > button { flex:1 1 auto; }
}
.reaction-chip { min-height:32px; border:1px solid var(--line); padding:4px 10px; border-radius:18px; background:var(--paper); color:var(--ink); font-size:13px; font-variant-numeric:tabular-nums; }
.reaction-chip[aria-pressed="true"] { background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink); }
.reaction-retry { min-height:32px; padding:4px 8px; border:0; background:none; color:var(--brand-ink); font-size:12px; }
.message-react-action { border:0; background:none; color:inherit; padding:5px 7px; font:inherit; }
.emoji-choice[aria-pressed="true"] { background:var(--brand-soft); box-shadow:inset 0 0 0 2px var(--brand); }
.reaction-help { grid-column:1/-1; margin:10px 0 0; font-size:13px; }
@media(max-width:760px) {
  .draft-conflict-columns { grid-template-columns:minmax(0,1fr); gap:12px; }
  .draft-conflict-preview { min-height:70px; max-height:155px; }
  .draft-conflict-columns button { width:100%; min-height:44px; }
  .message-react-action,.reaction-chip,.reaction-retry,.draft-feedback-action { min-height:44px; }
  .composer-draft-feedback { font-size:10px; }
}
html[data-chat-font="14"] { --chat-font-size:14px; }
html[data-chat-font="16"] { --chat-font-size:16px; }
html[data-chat-font="18"] { --chat-font-size:18px; }
html[data-chat-font="20"] { --chat-font-size:20px; }
.message-text, #message-input { font-size:var(--chat-font-size,16px); }
html[data-message-density="compact"] .message-row { margin-bottom:6px; }
html[data-message-density="compact"] .message-bubble { padding:7px 11px 5px; }
@media(max-width:760px) {
  .voice-button { flex-basis:32px; width:32px; }
  .message-composer { gap:4px; }
  .experience-reading { grid-template-columns:1fr; gap:10px; }
  .voice-actions > button { flex:1 1 auto; }
  .voice-card { padding:20px; }
}
@media(max-width:760px) {
  .pinned-message-bar { gap:6px; padding:5px 12px; }
  .pinned-message-count { padding:8px; font-size:11px; }
  .pinned-message-row { flex-wrap:wrap; }
  .pinned-message-preview { flex-basis:100%; }
  .forward-footer { bottom:-20px; }
  .forward-footer > button { flex:1 1 auto; }
  .forward-result { align-items:flex-start; flex-wrap:wrap; }
  .forward-result-copy { flex-basis:100%; }
}

/* Group mentions share the chat surface without replacing message media. */
.conversation-header-actions { display:flex; align-items:center; gap:8px; }
.mentions-entry { min-width:40px; min-height:40px; padding:6px 10px; border-radius:13px; font-weight:700; }
.mention-count-badge { flex:none; min-width:24px; padding:4px 6px; border-radius:9px; color:var(--brand-ink); background:var(--brand-soft); font-size:11px; font-weight:700; white-space:nowrap; }
.mention-member-button { width:36px; min-height:44px; flex:0 0 36px; color:var(--muted); font-size:20px; font-weight:600; }
.mention-picker { position:absolute; z-index:25; bottom:calc(100% + 6px); left:20px; width:min(420px,calc(100% - 40px)); padding:8px; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:var(--shadow); }
#mention-options { max-height:min(290px,40dvh); overflow-y:auto; overscroll-behavior:contain; }
.mention-option { display:grid; grid-template-columns:36px minmax(0,1fr); gap:2px 10px; width:100%; min-height:54px; padding:8px; border:0; border-radius:10px; text-align:left; background:transparent; color:var(--ink); }
.mention-option.selected,.mention-option:hover { background:var(--brand-soft); }
.mention-option .avatar { grid-row:1/3; width:34px; height:34px; font-size:13px; }
.mention-option-name { font-size:13px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mention-option-account { color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mention-option-all .avatar { background:var(--brand-soft); color:var(--brand-ink); }
.mention-all-draft { display:flex; flex:0 0 auto; align-items:center; gap:12px; padding:10px 24px; background:var(--paper); border-top:1px solid var(--line); }
.mention-all-symbol { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:11px; background:var(--brand-soft); color:var(--brand-ink); font-size:18px; font-weight:700; }
.mention-all-draft > div { min-width:0; flex:1; }
.mention-all-draft strong { font-size:12px; color:var(--brand-ink); }
.mention-all-draft p { margin:4px 0 0; font-size:11px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.mention-all-unavailable p { color:var(--danger); }
.message-all-mention { display:block; width:fit-content; max-width:100%; margin:0 0 7px; padding:4px 8px; border-radius:7px; background:var(--brand-soft); color:var(--brand-ink); font-size:11px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; }
.message-edit-all { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; cursor:pointer; }
.message-edit-all input { width:18px; height:18px; accent-color:var(--brand); }
.message-edit-all-hint { color:var(--muted); font-size:12px; line-height:1.7; }
.pwa-install-dialog { width:min(760px,calc(100vw - 32px)); }
.pwa-install-card { max-height:min(90dvh,900px); overflow-y:auto; }
.pwa-install-intro { display:flex; align-items:center; gap:18px; padding:8px 0 18px; }
.pwa-install-intro img { width:64px; height:64px; flex:0 0 64px; object-fit:contain; border:1px solid var(--line); border-radius:20px; background:var(--paper); }
.pwa-install-intro p { margin:0; color:var(--ink); font-size:17px; line-height:1.7; letter-spacing:.01em; }
.pwa-install-status { margin:0 0 14px; color:var(--muted); line-height:1.7; font-size:13px; }
.pwa-device-guides { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }
.pwa-device-guides section { min-width:0; padding:17px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.pwa-device-number { color:var(--brand-ink); font-size:11px; font-weight:700; letter-spacing:.12em; }
.pwa-device-guides h3,.pwa-account-guide h3 { margin:10px 0 8px; font-size:14px; color:var(--ink); }
.pwa-device-guides p,.pwa-account-guide p { margin:0; color:var(--muted); font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.pwa-account-guide { padding:4px 0 16px; border-bottom:1px solid var(--line); }
.pwa-account-guide p + p { margin-top:6px; }
.pwa-product-boundary { margin:14px 0 0; color:var(--muted); font-size:11px; line-height:1.8; }
@media (max-width:600px) {
  .mention-all-draft { padding:10px 14px; gap:8px; }
  .pwa-install-card { padding:20px; }
  .pwa-install-intro { gap:12px; }
  .pwa-install-intro p { font-size:15px; }
  .pwa-device-guides { grid-template-columns:1fr; gap:8px; margin:16px 0; }
  .pwa-device-guides section { padding:12px 14px; }
  .pwa-device-guides h3 { display:inline; margin-left:10px; }
  .pwa-device-guides p { margin-top:6px; }
}
.mention-picker-status { margin:8px 8px 3px; color:var(--muted); font-size:11px; line-height:1.5; }
.message-mention { color:var(--brand-ink); font-weight:650; }
.message-mention.own-mention { border-radius:4px; background:var(--brand-soft); box-shadow:0 0 0 2px var(--brand-soft); }
.chat-mentions-button { align-self:flex-end; flex:none; margin:5px 18px; padding:8px 13px; border:1px solid var(--line); border-radius:18px; color:var(--brand-ink); background:var(--paper); font-size:12px; font-weight:650; }
.mention-chat-toolbar { display:flex; flex:none; align-items:center; justify-content:space-between; gap:10px; padding:8px 18px; border-top:1px solid var(--line); color:var(--brand-ink); background:var(--paper); font-size:12px; line-height:1.5; }
.mention-chat-toolbar button { flex:none; min-height:36px; font-size:12px; }
.mentions-dialog { width:min(640px,calc(100vw - 24px)); }
.mentions-card { max-height:min(85dvh,800px); overflow-y:auto; }
.mentions-actions { display:flex; justify-content:flex-end; }
.mentions-list { display:grid; gap:8px; margin:12px 0; }
.mention-result { display:flex; flex-direction:column; gap:7px; width:100%; padding:14px; border:1px solid var(--line); border-radius:13px; text-align:left; background:var(--paper); color:var(--ink); }
.mention-result:hover { background:var(--brand-soft); border-color:var(--focus); }
.mention-result-title { font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.mention-result-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; overflow-wrap:anywhere; font-size:14px; line-height:1.6; }
.mention-result-time { color:var(--muted); font-size:11px; }
@media(max-width:760px) {
  .conversation-header-actions { gap:5px; }
  .mentions-entry { min-height:44px; }
  .mention-member-button { flex-basis:28px; width:28px; padding:0; }
  .mention-picker { left:12px; width:calc(100% - 24px); bottom:calc(100% + 3px); }
  #mention-options { max-height:min(240px,35dvh); }
  .mention-chat-toolbar { padding:7px 12px; font-size:11px; flex-wrap:wrap; }
  .mention-chat-toolbar button,.chat-mentions-button { min-height:44px; }
  .chat-mentions-button { margin:4px 12px; }
  .mentions-card { padding:20px; }
}

/* Account governance follows the existing desktop and mobile dialog system. */
.admin-login-dialog { width: min(680px, calc(100vw - 24px)); }
.admin-login-dialog .modal-card { max-height: min(86dvh, 860px); overflow-y: auto; }
.admin-session-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.admin-session-reason { display: block; width: 100%; margin-top: 8px; resize: vertical; }
.admin-session-row { padding: 18px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.admin-session-row p { margin: 7px 0; font-size: 13px; line-height: 1.6; }
.admin-session-row button { margin-top: 8px; }
.admin-command-note { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); line-height: 1.65; font-size: 13px; overflow-wrap: anywhere; }
.admin-permissions-form .admin-command-note { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .admin-login-dialog .modal-card { padding: 18px; }
  .admin-session-toolbar > button { min-height: 44px; flex: 1 1 140px; }
  .admin-permissions-form button { min-height: 44px; }
}


/* Platform presentation never replaces conversation or media nodes. */
.product-preserve-lines { white-space:pre-wrap; overflow-wrap:anywhere; }
.product-help-links { display:flex; flex-wrap:wrap; gap:8px 18px; margin:16px 0; font-size:12px; }
.product-help-links a { color:var(--brand-ink); text-decoration:underline; text-underline-offset:3px; }
.product-help-links a[hidden] { display:none; }
.product-notice { border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:10px; padding:13px 15px; background:var(--brand-soft); color:var(--ink); overflow-wrap:anywhere; }
.product-notice strong { display:block; font-size:13px; line-height:1.6; }
.product-notice p { margin:6px 0 0; font-size:12px; line-height:1.7; max-height:125px; overflow:auto; }
.auth-product-notice { margin:16px 0; }
.conversation-product-notice { flex-shrink:0; margin:2px 16px 12px; }
.product-registration-note { font-size:12px; line-height:1.7; padding:12px 14px; border-radius:9px; color:var(--ink); background:var(--soft); }
.product-group-defaults { font-size:12px; line-height:1.75; overflow-wrap:anywhere; }
.product-policy-restricted { color:var(--danger); }
.product-config-intro { position:relative; padding:25px 28px 23px 80px; margin:0 0 22px; background:var(--paper); border:1px solid var(--line); border-radius:14px; }
.product-config-intro h3 { margin:0 0 9px; font-size:18px; letter-spacing:-.02em; }
.product-config-intro > .muted { max-width:680px; margin:0; line-height:1.8; font-size:12px; }
.product-config-symbol { position:absolute; left:26px; top:25px; display:grid; place-items:center; width:36px; height:36px; color:var(--brand-ink); background:var(--brand-soft); border-radius:10px; font-size:23px; }
.product-config-version { margin:15px 0 0; font-size:11px; color:var(--brand-ink); font-variant-numeric:tabular-nums; }
.product-config-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; align-items:start; gap:24px; }
.product-config-form { min-width:0; }
.product-config-section { display:grid; gap:18px; padding:26px; margin:0 0 22px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.product-config-section h3 { margin:0; font-size:16px; }
.product-config-section > .muted { margin:-5px 0 4px; font-size:11px; line-height:1.8; }
.product-config-field { display:grid; gap:8px; color:var(--ink); font-size:12px; font-weight:550; }
.product-config-field .text-input { width:100%; min-width:0; max-width:100%; font-size:13px; font-weight:400; line-height:1.65; border:1px solid var(--line); border-radius:9px; padding:11px 12px; color:var(--ink); background:var(--paper); }
.product-config-field textarea { resize:vertical; min-height:82px; }
.product-config-field input:disabled, .product-config-field textarea:disabled, .product-config-field select:disabled { color:var(--muted); background:var(--soft); opacity:1; cursor:not-allowed; }
.product-config-switch { display:flex; align-items:center; gap:11px; padding:12px 0; }
.product-config-switch input[type=checkbox] { width:18px; min-height:18px; height:18px; flex:0 0 18px; padding:0; margin:0; accent-color:var(--brand); }
.product-config-preview { position:sticky; top:0; padding:23px; border:1px solid var(--line); border-radius:14px; background:var(--paper); min-width:0; }
.product-config-preview > h3 { margin:0 0 9px; font-size:14px; }
.product-preview-badge { display:inline-flex; padding:4px 8px; margin:0 0 22px; border-radius:5px; background:var(--soft); color:var(--muted); font-size:10px; }
.product-preview-card { border:1px solid var(--line); border-radius:11px; padding:23px 18px; background:var(--soft); overflow-wrap:anywhere; }
.product-preview-card .eyebrow { display:block; font-size:10px; max-height:80px; overflow:auto; }
.product-preview-card h4 { margin:28px 0 16px; font-size:22px; letter-spacing:-.04em; line-height:1.5; max-height:220px; overflow:auto; }
.product-preview-card p { font-size:11px; line-height:1.8; max-height:180px; overflow:auto; }
.product-config-preview > .muted { margin:15px 0 0; font-size:10px; line-height:1.8; }
.product-preview-notice { border-left:2px solid var(--brand); padding:12px; margin:20px 0; background:var(--paper); }
.product-preview-notice strong { font-size:12px; }
.product-preview-policy { margin:20px 0 0; padding:10px 13px; color:var(--brand-ink); background:var(--brand-soft); border-radius:7px; }
.product-config-actions { display:flex; flex-wrap:wrap; gap:10px; }
.product-config-status { margin:0; font-size:12px; color:var(--muted); line-height:1.8; }
.product-config-comparison { border:1px solid var(--line); border-radius:9px; padding:14px 16px; min-width:0; }
.product-config-comparison summary { cursor:pointer; font-size:12px; color:var(--brand-ink); font-weight:550; }
.product-config-difference { padding:13px 0; border-top:1px solid var(--line); font-size:12px; }
.product-config-difference:first-of-type { margin-top:13px; }
.product-config-difference p { margin:6px 0 0; font-size:12px; line-height:1.75; max-height:240px; overflow:auto; }
.product-history-card { display:grid; gap:12px; padding:23px; margin-bottom:18px; border:1px solid var(--line); border-radius:13px; background:var(--paper); overflow-wrap:anywhere; }
.product-history-card > p { margin:0; font-size:12px; line-height:1.8; }
.product-history-card > button { justify-self:start; }
.product-history-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.product-history-heading strong { font-size:16px; }
.product-history-heading time { font-size:11px; }
.product-config-history-help { font-size:12px; line-height:1.8; color:var(--muted); margin:0 0 20px; }
.product-publish-panel { border-top:3px solid var(--brand); }
/* Filtering changes visibility only; the full configuration draft remains intact. */
.product-config-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:14px; padding:18px 20px; margin:0 0 20px; border:1px solid var(--line); border-radius:14px; background:var(--paper); min-width:0; }
.product-config-toolbar > label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; max-width:100%; font-size:12px; color:var(--ink); }
.product-config-toolbar > label:has(input[type=search]) { display:grid; flex:1 1 260px; }
.product-config-toolbar input[type=search] { width:100%; min-width:0; max-width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--paper); font-size:13px; line-height:1.65; }
.product-config-toolbar input[type=checkbox] { width:18px; height:18px; flex:0 0 18px; margin:0; accent-color:var(--brand); }
.product-config-toolbar > button { flex:0 1 auto; max-width:100%; white-space:normal; }
.product-config-filter-status { margin:-8px 2px 16px; font-size:12px; line-height:1.75; color:var(--muted); overflow-wrap:anywhere; }
.product-config-draft-summary, .product-config-merge { min-width:0; padding:20px; margin:0 0 20px; border:1px solid var(--line); border-radius:12px; background:var(--paper); overflow-wrap:anywhere; }
.product-config-draft-summary > h3, .product-config-merge > h3 { margin:0 0 12px; font-size:15px; line-height:1.6; }
.product-config-draft-summary > p, .product-config-merge > p { margin:8px 0; font-size:12px; line-height:1.8; }
.product-config-change-row, .product-config-merge-row { display:grid; gap:8px; min-width:0; padding:16px 0; border-top:1px solid var(--line); font-size:12px; line-height:1.75; }
.product-config-change-row > *, .product-config-merge-row > * { min-width:0; max-width:100%; }
.product-config-change-row p, .product-config-merge-row p { margin:0; overflow-wrap:anywhere; }
.product-config-change-row strong, .product-config-merge-row strong { color:var(--ink); font-size:12px; }
.product-config-change-row > button, .product-config-merge-row > button { justify-self:start; max-width:100%; white-space:normal; }
.product-config-change-row details, .product-config-merge-row details { min-width:0; }
.product-config-change-row summary, .product-config-merge-row summary { cursor:pointer; color:var(--brand-ink); }
.product-config-field-actions, .product-config-merge-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-width:0; }
.product-config-field-actions { margin-top:2px; }
.product-config-field-actions > button, .product-config-merge-actions > button { max-width:100%; white-space:normal; }
.product-config-merge-actions { margin-top:12px; }
.product-config-merge-row select { display:block; width:100%; min-width:0; max-width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--paper); font-size:13px; line-height:1.65; }
.product-config-toolbar :is(input,button):focus-visible, .product-config-draft-summary :is(button,summary):focus-visible, .product-config-merge :is(button,select,summary):focus-visible, .product-config-field-actions button:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.product-config-toolbar button:disabled, .product-config-field-actions button:disabled, .product-config-merge :is(button,select):disabled { cursor:not-allowed; opacity:.6; }
.product-config-section, .product-config-field, .product-config-comparison, .product-config-difference { min-width:0; overflow-wrap:anywhere; }
.product-config-toolbar [hidden], .product-config-form [hidden], .product-config-draft-summary [hidden], .product-config-merge [hidden] { display:none; }
.confirmation-card .session-description { white-space:pre-wrap; overflow-wrap:anywhere; min-width:0; }
@media (max-width:1150px) { .product-config-layout { grid-template-columns:minmax(0,1fr); } .product-config-preview { position:static; order:-1; } .product-preview-card h4 { margin:12px 0; font-size:21px; } .product-preview-card { padding:20px; } .product-preview-badge { margin-bottom:13px; } }
@media (max-width:650px) { .product-config-intro { padding:20px; } .product-config-symbol { position:static; margin-bottom:12px; } .product-config-section, .product-config-preview, .product-history-card { padding:18px; } .product-config-actions > button { width:100%; } .product-config-layout { gap:18px; } .product-config-section { margin-bottom:18px; } .product-notice p { max-height:100px; } .product-config-version { line-height:1.8; } }
@media (max-width:650px) { .product-config-toolbar { padding:16px; gap:12px; } .product-config-toolbar > label:has(input[type=search]) { flex-basis:100%; } .product-config-draft-summary, .product-config-merge { padding:16px; } .product-config-merge-actions > button { width:100%; } .product-config-change-row, .product-config-merge-row { gap:7px; padding:14px 0; } }
@media (max-width:360px) { .product-config-toolbar { align-items:stretch; } .product-config-toolbar > label, .product-config-toolbar > button { flex-basis:100%; } .product-config-section, .product-config-preview, .product-config-draft-summary, .product-config-merge { padding:14px; } .product-config-change-row > button, .product-config-field-actions > button { width:100%; } }

/* The viewer is a single current-chat image surface, not a media cache or album. */
.message-image-link { cursor:zoom-in; }
.image-viewer-dialog { box-sizing:border-box; width:min(1120px,calc(100vw - 48px)); max-width:none; height:min(900px,calc(100dvh - 64px)); max-height:min(900px,calc(100dvh - 64px)); padding:0; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--paper); color:var(--ink); }
.image-viewer-dialog::backdrop { background:rgba(8,13,19,.82); backdrop-filter:blur(7px); }
.image-viewer-card { box-sizing:border-box; display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; max-height:100%; min-height:0; }
.image-viewer-header { display:flex; gap:20px; align-items:flex-start; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); min-width:0; }
.image-viewer-header > div { min-width:0; }
.image-viewer-header .eyebrow { margin:0 0 4px; font-size:10px; }
.image-viewer-header h2 { margin:0; font-size:19px; line-height:1.4; }
.image-viewer-header .icon-button { flex-shrink:0; }
.image-viewer-name { max-width:850px; margin:5px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; }
.image-viewer-content { display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; overflow:hidden; background:color-mix(in srgb,var(--soft) 80%,var(--paper)); }
.image-viewer-image { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; }
.image-viewer-footer { padding:14px 22px 17px; min-width:0; border-top:1px solid var(--line); }
.image-viewer-caption { margin:0 0 12px; max-height:90px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.6; }
.image-viewer-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.image-viewer-navigation, .image-viewer-actions { display:flex; align-items:center; gap:8px; }
.image-viewer-navigation > span { min-width:64px; text-align:center; font-size:12px; color:var(--muted); }
.image-viewer-toolbar .secondary-button { min-height:40px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; white-space:nowrap; }
.image-viewer-load { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px; }
.image-viewer-load p, .image-viewer-range { margin:0; font-size:11px; line-height:1.6; color:var(--muted); }
.image-viewer-range { margin-top:6px; }
@media (max-width:600px) {
  .image-viewer-dialog { width:100vw; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; }
  .image-viewer-header { padding:15px 14px 12px; gap:12px; }
  .image-viewer-name { max-width:calc(100vw - 78px); }
  .image-viewer-footer { padding:12px 14px max(12px,env(safe-area-inset-bottom)); }
  .image-viewer-toolbar { justify-content:center; gap:10px; }
  .image-viewer-navigation { justify-content:space-between; width:100%; }
  .image-viewer-actions { width:100%; }
  .image-viewer-actions > a { flex:1; }
  .image-viewer-caption { max-height:65px; }
}


/* Platform delegation previews never grant authority before the saved command. */
.admin-authority-summary { margin:0 0 20px; padding:15px 17px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.admin-authority-role { display:block; color:var(--ink); font-size:13px; }
.admin-authority-summary > p { margin:7px 0; font-size:11px; line-height:1.65; }
.admin-authority-capabilities { display:flex; flex-wrap:wrap; gap:3px 22px; margin:10px 0; padding-left:16px; color:var(--muted); font-size:11px; line-height:1.8; }
.admin-owner-capability { color:var(--ink); font-weight:600; }
.admin-authority-boundary { border-top:1px solid var(--line); padding-top:8px; color:var(--muted); }
.admin-permissions-form > .admin-permission-presets, .admin-permissions-form > .admin-permission-changes, .admin-permissions-form > .admin-capability-groups, .admin-permissions-form > p { flex:0 0 100%; min-width:0; }
.admin-permissions-form > button { align-self:flex-start; flex:0 1 auto; min-height:44px; }
.admin-permission-presets > p { margin:7px 0 12px; font-size:12px; line-height:1.7; }
.admin-permission-preset-actions { display:flex; flex-wrap:wrap; gap:8px; }
.admin-permission-preset-actions button { margin:0; min-height:38px; }
.permission-grid.admin-capability-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.admin-capability-group { min-width:0; margin:0; padding:12px; border:1px solid var(--line); border-radius:10px; }
.admin-capability-group legend { padding:0 5px; font-size:13px; font-weight:600; }
.admin-capability-group > p { margin:0 0 10px; font-size:11px; line-height:1.7; }
.admin-capability-group > label { display:flex; align-items:flex-start; gap:8px; margin:9px 0; font-size:12px; line-height:1.6; }
.admin-capability-group input { flex-shrink:0; margin-top:3px; }
.admin-permission-changes { padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:var(--soft); overflow-wrap:anywhere; }
.admin-permission-changes > p { margin:6px 0 0; font-size:12px; line-height:1.7; }
@media (max-width:1100px) {
  .permission-grid.admin-capability-groups { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .admin-authority-summary { flex-basis:100%; margin-top:6px; }
  .admin-authority-capabilities { display:flex; flex-wrap:wrap; gap:3px 18px; }
  .admin-permission-preset-actions button { flex:1 1 120px; min-height:42px; }
}

/* Global search uses the same restrained chat typography on desktop and mobile. */
.conversation-search-tools { display:flex; align-items:center; gap:8px; }
.conversation-search-tools .search-box { flex:1; min-width:0; }
.conversation-search-tools > button { flex:0 0 38px; }
.global-search-dialog { width:min(720px, calc(100vw - 32px)); max-height:calc(100dvh - 40px); }
.global-search-card { display:flex; flex-direction:column; max-height:calc(100dvh - 40px); gap:12px; overflow:hidden; }
.global-search-card > p { margin:0; line-height:1.65; }
.global-search-form { display:grid; gap:12px; }
.global-search-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.global-search-filters label { display:grid; gap:6px; min-width:0; font-size:12px; color:var(--muted); }
.global-search-filters input,.global-search-filters select { min-width:0; width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font:inherit; }
.global-search-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.global-search-mine { display:flex; align-items:center; gap:8px; font-size:13px; }
.global-search-actions > span { font-size:11px; }
.global-search-actions > button { margin-left:auto; }
.global-search-results { overflow-y:auto; overscroll-behavior:contain; min-height:80px; display:grid; align-content:start; gap:6px; }
.global-search-result { text-align:left; border:1px solid transparent; border-radius:12px; padding:13px; background:var(--paper); color:var(--ink); cursor:pointer; display:grid; gap:6px; min-width:0; width:100%; }
.global-search-result:hover,.global-search-result:focus-visible { background:var(--soft); border-color:var(--line); }
.global-search-result-title { font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.global-search-result-preview { font-size:14px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.global-search-result-meta { font-size:11px; color:var(--muted); }
.global-search-footer { display:flex; justify-content:center; gap:10px; }
@media (max-width:760px) {
  .global-search-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 24px); }
  .global-search-card { padding:18px; max-height:calc(100dvh - 24px); gap:10px; }
  .global-search-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .global-search-filters > label:first-child { grid-column:1 / -1; }
  .global-search-actions { gap:8px; }
}

.session-with-label { flex-wrap:wrap; }
.session-label-editor { flex:1 0 100%; width:100%; min-width:0; }
.session-label-form { display:grid; gap:8px; margin-top:6px; padding:12px; background:var(--soft); border-radius:10px; }
.session-label-form .field-label { margin:0; }
.session-label-form .text-input { width:100%; margin-top:6px; }
.session-label-status { color:var(--muted); font-size:12px; line-height:1.65; margin:0; overflow-wrap:anywhere; }
.session-label-actions { display:flex; flex-wrap:wrap; gap:8px; }
.session-label-actions button { font-size:12px; }
.media-usage-panel { border-top:1px solid var(--line); padding-top:18px; margin-top:24px; }
.media-usage-panel h3 { margin:0 0 10px; font-size:15px; }
.media-usage-panel p { font-size:12px; line-height:1.75; }
#attachment-budget { display:block; font-size:11px; line-height:1.55; overflow-wrap:anywhere; }

@media (max-width:760px) {
  /* Keep attachment details readable beside the mobile composer tools. */
  .message-composer:has(.attachment-status:not(.hidden)) { flex-wrap:wrap; row-gap:8px; }
  .message-composer:has(.attachment-status:not(.hidden)) .composer-field { flex:1 0 100%; width:100%; order:-1; }
  .message-composer:has(.attachment-status:not(.hidden)) .send-button { margin-left:auto; }
  .attachment-status { display:grid; grid-template-columns:29px minmax(0,1fr) 44px; align-items:start; gap:8px 10px; padding:12px; }
  .attachment-status-icon { grid-column:1; grid-row:1; }
  .attachment-status-copy { grid-column:2 / -1; grid-row:1; max-height:min(240px,32dvh); overflow-y:auto; overscroll-behavior:contain; }
  .attachment-status-copy strong,.attachment-status-copy span { overflow:visible; white-space:normal; text-overflow:clip; overflow-wrap:anywhere; font-size:12px; line-height:1.6; }
  #attachment-budget { margin-top:7px; }
  .attachment-status-action { grid-column:2; grid-row:2; justify-self:end; min-width:72px; min-height:44px; padding:8px 16px; background:var(--brand-soft); font-size:12px; }
  .attachment-status-close { grid-column:3; grid-row:2; min-width:44px; min-height:44px; background:var(--paper); }
}


/* Scoped search keeps the sender chooser optional and useful on narrow screens. */
.chat-search-advanced { margin:0 16px 12px; }
.global-search-card { overflow-y:auto; overscroll-behavior:contain; }
.global-search-form,.global-search-footer,.global-search-card > header,.global-search-card > p { flex-shrink:0; }
.global-search-results { flex:1 0 auto; max-height:42dvh; }
.global-search-scope { display:grid; gap:10px; }
.global-search-scope > label { display:grid; gap:6px; font-size:12px; color:var(--muted); }
.global-search-scope select { min-width:0; width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font:inherit; }
.global-search-sender-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.global-search-sender-controls .secondary-button { padding:8px 12px; font-size:12px; }
.global-search-sender-chip { display:flex; align-items:center; gap:8px; max-width:100%; padding:4px 6px 4px 12px; width:fit-content; border:1px solid var(--line); border-radius:20px; background:var(--soft); font-size:12px; }
.global-search-sender-chip span { min-width:0; overflow-wrap:anywhere; }
.global-search-sender-chip .icon-button { width:28px; height:28px; flex-shrink:0; }
.global-search-sender-panel { padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--soft); display:grid; gap:8px; }
.global-search-sender-heading { display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.global-search-sender-heading .icon-button { width:28px; height:28px; }
.global-search-sender-panel > p { margin:0; font-size:11px; line-height:1.5; }
.global-search-sender-results { display:grid; gap:4px; max-height:200px; overflow-y:auto; overscroll-behavior:contain; }
.global-search-sender-result { display:flex; align-items:center; gap:10px; border:1px solid transparent; background:var(--paper); color:var(--ink); border-radius:10px; padding:9px; text-align:left; cursor:pointer; min-width:0; }
.global-search-sender-result:hover,.global-search-sender-result:focus-visible { border-color:var(--line); background:var(--soft); }
.global-search-sender-initial { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--line); color:var(--ink); font-size:14px; }
.global-search-sender-identity { display:grid; gap:3px; min-width:0; overflow-wrap:anywhere; }
.global-search-sender-identity strong { font-size:13px; }.global-search-sender-identity > span { font-size:11px; }
.global-search-sender-footer { display:flex; gap:8px; justify-content:center; }.global-search-sender-footer:empty { display:none; }
.global-search-details { border-top:1px solid var(--line); padding-top:10px; }
.global-search-details > summary { color:var(--muted); font-size:12px; cursor:pointer; width:fit-content; }
.global-search-details[open] .global-search-filters { padding-top:12px; }
.global-search-actions > button { margin-left:0; }.global-search-actions > .primary-button { margin-left:auto; }
#global-search-clear { min-height:44px; padding:8px 12px; font-size:12px; }
@media (max-width:600px) {
  .global-search-sender-results { max-height:160px; }
  .global-search-sender-chip .icon-button,.global-search-sender-heading .icon-button { width:44px; height:44px; }
  .global-search-sender-result { min-height:48px; }
  .global-search-results { max-height:36dvh; }
  .global-search-actions > span { flex-basis:100%; order:3; }
  .global-search-card { padding:16px; }
}

/* Storage observations are aggregate-only and remain readable on narrow screens. */
.admin-storage-period { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.admin-storage-period .active { border-color:var(--brand); color:var(--brand); background:var(--brand-soft); }
.admin-storage-section { padding:20px 0; border-bottom:1px solid var(--line); min-width:0; }
.admin-storage-section h3 { margin:0 0 12px; }
.admin-storage-section .admin-storage-grid { grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); margin-top:12px; }
.admin-storage-grid .admin-stat-card { min-width:0; }
.admin-storage-grid strong,.admin-storage-grid small { overflow-wrap:anywhere; }
.admin-storage-grid small { display:block; margin-top:10px; line-height:1.6; }
.admin-storage-meter { display:block; width:100%; height:14px; margin-top:18px; accent-color:var(--brand); }
.admin-storage-preview { color:var(--brand); font-size:12px; font-weight:600; }
.admin-storage-unavailable,.admin-storage-warning { padding:14px 16px; border:1px solid var(--line); border-radius:10px; line-height:1.7; background:var(--paper); }
.admin-storage-warning { border-left:3px solid var(--brand); }
@media (max-width:400px) { .admin-storage-period { gap:8px; } .admin-storage-period > span { flex-basis:100%; } }

/* Admission controls preserve an accessible narrow-screen reading order. */
.group-admission-entries, .group-join-toolbar, .group-join-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.group-join-dialog { width:min(680px, calc(100vw - 24px)); }
.group-join-card { width:100%; }
.group-join-toolbar { justify-content:space-between; margin:18px 0 12px; }
.group-join-toolbar .field-label { flex:1; min-width:150px; }
.group-join-content { display:grid; gap:12px; margin:12px 0; }
.group-join-row, .group-join-pending { border:1px solid var(--line); border-radius:16px; padding:16px; min-width:0; }
.group-join-pending { background:var(--soft); }
.group-join-row-heading { display:flex; gap:12px; justify-content:space-between; align-items:flex-start; }
.group-join-row-heading strong { overflow-wrap:anywhere; }
.group-join-state { color:var(--muted); font-size:12px; white-space:nowrap; }
.group-join-message { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.group-join-actions { margin-top:12px; }
.invitation-create-form .invitation-approval-option { display:flex; grid-column:1 / -1; flex-direction:row; align-items:center; gap:10px; }
.invitation-create-form .invitation-approval-option input { width:18px; min-height:18px; height:18px; flex:0 0 18px; }
@media (max-width:480px) { .group-join-row, .group-join-pending { padding:12px; } .group-join-toolbar { align-items:flex-end; } .group-join-actions button { flex:1; } }

.group-creation-usage { display:flex; align-items:center; gap:12px; padding:12px 14px; margin:12px 0; border:1px solid var(--line); border-radius:12px; background:var(--soft); }
.group-creation-usage > p { flex:1; margin:0; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.group-creation-usage > button { flex:0 0 auto; }
.group-search-heading { margin:12px 12px 6px; color:var(--muted); font-size:12px; letter-spacing:.03em; }
.group-search-section + .muted, #group-search-results > .muted, #group-search-results > .form-error { margin:8px 12px; font-size:12px; line-height:1.7; }
.contact-preference-notice { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
@media (max-width:480px) { .group-creation-usage { align-items:flex-start; flex-direction:column; } }