/* Composer surfaces and geometry. Recording/picker state selectors below retain
   their existing contract with chat.js, media.js and mobile_ux.js. */
#composer{
  box-sizing:border-box;
  width:100%;
  min-height:52px;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:6px max(8px,var(--sar,0px)) calc(6px + var(--sab,0px)) max(8px,var(--sal,0px));
  background:var(--glass-bg,var(--glass-regular,var(--panel)));
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:0;
  border-top:.5px solid var(--separator,var(--line));
  box-shadow:none;
  flex:none;
}
#composer .capsule{
  flex:1 1 auto;
  min-width:0;
  min-height:44px;
  display:flex;
  align-items:flex-end;
  gap:2px;
  padding:0 2px;
  border:.5px solid var(--separator,var(--line));
  border-radius:18px;
  background:var(--surface-primary,var(--panel-2))!important;
  box-shadow:0 1px 2px rgba(0,0,0,.025);
  transition:border-color .16s ease,background-color .16s ease;
}
#composer .capsule:focus-within{
  border-color:color-mix(in srgb,var(--accent) 46%,var(--separator,var(--line)))!important;
  box-shadow:0 1px 2px rgba(0,0,0,.025);
}
#composer #input{
  flex:1 1 auto;
  min-width:0;
  min-height:40px;
  max-height:120px;
  margin:0;
  padding:10px 6px;
  box-sizing:border-box;
  overflow-y:auto;
  resize:none;
  border:0;
  outline:0;
  background:transparent;
  color:var(--label-primary,var(--text));
  font:inherit;
  font-size:16px;
  line-height:20px;
  scrollbar-width:thin;
}
#composer #input:focus-visible{outline:none!important}
#composer #input::placeholder{color:var(--label-tertiary,var(--muted))}
#composer #charCount{font-size:11px;color:var(--muted);align-self:flex-end;padding:0 4px 12px}
#composer .capsule-actions{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  align-self:flex-end;
  gap:0;
  height:44px;
}
#composer .capsule .icon-btn,
#composer .capsule-actions .icon-btn{
  flex:0 0 44px;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:14px;
  display:grid;
  place-items:center;
  align-self:flex-end;
  background:transparent!important;
  color:var(--label-secondary,var(--muted))!important;
  box-shadow:none;
  transition:background-color .16s ease,color .16s ease,opacity .12s ease;
}
#composer .capsule .icon-btn:hover,
#composer .capsule-actions .icon-btn:hover{background:var(--hover)!important;color:var(--label-primary,var(--text))!important}
#composer .capsule .icon-btn:active{transform:scale(.96)}
#composer .capsule #aiBtn{color:var(--accent)!important}
#composer .capsule #aiBtn:hover{background:var(--accent-muted)!important}
#composer .capsule .icon-btn svg,
#composer .capsule-actions .icon-btn svg{width:20px;height:20px;display:block}

/* Mic/video/send share one physical action slot and exact geometry. */
#sendBtn,#micBtn,#vnoteBtn,.composer-primary-btn{
  flex:0 0 44px;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  margin:0;
  padding:0;
  position:static;
  inset:auto;
  align-self:flex-end;
  border:0;
  border-radius:16px;
  display:grid;
  place-items:center;
  box-shadow:none;
}
#sendBtn{background:var(--accent);color:#fff;transition:background-color .16s ease,transform .12s ease,opacity .12s ease}
#sendBtn:hover{background:color-mix(in srgb,var(--accent) 88%,var(--label-primary))}
#micBtn,#vnoteBtn,.composer-primary-btn:not(#sendBtn){background:var(--surface-primary,var(--panel));color:var(--label-secondary,var(--muted));border:.5px solid var(--separator,var(--line))}
#micBtn:hover,#vnoteBtn:hover{background:var(--surface-secondary,var(--panel-2));color:var(--accent)}
#sendBtn svg,#micBtn svg,#vnoteBtn svg{width:22px;height:22px;display:block;margin:0}
#sendBtn:active,#micBtn:active,#vnoteBtn:active{transform:scale(.96)}
#sendBtn:disabled{opacity:.45}
@keyframes sendPop{0%{transform:scale(1)}45%{transform:scale(.94)}100%{transform:scale(1)}}
#sendBtn.pop{animation:sendPop .16s ease}

