/* A compact operational shell and an independently scrolling messaging workspace. */
.ui-icon { display:inline-block; width:20px; height:20px; flex:0 0 20px; background:currentColor; mask:var(--icon) center/contain no-repeat; }
.ui-icon[data-icon="headset"] { --icon:url('./icons/headset.svg'); }
.ui-icon[data-icon="rotate-ccw"] { --icon:url('./icons/rotate-ccw.svg'); }
.ui-icon[data-icon="shopping-bag"] { --icon:url('./icons/shopping-bag.svg'); }
.ui-icon[data-icon="clipboard-check"] { --icon:url('./icons/clipboard-check.svg'); }
.ui-icon[data-icon="wallet"] { --icon:url('./icons/wallet.svg'); }
.ui-icon[data-icon="messages-square"] { --icon:url('./icons/messages-square.svg'); }
.ui-icon[data-icon="sliders-horizontal"] { --icon:url('./icons/sliders-horizontal.svg'); }
.ui-icon[data-icon="users"] { --icon:url('./icons/users.svg'); }
.ui-icon[data-icon="image"] { --icon:url('./icons/image.svg'); }
.ui-icon[data-icon="server"] { --icon:url('./icons/server.svg'); }
.ui-icon[data-icon="menu"] { --icon:url('./icons/menu.svg'); }
.ui-icon[data-icon="x"] { --icon:url('./icons/x.svg'); }
.ui-icon[data-icon="search"] { --icon:url('./icons/search.svg'); }
.ui-icon[data-icon="plus"] { --icon:url('./icons/plus.svg'); }
.ui-icon[data-icon="send"] { --icon:url('./icons/send.svg'); }
.ui-icon[data-icon="copy"] { --icon:url('./icons/copy.svg'); }
.ui-icon[data-icon="chevron-left"] { --icon:url('./icons/chevron-left.svg'); }
.ui-icon[data-icon="refresh-cw"] { --icon:url('./icons/refresh-cw.svg'); }
.ui-icon[data-icon="log-out"] { --icon:url('./icons/log-out.svg'); }
.ui-icon[data-icon="zap"] { --icon:url('./icons/zap.svg'); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.shell { grid-template-columns:240px minmax(0,1fr); }
.sidebar { padding:24px 16px 16px; gap:24px; }
.brand strong { color:var(--ink); }
.brand > div { min-width:0; }
.nav { min-height:0; overflow-y:auto; }
.nav-section { letter-spacing:0; font-size:11px; }
.nav button, #logout-btn, #refresh-btn, .nav-toggle { display:flex; align-items:center; gap:12px; }
.nav button { font-weight:500; min-height:44px; }
.nav button.active { border-color:transparent; box-shadow:none; font-weight:700; }
#logout-btn { margin-top:auto; min-height:44px; }
.nav-toggle { display:none; }
.topbar { border:0; border-radius:0; background:transparent; box-shadow:none; padding:0 0 24px; }
.topbar h1 { font-size:26px; letter-spacing:0; }
.topbar p { font-size:14px; }
.workspace { padding:28px 32px; }
button { transition:background-color 140ms ease, border-color 140ms ease, transform 140ms ease; }
button:not(:disabled):active { transform:scale(.98); }
.view:not(.hidden) { animation:workspace-enter 180ms ease-out both; }
@keyframes workspace-enter { from { opacity:.8; transform:translateY(4px); } to { opacity:1; transform:none; } }
#view-chat { background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.chat-layout { gap:0; height:calc(100dvh - 158px); min-height:440px; grid-template-columns:310px minmax(0,1fr); }
.chat-directory { display:flex; flex-direction:column; min-height:0; padding:16px 0 0; max-height:none; overflow:hidden; }
.chat-directory-tabs { display:flex; padding:0 16px 16px; gap:8px; }
.chat-directory-tabs button { display:flex; align-items:center; justify-content:center; gap:8px; flex:1; color:var(--muted); background:#f4f5f7; border-color:transparent; font-weight:600; }
.chat-directory-tabs button[aria-pressed="true"] { background:var(--primary-soft); color:var(--primary-dark); }
#chat-search { margin:0 16px 12px; }
.chat-search-field { display:flex; align-items:center; padding-left:10px; border:1px solid var(--line); border-radius:8px; color:var(--muted); gap:4px; }
.chat-search-field input { width:100%; min-width:0; padding:0 4px; border:0; font-size:13px; }
.chat-search-field button { border:0; }
.chat-unread-filter { display:flex; align-items:center; gap:8px; margin:0 16px 12px; font-size:13px; color:var(--muted); cursor:pointer; }
.chat-unread-filter input { width:16px; min-height:16px; height:16px; accent-color:var(--primary); }
.chat-directory-results { overflow:auto; flex:1; padding:0 8px 16px; overscroll-behavior:contain; }
.chat-person.ghost { display:grid; grid-template-columns:44px minmax(0,1fr) auto; padding:14px 8px; gap:10px; border:0; border-radius:8px; margin:2px 0; align-items:center; }
.chat-person[aria-current="true"] { background:var(--primary-soft); }
.chat-person-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.chat-person strong { font-size:13px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-person span.chat-person-copy { white-space:normal; }
.chat-person-copy > span { font-weight:400; }
.chat-person small { font-size:11px; background:var(--primary); color:#fff; border-radius:50%; min-width:22px; height:22px; display:grid; place-items:center; }
.chat-avatar { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#e9eff6; color:#365473; font-size:14px; font-weight:700; flex-shrink:0; position:relative; overflow:hidden; }
.chat-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.chat-person span.chat-avatar { color:#365473; }
.chat-conversation { min-width:0; min-height:0; display:flex; flex-direction:column; position:relative; }
.chat-person-header { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); min-height:80px; }
.chat-peer-text { min-width:0; }
.chat-person-header h2 { font-size:15px; margin:0; line-height:1.4; overflow-wrap:anywhere; }
#chat-peer-line { margin:4px 0 0; color:var(--muted); font-size:12px; }
#chat-back { display:none; flex-shrink:0; }
.chat-messages { flex:1; height:auto; min-height:0; background:#f6f8fa; padding:24px; gap:12px; overscroll-behavior:contain; scrollbar-width:thin; overflow-anchor:none; }
.chat-message-row { display:flex; align-items:flex-end; gap:8px; max-width:min(92%,640px); }
.chat-message-row.mine { align-self:flex-end; }
.chat-message-row > .chat-avatar { width:28px; height:28px; font-size:10px; }
.chat-bubble { max-width:100%; padding:12px 14px 6px; border-color:#e0e6ed; box-shadow:0 1px 2px #192b3d05; }
.chat-bubble p { font-size:14px; line-height:1.55; }
.chat-bubble.mine { background:#e9f3ff; border-color:#d6e7f8; }
.chat-bubble footer { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.chat-copy.ghost { display:inline-flex; align-items:center; justify-content:center; width:28px; min-height:28px; padding:0; color:var(--muted); border:0; background:transparent; }
.chat-copy .ui-icon { width:14px; height:14px; flex-basis:14px; }
.chat-day { align-self:center; color:var(--muted); font-size:11px; font-weight:600; margin:8px 0; }
.chat-arrival { animation:workspace-enter 180ms ease-out both; }
#chat-older { margin:8px auto; font-size:12px; flex-shrink:0; }
#chat-new-messages { position:absolute; bottom:148px; align-self:center; box-shadow:0 2px 10px #17203312; font-size:12px; }
#chat-feedback { margin:0; font-size:13px; max-height:90px; overflow:auto; flex-shrink:0; }
#chat-feedback:not(:empty) { padding:12px 20px; background:#fff8e9; border-top:1px solid #f0d8a9; }
#chat-compose { margin:0; padding:16px 16px 0; gap:8px; border-top:1px solid var(--line); flex-shrink:0; }
#chat-compose textarea { display:block; min-height:54px; max-height:120px; resize:none; font-size:14px; line-height:1.5; background:#f8fafc; }
#chat-compose > button { display:grid; place-items:center; width:44px; min-height:44px; margin-bottom:5px; flex-shrink:0; }
.chat-compose-tools { display:flex; align-items:center; padding:8px 16px 12px; gap:8px; font-size:11px; color:var(--muted); }
.chat-quick-label { display:flex; align-items:center; min-width:0; gap:4px; }
.chat-quick-label .ui-icon { width:16px; height:16px; flex-basis:16px; }
#chat-quick-reply { font-size:12px; min-height:32px; width:100%; max-width:170px; border:0; background:transparent; padding:0; }
#chat-character-count { margin-left:auto; white-space:nowrap; }
@media(max-width:1100px) { .workspace { padding:24px 20px; } .chat-layout { grid-template-columns:270px minmax(0,1fr); } }
@media(max-width:980px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .sidebar { position:sticky; padding:12px 16px; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
  .brand-mark { width:40px; height:40px; flex:0 0 40px; }
  .brand strong { font-size:16px; } .brand small { max-width:200px; }
  .nav-toggle { display:flex; grid-row:1; grid-column:2; min-height:40px; }
  .sidebar > #logout-btn { display:none; grid-column:1/-1; grid-row:auto; margin:0; }
  .sidebar .nav { display:none; }
  .sidebar.nav-open { max-height:100dvh; overflow:auto; }
  .sidebar.nav-open .nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; grid-column:1/-1; }
  .sidebar.nav-open #logout-btn { display:flex; }
  .nav-section { display:block; grid-column:1/-1; margin:8px 10px 0; }
  .nav button { min-width:0; white-space:normal; text-align:left; padding:8px; }
  .nav button.active { box-shadow:none; }
  .workspace { padding:20px 16px; }
  .topbar { flex-direction:row; align-items:center; padding-bottom:16px; }
  .topbar h1 { font-size:22px; } .topbar p { margin-bottom:0; }
  .chat-layout { height:calc(100dvh - 215px); }
}
@media(max-width:700px) {
  .chat-layout { grid-template-columns:minmax(0,1fr); height:calc(100dvh - 212px); min-height:360px; }
  .chat-directory { border:0; max-height:none; padding-right:0; }
  .chat-layout .chat-conversation { display:none; }
  .chat-layout.thread-open .chat-directory { display:none; }
  .chat-layout.thread-open .chat-conversation { display:flex; }
  #chat-back { display:grid; place-items:center; }
  .chat-person-header { padding:12px; gap:8px; min-height:72px; }
  .chat-messages { padding:16px 12px; }
  .chat-message-row { max-width:96%; }
  .topbar p { display:none; }
  #refresh-btn { font-size:12px; gap:6px; }
  .chat-compose-tools { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) {
  .view:not(.hidden), .chat-arrival { animation:none; }
  button { transition:none; }
  button:not(:disabled):active { transform:none; }
}