/* Stable right-hand communication controls and quiet semantic accents. */
:root{--chat-accent:#17735b;--chat-badge:#14644f;--notice-badge:#a34340}
html[data-theme=dark]{--chat-accent:#92d4bb;--chat-badge:#38785f;--notice-badge:#a75f59}
html body .office-tab-strip{overflow:hidden;gap:4px}
html body .office-tab-strip>button:nth-last-child(n){margin-left:0;flex-shrink:0}
html body .office-tab-strip>span:not(.office-top-actions){flex:0 1 180px;min-width:48px;overflow:hidden;display:flex}
html body .office-tab-strip>span:not(.office-top-actions)>button:first-child{min-width:0;flex:1}
html body .office-tab-strip>span:not(.office-top-actions)>button:last-child:not(:first-child){flex:none;padding-inline:6px}
html body .office-tab-strip>.office-top-actions{display:flex;flex:0 0 auto;align-items:center;gap:6px;margin-left:auto;padding-left:8px;border-left:1px solid var(--line)}
html body .office-top-actions button{display:inline-flex;gap:7px;align-items:center;justify-content:center;margin:0;min-height:30px;padding:5px 10px;border:1px solid var(--line);background:var(--rail-raised);color:var(--rail-ink);border-radius:6px}
html body .office-top-actions #office-chat-button{border-color:color-mix(in srgb,var(--chat-accent) 48%,var(--line));background:color-mix(in srgb,var(--chat-accent) 16%,var(--rail));color:#dcf4eb;font-weight:650}
html body .office-top-actions #office-chat-button.has-unread{border-color:var(--chat-accent)}
.office-count{font:650 10px/18px 'Segoe UI',sans-serif;min-width:18px;height:18px;padding:0 5px;border-radius:10px;display:inline-grid;place-items:center;background:var(--notice-badge);color:#fff}
#office-chat-button .office-count{background:var(--chat-badge)}
.office-count[hidden],.unread-badge[hidden]{display:none!important}
html body #main-nav [data-page=chat]{--section-accent:var(--chat-accent)}
html body #main-nav [data-page=tasks]{--section-accent:#ad8646}
html body #main-nav [data-page=crm]{--section-accent:#6ba2c6}
html body #main-nav [data-page=quotes]{--section-accent:#a493c4}
html body #main-nav :is([data-page=chat],[data-page=tasks],[data-page=crm],[data-page=quotes]) i{color:var(--section-accent);background:color-mix(in srgb,var(--section-accent) 11%,transparent);border-radius:5px;height:24px;align-items:center}
html body #main-nav [data-page=chat]{border-left:2px solid color-mix(in srgb,var(--chat-accent) 55%,transparent)}
html body #main-nav .unread-badge,.unread-badge{font-size:10px;line-height:18px;min-width:18px;padding:0 5px;border-radius:10px;background:var(--chat-badge);color:#fff;flex-shrink:0}
html body #main-nav .unread-badge{margin-left:auto}
html body .office-drawer:not([hidden]){width:min(420px,100vw);top:40px}
html body.drawer-open>.workspace{margin-right:420px}
html body.drawer-open>.office-tab-frame{width:calc(100% - 420px)}
html body .office-drawer>header{flex-wrap:wrap;gap:6px;padding:9px 12px}
html body .office-drawer>header h2{font-size:15px;min-width:110px}
html body .office-drawer>header button{min-height:30px;font-size:11px;padding:5px 8px}
@media(max-width:1100px){html body.drawer-open>.workspace{margin-right:0}html body.drawer-open>.office-tab-frame{width:100%}html body .office-drawer:not([hidden]){box-shadow:-10px 0 35px #0003}}
@media(max-width:600px){html body .office-top-actions .office-action-label{display:none}html body .office-top-actions button{padding:6px 8px;min-height:34px}html body .office-tab-strip>.office-top-actions{gap:4px;padding-left:4px}}

/* Message actions remain visible and keyboard reachable, including in the drawer. */
html body #main .chat-header-actions{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap}
html body #main .chat-header-actions .quiet{font-size:11px;min-height:30px;padding:5px 8px}
html body #main .chat-top{flex-wrap:wrap}
html body #main .chat-top>div:has(#room-title){flex:1;min-width:120px}
html body #main .chat-message-tools{display:flex;align-items:center;justify-content:flex-end;gap:5px;clear:both;margin-top:5px}
html body #main .bubble .chat-message-tools button{float:none;min-height:26px;min-width:26px;padding:3px 6px;font-size:11px;color:var(--link);border:1px solid transparent;border-radius:5px}
html body #main .bubble .chat-message-tools button:hover{background:var(--hover);border-color:var(--line)}
html body #main .chat-forward-origin{font-size:11px;color:var(--link);border-left:2px solid var(--focus);padding-left:8px;margin-bottom:5px}
html body #main .chat-file{display:grid;gap:5px;margin:8px 0;min-width:0}
html body #main .chat-file-name{font-size:12px}
html body #main .chat-file-link{font-size:11px;overflow-wrap:anywhere;color:var(--link)}
html body #main .chat-audio{width:300px;max-width:100%;height:38px;margin:0}
html body #main .chat-image{max-width:min(320px,100%);max-height:280px;object-fit:contain;border-radius:7px;display:block}
html body #main .chat-reactions{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px;clear:both}
html body #main .bubble .chat-reactions button{float:none;font-size:12px;padding:3px 7px;border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--ink)}
html body #main .bubble .chat-reactions button.chosen{background:var(--selected);border-color:var(--focus)}
html body #main .chat-deleted .message-body{font-style:italic;color:var(--muted)}
html body #main .chat-selected{outline:2px solid var(--focus);outline-offset:2px}
html body #main .chat-select-message{float:left;width:17px;height:17px;margin-right:7px}
html body #main .chat-selection-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--selected);flex:none}
html body #main .chat-selection-bar[hidden]{display:none}
html body #main .chat-selection-bar strong{font-size:12px;margin-right:auto}
html body #main .chat-tools-full>label:has(#chat-find),html body #main .chat-tools-full>#chat-bottom,html body #main .chat-tools-full>.muted{display:none}
html body #main .chat-tools-full{gap:5px;padding:0 0 6px;align-items:center}
html body #main .chat-tools-full>.quiet{min-height:30px;font-size:12px;padding:5px 8px;height:auto}
html body #main .chat-record-status{font-size:11px;color:var(--danger);overflow-wrap:anywhere}
html body #main .chat-tools-full button[aria-pressed=true]{border-color:var(--danger);color:var(--danger)}
html body #main .chat-pending-files{display:grid;gap:6px;max-height:180px;overflow:auto;margin-bottom:6px}
html body #main .chat-pending-files:empty{display:none}
html body #main .chat-pending-file{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:5px;align-items:center;padding:6px 9px;background:var(--raised);border:1px solid var(--line);border-radius:6px}
html body #main .chat-pending-file>span{font-size:11px;overflow-wrap:anywhere}
html body #main .chat-pending-file>.quiet{min-height:26px;height:26px;padding:2px}
html body #main .chat-pending-file audio{grid-column:1/-1;height:35px;max-width:100%;width:300px}
html body #main #reply-preview .quote{display:flex;gap:7px;align-items:center;margin:0 0 7px;font-size:11px;max-height:70px}
html body #main #reply-preview .quote span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
html body #main #reply-preview .quote button{min-height:24px;height:auto;padding:3px 7px}
html body .chat-action-dialog{width:min(600px,94vw);max-height:90dvh;overflow:auto;padding:18px;background:var(--surface);color:var(--ink)}
html body .chat-action-dialog .section-head{margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
html body .chat-action-dialog h2{font-size:18px;margin:0}
html body .chat-action-dialog label{font-size:12px}
html body .chat-action-dialog :is(input,select,textarea){width:100%;padding:8px 10px;font-size:13px;margin:5px 0 12px;border-radius:6px!important}
.chat-action-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.chat-action-list>button{text-align:left;font-size:12px;min-height:36px}
.chat-reaction-picker{display:flex;gap:7px;justify-content:space-around;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.chat-reaction-picker button{background:var(--raised);border:1px solid var(--line);border-radius:7px;font-size:24px;min-width:42px;min-height:42px;padding:4px}
.chat-search-result{display:grid;gap:5px;width:100%;text-align:left;padding:11px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink)}
.chat-search-result span,.chat-original-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.5}
.chat-search-result small{font-size:11px;color:var(--muted)}
@media(max-width:760px){html body #main .bubble{max-width:95%;min-width:0}html body #main .chat-tools-full>.quiet,html body #main .chat-header-actions .quiet{min-height:40px}html body .chat-action-dialog :is(input,select,textarea){font-size:16px}.chat-action-list{grid-template-columns:1fr}html body #main .bubble .chat-message-tools button{min-height:32px}}

/* The drawer owns its viewport; only message history scrolls. */
html body.conversation-panel{height:100dvh;overflow:hidden!important}
html body.conversation-panel>.workspace{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
html body.conversation-panel>.workspace>header,html body.conversation-panel #main>.chat-note,html body.conversation-panel #main>.page-head,html body.conversation-panel #main>p,html body.conversation-panel #main>button{display:none!important}
html body.conversation-panel #main{padding:8px!important;margin:0!important;flex:1;min-height:0;height:100%;overflow:hidden}
html body.conversation-panel #main .chat-shell{height:100%!important;max-height:100%!important;min-height:0!important;grid-template-columns:1fr}
html body.conversation-panel .chat-pane{min-height:0;overflow:hidden}
html body.conversation-panel .chat-top,html body.conversation-panel .composer,html body.conversation-panel .chat-sync{flex-shrink:0}
html body.conversation-panel #main .chat-top{padding:8px}
html body.conversation-panel .chat-top>div>p{display:none}

/* Room lists use the same palette as messages in every theme. */
html[data-theme] body #main .room-item{background:var(--panel);color:var(--ink);border-color:var(--line)}
html[data-theme] body #main .room-item:hover{background:var(--hover)}
html[data-theme] body #main .room-item.active{background:var(--selected);color:var(--ink);box-shadow:inset 3px 0 var(--focus)}
html[data-theme] body #main .room-item strong{color:var(--ink)}
html[data-theme] body #main .room-item small{color:var(--muted)}
@media(max-height:760px){html body:not(.conversation-panel) #main .chat-shell{min-height:240px}html body #main .chat-top{padding:7px 10px}html body #main .composer{padding:7px 10px}}

html[data-theme] body #main .bubble .quote{color:var(--ink);border-color:var(--focus);background:var(--raised);opacity:.95;padding:6px 9px;border-radius:4px}

.chat-video{display:block;width:100%;max-width:360px;max-height:280px;border-radius:12px;background:#111}.chat-image{max-width:min(320px,100%);max-height:280px;object-fit:contain;border-radius:10px}