/* The form itself may move as a whole above the keyboard-replacement picker.
   Individual controls never receive top/bottom/translateY compensation. */
@media(max-width:899px){
  #composer{position:absolute;z-index:25;left:0;right:0;bottom:0;padding-bottom:max(3px,var(--sab,0px))!important}
  body.has-app.kb-open #composer{padding-bottom:0!important}
  #chatScreen #msgs{padding-bottom:calc(var(--composer-height,56px) + 8px)!important}
  #chatScreen .channel-bar{
    margin:0;border-radius:0;border-left:0;border-right:0;border-bottom:0;
    padding-bottom:calc(10px + var(--sab,0px));
  }
}
@media(min-width:900px){
  #composer{position:relative;z-index:1;justify-content:center;padding:10px clamp(20px,3vw,48px) 16px}
  #composer .capsule{max-width:760px;flex:1 1 760px}
}

.recbar{display:flex;align-items:center;gap:8px;flex:1;min-width:0;min-height:46px;padding:0 2px 0 12px;color:var(--danger);background:var(--surface-primary,var(--panel));border:.5px solid var(--separator,var(--line));border-radius:18px;overflow:hidden}
.recbar[hidden]{display:none!important}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--danger);flex:none;animation:recLumo 1s ease-in-out infinite}
@keyframes recLumo{50%{opacity:.4}}
#recTime{font-variant-numeric:tabular-nums;font-size:14px;min-width:36px;color:var(--text);font-weight:600}
.rec-hint{color:var(--muted);font-weight:500;font-size:12.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateX(calc(var(--record-cancel-progress,0) * -14px));opacity:calc(1 - var(--record-cancel-progress,0) * .45);transition:color .14s ease}
.rec-live-wave{height:26px;flex:1;min-width:54px;display:flex;align-items:center;gap:2px;overflow:hidden}
.rec-live-wave i{width:2px;height:calc(4px + var(--h,.25) * 18px);min-height:4px;border-radius:999px;background:color-mix(in srgb,var(--accent) 72%,var(--muted));opacity:.64;transition:height .08s linear,opacity .15s}
.rec-live-wave i.lumo{opacity:1}
.rec-action{flex:none;width:44px;height:44px;min-width:44px;border:0;border-radius:14px;display:grid;place-items:center;background:transparent;color:var(--label-secondary,var(--muted));cursor:pointer;transition:background-color .16s ease,opacity .12s ease}
.rec-action:hover{background:var(--hover)}
.rec-action svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rec-delete{color:var(--danger)}
.rec-send{background:var(--accent);color:#fff}
.rec-send:hover{background:color-mix(in srgb,var(--accent) 88%,var(--label-primary))}
.rec-resume-icon{display:none}

#micBtn,#vnoteBtn{touch-action:none;user-select:none;-webkit-user-select:none}
body.record-gesture-active #micBtn,body.record-gesture-active #vnoteBtn{touch-action:none}

.record-lock-guide{--p:var(--record-lock-progress,0);position:absolute;right:7px;bottom:calc(100% - 4px);width:46px;height:92px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;pointer-events:none;opacity:0;transform:translateY(calc(16px - var(--p) * 12px));z-index:18;transition:opacity .12s ease}
#composer.recording[data-recording-mode="held"] .record-lock-guide,#composer.recording[data-recording-mode="locking"] .record-lock-guide{opacity:calc(.45 + var(--p) * .55)}
.record-lock-pill{width:42px;height:48px;border-radius:21px;background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line);box-shadow:0 5px 20px var(--shadow);display:grid;place-items:center;transform:scale(calc(.9 + var(--p) * .12));position:relative;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.record-lock-pill svg{position:absolute;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);transition:opacity .12s,color .12s}
.record-lock-closed{opacity:var(--p)}.record-lock-open{opacity:calc(1 - var(--p))}.record-lock-guide.is-near .record-lock-pill svg{color:var(--accent)}
.record-lock-arrow{height:34px;display:grid;place-items:center;overflow:hidden;transform:scaleY(calc(1 - var(--p) * .62));transform-origin:bottom}
.record-lock-arrow svg{width:18px;height:30px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

#composer.recording{display:flex!important;align-items:center;gap:6px}
#composer.recording .capsule,#composer.recording #sendBtn,#composer.recording #vnoteBtn{display:none!important}
#composer.recording .recbar{display:flex!important;visibility:visible!important;pointer-events:auto!important;flex:1 1 auto!important}
#composer.recording #micBtn{display:grid!important;visibility:visible!important;pointer-events:auto!important;color:var(--danger);background:color-mix(in srgb,var(--danger) 11%,var(--panel));transform:translateY(calc(var(--record-lock-progress,0) * -5px)) scale(calc(1 + var(--record-lock-progress,0) * .04))}
#composer.recording[data-recording-mode="locked"] #micBtn,#composer.recording[data-recording-mode="paused"] #micBtn,#composer.recording[data-recording-mode="error"] #micBtn,#composer.recording[data-recording-mode="uploading"] #micBtn{display:none!important}
#composer.recording[data-recording-mode="held"] .rec-delete,#composer.recording[data-recording-mode="held"] .rec-pause,#composer.recording[data-recording-mode="held"] .rec-send,#composer.recording[data-recording-mode="locking"] .rec-delete,#composer.recording[data-recording-mode="locking"] .rec-pause,#composer.recording[data-recording-mode="locking"] .rec-send,#composer.recording[data-recording-mode="cancelling"] .rec-delete,#composer.recording[data-recording-mode="cancelling"] .rec-pause,#composer.recording[data-recording-mode="cancelling"] .rec-send{display:none}
#composer.recording[data-recording-mode="held"] .rec-live-wave,#composer.recording[data-recording-mode="locking"] .rec-live-wave,#composer.recording[data-recording-mode="cancelling"] .rec-live-wave{max-width:120px}
#composer.rec-locked .rec-hint{display:none}
#composer.rec-paused .rec-dot{animation:none;opacity:.35}
#composer.rec-paused .rec-pause-icon{display:none}#composer.rec-paused .rec-resume-icon{display:block}
#composer.rec-error .rec-hint{display:block;color:var(--danger)}
#composer.rec-error .rec-live-wave{display:none}
#composer.rec-error .rec-pause,#composer.rec-uploading .rec-pause{display:none}
#composer.rec-uploading .rec-hint{display:block}
#composer.rec-uploading .rec-action{pointer-events:none;opacity:.45}
#composer.rec-uploading .rec-dot{animation:none;opacity:.55}
body:has(#composer.recording) #emojiPanel,body:has(#composer.recording) #gamePanel,body:has(#composer.recording) #slashMenu{display:none!important;visibility:hidden!important;pointer-events:none!important}

@media(max-width:420px){.recbar{gap:6px;padding-left:8px}.rec-live-wave{min-width:32px}.rec-hint{font-size:11.5px}.record-lock-guide{right:5px}}

/* Reply and edit stay in the existing flow above the composer. */
#replyBar,#editBar{
  gap:10px;padding:6px max(12px,var(--sar,0px)) 2px max(14px,var(--sal,0px));
  background:var(--glass-bg,var(--panel))!important;
  border-top:0!important;box-shadow:none!important;
}
#replyBar .q,#editBar .q{padding:3px 0 3px 10px!important;border-left:2px solid var(--accent)!important;line-height:1.45}
#replyBar .q b,#editBar .q b{font-size:12px;font-weight:600}
#replyBar .q span,#editBar .q span{font-size:13px}
#replyBar .cancel-x,#editBar .cancel-x{width:44px;height:44px;padding:0;display:grid;place-items:center;border:0!important;border-radius:14px;background:transparent;color:var(--label-secondary);box-shadow:none!important}
#replyBar .cancel-x:hover,#editBar .cancel-x:hover{background:var(--hover)}
#replyBar .cancel-x svg,#editBar .cancel-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media(max-width:899px){
  #chatScreen{--composer-picker-offset:0px;--composer-context-height:0px}
  html.entity-picker-open #chatScreen{--composer-picker-offset:var(--entity-picker-height)}
  html.entity-picker-expanded #chatScreen{--composer-picker-offset:var(--entity-picker-expanded-height)}
  #chatScreen:has(#replyBar:not([hidden]),#editBar:not([hidden])){--composer-context-height:52px}
  #chatScreen:has(#replyBar:not([hidden])):has(#editBar:not([hidden])){--composer-context-height:104px}
  #replyBar,#editBar{
    position:absolute;z-index:26;left:0;right:0;height:52px;
    bottom:calc(var(--composer-height,56px) + var(--composer-picker-offset));
  }
  #replyBar:not([hidden])~#editBar{bottom:calc(var(--composer-height,56px) + var(--composer-picker-offset) + 52px)}
  #chatScreen:has(#replyBar:not([hidden]),#editBar:not([hidden])) #msgs{
    padding-bottom:calc(var(--composer-height,56px) + var(--composer-context-height) + var(--composer-picker-offset) + 8px)!important;
  }
}
@media(min-width:900px){
  #replyBar,#editBar{padding:8px clamp(20px,3vw,48px) 0;justify-content:center}
  #replyBar .q,#editBar .q{flex:1 1 760px;max-width:760px;margin-right:8px}
}

