/* Approved Hope Lightwell shell. Semantic palette stays account-controlled. */
:root{
    --canvas:var(--hope-ground);
    --surface:var(--hope-surface);
    --surface-raised:var(--hope-persona-surface);
    --ink:var(--hope-ink);
    --ink-soft:var(--hope-quiet);
    --ink-muted:var(--hope-quiet);
    --accent:var(--hope-accent);
    --accent-ink:var(--hope-on-accent);
    --line:var(--hope-separator);
    --focus:var(--hope-focus);
    --danger:var(--hope-alert);
    --iris:var(--hope-accent);
    --z-panel:30;
    --z-backdrop:40;
    --z-sheet:50}
*{
    box-sizing:border-box}
body{
    margin:0;
    background:var(--canvas);
    color:var(--ink);
    font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased}
button,input,textarea,select{
    font:inherit;
    color:inherit}
button{
    cursor:pointer}
button:disabled{
    opacity:.45;
    cursor:not-allowed}
[hidden]{
    display:none!important}
h1,h2,h3,p{
    margin:0}
h1,h2,h3{
    text-wrap:balance}
p{
    text-wrap:pretty}
a{
    color:var(--accent)}
:focus-visible{
    outline:2px solid var(--focus);
    outline-offset:3px}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap}
.skip-link{
    position:fixed;
    top:12px;
    left:12px;
    z-index:var(--z-sheet);
    padding:12px;
    background:var(--ink);
    color:var(--canvas);
    transform:translateY(-180%)}
.skip-link:focus{
    transform:none}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:9px 13px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--ink);
    font-weight:500;
    transition:background 160ms ease}
.btn:hover:not(:disabled){
    background:var(--surface-raised)}
.btn-primary{
    background:var(--accent);
    color:var(--accent-ink)}
.btn-primary:hover:not(:disabled){
    background:var(--accent);
    filter:brightness(1.08)}
.btn-danger{
    background:var(--danger);
    color:var(--hope-on-alert)}
.btn-secondary{
    border:1px solid var(--line)}
.btn-icon{
    width:44px;
    min-width:44px;
    padding:0;
    font-size:20px}
.btn-ghost{
    color:var(--ink-soft)}

.app-shell{
    display:flex;
    height:100dvh;
    overflow:hidden}
.chat-sidebar{
    width:252px;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    padding:28px 18px 16px;
    background:var(--surface);
    border-right:1px solid var(--line);
    min-height:0;
    overflow:auto}
.sidebar-brand{
    display:flex;
    align-items:center;
    gap:11px;
    padding:0 10px 28px;
    font-size:23px;
    letter-spacing:-.03em}
.hope-mark{
    display:inline-grid;
    place-items:center;
    flex-shrink:0;
    width:27px;
    height:27px;
    background:var(--accent);
    border-radius:6px}
.hope-mark:after{
    content:"";
    width:11px;
    height:11px;
    background:var(--accent-ink);
    border-radius:2px}
.new-chat{
    width:100%;
    justify-content:flex-start;
    background:var(--canvas);
    border:1px solid var(--line);
    margin-bottom:13px}
.chat-sidebar input{
    width:100%;
    min-height:44px;
    background:transparent;
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 12px}
input::placeholder,textarea::placeholder{
    color:var(--ink-soft);
    opacity:1}
.chat-sidebar nav{
    flex:1;
    margin-top:18px}
.chat-sidebar h2{
    font-size:12px;
    font-weight:600;
    color:var(--ink-soft);
    margin:16px 12px 8px}
.nav-heading{
    display:flex;
    align-items:center;
    justify-content:space-between}
.nav-heading h2{
    margin:0 12px}
.conversation-link{
    display:block;
    width:100%;
    min-height:44px;
    padding:11px 12px;
    border:0;
    border-radius:8px;
    background:transparent;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis}
.conversation-link:hover,.conversation-link[aria-current="page"]{
    background:var(--hope-selected-wash)}
.workspace-row{
    display:flex;
    align-items:center;
    min-width:0}
.workspace-row>.conversation-link{
    flex:1;
    min-width:0}
