/* Aligned chat headers, navigation rail and compact composer. */
.brand-intro { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.brand-intro img { width: 90px; height: 90px; border-radius: 22px; }
.brand-intro strong { font-size: 28px; color: var(--text); }
.brand-intro small { position: absolute; bottom: max(40px,env(safe-area-inset-bottom)); color: var(--muted); font-size: 13px; }
.location-card { width: 256px; max-width: 100%; position: relative; border-radius: 9px; overflow: hidden; }
.location-map { display: block; height: 128px; position: relative; overflow: hidden; background: #dfe9db; }
.location-map img { position: absolute; width: 256px; height: 256px; max-width: none; }
.location-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-100%); font-size: 30px; filter: drop-shadow(0 2px 2px #0005); }
.map-credit { position: absolute; top: 115px; right: 0; font-size: 8px; line-height: 13px; padding: 0 3px; background: #ffffffe0; color: #42554c; }
.location-label { display: grid; gap: 4px; color: var(--text); text-decoration: none; padding: 9px 2px 2px; }
.location-label strong { font-size: 13px; }.location-label span,.location-label small { font-size: 11px; color: var(--muted); }
.team-poll-option { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; border: 0; background: none; padding: 5px 0; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.team-poll-option[aria-pressed=true] { color: var(--p); }
.team-poll-option i { grid-column: 1/-1; height: 5px; border-radius: 4px; background: linear-gradient(to right,var(--p) var(--vote),var(--fill) var(--vote)); }
.quick-choices { display: grid; max-height: 50dvh; overflow-y: auto; }
body.inbox-page { --chat-list-w: clamp(340px, 30vw, 480px); --chat-rail-w: 64px; --chat-canvas: #efeae2; --chat-out: #d9fdd3; font-family: "Segoe UI", Helvetica, Arial, sans-serif; }
body.inbox-page .main-col { padding-left: var(--chat-rail-w); position: relative; }
.chat-rail { position: absolute; inset: 0 auto 0 0; z-index: 40; width: var(--chat-rail-w); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 8px; background: var(--fill); border-right: 1px solid var(--line); }
.chat-rail .grow { flex: 1; }
.chat-rail .icon-btn { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; color: var(--muted); font-size: 23px; text-decoration: none; }
.chat-rail .icon-btn.on { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
body.inbox-page .topbar { position: absolute; inset: 0 auto auto var(--chat-rail-w); width: var(--chat-list-w); height: 64px; min-height: 64px; padding: 12px 16px; background: var(--card); border-bottom: 0; z-index: 35; }
body.inbox-page .topbar .menu-btn, body.inbox-page .topbar [data-chat-theme], body.inbox-page .topbar-title { display: none; }
body.inbox-page .topbar-actions { margin-left: auto; gap: 4px; }
body.inbox-page .topbar-actions .btn { width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 50%; box-shadow: none; }
body.inbox-page .topbar-actions .btn span { display: none; }
body.inbox-page .chat-tabs { gap: 0; align-items: center; }
body.inbox-page .chat-tabs a { padding: 7px 8px; font-size: 13px; background: none; }
body.inbox-page .chat-tabs a.on { font-size: 19px; color: var(--p); padding-left: 0; }
body.inbox-page .ib, body.inbox-page .ib.info-open { grid-template-columns: var(--chat-list-w) minmax(0, 1fr); }
body.inbox-page .ib.info-open { grid-template-columns: var(--chat-list-w) minmax(0, 1fr) 320px; }
.ib-list { padding-top: 64px; background: var(--card); }
.ib-tools { padding: 4px 16px 12px; gap: 10px; border: 0; }
.ib-tools .search { background: var(--fill); border-radius: 22px; padding: 0 12px; gap: 10px; }
body.inbox-page #main .ib-tools .search input { border: 0; background: transparent; padding: 11px 0; border-radius: 0; font-size: 14px; outline: none; box-shadow: none; }
.ib-filters { gap: 7px; flex-wrap: wrap; }
.ib-filters .chip { padding: 6px 11px; min-height: 31px; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 20px; font-size: 13px; }
.ib-filters .chip.on { background: color-mix(in srgb, var(--p) 13%, var(--card)); color: var(--p); border-color: color-mix(in srgb, var(--p) 24%, var(--line)); }
.ib-conv { min-height: 84px; padding: 12px 14px; border: 0; position: relative; align-items: center; gap: 14px; }
.ib-conv::after { content: ""; position: absolute; left: 78px; right: 14px; bottom: 0; border-bottom: 1px solid var(--line-2); }
.ib-conv.on { background: var(--fill); box-shadow: none; border-radius: 8px; }
.ib-conv .av { width: 48px; height: 48px; }
.ib-conv-top b { font-size: 15px; font-weight: 500; }
.ib-conv-top time { font-size: 11px; }
.ib-conv-meta { min-height: 15px; }
.ib-conv-meta em { font-size: 10px; padding: 2px 5px; }
.ib-thread { background: var(--chat-canvas) url('../chat-wallpaper.svg') repeat; background-size: 230px 230px; }
.ib-head { min-height: 64px; flex: none; padding: 9px 20px; background: var(--card); gap: 12px; }
.ib-head .av { width: 40px; height: 40px; }
.ib-who b { font-weight: 600; font-size: 15px; }
.ib-who small { font-size: 12px; }
.ib-head-actions { gap: 10px; }
.ib-head-actions select { font-size: 12px; max-width: 150px; }
.ib-status { border-radius: 18px; }
.ib-status button { padding: 9px 10px; font-size: 11px; }
.ib-banner p { padding: 6px 20px; font-size: 12px; }
.ib-msgs { padding: 16px clamp(16px, 4vw, 72px) 12px; gap: 4px; }
.day-sep span { border-radius: 7px; padding: 6px 11px; font-size: 11px; font-weight: 500; }
.m .bub { border-radius: 8px; padding: 7px 10px 6px; max-width: min(580px, 82%); box-shadow: 0 1px 1px #00000016; }
.m.in .bub { border-top-left-radius: 0; }
.m.out .bub { border-top-right-radius: 0; background: var(--chat-out); }
.ib:not(.tc) .m.out.src-agent .m-who { display: block; }
.m-txt { font-size: 14px; line-height: 1.5; }
.m-meta { font-size: 10.5px; }
.mm-download { font-size: 11px; padding: 5px 1px 0; opacity: .8; text-decoration: none; }
.mm-img { cursor: zoom-in; display: block; }
.ib-compose { border: 0; background: transparent; padding: 4px 14px 12px; position: relative; flex: none; }
.ib-mode { padding: 3px 12px 5px; gap: 4px; margin: 0; min-height: 28px; }
.ib-mode button { font-size: 11px; border-radius: 14px; padding: 4px 9px; background: color-mix(in srgb, var(--card) 85%, transparent); }
.ib-mode button.on { background: var(--card); color: var(--p); }
.ib-hint { display: none; }
.ib-input { align-items: center; padding: 5px 8px; border-radius: 28px; background: var(--card); gap: 3px; box-shadow: 0 1px 3px #0000000d; }
.inbox-page .ib-input textarea { min-height: 42px; max-height: 140px; padding: 10px 6px; border: 0; border-radius: 0; background: transparent; font: 14px/1.5 "Segoe UI", Helvetica, Arial, sans-serif; box-shadow: none; outline: none; }
.ib-input .icon-btn { width: 38px; min-width: 38px; height: 38px; min-height: 38px; border: 0; border-radius: 50%; color: var(--text); background: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 8px; }
.ib-input .icon-btn svg, .compose-action svg { width: 22px; height: 22px; flex: none; }
.ib-input .icon-btn:hover { background: var(--fill); }
.ib-input .ib-record { background: transparent; color: var(--text); }
.ib-input .ib-send { width: 38px; height: 38px; min-height: 38px; border-radius: 50%; box-shadow: none; display: none; flex: none; }
.ib-compose.has-content .ib-send { display: inline-flex; align-items: center; justify-content: center; }
.ib-compose.has-content .ib-record, .ib-compose.note-mode .ib-record { display: none; }
.ib-compose.note-mode .ib-input { background: color-mix(in srgb, var(--gold) 12%, var(--card)); }
.ib-file { display: flex; margin: 0 10px 8px; max-width: calc(100% - 20px); background: var(--card); padding: 6px 8px 6px 12px; border-radius: 12px; }
.ib-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-menu, .compose-emojis { position: absolute; left: 20px; bottom: calc(100% + 4px); background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 30px #00000025; z-index: 20; padding: 8px; }
.compose-menu { width: 250px; max-width: calc(100% - 40px); display: grid; gap: 3px; }
.compose-action { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--text); text-align: left; font-size: 14px; cursor: pointer; }
.compose-action:hover { background: var(--fill); }
.compose-emojis { display: grid; grid-template-columns: repeat(8, 32px); gap: 3px; max-width: calc(100% - 32px); }
.compose-emojis button { width: 32px; height: 36px; border: 0; border-radius: 7px; background: none; font-size: 23px; cursor: pointer; }
.compose-emojis button:hover { background: var(--fill); }
.compose-menu[hidden], .compose-emojis[hidden], .chat-rail[hidden] { display: none !important; }
.voice-player { width: 280px; max-width: 100%; min-width: 180px; display: flex; align-items: center; gap: 10px; padding: 9px 0 1px; }
.voice-play, .voice-speed { border: 0; background: none; color: var(--muted); cursor: pointer; flex: none; padding: 0; }
.voice-play { width: 32px; height: 36px; }
.voice-play svg { width: 24px; height: 24px; }
.voice-track { flex: 1; min-width: 0; display: grid; gap: 7px; }
body.inbox-page #main .voice-track input[type=range] { appearance: none; -webkit-appearance: none; height: 4px; padding: 0; margin: 0; border: 0; border-radius: 4px; width: 100%; background: linear-gradient(to right, #53bdeb var(--progress, 0%), color-mix(in srgb, var(--text) 16%, transparent) var(--progress, 0%)); cursor: pointer; box-shadow: none; }
.voice-track input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: #53bdeb; border-radius: 50%; }
.voice-track input::-moz-range-thumb { width: 12px; height: 12px; border: 0; background: #53bdeb; border-radius: 50%; }
.voice-track small { font-size: 10.5px; color: var(--muted); min-height: 14px; }
.voice-speed { border-radius: 12px; padding: 4px 6px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--text) 7%, transparent); }
.voice-player audio[hidden] { display: none !important; }
.media-viewer { border: 0; padding: 0; margin: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; background: #111b21; color: #e9edef; }
.media-viewer[open] { display: flex; flex-direction: column; }
.media-viewer::backdrop { background: #111b21e8; }
.media-viewer > header { display: flex; align-items: center; gap: 20px; padding: 10px 22px; min-height: 64px; background: #202c33; }
.media-viewer strong { flex: 1; font: 500 15px/1.4 "Segoe UI", sans-serif; }
.media-viewer .viewer-download { color: #e9edef; font-size: 14px; text-decoration: none; padding: 10px; }
.media-viewer button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: none; color: #e9edef; font-size: 32px; cursor: pointer; }
.media-viewer button:hover { background: #ffffff15; }
.media-stage { flex: 1; min-height: 0; padding: 24px; display: flex; justify-content: center; align-items: center; }
.media-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) body.inbox-page { --chat-canvas: #0b141a; --chat-out: #005c4b; } }
:root[data-theme=dark] body.inbox-page { --chat-canvas: #0b141a; --chat-out: #005c4b; }
@media (max-width: 1200px) { body.inbox-page .ib.info-open { grid-template-columns: var(--chat-list-w) minmax(0, 1fr); } }
@media (max-width: 960px) {
  body.inbox-page { --chat-rail-w: 0px; }
  body.inbox-page .chat-rail { display: none; }
  body.inbox-page .main-col { padding-left: 0; }
  body.inbox-page .topbar { position: relative; inset: auto; width: 100%; height: 58px; min-height: 58px; padding: 6px 12px; }
  body.inbox-page .topbar .menu-btn, body.inbox-page .topbar [data-chat-theme] { display: inline-flex; }
  body.inbox-page .ib, body.inbox-page .ib.info-open { grid-template-columns: minmax(0, 1fr); }
  .ib-list { padding-top: 0; }
  .ib-tools { padding-top: 8px; }
  .ib-head { padding: 9px 12px; }
  .ib-msgs { padding: 12px 16px; }
  .ib-compose { padding: 2px 8px 8px; }
  .ib-head-actions { gap: 5px; }
  .ib-head-actions select { max-width: 120px; }
}
@media (max-width: 560px) {
  .compose-emojis { grid-template-columns: repeat(6, 32px); }
  .ib-head-actions { width: 100%; justify-content: flex-end; }
  .m .bub { max-width: 92%; }
  .voice-player { width: 230px; min-width: 0; }
  .ib-input .icon-btn { width: 32px; min-width: 32px; padding: 6px; }
}

.voice-draft{padding:10px 14px;background:var(--card);border-radius:16px;margin:6px 10px;max-width:440px}.voice-draft[hidden]{display:none}.voice-draft audio{display:block;width:100%;max-width:100%}

.m-delete{border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;padding:5px 8px;cursor:pointer;float:right}.m-delete:hover{color:var(--bad)}

.is-sending [data-file-clear],.is-sending .compose-action,.is-sending .ib-record{pointer-events:none;opacity:.5}

/* Selected attachment previews stay within the composer on narrow screens. */
.attachment-drafts{max-height:260px;overflow:auto;padding:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:8px;min-width:0}
.attachment-drafts[hidden]{display:none}.draft-mode{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:13px;min-width:0;overflow-wrap:anywhere}
.attachment-draft{position:relative;min-width:0;padding:10px 34px 10px 10px;border:1px solid var(--line,#d9dedc);border-radius:12px;background:var(--card,#fff);display:flex;flex-direction:column;gap:7px}
.attachment-draft img,.attachment-draft video{width:100%;max-height:145px;object-fit:contain;border-radius:8px}.attachment-draft audio{width:100%;min-width:0}.draft-name{font-size:12px;overflow-wrap:anywhere}.attachment-draft button{position:absolute;right:4px;top:4px;width:28px;height:28px;border:0;border-radius:50%;font-size:20px;cursor:pointer}