/* Give the viewport to conversations, keeping the controls readable and close at hand. */
.workspace #main:has(.chat-workspace){padding:12px 18px}
#main:has(.chat-workspace)>.demo-role-bar{padding:4px 10px;margin-bottom:10px;flex-wrap:nowrap;gap:10px}
#main:has(.chat-workspace) .demo-role-caption small{display:none}
#main:has(.chat-workspace) .demo-role-symbol{width:28px;height:28px}
#main:has(.chat-workspace) .demo-role-switch{padding:2px}
#main:has(.chat-workspace) .demo-role-switch button{min-height:36px;padding:6px 12px}
.chat-workspace .thread-list-heading{position:relative;padding:8px 12px;min-height:52px;gap:8px;flex-shrink:0;z-index:8}
.chat-workspace .thread-list-heading h2{font-size:1.1rem;gap:7px;white-space:nowrap}
.chat-workspace .thread-list-heading h2 span{padding:2px 6px}
.chat-heading-actions{display:flex;align-items:center;gap:2px}
.chat-heading-actions .icon-button{display:grid;place-items:center;width:32px;min-width:32px;height:34px;padding:5px;border-radius:9px}
.chat-heading-actions .icon{width:20px;height:20px}
.chat-heading-actions .chat-group-add{color:var(--theme-accent,#236b53);background:var(--theme-surface-muted,#edf4ef)}
.chat-heading-actions .icon-button:hover{background:var(--theme-hover,#e2efdf)}
.chat-start-control>summary{list-style:none;cursor:pointer}
.chat-start-control>summary::-webkit-details-marker{display:none}
.chat-start-control[open]>summary{background:var(--theme-selected,#eaf2e9);color:var(--theme-accent,#236b53)}
.chat-start-options{position:absolute;right:10px;top:calc(100% - 2px);width:calc(100% - 20px);max-width:280px;display:grid;gap:3px;padding:6px;border:1px solid var(--theme-line,#dfe7df);border-radius:13px;background:var(--theme-surface,#fff);box-shadow:0 8px 28px var(--theme-shadow,#183c2924)}
.chat-start-options>button{display:flex;align-items:center;gap:10px;min-height:44px;width:100%;padding:9px 12px;border-radius:8px;color:var(--theme-text,#304638);font-size:.9rem;text-align:left}
.chat-start-options>button>.icon{width:20px;height:20px;flex:none;color:var(--theme-accent,#236b53)}
.chat-start-options>button:hover{background:var(--theme-hover,#edf4ed)}
.chat-start-options>button:disabled{opacity:.5;cursor:default}
.chat-start-control :is(summary,button):focus-visible{outline:2px solid var(--theme-accent-border,#759d87);outline-offset:-2px}
dialog.chat-contacts-dialog{width:31rem;max-height:calc(100dvh - 32px)}
.chat-contacts-dialog .modal-header{padding:22px 24px 18px}
.chat-contacts-dialog .modal-body{padding:18px 20px 20px}
.chat-contact-search{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:1px solid var(--theme-line,#dfe7df);border-radius:11px;background:var(--theme-canvas,#f5f8f4)}
.chat-contact-search>.icon{flex:none;width:19px;height:19px;color:var(--theme-muted,#718477)}
.chat-contact-search input{width:100%;min-width:0;min-height:44px;padding:9px 0;border:0;outline:0;background:transparent;font:inherit;font-size:.95rem;color:var(--theme-text,#304638)}
.chat-contact-search:focus-within{border-color:var(--theme-accent-border,#759d87);box-shadow:0 0 0 2px var(--theme-shadow,#3366440c)}
.chat-contact-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:12px 0 10px}
.chat-contact-count{flex-shrink:0;margin:0 4px;font-size:.8rem;color:var(--theme-muted,#718477)}
.chat-contact-filters{display:flex;align-items:center;gap:2px;padding:3px;border-radius:10px;background:var(--theme-surface-muted,#f1f5f1)}
.chat-contact-filters button{min-height:32px;padding:5px 8px;border-radius:7px;white-space:nowrap;font-size:.74rem;line-height:1.4;color:var(--theme-muted,#718477);transition:background .15s,color .15s}
.chat-contact-filters button:hover:not(:disabled){background:var(--theme-hover,#e7eee7);color:var(--theme-text,#304638)}
.chat-contact-filters button[aria-pressed="true"]{background:var(--theme-selected,#dfece2);color:var(--theme-accent,#27654a);font-weight:600}
.chat-contact-filters button:focus-visible{outline:2px solid var(--theme-accent-border,#759d87);outline-offset:-2px}
.chat-contact-filters button:disabled{opacity:.45;cursor:default}
.chat-contact-list{max-height:min(25rem,50dvh);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable}
.chat-contact-group+.chat-contact-group{margin-top:10px}
.chat-contact-group h3{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:7px;margin:0;padding:10px 8px 8px;background:var(--theme-surface,#fff);color:var(--theme-muted,#718477);font-size:.76rem;font-weight:600;line-height:1.4}
.chat-contact-group h3 span{padding:1px 6px;border-radius:5px;background:var(--theme-surface-muted,#f1f5f1);font-size:.7rem;font-weight:500}
.chat-contact{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:10px 8px;border-radius:11px;text-align:left;color:var(--theme-text,#304638)}
.chat-contact:hover,.chat-contact:focus-visible{background:var(--theme-hover,#edf4ed)}
.chat-contact:focus-visible{outline:2px solid var(--theme-accent-border,#759d87);outline-offset:-2px}
.chat-contact>.avatar{width:44px;height:44px;flex:none}
.chat-contact>span:not(.avatar){flex:1;min-width:0}
.chat-contact strong{display:block;font-size:.95rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.chat-contact small{display:block;margin-top:3px;font-size:.8rem;line-height:1.4;color:var(--theme-muted,#718477)}
.chat-contact>.icon{width:17px;height:17px;flex:none;color:var(--theme-muted,#718477)}
.chat-contact:disabled{cursor:wait;opacity:.65}
.chat-contact-empty{display:grid;justify-items:center;gap:9px;padding:30px 12px;text-align:center;color:var(--theme-muted,#718477);font-size:.85rem}
.chat-contact-empty>.icon{width:28px;height:28px;margin-bottom:3px}
.chat-contact-empty strong{font-size:1rem;color:var(--theme-text,#304638)}
@media(max-width:500px){.chat-contacts-dialog .modal-header{padding:18px}.chat-contacts-dialog .modal-body{padding:14px}.chat-contact{gap:10px;padding:10px 5px}.chat-contact strong{font-size:.9rem}.chat-contact-search input{font-size:16px}.chat-contact-toolbar{gap:8px}.chat-contact-filters{width:100%}.chat-contact-filters button{flex:1;min-height:36px;padding:5px 4px}}
.chat-workspace .chat-search{margin:0 10px 6px;min-height:40px;padding:5px 9px;flex-shrink:0}
.chat-workspace .chat-search input{padding:3px 0;line-height:1.4}
.chat-workspace .chat-filters{display:flex;flex-wrap:nowrap;gap:4px;padding:0 10px 7px}
.chat-workspace .chat-filters button{display:flex;align-items:center;justify-content:center;gap:5px;flex:1;min-width:0;min-height:36px;height:36px;padding:5px;border-radius:9px;color:var(--theme-muted,#758477)}
.chat-workspace .chat-filters button.selected{background:var(--theme-selected,#eaf2e9);color:var(--theme-accent,#236b53);box-shadow:inset 0 -2px var(--theme-accent-border,#468162)}
.chat-workspace .chat-filters button:hover{background:var(--theme-hover,#eff4ed)}
.chat-workspace .chat-filters .icon{width:20px;height:20px;flex:none;stroke-width:1.8}
.chat-workspace .chat-filter-count{margin:0;min-width:16px;font-size:.7rem;line-height:1.2;font-variant-numeric:tabular-nums}
.chat-workspace .chat-threads{padding:0 6px 6px;scrollbar-width:thin;overscroll-behavior:contain}
.chat-workspace .thread{min-height:3.65rem;padding:8px 10px;margin-bottom:2px;gap:.6rem}
.chat-workspace .thread .avatar{width:2.35rem;height:2.35rem}
.chat-workspace .thread strong{display:block;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-workspace .thread small{margin-top:2px;line-height:1.4}
.chat-workspace .conversation-header{min-height:3.5rem;padding:8px 16px;gap:10px}
.chat-workspace .conversation-header strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.chat-workspace .conversation-header span:not(.avatar){line-height:1.35}
.chat-workspace .chat-group-heading{padding:0}
.chat-workspace .chat-group-heading>span{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-workspace .message-history{padding:.75rem 1rem;gap:.65rem;scrollbar-gutter:stable}
/* Message tools follow the same order and geometry in both colour themes. */
.chat-workspace .conversation{container-type:inline-size;container-name:conversation}
.chat-workspace .chat-composer{padding:9px 12px;background:var(--theme-surface,#fff)}
.chat-workspace .chat-compose-input{display:grid;grid-template-columns:minmax(0,1fr) 2.65rem;align-items:center;gap:.6rem;border:0;border-radius:0;padding:0;background:none}
.chat-workspace .chat-compose-input:focus-within{box-shadow:none;border:0}
.chat-workspace .chat-compose-input textarea{width:100%;min-height:2.65rem;max-height:6rem;resize:none;padding:.5rem .75rem;border:1px solid var(--theme-line,#dfe7df);border-radius:12px;line-height:1.5;font-size:1rem;background:var(--theme-canvas,#f7f9f6)!important;color:var(--theme-text,#263b32)}
.chat-workspace .chat-compose-input textarea:focus{border-color:var(--theme-accent-border,#729b83);box-shadow:0 0 0 2px var(--theme-shadow,#3366440c)!important}
.chat-workspace .chat-send{display:grid;place-items:center;align-self:center;width:2.65rem;height:2.65rem;min-width:2.65rem;min-height:2.65rem;margin:0;padding:0;border:1px solid #236b53;border-radius:12px;background:#236b53;color:#fff;box-shadow:inset 0 1px 0 #ffffff14,0 3px 9px #163f2914;line-height:1}
html[data-theme="dark"] .chat-workspace button.chat-send{color:#fff}
.chat-workspace .chat-send:hover:not(:disabled){background:#1d5c47;border-color:#1d5c47}
.chat-workspace .chat-send>.icon{display:block;flex:none;width:1.45rem;height:1.45rem;stroke-width:1.8}
.chat-compose-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1rem;margin-top:6px}
.chat-workspace .chat-compose-tools{display:flex;align-items:center;justify-content:flex-start;gap:.45rem;margin:0;min-width:0}
.chat-emoji-control{display:flex;flex:none;padding:2px;margin:-2px}
.chat-workspace .chat-composer-tool{display:inline-flex;align-items:center;justify-content:center;flex:none;gap:.4rem;height:2rem;min-height:36px;margin:0;padding:0 .65rem;border:1px solid var(--theme-line,#e1e8e1);border-radius:10px;background:var(--theme-surface-muted,#f7f9f5);color:var(--theme-text,#405749);font-size:.82rem;font-weight:500;line-height:1.2;white-space:nowrap;transition:background .15s,border-color .15s}
.chat-workspace .chat-composer-tool:hover,.chat-workspace .chat-composer-tool[aria-expanded=true]{background:var(--theme-hover,#edf4ed);border-color:var(--theme-accent-border,#b4cabc)}
.chat-workspace .chat-composer-tool:disabled{opacity:.45;cursor:default}
.chat-workspace .chat-composer-tool>.icon{display:block;width:1.25rem;height:1.25rem;flex:none;stroke-width:1.7}
.chat-workspace .chat-composer-tool.recording{background:var(--theme-red-soft,#fcecea);border-color:var(--theme-red-text,#b35544);color:var(--theme-red-text,#a04435)}
.chat-keyboard-hint{display:flex;align-items:center;gap:.5rem;color:var(--theme-muted,#748476);font-size:.7rem;line-height:1.4;white-space:nowrap}
.chat-keyboard-hint>.icon{width:1.2rem;height:1.2rem;flex:none}
.chat-file-pickers[hidden],.chat-file-pickers input[hidden]{display:none!important}
.chat-workspace .chat-draft-line{margin:.4rem 0 0;font-size:.72rem}
.chat-attach-menu{left:12px;width:min(340px,calc(100% - 24px));max-height:min(370px,55dvh)}
.chat-text .chat-inline-emoji{display:inline-block;width:1.35em;height:1.35em;max-width:none;object-fit:contain;vertical-align:-.25em;margin:0 .04em}

/* A top-layer popover is not clipped by the scrolling conversation. */
.emoji-popover{position:fixed;inset:auto;margin:0;z-index:100;box-sizing:border-box;display:flex;flex-direction:column;width:368px;height:440px;max-width:calc(100vw - 20px);padding:12px;border:1px solid var(--theme-line,#dee7df);border-radius:18px;background:var(--theme-surface,#fff);color:var(--theme-text,#304638);box-shadow:0 14px 48px #182d272b,0 2px 8px #182d270f;font-family:"Segoe UI",Arial,sans-serif;overflow:hidden}
.emoji-popover[hidden]{display:none}
.emoji-popover::backdrop{background:transparent;pointer-events:none}
html[data-theme="dark"] .emoji-popover{box-shadow:0 14px 48px #0007,0 2px 8px #0003}
.emoji-popover-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;padding:0 2px 8px;flex:none}
.emoji-popover-header strong{font-size:15px;font-weight:650;line-height:1.3}
.emoji-popover-header small{display:block;margin-top:2px;font-size:11px;line-height:1.3;color:var(--theme-muted,#7a887e)}
.emoji-close{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;color:var(--theme-muted,#7a887e)}
.emoji-close .icon{width:18px;height:18px}.emoji-close:hover{background:var(--theme-hover,#f0f5f0)}
.emoji-search{display:flex;align-items:center;gap:8px;flex:none;min-height:38px;padding:0 10px;border:1px solid var(--theme-line,#e2e9e2);border-radius:11px;background:var(--theme-canvas,#f5f8f4)}
.emoji-search>.icon{width:17px;height:17px;flex:none;color:var(--theme-muted,#7a887e)}
.emoji-search input{width:100%;min-width:0;border:0;outline:0;padding:8px 0;background:transparent;color:var(--theme-text,#304638);font:14px/1.4 "Segoe UI",Arial,sans-serif}
.emoji-search:focus-within{border-color:var(--theme-accent-border,#8cae97)}
.emoji-categories{display:flex;align-items:center;justify-content:space-between;flex:none;gap:2px;overflow:auto;margin:8px 0 0;padding-bottom:8px;border-bottom:1px solid var(--theme-line,#e5ece5);scrollbar-width:none}
.emoji-categories button{display:grid;place-items:center;width:32px;min-width:28px;height:32px;border-radius:8px;color:var(--theme-muted,#7e8b81)}
.emoji-categories .icon{width:19px;height:19px;flex:none;stroke-width:1.6}
.emoji-categories button:hover,.emoji-categories button[aria-pressed=true]{color:var(--theme-green-text,#28664b);background:var(--theme-green-soft,#e7f0e7)}
.emoji-results{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable;margin:0 -5px 0 0;padding:0 1px 0 0}
.emoji-category h3{font-size:12px;font-weight:600;line-height:1.4;margin:12px 3px 5px;color:var(--theme-muted,#7e8b81)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}
.emoji-cell{display:grid;place-items:center;min-width:0;width:100%;height:38px;padding:0;border:0;border-radius:9px;background:transparent;cursor:pointer}
.emoji-cell>img{display:block;width:29px;height:29px;object-fit:contain;transition:transform .12s;pointer-events:none}
.emoji-cell:hover,.emoji-cell:focus-visible{background:var(--theme-hover,#edf4eb)}
.emoji-cell:hover>img{transform:scale(1.12)}
.emoji-cell:focus-visible{outline:2px solid var(--theme-accent-border,#8cae97);outline-offset:-2px}
.emoji-empty{padding:20px 12px;font-size:13px;line-height:1.6;color:var(--theme-muted,#7e8b81)}
.emoji-popover-quick{height:auto;padding:10px;border-radius:15px}
.emoji-popover-quick .emoji-popover-header{padding-bottom:6px;min-height:28px}
.emoji-popover-quick strong{font-size:12px;font-weight:600;color:var(--theme-muted,#7e8b81)}
.emoji-show-all{display:flex;align-items:center;gap:3px;padding:4px 2px;font-size:12px;font-weight:550;color:var(--theme-green-text,#28664b)}
.emoji-show-all .icon{width:13px;height:13px}.emoji-show-all:hover{text-decoration:underline;text-underline-offset:3px}
@container conversation (max-width:1000px){.chat-keyboard-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@container conversation (max-width:600px){.chat-workspace .chat-composer-tool{padding:0 .55rem;font-size:.78rem;gap:.35rem}.chat-workspace .chat-compose-input{gap:.5rem}}
@container conversation (max-width:430px){
  .chat-workspace .chat-compose-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:5px}
  .chat-emoji-control{display:block;min-width:0}.chat-workspace .chat-composer-tool{width:100%;height:40px;min-height:40px;padding:5px;gap:0}
  .chat-workspace .chat-composer-tool>span:not(.chat-record-stop){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .chat-workspace .chat-composer-tool>.icon{width:22px;height:22px}
  .chat-workspace .chat-compose-input{grid-template-columns:minmax(0,1fr) 44px}.chat-workspace .chat-send{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:12px}
}
@media(max-width:850px){#main:has(.chat-workspace) .demo-role-caption{display:none}}
@media(max-width:760px){.workspace #main:has(.chat-workspace){padding:8px}.chat-workspace .conversation-header{padding:8px}.chat-workspace .chat-composer{padding:8px}.chat-heading-actions .icon-button{width:36px;height:36px}}
@media(max-height:600px){.chat-workspace .chat-compose-input textarea{min-height:2.6rem;max-height:4.5rem;padding:.55rem .7rem}.chat-workspace .chat-composer{padding:.5rem .65rem}.chat-compose-toolbar{margin-top:.4rem}.chat-workspace .chat-composer-tool{min-height:36px;height:36px}.chat-workspace .chat-draft-line{font-size:11px}}
@media(max-height:600px){@container conversation (max-width:430px){.chat-workspace .chat-composer-tool{height:44px;flex-direction:row}.chat-workspace .chat-composer-tool>span:not(.chat-record-stop){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.chat-workspace .chat-record-toggle::after{display:none}}}
/* Leave room for the conversation and composer in a landscape phone/window. */
@media(max-height:600px){
  .workspace:has(.chat-workspace)>.topbar{height:52px;min-height:52px}
  #main:has(.chat-workspace){padding:8px 12px}
  #main:has(.chat-workspace)>.page-heading{display:none}
  #main:has(.chat-workspace)>.demo-role-bar{padding:3px;margin-bottom:8px;gap:0}
  #main:has(.chat-workspace) .demo-role-caption{display:none}
  #main:has(.chat-workspace) .demo-role-switch{width:100%;flex-wrap:nowrap}
  #main:has(.chat-workspace) .demo-role-switch button{min-height:34px;padding:6px 9px;font-size:13px}
  #main>.chat-workspace{min-height:0}
  .chat-workspace .conversation-header{min-height:52px;padding:8px 12px}
  .chat-workspace .conversation-header .avatar{width:34px;height:34px}
}
@media(max-height:600px) and (max-width:1000px){
  #main>.chat-workspace.has-conversation{grid-template-columns:minmax(0,1fr)}
  .chat-workspace.has-conversation .thread-list{display:none}
  .chat-workspace.has-conversation .chat-back{display:grid!important}
}
@media(prefers-reduced-motion:reduce){.chat-workspace .chat-composer-tool,.emoji-cell>img{transition:none}}