.workspace-menu{
    flex-shrink:0}
.workspace-menu summary{
    cursor:pointer;
    min-width:36px;
    min-height:44px;
    display:grid;
    place-items:center;
    list-style:none}
.workspace-menu[open]{
    position:relative}
.workspace-tools{
    position:absolute;
    right:0;
    z-index:var(--z-panel);
    width:150px;
    background:var(--canvas);
    border:1px solid var(--line);
    padding:6px;
    border-radius:8px}
.workspace-tools .btn{
    width:100%;
    justify-content:flex-start}
.sidebar-footer{
    margin-top:22px;
    padding-top:12px;
    border-top:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:2px}
.sidebar-footer>.btn{
    justify-content:flex-start;
    text-align:left}
.account-trigger{
    margin-top:10px;
    width:100%}
.account-avatar{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--hope-selected-wash);
    color:var(--accent);
    font-size:24px}
.account-trigger #identityChip{
    flex:1;
    min-width:0}
.account-trigger strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:600}
.account-trigger small{
    display:block;
    font-size:11px;
    color:var(--ink-soft);
    margin-top:5px}
.tasks-badge{
    margin-left:auto;
    border-radius:5px;
    background:var(--hope-selected-wash);
    padding:2px 6px;
    font-size:11px}
#drawerOpen,#drawerClose{
    display:none}

.primary-chat{
    display:flex;
    flex:1;
    flex-direction:column;
    min-width:0;
    min-height:0}
.chat-topbar{
    display:flex;
    align-items:center;
    gap:16px;
    min-height:86px;
    padding:16px 38px;
    border-bottom:1px solid var(--line);
    flex-shrink:0}
.chat-heading{
    flex:1;
    min-width:0}
.chat-heading h1{
    font-size:15px;
    font-weight:600;
    line-height:1.5;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis}
.chat-heading p{
    font-size:12px;
    color:var(--ink-soft);
    margin-top:5px}
.privacy-badge{
    font-size:11px;
    color:var(--ink-soft);
    white-space:nowrap}
.conversation-actions{
    position:fixed;
    inset:86px 20px auto auto;
    margin:0;
    width:220px;
    padding:8px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--canvas);
    color:var(--ink)}
.conversation-actions:popover-open{
    display:flex;
    flex-direction:column}
.conversation-actions .btn{
    width:100%;
    text-align:left;
    justify-content:flex-start}
.chat-notice{
    font-size:13px;
    color:var(--ink-soft);
    padding:0 24px;
    flex-shrink:0;
    overflow-wrap:anywhere}
.chat-notice:not(:empty){
    padding-top:10px;
    padding-bottom:10px}
.chat-timeline{
    flex:1;
    min-height:0;
    overflow:auto;
    padding:40px max(28px,calc((100% - 740px)/2));
    scrollbar-gutter:stable}
.chat-welcome{
    max-width:450px;
    margin:9vh auto 40px;
    text-align:center}
.chat-welcome .hope-mark{
    width:34px;
    height:34px}
.chat-welcome h2{
    font-size:30px;
    font-weight:500;
    letter-spacing:-.025em;
    margin:20px 0 12px;
    line-height:1.3}
.chat-welcome p{
    font-size:15px;
    line-height:1.8;
    color:var(--ink-soft)}
.chat-message{
    max-width:74ch;
    font-size:15px;
    line-height:1.85;
    margin-bottom:32px;
    overflow-wrap:anywhere}
.chat-message>h2{
    font-size:13px;
    font-weight:600;
    margin-bottom:12px}
.chat-message.assistant>h2:before{
    content:"";
    display:inline-block;
    width:13px;
    height:13px;
    border-radius:3px;
    background:var(--accent);
    margin-right:9px;
    vertical-align:-2px}
.chat-message.user{
    margin-left:auto;
    max-width:85%}
.chat-message.user>h2{
    font-size:11px;
    color:var(--ink-soft)}
.chat-message.user .markdown{
    background:var(--hope-selected-wash);
    padding:14px 18px;
    border-radius:12px}
