/* Loaded after style.css. Composer controls share the app's existing theme. */
html[data-theme] .chat-app .composer.composer-modern,
.chat-app .composer.composer-modern {
  display:grid; grid-template-columns:minmax(0,1fr) 48px; grid-template-rows:auto;
  height:auto; min-height:68px; flex:0 0 auto; align-items:end; gap:8px;
  padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  border:0; background:var(--theme-chat,#efeae2); box-shadow:none;
}
.chat-app .composer.composer-modern.hidden { display:none; }
.composer-modern .composer-input-shell {
  grid-column:1; grid-row:1; display:flex; align-items:flex-end; min-width:0;
  border-radius:25px; padding:2px; background:var(--theme-panel,#fff);
  box-shadow:0 1px 2px rgba(15,35,28,.12);
}
.composer-modern .composer-input-shell:focus-within { box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent,#008069) 30%,transparent); }
html[data-theme] .chat-app .composer-modern #messageInput,
.chat-app .composer-modern #messageInput {
  grid-area:auto; width:100%; min-width:0; flex:1; height:44px; min-height:44px; max-height:112px;
  margin:0; border:0; outline:0; border-radius:0; padding:11px 2px;
  background:transparent; color:var(--text); box-shadow:none; font-family:inherit; font-size:16px; font-weight:400; line-height:22px;
  resize:none; overflow-wrap:anywhere;
}
html[data-theme] .chat-app .composer-modern #messageInput:focus { border:0; box-shadow:none; }
.composer-modern #messageInput::placeholder { color:var(--muted,#667781); opacity:1; }
html[data-theme] .chat-app .composer-modern #attachBtn,
.chat-app .composer-modern #emojiBtn {
  grid-area:auto; flex:0 0 44px; width:44px; height:44px; min-width:44px; padding:10px; margin:0;
  display:grid; place-items:center; align-self:flex-end; border:0; border-radius:50%; background:transparent; color:var(--muted,#667781);
}
.composer-modern svg { display:block; flex-shrink:0; pointer-events:none; }
html[data-theme] .chat-app .composer-modern #sendBtn,
html[data-theme] .chat-app .composer-modern #recordBtn,
.chat-app .composer-modern #sendBtn,.chat-app .composer-modern #recordBtn {
  grid-column:2; grid-row:1; display:grid; place-items:center; align-self:end; width:48px; min-width:48px; height:48px;
  padding:12px; margin:0; border:0; border-radius:50%; background:#008069; color:#fff; box-shadow:0 1px 2px rgba(15,35,28,.15);
}
html[data-theme="dark"] .chat-app .composer-modern #sendBtn,
html[data-theme="dark"] .chat-app .composer-modern #recordBtn { background:#00a884; }
html[data-theme] .chat-app .composer-modern #recordBtn.recording { background:#c53232; color:#fff; }
.composer-modern #sendBtn.hidden,.composer-modern #recordBtn.hidden,.composer-modern .hidden { display:none!important; }
.composer-modern button { cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; font-family:inherit; }
.composer-modern button:disabled { cursor:default; opacity:.55; }
.composer-modern button:focus-visible,.composer-modern input:focus-visible { outline:2px solid var(--theme-accent,#008069); outline-offset:2px; }
html[data-theme] .chat-app .composer-modern #attachBtn:hover,.chat-app .composer-modern #emojiBtn:hover { background:var(--theme-hover,#f0f2f5); }
.composer-modern .composer-draft { grid-column:1/-1; grid-row:1; display:flex; align-items:center; gap:8px; min-width:0; padding:4px 6px 4px 12px; border-radius:16px; background:var(--theme-panel,#fff); }
html[data-theme] .chat-app .composer-modern.has-attachment .composer-input-shell,
html[data-theme] .chat-app .composer-modern.has-attachment #sendBtn,
html[data-theme] .chat-app .composer-modern.has-attachment #recordBtn,
html[data-theme] .chat-app .composer-modern.has-attachment .composer-recording { grid-row:2; }
html[data-theme] .chat-app .composer-modern .file-name:not(:empty),.chat-app .composer-modern .file-name:not(:empty) {
  grid-area:auto; display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:8px; width:auto; min-width:0; max-width:none;
  height:auto; min-height:36px; padding:0; border:0; border-radius:0; background:transparent; color:var(--text);
  font-size:13px; font-weight:400; white-space:normal; overflow-wrap:anywhere;
}
.chat-app .composer-modern .file-name audio { width:min(320px,100%); max-width:100%; min-width:0; height:40px; }
.chat-app .composer-modern .file-name>span { display:inline; font-size:12px; white-space:normal; }
.chat-app .composer-modern #removeAttachBtn { grid-area:auto; flex:0 0 44px; display:grid; place-items:center; height:44px; width:44px; padding:10px; border:0; border-radius:50%; background:transparent; color:var(--muted); }
.composer-modern .composer-recording { grid-column:1; grid-row:1; display:flex; align-items:center; gap:8px; min-height:48px; min-width:0; padding:2px 6px 2px 15px; border-radius:25px; background:var(--theme-panel,#fff); color:var(--text); font-size:14px; }
.composer-modern.is-recording .composer-input-shell { display:none; }
.composer-modern .recording-dot { width:8px; height:8px; flex:0 0 8px; background:#df4a4a; border-radius:50%; }
.composer-modern #recordingLabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.composer-modern #recordingTime { font-variant-numeric:tabular-nums; color:var(--muted); }
.composer-modern #cancelRecordBtn { min-height:44px; margin-left:auto; padding:0 10px; border:0; background:transparent; border-radius:22px; color:var(--theme-link,#00735e); font-size:13px; }
.composer-modern .attach-menu {
  position:absolute; z-index:30; left:auto; right:68px; bottom:calc(100% + 4px); top:auto;
  display:grid; width:248px; max-width:calc(100% - 24px); padding:8px; margin:0; gap:2px;
  border:1px solid var(--theme-border,#e2e7e9); border-radius:18px; background:var(--theme-panel,#fff); box-shadow:0 6px 28px rgba(15,35,28,.16);
  max-height:min(340px,55dvh); overflow-y:auto;
}
html[data-theme] .chat-app .composer-modern .attach-menu button,.chat-app .composer-modern .attach-menu button {
  grid-area:auto; display:flex; align-items:center; justify-content:flex-start; gap:13px; width:100%; max-width:none; min-height:48px;
  padding:5px 10px; border:0; border-radius:10px; color:var(--text); background:transparent; text-align:left; font-size:14px; font-weight:400;
}
.chat-app .composer-modern .attach-menu button:hover { background:var(--theme-hover,#f0f2f5); }
html[data-theme] .chat-app .composer-modern .attach-menu #templateBtn { width:100%; height:auto; min-height:50px; padding:5px 10px; font-size:14px; font-weight:400; justify-content:flex-start; }
html[data-theme] body:not(.admin-body) .topnav .ghost,
html[data-theme] body:not(.admin-body) .topnav .user-chip { background:transparent; color:var(--theme-topbar-text); border-color:currentColor; }
.composer-modern .attach-kind { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:color-mix(in srgb,currentColor 10%,transparent); }
.composer-modern .attach-camera { color:#db5276; }.composer-modern .attach-video { color:#8264d6; }.composer-modern .attach-gallery { color:#477fc4; }.composer-modern .attach-file { color:#6578c3; }.composer-modern .attach-template { color:#168367; }
.composer-modern .emoji-picker {
  position:absolute; z-index:31; left:12px; bottom:calc(100% + 4px); display:flex; flex-direction:column;
  width:368px; max-width:calc(100% - 24px); height:340px; max-height:min(420px,50dvh); min-height:160px;
  border:1px solid var(--theme-border,#e2e7e9); border-radius:18px; padding:10px;
  background:var(--theme-panel,#fff); color:var(--text); box-shadow:0 6px 28px rgba(15,35,28,.16); overflow:hidden;
}
.composer-modern .emoji-search-row { display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.composer-modern #emojiSearch { width:100%; min-width:0; height:44px; border:0; border-radius:12px; background:var(--theme-panel-soft,#f0f2f5); color:var(--text); padding:10px 12px; font:inherit; font-size:16px; }
.composer-modern #emojiClose { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:10px; border:0; background:transparent; color:var(--muted); border-radius:50%; }
.composer-modern .emoji-categories { display:flex; flex:0 0 46px; gap:0; overflow-x:auto; scrollbar-width:thin; margin-top:4px; }
.composer-modern .emoji-categories button { min-width:44px; height:44px; padding:8px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:22px; }
.composer-modern .emoji-categories button[aria-selected="true"] { color:var(--theme-link,#008069); background:var(--theme-accent-soft,#e7f7f2); }
.composer-modern .emoji-results-label { padding:6px 5px; flex:0 0 auto; font-size:12px; color:var(--muted); }
.composer-modern .emoji-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); grid-auto-rows:44px; align-content:start; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.composer-modern .emoji-grid button { display:grid; place-items:center; min-width:44px; min-height:44px; padding:4px; border:0; border-radius:10px; background:transparent; color:var(--text); font-size:27px; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.composer-modern .emoji-grid button:hover { background:var(--theme-hover,#f0f2f5); }
/* Calmer chat rhythm; keep the user's text-size preferences and every filter. */
.chat-app .conv { min-height:76px; gap:12px; padding:12px 14px; }
.chat-app .conv-title { font-size:calc(15px * var(--chat-list-font-scale,1)); font-weight:500; line-height:1.3; margin-bottom:5px; }
.chat-app .conv-preview { font-size:calc(13px * var(--chat-list-font-scale,1)); line-height:1.35; }
.chat-app .conv-account-name { font-size:calc(10px * var(--chat-list-font-scale,1)); font-weight:400; }
.chat-app .conversation-folder-tabs { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.chat-app .conversation-folder-tab,.chat-app .conversation-crm-tab { min-height:44px; display:flex; align-items:center; justify-content:center; gap:5px; padding:6px; border:0; border-radius:22px; background:transparent; color:var(--muted); font:inherit; font-size:13px; font-weight:500; cursor:pointer; text-decoration:none; }
.chat-app .conversation-folder-tab.active,.chat-app .conversation-crm-tab.active { background:var(--theme-accent-soft,#e7f7f2); color:var(--theme-link,#008069); }
.chat-app .conversation-folder-tab:hover,.chat-app .conversation-crm-tab:hover { background:var(--theme-hover,#f0f2f5); }
.chat-app .chat-task-quick { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:8px; border:0; border-radius:50%; background:transparent; color:var(--muted); }
html[data-theme] .chat-app #chatTaskBtn { display:inline-flex; flex-direction:row; gap:5px; align-items:center; justify-content:center; white-space:nowrap; }
@media(max-width:960px) {
  html[data-theme] .chat-app #chatTaskBtn { width:44px; min-width:44px; padding:10px; }
  .chat-app #chatTaskBtn span { display:none; }
}
.chat-app .filter-panel { gap:10px; padding:0 14px 10px; }
.chat-app .filter-panel label { font-size:11px; font-weight:400; }
.chat-app .filter-panel select { min-height:44px; height:44px; border-radius:13px; font-size:12px; font-weight:400; padding:8px 10px; }
.chat-app .messages { padding:20px clamp(12px,3vw,40px); }
.chat-app .msg-row { margin:5px 0; }
html[data-theme] .chat-app .bubble { padding:9px 12px; border:0; border-radius:5px 14px 14px 14px; box-shadow:0 1px 2px rgba(15,35,28,.13); }
html[data-theme] .chat-app .outgoing .bubble { border-radius:14px 5px 14px 14px; }
.chat-app .msg-text { font-size:calc(14px * var(--chat-message-font-scale,1)); line-height:1.45; font-weight:400; }
.chat-app .msg-meta { font-size:10px; line-height:1.2; margin-top:4px; }
@media(max-width:960px) {
  html[data-theme] .chat-app .composer.composer-modern,.chat-app .composer.composer-modern { min-height:calc(64px + env(safe-area-inset-bottom)); gap:6px; padding:8px max(6px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); }
  .composer-modern .emoji-picker { left:6px; max-width:calc(100% - 12px); }
  .composer-modern .attach-menu { right:60px; }
  .chat-app .messages { padding:14px max(10px,env(safe-area-inset-right)) 14px max(10px,env(safe-area-inset-left)); }
  .chat-app .msg-text { font-size:calc(15px * var(--chat-message-font-scale,1)); }
  html[data-theme] .chat-app .bubble { max-width:90%; }
}