/* TASK 681: conversation ergonomics. App workspaces keep their own layout. */
#app{--chat-control:40px;--chat-body-size:1rem;--chat-focus:var(--brand);}
html[data-theme="slate-mint"] #app{--chat-focus:#147761;}
#app .chat-header{gap:10px!important;padding-inline:16px!important;box-shadow:none!important;}
#app .chat-header .header-info{min-width:0;line-height:1.5;}
#app .chat-header .header-info strong{font-size:.95rem!important;line-height:1.6;}
#app .chat-header .header-info small{font-size:.75rem!important;line-height:1.6;}
#app .chat-header .chat-actions{gap:8px!important;align-items:center;}
#app .chat-header :is(.action-btn,.home-button,.chat-menu-button){width:var(--chat-control)!important;height:var(--chat-control)!important;min-width:var(--chat-control)!important;min-height:var(--chat-control)!important;border-radius:12px!important;box-shadow:none!important;}
#app .chat-header button[hidden]{display:none!important;}
#app :is(.chat-header,#sendForm,#replyBar) button:focus-visible{outline:2px solid var(--chat-focus)!important;outline-offset:3px!important;}
#app #messages:not(.miniapp-workspace):not(.otp-vault-workspace){gap:12px!important;padding-inline:clamp(16px,4vw,64px)!important;scroll-padding-block:24px 100px;}
#app #messages:not(.miniapp-workspace):not(.otp-vault-workspace)>.message:not(.background-upload-message){max-width:min(76%,660px)!important;padding:12px 15px!important;border-radius:18px!important;box-shadow:0 2px 7px rgba(0,0,0,.09)!important;transform:none!important;transition:background-color .15s ease!important;}
#app #messages:not(.miniapp-workspace):not(.otp-vault-workspace)>.message.mine:not(.background-upload-message){border-end-end-radius:7px!important;}
#app #messages:not(.miniapp-workspace):not(.otp-vault-workspace)>.message:not(.mine):not(.background-upload-message){border-end-start-radius:7px!important;}
#app #messages .message .message-body{min-width:0;max-width:100%;}
#app #messages .message .message-body>.message-text{font-size:var(--chat-body-size)!important;line-height:1.85!important;overflow-wrap:anywhere;word-break:normal;white-space:pre-wrap;}
#app #messages .message .message-footer{gap:8px!important;min-height:26px;padding-top:8px!important;max-width:100%;}
#app #messages .message :is(time,.message-status){font-size:.7rem!important;line-height:1.5!important;opacity:1!important;}
#app #messages .message .message-action-toggle{min-width:30px!important;min-height:30px!important;box-shadow:none!important;}
#app #messages .message :is(.message-reactions,.message-reactions-static){flex-wrap:wrap;gap:4px;min-width:0;max-width:100%;}
#app #sendForm.composer{gap:8px!important;padding:8px!important;border-radius:20px!important;box-shadow:0 4px 16px rgba(20,44,55,.13)!important;align-items:end!important;}
#app #sendForm.composer .composer-tools{gap:6px!important;align-items:center!important;}
#app #sendForm.composer :is(.attach,.emoji-button,.record-audio,.send){width:var(--chat-control)!important;height:var(--chat-control)!important;min-width:var(--chat-control)!important;min-height:var(--chat-control)!important;flex:0 0 var(--chat-control)!important;padding:9px!important;border-radius:12px!important;box-shadow:none!important;}
#app #sendForm.composer :is(.attach,.emoji-button,.record-audio){background:transparent!important;border-color:transparent!important;}
#app #sendForm.composer button svg{display:block;width:22px!important;height:22px!important;margin:auto;}
#app #sendForm.composer #text{min-width:0!important;min-height:44px!important;padding:10px 12px!important;line-height:1.6!important;font-size:1rem!important;border-radius:12px!important;box-shadow:none!important;}
#app #sendForm.composer #text::placeholder{opacity:1!important;}
html[data-theme="slate-mint"] #app #sendForm.composer #text::placeholder{color:#526e72!important;-webkit-text-fill-color:#526e72!important;}
html[data-theme="light"] #app #sendForm.composer #text::placeholder{color:#59677b!important;}
#app #sendForm.composer:focus-within{border-color:var(--chat-focus)!important;}
#app #replyBar .reply-preview{padding:10px 12px!important;line-height:1.6;}
#app #replyBar #cancelReply{min-width:40px!important;min-height:40px!important;}
#app #messages .message .reply-quote{padding:8px 10px!important;border-radius:10px!important;line-height:1.65!important;}
@media(max-width:700px){
  #app{--chat-control:40px;}
  #app .chat-header{gap:6px!important;padding-inline:8px!important;}
  #app .chat-header .chat-actions{gap:4px!important;}
  #app .chat-header .header-avatar{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;flex-basis:36px!important;}
  #app .chat-header .header-info strong{font-size:.85rem!important;}
  #app #messages:not(.miniapp-workspace):not(.otp-vault-workspace){padding-inline:12px!important;gap:10px!important;}
  #app #messages:not(.miniapp-workspace):not(.otp-vault-workspace)>.message:not(.background-upload-message){max-width:90%!important;padding:10px 12px!important;}
  #app #sendForm.composer{gap:4px!important;padding:6px!important;border-radius:18px!important;}
  #app #sendForm.composer .composer-tools{gap:2px!important;}
  #app #sendForm.composer #text{padding-inline:8px!important;}
}
@media(max-width:360px){
  #app{--chat-control:36px;}
  #app .chat-header .header-avatar{display:none!important;}
}
@media(prefers-reduced-motion:reduce){#app #messages .message{transition:none!important;}}

/* TASK 682: quiet surfaces, readable ink, one primary action. */
html{--cc-surface:#1b2933;--cc-soft:#22323c;--cc-ink:#e3ebef;--cc-muted:#b4c2cb;--cc-line:#3a4b57;--cc-accent:#67b9a8;--cc-selected:#293f44;--cc-primary:#397f73;--cc-danger:#ed9d9b;--cc-incoming:#1d2d37;--cc-outgoing:#283d43;}
html[data-theme="light"]{--cc-surface:#fff;--cc-soft:#f3f5f8;--cc-ink:#344152;--cc-muted:#59697b;--cc-line:#d9e0e7;--cc-accent:#456eaa;--cc-selected:#edf2f9;--cc-primary:#486ea7;--cc-danger:#a13e45;--cc-incoming:#fff;--cc-outgoing:#edf2f8;}
html[data-theme="slate-mint"]{--cc-surface:#f9fbfa;--cc-soft:#f0f4f3;--cc-ink:#354d4b;--cc-muted:#5e716e;--cc-line:#d3dfdb;--cc-accent:#327b67;--cc-selected:#e7efeb;--cc-primary:#387b68;--cc-danger:#a0474c;--cc-incoming:#fafcfb;--cc-outgoing:#e8f0eb;}
html[data-theme="classic"]{--cc-surface:#30291f;--cc-soft:#3b3328;--cc-ink:#eee5d5;--cc-muted:#c8baa1;--cc-line:#5b503e;--cc-accent:#d3b371;--cc-selected:#463d2d;--cc-primary:#816838;--cc-danger:#efa69c;--cc-incoming:#342d23;--cc-outgoing:#42392a;}
html[data-theme] #app .chat-header :is(button,.header-avatar){box-shadow:none!important;}
html[data-theme] #app .chat-header :is(.action-btn,.home-button,.chat-menu-button,.desktop-sidebar-toggle){background:var(--cc-surface)!important;border:1px solid var(--cc-line)!important;color:var(--cc-ink)!important;}
html[data-theme] #app .chat-header button svg{color:inherit!important;stroke:currentColor!important;}
html[data-theme] #app #messages:not(.miniapp-workspace):not(.otp-vault-workspace)>.message:not(.background-upload-message){box-shadow:none!important;border-color:var(--cc-line)!important;}
html[data-theme] #app #messages:not(.miniapp-workspace):not(.otp-vault-workspace):not(.has-user-background)>.message:not(.background-upload-message){background:var(--cc-incoming)!important;}
html[data-theme] #app #messages:not(.miniapp-workspace):not(.otp-vault-workspace):not(.has-user-background)>.message.mine:not(.background-upload-message){background:var(--cc-outgoing)!important;}
html[data-theme] #app #sendForm.composer{background:var(--cc-surface)!important;border-color:var(--cc-line)!important;box-shadow:0 2px 8px rgba(20,40,48,.06)!important;}
html[data-theme] #app #sendForm.composer .send{background:var(--cc-primary)!important;border-color:var(--cc-primary)!important;color:#fff!important;}
html[data-theme] #app #sendForm.composer :is(.attach,.emoji-button,.record-audio){color:var(--cc-muted)!important;}
html[data-theme] #app #sendForm.composer .record-audio.recording{color:var(--cc-danger)!important;animation:none!important;}
html[data-theme] #app #messages .message :is(.message-action-toggle,.reaction-display,.message-reaction){box-shadow:none!important;}
html[data-theme] #app #messages .message :is(.message-action-menu,.reaction-picker){box-shadow:0 4px 14px rgba(20,40,48,.1)!important;}

/* Recording: status and actions above a full-width playback preview. */
html[data-theme] #app #inlineAudioRecorder{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px 12px!important;
  padding:12px!important;min-height:68px!important;border:1px solid var(--cc-line)!important;
  border-radius:16px!important;background:var(--cc-surface)!important;color:var(--cc-ink)!important;box-shadow:none!important;
}
html[data-theme] #app #inlineAudioRecorder[hidden]{display:none!important;}
#app #inlineAudioRecorder .inline-audio-status{display:grid!important;grid-template-columns:8px auto 1fr;align-items:center!important;gap:6px 8px!important;max-width:none!important;min-width:0!important;}
html[data-theme] #app #inlineAudioRecorder .inline-audio-status strong{color:var(--cc-ink)!important;font-size:.8rem!important;}
html[data-theme] #app #inlineAudioRecorder .inline-audio-status time{color:var(--cc-muted)!important;font-size:.8rem!important;direction:ltr;justify-self:start;font-variant-numeric:tabular-nums;}
html[data-theme] #app #inlineAudioRecorder .inline-audio-status small{display:block!important;grid-column:1/-1;max-width:100%;font-size:.74rem!important;line-height:1.65;color:var(--cc-muted)!important;white-space:normal;}
html[data-theme] #app #inlineAudioRecorder .inline-audio-dot{box-shadow:none!important;background:var(--cc-accent)!important;animation:none!important;}
html[data-theme] #app #inlineAudioRecorder.is-recording .inline-audio-dot{background:var(--cc-danger)!important;}
#app #inlineAudioRecorder .inline-audio-actions{gap:6px!important;}
html[data-theme] #app #inlineAudioRecorder .inline-audio-actions button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:9px!important;border:1px solid var(--cc-line)!important;border-radius:11px!important;background:var(--cc-soft)!important;color:var(--cc-ink)!important;box-shadow:none!important;}
html[data-theme] #app #inlineAudioRecorder .inline-audio-actions .audio-inline-send{background:var(--cc-primary)!important;border-color:var(--cc-primary)!important;color:#fff!important;}
html[data-theme] #app #inlineAudioRecorder .inline-audio-actions .audio-inline-cancel{color:var(--cc-danger)!important;}
#app #inlineAudioRecorder .inline-audio-actions svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
#app #inlineAudioRecorder .inline-audio-preview{grid-column:1/-1;grid-row:2;min-width:0!important;}
#app #inlineAudioRecorder .inline-audio-preview[hidden]{display:none!important;}
#app #inlineAudioRecorder .inline-audio-preview .waveform{height:36px!important;}
html[data-theme] #app #inlineAudioRecorder .inline-audio-preview .waveform-play{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;background:var(--cc-soft)!important;color:var(--cc-ink)!important;border:1px solid var(--cc-line)!important;box-shadow:none!important;}
html[data-theme] #app #inlineAudioRecorder .waveform-time{min-width:68px!important;font-size:.75rem!important;color:var(--cc-muted)!important;}
#app #inlineAudioRecorder button:focus-visible{outline:2px solid var(--cc-accent)!important;outline-offset:2px;}

/* Forwarding: fixed header/search, scrollable destinations, clear footer. */
html[data-theme] #forwardModal{background:rgba(16,29,36,.35)!important;backdrop-filter:blur(5px)!important;animation:none!important;}
html[data-theme] #forwardModal .forward-panel{max-height:calc(100dvh - 32px)!important;border:1px solid var(--cc-line)!important;border-radius:20px!important;background:var(--cc-surface)!important;color:var(--cc-ink)!important;box-shadow:0 10px 32px rgba(15,30,35,.14)!important;animation:none!important;overflow:hidden;}
html[data-theme] #forwardModal :is(.forward-header,.forward-footer){background:var(--cc-surface)!important;border-color:var(--cc-line)!important;box-shadow:none!important;padding:16px 20px!important;min-height:72px;flex-shrink:0;}
html[data-theme] #forwardModal :is(h3,strong,.forward-destinations-head){color:var(--cc-ink)!important;-webkit-text-fill-color:currentColor!important;}
html[data-theme] #forwardModal :is(small,.forward-kicker,.forward-source-label,.forward-target-kind){color:var(--cc-muted)!important;-webkit-text-fill-color:currentColor!important;font-size:.75rem!important;line-height:1.6;}
html[data-theme] #forwardModal :is(.forward-source,.forward-search,.forward-attachments,.forward-tabs){border:1px solid var(--cc-line)!important;background:var(--cc-soft)!important;box-shadow:none!important;border-radius:12px!important;}
html[data-theme] #forwardModal .forward-source{margin:12px 20px!important;padding:10px 12px!important;flex-shrink:0;}
#forwardModal .forward-source-content strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;overflow-wrap:anywhere;}
html[data-theme] #forwardModal .forward-source-icon{background:transparent!important;color:var(--cc-accent)!important;}
#forwardModal .forward-source::before,#forwardModal .forward-source::after,#forwardModal .forward-list::before,#forwardModal .forward-list::after{display:none!important;}
html[data-theme] #forwardModal .forward-search{min-height:44px!important;margin-inline:20px!important;}
html[data-theme] #forwardModal .forward-search input{min-width:0!important;color:var(--cc-ink)!important;background:transparent!important;font-size:1rem!important;box-shadow:none!important;}
html[data-theme] #forwardModal .forward-search input::placeholder{color:var(--cc-muted)!important;-webkit-text-fill-color:var(--cc-muted)!important;}
html[data-theme] #forwardModal .forward-list{min-height:100px!important;padding:4px 12px 12px!important;overscroll-behavior:contain;background:var(--cc-surface)!important;color:var(--cc-ink)!important;}
html[data-theme] #forwardModal .forward-target{margin-block:2px!important;padding:10px!important;min-height:64px!important;border-radius:12px!important;border:1px solid transparent!important;background:transparent!important;box-shadow:none!important;transform:none!important;}
html[data-theme] #forwardModal :is(.forward-target:hover,.forward-attachment:hover){background:var(--cc-soft)!important;}
html[data-theme] #forwardModal .forward-attachment{background:var(--cc-surface)!important;color:var(--cc-ink)!important;border-color:var(--cc-line)!important;box-shadow:none!important;}
html[data-theme] #forwardModal :is(.forward-target.selected,.forward-attachment.selected){background:var(--cc-selected)!important;border-color:var(--cc-accent)!important;box-shadow:none!important;}
#forwardModal .forward-target .forward-avatar{width:40px!important;height:40px!important;min-width:40px!important;box-shadow:none!important;}
#forwardModal .forward-target input{width:20px!important;height:20px!important;min-height:20px!important;flex:0 0 20px;accent-color:var(--cc-accent);}
#forwardModal .forward-target-info{min-width:0;flex:1;gap:4px!important;}
#forwardModal .forward-target-info strong{font-size:.9rem!important;line-height:1.6!important;}
#forwardModal .forward-target-name-line{min-width:0;flex-wrap:wrap;gap:6px;}
html[data-theme] #forwardModal .forward-target-kind{font-style:normal;background:var(--cc-soft)!important;border-color:var(--cc-line)!important;}
html[data-theme] #forwardModal .forward-tabs button{background:transparent!important;color:var(--cc-muted)!important;box-shadow:none!important;}
html[data-theme] #forwardModal .forward-tabs button[aria-selected="true"]{background:var(--cc-surface)!important;color:var(--cc-ink)!important;}
html[data-theme] #forwardModal :is(.close-btn,#clearForwardSearch,#clearForwardTargets,.forward-attachments-toggle){min-height:40px!important;color:var(--cc-ink)!important;background:transparent!important;box-shadow:none!important;transform:none!important;}
html[data-theme] #forwardModal .forward-footer .primary{min-height:44px!important;min-width:116px!important;border-radius:12px!important;background:var(--cc-primary)!important;border-color:var(--cc-primary)!important;color:#fff!important;box-shadow:none!important;transform:none!important;filter:none!important;}
html[data-theme] #forwardModal .forward-footer .primary:disabled{opacity:.45!important;cursor:not-allowed;}
html[data-theme] #forwardModal .forward-footer .primary :is(span,svg){color:inherit!important;-webkit-text-fill-color:currentColor!important;}
#forwardModal :is(button,input):focus-visible{outline:2px solid var(--cc-accent)!important;outline-offset:2px;}
@media(max-width:700px){
  #app #inlineAudioRecorder{gap:8px!important;padding:10px!important;}
  html[data-theme] #app #inlineAudioRecorder .inline-audio-status small{display:none!important;}
  #app #inlineAudioRecorder .inline-audio-status{grid-template-columns:8px minmax(0,1fr)!important;}
  #app #inlineAudioRecorder .inline-audio-status time{grid-column:2;}
  html[data-theme] #forwardModal{padding:8px!important;align-items:end;}
  html[data-theme] #forwardModal .forward-panel{width:100%!important;max-height:calc(100dvh - 16px)!important;border-radius:18px!important;}
  html[data-theme] #forwardModal :is(.forward-header,.forward-footer){padding:12px 14px!important;}
  html[data-theme] #forwardModal .forward-source{margin:10px 14px!important;}
  html[data-theme] #forwardModal .forward-search{margin-inline:14px!important;}
  #forwardModal .forward-footer{padding-bottom:calc(12px + env(safe-area-inset-bottom))!important;}
}