.markdown p{
    margin:0 0 12px}
.markdown p:last-child{
    margin:0}
.markdown h2,.markdown h3,.markdown h4{
    font-size:18px;
    margin:20px 0 10px}
.markdown ul,.markdown ol{
    padding-left:23px;
    margin:12px 0}
.markdown pre{
    overflow:auto;
    padding:16px;
    border-radius:8px;
    background:var(--surface);
    font-size:13px;
    line-height:1.6}
.markdown code{
    font-family:ui-monospace,SFMono-Regular,monospace;
    background:var(--surface);
    padding:2px 4px;
    border-radius:3px}
.markdown pre code{
    background:none;
    padding:0}
.markdown blockquote{
    margin:12px 0;
    padding:12px;
    border:1px solid var(--line);
    border-radius:8px}
.markdown-table{
    max-width:100%;
    overflow:auto;
    margin:14px 0}
.markdown-table table{
    border-collapse:collapse;
    width:100%;
    font-size:14px}
.markdown-table td,.markdown-table th{
    padding:10px;
    border:1px solid var(--line);
    text-align:left}
.message-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:2px;
    margin-top:8px;
    font-size:12px;
    color:var(--ink-soft)}
.message-actions .btn{
    font-size:12px;
    padding:5px 9px}
.run-progress{
    width:calc(100% - 48px);
    max-width:740px;
    margin:0 auto;
    font-size:13px;
    color:var(--ink-soft)}
.primary-composer{
    width:calc(100% - 64px);
    max-width:740px;
    margin:12px auto 0;
    padding:16px 18px 12px;
    border:1px solid var(--hope-control-border);
    border-radius:12px;
    background:var(--canvas);
    flex-shrink:0}
.primary-composer textarea{
    width:100%;
    min-height:62px;
    max-height:160px;
    resize:vertical;
    border:0;
    background:none;
    line-height:1.7;
    padding:0;
    display:block}
.composer-footer{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px}
.composer-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:10px}
.composer-right>span{
    font-size:11px;
    color:var(--ink-soft)}
.lightwell-button{
    width:48px;
    min-width:48px;
    height:48px;
    padding:0;
    border-radius:9px;
    background:var(--accent);
    color:var(--accent-ink)}
.lightwell-button:hover:not(:disabled){
    background:var(--accent)}
.lightwell-symbol{
    display:grid;
    width:30px;
    height:30px;
    grid-template-columns:repeat(5,1fr);
    grid-template-rows:repeat(5,1fr);
    gap:3px;
    padding:2px;
    place-items:center}
.lightwell-symbol i{
    width:3px;
    height:3px;
    background:currentColor;
    border-radius:50%;
    opacity:.8}
.lightwell-symbol i:nth-child(3n){
    opacity:.4}
.send-button{
    width:44px;
    min-width:44px;
    padding:0;
    font-size:23px}
.chat-footnote{
    display:flex;
    justify-content:space-between;
    gap:12px;
    width:calc(100% - 64px);
    max-width:740px;
    margin:0 auto;
    padding:12px 0 20px;
    color:var(--ink-soft);
    font-size:11px}
.feature-actions{
    display:flex;
    align-items:center}
.feature-actions .btn{
    padding:8px;
    font-size:12px}
#researchMode{
    max-width:125px;
    min-width:0;
    min-height:44px;
    border:0;
    background:transparent;
    font-size:12px}
#researchModeLabel{
    font-size:11px;
    color:var(--ink-soft)}
.attachment-preview{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:10px 0;
    font-size:12px;
    overflow-wrap:anywhere}
.attachment-preview img{
    object-fit:cover;
    border-radius:6px}

.inline-voice{
    flex-shrink:0;
    display:grid;
    grid-template-columns:84px minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    padding:16px 24px;
    border-bottom:1px solid var(--line);
    background:var(--hope-persona-surface);
    max-height:38dvh;
    overflow:auto}
.led-wall{
    width:84px;
    height:84px;
    display:grid;
    grid-template-columns:repeat(21,1fr);
    grid-template-rows:repeat(21,1fr);
    place-items:center;
    padding:4px;
    color:var(--accent);
    border-radius:12px}