/* Official Lumo channel — notification action, no composer */
.channel-bar{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 0 10px 10px;
  padding: 10px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(31,131,255,.16), rgba(107,71,255,.14));
  border: 1px solid rgba(110,150,255,.22);
}
.channel-bar[hidden]{display:none!important}
.channel-bar-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.channel-bar-text b{font-size:13px;font-weight:750;color:var(--text)}
.channel-bar-text span{font-size:12px;color:var(--muted)}
.channel-mute-btn{
  min-width:44px;height:42px;border-radius:14px;border:1px solid rgba(110,150,255,.25);
  background:rgba(14,28,59,.55);color:#eef2ff;font-size:20px;cursor:pointer;
  display:grid;place-items:center;flex:none;
  padding:0 16px;font-size:13px;font-weight:750;white-space:nowrap;
}
.channel-mute-btn:hover{background:rgba(30,50,90,.7)}
.channel-mute-btn.is-muted{opacity:.7}
#composer.channel-hidden{display:none!important}

.channel-pinned{
  display:flex;align-items:center;gap:10px;width:calc(100% - 20px);margin:8px 10px 0;
  padding:9px 12px;border:1px solid rgba(110,150,255,.18);border-radius:14px;
  background:rgba(26,47,88,.42);color:var(--text);text-align:left;cursor:pointer;
}
.channel-pinned[hidden]{display:none!important}
.channel-pinned-mark{font-size:26px;line-height:1;color:var(--accent)}
.channel-pinned-copy{display:flex;flex-direction:column;min-width:0;gap:2px}
.channel-pinned-copy b{font-size:12px;color:var(--accent)}
.channel-pinned-copy span{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}


