/* Canonical composer geometry. This is the only file that owns composer layout/sizing. */
#composer{
  box-sizing:border-box;
  width:100%;
  min-height:52px;
  display:flex;
  align-items:flex-end;
  gap:6px;
  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:22px;
  background:var(--surface-primary,var(--panel-2));
  box-shadow:none;
  transition:border-color .2s,box-shadow .2s;
}
#composer .capsule:focus-within{
  border-color:color-mix(in srgb,var(--accent) 58%,var(--separator,var(--line)));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent);
}
#composer #input{
  flex:1 1 auto;
  min-width:0;
  min-height:40px;
  max-height:120px;
  margin:0;
  padding:10px 5px;
  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::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:50%;
  display:grid;
  place-items:center;
  align-self:flex-end;
  background:transparent;
  color:var(--label-secondary,var(--muted));
  box-shadow:none;
}
#composer .capsule .icon-btn:hover,
#composer .capsule-actions .icon-btn:hover{background:var(--hover);color:var(--accent)}
#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:50%;
  display:grid;
  place-items:center;
  box-shadow:none;
}
#sendBtn{background:var(--accent);color:#fff}
#micBtn,#vnoteBtn,.composer-primary-btn:not(#sendBtn){background:transparent;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(.92)}
#sendBtn:disabled{opacity:.45}
@keyframes sendPop{0%{transform:scale(1)}40%{transform:scale(1.12) rotate(5deg)}100%{transform:scale(1)}}
#sendBtn.pop{animation:sendPop .3s 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}
}
@media(min-width:900px){
  #composer{position:relative;z-index:1;justify-content:center;padding:7px clamp(20px,8vw,110px) 8px}
  #composer .capsule{max-width:760px;flex:1 1 760px}
}

.recbar{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:5px 6px 5px 8px;color:var(--danger);background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);border-radius:20px;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:.35;transform:scale(.82)}}
#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{width:36px;height:36px;min-width:36px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--accent);cursor:pointer}
.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-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:7px}.rec-live-wave{min-width:44px}.rec-hint{font-size:11.5px}.rec-action{width:34px;height:34px;min-width:34px}.record-lock-guide{right:5px}}

/* 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; }

/* Qwen 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:flex-basis .18s ease,width .18s ease,min-width .18s ease,opacity .16s ease,transform .18s ease,color .18s ease,background .18s 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;transform:scale(.88) rotate(-8deg)}}
.ai-assist-root{position:fixed;z-index:130;color:var(--text);font:inherit}
.ai-assist-root.ai-mobile{inset:0;display:flex;align-items:flex-end;justify-content:center}
.ai-assist-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ai-assist-sheet{position:relative;width:100%;max-height:min(78dvh,620px);overflow:auto;padding:7px 10px calc(12px + var(--sab,0px));border-radius:18px 18px 0 0;background:var(--glass-regular,var(--panel));border-top:.5px solid var(--separator);box-shadow:0 -12px 36px rgba(0,0,0,.18);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px)}
.ai-assist-root.ai-desktop{inset:0;pointer-events:none}
.ai-assist-popover{position:fixed;width:280px;max-height:min(540px,72vh);overflow:auto;padding:7px;border:.5px solid var(--separator);border-radius:14px;background:var(--glass-regular,var(--panel));box-shadow:0 16px 46px rgba(0,0,0,.22);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);pointer-events:auto}
.ai-drag{width:36px;height:5px;border-radius:999px;background:var(--muted);opacity:.35;margin:2px auto 7px}.ai-desktop .ai-drag{display:none}
.ai-assist-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 8px 10px}.ai-assist-head>div{display:grid;gap:2px}.ai-assist-head strong{font-size:16px}.ai-assist-head span{font-size:12px;color:var(--muted)}
.ai-close{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color: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{overflow:hidden;border-radius:12px;background:var(--surface-primary,var(--panel-2))}.ai-action{width:100%;min-height:50px;padding:0 12px;display:grid;grid-template-columns:28px 1fr 14px;align-items:center;gap:8px;border:0;border-bottom:.5px solid var(--separator);background:transparent;color:var(--text);text-align:left;font:inherit}.ai-action:last-child{border-bottom:0}.ai-action:hover{background:var(--hover)}.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:16px}.ai-action i{font-style:normal;color:var(--muted)}
.ai-loading-row,.ai-error{min-height:100px;display:flex;align-items:center;gap:10px;padding:18px 12px}.ai-loading-row b,.ai-error b{flex:1}.ai-loading-row button,.ai-error button,.ai-preview-actions button,.ai-variant{border:0;border-radius:10px;background:var(--surface-secondary,var(--panel-2));color:var(--accent);padding:9px 12px;font:inherit}.ai-spinner{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:1fr auto}.ai-error span{color:var(--muted);font-size:13px}.ai-error .ai-retry{grid-row:1/3;grid-column:2}
.ai-preview-text{margin:0 4px 10px;padding:12px;min-height:84px;max-height:46vh;overflow:auto;border-radius:12px;background:var(--surface-primary,var(--panel-2));white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35}.ai-preview-actions{display:flex;justify-content:flex-end;gap:6px;padding:0 4px}.ai-preview-actions .primary{background:var(--accent);color:#fff}.ai-variant{margin:8px 4px 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:14px;padding:9px 12px;border:.5px solid var(--separator);border-radius:999px;background:var(--glass-regular,var(--panel));box-shadow:0 8px 30px rgba(0,0,0,.18);white-space:nowrap}.ai-undo-toast button{border:0;background:transparent;color:var(--accent);font:inherit;font-weight:600}
@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:46px}}
.ai-stale-note{margin:0 4px 10px;padding:9px 11px;border-radius:10px;background:color-mix(in srgb,var(--warning,#f59e0b) 12%,var(--panel-2));color:var(--text);font-size:12.5px;line-height:1.35}