.led-dot{
    width:var(--sz,3px);
    height:var(--sz,3px);
    min-width:1px;
    min-height:1px;
    border:0;
    background:currentColor;
    border-radius:50%;
    opacity:.2}
.voice-summary h2{
    font-size:12px;
    font-weight:500;
    color:var(--ink-soft);
    margin-bottom:6px}
.voice-summary #stateLabel{
    font-size:18px;
    font-weight:600}
.voice-summary #modeDescription,.voice-summary .status,.voice-summary #bargeHint,.voice-summary #thinkingChip{
    font-size:11px;
    line-height:1.6;
    color:var(--ink-soft);
    margin-top:4px}
.voice-controls{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:flex-end;
    max-width:240px}
.voice-controls .btn{
    font-size:12px}
.voice-controls #startBtn:disabled,.voice-controls #stopBtn:disabled{
    display:none}
.mic-meter{
    height:2px;
    max-width:170px;
    background:var(--line);
    margin-top:7px}
.mic-meter span{
    display:block;
    height:100%;
    width:0;
    background:var(--accent)}
.live-transcript{
    grid-column:2/-1;
    font-size:13px;
    line-height:1.65}
.live-transcript #messages:empty{
    display:none}
.message-row{
    margin:10px 0;
    overflow-wrap:anywhere}
.message-row.user{
    font-weight:600}
.message-row.system{
    color:var(--ink-soft);
    font-size:11px}
.audio-viz{
    display:none}

.login-gate{
    width:calc(100% - 32px);
    max-width:420px;
    margin:12vh auto;
    padding:28px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px}
.login-gate h1{
    font-size:26px;
    letter-spacing:-.025em}
.login-gate>p{
    margin:14px 0;
    line-height:1.6;
    color:var(--ink-soft)}
.account-form{
    display:flex;
    flex-direction:column;
    gap:10px}
.account-form label{
    display:block;
    font-size:12px;
    font-weight:500;
    margin:5px 0}
.account-form input,.account-form select,.account-form textarea,#voiceSearch{
    width:100%;
    min-height:44px;
    padding:10px 12px;
    border:1px solid var(--hope-control-border);
    border-radius:7px;
    background:var(--canvas);
    color:var(--ink)}
.account-form textarea{
    resize:vertical}
.account-form p{
    font-size:13px;
    line-height:1.65;
    color:var(--ink-soft)}
.dialog-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
    margin-top:12px}
dialog{
    margin:auto;
    width:calc(100% - 32px);
    max-width:600px;
    max-height:90dvh;
    overflow:auto;
    padding:24px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--canvas);
    color:var(--ink)}
dialog::backdrop{
    background:rgb(30 20 30 / .35)}
dialog h2{
    font-size:22px;
    font-weight:600;
    margin-bottom:12px}
dialog h3{
    font-size:18px;
    font-weight:600;
    margin-bottom:8px}
dialog p{
    color:var(--ink-soft);
    font-size:13px;
    line-height:1.7;
    margin:8px 0 18px}
.dialog-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px}
.settings-window{
    width:min(900px,calc(100% - 32px));
    max-width:900px;
    padding:0}
.settings-window>.dialog-head{
    padding:22px 26px;
    border-bottom:1px solid var(--line)}
.settings-window>.dialog-head h2{
    margin-bottom:0}
.settings-window>.dialog-head p{
    margin:6px 0 0}
.settings-layout{
    display:flex;
    min-height:430px}
.settings-nav{
    width:195px;
    flex-shrink:0;
    padding:18px 12px;
    background:var(--surface);
    border-right:1px solid var(--line)}
.settings-nav .btn{
    width:100%;
    text-align:left;
    justify-content:flex-start;
    font-size:13px;
    margin-bottom:4px}
.settings-nav .selected{
    background:var(--hope-selected-wash);
    color:var(--accent);
    font-weight:600}
.settings-nav .admin-link{
    border-top:1px solid var(--line);
    border-radius:0;
    margin-top:18px;
    padding-top:15px;
    min-height:55px}