/* Hide leftover game UI if any */
#gamePanel, #gameBtn, #slashMenu{ display: none !important; }

/* Unified stroke icons app-wide */
.icon-btn svg,
.rail-btn svg,
.call-btn svg,
.head-action svg{
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-btn svg{ width: 22px; height: 22px; }

/* OpenRouter AI draft assistant -------------------------------------------------- */
#aiBtn{
  display:grid!important;place-items:center;color:var(--accent);overflow:hidden;
  flex:0 0 0!important;width:0!important;min-width:0!important;opacity:0;pointer-events:none;
  transform:scale(.86);transition:opacity .12s ease,transform .12s ease,color .16s ease,background .16s ease;
}
#aiBtn.ai-visible{flex-basis:44px!important;width:44px!important;min-width:44px!important;opacity:1;pointer-events:auto;transform:scale(1)}
#aiBtn svg{width:20px!important;height:20px!important;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#aiBtn.ai-loading svg{animation:aiWandLumo .9s ease-in-out infinite}
@keyframes aiWandLumo{50%{opacity:.45}}
/* The assistant remains compact, with the same existing actions and states. */
.ai-assist-root{position:fixed;z-index:130;color:var(--label-primary,var(--text));font:inherit}
.ai-assist-root.ai-mobile{inset:0}
.ai-assist-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.08)}
.ai-assist-sheet,.ai-assist-popover{position:fixed;box-sizing:border-box;width:280px;max-height:calc(100dvh - 16px);padding:8px;border:.5px solid var(--separator);border-radius:18px;background:var(--surface-primary,var(--panel));box-shadow:0 8px 32px rgba(0,0,0,.16);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;pointer-events:auto}
.ai-assist-root.ai-desktop{inset:0;pointer-events:none}
.ai-drag{width:32px;height:4px;border-radius:999px;background:var(--label-tertiary,var(--muted));opacity:.4;margin:2px auto 8px}
.ai-assist-root .ai-drag{display:none}
.ai-assist-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 8px 10px}
.ai-assist-head>div{display:grid;gap:4px;min-width:0}
.ai-assist-head strong{font-size:15px;font-weight:650;letter-spacing:-.2px}
.ai-assist-head span{font-size:12px;line-height:1.4;color:var(--label-secondary,var(--muted))}
.ai-close{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:14px;background:transparent;color:var(--label-secondary,var(--muted))}
.ai-close:hover{background:var(--hover)}
.ai-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ai-action-list{display:grid;gap:2px;padding:2px;border-radius:14px;background:var(--background-secondary,var(--panel-2))}
.ai-action{width:100%;min-height:48px;padding:8px 10px;display:grid;grid-template-columns:28px 1fr 12px;align-items:center;gap:8px;border:0;border-radius:12px;background:transparent;color:var(--label-primary,var(--text));text-align:left;font:inherit}
.ai-action:hover{background:var(--hover)}
.ai-action:active{transform:scale(.99)}
.ai-action>span{display:grid;place-items:center;color:var(--accent)}
.ai-action svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ai-action b{font-weight:500;font-size:15px;line-height:1.35}
.ai-action i{font-style:normal;font-size:18px;color:var(--label-tertiary,var(--muted))}
.ai-action[data-tone]{grid-template-columns:1fr}
.ai-loading-row,.ai-error{min-height:108px;display:flex;align-items:center;gap:12px;padding:16px 10px}
.ai-loading-row b,.ai-error b{flex:1;font-size:14px;font-weight:500;line-height:1.45}
.ai-loading-row button,.ai-error button,.ai-preview-actions button,.ai-variant{min-height:44px;border:0;border-radius:12px;background:var(--background-secondary,var(--panel-2));color:var(--accent);padding:10px 14px;font:inherit;font-size:14px;font-weight:500}
.ai-loading-row button:hover,.ai-error button:hover,.ai-preview-actions button:hover,.ai-variant:hover{background:var(--hover)}
.ai-spinner{flex:none;width:18px;height:18px;border:2px solid color-mix(in srgb,var(--accent) 24%,transparent);border-top-color:var(--accent);border-radius:50%;animation:aiSpin .7s linear infinite}
@keyframes aiSpin{to{transform:rotate(360deg)}}
.ai-error{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
.ai-error span{color:var(--label-secondary,var(--muted));font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.ai-error .ai-retry{grid-row:1/3;grid-column:2}
.ai-preview-text{margin:0 2px 10px;padding:14px;min-height:84px;max-height:46vh;overflow:auto;border:.5px solid var(--separator);border-radius:14px;background:var(--background-secondary,var(--panel-2));white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.5}
.ai-preview-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:0 2px}
.ai-preview-actions .primary{background:var(--accent);color:#fff}
.ai-preview-actions .primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--label-primary))}
.ai-variant{margin:6px 2px 0;background:transparent;color:var(--accent)}
.ai-undo-toast{position:fixed;z-index:150;left:50%;bottom:calc(86px + var(--sab,0px));transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);padding:4px 6px 4px 14px;border:.5px solid var(--separator);border-radius:16px;background:var(--surface-primary,var(--panel));box-shadow:0 6px 24px rgba(0,0,0,.14);font-size:13px;line-height:1.4}
.ai-undo-toast button{flex:none;min-height:44px;border:0;border-radius:12px;background:transparent;color:var(--accent);padding:0 10px;font:inherit;font-weight:600}
.ai-undo-toast button:hover{background:var(--hover)}
.ai-stale-note{margin:0 2px 10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--warning,#f59e0b) 12%,var(--panel-2));color:var(--text);font-size:12.5px;line-height:1.45}
@media(min-width:900px){.ai-undo-toast{bottom:28px}.ai-assist-popover .ai-action b{font-size:14px}.ai-assist-popover .ai-action{min-height:44px}}

/* Attachment UI shares the composer's neutral surfaces and control radii. */
.attachment-overlay .attachment-sheet,.attachment-preview-overlay .attachment-preview-sheet{
  background:var(--surface-primary,var(--panel))!important;border:.5px solid var(--separator)!important;
  border-radius:22px!important;box-shadow:0 12px 44px rgba(0,0,0,.18)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;
}
.attachment-overlay .attachment-sheet{width:min(360px,calc(100vw - 24px))!important;padding:16px!important}
.attachment-sheet .mhead{padding:4px 4px 12px!important;color:var(--label-primary)!important;font-size:16px!important;font-weight:650;letter-spacing:-.2px}
.attachment-sheet::before{display:none!important}
.attachment-sheet .attachment-actions{gap:8px;margin:0 0 12px}
.attachment-sheet .attachment-actions button{min-height:96px;gap:10px;border-radius:16px;background:var(--background-secondary);font-size:13px;font-weight:500;box-shadow:none}
.attachment-sheet .attachment-actions button:hover{background:var(--hover)}
.attachment-sheet .attachment-actions button:active{transform:scale(.98)}
.attachment-sheet .attachment-action-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--accent-muted);color:var(--accent)}
.attachment-sheet .attachment-action-icon>svg{width:22px;height:22px}
.attachment-sheet .attachment-cancel{min-height:44px;border:0;border-radius:12px;background:var(--background-secondary);color:var(--label-secondary);box-shadow:none;font-size:14px;font-weight:500}
.attachment-sheet .attachment-cancel:hover{background:var(--hover)}
.attachment-preview-overlay .attachment-preview-sheet{width:min(520px,calc(100vw - 24px))!important;max-width:520px!important;padding:14px!important;gap:12px}
.attachment-preview-head{min-height:44px}
.attachment-preview-head strong{font-size:15px;font-weight:600}
.attachment-preview-head button{min-height:44px;border-radius:12px;padding:0 4px;font-size:14px}
.attachment-preview-head button:hover{background:var(--hover)}
.attachment-preview-sheet .attachment-preview-image{border-radius:14px}
.attachment-preview-sheet .attachment-mode-seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--background-secondary)}
.attachment-mode-seg button{flex:1;min-width:0;min-height:44px;padding:6px 10px;border:0;border-radius:10px;background:transparent;color:var(--label-secondary);font:inherit;font-size:14px;font-weight:500;transition:background-color .16s ease,color .16s ease}
.attachment-mode-seg button.on{background:var(--surface-primary);color:var(--label-primary);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.attachment-preview-sheet .attachment-caption textarea{min-height:76px;padding:12px 14px;border:.5px solid var(--separator);border-radius:14px;background:var(--background-secondary);font-size:16px;line-height:1.4}
.attachment-caption textarea::placeholder{color:var(--label-tertiary)}
.attachment-preview-sheet .attachment-file-preview{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:4px 12px;padding:16px;border-radius:14px;background:var(--background-secondary)}
.attachment-file-preview>span{grid-row:1/3;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--accent-muted);color:var(--accent)}
.attachment-file-preview strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500}
.attachment-file-preview small{min-width:0;overflow-wrap:anywhere;font-size:12px;color:var(--label-secondary)}
.attachment-preview-actions .send-primary{background:var(--accent)!important;color:#fff!important;border:0!important;border-radius:16px;font-size:22px}
#chatScreen:has(#replyBar:not([hidden]),#editBar:not([hidden])) #composer{border-top:0!important}
@media(max-width:899px){
  .attachment-overlay .attachment-sheet,.attachment-preview-overlay .attachment-preview-sheet{
    width:100%!important;max-width:none!important;border-radius:24px 24px 0 0!important;
    padding:10px max(12px,var(--sar,0px)) calc(12px + var(--sab,0px)) max(12px,var(--sal,0px))!important;
    border-bottom:0!important;max-height:calc(100dvh - 12px);
  }
  .attachment-sheet .attachment-handle{width:32px;height:4px;margin:0 auto 10px;opacity:.4}
  .attachment-preview-sheet .attachment-preview-image{max-height:46dvh}
}
@media(max-height:480px){
  .ai-assist-sheet{max-height:calc(100dvh - 12px)}
  .attachment-preview-sheet .attachment-preview-image{max-height:32dvh}
}