.settings-body{
    flex:1;
    min-width:0;
    padding:26px 30px}
.account-heading{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:22px 0}
.account-heading small{
    color:var(--ink-soft);
    font-size:12px}
#settingsDialog #settingsSheet{
    position:static;
    transform:none;
    width:auto;
    max-height:none;
    height:auto;
    background:none;
    border:0;
    padding:0;
    overflow:visible}
#settingsDialog #closeSheetBtn{
    display:none}
.sheet-header{
    margin-bottom:20px}
.model-settings{
    border-bottom:1px solid var(--line);
    padding-bottom:22px;
    margin-bottom:22px}
.model-settings-actions{
    display:flex;
    gap:8px}
.model-settings-status[data-state="error"]{
    color:var(--danger)}
.sheet-section-title{
    font-size:16px;
    margin-bottom:12px}
.voice-list{
    display:flex;
    flex-direction:column;
    gap:6px}
.voice-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px;
    border:1px solid transparent;
    border-radius:8px;
    background:var(--surface);
    cursor:pointer;
    min-height:54px}
.voice-card.active{
    border-color:var(--accent);
    background:var(--hope-selected-wash)}
.voice-name{
    font-size:13px;
    overflow-wrap:anywhere}
.voice-card.active .voice-name:after{
    content:" · Selected";
    color:var(--accent)}
.voice-preview{
    background:none;
    border:0;
    min-height:44px;
    padding:8px;
    font-size:12px;
    color:var(--ink-soft)}
.voice-preview:before{
    content:"Listen"}
.admin-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px}
.admin-header h2{
    font-size:18px}
.table-scroll{
    overflow:auto;
    max-width:100%;
    margin:16px 0 24px}
.admin-section table{
    border-collapse:collapse;
    width:100%;
    font-size:12px;
    text-align:left}
.admin-section th,.admin-section td{
    padding:10px;
    border-bottom:1px solid var(--line);
    vertical-align:top;
    overflow-wrap:anywhere}
.admin-section th{
    color:var(--ink-soft);
    font-weight:500;
    white-space:nowrap}
.admin-section td:nth-child(2),.admin-section td:nth-child(3){
    white-space:nowrap;
    overflow-wrap:normal}
.admin-section td:nth-child(4){
    overflow-wrap:break-word;
    min-width:140px}
.user-actions .btn{
    font-size:11px;
    padding:8px;
    white-space:nowrap}
.create-user-form{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px}
.create-user-form .btn{
    justify-self:start}
.admin-section h3{
    margin-top:20px}
.tasks-panel{
    position:fixed;
    inset:0 0 0 auto;
    z-index:var(--z-panel);
    width:min(430px,100%);
    height:100dvh;
    overflow:auto;
    display:flex;
    flex-direction:column;
    background:var(--canvas);
    border-left:1px solid var(--line);
    padding:22px}
.tasks-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid var(--line);
    padding-bottom:16px}
.tasks-header h2{
    font-size:20px}
.tasks-header p{
    font-size:12px;
    color:var(--ink-soft);
    margin-top:6px}
.tasks-list{
    padding-top:16px}
.tasks-empty{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:40px 0;
    text-align:center;
    font-size:13px;
    line-height:1.7;
    color:var(--ink-soft)}
.task-card{
    padding:16px 0;
    border-bottom:1px solid var(--line);
    font-size:13px;
    line-height:1.6;
    overflow-wrap:anywhere}
.task-card-header{
    display:flex;
    gap:8px}
.task-status-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
    flex-shrink:0;
    margin-top:7px}
.task-error{
    color:var(--danger)}
.task-steps{
    padding-left:20px}
.audio-unlock{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    z-index:var(--z-sheet);
    background:var(--accent);
    color:var(--accent-ink)}
#hopeFeatures details{
    padding:14px 0;
    border-bottom:1px solid var(--line)}
#hopeFeatures summary{
    cursor:pointer;
    min-height:44px;
    display:flex;
    align-items:center;
    font-weight:500}
#hopeFeatures form{
    display:flex;
    flex-direction:column;
    gap:10px}
#hopeFeatures input,#hopeFeatures textarea,#hopeFeatures select{
    max-width:100%;
    width:100%;
    padding:10px;
    border:1px solid var(--hope-control-border);
    border-radius:6px;
    background:var(--canvas)}
#hopeFeatures pre{
    overflow:auto;
    max-width:100%;
    white-space:pre-wrap}
#hopeFeatures p{
    margin:10px 0;
    line-height:1.6}
.sheet-backdrop{
    position:fixed;
    inset:0;
    z-index:var(--z-backdrop);
    background:rgb(30 20 30 / .35)}

@media(max-width:960px){
    .chat-sidebar{
    width:220px}
.chat-topbar{
    padding:16px 24px}
.privacy-badge{
    display:none}
.composer-footer{
    gap:4px}
}
@media(max-width:760px){
    .chat-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(280px,88vw);
    z-index:var(--z-sheet);
    transform:translateX(-100%);
    transition:transform 180ms ease}
.chat-sidebar.drawer-open{
    transform:none}
#drawerOpen,#drawerClose{
    display:inline-flex}
#drawerClose{
    margin-left:auto}
.drawer-backdrop{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    border-radius:0;
    background:rgb(30 20 30 / .35);
    z-index:var(--z-backdrop)}
.chat-topbar{
    min-height:70px;
    padding:10px 12px;
    gap:6px}
.chat-heading h1{
    font-size:13px}
.chat-heading p{
    font-size:11px}
.conversation-actions{
    top:70px;
    right:12px}
.chat-timeline{
    padding:24px 22px 20px}
.chat-welcome h2{
    font-size:26px}
.chat-message{
    font-size:14px;
    line-height:1.8}
.primary-composer{
    width:calc(100% - 24px);
    padding:13px 12px 10px}
.chat-footnote{
    width:calc(100% - 24px);
    justify-content:center;
    font-size:10px;
    padding-bottom:max(12px,env(safe-area-inset-bottom))}
.keyhint{
    display:none}
.composer-right{
    gap:8px}
.feature-actions .btn{
    max-width:44px;
    overflow:hidden;
    white-space:nowrap;
    padding:10px;
    font-size:0}
.feature-actions .btn:before{
    content:"＋";
    font-size:22px}
#researchMode{
    max-width:90px;
    font-size:11px}
.inline-voice{
    grid-template-columns:64px minmax(0,1fr);
    gap:10px;
    padding:12px 16px;
    max-height:40dvh}
.led-wall{
    width:64px;
    height:64px}
.voice-controls{
    grid-column:1/-1;
    max-width:none;
    justify-content:flex-start}
.live-transcript{
    grid-column:1/-1}
.voice-summary #stateLabel{
    font-size:16px}
.voice-summary #modeDescription{
    display:none}
.settings-window>.dialog-head{
    padding:18px}
.settings-layout{
    flex-direction:column}
.settings-nav{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    padding:10px 12px;
    border-right:0;
    border-bottom:1px solid var(--line);
    gap:4px}
.settings-nav .btn{
    width:auto;
    margin:0;
    padding:8px 10px;
    font-size:12px}
.settings-nav .admin-link{
    border:0;
    border-radius:8px;
    margin:0;
    padding:8px 10px;
    min-height:44px}
.settings-body{
    padding:22px 18px}
.create-user-form{
    grid-template-columns:1fr}
.admin-header{
    flex-wrap:wrap}
.admin-section table{
    min-width:580px}
.chat-notice{
    font-size:12px}
.composer-footer{
    flex-wrap:wrap}
.composer-right{
    margin-left:auto}
.chat-message.user{
    max-width:95%}
}
@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important}
}


/* Keep all composer actions on one row at the smallest supported width. */
@media(max-width:360px){
    #researchModeLabel,.composer-right>span{
    display:none}
#researchMode{
    max-width:84px}
.composer-right{
    gap:6px}
.composer-footer{
    flex-wrap:nowrap;
    gap:4px}
}