:root {
  color-scheme: dark;
  --bg: #070b13;
  --panel: #0d1422;
  --panel-2: #111b2e;
  --border: #23304a;
  --text: #edf3ff;
  --muted: #8fa0ba;
  --primary: #4778ff;
  --primary-2: #6c91ff;
  --green: #21c77a;
  --red: #ff5e6c;
  --yellow: #f6bc3b;
  --shadow: 0 24px 60px rgba(0, 0, 0, .3);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.muted, .content-header p, .connection-card p, .qr-card p { color: var(--muted); }
.eyebrow { margin: 0 0 5px; color: var(--primary-2); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 6px; font-size: 26px; }
label { display: grid; gap: 7px; color: #cbd6e8; font-size: 13px; font-weight: 650; }
input, textarea, select { width: 100%; border: 1px solid var(--border); border-radius: 10px; outline: none; background: #080f1d; color: var(--text); padding: 11px 12px; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(71,120,255,.13); }
textarea { resize: vertical; line-height: 1.5; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 30% 15%, #16254a 0, transparent 32%), radial-gradient(circle at 85% 80%, #12372e 0, transparent 28%); }
.login-card { width: min(430px, 100%); padding: 42px; background: rgba(13,20,34,.92); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.brand-mark { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 15px; background: linear-gradient(145deg, var(--primary), #6d4dff); font-weight: 900; letter-spacing: -.05em; box-shadow: 0 12px 30px rgba(71,120,255,.35); }
.brand-mark.small { width: 34px; height: 34px; margin: 0; border-radius: 10px; font-size: 12px; }
.stack { display: grid; }.gap-lg { gap: 18px; }.row { display: flex; gap: 10px; align-items: center; }.row.end { justify-content: flex-end; }.row.center { justify-content: center; }
.button { border: 1px solid transparent; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-weight: 750; transition: .18s ease; }
.button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button.primary { background: var(--primary); color: white; }.button.secondary { background: #16223a; border-color: #2a3b5e; }.button.ghost { background: transparent; border-color: var(--border); }.button.danger { background: rgba(255,94,108,.12); color: #ff8d98; border-color: rgba(255,94,108,.35); }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px; background: transparent; cursor: pointer; }
.error { color: #ff8893; margin: 0; font-size: 13px; }
.app { height: 100vh; display: grid; grid-template-columns: 230px minmax(0, 1fr); overflow: hidden; }
.sidebar { display: flex; flex-direction: column; padding: 18px 14px; border-right: 1px solid #38516f; background: linear-gradient(180deg, #304b66 0%, #213c67 48%, #12233d 100%); }
.sidebar-brand { display: flex; align-items: center; gap: 11px; margin: 0 8px 18px; font-weight: 850; }
.connection-pill { display: flex; gap: 9px; align-items: center; margin: 0 6px 18px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(5,12,25,.22); color: #d3deed; font-size: 12px; }
.status-dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(246,188,59,.1); }.status-dot.connected { background: var(--green); box-shadow: 0 0 0 4px rgba(33,199,122,.1); }.status-dot.error { background: var(--red); }.status-dot.large { width: 15px; height: 15px; }
.nav-section-title { margin: 0 12px 8px; color: rgba(229,239,255,.62); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.nav { display: grid; gap: 7px; }.nav button { display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px 13px; border: 0; border-radius: 10px; background: transparent; color: #cad7e7; text-align: left; cursor: pointer; font-weight: 700; }.nav button span { width: 22px; color: #aebed1; font-size: 18px; text-align: center; }.nav button:hover { background: rgba(255,255,255,.1); color: white; }.nav button.active { background: #e7ecf2; color: #2774ff; box-shadow: 0 8px 24px rgba(7,18,39,.18); }.nav button.active span { color: #2774ff; }
.sidebar-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 7px 2px; border-top: 1px solid var(--border); }.sidebar-footer div { display: grid; gap: 2px; }.sidebar-footer small { color: var(--muted); text-transform: capitalize; }
.view { min-width: 0; min-height: 0; }
.inbox-view { height: 100%; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 360px minmax(0,1fr) 300px; }
.conversation-panel { height: 100%; min-width: 0; min-height: 0; border-right: 1px solid var(--border); background: #0a111e; overflow: hidden; display: flex; flex-direction: column; }
.panel-header, .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }.panel-header h2 { margin: 0; }
.filters { padding: 12px; display: grid; grid-template-columns: 1fr 110px; gap: 8px; border-bottom: 1px solid var(--border); }
.conversation-list { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }.conversation-item { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 11px; align-items: center; width: 100%; padding: 14px 15px; border: 0; border-bottom: 1px solid rgba(35,48,74,.65); background: transparent; text-align: left; cursor: pointer; }.conversation-item:hover, .conversation-item.active { background: #111c31; }.conversation-item h4 { margin: 0 0 5px; font-size: 14px; }.conversation-item p { overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }.conversation-item time { color: #657591; font-size: 10px; }.unread { min-width: 20px; padding: 2px 6px; border-radius: 20px; background: var(--primary); text-align: center; font-size: 10px; }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #23355b, #17233a); color: #b9c9e8; font-weight: 850; }
.chat-panel { height: 100%; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(24,40,71,.35), transparent 55%), #080d16; }
.center-empty { height: 100%; display: grid; place-content: center; justify-items: center; color: var(--muted); }.empty-icon { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 20px; color: var(--primary-2); font-size: 28px; }
.chat-active { width: 100%; height: 100%; min-height: 0; overflow: hidden; display: grid; grid-template-areas: "header" "notice" "messages" "composer"; grid-template-rows: auto auto minmax(0,1fr) auto; }.chat-header { grid-area: header; }.monitor-banner { grid-area: notice; }.message-list { grid-area: messages; }.composer { grid-area: composer; }.contact-summary { display: flex; gap: 11px; align-items: center; min-width: 0; }.contact-summary h3 { margin: 0 0 3px; }.contact-summary p { overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }.chat-actions { display: flex; gap: 8px; align-items: end; flex: 0 0 auto; }.compact { width: 115px; }.compact select { padding: 9px; }
.monitor-banner { padding: 9px 18px; border-bottom: 1px solid rgba(246,188,59,.25); background: rgba(246,188,59,.08); color: #eecb78; font-size: 12px; }
.message-list { height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 22px clamp(16px,4vw,54px); }.message-row { display: flex; flex: 0 0 auto; margin: 8px 0; }.message-row.outbound { justify-content: flex-end; }.bubble { max-width: min(650px, 78%); padding: 11px 13px 8px; border: 1px solid var(--border); border-radius: 15px 15px 15px 4px; background: #121d30; line-height: 1.48; white-space: pre-wrap; word-break: break-word; }.outbound .bubble { border-color: #2b55ba; border-radius: 15px 15px 4px 15px; background: #1b3e91; }.bubble small { display: block; margin-top: 6px; color: rgba(220,230,247,.65); font-size: 9px; text-align: right; }.bubble .ai-badge { display: inline-block; margin-right: 7px; color: #a9c0ff; font-weight: 800; }.bubble img { display: block; width: auto; max-width: 100%; max-height: min(56vh, 520px); object-fit: contain; border-radius: 9px; }
.composer { position: relative; z-index: 2; min-width: 0; min-height: 132px; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "toolbar toolbar" "input send"; gap: 9px 12px; align-items: end; padding: 10px 16px 14px; border-top: 1px solid #30343b; background: #111318; box-shadow: 0 -10px 28px rgba(0,0,0,.16); }.composer-toolbar { grid-area: toolbar; display: flex; align-items: center; justify-content: space-between; min-height: 30px; color: #cad3e2; font-size: 12px; }.composer-toolbar strong { color: #e8eef8; }.composer-toolbar span { color: #6f7c90; }.composer textarea { grid-area: input; min-width: 0; min-height: 70px; max-height: 150px; resize: none; overflow-y: auto; border-color: #303844; background: #0b0d11; }.composer > .button { grid-area: send; min-width: 72px; align-self: end; }
.customer-details { height: 100%; min-height: 0; overflow-y: auto; border-left: 1px solid #2b3039; background: #15171b; }.details-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 19px 18px; border-bottom: 1px solid #2b3039; background: #17191e; }.details-header h3 { margin: 0; }.details-channel { padding: 4px 8px; border-radius: 20px; background: #1c382d; color: #66d99f; font-size: 10px; }.details-empty { padding: 34px 20px; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }.details-body { padding: 16px; }.details-profile { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid #2b3039; border-radius: 12px; background: #1c1f24; }.details-profile h3 { margin: 0 0 4px; }.details-profile p { overflow: hidden; margin: 0; color: var(--muted); font-size: 11px; word-break: break-all; }.avatar.large { width: 48px; height: 48px; flex: 0 0 auto; }.details-list { margin: 16px 0; border: 1px solid #2b3039; border-radius: 12px; background: #1c1f24; }.details-list div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 14px; border-bottom: 1px solid #2b3039; }.details-list div:last-child { border-bottom: 0; }.details-list dt { color: #8e9aae; font-size: 12px; }.details-list dd { margin: 0; color: #dce5f3; font-size: 12px; font-weight: 750; }.details-list dd.enabled { color: #56d795; }.details-tip { padding: 12px 13px; border-left: 3px solid var(--primary); border-radius: 4px 9px 9px 4px; background: #19233a; color: #aebdd3; font-size: 11px; line-height: 1.55; }
.content-view { height: 100vh; overflow-y: auto; padding: 28px clamp(20px,4vw,54px); }.content-header { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 24px; }.content-header p { margin-bottom: 0; }
.two-column { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(380px,1.4fr); gap: 18px; align-items: start; }.card-list { display: grid; gap: 10px; }.card { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: 0 12px 35px rgba(0,0,0,.13); }.list-card { padding: 15px; cursor: pointer; }.list-card:hover { border-color: #40527a; }.list-card h3 { margin-bottom: 7px; font-size: 15px; }.list-card p { margin-bottom: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }.badge { display: inline-block; padding: 3px 7px; border-radius: 20px; background: #1a2842; color: #9cb1d5; font-size: 10px; }
.editor-card, .settings-card { display: grid; gap: 17px; padding: 22px; }.check { display: flex; gap: 9px; align-items: center; }.check input { width: auto; }
.connection-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }.connection-card, .qr-card { min-height: 360px; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; }.connection-card .status-dot { margin-bottom: 22px; }.qr-card img { width: min(340px,100%); padding: 10px; border-radius: 12px; background: white; }.qr-placeholder { width: 280px; height: 280px; display: grid; place-items: center; margin-bottom: 16px; border: 1px dashed #405173; border-radius: 14px; color: var(--muted); }
.settings-card { max-width: 850px; }.empty { padding: 30px; color: var(--muted); text-align: center; }.toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; max-width: 420px; padding: 13px 16px; border: 1px solid #39517f; border-radius: 11px; background: #172641; box-shadow: var(--shadow); }.toast.error { border-color: rgba(255,94,108,.5); background: #3a1820; color: #ffb5bc; }
.bubble video { display: block; width: auto; max-width: 100%; max-height: min(56vh, 520px); object-fit: contain; border-radius: 9px; }
.bubble audio { display: block; width: min(360px, 70vw); max-width: 100%; }
.media-document { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: #dce7ff; text-decoration: none; }
.media-document:hover { background: rgba(255,255,255,.06); }
.message-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 7px; opacity: .28; transition: opacity .15s ease; }
.message-row:hover .message-tools, .message-tools:focus-within { opacity: 1; }
.message-tool { border: 0; padding: 0; background: transparent; color: #9ebcff; cursor: pointer; font-size: 11px; }
.message-tool:hover { color: white; }
.reaction-picker { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #394967; border-radius: 20px; background: #111927; box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.reaction-picker button { width: 27px; height: 27px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.reaction-picker button:hover { background: #26334a; }
.message-tool.danger-link { color: #ff9ca5; }
.translation, .source-text, .image-analysis, .transcription, .video-analysis, .document-analysis { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.13); color: #e6edfb; font-size: 13px; line-height: 1.6; }
.translation::before { content: "译文"; display: block; margin-bottom: 4px; color: #8fa0ba; font-size: 10px; }
.source-text::before { content: "我输入的原文"; display: block; margin-bottom: 4px; color: #a9b9d3; font-size: 10px; }
.image-analysis::before { content: "图片分析"; display: block; margin-bottom: 4px; color: #8fa0ba; font-size: 10px; }
.transcription::before { content: "语音转文字"; display: block; margin-bottom: 4px; color: #8fa0ba; font-size: 10px; }
.video-analysis::before { content: "视频内容分析"; display: block; margin-bottom: 4px; color: #8fa0ba; font-size: 10px; }
.document-analysis::before { content: "文件识别"; display: block; margin-bottom: 4px; color: #8fa0ba; font-size: 10px; }
.quoted-message { overflow: hidden; margin-bottom: 8px; padding: 7px 9px; border-left: 3px solid #7fa0ff; border-radius: 4px 7px 7px 4px; background: rgba(0,0,0,.22); color: #bac8df; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.revoked-notice { margin-top: 9px; padding-top: 7px; border-top: 1px dashed rgba(255,255,255,.18); color: #ffbd79; font-size: 10px; }
.reaction-list { display: flex; gap: 4px; margin: 7px 0 -3px; }
.reaction-list span { min-width: 28px; padding: 2px 7px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: rgba(5,8,14,.45); text-align: center; }
.bubble.revoked { border-style: dashed; }
.composer { grid-template-areas: "toolbar toolbar" "sendtools sendtools" "reply reply" "attachment attachment" "emoji emoji" "input send"; }
.composer-toolbar > span { color: #6f7c90; }
.composer-tools { display: flex; gap: 6px; align-items: center; }
.tool-button { min-width: 30px; height: 28px; padding: 0 7px; border: 1px solid #313a48; border-radius: 7px; background: #191d24; color: #c7d2e4; cursor: pointer; font-size: 12px; }
.tool-button:hover { border-color: #5579c8; color: white; }
.tool-button.recording { border-color: #ff6675; background: #471d25; color: #ff9ca5; }
.attachment-preview { grid-area: attachment; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid #32415a; border-radius: 8px; background: #121a27; color: #c9d5e8; font-size: 12px; }
.attachment-preview button { border: 0; background: transparent; color: #ff8d98; cursor: pointer; }
.reply-preview { grid-area: reply; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-left: 3px solid var(--primary); border-radius: 5px 8px 8px 5px; background: #151e2f; color: #c9d5e8; font-size: 12px; }
.reply-preview span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reply-preview button { border: 0; background: transparent; color: #ff8d98; cursor: pointer; font-size: 18px; }
.send-tools-menu { grid-area: sendtools; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 9px; border: 1px solid #303844; border-radius: 10px; background: #0b0d11; box-shadow: 0 15px 35px rgba(0,0,0,.25); }
.send-tools-menu button { padding: 9px 10px; border: 1px solid #283244; border-radius: 8px; background: #151b25; color: #cbd7e9; cursor: pointer; text-align: left; }
.send-tools-menu button:hover { border-color: #5275c4; background: #1a2538; }
.emoji-panel { grid-area: emoji; display: flex; flex-wrap: wrap; gap: 5px; max-height: 108px; overflow-y: auto; padding: 9px; border: 1px solid #303844; border-radius: 9px; background: #0b0d11; }
.emoji-panel button { width: 34px; height: 32px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 20px; }
.emoji-panel button:hover { background: #1d2634; }
.composer > .button:disabled, .tool-button:disabled { cursor: wait; opacity: .55; transform: none; }
.settings-secondary { margin-top: 18px; }
.settings-secondary h3 { margin-bottom: 0; }
.settings-help { display: grid; gap: 4px; padding: 12px 14px; border-left: 3px solid var(--primary); border-radius: 5px 10px 10px 5px; background: #151f33; color: #cbd6e8; font-size: 12px; }
.settings-help span { color: var(--muted); }
.app-dialog { width: min(720px, calc(100vw - 28px)); max-height: min(780px, calc(100vh - 40px)); overflow-y: auto; padding: 20px; border: 1px solid #344361; border-radius: 16px; background: #101827; color: var(--text); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.app-dialog::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(4px); }
.compact-dialog { width: min(460px, calc(100vw - 28px)); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.dialog-header h3 { margin: 0; }
.quick-reply-list { display: grid; gap: 8px; max-height: 300px; overflow-y: auto; margin-bottom: 18px; }
.quick-reply-card { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid #2b3a55; border-radius: 9px; background: #121d30; color: #e8eef9; text-align: left; cursor: pointer; }
.quick-reply-card span { overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.quick-reply-form { display: grid; gap: 11px; padding-top: 16px; border-top: 1px solid var(--border); }
.translation-form { display: grid; gap: 16px; }
.catalogue-products { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 10px; max-height: min(58vh,560px); overflow-y: auto; margin: 16px 0; }
.catalogue-card { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 11px; align-items: center; min-height: 82px; padding: 9px; border: 1px solid #2d3b55; border-radius: 10px; background: #121d30; color: #eef3fb; text-align: left; cursor: pointer; }
.catalogue-card:hover { border-color: #5579c8; background: #17253d; }
.catalogue-card:disabled { cursor: wait; opacity: .55; }
.catalogue-card img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #0c111b; }
.catalogue-card span { min-width: 0; display: grid; gap: 6px; }
.catalogue-card strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.catalogue-card small { color: var(--muted); }
@media (max-width: 1480px) { .inbox-view { grid-template-columns: 340px minmax(0,1fr); }.customer-details { display: none; } }
@media (max-width: 1000px) { .app { grid-template-columns: 78px minmax(0,1fr); }.sidebar-brand span:last-child, .connection-pill span:last-child, .nav-section-title, .nav button { font-size: 0; }.nav button span { font-size: 18px; }.nav button { justify-content: center; }.sidebar-footer div { display: none; }.sidebar-footer { justify-content: center; }.inbox-view { grid-template-columns: 315px minmax(0,1fr); }.chat-actions .compact { display: none; } }
@media (max-width: 720px) { .app { grid-template-columns: 1fr; grid-template-rows: 64px minmax(0,1fr); }.sidebar { grid-row: 1; flex-direction: row; align-items: center; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--border); }.sidebar-brand { margin: 0; }.connection-pill, .sidebar-footer { display: none; }.nav { margin-left: auto; display: flex; }.nav button { width: 42px; padding: 10px; }.inbox-view { height: 100%; grid-template-columns: 1fr; }.conversation-panel { border-right: 0; }.chat-panel { position: fixed; z-index: 20; inset: 64px 0 0; height: auto; transform: translateX(100%); transition: .2s ease; }.chat-panel.mobile-open { transform: none; }.two-column, .connection-grid { grid-template-columns: 1fr; }.content-view { height: calc(100vh - 64px); }.chat-actions { flex-wrap: wrap; justify-content: flex-end; }.button { padding: 9px 11px; }.send-tools-menu { grid-template-columns: 1fr 1fr; }.message-tools { opacity: 1; } }

/* v0.4.0 — WhatsApp-style contact sync and modern composer */
.avatar {
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.08);
}
.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.avatar-button {
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
}
.avatar-button:hover,
.details-profile:hover .avatar {
  border-color: #7399ff;
  box-shadow: 0 0 0 3px rgba(71,120,255,.14);
}
.conversation-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.whatsapp-lookup-card {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: 11px;
  align-items: center;
  margin: 10px;
  padding: 13px;
  border: 1px dashed #3f5f91;
  border-radius: 13px;
  background: #101b2e;
}
.whatsapp-lookup-card h4,
.whatsapp-lookup-card p { margin: 0; }
.whatsapp-lookup-card p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.whatsapp-lookup-card .button { white-space: nowrap; }

.details-profile {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #2b3952;
  border-radius: 13px;
  background: #121b2b;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.details-profile > span:last-child { min-width: 0; }
.details-profile h3 { margin: 0 0 4px; }
.details-profile p { overflow: hidden; margin: 0; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.avatar.large { width: 52px; height: 52px; }

.composer {
  position: relative;
  z-index: 4;
  min-height: 218px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding: 12px 18px 16px;
  border-top: 1px solid #2e3440;
  background: #101318;
  box-shadow: 0 -12px 28px rgba(0,0,0,.18);
}
.composer-input-shell {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #343c49;
  border-radius: 17px;
  background: #0b0e13;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.composer-input-shell:focus-within {
  border-color: #5579d0;
  box-shadow: 0 0 0 3px rgba(71,120,255,.12);
}
.composer .composer-input-shell #message-input {
  width: 100%;
  min-height: 108px;
  max-height: 220px;
  display: block;
  padding: 17px 18px 10px;
  border: 0;
  border-radius: 0;
  resize: none;
  overflow-y: auto;
  background: transparent;
  box-shadow: none;
  color: #edf2fb;
  font-size: 15px;
  line-height: 1.55;
}
.composer .composer-input-shell #message-input::before { color: #6f7888; }
.composer-bottom-bar {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto 54px;
  gap: 10px;
  align-items: center;
  padding: 6px 9px 9px 11px;
}
.composer-tools {
  min-width: 0;
  display: flex;
  gap: 7px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.composer-tools::-webkit-scrollbar { display: none; }
.toolbar-separator {
  width: 1px;
  height: 28px;
  flex: 0 0 auto;
  background: #303743;
}
.tool-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #d4dce9;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.tool-button:hover,
.tool-button.active {
  border: 0;
  background: #202a3b;
  color: #fff;
  transform: translateY(-1px);
}
.tool-button.featured {
  width: 62px;
  min-width: 62px;
  grid-auto-flow: column;
  gap: 3px;
  color: #4e8cff;
  font-size: 25px;
  font-weight: 900;
}
.tool-button.featured span { font-size: 13px; letter-spacing: -.04em; }
.tool-button.recording { background: #4b1d27; color: #ff9aa5; }
.composer-hint {
  color: #717b8b;
  font-size: 11px;
  white-space: nowrap;
}
.send-icon-button {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(145deg, #3f7cff, #2865ed);
  color: white;
  box-shadow: 0 9px 24px rgba(43,103,238,.26);
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
  transition: transform .16s ease, filter .16s ease;
}
.send-icon-button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.send-icon-button:disabled,
.tool-button:disabled { cursor: wait; opacity: .5; transform: none; }

.reply-preview,
.attachment-preview {
  width: 100%;
  flex: 0 0 auto;
}
.reply-preview {
  padding: 10px 12px;
  border-left-width: 4px;
  border-radius: 7px 11px 11px 7px;
}
.attachment-preview {
  padding: 10px 12px;
  border-radius: 11px;
}

.compose-translation-preview {
  display: grid;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid #39558a;
  border-radius: 14px;
  background: linear-gradient(145deg, #14213a, #111a2a);
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.translation-preview-header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.translation-preview-header > div:first-child { display: flex; gap: 8px; align-items: center; }
.translation-preview-header strong { color: #eef4ff; }
.translation-preview-header span { color: #7fa6ff; font-size: 12px; font-weight: 750; }
.mini-action {
  border: 0;
  background: transparent;
  color: #96b6ff;
  cursor: pointer;
  font-size: 12px;
}
.mini-action:hover { color: white; }
.translation-preview-source {
  display: grid;
  gap: 4px;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(3,8,17,.34);
}
.translation-preview-source span { color: #7f8da3; font-size: 10px; }
.translation-preview-source p { margin: 0; color: #c4cfdf; font-size: 13px; white-space: pre-wrap; }
.compose-translation-preview label { gap: 6px; }
.compose-translation-preview textarea {
  min-height: 82px;
  max-height: 180px;
  padding: 10px 11px;
  border-radius: 9px;
  background: #0a101b;
}
.translation-preview-status { margin: 0; color: #91a0b6; font-size: 11px; }

.send-tools-menu {
  position: absolute;
  z-index: 30;
  left: 18px;
  bottom: 88px;
  width: min(540px, calc(100% - 36px));
  max-height: min(62vh, 520px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 15px;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid #353d4b;
  border-radius: 16px;
  background: #1b1f27;
  box-shadow: 0 24px 55px rgba(0,0,0,.48);
}
.send-tools-menu section { min-width: 0; }
.send-tools-menu section:last-child { grid-column: 1 / -1; }
.send-tools-menu h4 {
  margin: 0 0 9px;
  color: #8f9bad;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.send-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}
.send-tool-grid.single { grid-template-columns: 1fr; }
.send-tools-menu .send-tool-grid button {
  min-height: 68px;
  display: grid;
  grid-template-columns: 37px minmax(0,1fr);
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid #303948;
  border-radius: 11px;
  background: #121720;
  color: #e3e9f4;
  text-align: left;
}
.send-tools-menu .send-tool-grid button:hover {
  border-color: #547ed7;
  background: #182236;
}
.send-tools-menu .send-tool-grid button span {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #212a39;
  color: #9eb9ff;
  font-size: 21px;
}
.send-tools-menu .send-tool-grid b { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }

.emoji-panel {
  position: absolute;
  z-index: 31;
  left: 92px;
  bottom: 88px;
  width: min(720px, calc(100% - 110px));
  height: min(455px, 62vh);
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr);
  gap: 9px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid #353d4b;
  border-radius: 16px;
  background: #1b1f27;
  box-shadow: 0 24px 55px rgba(0,0,0,.48);
}
.emoji-search-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 38px;
  gap: 8px;
}
.emoji-search-row input { background: #11151d; }
.emoji-categories {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 3px;
}
.emoji-categories button {
  min-width: auto;
  width: auto;
  height: 34px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #aeb8c8;
  font-size: 12px;
  white-space: nowrap;
}
.emoji-categories button:hover,
.emoji-categories button.active {
  border-color: #3d4a61;
  background: #252c38;
  color: white;
}
.emoji-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(45px,1fr));
  grid-auto-rows: 47px;
  gap: 4px;
  overflow-y: auto;
  align-content: start;
  padding: 4px;
}
.emoji-grid button {
  width: 100%;
  height: 47px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font-size: 28px;
}
.emoji-grid button:hover { background: #2a313d; transform: scale(1.06); }
.emoji-grid .empty { grid-column: 1 / -1; }

.side-drawer {
  width: min(540px, 100vw);
  height: 100vh;
  max-height: 100vh;
  margin: 0 0 0 auto;
  padding: 22px;
  border-radius: 18px 0 0 18px;
}
.drawer-tabs {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: -3px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.drawer-tabs button {
  padding: 8px 3px;
  border: 0;
  border-bottom: 2px solid var(--primary);
  background: transparent;
  color: #8fb0ff;
  font-weight: 800;
}
.drawer-tabs span { margin-left: auto; color: var(--muted); font-size: 11px; }
.quick-reply-search { position: relative; margin-bottom: 12px; }
.quick-reply-search input { padding-right: 42px; background: #0c1320; }
.quick-reply-search span { position: absolute; right: 14px; top: 50%; color: #78879d; transform: translateY(-50%); }
.quick-reply-list { max-height: calc(100vh - 285px); margin: 0 0 14px; }
.quick-reply-card {
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: #111925;
}
.quick-reply-card:hover { border-color: #537bd1; background: #162139; }
.quick-reply-card-header { display: flex; gap: 10px; align-items: center; justify-content: space-between; color: #edf3ff !important; }
.quick-reply-card-header strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.quick-reply-card-header b { flex: 0 0 auto; padding: 3px 7px; border-radius: 7px; background: #26354f; color: #a7c0ff; font-size: 10px; }
.quick-reply-manage { padding-top: 12px; border-top: 1px solid var(--border); }
.quick-reply-manage summary { color: #8facff; cursor: pointer; font-weight: 750; }

.contact-profile-dialog { width: min(620px, calc(100vw - 28px)); }
.contact-profile-hero {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 17px;
  border: 1px solid #2e3d58;
  border-radius: 15px;
  background: linear-gradient(145deg,#16233a,#111a2a);
}
.profile-avatar { width: 82px; height: 82px; font-size: 27px; }
.contact-profile-hero h2 { margin: 0 0 5px; }
.contact-profile-hero p { margin: 0 0 8px; color: var(--muted); }
.profile-business-badge { display: inline-flex; padding: 4px 8px; border-radius: 99px; background: rgba(33,199,122,.12); color: #5fe09b; font-size: 10px; font-weight: 800; }
.profile-facts { display: grid; margin: 15px 0; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.profile-facts > div { display: grid; grid-template-columns: 135px minmax(0,1fr); gap: 14px; padding: 11px 13px; border-bottom: 1px solid var(--border); }
.profile-facts > div:last-child { border-bottom: 0; }
.profile-facts dt { color: #8290a6; font-size: 12px; }
.profile-facts dd { min-width: 0; margin: 0; color: #dce5f4; overflow-wrap: anywhere; }
.profile-privacy-note { padding: 10px 12px; border-left: 3px solid #4b7df3; border-radius: 5px 10px 10px 5px; background: #141e31; color: #9ba9bc; font-size: 11px; line-height: 1.6; }

@media (max-width: 1000px) {
  .composer { padding-inline: 12px; }
  .composer-hint { display: none; }
  .composer-bottom-bar { grid-template-columns: minmax(0,1fr) 52px; }
  .send-icon-button { grid-column: 2; }
  .send-tools-menu { left: 12px; width: calc(100% - 24px); }
  .emoji-panel { left: 12px; width: calc(100% - 24px); }
}
@media (max-width: 720px) {
  .composer { min-height: 190px; padding: 9px 9px 12px; }
  .composer .composer-input-shell #message-input { min-height: 86px; }
  .tool-button { width: 38px; min-width: 38px; height: 38px; font-size: 22px; }
  .tool-button.featured { width: 56px; min-width: 56px; }
  .send-tools-menu { bottom: 76px; grid-template-columns: 1fr; max-height: 64vh; }
  .send-tools-menu section:last-child { grid-column: auto; }
  .emoji-panel { bottom: 76px; height: 54vh; }
  .emoji-grid { grid-template-columns: repeat(7, minmax(38px,1fr)); }
  .emoji-grid button { font-size: 24px; }
  .side-drawer { width: 100vw; border-radius: 0; }
  .profile-facts > div { grid-template-columns: 105px minmax(0,1fr); }
}
.lookup-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #223761;
  color: #b7caff;
  font-size: 23px;
  font-weight: 500;
}
.whatsapp-lookup-card > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; text-align: left; }
.whatsapp-lookup-card strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.whatsapp-lookup-card small { color: var(--muted); }
.whatsapp-lookup-card:disabled { cursor: wait; opacity: .7; }

/* v0.4.1 — functional WhatsApp-style composer, search, profile and media UI */
.composer {
  min-height: 142px;
  gap: 8px;
  padding: 10px 14px 13px;
  background: #101318;
}
.composer-input-shell { border-radius: 14px; }
.composer .composer-input-shell #message-input {
  min-height: 62px;
  max-height: 170px;
  padding: 13px 15px 7px;
  font-size: 15px;
}
.composer-bottom-bar {
  grid-template-columns: minmax(0,1fr) auto auto;
  padding: 4px 7px 7px 8px;
}
.composer-tools { gap: 3px; }
.tool-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 0;
}
.tool-button svg,
.send-icon-button svg,
.voice-message-button svg,
.translation-send-button svg,
.message-tool svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.send-icon-button svg,
.translation-send-button svg { fill: currentColor; stroke: none; }
.composer-actions { display: flex; gap: 7px; align-items: center; }
.send-icon-button,
.voice-message-button {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}
.send-icon-button { background: #2f75f5; box-shadow: 0 8px 20px rgba(47,117,245,.24); }
.voice-message-button { background: #1aa66a; box-shadow: 0 8px 20px rgba(26,166,106,.22); }
.voice-message-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.voice-message-button.recording { background: #d84e5c; animation: voicePulse 1.15s infinite; }
@keyframes voicePulse { 50% { box-shadow: 0 0 0 8px rgba(216,78,92,.16); } }
.voice-recording-strip {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(255,92,109,.34);
  border-radius: 11px;
  background: rgba(79,21,32,.52);
  color: #ffd4d9;
  font-size: 12px;
}
.recording-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff6070; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.voice-recording-strip time { min-width: 42px; font-variant-numeric: tabular-nums; }
.voice-recording-help { color: #be9ca3; }
.voice-recording-strip .mini-action { margin-left: auto; color: #ff9ca8; }

.compose-translation-preview {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #35445d;
  border-radius: 12px;
  background: #0c1016;
  box-shadow: none;
}
.translation-preview-original-row,
.translation-preview-edit-row {
  display: grid;
  align-items: center;
  min-width: 0;
}
.translation-preview-original-row {
  grid-template-columns: auto minmax(0,1fr) 32px;
  gap: 12px;
  min-height: 43px;
  padding: 7px 9px 7px 13px;
  border-bottom: 1px solid #2b323d;
}
.translation-label { color: #4f89ff; font-weight: 800; }
.translation-original-text {
  overflow: hidden;
  color: #e7ebf2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.translation-close,
.translation-inline-button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #8b97a9;
  cursor: pointer;
}
.translation-close { width: 32px; height: 32px; border-radius: 8px; font-size: 20px; }
.translation-close:hover,
.translation-inline-button:hover { background: #202735; color: white; }
.translation-preview-edit-row {
  grid-template-columns: auto minmax(0,1fr) 38px 44px;
  gap: 8px;
  padding: 8px 9px 8px 12px;
}
.translation-language-pill {
  padding: 6px 9px;
  border-radius: 8px;
  background: #16274a;
  color: #8fb3ff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.compose-translation-preview textarea {
  min-height: 38px;
  max-height: 92px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  resize: vertical;
  background: #11161e;
}
.translation-inline-button { width: 38px; height: 38px; border-radius: 9px; font-size: 20px; }
.translation-send-button {
  width: 42px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: #3478f6;
  color: white;
  cursor: pointer;
}
.translation-send-button svg { width: 21px; height: 21px; }
.translation-preview-status {
  padding: 0 12px 7px;
  color: #748196;
  font-size: 10px;
}

.send-tools-menu {
  left: 18px;
  bottom: 76px;
  width: 306px;
  max-height: min(74vh, 620px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 17px;
  background: #181a1e;
}
.send-tools-menu > button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 5px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #f2f3f5;
  text-align: left;
  cursor: pointer;
}
.send-tools-menu > button:hover { background: #2a2c30; }
.send-tools-menu > button b { font-size: 15px; font-weight: 540; }
.attach-menu-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 19px;
  font-weight: 850;
}
.attach-menu-icon.document { color: #9a68ff; }
.attach-menu-icon.media { color: #2585ff; }
.attach-menu-icon.camera { color: #ff4383; }
.attach-menu-icon.audio { color: #ff7942; }
.attach-menu-icon.contact { color: #18aef1; }
.attach-menu-icon.poll { color: #ffbd24; }
.attach-menu-icon.event { color: #ff3c78; }
.attach-menu-icon.sticker { color: #45d4a4; }
.attach-menu-icon.catalogue { color: #9eb5c7; }
.attach-menu-icon.quick { color: #ffcb32; }
.attach-menu-divider { height: 1px; margin: 5px 8px; background: #34363a; }

.emoji-panel {
  left: 64px;
  bottom: 74px;
  width: min(660px, calc(100% - 82px));
  height: min(410px, 58vh);
  border-radius: 16px;
  background: #1d2026;
}
.emoji-search-row input { min-height: 42px; background: #11161e; }
.emoji-categories { justify-content: space-between; border-bottom: 1px solid #30343b; }
.emoji-categories button {
  width: 38px;
  min-width: 38px;
  height: 36px;
  padding: 0;
  font-size: 19px;
}
.emoji-panel.reaction-mode { border-color: #4e6a9e; }
.emoji-grid { grid-template-columns: repeat(auto-fill,minmax(42px,1fr)); grid-auto-rows: 43px; }
.emoji-grid button { height: 43px; font-size: 25px; }

.message-tools {
  position: relative;
  gap: 3px;
  align-items: center;
}
.message-tool {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  min-height: 27px;
  padding: 3px 6px;
  border-radius: 7px;
}
.message-tool svg { width: 15px; height: 15px; }
.message-tool span { font-size: 10px; }
.reaction-picker {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  z-index: 9;
  gap: 2px;
  padding: 5px;
  border-radius: 24px;
  white-space: nowrap;
}
.reaction-picker button { width: 31px; height: 31px; font-size: 19px; }

.whatsapp-lookup-card {
  grid-template-columns: 44px minmax(0,1fr);
  margin: 8px 10px;
  border-style: solid;
  background: #101a2b;
  color: inherit;
  cursor: pointer;
}
.whatsapp-lookup-card.found { border-color: rgba(33,199,122,.45); background: rgba(18,52,42,.45); }
.lookup-avatar { width: 42px; height: 42px; }

.profile-drawer {
  width: min(470px, 100vw);
  height: 100vh;
  max-height: 100vh;
  margin: 0 0 0 auto;
  padding: 0;
  border-radius: 18px 0 0 18px;
  background: #101722;
}
.profile-drawer .dialog-header { position: sticky; top: 0; z-index: 2; padding: 18px; background: #101722; }
.contact-profile-hero.vertical {
  flex-direction: column;
  justify-content: center;
  margin: 16px;
  padding: 22px 18px;
  text-align: center;
}
.profile-avatar { width: 112px; height: 112px; font-size: 34px; }
.profile-identity h2 { margin: 4px 0 5px; }
.profile-actions {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 9px;
  margin: 0 16px 16px;
}
.profile-actions button {
  min-height: 66px;
  display: grid;
  gap: 5px;
  place-items: center;
  border: 1px solid #2b3a51;
  border-radius: 12px;
  background: #162032;
  color: #dfe8f7;
  cursor: pointer;
}
.profile-actions button:hover { border-color: #4f7bd0; background: #1b2a43; }
.profile-actions button span { font-size: 19px; }
.profile-actions button b { font-size: 11px; }
.profile-actions button.loading { opacity: .55; }
.whatsapp-profile-facts { margin: 0 16px 16px; }
.whatsapp-profile-facts > div { grid-template-columns: 104px minmax(0,1fr); padding: 13px; }
.profile-drawer .profile-privacy-note { margin: 0 16px 20px; }

@media (max-width: 720px) {
  .composer { min-height: 126px; padding: 8px; }
  .composer-bottom-bar { grid-template-columns: minmax(0,1fr) auto; }
  .composer-hint { display: none; }
  .translation-preview-edit-row { grid-template-columns: minmax(0,1fr) 38px 42px; }
  .translation-language-pill { grid-column: 1 / -1; justify-self: start; }
  .send-tools-menu { left: 8px; bottom: 68px; width: min(306px, calc(100% - 16px)); }
  .emoji-panel { left: 8px; bottom: 68px; width: calc(100% - 16px); height: 52vh; }
  .profile-drawer { width: 100vw; border-radius: 0; }
}

/* v0.4.2 — verified search, avatars, compact translation, camera and native cards */
.search-results-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 6px;
  color: #8fa0ba;
  font-size: 11px;
  letter-spacing: .04em;
}
.search-results-heading strong { color: #d8e2f2; font-size: 12px; }
.message-search-result {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 11px 14px;
  border: 0;
  border-top: 1px solid #202b3f;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.message-search-result:hover { background: #132039; }
.message-search-result > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.message-search-result strong,
.message-search-result small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.message-search-result small { color: #94a4bb; }
.message-search-result time { color: #74849d; font-size: 10px; }
.message-row.search-highlight .bubble { box-shadow: 0 0 0 3px rgba(67,126,255,.42), 0 10px 30px rgba(0,0,0,.28); }

.composer { min-height: 112px; padding: 8px 12px 10px; gap: 6px; }
.composer .composer-input-shell #message-input { min-height: 54px; max-height: 140px; padding: 10px 13px 5px; }
.composer-bottom-bar { min-height: 46px; padding: 2px 5px 4px 6px; }
.compose-translation-preview {
  max-height: 96px;
  border-color: #303846;
  border-radius: 11px;
  background: #0b0d11;
}
.translation-preview-original-row {
  min-height: 38px;
  padding: 4px 8px 4px 12px;
}
.translation-preview-edit-row {
  grid-template-columns: auto minmax(0,1fr) 34px 40px;
  min-height: 48px;
  padding: 5px 7px 6px 10px;
}
.translation-original-text { font-size: 14px; }
.translation-language-pill { padding: 5px 8px; font-size: 11px; }
.compose-translation-preview textarea {
  min-height: 34px;
  max-height: 42px;
  padding: 6px 9px;
  resize: none;
  font-size: 14px;
  line-height: 1.35;
}
.translation-inline-button { width: 34px; height: 34px; }
.translation-send-button { width: 39px; height: 34px; }
.translation-preview-status { margin: 0; padding: 4px 10px 6px; font-size: 10px; }
.translation-preview-status.loading { color: #8ca8dc; }
.translation-preview-status.error { color: #ff8e9a; background: rgba(97,25,36,.24); }

.emoji-panel {
  position: fixed;
  z-index: 1000;
  width: min(680px, calc(100vw - 24px));
  height: min(430px, calc(100vh - 24px));
  max-height: none;
  overflow: hidden;
  border: 1px solid #3b424d;
  background: #1c1f24;
  box-shadow: 0 28px 80px rgba(0,0,0,.62);
}
.emoji-search-row { flex: 0 0 auto; }
.emoji-search-row input { width: 100%; }
.emoji-categories { min-height: 42px; overflow-x: auto; }
.emoji-grid { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.special-message-card {
  min-width: min(330px, 72vw);
  overflow: hidden;
  margin: 1px 0 4px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  background: rgba(6,10,17,.32);
}
.special-card-header {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.special-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  font-size: 20px;
}
.special-card-header > div { min-width: 0; display: grid; gap: 3px; }
.special-card-header strong { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.special-card-header small { color: rgba(232,239,250,.66); font-size: 10px; }
.special-card-body { display: grid; gap: 7px; padding: 10px 12px; }
.special-card-body p { margin: 0; line-height: 1.45; }
.special-card-body small { color: rgba(232,239,250,.62); }
.product-price { color: #75e3aa; font-size: 17px; }
.special-card-actions { display: flex; gap: 7px; padding: 8px 10px 10px; }
.special-card-action {
  flex: 1 1 auto;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: #dce6f5;
  cursor: pointer;
}
.special-card-action:hover { background: rgba(255,255,255,.1); }
.special-card-action.primary { border-color: rgba(60,129,255,.55); color: #9dc0ff; }
.poll-options { display: grid; gap: 6px; }
.poll-options button {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.poll-options button span { width: 15px; height: 15px; border: 2px solid #8ea4c5; border-radius: 50%; }
.event-time { color: #9fc0ff; font-weight: 750; }

.camera-dialog { width: min(820px, calc(100vw - 24px)); padding: 18px; }
.camera-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border: 1px solid #303d54;
  border-radius: 14px;
  background: #020407;
}
.camera-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.camera-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #95a3b8; }
.camera-status { min-height: 22px; margin: 10px 2px 4px; color: #94a2b7; font-size: 12px; }
.camera-controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 10px; }
.camera-controls > :last-child { justify-self: end; }
.camera-shutter {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 4px solid #dfe8f5;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.camera-shutter span { width: 48px; height: 48px; border-radius: 50%; background: #fff; transition: transform .12s ease; }
.camera-shutter:active span { transform: scale(.86); }

@media (max-width: 720px) {
  .compose-translation-preview { max-height: 126px; }
  .translation-preview-edit-row { grid-template-columns: minmax(0,1fr) 34px 40px; }
  .translation-language-pill { grid-column: 1 / -1; }
  .emoji-panel { inset: auto 8px 8px 8px !important; width: auto !important; height: 58vh !important; }
  .special-message-card { min-width: min(290px, 84vw); }
  .camera-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .camera-controls { grid-template-columns: auto 1fr auto; }
}


/* v0.4.2 final verification refinements */
.whatsapp-lookup-card.history-found { border-color: rgba(72,130,255,.45); background: rgba(22,42,76,.55); }
.message-link { color: #79b4ff; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.bubble.outbound .message-link { color: #d6e7ff; }


/* v0.5.3 — visible editable translation result and reliable avatar presentation */
.translation-preview-edit-row {
  grid-template-columns: auto minmax(260px, 1fr) 40px 46px;
  align-items: end;
  gap: 10px;
  padding: 9px 10px 10px 12px;
}
.translation-result-field {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: #8290a6;
  font-size: 10px;
  font-weight: 650;
}
.translation-result-field > span {
  display: block;
  padding-left: 2px;
}
.compose-translation-preview .translation-result-field textarea,
#translation-preview-text {
  position: static;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  max-height: 112px;
  display: block;
  visibility: visible;
  opacity: 1;
  padding: 10px 11px;
  border: 1px solid #3a4b66;
  border-radius: 9px;
  resize: vertical;
  overflow-y: auto;
  background: #111722;
  color: #f1f5fc;
  caret-color: #6d9cff;
  line-height: 1.45;
  box-shadow: none;
}
#translation-preview-text:focus {
  border-color: #4f83f7;
  box-shadow: 0 0 0 3px rgba(79,131,247,.14);
}
#translation-preview-text[readonly] {
  cursor: progress;
  color: #a9b4c6;
}
.translation-preview-status.ready { color: #6fc99a; }
.avatar.has-image { background: #101827; }
.avatar.has-image img { opacity: 1; }
@media (max-width: 980px) {
  .translation-preview-edit-row {
    grid-template-columns: minmax(0,1fr) 40px 46px;
  }
  .translation-language-pill { grid-column: 1 / -1; justify-self: start; }
}


/* v0.5.3 final: compact, always-visible editable translation preview */
.compose-translation-preview {
  max-height: none !important;
  overflow: visible !important;
}
.translation-preview-original-row {
  min-height: 38px;
}
.translation-preview-edit-row {
  grid-template-columns: auto minmax(180px, 1fr) 36px 42px !important;
  align-items: center !important;
  min-height: 52px;
  padding: 6px 8px 7px 10px !important;
}
.translation-result-field {
  display: block !important;
  min-width: 0;
}
.translation-result-field > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
.compose-translation-preview #translation-preview-text {
  width: 100% !important;
  min-height: 38px !important;
  max-height: 86px !important;
  padding: 8px 10px !important;
  border: 1px solid #3d5375 !important;
  border-radius: 8px !important;
  resize: vertical !important;
  overflow-y: auto !important;
  background: #10151d !important;
  color: #f4f7fc !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  cursor: text !important;
  pointer-events: auto !important;
  user-select: text !important;
}
.compose-translation-preview #translation-preview-text:not([readonly]):hover {
  border-color: #5a83c8 !important;
}
.translation-preview-status.hidden { display: none !important; }
@media (max-width: 720px) {
  .translation-preview-edit-row {
    grid-template-columns: minmax(0, 1fr) 36px 42px !important;
  }
  .translation-language-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* v0.5.3 — robot avatar, in-chat search, richer catalogue picker */
.brand-avatar {
  width: 56px;
  height: 56px;
  display: block;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(71,120,255,.28);
}
.brand-avatar.small {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(71,120,255,.22);
}
.login-avatar {
  margin-bottom: 22px;
}
.chat-search-bar {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(10,16,29,.78);
}
.chat-search-count {
  min-width: 54px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.message-row.search-match .bubble {
  border-color: rgba(130,164,255,.48);
}
.message-row.search-active .bubble {
  box-shadow: 0 0 0 2px rgba(71,120,255,.22), 0 12px 32px rgba(0,0,0,.18);
}
.catalogue-dialog {
  width: min(780px, calc(100vw - 28px));
}
.catalogue-business-header {
  display: grid;
  grid-template-columns: 56px minmax(0,1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #2b3a55;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18,29,48,.92), rgba(12,20,33,.92));
}
.catalogue-business-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}
.catalogue-business-header strong {
  display: block;
  margin-bottom: 4px;
}
.catalogue-business-header small {
  color: var(--muted);
  line-height: 1.45;
}
.catalogue-toolbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
}
.catalogue-selected-count {
  padding: 8px 12px;
  border: 1px solid #314564;
  border-radius: 999px;
  color: #cfe0ff;
  font-size: 12px;
  white-space: nowrap;
  background: rgba(19,29,48,.78);
}
.catalogue-products {
  grid-template-columns: 1fr;
}
.catalogue-card.selectable {
  position: relative;
  grid-template-columns: 22px 76px minmax(0,1fr);
  align-items: center;
  min-height: 94px;
}
.catalogue-card.selectable:hover {
  transform: translateY(-1px);
}
.catalogue-check {
  width: 20px;
  height: 20px;
  margin: 0;
}
.catalogue-thumb {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
  background: #0c111b;
  color: #8fa0ba;
  font-size: 28px;
}
.catalogue-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catalogue-card.selectable span:last-child {
  display: grid;
  gap: 5px;
}
.catalogue-card.selectable small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.catalogue-price {
  color: #dfe9ff;
  font-size: 13px;
}
.catalogue-footer {
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .chat-search-bar {
    grid-template-columns: minmax(0,1fr) auto auto auto;
  }
  .chat-search-count {
    grid-column: 1 / -1;
    text-align: left;
  }
  .catalogue-toolbar,
  .catalogue-footer {
    grid-template-columns: 1fr;
  }
}

/* v0.8.11 deployment-visible markers */
body[data-build="0.8.11"] .chat-search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding-inline: 14px;
  border-color: #3e5f98;
  color: #dbe8ff;
}
body[data-build="0.8.11"] .chat-search-toggle span {
  font-size: 20px;
  line-height: 1;
}
.app-version {
  display: block;
  margin-top: 3px;
  color: #6f86ad;
  font-size: 10px;
  letter-spacing: .08em;
}

/* v0.5.3 — AI inbox, WhatsApp buckets, multi-account and image viewer */
.ai-inbox-panel,
.ai-chat-header,
.multi-account-layout,
.image-lightbox {
  --ai-glow: rgba(86, 132, 255, .28);
}
.ai-panel-header {
  min-height: 86px;
  gap: 12px;
}
.inbox-header-actions,
.ai-chat-actions,
.contact-name-line,
.profile-name-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
.account-filter {
  width: 142px;
  min-width: 0;
  height: 42px;
  border-radius: 13px;
  background: rgba(13, 23, 40, .9);
  border-color: #304664;
  color: #dbe8ff;
  font-size: 12px;
}
.ai-icon-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #36517a;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(25, 42, 70, .95), rgba(12, 23, 42, .95));
  color: #dce9ff;
  font-size: 24px;
  cursor: pointer;
  transition: .18s ease;
}
.ai-icon-button.large {
  width: 48px;
  height: 48px;
  font-size: 28px;
  box-shadow: 0 0 0 1px rgba(92, 140, 255, .08), 0 10px 30px rgba(0,0,0,.16);
}
.ai-icon-button:hover {
  border-color: #6490ff;
  transform: translateY(-1px);
  box-shadow: 0 0 24px var(--ai-glow);
}
.inbox-search-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(119, 147, 191, .16);
  background: rgba(9, 17, 30, .86);
}
.inbox-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(119,147,191,.16);
}
.inbox-tabs button {
  border: 1px solid #2d405e;
  border-radius: 999px;
  padding: 8px 12px;
  background: #0d1728;
  color: #9eafca;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.inbox-tabs button span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(99, 133, 195, .18);
  color: #cfe0ff;
  font-size: 11px;
}
.inbox-tabs button.active {
  color: #fff;
  border-color: #5787ff;
  background: linear-gradient(135deg, #234d9f, #182e5c);
  box-shadow: 0 0 22px rgba(71,120,255,.2);
}
.ai-chat-header {
  min-height: 82px;
  background: linear-gradient(90deg, rgba(7,15,28,.98), rgba(11,24,42,.98));
}
.contact-title-block { min-width: 0; }
.contact-name-line h3 { margin: 0; }
.inline-edit-button {
  border: 0;
  border-radius: 10px;
  padding: 5px 8px;
  background: rgba(85,125,203,.12);
  color: #8ea9dc;
  cursor: pointer;
}
.inline-edit-button:hover { color: #fff; background: rgba(86,132,255,.25); }
.account-badge,
.conversation-type-badge,
.shared-ai-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid #315079;
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(25,43,72,.72);
  color: #9fc2ff;
  font-size: 10px;
  font-weight: 700;
}
.conversation-type-badge {
  padding: 2px 6px;
  font-size: 9px;
  vertical-align: middle;
}
.conversation-account-dot {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 7px;
  background: #203a68;
  color: #cfe0ff;
  font-size: 9px;
  font-weight: 800;
}
.ai-toggle-button {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  min-width: 106px;
  padding: 8px 12px;
  border: 1px solid #304867;
  border-radius: 16px;
  background: rgba(14, 26, 45, .9);
  color: #c7d6ee;
  cursor: pointer;
  text-align: left;
}
.ai-toggle-button .toggle-track {
  grid-row: 1 / 3;
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #354052;
  transition: .2s ease;
}
.ai-toggle-button .toggle-track i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d3d9e4;
  transition: .2s ease;
}
.ai-toggle-button b { font-size: 13px; line-height: 1; }
.ai-toggle-button small { color: #7789a5; font-size: 10px; }
.ai-toggle-button.active {
  border-color: #4f7ff0;
  background: linear-gradient(135deg, rgba(34,73,151,.9), rgba(18,42,88,.9));
  color: #fff;
  box-shadow: 0 0 24px rgba(71,120,255,.19);
}
.ai-toggle-button.active .toggle-track { background: #4c84ff; }
.ai-toggle-button.active .toggle-track i { transform: translateX(16px); background: #fff; }
.ai-toggle-button.active small { color: #bcd2ff; }
.chat-media-image { cursor: zoom-in; }
.chat-media-image:hover { filter: brightness(1.04); }
.profile-name-form {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 8px;
  margin: 10px 0;
}
.image-lightbox {
  width: min(96vw, 1480px);
  height: min(94vh, 980px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid #344d72;
  border-radius: 20px;
  background: rgba(5, 10, 18, .98);
  color: #fff;
  overflow: hidden;
}
.image-lightbox::backdrop { background: rgba(0,0,0,.86); backdrop-filter: blur(8px); }
.image-lightbox-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid #263958;
  background: #0c1627;
}
.image-lightbox-toolbar > div { display: flex; gap: 8px; align-items: center; }
.image-lightbox-toolbar button,
.image-lightbox-toolbar a {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #334c72;
  border-radius: 11px;
  background: #14233a;
  color: #e9f1ff;
  text-decoration: none;
  cursor: pointer;
}
.image-lightbox-stage {
  height: calc(100% - 58px);
  display: grid;
  place-items: center;
  overflow: auto;
  background-image: radial-gradient(circle at 50% 40%, rgba(42,72,122,.18), transparent 48%);
}
.image-lightbox-stage img {
  max-width: 94%;
  max-height: 90%;
  object-fit: contain;
  transform-origin: center;
  transition: transform .16s ease;
}
.multi-account-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.multi-account-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.multi-account-form .check,
.multi-account-form .row { grid-column: 1 / -1; }
.multi-account-layout {
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0,1fr);
  gap: 18px;
}
.wa-account-sidebar { padding: 12px; }
.wa-account-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px 14px;
}
.wa-account-list-header span {
  min-width: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #213b69;
  text-align: center;
}
.wa-account-list { display: grid; gap: 8px; }
.wa-account-item {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #273c5b;
  border-radius: 14px;
  background: #0d1829;
  color: #dfeaff;
  text-align: left;
  cursor: pointer;
}
.wa-account-item > span:nth-child(2) { display: grid; gap: 3px; }
.wa-account-item small { color: #8395b2; }
.wa-account-item.active {
  border-color: #5584f2;
  background: linear-gradient(135deg, rgba(31,65,133,.88), rgba(15,35,72,.92));
  box-shadow: 0 0 22px rgba(71,120,255,.16);
}
.shared-ai-badge { color: #8294b0; }
.shared-ai-badge.on { color: #83efc1; border-color: #287d62; background: rgba(21,81,64,.35); }
.multi-account-detail { margin: 0; }
.catalogue-sync-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #65424a;
  border-radius: 10px;
  background: rgba(101,48,61,.18);
  color: #f0b8c3;
  font-size: 12px;
  line-height: 1.5;
}
.catalogue-sync-note.success { border-color: #276650; background: rgba(29,91,69,.18); color: #9be4c7; }
@media (max-width: 1100px) {
  .account-filter { display: none; }
  .ai-toggle-button { min-width: 88px; padding: 7px 9px; }
  .multi-account-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ai-chat-header { align-items: flex-start; }
  .ai-chat-actions { gap: 5px; }
  .ai-toggle-button { min-width: 68px; grid-template-columns: auto; grid-template-rows: auto auto; text-align: center; }
  .ai-toggle-button .toggle-track { grid-row: auto; justify-self: center; }
  .ai-toggle-button b { font-size: 11px; }
  .profile-name-form, .multi-account-form { grid-template-columns: 1fr; }
  .profile-name-form > *, .multi-account-form > * { grid-column: 1; }
}

/* v0.5.3 — safer independent WhatsApp sessions and aligned inbox buckets */
.ai-panel-header > div:first-child {
  display: flex;
  align-items: center;
  min-height: 48px;
}
.ai-panel-header #inbox-title {
  margin: 0;
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1;
}
.inbox-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
  overflow: visible;
}
.inbox-tabs button {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  line-height: 1;
  text-align: center;
}
.inbox-tabs button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  margin: 0;
  padding: 0 7px;
  line-height: 1;
  flex: 0 0 auto;
}
.wa-account-item {
  grid-template-columns: auto minmax(0,1fr) auto;
}
.wa-account-actions {
  display: grid;
  justify-items: end;
  gap: 5px;
}
.safe-mode-badge,
.shared-ai-badge {
  min-width: 52px;
  padding: 4px 7px;
  border: 1px solid #334763;
  border-radius: 999px;
  background: rgba(13,24,41,.9);
  color: #8ea0bc;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}
.safe-mode-badge.on {
  border-color: #277a66;
  background: rgba(24,102,81,.25);
  color: #8cf0ca;
}
.account-safety-hint {
  grid-column: 1 / -1;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid #31516d;
  border-radius: 12px;
  background: rgba(25,54,79,.24);
  color: #a9bed8;
  font-size: 12px;
  line-height: 1.55;
}
.account-safety-panel {
  width: min(100%, 560px);
  display: grid;
  gap: 5px;
  margin: 4px auto 14px;
  padding: 12px 14px;
  border: 1px solid #2a5f58;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(21,72,66,.28), rgba(13,31,46,.6));
  text-align: left;
}
.account-safety-panel strong { color: #9cf0d1; }
.account-safety-panel span { color: #91a6c1; font-size: 12px; line-height: 1.45; }
.account-connection-actions {
  flex-wrap: wrap;
}
.account-connection-actions .button {
  min-width: 132px;
}
@media (max-width: 560px) {
  .inbox-tabs { gap: 6px; padding: 10px 8px; }
  .inbox-tabs button { gap: 4px; padding: 7px 5px; font-size: 12px; }
  .inbox-tabs button span { min-width: 21px; height: 21px; padding: 0 5px; font-size: 10px; }
}

/* v0.5.3 — compact inbox header, separate knowledge page and AI training studio */
.ai-panel-header {
  justify-content: flex-end;
  min-height: 82px;
}
.inbox-header-actions-only {
  width: 100%;
  justify-content: flex-end;
}
.ai-studio-page-header {
  align-items: flex-start;
}
.ai-studio-layout {
  display: grid;
  grid-template-columns: minmax(330px, 430px) minmax(0, 1fr);
  min-height: calc(100vh - 150px);
  border: 1px solid #263958;
  border-radius: 18px;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 18px 60px rgba(0,0,0,.2);
}
.ai-studio-config {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px;
  border-right: 1px solid #263958;
  overflow: auto;
  background: linear-gradient(180deg, #111a2b 0%, #0d1524 100%);
}
.ai-studio-panel-title,
.ai-playground-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ai-studio-panel-title span,
.ai-playground-topbar span,
.ai-playground-meta {
  color: var(--muted);
  font-size: 12px;
}
.ai-studio-panel-title span.dirty {
  color: #ffbd63;
}
.ai-studio-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.ai-studio-fieldset {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 16px;
  border: 1px solid #2c3e5d;
  border-radius: 14px;
  background: rgba(12,20,34,.72);
}
.ai-studio-fieldset legend {
  padding: 0 8px;
  color: #dbe7ff;
  font-weight: 800;
}
.ai-studio-config textarea {
  min-height: 280px;
  resize: vertical;
}
.ai-playground {
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto auto;
  min-width: 0;
  background:
    radial-gradient(circle at 70% 14%, rgba(62,111,255,.12), transparent 32%),
    #090f1a;
}
.ai-playground-topbar {
  min-height: 62px;
  padding: 0 20px;
  border-bottom: 1px solid #263958;
  background: rgba(12,18,30,.88);
}
.ai-playground-topbar > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ai-playground-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #46df9d;
  box-shadow: 0 0 0 5px rgba(70,223,157,.12);
}
.ai-playground-output {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 420px;
  padding: 28px;
  overflow: auto;
}
.ai-playground-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 100%;
  color: var(--muted);
  text-align: center;
}
.ai-playground-empty > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid #315082;
  border-radius: 18px;
  color: #7fa6ff;
  background: #111d32;
  font-size: 24px;
}
.ai-playground-empty strong {
  color: #dce7fb;
}
.ai-playground-message {
  max-width: min(78%, 720px);
  padding: 14px 17px;
  border-radius: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.ai-playground-message.customer {
  align-self: flex-end;
  border: 1px solid #4476df;
  background: #21499b;
  color: #fff;
}
.ai-playground-message.assistant {
  align-self: flex-start;
  border: 1px solid #2c405f;
  background: #151f30;
  color: #e7efff;
}
.ai-playground-composer {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 0 22px 10px;
  padding: 12px;
  border: 1px solid #314b77;
  border-radius: 18px;
  background: #111925;
  box-shadow: 0 12px 35px rgba(0,0,0,.22);
}
.ai-playground-composer textarea {
  min-height: 96px;
  border: 0;
  background: transparent;
  resize: vertical;
  box-shadow: none;
}
.ai-playground-meta {
  padding: 0 26px 18px;
}
.ai-playground-loading,
.ai-playground-error {
  align-self: center;
  margin: auto;
  color: var(--muted);
}
.ai-playground-loading span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid #5579ba;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.ai-playground-error {
  max-width: 680px;
  padding: 16px;
  border: 1px solid rgba(255,94,108,.45);
  border-radius: 14px;
  background: rgba(85,25,36,.55);
  color: #ffb4bd;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) {
  .ai-studio-layout { grid-template-columns: 1fr; }
  .ai-studio-config { border-right: 0; border-bottom: 1px solid #263958; }
}
@media (max-width: 720px) {
  .ai-studio-grid-2 { grid-template-columns: 1fr; }
  .ai-playground-output { padding: 18px; }
  .ai-playground-message { max-width: 92%; }
}

/* v0.5.3 — AI token usage and cost dashboard */
.ai-usage-dashboard {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid #2b436b;
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 0%, rgba(80,124,255,.18), transparent 34%),
    linear-gradient(145deg, #101a2d 0%, #0c1423 68%, #0a111d 100%);
  box-shadow: 0 18px 46px rgba(0,0,0,.2);
}
.ai-usage-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.ai-usage-heading h3 {
  margin: 2px 0 5px;
  font-size: 22px;
}
.ai-usage-heading p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
}
.ai-usage-periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.ai-usage-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid #2b3e5e;
  border-radius: 15px;
  background: rgba(8,15,26,.64);
}
.ai-usage-card.primary {
  border-color: #4779df;
  background: linear-gradient(145deg, rgba(34,75,157,.48), rgba(12,24,45,.86));
}
.ai-usage-card > span,
.ai-usage-card small,
.ai-usage-card em {
  color: var(--muted);
  font-style: normal;
}
.ai-usage-card strong {
  color: #f5f8ff;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -.03em;
}
.ai-usage-card em { font-size: 12px; }
.ai-usage-detail-grid {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr);
  gap: 12px;
}
.ai-token-breakdown {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  overflow: hidden;
  border: 1px solid #283b5a;
  border-radius: 14px;
  background: rgba(8,14,24,.55);
}
.ai-token-breakdown > div {
  display: grid;
  gap: 5px;
  padding: 13px;
  border-right: 1px solid #283b5a;
}
.ai-token-breakdown > div:last-child { border-right: 0; }
.ai-token-breakdown span { color: var(--muted); font-size: 12px; }
.ai-token-breakdown strong { font-size: 16px; }
.ai-usage-note {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 13px 15px;
  border: 1px solid #283b5a;
  border-radius: 14px;
  background: rgba(8,14,24,.55);
}
.ai-usage-note strong { color: #dce8ff; font-size: 13px; }
.ai-usage-note span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.ai-feature-usage {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 12px;
}
.ai-feature-usage summary {
  width: fit-content;
  cursor: pointer;
  color: #a9c4ff;
  font-weight: 700;
}
.ai-feature-usage-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.ai-feature-usage-row {
  display: grid;
  grid-template-columns: minmax(150px,.8fr) minmax(180px,1fr) minmax(190px,auto);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #263958;
  border-radius: 12px;
  background: rgba(7,13,23,.5);
}
.ai-feature-usage-row span { color: var(--muted); font-size: 12px; }
.ai-feature-usage-row b { text-align: right; color: #dce8ff; }
.ai-pricing-fieldset input:disabled { opacity: .65; }
@media (max-width: 1000px) {
  .ai-usage-periods { grid-template-columns: 1fr; }
  .ai-usage-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ai-usage-heading { align-items: stretch; flex-direction: column; }
  .ai-token-breakdown { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ai-token-breakdown > div { border-bottom: 1px solid #283b5a; }
  .ai-feature-usage-row { grid-template-columns: 1fr; }
  .ai-feature-usage-row b { text-align: left; }
}

/* v0.8.11 — official model sync and human-like reply timing */
.ai-model-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}
.ai-model-picker-row select {
  min-width: 0;
}
.ai-model-picker-row .button {
  min-height: 40px;
  padding-inline: 16px;
}
#ai-model-sync-status {
  display: block;
  margin-top: 7px;
  line-height: 1.45;
}
.human-reply-fieldset {
  background: rgba(17, 28, 47, .56);
}
.human-reply-fieldset .muted {
  margin: 8px 0 0;
  line-height: 1.5;
}
@media (max-width: 680px) {
  .ai-model-picker-row {
    grid-template-columns: 1fr;
  }
}


/* v0.8.11 compact chat media, document reading and knowledge matching */
.bubble.has-compact-image {
  width: fit-content;
  max-width: min(310px, 72%);
  padding: 7px 7px 8px;
}
.chat-media-image {
  width: auto !important;
  max-width: min(240px, 64vw) !important;
  max-height: 260px !important;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 8px;
}
.bubble.has-compact-image > span:not(.ai-badge),
.bubble.has-compact-image > .source-text,
.bubble.has-compact-image > .translation,
.bubble.has-compact-image > .image-analysis {
  margin-left: 4px;
  margin-right: 4px;
}
.bubble.has-document-media { min-width: min(330px, 66vw); }
.media-document {
  min-width: 0;
  max-width: 390px;
  padding: 10px 11px;
}
.media-document-icon {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.11);
  color: #f2f6ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
}
.media-document-details {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.media-document-details strong {
  overflow: hidden;
  color: #eef4ff;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.media-document-details small {
  margin: 0;
  color: #9eabc0;
  font-size: 10px;
  text-align: left;
}
.document-analysis { white-space: pre-wrap; }
@media (max-width: 720px) {
  .bubble.has-compact-image { max-width: 78%; }
  .chat-media-image { max-width: min(220px, 68vw) !important; max-height: 240px !important; }
  .bubble.has-document-media { min-width: min(290px, 78vw); }
}

/* v0.8.11 — staff permissions, WhatsApp composer, WhatsApp-fit media and mobile workspace */
body[data-build="0.8.11"] .mobile-chat-back {
  display: none;
}

body[data-build="0.8.11"] .bubble.has-compact-image {
  width: min(338px, 76%);
  max-width: min(338px, 76%);
  padding: 4px 4px 6px;
  overflow: hidden;
  white-space: normal;
}
body[data-build="0.8.11"] .bubble.has-compact-image.has-sticker-media {
  width: fit-content;
  max-width: min(230px, 60%);
  padding: 4px;
  background: transparent;
  border-color: transparent;
}
body[data-build="0.8.11"] .chat-media-image {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  max-height: 360px !important;
  margin: 0;
  border-radius: 11px 11px 7px 7px;
  background: rgba(4, 10, 19, .34);
  object-fit: contain;
}
body[data-build="0.8.11"] .has-sticker-media .chat-media-image {
  width: auto !important;
  max-width: min(210px, 56vw) !important;
  max-height: 220px !important;
  background: transparent;
}
body[data-build="0.8.11"] .bubble.has-compact-image .message-caption {
  display: block;
  margin: 0 !important;
  padding: 8px 8px 3px;
  line-height: 1.38;
  white-space: pre-wrap;
  word-break: break-word;
}
body[data-build="0.8.11"] .bubble.has-compact-image > .source-text,
body[data-build="0.8.11"] .bubble.has-compact-image > .translation,
body[data-build="0.8.11"] .bubble.has-compact-image > .image-analysis,
body[data-build="0.8.11"] .bubble.has-compact-image > .message-tools,
body[data-build="0.8.11"] .bubble.has-compact-image > small {
  margin-left: 8px;
  margin-right: 8px;
}

body[data-build="0.8.11"] .settings-layout {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
body[data-build="0.8.11"] .settings-layout > .settings-card {
  width: 100%;
  max-width: none;
}
body[data-build="0.8.11"] .compact-note {
  margin: -7px 0 0;
  font-size: 12px;
  line-height: 1.5;
}
body[data-build="0.8.11"] .staff-management {
  gap: 16px;
}
body[data-build="0.8.11"] .staff-management-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}
body[data-build="0.8.11"] .staff-management-header h3,
body[data-build="0.8.11"] .staff-management-header p {
  margin-bottom: 5px;
}
body[data-build="0.8.11"] .staff-user-list {
  display: grid;
  gap: 10px;
}
body[data-build="0.8.11"] .staff-user-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid #2b3d5b;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(18, 30, 51, .95), rgba(10, 18, 32, .95));
}
body[data-build="0.8.11"] .staff-user-card.disabled {
  opacity: .58;
}
body[data-build="0.8.11"] .staff-user-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #38547e;
  border-radius: 14px;
  background: linear-gradient(145deg, #203a69, #142440);
  color: #dce8ff;
  font-weight: 850;
}
body[data-build="0.8.11"] .staff-user-details {
  min-width: 0;
  display: grid;
  gap: 4px;
}
body[data-build="0.8.11"] .staff-user-details strong,
body[data-build="0.8.11"] .staff-user-details span,
body[data-build="0.8.11"] .staff-user-details small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body[data-build="0.8.11"] .staff-user-details span {
  color: #adbed8;
  font-size: 12px;
}
body[data-build="0.8.11"] .staff-user-details small {
  color: #7487a6;
  font-size: 11px;
}
body[data-build="0.8.11"] .staff-protected-label {
  padding: 6px 10px;
  border: 1px solid #345176;
  border-radius: 999px;
  color: #9fb6d7;
  font-size: 11px;
}
body[data-build="0.8.11"] .staff-user-form {
  display: grid;
  gap: 16px;
  padding: 17px;
  border: 1px solid #35527d;
  border-radius: 15px;
  background: rgba(8, 15, 27, .72);
  box-shadow: inset 0 0 28px rgba(71, 120, 255, .05);
}
body[data-build="0.8.11"] .staff-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
body[data-build="0.8.11"] .staff-enabled {
  align-self: end;
  min-height: 43px;
}
body[data-build="0.8.11"] .staff-permissions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin: 0;
  padding: 14px;
  border: 1px solid #2b3e5d;
  border-radius: 13px;
}
body[data-build="0.8.11"] .staff-permissions legend {
  padding: 0 7px;
  color: #8facff;
  font-size: 12px;
  font-weight: 800;
}
body[data-build="0.8.11"] .button.compact {
  width: auto;
  min-width: 68px;
  padding: 8px 11px;
}

@media (max-width: 900px) {
  body[data-build="0.8.11"] .staff-permissions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  html, body,
  body[data-build="0.8.11"] #app-view,
  body[data-build="0.8.11"] .app {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
  }
  body[data-build="0.8.11"] .login-page {
    min-height: 100dvh;
    padding: 16px;
  }
  body[data-build="0.8.11"] .login-card {
    padding: 26px 20px;
    border-radius: 18px;
  }
  body[data-build="0.8.11"] .app {
    display: block;
    padding-top: 60px;
    padding-bottom: calc(62px + env(safe-area-inset-bottom));
  }
  body[data-build="0.8.11"] .sidebar {
    position: fixed;
    z-index: 60;
    inset: 0 0 auto;
    width: 100%;
    height: 60px;
    min-height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid #355174;
    background: linear-gradient(110deg, #294767, #172d4c);
  }
  body[data-build="0.8.11"] .sidebar-brand {
    flex: 0 0 auto;
    margin: 0;
  }
  body[data-build="0.8.11"] .sidebar-brand span:last-child {
    display: inline;
    font-size: 15px;
  }
  body[data-build="0.8.11"] .sidebar .brand-avatar.small {
    width: 34px;
    height: 34px;
  }
  body[data-build="0.8.11"] .connection-pill {
    display: flex;
    min-width: 0;
    margin: 0 0 0 auto;
    padding: 7px 9px;
    font-size: 10px;
  }
  body[data-build="0.8.11"] .connection-pill span:last-child {
    display: none;
  }
  body[data-build="0.8.11"] .nav-section-title,
  body[data-build="0.8.11"] .sidebar-footer {
    display: none;
  }
  body[data-build="0.8.11"] .nav {
    position: fixed;
    z-index: 65;
    inset: auto 0 0;
    height: calc(62px + env(safe-area-inset-bottom));
    display: flex;
    gap: 4px;
    align-items: flex-start;
    overflow-x: auto;
    margin: 0;
    padding: 6px 7px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid #2a405e;
    background: rgba(10, 18, 31, .97);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .28);
    scrollbar-width: none;
  }
  body[data-build="0.8.11"] .nav::-webkit-scrollbar { display: none; }
  body[data-build="0.8.11"] .nav button {
    flex: 1 0 58px;
    width: auto;
    min-width: 58px;
    height: 50px;
    display: grid;
    grid-template-rows: 23px 16px;
    gap: 1px;
    place-items: center;
    padding: 4px 5px;
    font-size: 10px;
    text-align: center;
  }
  body[data-build="0.8.11"] .nav button span {
    width: auto;
    font-size: 18px;
  }
  body[data-build="0.8.11"] .view {
    height: calc(100dvh - 60px - 62px - env(safe-area-inset-bottom));
    min-height: 0;
  }
  body[data-build="0.8.11"] .content-view {
    height: calc(100dvh - 60px - 62px - env(safe-area-inset-bottom));
    overflow-y: auto;
    padding: 16px 13px 28px;
  }
  body[data-build="0.8.11"] .content-header {
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
  }
  body[data-build="0.8.11"] .content-header h2 {
    font-size: 23px;
  }
  body[data-build="0.8.11"] .inbox-view {
    height: calc(100dvh - 60px - 62px - env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
  }
  body[data-build="0.8.11"] .conversation-panel {
    height: 100%;
    border-right: 0;
  }
  body[data-build="0.8.11"] .ai-panel-header {
    min-height: 64px;
    padding: 10px 12px;
  }
  body[data-build="0.8.11"] .inbox-header-actions-only {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px 46px;
  }
  body[data-build="0.8.11"] .account-filter {
    display: block;
    width: 100%;
    height: 44px;
  }
  body[data-build="0.8.11"] .inbox-tabs {
    gap: 7px;
    padding: 9px 10px;
  }
  body[data-build="0.8.11"] .inbox-tabs button {
    min-height: 40px;
    padding: 7px 8px;
    font-size: 13px;
  }
  body[data-build="0.8.11"] .conversation-item {
    padding: 12px;
  }
  body[data-build="0.8.11"] .chat-panel {
    position: fixed;
    z-index: 55;
    inset: 60px 0 calc(62px + env(safe-area-inset-bottom));
    width: 100%;
    height: auto;
    transform: translateX(100%);
    transition: transform .2s ease;
  }
  body[data-build="0.8.11"] .chat-panel.mobile-open {
    transform: translateX(0);
  }
  body[data-build="0.8.11"] .mobile-chat-back {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid #304b70;
    border-radius: 11px;
    background: #101c30;
    color: #dce8ff;
    font-size: 28px;
    line-height: 1;
  }
  body[data-build="0.8.11"] .ai-chat-header {
    min-height: 64px;
    align-items: center;
    gap: 7px;
    padding: 8px 9px;
  }
  body[data-build="0.8.11"] .contact-summary {
    min-width: 0;
    flex: 1 1 auto;
  }
  body[data-build="0.8.11"] .contact-summary .avatar {
    width: 36px;
    height: 36px;
  }
  body[data-build="0.8.11"] .contact-title-block h3 {
    max-width: 28vw;
    overflow: hidden;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  body[data-build="0.8.11"] .contact-title-block p,
  body[data-build="0.8.11"] .contact-name-line .inline-edit-button,
  body[data-build="0.8.11"] #contact-account-badge {
    display: none;
  }
  body[data-build="0.8.11"] .ai-chat-actions {
    flex: 0 0 auto;
    gap: 4px;
  }
  body[data-build="0.8.11"] .ai-chat-actions .ai-icon-button {
    display: none;
  }
  body[data-build="0.8.11"] .ai-toggle-button {
    min-width: 56px;
    height: 46px;
    padding: 5px 6px;
  }
  body[data-build="0.8.11"] .ai-toggle-button b { font-size: 10px; }
  body[data-build="0.8.11"] .ai-toggle-button small { font-size: 9px; }
  body[data-build="0.8.11"] .toggle-track { transform: scale(.85); }
  body[data-build="0.8.11"] .chat-search-bar {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    padding: 8px;
  }
  body[data-build="0.8.11"] .monitor-banner {
    padding: 7px 10px;
    font-size: 10px;
  }
  body[data-build="0.8.11"] .message-list {
    padding: 12px 9px;
    scrollbar-gutter: auto;
  }
  body[data-build="0.8.11"] .bubble {
    max-width: 86%;
    font-size: 14px;
  }
  body[data-build="0.8.11"] .bubble.has-compact-image {
    width: min(300px, 82%);
    max-width: min(300px, 82%);
  }
  body[data-build="0.8.11"] .chat-media-image {
    max-height: 310px !important;
  }
  body[data-build="0.8.11"] .composer {
    min-height: 108px;
    padding: 7px 8px 9px;
  }
  body[data-build="0.8.11"] .composer .composer-input-shell #message-input {
    min-height: 54px;
    max-height: 128px;
    padding: 10px 11px 5px;
    font-size: 14px;
  }
  body[data-build="0.8.11"] .composer-bottom-bar {
    min-height: 44px;
  }
  body[data-build="0.8.11"] .send-tools-menu {
    left: 8px;
    right: 8px;
    bottom: 64px;
    width: auto;
    max-height: 58vh;
    grid-template-columns: 1fr;
  }
  body[data-build="0.8.11"] .emoji-panel {
    left: 8px;
    right: 8px;
    bottom: 64px;
    width: auto;
    height: 48vh;
  }
  body[data-build="0.8.11"] .compose-translation-preview {
    margin: 0;
  }
  body[data-build="0.8.11"] .translation-preview-edit-row {
    grid-template-columns: minmax(0, 1fr) 38px 42px;
  }
  body[data-build="0.8.11"] .customer-details { display: none; }
  body[data-build="0.8.11"] .settings-layout,
  body[data-build="0.8.11"] .staff-form-grid,
  body[data-build="0.8.11"] .staff-permissions,
  body[data-build="0.8.11"] .multi-account-layout,
  body[data-build="0.8.11"] .connection-grid,
  body[data-build="0.8.11"] .two-column {
    grid-template-columns: 1fr;
  }
  body[data-build="0.8.11"] .settings-card,
  body[data-build="0.8.11"] .staff-user-form {
    padding: 15px;
  }
  body[data-build="0.8.11"] .staff-management-header {
    display: grid;
  }
  body[data-build="0.8.11"] .staff-user-card {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 11px;
  }
  body[data-build="0.8.11"] .staff-user-avatar {
    width: 42px;
    height: 42px;
  }
  body[data-build="0.8.11"] .staff-user-details small {
    white-space: normal;
  }
  body[data-build="0.8.11"] .app-dialog,
  body[data-build="0.8.11"] .compact-dialog,
  body[data-build="0.8.11"] .contact-profile-dialog {
    width: calc(100vw - 16px);
    max-width: none;
    max-height: calc(100dvh - 24px);
    margin: auto;
    border-radius: 16px;
  }
}

@media (max-width: 720px) {
  body[data-build="0.8.11"] .ai-chat-actions .ai-icon-button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
  }
}
@media (max-width: 390px) {
  body[data-build="0.8.11"] .contact-summary .avatar { display: none; }
  body[data-build="0.8.11"] .contact-title-block h3 { max-width: 21vw; }
  body[data-build="0.8.11"] .ai-toggle-button { min-width: 51px; }
}

/* whatsapp-fit media and mobile workspace */

/* v0.8.11 — WhatsApp template/button message cards */
body[data-build="0.8.11"] .special-message-card.template {
  overflow: hidden;
  border-color: rgba(145, 171, 218, .34);
  background: rgba(8, 13, 23, .42);
}
body[data-build="0.8.11"] .special-message-card.template .special-card-header {
  padding-bottom: 9px;
}
body[data-build="0.8.11"] .template-message-text {
  margin: 0;
  white-space: pre-wrap;
  color: #edf3ff;
  font-size: 14px;
  line-height: 1.55;
}
body[data-build="0.8.11"] .template-message-footer {
  display: block;
  margin-top: 8px;
  color: #8e9ab0;
  font-size: 11px;
}
body[data-build="0.8.11"] .template-message-buttons {
  display: grid;
  gap: 1px;
  margin: 12px -12px -12px;
  border-top: 1px solid rgba(255,255,255,.12);
}
body[data-build="0.8.11"] .template-message-buttons button {
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  background: rgba(255,255,255,.035);
  color: #9fc0ff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
body[data-build="0.8.11"] .template-message-buttons button:first-child { border-top: 0; }
body[data-build="0.8.11"] .template-message-buttons button:hover { background: rgba(75,126,230,.14); }
body[data-build="0.8.11"] .special-message-card.template .special-card-body { padding: 12px; }
body[data-build="0.8.11"] .template-message-title { color: #f2f5fb; font-size: 14px; }


/* v0.8.11 — WhatsApp hold-to-send voice, composer paste/drop and compact template cards */
body[data-build="0.8.11"] .voice-message-button {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
body[data-build="0.8.11"] .voice-message-button.recording {
  transform: scale(1.06);
  box-shadow: 0 0 0 7px rgba(216,78,92,.15), 0 8px 20px rgba(216,78,92,.3);
}
body[data-build="0.8.11"] .composer-input-shell {
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body[data-build="0.8.11"] .composer-input-shell.drag-active {
  border-color: #4d86ff;
  background: rgba(38,91,190,.12);
  box-shadow: inset 0 0 0 2px rgba(77,134,255,.42), 0 0 0 4px rgba(77,134,255,.08);
}
body[data-build="0.8.11"] .composer-input-shell.drag-active::after {
  content: "松开即可加入图片或文件";
  position: absolute;
  inset: 8px;
  z-index: 5;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(132,174,255,.8);
  border-radius: 12px;
  background: rgba(7,14,27,.9);
  color: #cfe0ff;
  font-weight: 750;
  pointer-events: none;
}
body[data-build="0.8.11"] .bubble.has-template-message {
  width: min(356px, 74vw);
  max-width: min(356px, 74vw);
  padding: 3px;
  overflow: hidden;
  white-space: normal;
}
body[data-build="0.8.11"] .special-message-card.template {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  border-radius: 10px;
}
body[data-build="0.8.11"] .special-message-card.template .special-card-body {
  gap: 5px;
  padding: 9px 10px;
}
body[data-build="0.8.11"] .template-message-title {
  font-size: 13px;
  line-height: 1.4;
}
body[data-build="0.8.11"] .template-message-text {
  overflow-wrap: anywhere;
  font-size: 12.5px;
  line-height: 1.45;
}
body[data-build="0.8.11"] .template-message-footer {
  margin-top: 5px;
  font-size: 10px;
}
body[data-build="0.8.11"] .template-message-buttons {
  margin: 8px -10px -9px;
}
body[data-build="0.8.11"] .template-message-buttons button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.25;
}
@media (max-width: 720px) {
  body[data-build="0.8.11"] .bubble.has-template-message {
    width: min(340px, 86vw);
    max-width: min(340px, 86vw);
  }
  body[data-build="0.8.11"] .voice-recording-help { display: none; }
}

/* v0.8.11 — conversation invoice assistant */
.invoice-assistant-button {
  width: 46px;
  height: 46px;
  font-size: 21px;
}
.invoice-assistant-button:disabled { opacity: .45; cursor: not-allowed; }
.invoice-assistant-dialog {
  width: min(94vw, 980px);
  max-width: none;
  max-height: 92vh;
  overflow: auto;
  border-color: #3a5278;
  background: #0a1424;
}
.invoice-assistant-dialog::backdrop { background: rgba(1, 5, 12, .78); backdrop-filter: blur(5px); }
.invoice-assistant-toolbar,
.invoice-items-heading,
.invoice-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.invoice-assistant-toolbar { margin: 4px 0 14px; }
.invoice-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 11px;
  border: 1px solid #42577a;
  border-radius: 999px;
  background: #14213a;
  color: #b9c9e3;
  font-size: 12px;
  font-weight: 800;
}
.invoice-status.ready { border-color: #2f8c70; background: #0d2c29; color: #8ff0cf; }
.invoice-status.opened { border-color: #4f7ff0; background: #152e64; color: #d7e5ff; }
.invoice-status.confirmed { border-color: #18a66d; background: #0d3528; color: #9ef3ce; }
.invoice-missing-fields {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-left: 3px solid #f4b740;
  border-radius: 10px;
  background: rgba(91, 61, 8, .24);
  color: #f7d98d;
  font-size: 13px;
}
.invoice-draft-form { display: grid; gap: 16px; }
.invoice-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.invoice-fields-grid .span-2 { grid-column: 1 / -1; }
.invoice-draft-form label { display: grid; gap: 7px; color: #c6d4ea; font-size: 12px; font-weight: 700; }
.invoice-draft-form input,
.invoice-draft-form textarea {
  width: 100%;
  border: 1px solid #304869;
  border-radius: 11px;
  background: #07101e;
  color: #eef4ff;
  padding: 11px 12px;
}
.invoice-items-heading { padding-top: 4px; }
.invoice-items-heading > div { display: grid; gap: 4px; }
.invoice-items-heading small { color: #8497b5; }
.invoice-item-list { display: grid; gap: 9px; }
.invoice-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 120px 40px;
  gap: 9px;
  align-items: end;
}
.invoice-remove-item {
  width: 40px;
  height: 40px;
  border: 1px solid #653944;
  border-radius: 10px;
  background: #2a1119;
  color: #ff91a2;
  font-size: 20px;
  cursor: pointer;
}
.invoice-format-label textarea {
  min-height: 185px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.55;
  background: #050b14;
}
.invoice-bridge-note {
  margin: -4px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(57, 92, 155, .16);
  color: #9fb2d1;
  font-size: 12px;
}
.invoice-dialog-actions { justify-content: flex-end; flex-wrap: wrap; }
.button.success { border-color: #25835f; background: #126647; color: #fff; }
@media (max-width: 720px) {
  .invoice-assistant-dialog { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .invoice-fields-grid { grid-template-columns: 1fr; }
  .invoice-fields-grid .span-2 { grid-column: auto; }
  .invoice-item-row { grid-template-columns: minmax(0,1fr) 88px 88px 38px; }
  .invoice-assistant-toolbar { align-items: flex-start; }
  .invoice-dialog-actions { display: grid; grid-template-columns: 1fr; }
  .invoice-dialog-actions .button { width: 100%; }
}
.bill-bridge-install {
  padding: 11px 12px;
  border: 1px solid #2d4466;
  border-radius: 11px;
  background: rgba(15, 29, 50, .72);
}
.bill-bridge-install summary { cursor: pointer; color: #cfe0ff; font-weight: 700; }
.bill-bridge-install code { display: block; margin: 10px 0; padding: 10px; overflow-x: auto; border-radius: 8px; background: #050b14; color: #9dc1ff; font-size: 11px; white-space: nowrap; }


/* v0.8.11 — stable WhatsApp gestures, camera shortcut, edge swipe and smoother rendering */
html, body { overscroll-behavior: none; }
body[data-build="0.8.11"] .message-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
  contain: layout paint style;
}
body[data-build="0.8.11"] .message-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 110px;
}
body[data-build="0.8.11"] .bubble {
  transform: translateZ(0);
  backface-visibility: hidden;
}
body[data-build="0.8.11"] .chat-panel {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
body[data-build="0.8.11"] .chat-panel.edge-swiping { transition: none !important; }
body[data-build="0.8.11"] .camera-gesture-button,
body[data-build="0.8.11"] .voice-message-button,
body[data-build="0.8.11"] .send-icon-button {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
body[data-build="0.8.11"] .camera-gesture-button {
  background: transparent;
  color: #dce6f7;
  box-shadow: none;
}
body[data-build="0.8.11"] .camera-gesture-button:hover { background: #202a3b; }
body[data-build="0.8.11"] .camera-gesture-button svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-build="0.8.11"] .voice-message-button,
body[data-build="0.8.11"] .voice-message-button:hover,
body[data-build="0.8.11"] .voice-message-button.recording {
  transform: none !important;
}
body[data-build="0.8.11"] .voice-message-button.recording {
  background: #d84e5c;
  box-shadow: 0 0 0 7px rgba(216,78,92,.13);
  animation: voicePulse 1.15s infinite;
}
body[data-build="0.8.11"] .composer { position: relative; }
body[data-build="0.8.11"] .voice-recording-strip {
  position: absolute;
  z-index: 25;
  left: 9px;
  right: 67px;
  bottom: 9px;
  min-height: 48px;
  gap: 9px;
  padding: 8px 12px;
  border-color: rgba(255,92,109,.44);
  border-radius: 24px;
  background: rgba(58,16,25,.97);
  box-shadow: 0 8px 24px rgba(0,0,0,.34);
  transform: translate3d(var(--voice-drag-x, 0),0,0);
  transition: border-color .12s ease, background .12s ease;
  pointer-events: auto;
}
body[data-build="0.8.11"] .voice-recording-strip.cancel-armed {
  border-color: #ff6675;
  background: rgba(91,19,30,.98);
}
body[data-build="0.8.11"] .voice-recording-slide {
  min-width: 0;
  margin-inline: auto;
  overflow: hidden;
  color: #d6aeb5;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body[data-build="0.8.11"] .voice-recording-state {
  color: #ffd5da;
  font-weight: 700;
  white-space: nowrap;
}
body[data-build="0.8.11"] .voice-recording-strip.cancel-armed .voice-recording-slide,
body[data-build="0.8.11"] .voice-recording-strip.cancel-armed .voice-recording-state { color: #ffadb7; }
body[data-build="0.8.11"] .camera-recording-indicator {
  display: flex;
  gap: 8px;
  align-items: center;
  width: max-content;
  margin: 8px auto 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(136,22,39,.72);
  color: #ffd8dd;
  font-size: 12px;
}
body[data-build="0.8.11"] .camera-recording-indicator span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6070;
  animation: blink 1s infinite;
}
body[data-build="0.8.11"] .camera-recording-indicator time { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  body[data-build="0.8.11"] .chat-panel {
    touch-action: pan-y;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1);
  }
  body[data-build="0.8.11"] .chat-panel.mobile-open { transform: translate3d(0,0,0); }
  body[data-build="0.8.11"] .composer {
    min-height: auto;
    gap: 5px;
    padding: 6px 7px calc(7px + env(safe-area-inset-bottom));
    background: #0d1117;
    box-shadow: 0 -6px 18px rgba(0,0,0,.2);
  }
  body[data-build="0.8.11"] .composer-input-shell {
    border-radius: 24px;
    overflow: visible;
  }
  body[data-build="0.8.11"] .composer .composer-input-shell #message-input {
    min-height: 46px;
    max-height: 112px;
    padding: 10px 12px 3px;
    font-size: 16px;
    line-height: 1.35;
  }
  body[data-build="0.8.11"] .composer-bottom-bar {
    min-height: 44px;
    grid-template-columns: minmax(0,1fr) 0 auto;
    gap: 4px;
    padding: 0 5px 4px 6px;
  }
  body[data-build="0.8.11"] .composer-hint { display: none; }
  body[data-build="0.8.11"] .composer-actions { gap: 3px; }
  body[data-build="0.8.11"] .camera-gesture-button,
  body[data-build="0.8.11"] .voice-message-button,
  body[data-build="0.8.11"] .send-icon-button {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  body[data-build="0.8.11"] .voice-recording-strip {
    left: 8px;
    right: 58px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    min-height: 44px;
    padding: 7px 11px;
  }
  body[data-build="0.8.11"] .voice-recording-strip .mini-action { display: none; }
  body[data-build="0.8.11"] .voice-recording-state { font-size: 11px; }
  body[data-build="0.8.11"] .camera-dialog {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  body[data-build="0.8.11"] .camera-stage { min-height: 0; height: min(70dvh, 680px); }
  body[data-build="0.8.11"] dialog::backdrop { backdrop-filter: none; }
  body[data-build="0.8.11"] .message-tools { opacity: 1; }
}

/* v0.8.11 — mobile inbox visibility regression fix
   Keep the conversation list visible until a customer is explicitly opened.
   This block must stay at the end because earlier GPU rules also set transform. */
@media (max-width: 720px) {
  body[data-build="0.8.11"] .chat-panel:not(.mobile-open) {
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    pointer-events: none;
  }
  body[data-build="0.8.11"] .chat-panel.mobile-open,
  body[data-build="0.8.11"] .chat-panel.edge-swiping {
    visibility: visible;
    pointer-events: auto;
  }
  body[data-build="0.8.11"] .chat-panel.mobile-open {
    transform: translate3d(0, 0, 0);
  }
  body[data-build="0.8.11"] .conversation-panel {
    visibility: visible;
    pointer-events: auto;
  }
}

/* v0.8.11 — compact WhatsApp composer, lower desktop chrome, camera slide-cancel and red unread badges */
body[data-build="0.8.11"] #contact-account-badge,
body[data-build="0.8.11"] .conversation-account-dot {
  display: none !important;
}

body[data-build="0.8.11"] .ai-panel-header,
body[data-build="0.8.11"] .ai-chat-header {
  min-height: 58px;
  padding: 6px 11px;
}

body[data-build="0.8.11"] .ai-chat-header {
  gap: 8px;
}

body[data-build="0.8.11"] .contact-summary {
  gap: 9px;
}

body[data-build="0.8.11"] .contact-summary .avatar {
  width: 36px;
  height: 36px;
}

body[data-build="0.8.11"] .contact-title-block h3 {
  font-size: 16px;
  line-height: 1.1;
}

body[data-build="0.8.11"] .contact-title-block p {
  margin-top: 2px;
  font-size: 10px;
}

body[data-build="0.8.11"] .ai-chat-actions {
  gap: 6px;
  align-items: center;
}

body[data-build="0.8.11"] .ai-chat-actions .ai-icon-button {
  width: 38px;
  height: 38px;
  min-width: 38px;
}

body[data-build="0.8.11"] .ai-toggle-button {
  min-width: 82px;
  height: 40px;
  padding: 4px 7px;
}

body[data-build="0.8.11"] .conversation-meta {
  min-width: 48px;
  display: grid;
  grid-template-columns: auto;
  justify-items: end;
  gap: 5px;
}

body[data-build="0.8.11"] .conversation-pin-toggle {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6f809d;
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s ease, color .14s ease, background .14s ease;
}

body[data-build="0.8.11"] .conversation-item:hover .conversation-pin-toggle,
body[data-build="0.8.11"] .conversation-pin-toggle:focus-visible,
body[data-build="0.8.11"] .conversation-pin-toggle.active {
  opacity: 1;
}

body[data-build="0.8.11"] .conversation-pin-toggle:hover {
  color: #d9e5f8;
  background: #20304a;
}

body[data-build="0.8.11"] .conversation-pin-toggle.active {
  color: #9fb0c9;
}

body[data-build="0.8.11"] .conversation-pin-toggle svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-build="0.8.11"] .unread {
  width: 21px;
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: #ef3f4d;
  color: #fff;
  box-shadow: 0 2px 8px rgba(239, 63, 77, .28);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

body[data-build="0.8.11"] .composer {
  min-height: 66px;
  gap: 6px;
  padding: 6px 9px 8px;
}

body[data-build="0.8.11"] .composer-input-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  min-height: 50px;
  padding: 3px 5px;
  overflow: visible;
  border-radius: 25px;
}

body[data-build="0.8.11"] .composer .composer-input-shell #message-input {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-height: 40px;
  max-height: 128px;
  padding: 9px 8px;
  overflow-y: auto;
  line-height: 1.35;
}

body[data-build="0.8.11"] .composer-bottom-bar {
  display: contents;
}

body[data-build="0.8.11"] .composer-tools {
  grid-column: 1;
  grid-row: 1;
  gap: 2px;
  overflow: visible;
}

body[data-build="0.8.11"] .composer-actions {
  grid-column: 3;
  grid-row: 1;
  gap: 3px;
  display: flex;
  align-items: center;
}

body[data-build="0.8.11"] .composer-hint {
  display: none;
}

body[data-build="0.8.11"] .tool-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
}

body[data-build="0.8.11"] .camera-gesture-button,
body[data-build="0.8.11"] .voice-message-button,
body[data-build="0.8.11"] .send-icon-button {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

body[data-build="0.8.11"] .camera-recording-indicator {
  max-width: calc(100% - 20px);
}

body[data-build="0.8.11"] .camera-recording-indicator em {
  margin-left: 6px;
  color: #d6aeb5;
  font-style: normal;
  white-space: nowrap;
}

body[data-build="0.8.11"] .camera-recording-indicator.cancel-armed {
  border: 1px solid #ff6675;
  background: rgba(102, 22, 35, .94);
}

body[data-build="0.8.11"] .camera-recording-indicator.cancel-armed em {
  color: #ffb4bd;
  font-weight: 800;
}

@media (max-width: 720px) {
  body[data-build="0.8.11"] .ai-chat-header {
    min-height: 58px;
    padding: 6px 7px;
  }

  body[data-build="0.8.11"] .mobile-chat-back {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  body[data-build="0.8.11"] .contact-title-block h3 {
    max-width: 29vw;
    font-size: 15px;
  }

  body[data-build="0.8.11"] .contact-title-block p {
    display: none;
  }

  body[data-build="0.8.11"] .ai-chat-actions .ai-icon-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  body[data-build="0.8.11"] .ai-toggle-button {
    min-width: 54px;
    height: 42px;
    padding: 4px 5px;
  }

  body[data-build="0.8.11"] .composer {
    min-height: 58px;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
  }

  body[data-build="0.8.11"] .composer-input-shell {
    min-height: 48px;
    padding: 3px 4px;
    border-radius: 24px;
  }

  body[data-build="0.8.11"] .composer .composer-input-shell #message-input {
    min-height: 38px;
    max-height: 92px;
    padding: 8px 5px;
    font-size: 16px;
    line-height: 1.28;
  }

  body[data-build="0.8.11"] .composer-tools {
    gap: 0;
  }

  body[data-build="0.8.11"] #quick-reply-button {
    display: none;
  }

  body[data-build="0.8.11"] .tool-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }

  body[data-build="0.8.11"] .camera-gesture-button,
  body[data-build="0.8.11"] .voice-message-button,
  body[data-build="0.8.11"] .send-icon-button {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  body[data-build="0.8.11"] .voice-recording-strip {
    left: 5px;
    right: 51px;
    bottom: calc(5px + env(safe-area-inset-bottom));
  }

  body[data-build="0.8.11"] .conversation-pin-toggle:not(.active) {
    display: none;
  }

  body[data-build="0.8.11"] .camera-recording-indicator {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    margin: 0;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(32, 20, 25, .88);
    box-shadow: 0 8px 28px rgba(0,0,0,.32);
  }

  body[data-build="0.8.11"] .camera-recording-indicator b {
    display: none;
  }

  body[data-build="0.8.11"] .camera-recording-indicator em {
    margin-left: 8px;
  }
}


/* v0.8.11 — WhatsApp-standard desktop message density
   Keep the conversation readable without oversized sales-chat bubbles. */
@media (min-width: 721px) {
  body[data-build="0.8.11"] .message-list {
    padding: 12px clamp(22px, 3vw, 40px) 10px;
  }

  body[data-build="0.8.11"] .message-row {
    margin: 3px 0;
  }

  body[data-build="0.8.11"] .bubble {
    max-width: min(610px, 68%);
    padding: 7px 9px 5px;
    border-radius: 9px 9px 9px 3px;
    font-size: 13.5px;
    line-height: 1.36;
  }

  body[data-build="0.8.11"] .message-row.outbound .bubble {
    border-radius: 9px 9px 3px 9px;
  }

  body[data-build="0.8.11"] .bubble .ai-badge {
    margin-right: 4px;
    font-size: 11px;
    line-height: 1;
  }

  body[data-build="0.8.11"] .bubble small {
    margin-top: 3px;
    font-size: 8px;
    line-height: 1.2;
  }

  body[data-build="0.8.11"] .message-tools {
    gap: 1px;
    margin-top: 3px;
    opacity: .2;
  }

  body[data-build="0.8.11"] .message-tool {
    min-height: 19px;
    gap: 2px;
    padding: 1px 3px;
    border-radius: 5px;
  }

  body[data-build="0.8.11"] .message-tool svg {
    width: 11px;
    height: 11px;
  }

  body[data-build="0.8.11"] .message-tool span,
  body[data-build="0.8.11"] .message-tool {
    font-size: 8.5px;
    line-height: 1.15;
  }

  body[data-build="0.8.11"] .translation,
  body[data-build="0.8.11"] .source-text,
  body[data-build="0.8.11"] .image-analysis,
  body[data-build="0.8.11"] .transcription,
  body[data-build="0.8.11"] .video-analysis,
  body[data-build="0.8.11"] .document-analysis {
    margin-top: 5px;
    padding-top: 5px;
    font-size: 11.5px;
    line-height: 1.42;
  }

  body[data-build="0.8.11"] .translation::before,
  body[data-build="0.8.11"] .source-text::before,
  body[data-build="0.8.11"] .image-analysis::before,
  body[data-build="0.8.11"] .transcription::before,
  body[data-build="0.8.11"] .video-analysis::before,
  body[data-build="0.8.11"] .document-analysis::before {
    margin-bottom: 2px;
    font-size: 8.5px;
  }

  body[data-build="0.8.11"] .quoted-message {
    margin-bottom: 5px;
    padding: 5px 7px;
    font-size: 10px;
  }

  body[data-build="0.8.11"] .revoked-notice {
    margin-top: 5px;
    padding-top: 5px;
    font-size: 9px;
  }

  body[data-build="0.8.11"] .bubble.has-compact-image .message-caption {
    padding: 6px 7px 2px;
    font-size: 13px;
    line-height: 1.34;
  }
}


/* v0.8.11 — owner-selectable AI/free outgoing translation and dual choices */
body[data-build="0.8.11"] .translation-provider-field {
  display: grid;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid #2c4164;
  border-radius: 13px;
  background: #101a2b;
}
body[data-build="0.8.11"] .translation-provider-title {
  color: #d9e5f7;
  font-size: 12px;
  font-weight: 800;
}
body[data-build="0.8.11"] .translation-provider-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body[data-build="0.8.11"] .translation-provider-switch button {
  min-height: 42px;
  border: 1px solid #344b70;
  border-radius: 11px;
  background: #111c2e;
  color: #aebdd3;
  font-weight: 800;
  cursor: pointer;
}
body[data-build="0.8.11"] .translation-provider-switch button.active {
  border-color: #4f82ff;
  background: #1e3d76;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(91,139,255,.35);
}
body[data-build="0.8.11"] .translation-provider-switch button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
body[data-build="0.8.11"] .translation-provider-field small {
  color: #8797ae;
  line-height: 1.45;
}
body[data-build="0.8.11"] .translation-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 10px 0;
}
body[data-build="0.8.11"] .translation-choice {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px 11px;
  text-align: left;
  border: 1px solid #304463;
  border-radius: 11px;
  background: #101927;
  color: #dbe6f8;
  cursor: pointer;
}
body[data-build="0.8.11"] .translation-choice span {
  color: #7898ce;
  font-size: 10px;
  font-weight: 800;
}
body[data-build="0.8.11"] .translation-choice strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.35;
}
body[data-build="0.8.11"] .translation-choice.active {
  border-color: #4f82ff;
  background: #172c52;
  box-shadow: 0 0 0 1px rgba(79,130,255,.22);
}
body[data-build="0.8.11"] .compose-translation-preview:has(.translation-choice-list:not(.hidden)) {
  max-height: min(360px, 48vh);
}
@media (max-width: 720px) {
  body[data-build="0.8.11"] .translation-choice-list {
    grid-template-columns: 1fr;
    max-height: 130px;
    overflow-y: auto;
  }
  body[data-build="0.8.11"] .translation-choice {
    padding: 8px 10px;
  }
  body[data-build="0.8.11"] .translation-provider-switch button {
    min-height: 38px;
  }
}


/* v0.8.11 — native mobile composer, multi-photo upload, pull refresh and compact AI markers */
body[data-build="0.8.11"] #message-input {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  max-height: 128px;
  padding: 9px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-user-select: text;
  user-select: text;
}
body[data-build="0.8.11"] #message-input:empty::before,
body[data-build="0.8.11"] #message-input.empty::before {
  content: attr(data-placeholder);
  color: #6f7888;
  pointer-events: none;
}
body[data-build="0.8.11"] #message-input[contenteditable="false"] { opacity: .65; }

body[data-build="0.8.11"] .attachment-preview {
  display: grid;
  gap: 8px;
  padding: 8px;
}
body[data-build="0.8.11"] .attachment-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 3px;
}
body[data-build="0.8.11"] .attachment-preview-header strong { font-size: 11px; color: #b7c8e2; }
body[data-build="0.8.11"] .attachment-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
body[data-build="0.8.11"] .attachment-preview-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 24px;
  gap: 7px;
  align-items: center;
  padding: 5px;
  border: 1px solid #30415f;
  border-radius: 10px;
  background: #0b1423;
}
body[data-build="0.8.11"] .attachment-preview-item img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 7px;
}
body[data-build="0.8.11"] .attachment-preview-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #15233a;
  font-size: 21px;
}
body[data-build="0.8.11"] .attachment-preview-details { min-width: 0; display: grid; gap: 2px; }
body[data-build="0.8.11"] .attachment-preview-details b,
body[data-build="0.8.11"] .attachment-preview-details small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body[data-build="0.8.11"] .attachment-preview-details b { font-size: 10px; }
body[data-build="0.8.11"] .attachment-preview-details small { color: #7f92b0; font-size: 9px; }
body[data-build="0.8.11"] .attachment-preview-remove { width: 24px; height: 24px; padding: 0; border-radius: 50%; background: #3a1a25; }

body[data-build="0.8.11"] .conversation-panel { position: relative; }
body[data-build="0.8.11"] .inbox-pull-indicator {
  position: absolute;
  z-index: 1;
  top: 116px;
  left: 50%;
  transform: translate(-50%, -34px);
  opacity: 0;
  color: #9db4d6;
  font-size: 11px;
  font-weight: 750;
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}
body[data-build="0.8.11"] .ai-inbox-panel.pulling .inbox-pull-indicator,
body[data-build="0.8.11"] .ai-inbox-panel.pull-refreshing .inbox-pull-indicator {
  opacity: 1;
  transform: translate(-50%, max(-28px, calc(var(--pull-distance, 46px) - 42px)));
}
body[data-build="0.8.11"] .conversation-list { transition: transform .18s cubic-bezier(.2,.8,.2,1); }
body[data-build="0.8.11"] .ai-inbox-panel.pulling .conversation-list { transition: none; }
body[data-build="0.8.11"] .conversation-pin-toggle {
  font-size: 14px;
  filter: saturate(.72);
}
body[data-build="0.8.11"] .conversation-pin-toggle.active { filter: none; }
body[data-build="0.8.11"] .bubble .ai-badge { font-size: 12px; }

@media (max-width: 720px) {
  body[data-build="0.8.11"] #refresh-conversations { display: none !important; }
  body[data-build="0.8.11"] .inbox-header-actions-only { grid-template-columns: minmax(0,1fr) 46px; }
  body[data-build="0.8.11"] #message-input {
    min-height: 38px;
    max-height: 92px;
    padding: 8px 5px;
    font-size: 16px;
    line-height: 1.28;
  }
  body[data-build="0.8.11"] .attachment-preview-grid { grid-template-columns: 1fr 1fr; }
  body[data-build="0.8.11"] .attachment-preview-item { grid-template-columns: 36px minmax(0,1fr) 22px; }
  body[data-build="0.8.11"] .attachment-preview-item img,
  body[data-build="0.8.11"] .attachment-preview-icon { width: 36px; height: 36px; }
  body.keyboard-open[data-build="0.8.11"] .nav { display: none !important; }
  body.keyboard-open[data-build="0.8.11"] .app { padding-bottom: 0; }
  body.keyboard-open[data-build="0.8.11"] .chat-panel {
    bottom: var(--td-keyboard-bottom, 0px);
  }
  body.keyboard-open[data-build="0.8.11"] .composer {
    padding-bottom: 4px;
  }
  body.keyboard-open[data-build="0.8.11"] .message-list {
    scroll-padding-bottom: 58px;
  }
}

/* v0.8.11 — WhatsApp-style folded message actions, multi-forward, compact media and call alerts */
body[data-build="0.8.11"] .bubble { position: relative; }
body[data-build="0.8.11"] .message-actions-shell {
  position: absolute;
  z-index: 18;
  top: 3px;
  right: 4px;
}
body[data-build="0.8.11"] .message-actions-trigger {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: rgba(7,12,20,.74);
  color: #b9c7db;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transform: translateY(-2px);
  transition: opacity .12s ease, background .12s ease, transform .12s ease;
}
body[data-build="0.8.11"] .message-actions-trigger svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: currentColor;
}
body[data-build="0.8.11"] .message-row:hover .message-actions-trigger,
body[data-build="0.8.11"] .message-actions-shell.open .message-actions-trigger,
body[data-build="0.8.11"] .message-actions-trigger:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
body[data-build="0.8.11"] .message-actions-trigger:hover { background: rgba(4,8,14,.94); color: #fff; }
body[data-build="0.8.11"] .message-action-menu {
  position: fixed;
  top: var(--message-menu-top, 80px);
  left: var(--message-menu-left, 8px);
  right: auto;
  width: max-content;
  min-width: 164px;
  max-width: min(240px, 78vw);
  display: none;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 7px;
  border: 1px solid #344359;
  border-radius: 11px;
  background: #111820;
  box-shadow: 0 16px 42px rgba(0,0,0,.46);
  opacity: 1;
  white-space: nowrap;
}
body[data-build="0.8.11"] .message-actions-shell.open .message-action-menu { display: flex; }
body[data-build="0.8.11"] .message-action-menu .message-tool {
  width: 100%;
  min-height: 35px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  color: #e6edf7;
  opacity: 1;
  font-size: 13px;
}
body[data-build="0.8.11"] .message-action-menu .message-tool:hover { background: #202a37; }
body[data-build="0.8.11"] .message-action-menu .message-tool svg { width: 17px; height: 17px; }
body[data-build="0.8.11"] .message-action-menu .message-tool span { font-size: 13px; }
body[data-build="0.8.11"] .message-action-menu .danger-link { color: #ff9eaa; }
body[data-build="0.8.11"] .message-action-menu .reaction-picker {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: min(360px, 90vw);
  padding: 7px;
  border: 1px solid #3a4659;
  border-radius: 999px;
  background: #141a21;
  box-shadow: 0 12px 35px rgba(0,0,0,.42);
}
body[data-build="0.8.11"] .message-selection-bar {
  min-height: 48px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid #2b3a52;
  background: #101c30;
}
body[data-build="0.8.11"] .message-selection-bar.hidden { display: none; }
body[data-build="0.8.11"] .message-selection-bar strong { color: #e9f0fb; font-size: 13px; }
body[data-build="0.8.11"] .message-row.selection-mode { cursor: pointer; }
body[data-build="0.8.11"] .message-row.selection-mode::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
body[data-build="0.8.11"] .message-row.selected { background: rgba(48,106,225,.13); }
body[data-build="0.8.11"] .message-select-check {
  width: 22px;
  height: 22px;
  display: none;
  place-items: center;
  flex: 0 0 22px;
  margin: auto 8px;
  border: 2px solid #667995;
  border-radius: 50%;
  background: #101927;
  color: white;
  font-size: 13px;
  font-weight: 900;
}
body[data-build="0.8.11"] .message-row.selection-mode .message-select-check { display: grid; }
body[data-build="0.8.11"] .message-row.selected .message-select-check { border-color: #3f7cff; background: #3372ef; }
body[data-build="0.8.11"] .forward-dialog { width: min(92vw, 520px); max-width: 520px; }
body[data-build="0.8.11"] .forward-dialog-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: #aebed5;
  font-size: 12px;
}
body[data-build="0.8.11"] .forward-dialog-summary strong { color: #e6eefb; }
body[data-build="0.8.11"] .forward-conversation-search { width: 100%; margin-bottom: 10px; }
body[data-build="0.8.11"] .forward-conversation-list {
  max-height: min(54vh, 480px);
  display: grid;
  gap: 4px;
  overflow-y: auto;
  padding: 3px;
  border: 1px solid #26364f;
  border-radius: 12px;
  background: #0b1421;
}
body[data-build="0.8.11"] .forward-conversation-option {
  display: grid;
  grid-template-columns: 22px 38px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 9px;
  border-radius: 9px;
  cursor: pointer;
}
body[data-build="0.8.11"] .forward-conversation-option:hover { background: #18253a; }
body[data-build="0.8.11"] .forward-conversation-option > span:last-child { min-width: 0; display: grid; }
body[data-build="0.8.11"] .forward-conversation-option strong,
body[data-build="0.8.11"] .forward-conversation-option small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body[data-build="0.8.11"] .forward-conversation-option small { color: #8190a7; }
body[data-build="0.8.11"] .forward-conversation-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #243653;
  color: #dbe7fb;
  font-weight: 850;
}
body[data-build="0.8.11"] .bubble.has-compact-image {
  width: fit-content !important;
  max-width: min(252px, 48vw) !important;
  padding: 4px !important;
}
body[data-build="0.8.11"] .chat-media-image {
  width: auto !important;
  max-width: min(240px, 46vw) !important;
  max-height: 290px !important;
  object-fit: cover;
  border-radius: 8px;
}
body[data-build="0.8.11"] .bubble.has-compact-image .message-caption { max-width: 240px; }
body[data-build="0.8.11"] .incoming-call-dialog {
  width: min(92vw, 420px);
  max-width: 420px;
  padding: 28px 24px 22px;
  border: 1px solid #3b4e69;
  border-radius: 24px;
  background: linear-gradient(160deg, #14233a, #0a111c 70%);
  color: #eef5ff;
  text-align: center;
  box-shadow: 0 30px 90px rgba(0,0,0,.62);
}
body[data-build="0.8.11"] .incoming-call-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(7px); }
body[data-build="0.8.11"] .incoming-call-avatar {
  width: 86px;
  height: 86px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #203b65;
  box-shadow: 0 0 0 10px rgba(60,119,228,.08);
  animation: incomingCallPulse 1.55s ease-in-out infinite;
}
body[data-build="0.8.11"] .incoming-call-avatar img { width: 60px; height: 60px; }
body[data-build="0.8.11"] .incoming-call-dialog h2 { margin: 7px 0 3px; font-size: 25px; }
body[data-build="0.8.11"] .incoming-call-limit { margin: 18px 0; color: #91a3bc; font-size: 12px; line-height: 1.5; }
body[data-build="0.8.11"] .incoming-call-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
body[data-build="0.8.11"] .call-button { min-height: 48px; border: 0; border-radius: 14px; color: #fff; font-weight: 800; cursor: pointer; }
body[data-build="0.8.11"] .call-button.reject { background: #c43b50; }
body[data-build="0.8.11"] .call-button.ignore { background: #35445b; }
body[data-build="0.8.11"] .call-button.answer { background: #15945d; }
@keyframes incomingCallPulse { 50% { transform: scale(1.05); box-shadow: 0 0 0 18px rgba(60,119,228,.035); } }

/* smoother rendering: coalesced socket refreshes + cheaper mobile paint */
body[data-build="0.8.11"] .conversation-item,
body[data-build="0.8.11"] .message-row { contain: layout paint style; }
body[data-build="0.8.11"] .message-row { position: relative; }
body[data-build="0.8.11"] .conversation-list,
body[data-build="0.8.11"] .message-list { scroll-behavior: auto; }
body[data-build="0.8.11"] .bubble,
body[data-build="0.8.11"] .conversation-item { transition-duration: .1s; }

@media (hover: none), (pointer: coarse) {
  body[data-build="0.8.11"] .message-actions-trigger { display: none; }
}
@media (max-width: 720px) {
  body[data-build="0.8.11"] .message-list { padding: 8px 6px 10px; }
  body[data-build="0.8.11"] .message-row { margin: 3px 0; }
  body[data-build="0.8.11"] .bubble.has-compact-image { max-width: min(232px, 68vw) !important; }
  body[data-build="0.8.11"] .chat-media-image { max-width: min(220px, 66vw) !important; max-height: 280px !important; }
  body[data-build="0.8.11"] .message-select-check { margin-inline: 4px; }
  body[data-build="0.8.11"] .forward-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 18px); }
  body[data-build="0.8.11"] .incoming-call-dialog { width: calc(100vw - 22px); }
  body[data-build="0.8.11"] .incoming-call-actions { grid-template-columns: 1fr; }
  body[data-build="0.8.11"] .incoming-call-dialog::backdrop,
  body[data-build="0.8.11"] dialog::backdrop { backdrop-filter: none; }
  body[data-build="0.8.11"] .chat-panel,
  body[data-build="0.8.11"] .bubble { will-change: auto; }
}
@media (display-mode: standalone) {
  body[data-build="0.8.11"] .app { min-height: 100dvh; }
  body[data-build="0.8.11"] .sidebar { padding-top: max(8px, env(safe-area-inset-top)); }
}
@media (hover: none), (pointer: coarse) {
  body[data-build="0.8.11"] .bubble {
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }
}

body[data-build="0.8.11"] .message-actions-shell.open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0,0,0,.08);
}
@media (max-width: 720px) {
  body[data-build="0.8.11"] .message-action-menu {
    min-width: min(236px, calc(100vw - 16px));
    max-height: min(62vh, 390px);
    overflow-y: auto;
    padding: 8px;
    border-radius: 16px;
  }
  body[data-build="0.8.11"] .message-action-menu .message-tool {
    min-height: 42px;
    font-size: 14px;
  }
}
/* v0.8.11 final compact image density — closer to Salesmartly/WhatsApp thumbnails */
body[data-build="0.8.11"] .bubble.has-compact-image {
  max-width: min(228px, 42vw) !important;
}
body[data-build="0.8.11"] .chat-media-image {
  max-width: min(220px, 40vw) !important;
  max-height: 286px !important;
}
body[data-build="0.8.11"] .bubble.has-compact-image .message-caption { max-width: 220px !important; }
@media (max-width: 720px) {
  body[data-build="0.8.11"] .bubble.has-compact-image { max-width: min(208px, 61vw) !important; }
  body[data-build="0.8.11"] .chat-media-image { max-width: min(200px, 59vw) !important; max-height: 260px !important; }
  body[data-build="0.8.11"] .bubble.has-compact-image .message-caption { max-width: 200px !important; }
}

/* v0.8.11 — reliable message actions, full image gallery, stealth unread sync and call controls */
body[data-build="0.8.11"] .message-action-menu.portal-open {
  display: flex !important;
  position: fixed !important;
  z-index: 10050 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}
body[data-build="0.8.11"] .message-actions-shell.open { z-index: 10049; }
body[data-build="0.8.11"] .message-row,
body[data-build="0.8.11"] .bubble { overflow: visible; }
body[data-build="0.8.11"] .message-action-menu .message-tool { touch-action: manipulation; }

body[data-build="0.8.11"] .conversation-call-launcher {
  position: relative;
  display: inline-grid;
  place-items: center;
}
body[data-build="0.8.11"] .conversation-call-menu {
  position: absolute;
  z-index: 200;
  top: calc(100% + 9px);
  right: 0;
  width: 210px;
  padding: 7px;
  border: 1px solid #344963;
  border-radius: 14px;
  background: #131b24;
  box-shadow: 0 18px 48px rgba(0,0,0,.48);
}
body[data-build="0.8.11"] .conversation-call-menu.hidden { display: none; }
body[data-build="0.8.11"] .conversation-call-menu button {
  width: 100%;
  min-height: 45px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #edf4ff;
  text-align: left;
  cursor: pointer;
}
body[data-build="0.8.11"] .conversation-call-menu button:hover { background: #202c3b; }
body[data-build="0.8.11"] .conversation-call-menu button span { font-size: 20px; text-align: center; }
body[data-build="0.8.11"] .conversation-call-menu button b { font-size: 14px; }
body[data-build="0.8.11"] #wa-call-alerts.active { border-color: #24b778; color: #72e2ad; }

body[data-build="0.8.11"] .special-message-card.call {
  min-width: 230px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body[data-build="0.8.11"] .special-message-card.call .special-card-header { display: none; }
body[data-build="0.8.11"] .special-message-card.call .special-card-body { padding: 3px 2px; }
body[data-build="0.8.11"] .call-record-line {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  gap: 11px;
  align-items: center;
}
body[data-build="0.8.11"] .call-record-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(19,145,91,.22);
  color: #42dc98;
  font-size: 20px;
}
body[data-build="0.8.11"] .call-record-line > span:last-child { display: grid; gap: 2px; }
body[data-build="0.8.11"] .call-record-line strong { font-size: 15px; }
body[data-build="0.8.11"] .call-record-line small { color: #9eb0c8; font-size: 12px; }
body[data-build="0.8.11"] .incoming-call-avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
}

body[data-build="0.8.11"] .image-lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #101312;
}
body[data-build="0.8.11"] .image-lightbox-toolbar {
  position: relative;
  z-index: 5;
  height: 60px;
  padding: max(8px, env(safe-area-inset-top)) 18px 8px;
  background: rgba(16,19,18,.97);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body[data-build="0.8.11"] .image-lightbox-heading { min-width: 0; display: grid; }
body[data-build="0.8.11"] .image-lightbox-heading > span { max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-build="0.8.11"] .image-lightbox-heading small { color: #8f9a99; font-size: 11px; }
body[data-build="0.8.11"] .image-lightbox-stage {
  position: relative;
  width: 100%;
  height: calc(100dvh - 136px - env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  overflow: auto;
  background: #101312;
}
body[data-build="0.8.11"] .image-lightbox-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 72px);
  max-height: calc(100dvh - 164px - env(safe-area-inset-bottom));
  object-fit: contain;
  transform-origin: center center;
}
body[data-build="0.8.11"] .image-lightbox-nav {
  position: fixed;
  z-index: 6;
  top: 50%;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.48);
  color: white;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
body[data-build="0.8.11"] .image-lightbox-nav.prev { left: 18px; }
body[data-build="0.8.11"] .image-lightbox-nav.next { right: 18px; }
body[data-build="0.8.11"] .image-lightbox-nav:disabled { opacity: 0; pointer-events: none; }
body[data-build="0.8.11"] .image-lightbox-thumbnails {
  position: fixed;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(76px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: 7px;
  overflow-x: auto;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  background: rgba(16,19,18,.97);
  border-top: 1px solid rgba(255,255,255,.08);
}
body[data-build="0.8.11"] .image-lightbox-thumb {
  width: 52px;
  height: 58px;
  flex: 0 0 52px;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}
body[data-build="0.8.11"] .image-lightbox-thumb.active { border-color: #36b56f; }
body[data-build="0.8.11"] .image-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }

@media (max-width: 720px) {
  body[data-build="0.8.11"] .conversation-call-menu {
    position: fixed;
    top: 72px;
    right: 10px;
    width: min(280px, calc(100vw - 20px));
  }
  body[data-build="0.8.11"] .image-lightbox-toolbar { height: 58px; padding-inline: 10px; }
  body[data-build="0.8.11"] .image-lightbox-toolbar button,
  body[data-build="0.8.11"] .image-lightbox-toolbar a { min-width: 34px; height: 34px; padding: 0 7px; }
  body[data-build="0.8.11"] .image-lightbox-stage { height: calc(100dvh - 132px - env(safe-area-inset-bottom)); }
  body[data-build="0.8.11"] .image-lightbox-stage img {
    max-width: 100vw;
    max-height: calc(100dvh - 148px - env(safe-area-inset-bottom));
  }
  body[data-build="0.8.11"] .image-lightbox-nav { width: 38px; height: 38px; font-size: 29px; }
  body[data-build="0.8.11"] .image-lightbox-nav.prev { left: 5px; }
  body[data-build="0.8.11"] .image-lightbox-nav.next { right: 5px; }
  body[data-build="0.8.11"] .image-lightbox-thumbnails { justify-content: flex-start; }
  body[data-build="0.8.11"] .message-action-menu.portal-open {
    width: min(270px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
  }
}


/* v0.8.11 hotfix — reliable actions, true fit-to-screen viewer, local stealth unread and mobile call controls */
body[data-build="0.8.11"] .message-action-backdrop {
  position: fixed;
  z-index: 10040;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0,0,0,.08);
  cursor: default;
}
body[data-build="0.8.11"] .message-action-backdrop.hidden { display: none !important; }
body[data-build="0.8.11"] .message-action-menu.portal-open[data-open="1"] {
  display: flex !important;
  z-index: 10060 !important;
  contain: none !important;
  isolation: isolate;
}
body[data-build="0.8.11"] .message-actions-trigger {
  z-index: 4;
  touch-action: manipulation;
}
body[data-build="0.8.11"] .message-actions-trigger[aria-expanded="true"] {
  opacity: 1;
  pointer-events: auto;
  background: #101820;
  color: #fff;
}

html.image-viewer-open,
html.image-viewer-open body { overflow: hidden !important; }
body[data-build="0.8.11"] .image-lightbox.media-overlay-open {
  position: fixed !important;
  z-index: 20000 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: 60px minmax(0,1fr) 76px;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #101312 !important;
}
body[data-build="0.8.11"] .image-lightbox.media-overlay-open::backdrop { background: #101312; }
body[data-build="0.8.11"] .image-lightbox-stage {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 12px 64px !important;
}
body[data-build="0.8.11"] .image-lightbox-stage.zoomed { overflow: auto !important; }
body[data-build="0.8.11"] .image-lightbox-stage > img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: .01;
  transition: opacity .12s ease;
}
body[data-build="0.8.11"] .image-lightbox-stage > img.loaded { opacity: 1; }
body[data-build="0.8.11"] .image-lightbox-thumbnails {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  height: 76px !important;
  min-height: 76px;
}
body[data-build="0.8.11"] .image-lightbox-nav { position: absolute !important; top: 50% !important; transform: translateY(-50%); }
body[data-build="0.8.11"] .image-lightbox-nav.prev { left: 12px !important; }
body[data-build="0.8.11"] .image-lightbox-nav.next { right: 12px !important; }

body[data-build="0.8.11"] #conversation-call-button {
  display: grid !important;
  place-items: center;
  font-size: 0;
}
body[data-build="0.8.11"] #conversation-call-button::before {
  content: "☎";
  font-size: 19px;
  line-height: 1;
}
body[data-build="0.8.11"] .call-record-line.inbound .call-record-icon { color: #42dc98; }
body[data-build="0.8.11"] .call-record-line.outbound .call-record-icon { color: #8eb6ff; }

@media (max-width: 720px) {
  body[data-build="0.8.11"] .ai-chat-header {
    grid-template-columns: auto minmax(0,1fr) auto !important;
  }
  body[data-build="0.8.11"] .conversation-call-launcher {
    display: inline-grid !important;
    order: -3;
  }
  body[data-build="0.8.11"] #conversation-call-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
  }
  body[data-build="0.8.11"] .conversation-call-menu {
    top: calc(env(safe-area-inset-top) + 65px) !important;
    right: 8px !important;
    width: min(280px, calc(100vw - 16px)) !important;
  }
  body[data-build="0.8.11"] .image-lightbox.media-overlay-open {
    grid-template-rows: calc(54px + env(safe-area-inset-top)) minmax(0,1fr) calc(68px + env(safe-area-inset-bottom));
  }
  body[data-build="0.8.11"] .image-lightbox-stage {
    padding: 4px 0 !important;
  }
  body[data-build="0.8.11"] .image-lightbox-stage > img {
    width: 100vw !important;
    height: 100% !important;
  }
  body[data-build="0.8.11"] .image-lightbox-thumbnails {
    height: calc(68px + env(safe-area-inset-bottom)) !important;
    min-height: calc(68px + env(safe-area-inset-bottom));
  }
  body[data-build="0.8.11"] .message-action-menu.portal-open[data-open="1"] {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    top: auto !important;
    width: auto !important;
    max-height: min(68dvh, 470px) !important;
    border-radius: 18px !important;
    padding: 9px !important;
  }
  body[data-build="0.8.11"] .message-action-menu .message-tool {
    min-height: 46px !important;
    font-size: 15px !important;
  }
}

/* v0.8.11 final reliability pass — tactile long press and uncropped WhatsApp-style media viewer */
body[data-build="0.8.11"] .bubble.long-press-pending {
  filter: brightness(.92);
  transform: scale(.996);
}
@media (hover: none), (pointer: coarse) {
  body[data-build="0.8.11"] .bubble {
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }
}
body[data-build="0.8.11"] .image-lightbox.media-overlay-open .image-lightbox-stage > img {
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 128px) !important;
  max-height: calc(100dvh - 164px) !important;
  object-fit: contain !important;
}
@media (max-width: 720px) {
  body[data-build="0.8.11"] .image-lightbox.media-overlay-open .image-lightbox-stage > img {
    width: auto !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: calc(100dvh - 132px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}


/* v0.8.11 — remove unsupported outgoing calls, stable hidden refresh and iOS-style top tap */
body[data-build="0.8.11"] .conversation-call-launcher,
body[data-build="0.8.11"] #conversation-call-button,
body[data-build="0.8.11"] #conversation-call-menu {
  display: none !important;
}
body[data-build="0.8.11"] .mobile-status-tap-zone {
  display: none;
}
body[data-build="0.8.11"] .conversation-list,
body[data-build="0.8.11"] .message-list {
  overflow-anchor: auto;
}
body[data-build="0.8.11"] .conversation-item,
body[data-build="0.8.11"] .message-row {
  contain: layout style;
}
@media (max-width: 720px) {
  body[data-build="0.8.11"] .mobile-status-tap-zone {
    position: fixed;
    z-index: 30050;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: max(18px, env(safe-area-inset-top));
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}


/* v0.8.11 — reaction dedup, compact toggles, avatar back button and natural 1× camera */
body[data-build="0.8.11"] .ai-toggle-button small[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  body[data-build="0.8.11"] .mobile-chat-back {
    overflow: hidden;
    padding: 0;
    border-radius: 50%;
    font-size: 12px;
  }

  body[data-build="0.8.11"] .mobile-chat-back img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  body[data-build="0.8.11"] .contact-summary > #contact-avatar {
    display: none !important;
  }

  body[data-build="0.8.11"] .ai-toggle-button:not(.active) {
    grid-template-rows: auto;
  }
}

body[data-build="0.8.11"] .camera-stage video {
  object-fit: cover;
}

/* v0.8.11 — orientation-aware camera and full customer profile */
body[data-build="0.8.11"] .contact-profile-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(94dvh, 920px);
  padding: 0;
  overflow: hidden;
}
body[data-build="0.8.11"] .contact-profile-scroll {
  max-height: calc(min(94dvh, 920px) - 70px);
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: 18px;
  scrollbar-gutter: stable;
}
body[data-build="0.8.11"] .contact-profile-hero.vertical { padding-bottom: 14px; }
body[data-build="0.8.11"] .profile-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}
body[data-build="0.8.11"] .profile-section {
  margin: 0 16px 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(12, 20, 34, .72);
}
body[data-build="0.8.11"] .profile-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
body[data-build="0.8.11"] .profile-section-heading h4 { margin: 2px 0 0; font-size: 16px; }
body[data-build="0.8.11"] .profile-section-heading .eyebrow { margin: 0; }
body[data-build="0.8.11"] .profile-crm-form { display: grid; gap: 0; }
body[data-build="0.8.11"] .profile-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
body[data-build="0.8.11"] .profile-field {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #9cabc0;
  font-size: 12px;
  font-weight: 700;
}
body[data-build="0.8.11"] .profile-field.span-2 { grid-column: 1 / -1; }
body[data-build="0.8.11"] .profile-field input,
body[data-build="0.8.11"] .profile-field textarea,
body[data-build="0.8.11"] .profile-field select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #2b3b55;
  border-radius: 10px;
  background: #0a1322;
  color: #edf3ff;
  padding: 10px 11px;
  font: inherit;
  font-weight: 500;
  resize: vertical;
}
body[data-build="0.8.11"] .profile-field input:focus,
body[data-build="0.8.11"] .profile-field textarea:focus,
body[data-build="0.8.11"] .profile-field select:focus {
  outline: 2px solid rgba(67, 126, 255, .38);
  border-color: #4b7df3;
}
body[data-build="0.8.11"] .profile-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
body[data-build="0.8.11"] .profile-toggle-row span { display: grid; gap: 3px; }
body[data-build="0.8.11"] .profile-toggle-row small { color: #7f8da2; font-weight: 500; }
body[data-build="0.8.11"] .profile-toggle-row input[type="checkbox"] {
  width: 50px;
  height: 28px;
  flex: 0 0 auto;
}
body[data-build="0.8.11"] .profile-control-section > .profile-field { margin-top: 12px; }
body[data-build="0.8.11"] .compact-profile-facts { margin: 0 0 12px; }
body[data-build="0.8.11"] .profile-session-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 13px;
}
body[data-build="0.8.11"] .profile-privacy-note { margin: 0 16px 18px; }
body[data-build="0.8.11"] .camera-stage video { object-fit: cover; }
body[data-build="0.8.11"] .camera-dialog.camera-portrait .camera-stage {
  width: min(100%, 54dvh);
  height: min(72dvh, 760px);
  aspect-ratio: 3 / 4;
  margin-inline: auto;
}
body[data-build="0.8.11"] .camera-dialog.camera-landscape .camera-stage {
  width: min(100%, 980px);
  height: min(66dvh, 680px);
  aspect-ratio: 4 / 3;
  margin-inline: auto;
}

@media (max-width: 720px) {
  body[data-build="0.8.11"] .contact-profile-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  body[data-build="0.8.11"] .contact-profile-dialog .dialog-header {
    position: sticky;
    top: 0;
    z-index: 6;
    min-height: 66px;
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  body[data-build="0.8.11"] .contact-profile-scroll {
    max-height: calc(100dvh - 66px - env(safe-area-inset-top));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  body[data-build="0.8.11"] .profile-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0 10px 12px; }
  body[data-build="0.8.11"] .profile-actions button { min-height: 64px; padding: 8px 4px; }
  body[data-build="0.8.11"] .profile-actions button b { font-size: 10px; }
  body[data-build="0.8.11"] .profile-section { margin-inline: 10px; padding: 12px; }
  body[data-build="0.8.11"] .profile-field-grid { grid-template-columns: 1fr; }
  body[data-build="0.8.11"] .profile-field.span-2 { grid-column: 1; }
  body[data-build="0.8.11"] .whatsapp-profile-facts > div { grid-template-columns: 96px minmax(0, 1fr); }
  body[data-build="0.8.11"] .profile-session-actions { display: grid; grid-template-columns: 1fr; }
  body[data-build="0.8.11"] .profile-session-actions .button { width: 100%; }
  body[data-build="0.8.11"] .camera-dialog {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    padding: calc(10px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom));
  }
  body[data-build="0.8.11"] .camera-dialog.camera-portrait .camera-stage {
    width: min(100%, 55dvh);
    height: min(68dvh, 720px);
    aspect-ratio: 3 / 4;
  }
  body[data-build="0.8.11"] .camera-dialog.camera-landscape .camera-stage {
    width: min(78vw, 900px);
    height: min(60dvh, 520px);
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 720px) and (orientation: landscape) {
  body[data-build="0.8.11"] .camera-dialog { padding: 8px max(10px, env(safe-area-inset-left)) 8px max(10px, env(safe-area-inset-right)); }
  body[data-build="0.8.11"] .camera-dialog .dialog-header { padding: 4px 8px; }
  body[data-build="0.8.11"] .camera-dialog.camera-landscape .camera-stage {
    width: min(68vw, 920px);
    height: min(62dvh, 520px);
  }
  body[data-build="0.8.11"] .camera-status { margin: 5px 2px 2px; }
  body[data-build="0.8.11"] .camera-controls { margin-top: 5px; }
}
body[data-build="0.8.11"] .profile-toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 14px 50%, #d9e1ed 0 10px, transparent 10.5px), #3c4759;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: background .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
body[data-build="0.8.11"] .profile-toggle-row input[type="checkbox"]:checked {
  background: radial-gradient(circle at calc(100% - 14px) 50%, #fff 0 10px, transparent 10.5px), #4b82ff;
  box-shadow: 0 0 0 2px rgba(75,130,255,.18);
}
body[data-build="0.8.11"] .profile-toggle-row.danger-row input[type="checkbox"]:checked {
  background: radial-gradient(circle at calc(100% - 14px) 50%, #fff 0 10px, transparent 10.5px), #d94a61;
  box-shadow: 0 0 0 2px rgba(217,74,97,.18);
}


/* v0.8.11 — mobile contact header behaves like WhatsApp profile entry */
@media (max-width: 720px) {
  body[data-build="0.8.11"] #contact-name,
  body[data-build="0.8.11"] #contact-phone,
  body[data-build="0.8.11"] .mobile-chat-back {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

/* v0.8.11 — mobile conversation pin controls and neutral customer-service branding */
@media (max-width: 720px) {
  body[data-build="0.8.11"] .conversation-pin-toggle,
  body[data-build="0.8.11"] .conversation-pin-toggle:not(.active) {
    display: grid !important;
    width: 30px;
    height: 30px;
    opacity: .46;
    font-size: 16px;
    border-radius: 10px;
    touch-action: manipulation;
    pointer-events: auto;
  }
  body[data-build="0.8.11"] .conversation-pin-toggle.active {
    opacity: 1;
    color: #ff6b7a;
    background: rgba(255, 107, 122, .10);
  }
  body[data-build="0.8.11"] .conversation-item.long-press-pending {
    transform: scale(.992);
    background: rgba(72, 126, 255, .10);
  }
}

/* v0.8.11 — light, dark and system appearance settings */
.appearance-settings {
  max-width: 1120px !important;
}
.appearance-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.appearance-heading h3,
.appearance-heading p { margin-bottom: 0; }
.theme-current-label {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(71,120,255,.1);
  color: var(--primary-2);
  font-size: 12px;
  font-weight: 800;
}
.theme-mode-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1200px) {
  .theme-mode-control { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.theme-choice {
  min-width: 0;
  display: grid;
  grid-template-columns: 70px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 13px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.theme-choice:hover { transform: translateY(-1px); border-color: #4d6fa8; }
.theme-choice.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(71,120,255,.14);
}
.theme-choice b { align-self: end; font-size: 14px; }
.theme-choice small { align-self: start; color: var(--muted); font-size: 11px; }
.theme-preview {
  grid-row: 1 / span 2;
  width: 70px;
  height: 50px;
  display: grid;
  grid-template-columns: 19px 1fr;
  grid-template-rows: 11px 1fr;
  gap: 4px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid #71819b;
  border-radius: 8px;
}
.theme-preview i { display: block; border-radius: 3px; }
.theme-preview i:first-child { grid-row: 1 / span 2; }
.theme-preview.light { background: #f6f7f9; }
.theme-preview.light i:first-child { background: #e1e5ea; }
.theme-preview.light i:nth-child(2) { background: #cbd2da; }
.theme-preview.light i:nth-child(3) { background: #ffffff; border: 1px solid #e0e4e9; }
.theme-preview.dark { background: #07101d; }
.theme-preview.dark i:first-child { background: #29415e; }
.theme-preview.dark i:nth-child(2) { background: #26334a; }
.theme-preview.dark i:nth-child(3) { background: #111b2e; }
.theme-preview.system {
  background: linear-gradient(135deg, #f6f7f9 0 49%, #07101d 51% 100%);
}
.theme-preview.system i:first-child { background: linear-gradient(135deg, #e1e5ea 0 49%, #29415e 51% 100%); }
.theme-preview.system i:nth-child(2) { background: linear-gradient(135deg, #cbd2da 0 49%, #26334a 51% 100%); }
.theme-preview.system i:nth-child(3) { background: linear-gradient(135deg, #fff 0 49%, #111b2e 51% 100%); }
.theme-preview.sage-mist { background: #e3efe7; }
.theme-preview.sage-mist i:first-child { background: #8bb29a; }
.theme-preview.sage-mist i:nth-child(2) { background: #486a58; }
.theme-preview.sage-mist i:nth-child(3) { background: #16261d; }
.theme-preview.forest-dawn { background: #eef5ee; }
.theme-preview.forest-dawn i:first-child { background: #b9d2bf; }
.theme-preview.forest-dawn i:nth-child(2) { background: #82a88c; }
.theme-preview.forest-dawn i:nth-child(3) { background: #fbfdf8; border: 1px solid #dfe9df; }

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --border: #d9dee5;
  --text: #172033;
  --muted: #687386;
  --primary: #2f6fed;
  --primary-2: #315fbd;
  --green: #16a765;
  --red: #d94b58;
  --yellow: #d49a16;
  --shadow: 0 18px 48px rgba(22,34,52,.14);
}
html[data-theme="light"] body,
html[data-theme="light"] #app-view,
html[data-theme="light"] .app,
html[data-theme="light"] .content-view {
  background: var(--bg);
  color: var(--text);
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  border-color: var(--border);
  background: #ffffff;
  color: var(--text);
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #8993a3; }
html[data-theme="light"] label { color: #364154; }
html[data-theme="light"] .login-page {
  background: radial-gradient(circle at 22% 18%, #dbe9ff 0, transparent 34%), radial-gradient(circle at 82% 78%, #d9f2e6 0, transparent 30%), #eef2f5;
}
html[data-theme="light"] .login-card,
html[data-theme="light"] .card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .editor-card,
html[data-theme="light"] .connection-card,
html[data-theme="light"] .qr-card {
  border-color: var(--border);
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 10px 28px rgba(22,34,52,.08);
}
html[data-theme="light"] .sidebar {
  border-color: #d7dde5;
  background: #ffffff;
  color: var(--text);
}
html[data-theme="light"] .sidebar-brand,
html[data-theme="light"] .nav button { color: #364154; }
html[data-theme="light"] .nav-section-title { color: #7b8797; }
html[data-theme="light"] .connection-pill {
  border-color: #d4dae2;
  background: #f5f7fa;
  color: #425066;
}
html[data-theme="light"] .nav button:hover { background: #eef3fb; color: #1e5fd0; }
html[data-theme="light"] .nav button.active {
  background: #e7f0ff;
  color: #1f67dd;
  box-shadow: none;
}
html[data-theme="light"] .sidebar-footer { border-color: #e0e4e9; }
html[data-theme="light"] .conversation-panel,
html[data-theme="light"] .chat-panel,
html[data-theme="light"] .message-list,
html[data-theme="light"] .customer-details {
  border-color: var(--border);
  background: #f2f4f7;
}
html[data-theme="light"] .chat-panel,
html[data-theme="light"] .message-list {
  background: radial-gradient(circle at 50% 40%, rgba(47,111,237,.045), transparent 56%), #eef1f4;
}
html[data-theme="light"] .panel-header,
html[data-theme="light"] .chat-header,
html[data-theme="light"] .details-header,
html[data-theme="light"] .inbox-tabs,
html[data-theme="light"] .filters,
html[data-theme="light"] .inbox-search-row {
  border-color: var(--border);
  background: #ffffff;
  color: var(--text);
}
html[data-theme="light"] .conversation-item {
  border-color: #e0e4e9;
  background: #ffffff;
  color: var(--text);
}
html[data-theme="light"] .conversation-item:hover,
html[data-theme="light"] .conversation-item.active { background: #eaf2ff; }
html[data-theme="light"] .conversation-item p,
html[data-theme="light"] .conversation-item time,
html[data-theme="light"] .contact-summary p { color: var(--muted); }
html[data-theme="light"] .avatar { background: #e5eaf1; color: #44536b; }
html[data-theme="light"] .bubble {
  border-color: #d8dde4;
  background: #ffffff;
  color: #182130;
  box-shadow: 0 1px 2px rgba(17,28,45,.06);
}
html[data-theme="light"] .outbound .bubble {
  border-color: #a9c8ff;
  background: #dceaff;
  color: #10203b;
}
html[data-theme="light"] .bubble small { color: #6d7888; }
html[data-theme="light"] .bubble .ai-badge { color: #234fa4; }
html[data-theme="light"] .quoted-message { background: rgba(29,78,166,.07); color: #42516a; }
html[data-theme="light"] .reaction-list span { border-color: #ccd3dc; background: #ffffff; }
html[data-theme="light"] .composer,
html[data-theme="light"] .composer-input-shell,
html[data-theme="light"] .composer-bottom-bar {
  border-color: #d6dce4;
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 -8px 22px rgba(25,35,50,.07);
}
html[data-theme="light"] .composer .composer-input-shell #message-input { color: #1c2738; }
html[data-theme="light"] .tool-button,
html[data-theme="light"] .ai-icon-button,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .mobile-chat-back {
  border-color: #cfd6df;
  background: #ffffff;
  color: #314159;
}
html[data-theme="light"] .ai-toggle-button { border-color: #cfd6df; background: #ffffff; color: #34445c; }
html[data-theme="light"] .ai-toggle-button.active { border-color: #2f6fed; background: #e7f0ff; color: #1e5fc8; }
html[data-theme="light"] .toggle-track { background: #c8d0da; }
html[data-theme="light"] .ai-toggle-button.active .toggle-track { background: #2f6fed; }
html[data-theme="light"] .monitor-banner { border-color: #ead49c; background: #fff7df; color: #7c5c13; }
html[data-theme="light"] .details-header,
html[data-theme="light"] .details-profile,
html[data-theme="light"] .details-list,
html[data-theme="light"] .details-list div,
html[data-theme="light"] .profile-section,
html[data-theme="light"] .profile-card {
  border-color: #dce1e7;
  background: #ffffff;
  color: var(--text);
}
html[data-theme="light"] .details-list dd { color: #253149; }
html[data-theme="light"] .details-tip,
html[data-theme="light"] .settings-help,
html[data-theme="light"] .invoice-bridge-note {
  background: #edf3ff;
  color: #334867;
}
html[data-theme="light"] .staff-user-card,
html[data-theme="light"] .staff-user-form,
html[data-theme="light"] .staff-permissions {
  border-color: #d9dee5;
  background: #f8fafc;
  color: var(--text);
}
html[data-theme="light"] .staff-user-details strong,
html[data-theme="light"] .staff-user-details span { color: #263349; }
html[data-theme="light"] .button.secondary { border-color: #cbd3de; background: #edf1f6; color: #253149; }
html[data-theme="light"] .button.ghost { border-color: #cbd3de; color: #334055; }
html[data-theme="light"] .button.danger { background: #fff0f1; color: #b63241; border-color: #efb8be; }
html[data-theme="light"] .app-dialog,
html[data-theme="light"] .image-lightbox,
html[data-theme="light"] .incoming-call-dialog,
html[data-theme="light"] .send-tools-menu,
html[data-theme="light"] .emoji-panel,
html[data-theme="light"] .message-actions-menu,
html[data-theme="light"] .reaction-picker,
html[data-theme="light"] .translation-preview-panel,
html[data-theme="light"] .compose-translation-preview {
  border-color: #d5dbe3;
  background: #ffffff;
  color: var(--text);
}
html[data-theme="light"] .send-tools-menu button,
html[data-theme="light"] .quick-reply-card,
html[data-theme="light"] .catalogue-card,
html[data-theme="light"] .attachment-preview,
html[data-theme="light"] .reply-preview {
  border-color: #d6dce4;
  background: #f6f8fb;
  color: #263349;
}
html[data-theme="light"] .toast { border-color: #b7caf0; background: #eaf2ff; color: #213a66; }
html[data-theme="light"] .theme-current-label { background: #eaf2ff; }
html[data-theme="light"] .theme-choice { background: #ffffff; }
html[data-theme="light"] .theme-choice.active { background: #eef4ff; }

@media (max-width: 720px) {
  .theme-mode-control { grid-template-columns: 1fr; }
  .theme-eyecare-note { margin: 10px 4px 0; font-size: 12px; line-height: 1.55; }
  .theme-choice { grid-template-columns: 62px minmax(0,1fr); }
  .theme-preview { width: 62px; }
  .appearance-heading { align-items: center; }
  html[data-theme="light"] .sidebar { background: #ffffff; }
}
html[data-theme="light"] .quick-reply-card-header { color: #24324a !important; }
html[data-theme="light"] .compose-translation-preview #translation-preview-text {
  border-color: #cfd6df !important;
  background: #ffffff !important;
  color: #1d2939 !important;
}
html[data-theme="light"] .compose-translation-preview #translation-preview-text:not([readonly]):hover {
  border-color: #2f6fed !important;
}



/* TD_EYE_CARE_THEMES_V2_3_4_START */
html[data-theme="sage-mist"] {
  color-scheme: dark;
  --bg: #0f1712;
  --panel: #17231c;
  --panel-2: #1d2c24;
  --border: #365244;
  --text: #f2fbf3;
  --muted: #b3c7b7;
  --primary: #59b987;
  --primary-2: #9fdfbd;
  --green: #7ed6a7;
  --shadow: 0 22px 54px rgba(4, 12, 8, .34);
}
html[data-theme="forest-dawn"] {
  color-scheme: light;
  --bg: #edf4ee;
  --panel: #fbfdf9;
  --panel-2: #f3f8f1;
  --border: #c9d9cc;
  --text: #1c2a21;
  --muted: #586a5c;
  --primary: #2f8b61;
  --primary-2: #256e4d;
  --green: #2f8b61;
  --shadow: 0 18px 42px rgba(43, 86, 55, .12);
}

html[data-theme="dark"] body,
html[data-theme="dark"] #app-view,
html[data-theme="dark"] .app,
html[data-theme="dark"] .content-view,
html[data-theme="sage-mist"] body,
html[data-theme="sage-mist"] #app-view,
html[data-theme="sage-mist"] .app,
html[data-theme="sage-mist"] .content-view { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .conversation-panel,
html[data-theme="sage-mist"] .conversation-panel { background: #111b2b; }
html[data-theme="sage-mist"] .conversation-panel { background: #16231c; }
html[data-theme="dark"] .chat-panel,
html[data-theme="dark"] .message-list,
html[data-theme="sage-mist"] .chat-panel,
html[data-theme="sage-mist"] .message-list {
  background: radial-gradient(circle at 50% 38%, rgba(72,111,175,.12), transparent 58%), #101927;
}
html[data-theme="sage-mist"] .chat-panel,
html[data-theme="sage-mist"] .message-list {
  background: radial-gradient(circle at 48% 36%, rgba(122, 184, 149, .14), transparent 56%), radial-gradient(circle at 78% 18%, rgba(70, 118, 88, .11), transparent 32%), #101813;
}
html[data-theme="dark"] .customer-details,
html[data-theme="sage-mist"] .customer-details { border-color: var(--border); }
html[data-theme="dark"] .panel-header,
html[data-theme="dark"] .chat-header,
html[data-theme="dark"] .details-header,
html[data-theme="dark"] .inbox-tabs,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .inbox-search-row,
html[data-theme="sage-mist"] .panel-header,
html[data-theme="sage-mist"] .chat-header,
html[data-theme="sage-mist"] .details-header,
html[data-theme="sage-mist"] .inbox-tabs,
html[data-theme="sage-mist"] .filters,
html[data-theme="sage-mist"] .inbox-search-row { border-color: var(--border); }
html[data-theme="sage-mist"] .customer-details,
html[data-theme="sage-mist"] .panel-header,
html[data-theme="sage-mist"] .chat-header,
html[data-theme="sage-mist"] .details-header,
html[data-theme="sage-mist"] .inbox-tabs,
html[data-theme="sage-mist"] .filters,
html[data-theme="sage-mist"] .inbox-search-row { background: #1a2820; }
html[data-theme="dark"] .conversation-item,
html[data-theme="sage-mist"] .conversation-item { border-color: rgba(69,89,118,.62); }
html[data-theme="sage-mist"] .conversation-item { border-color: rgba(74, 102, 84, .72); }
html[data-theme="dark"] .conversation-item:hover,
html[data-theme="dark"] .conversation-item.active,
html[data-theme="sage-mist"] .conversation-item:hover,
html[data-theme="sage-mist"] .conversation-item.active { background: #1c2b41; }
html[data-theme="sage-mist"] .conversation-item:hover,
html[data-theme="sage-mist"] .conversation-item.active { background: #23352b; }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="sage-mist"] input,
html[data-theme="sage-mist"] textarea,
html[data-theme="sage-mist"] select { color: var(--text); }
html[data-theme="sage-mist"] input,
html[data-theme="sage-mist"] textarea,
html[data-theme="sage-mist"] select { background: #15211a; border-color: #456552; }
html[data-theme="dark"] label,
html[data-theme="sage-mist"] label { color: #dce5f2; }
html[data-theme="sage-mist"] label { color: #e2f0e5; }
html[data-theme="dark"] .bubble,
html[data-theme="sage-mist"] .bubble { color: var(--text); }
html[data-theme="sage-mist"] .bubble { background: #1d2d24; border-color: #476755; }
html[data-theme="dark"] .outbound .bubble,
html[data-theme="sage-mist"] .outbound .bubble { color: #fff; }
html[data-theme="sage-mist"] .outbound .bubble { background: #2f6e4f; border-color: #70bb92; }
html[data-theme="dark"] .bubble small,
html[data-theme="sage-mist"] .bubble small { color: #b7c4d7; }
html[data-theme="sage-mist"] .bubble small { color: #c8dbcf; }
html[data-theme="dark"] .composer,
html[data-theme="dark"] .composer-input-shell,
html[data-theme="dark"] .composer-bottom-bar,
html[data-theme="sage-mist"] .composer,
html[data-theme="sage-mist"] .composer-input-shell,
html[data-theme="sage-mist"] .composer-bottom-bar { border-color: #3a4a60; }
html[data-theme="sage-mist"] .composer,
html[data-theme="sage-mist"] .composer-input-shell,
html[data-theme="sage-mist"] .composer-bottom-bar { background: #16221b; border-color: #426251; }
html[data-theme="sage-mist"] .sidebar { background: linear-gradient(180deg, #30463a 0%, #22352b 48%, #15231b 100%); }
html[data-theme="sage-mist"] .connection-pill { background: rgba(7, 16, 11, .2); color: #d9ebe0; border-color: rgba(255,255,255,.13); }
html[data-theme="sage-mist"] .nav button { color: #d7e8dc; }
html[data-theme="sage-mist"] .nav button span { color: #b7cfbe; }
html[data-theme="sage-mist"] .nav button:hover { background: rgba(255,255,255,.08); color: #fff; }
html[data-theme="sage-mist"] .nav button.active { background: #edf7ef; color: #266548; box-shadow: 0 10px 24px rgba(7, 18, 12, .22); }
html[data-theme="sage-mist"] .nav button.active span { color: #266548; }
html[data-theme="sage-mist"] .button.secondary { background: #203128; border-color: #446353; color: #eef8f1; }
html[data-theme="sage-mist"] .button.ghost { border-color: #446353; color: #e5f1e8; }
html[data-theme="sage-mist"] .button.primary { background: #4aa476; }
html[data-theme="sage-mist"] .monitor-banner { background: rgba(132, 188, 146, .12); border-color: rgba(132, 188, 146, .35); color: #d6efd9; }
html[data-theme="sage-mist"] .app-dialog,
html[data-theme="sage-mist"] .image-lightbox,
html[data-theme="sage-mist"] .incoming-call-dialog,
html[data-theme="sage-mist"] .send-tools-menu,
html[data-theme="sage-mist"] .emoji-panel,
html[data-theme="sage-mist"] .message-actions-menu,
html[data-theme="sage-mist"] .reaction-picker,
html[data-theme="sage-mist"] .translation-preview-panel,
html[data-theme="sage-mist"] .compose-translation-preview { background: #132019; border-color: #3f5c4c; }
html[data-theme="sage-mist"] .toast { border-color: #4a7a60; background: #163022; color: #eaf8ef; }
html[data-theme="sage-mist"] .theme-current-label { background: rgba(106, 171, 132, .16); color: #dcf2e2; }
html[data-theme="sage-mist"] .theme-choice { background: #16251d; border-color: #345142; }
html[data-theme="sage-mist"] .theme-choice.active { background: #1d3026; border-color: #68b089; box-shadow: 0 0 0 1px rgba(104,176,137,.22); }

html[data-theme="light"] body,
html[data-theme="light"] #app-view,
html[data-theme="light"] .app,
html[data-theme="light"] .content-view,
html[data-theme="forest-dawn"] body,
html[data-theme="forest-dawn"] #app-view,
html[data-theme="forest-dawn"] .app,
html[data-theme="forest-dawn"] .content-view { background: var(--bg); color: var(--text); }
html[data-theme="forest-dawn"] .sidebar { background: linear-gradient(180deg, #dce9df 0%, #cddfce 46%, #bdd0c1 100%); }
html[data-theme="forest-dawn"] .sidebar-brand,
html[data-theme="forest-dawn"] .nav button { color: #203127; }
html[data-theme="forest-dawn"] .nav-section-title { color: #687c6b; }
html[data-theme="forest-dawn"] .nav button span { color: #4c6552; }
html[data-theme="forest-dawn"] .connection-pill { background: rgba(255,255,255,.56); color: #304435; border-color: rgba(80, 120, 92, .18); }
html[data-theme="forest-dawn"] .nav button:hover { background: rgba(255,255,255,.55); color: #1c2b21; }
html[data-theme="forest-dawn"] .nav button.active { background: #ffffff; color: #246544; box-shadow: 0 10px 22px rgba(71, 117, 82, .16); }
html[data-theme="forest-dawn"] .nav button.active span { color: #246544; }
html[data-theme="forest-dawn"] .sidebar-footer { border-color: #c8d7c9; }
html[data-theme="forest-dawn"] .conversation-panel,
html[data-theme="forest-dawn"] .chat-panel,
html[data-theme="forest-dawn"] .message-list,
html[data-theme="forest-dawn"] .customer-details { border-color: #d5e0d6; }
html[data-theme="forest-dawn"] .conversation-panel,
html[data-theme="forest-dawn"] .customer-details { background: #f8fcf7; }
html[data-theme="forest-dawn"] .chat-panel,
html[data-theme="forest-dawn"] .message-list { background: radial-gradient(circle at 52% 34%, rgba(147, 186, 155, .22), transparent 54%), #f1f7f0; }
html[data-theme="forest-dawn"] .panel-header,
html[data-theme="forest-dawn"] .chat-header,
html[data-theme="forest-dawn"] .details-header,
html[data-theme="forest-dawn"] .inbox-tabs,
html[data-theme="forest-dawn"] .filters,
html[data-theme="forest-dawn"] .inbox-search-row { background: #f6faf4; border-color: #d3dfd4; }
html[data-theme="forest-dawn"] .conversation-item { border-color: rgba(170, 190, 173, .75); }
html[data-theme="forest-dawn"] .conversation-item:hover,
html[data-theme="forest-dawn"] .conversation-item.active { background: #eaf4ea; }
html[data-theme="forest-dawn"] .conversation-item p,
html[data-theme="forest-dawn"] .conversation-item time,
html[data-theme="forest-dawn"] .contact-summary p { color: #607264; }
html[data-theme="forest-dawn"] .avatar { background: #dde9de; color: #385342; }
html[data-theme="forest-dawn"] .bubble { background: #ffffff; border-color: #cddacc; color: #213125; }
html[data-theme="forest-dawn"] .outbound .bubble { background: #dff0e1; border-color: #95c29f; color: #173021; }
html[data-theme="forest-dawn"] .bubble small { color: #6f7f73; }
html[data-theme="forest-dawn"] .bubble .ai-badge { color: #256649; }
html[data-theme="forest-dawn"] .quoted-message { background: rgba(47,139,97,.08); color: #425748; }
html[data-theme="forest-dawn"] .reaction-list span { border-color: #c8d5c8; background: #ffffff; }
html[data-theme="forest-dawn"] .composer,
html[data-theme="forest-dawn"] .composer-input-shell,
html[data-theme="forest-dawn"] .composer-bottom-bar { background: #f8fbf6; border-color: #d2ddd1; }
html[data-theme="forest-dawn"] .composer .composer-input-shell #message-input { color: #1d2b22; }
html[data-theme="forest-dawn"] .tool-button,
html[data-theme="forest-dawn"] .ai-icon-button,
html[data-theme="forest-dawn"] .icon-button,
html[data-theme="forest-dawn"] .mobile-chat-back { background: #ffffff; border-color: #cdd8cc; color: #314237; }
html[data-theme="forest-dawn"] .ai-toggle-button { border-color: #cbd8ce; background: #ffffff; color: #34463b; }
html[data-theme="forest-dawn"] .ai-toggle-button.active { border-color: #2f8b61; background: #e4f3e6; color: #1f6a47; }
html[data-theme="forest-dawn"] .toggle-track { background: #c8d5ca; }
html[data-theme="forest-dawn"] .ai-toggle-button.active .toggle-track { background: #2f8b61; }
html[data-theme="forest-dawn"] .monitor-banner { border-color: #c8d9b7; background: #f4f9e8; color: #52602a; }
html[data-theme="forest-dawn"] .details-header,
html[data-theme="forest-dawn"] .details-profile,
html[data-theme="forest-dawn"] .details-list,
html[data-theme="forest-dawn"] .details-list div,
html[data-theme="forest-dawn"] .profile-section,
html[data-theme="forest-dawn"] .profile-card,
html[data-theme="forest-dawn"] .staff-user-card,
html[data-theme="forest-dawn"] .staff-user-form,
html[data-theme="forest-dawn"] .staff-permissions { background: #ffffff; border-color: #d5dfd4; }
html[data-theme="forest-dawn"] .details-list dd,
html[data-theme="forest-dawn"] .staff-user-details strong,
html[data-theme="forest-dawn"] .staff-user-details span { color: #233229; }
html[data-theme="forest-dawn"] .details-tip,
html[data-theme="forest-dawn"] .settings-help,
html[data-theme="forest-dawn"] .invoice-bridge-note { background: #edf5ee; color: #425648; }
html[data-theme="forest-dawn"] .button.secondary { border-color: #cad6cb; background: #edf3ed; color: #223229; }
html[data-theme="forest-dawn"] .button.ghost { border-color: #cad6cb; color: #314237; }
html[data-theme="forest-dawn"] .button.primary { background: #2f8b61; color: #fff; }
html[data-theme="forest-dawn"] .button.danger { background: #fff2f2; color: #b63241; border-color: #efb8be; }
html[data-theme="forest-dawn"] .app-dialog,
html[data-theme="forest-dawn"] .image-lightbox,
html[data-theme="forest-dawn"] .incoming-call-dialog,
html[data-theme="forest-dawn"] .send-tools-menu,
html[data-theme="forest-dawn"] .emoji-panel,
html[data-theme="forest-dawn"] .message-actions-menu,
html[data-theme="forest-dawn"] .reaction-picker,
html[data-theme="forest-dawn"] .translation-preview-panel,
html[data-theme="forest-dawn"] .compose-translation-preview { background: #ffffff; border-color: #d5dfd5; color: #1f2c22; }
html[data-theme="forest-dawn"] .send-tools-menu button,
html[data-theme="forest-dawn"] .quick-reply-card,
html[data-theme="forest-dawn"] .catalogue-card,
html[data-theme="forest-dawn"] .attachment-preview,
html[data-theme="forest-dawn"] .reply-preview { background: #f9fcf7; border-color: #d7e0d6; color: #233329; }
html[data-theme="forest-dawn"] .toast { border-color: #b8d4c0; background: #ebf6ed; color: #24553b; }
html[data-theme="forest-dawn"] .theme-current-label { background: #e7f3ea; color: #215d3d; }
html[data-theme="forest-dawn"] .theme-choice { background: #ffffff; }
html[data-theme="forest-dawn"] .theme-choice.active { background: #edf7ef; border-color: #8fc4a0; }
html[data-theme="forest-dawn"] .login-page { background: radial-gradient(circle at 30% 15%, rgba(127, 173, 140, .26) 0, transparent 32%), radial-gradient(circle at 85% 80%, rgba(149, 184, 137, .24) 0, transparent 28%), #edf5ee; }
html[data-theme="forest-dawn"] .login-card { background: rgba(255,255,255,.94); border-color: #d7e2d8; }
/* TD_EYE_CARE_THEMES_V2_3_4_END */

/* v0.8.11 — high-contrast light theme, softer dark theme, compact profile drawer and unread visibility */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1624;
  --panel: #142033;
  --panel-2: #19283d;
  --border: #344861;
  --text: #f4f7fc;
  --muted: #adbbcf;
  --primary: #4f83ff;
  --primary-2: #8eaeff;
  --shadow: 0 22px 54px rgba(0,0,0,.28);
}
html[data-theme="dark"] body,
html[data-theme="dark"] #app-view,
html[data-theme="dark"] .app,
html[data-theme="dark"] .content-view { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .conversation-panel { background: #111b2b; }
html[data-theme="dark"] .chat-panel,
html[data-theme="dark"] .message-list {
  background: radial-gradient(circle at 50% 38%, rgba(72,111,175,.12), transparent 58%), #101927;
}
html[data-theme="dark"] .customer-details { background: #141e2c; border-color: var(--border); }
html[data-theme="dark"] .panel-header,
html[data-theme="dark"] .chat-header,
html[data-theme="dark"] .details-header,
html[data-theme="dark"] .inbox-tabs,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .inbox-search-row { background: #152235; border-color: var(--border); }
html[data-theme="dark"] .conversation-item { border-color: rgba(69,89,118,.62); }
html[data-theme="dark"] .conversation-item:hover,
html[data-theme="dark"] .conversation-item.active { background: #1c2b41; }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background: #111d2d; border-color: #3a4d66; color: #f5f7fb; }
html[data-theme="dark"] label { color: #dce5f2; }
html[data-theme="dark"] .bubble { background: #1a2940; border-color: #3a4d68; color: #f5f7fb; }
html[data-theme="dark"] .outbound .bubble { background: #2853a5; border-color: #4f7de0; color: #fff; }
html[data-theme="dark"] .bubble small { color: #b7c4d7; }
html[data-theme="dark"] .composer,
html[data-theme="dark"] .composer-input-shell,
html[data-theme="dark"] .composer-bottom-bar { background: #121d2b; border-color: #3a4a60; }
html[data-theme="dark"] .ai-usage-dashboard,
html[data-theme="dark"] .ai-studio-layout,
html[data-theme="dark"] .ai-studio-config,
html[data-theme="dark"] .ai-playground,
html[data-theme="dark"] .ai-playground-topbar { filter: brightness(1.12); }
html[data-theme="dark"] .translation,
html[data-theme="dark"] .source-text,
html[data-theme="dark"] .image-analysis,
html[data-theme="dark"] .transcription,
html[data-theme="dark"] .video-analysis,
html[data-theme="dark"] .document-analysis { color: #e8eef8; border-top-color: rgba(223,232,244,.18); }
html[data-theme="dark"] .video-analysis::before,
html[data-theme="dark"] .image-analysis::before,
html[data-theme="dark"] .document-analysis::before { color: #aebdd2; }

html[data-theme="light"] {
  --bg: #eef2f6;
  --panel: #ffffff;
  --panel-2: #f6f8fb;
  --border: #ccd4df;
  --text: #101827;
  --muted: #4f5d72;
  --primary: #2768e8;
  --primary-2: #234fa8;
}
html[data-theme="light"] .content-header,
html[data-theme="light"] .content-header h2,
html[data-theme="light"] .content-header h3,
html[data-theme="light"] .content-header strong,
html[data-theme="light"] .ai-studio-panel-title,
html[data-theme="light"] .ai-playground-topbar,
html[data-theme="light"] .ai-usage-heading,
html[data-theme="light"] .ai-usage-heading h3 { color: #111827; }
html[data-theme="light"] .muted,
html[data-theme="light"] .content-header p,
html[data-theme="light"] .ai-usage-heading p:not(.eyebrow),
html[data-theme="light"] .ai-studio-panel-title span,
html[data-theme="light"] .ai-playground-topbar span,
html[data-theme="light"] .ai-playground-meta { color: #536176 !important; }
html[data-theme="light"] .translation,
html[data-theme="light"] .source-text,
html[data-theme="light"] .image-analysis,
html[data-theme="light"] .transcription,
html[data-theme="light"] .video-analysis,
html[data-theme="light"] .document-analysis {
  border-top-color: #c9d2de;
  color: #25344b;
}
html[data-theme="light"] .video-analysis::before,
html[data-theme="light"] .image-analysis::before,
html[data-theme="light"] .document-analysis::before { color: #536176; }
html[data-theme="light"] .revoked-notice { border-top-color: #d6b889; color: #9a5a13; }
html[data-theme="light"] .ai-usage-dashboard {
  border-color: #c9d5e5;
  background: radial-gradient(circle at 88% 0%, rgba(46,108,232,.09), transparent 34%), #ffffff;
  color: #111827;
  box-shadow: 0 12px 34px rgba(29,45,70,.10);
}
html[data-theme="light"] .ai-usage-card,
html[data-theme="light"] .ai-token-breakdown,
html[data-theme="light"] .ai-usage-note,
html[data-theme="light"] .ai-feature-usage-row {
  border-color: #d3dbe6;
  background: #f8fafc;
  color: #152238;
}
html[data-theme="light"] .ai-usage-card.primary {
  border-color: #78a3ee;
  background: linear-gradient(145deg, #e8f1ff, #f6f9ff);
}
html[data-theme="light"] .ai-usage-card strong,
html[data-theme="light"] .ai-token-breakdown strong,
html[data-theme="light"] .ai-usage-note strong,
html[data-theme="light"] .ai-feature-usage-row b { color: #14213a; }
html[data-theme="light"] .ai-usage-card > span,
html[data-theme="light"] .ai-usage-card small,
html[data-theme="light"] .ai-usage-card em,
html[data-theme="light"] .ai-token-breakdown span,
html[data-theme="light"] .ai-usage-note span,
html[data-theme="light"] .ai-feature-usage-row span { color: #536176; }
html[data-theme="light"] .ai-token-breakdown > div { border-color: #d3dbe6; }
html[data-theme="light"] .ai-feature-usage { border-top-color: #d6dde7; }
html[data-theme="light"] .ai-feature-usage summary { color: #245ebc; }
html[data-theme="light"] .ai-studio-layout {
  border-color: #cbd5e1;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(31,48,74,.10);
}
html[data-theme="light"] .ai-studio-config {
  border-color: #cbd5e1;
  background: linear-gradient(180deg, #f8fafc, #f2f5f9);
}
html[data-theme="light"] .ai-studio-fieldset {
  border-color: #ccd6e2;
  background: #ffffff;
}
html[data-theme="light"] .ai-studio-fieldset legend { color: #1c2a40; }
html[data-theme="light"] .ai-playground {
  background: radial-gradient(circle at 70% 14%, rgba(47,111,237,.08), transparent 32%), #f3f6fa;
}
html[data-theme="light"] .ai-playground-topbar { border-color: #cbd5e1; background: #ffffff; }
html[data-theme="light"] .ai-playground-empty { color: #5b687b; }
html[data-theme="light"] .ai-playground-empty > span { border-color: #9ab8ea; background: #edf4ff; color: #2f6fed; }
html[data-theme="light"] .ai-playground-empty strong { color: #172033; }
html[data-theme="light"] .ai-playground-message.assistant { border-color: #cbd5e1; background: #ffffff; color: #172033; }
html[data-theme="light"] .ai-playground-composer { border-color: #b8c8dd; background: #ffffff; box-shadow: 0 8px 24px rgba(30,45,67,.10); }
html[data-theme="light"] .ai-playground-composer textarea { color: #172033; }
html[data-theme="light"] .wa-account-sidebar,
html[data-theme="light"] .multi-account-detail,
html[data-theme="light"] .connection-card,
html[data-theme="light"] .qr-card { border-color: #ccd5e0; background: #ffffff; color: #172033; }
html[data-theme="light"] .wa-account-list-header,
html[data-theme="light"] .wa-account-list-header strong { color: #172033; }
html[data-theme="light"] .wa-account-list-header span { background: #dfeaff; color: #1f4f9b; }
html[data-theme="light"] .wa-account-item { border-color: #ccd5e0; background: #f8fafc; color: #172033; }
html[data-theme="light"] .wa-account-item small { color: #5b687b; }
html[data-theme="light"] .wa-account-item.active { border-color: #5c8ce8; background: linear-gradient(135deg, #dceaff, #edf4ff); color: #12366e; box-shadow: 0 0 18px rgba(47,111,237,.12); }
html[data-theme="light"] .safe-mode-badge,
html[data-theme="light"] .shared-ai-badge { border-color: #bdc9d8; background: #eef2f6; color: #526176; }
html[data-theme="light"] .safe-mode-badge.on,
html[data-theme="light"] .shared-ai-badge.on { border-color: #75b99d; background: #e5f6ef; color: #0f6b4c; }
html[data-theme="light"] .account-safety-panel {
  border-color: #9ccdb8;
  background: linear-gradient(135deg, #e7f6ef, #f4fbf8);
}
html[data-theme="light"] .account-safety-panel strong { color: #0d6a4a; }
html[data-theme="light"] .account-safety-panel span { color: #365f54; }
html[data-theme="light"] .account-safety-hint { border-color: #b9cfe4; background: #eef5fc; color: #39536e; }
html[data-theme="light"] .catalogue-sync-note { color: #8a3444; background: #fff3f5; }
html[data-theme="light"] .catalogue-sync-note.success { color: #176248; background: #edf9f4; }
html[data-theme="light"] .profile-field { color: #47566c; }
html[data-theme="light"] .profile-field input,
html[data-theme="light"] .profile-field textarea,
html[data-theme="light"] .profile-field select { border-color: #cbd5e1; background: #ffffff; color: #172033; }
html[data-theme="light"] .profile-toggle-row small { color: #5f6d80; }

@media (min-width: 721px) {
  body[data-build="0.8.11"] .contact-profile-dialog.profile-drawer {
    width: min(460px, calc(100vw - 32px));
    max-width: 460px;
    max-height: 96dvh;
  }
  body[data-build="0.8.11"] .contact-profile-scroll {
    max-height: calc(96dvh - 70px);
  }
}
body[data-build="0.8.11"] .unread {
  min-width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  background: #e53945;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(229,57,69,.12);
  font-weight: 850;
}

/* v0.8.11 — readable file cards, collapsible navigation and adjustable workspace panels */
body[data-build="0.8.11"] .app {
  --td-sidebar-width: 230px;
  grid-template-columns: var(--td-sidebar-width) 7px minmax(0, 1fr);
}
body[data-build="0.8.11"] .sidebar {
  position: relative;
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
}
body[data-build="0.8.11"] .app > .view { grid-column: 3; }
body[data-build="0.8.11"] .app-sidebar-resizer { grid-column: 2; }
body[data-build="0.8.11"] .sidebar-brand {
  min-width: 0;
  justify-content: space-between;
  gap: 8px;
}
body[data-build="0.8.11"] .sidebar-brand-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  overflow: hidden;
  white-space: nowrap;
}
body[data-build="0.8.11"] .sidebar-collapse-toggle {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(214,228,247,.28);
  border-radius: 9px;
  background: rgba(5,13,27,.16);
  color: #dbe7f7;
  cursor: pointer;
  font-size: 23px;
  line-height: 1;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
body[data-build="0.8.11"] .sidebar-collapse-toggle:hover {
  border-color: rgba(222,235,252,.55);
  background: rgba(255,255,255,.12);
}
body[data-build="0.8.11"] .app.sidebar-collapsed {
  --td-sidebar-width: 78px !important;
}
body[data-build="0.8.11"] .app.sidebar-collapsed .sidebar-collapse-toggle { transform: rotate(180deg); }
body[data-build="0.8.11"] .app.sidebar-collapsed .sidebar-brand { justify-content: center; margin-inline: 0; }
body[data-build="0.8.11"] .app.sidebar-collapsed .sidebar-brand-main > span,
body[data-build="0.8.11"] .app.sidebar-collapsed .connection-pill > span:last-child,
body[data-build="0.8.11"] .app.sidebar-collapsed .nav-section-title,
body[data-build="0.8.11"] .app.sidebar-collapsed .sidebar-footer > div { display: none; }
body[data-build="0.8.11"] .app.sidebar-collapsed .sidebar-brand-main { gap: 0; }
body[data-build="0.8.11"] .app.sidebar-collapsed .sidebar-collapse-toggle {
  position: absolute;
  top: 18px;
  right: -1px;
  width: 23px;
  height: 29px;
  border-radius: 9px 0 0 9px;
}
body[data-build="0.8.11"] .app.sidebar-collapsed .connection-pill {
  justify-content: center;
  margin-inline: 6px;
  padding-inline: 0;
}
body[data-build="0.8.11"] .app.sidebar-collapsed .nav button {
  justify-content: center;
  gap: 0;
  overflow: hidden;
  font-size: 0;
}
body[data-build="0.8.11"] .app.sidebar-collapsed .nav button span { width: auto; font-size: 18px; }
body[data-build="0.8.11"] .app.sidebar-collapsed .sidebar-footer { justify-content: center; }

body[data-build="0.8.11"] .layout-resizer {
  position: relative;
  z-index: 15;
  min-width: 7px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  background: transparent;
  outline: none;
}
body[data-build="0.8.11"] .layout-resizer::after {
  content: "";
  position: absolute;
  inset: 0 2px;
  border-radius: 999px;
  background: rgba(131, 157, 194, .18);
  transition: background .14s ease, box-shadow .14s ease;
}
body[data-build="0.8.11"] .layout-resizer:hover::after,
body[data-build="0.8.11"] .layout-resizer:focus-visible::after,
body[data-build="0.8.11"] .layout-resizer.dragging::after {
  background: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}
body.layout-resizing,
body.layout-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

body[data-build="0.8.11"] .inbox-view {
  --td-conversation-width: 360px;
  --td-customer-width: 300px;
  grid-template-columns: var(--td-conversation-width) 7px minmax(360px, 1fr) 7px var(--td-customer-width);
}
body[data-build="0.8.11"] .conversation-panel { grid-column: 1; }
body[data-build="0.8.11"] .conversation-panel-resizer { grid-column: 2; }
body[data-build="0.8.11"] .inbox-view > .chat-panel { grid-column: 3; }
body[data-build="0.8.11"] .customer-panel-resizer { grid-column: 4; }
body[data-build="0.8.11"] .customer-details { grid-column: 5; min-width: 0; }

/* Light theme document cards must remain readable on both inbound and outbound bubbles. */
html[data-theme="light"] body[data-build="0.8.11"] .media-document {
  border-color: #b9c6d8;
  background: rgba(255,255,255,.82);
  color: #17243a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}
html[data-theme="light"] body[data-build="0.8.11"] .media-document:hover {
  border-color: #7ea4e8;
  background: #f7faff;
}
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon {
  border: 1px solid #b8cae7;
  background: #e7f0ff;
  color: #1f5fc6;
}
html[data-theme="light"] body[data-build="0.8.11"] .media-document-details strong {
  color: #14213a;
  text-shadow: none;
}
html[data-theme="light"] body[data-build="0.8.11"] .media-document-details small {
  color: #526177;
}
html[data-theme="light"] body[data-build="0.8.11"] .outbound .media-document {
  border-color: #91b5ef;
  background: #edf5ff;
}
html[data-theme="light"] body[data-build="0.8.11"] .outbound .media-document-details strong { color: #10264a; }
html[data-theme="light"] body[data-build="0.8.11"] .outbound .media-document-details small { color: #40597d; }

html[data-theme="light"] body[data-build="0.8.11"] .sidebar-collapse-toggle {
  border-color: #c8d2df;
  background: #f4f7fb;
  color: #315278;
}
html[data-theme="light"] body[data-build="0.8.11"] .layout-resizer::after { background: #d9e0e8; }
html[data-theme="light"] body[data-build="0.8.11"] .layout-resizer:hover::after,
html[data-theme="light"] body[data-build="0.8.11"] .layout-resizer:focus-visible::after,
html[data-theme="light"] body[data-build="0.8.11"] .layout-resizer.dragging::after { background: #2f6fed; }

@media (max-width: 1480px) and (min-width: 1001px) {
  body[data-build="0.8.11"] .inbox-view {
    --td-customer-width: 270px;
    grid-template-columns: var(--td-conversation-width) 7px minmax(340px, 1fr) 7px var(--td-customer-width);
  }
  body[data-build="0.8.11"] .customer-details { display: block; }
  body[data-build="0.8.11"] .customer-panel-resizer { display: block; }
}
@media (max-width: 1180px) and (min-width: 721px) {
  body[data-build="0.8.11"] .inbox-view {
    grid-template-columns: var(--td-conversation-width) 7px minmax(0, 1fr);
  }
  body[data-build="0.8.11"] .customer-details,
  body[data-build="0.8.11"] .customer-panel-resizer { display: none; }
}
@media (max-width: 1000px) and (min-width: 721px) {
  body[data-build="0.8.11"] .app:not(.sidebar-collapsed) { --td-sidebar-width: 86px; }
  body[data-build="0.8.11"] .app:not(.sidebar-collapsed) .sidebar-brand-main > span,
  body[data-build="0.8.11"] .app:not(.sidebar-collapsed) .connection-pill > span:last-child,
  body[data-build="0.8.11"] .app:not(.sidebar-collapsed) .nav-section-title,
  body[data-build="0.8.11"] .app:not(.sidebar-collapsed) .sidebar-footer > div { display: none; }
  body[data-build="0.8.11"] .app:not(.sidebar-collapsed) .nav button { justify-content: center; font-size: 0; }
  body[data-build="0.8.11"] .app:not(.sidebar-collapsed) .nav button span { width: auto; font-size: 18px; }
}
@media (max-width: 720px) {
  body[data-build="0.8.11"] .app { --td-sidebar-width: 100%; grid-template-columns: 1fr; }
  body[data-build="0.8.11"] .app > .view { grid-column: auto; }
  body[data-build="0.8.11"] .app-sidebar-resizer,
  body[data-build="0.8.11"] .conversation-panel-resizer,
  body[data-build="0.8.11"] .customer-panel-resizer,
  body[data-build="0.8.11"] .sidebar-collapse-toggle { display: none !important; }
  body[data-build="0.8.11"] .inbox-view { grid-template-columns: 1fr; }
  body[data-build="0.8.11"] .conversation-panel,
  body[data-build="0.8.11"] .inbox-view > .chat-panel { grid-column: 1; }
}

/* v0.8.11 — restore stable mobile chat shell and readable responsive customer profile */
body[data-build="0.8.11"] .chat-active {
  grid-template-areas:
    "header"
    "search"
    "selection"
    "notice"
    "messages"
    "composer";
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
}
body[data-build="0.8.11"] .chat-search-bar { grid-area: search; }
body[data-build="0.8.11"] .message-selection-bar { grid-area: selection; }
body[data-build="0.8.11"] .ai-chat-header {
  position: relative;
  z-index: 12;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Customer profile: all text and controls must stay readable in both themes. */
body[data-build="0.8.11"] .contact-profile-dialog.profile-drawer {
  width: clamp(380px, 31vw, 460px);
  min-width: 340px;
}
body[data-build="0.8.11"] .contact-profile-hero,
body[data-build="0.8.11"] .profile-section,
body[data-build="0.8.11"] .profile-actions button,
body[data-build="0.8.11"] .profile-facts {
  box-sizing: border-box;
  min-width: 0;
}
body[data-build="0.8.11"] .profile-identity,
body[data-build="0.8.11"] .profile-name-line,
body[data-build="0.8.11"] .profile-name-line h2,
body[data-build="0.8.11"] .profile-facts dd {
  min-width: 0;
  overflow-wrap: anywhere;
}
body[data-build="0.8.11"] .profile-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
body[data-build="0.8.11"] .profile-actions button {
  width: 100%;
  min-width: 0;
  padding: 8px 5px;
  line-height: 1.2;
}
body[data-build="0.8.11"] .profile-actions button b {
  white-space: normal;
  overflow-wrap: anywhere;
}
body[data-build="0.8.11"] .profile-session-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body[data-build="0.8.11"] .profile-session-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 6px;
  white-space: normal;
  line-height: 1.25;
}

html[data-theme="light"] body[data-build="0.8.11"] .contact-profile-dialog,
html[data-theme="light"] body[data-build="0.8.11"] .profile-drawer .dialog-header,
html[data-theme="light"] body[data-build="0.8.11"] .contact-profile-scroll {
  background: #f5f7fa;
  color: #111827;
}
html[data-theme="light"] body[data-build="0.8.11"] .contact-profile-hero {
  border-color: #c8d5e8;
  background: linear-gradient(145deg, #eaf2ff, #ffffff);
  color: #101b2d;
  box-shadow: 0 8px 22px rgba(31, 58, 98, .08);
}
html[data-theme="light"] body[data-build="0.8.11"] .contact-profile-hero h2,
html[data-theme="light"] body[data-build="0.8.11"] .contact-profile-hero .profile-name-line,
html[data-theme="light"] body[data-build="0.8.11"] .contact-profile-hero .profile-name-line h2 {
  color: #10213a !important;
}
html[data-theme="light"] body[data-build="0.8.11"] .contact-profile-hero p,
html[data-theme="light"] body[data-build="0.8.11"] #profile-phone {
  color: #50617a !important;
}
html[data-theme="light"] body[data-build="0.8.11"] .profile-actions button {
  border-color: #c9d5e5;
  background: #ffffff;
  color: #21324b;
  box-shadow: 0 2px 8px rgba(30, 52, 82, .06);
}
html[data-theme="light"] body[data-build="0.8.11"] .profile-actions button:hover {
  border-color: #79a1e8;
  background: #edf4ff;
}
html[data-theme="light"] body[data-build="0.8.11"] .profile-facts {
  border-color: #d0d9e5;
  background: #ffffff;
}
html[data-theme="light"] body[data-build="0.8.11"] .profile-facts > div {
  border-bottom-color: #d9e1eb;
}
html[data-theme="light"] body[data-build="0.8.11"] .profile-facts dt {
  color: #58677d;
}
html[data-theme="light"] body[data-build="0.8.11"] .profile-facts dd {
  color: #17243a;
}
html[data-theme="light"] body[data-build="0.8.11"] .profile-section-heading h4,
html[data-theme="light"] body[data-build="0.8.11"] .profile-toggle-row b,
html[data-theme="light"] body[data-build="0.8.11"] .profile-field {
  color: #1e2d43;
}
html[data-theme="light"] body[data-build="0.8.11"] .profile-toggle-row small,
html[data-theme="light"] body[data-build="0.8.11"] .profile-privacy-note {
  color: #56657a;
}
html[data-theme="light"] body[data-build="0.8.11"] .profile-privacy-note {
  border-left-color: #2f6fed;
  background: #eaf2ff;
}

html[data-theme="dark"] body[data-build="0.8.11"] .contact-profile-dialog,
html[data-theme="dark"] body[data-build="0.8.11"] .profile-drawer .dialog-header,
html[data-theme="dark"] body[data-build="0.8.11"] .contact-profile-scroll {
  background: #121d2b;
  color: #f4f7fc;
}
html[data-theme="dark"] body[data-build="0.8.11"] .contact-profile-hero {
  border-color: #3b5271;
  background: linear-gradient(145deg, #1d304a, #152337);
  color: #f7f9fd;
}
html[data-theme="dark"] body[data-build="0.8.11"] .contact-profile-hero h2,
html[data-theme="dark"] body[data-build="0.8.11"] .contact-profile-hero .profile-name-line,
html[data-theme="dark"] body[data-build="0.8.11"] .contact-profile-hero .profile-name-line h2 {
  color: #ffffff !important;
}
html[data-theme="dark"] body[data-build="0.8.11"] .contact-profile-hero p,
html[data-theme="dark"] body[data-build="0.8.11"] #profile-phone {
  color: #c3d0e2 !important;
}
html[data-theme="dark"] body[data-build="0.8.11"] .profile-actions button {
  border-color: #3a4e69;
  background: #1a2a40;
  color: #f2f6fc;
}
html[data-theme="dark"] body[data-build="0.8.11"] .profile-facts dt { color: #aab8cb; }
html[data-theme="dark"] body[data-build="0.8.11"] .profile-facts dd { color: #f1f5fb; }

@media (max-width: 720px) {
  html.app-shell-active,
  body.app-shell-active {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  body[data-build="0.8.11"] #app-view.app {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 60px 0 calc(62px + env(safe-area-inset-bottom)) !important;
  }
  body[data-build="0.8.11"] .view,
  body[data-build="0.8.11"] .inbox-view,
  body[data-build="0.8.11"] .conversation-panel {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  body[data-build="0.8.11"] .chat-panel {
    position: fixed !important;
    z-index: 55 !important;
    inset: 60px 0 calc(62px + env(safe-area-inset-bottom)) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: var(--bg);
    overscroll-behavior: none;
  }
  body[data-build="0.8.11"] .chat-active {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-areas:
      "header"
      "search"
      "selection"
      "notice"
      "messages"
      "composer" !important;
    grid-template-rows: 58px auto auto auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }
  body[data-build="0.8.11"] .ai-chat-header {
    grid-area: header;
    position: relative !important;
    top: auto !important;
    min-height: 58px !important;
    height: 58px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 7px !important;
    overflow: hidden !important;
    border-bottom: 1px solid var(--border);
  }
  body[data-build="0.8.11"] .mobile-chat-back {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    display: grid !important;
  }
  body[data-build="0.8.11"] .contact-summary {
    min-width: 0 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    overflow: hidden;
  }
  body[data-build="0.8.11"] .contact-title-block {
    min-width: 0;
    overflow: hidden;
  }
  body[data-build="0.8.11"] .contact-title-block h3 {
    max-width: none !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  body[data-build="0.8.11"] .ai-chat-actions {
    min-width: 0;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
  }
  body[data-build="0.8.11"] .ai-chat-actions .ai-icon-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 36px !important;
  }
  body[data-build="0.8.11"] .ai-toggle-button {
    width: 54px !important;
    min-width: 54px !important;
    height: 42px !important;
    flex: 0 0 54px !important;
  }
  body[data-build="0.8.11"] .message-list {
    grid-area: messages;
    min-height: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  body[data-build="0.8.11"] .composer {
    grid-area: composer;
    position: relative !important;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto;
  }
  body[data-build="0.8.11"] .contact-profile-dialog.profile-drawer {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  body[data-build="0.8.11"] .contact-profile-scroll {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  body[data-build="0.8.11"] .profile-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body[data-build="0.8.11"] .profile-actions button {
    min-height: 58px !important;
    padding: 7px 3px !important;
  }
  body[data-build="0.8.11"] .profile-actions button span { font-size: 17px; }
  body[data-build="0.8.11"] .profile-actions button b { font-size: 10px; }
  body[data-build="0.8.11"] .profile-section {
    width: auto;
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
    overflow: hidden;
  }
  body[data-build="0.8.11"] .whatsapp-profile-facts > div,
  body[data-build="0.8.11"] .compact-profile-facts > div {
    grid-template-columns: minmax(82px, 30%) minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 10px !important;
  }
  body[data-build="0.8.11"] .profile-session-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body[data-build="0.8.11"] .profile-session-actions .button {
    min-height: 44px;
    padding: 7px 4px;
    font-size: 11px;
  }
}

@media (max-width: 390px) {
  body[data-build="0.8.11"] .contact-title-block h3 { font-size: 14px; }
  body[data-build="0.8.11"] .ai-chat-actions .ai-icon-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
  }
  body[data-build="0.8.11"] .ai-toggle-button {
    width: 50px !important;
    min-width: 50px !important;
    flex-basis: 50px !important;
  }
  body[data-build="0.8.11"] .profile-session-actions {
    grid-template-columns: 1fr 1fr !important;
  }
  body[data-build="0.8.11"] .profile-session-actions .button:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  body[data-build="0.8.11"] .chat-panel:not(.mobile-open) {
    transform: translate3d(100%, 0, 0) !important;
    pointer-events: none;
  }
  body[data-build="0.8.11"] .chat-panel.mobile-open {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto;
  }
}

/* v0.8.11 — definitive iPhone/PWA viewport shell and Malaysia message time fix support */
@media (max-width: 720px) {
  html.app-shell-active,
  body.app-shell-active {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body[data-build="0.8.11"] #app-view.app {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body[data-build="0.8.11"] .sidebar {
    position: fixed !important;
    z-index: 90 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(60px + env(safe-area-inset-top)) !important;
    min-height: calc(60px + env(safe-area-inset-top)) !important;
    margin: 0 !important;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  body[data-build="0.8.11"] .nav {
    position: fixed !important;
    z-index: 95 !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(62px + env(safe-area-inset-bottom)) !important;
    min-height: calc(62px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  body[data-build="0.8.11"] #app-view.app > .view,
  body[data-build="0.8.11"] #view-inbox.inbox-view {
    position: fixed !important;
    z-index: 1 !important;
    top: calc(60px + env(safe-area-inset-top)) !important;
    right: 0 !important;
    bottom: calc(62px + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body[data-build="0.8.11"] .conversation-panel {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  body[data-build="0.8.11"] .chat-panel {
    position: fixed !important;
    z-index: 80 !important;
    top: calc(60px + env(safe-area-inset-top)) !important;
    right: 0 !important;
    bottom: calc(62px + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-build="0.8.11"] .chat-panel.mobile-open {
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
  }

  body[data-build="0.8.11"] .chat-active {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body[data-build="0.8.11"] .ai-chat-header {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  body[data-build="0.8.11"].keyboard-open .chat-panel {
    bottom: var(--td-keyboard-bottom, 0px) !important;
  }
}

@media (max-width: 720px) {
  body[data-build="0.8.11"] .chat-panel:not(.mobile-open) {
    transform: translate3d(100%, 0, 0) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body[data-build="0.8.11"] .chat-panel.mobile-open {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* v0.8.11 — live chat reconciliation, compact mobile conversation shell and WhatsApp GIF playback */
body[data-build="0.8.11"] .bubble.has-gif-media {
  width: fit-content;
  max-width: min(340px, 70vw) !important;
  padding: 4px !important;
  overflow: hidden;
}
body[data-build="0.8.11"] .chat-gif-video {
  display: block;
  width: auto;
  max-width: min(330px, 68vw) !important;
  max-height: min(380px, 52vh) !important;
  object-fit: contain;
  border-radius: 9px;
  background: #0a101a;
  cursor: pointer;
}

@media (max-width: 720px) {
  /* The bottom module navigation belongs to the inbox, not an open conversation. */
  html.mobile-chat-active,
  body.mobile-chat-active {
    height: 100% !important;
    overflow: hidden !important;
  }
  body[data-build="0.8.11"].mobile-chat-active .nav {
    display: none !important;
  }
  body[data-build="0.8.11"].mobile-chat-active .chat-panel {
    top: calc(60px + env(safe-area-inset-top)) !important;
    bottom: 0 !important;
    height: auto !important;
  }
  body[data-build="0.8.11"].mobile-chat-active.keyboard-open .chat-panel {
    bottom: var(--td-keyboard-bottom, 0px) !important;
  }
  body[data-build="0.8.11"].mobile-chat-active .chat-active {
    inset: 0 !important;
    grid-template-rows: 58px auto auto auto minmax(0, 1fr) auto !important;
  }
  body[data-build="0.8.11"].mobile-chat-active .message-list {
    min-height: 0 !important;
    padding: 8px 6px 8px !important;
    scroll-padding-bottom: 62px;
  }
  body[data-build="0.8.11"].mobile-chat-active .composer {
    position: relative !important;
    z-index: 20;
    width: 100% !important;
    min-height: 56px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }
  body[data-build="0.8.11"].mobile-chat-active .composer-input-shell {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 3px 4px !important;
    box-sizing: border-box !important;
  }
  body[data-build="0.8.11"].mobile-chat-active #message-input {
    min-height: 38px !important;
    max-height: 92px !important;
    margin: 0 !important;
    padding: 8px 5px !important;
  }
  body[data-build="0.8.11"] .bubble.has-gif-media {
    max-width: min(238px, 70vw) !important;
  }
  body[data-build="0.8.11"] .chat-gif-video {
    max-width: min(230px, 68vw) !important;
    max-height: 300px !important;
  }
}

/* v0.8.11 — open-chat viewport owns the full mobile workspace (no phantom footer gap) */
@media (max-width: 720px) {
  body[data-build="0.8.11"].mobile-chat-active #app-view.app {
    padding-bottom: 0 !important;
  }
  body[data-build="0.8.11"].mobile-chat-active #app-view.app > #view-inbox.inbox-view {
    bottom: 0 !important;
    height: auto !important;
  }
  body[data-build="0.8.11"].mobile-chat-active .nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }
  body[data-build="0.8.11"].mobile-chat-active .chat-panel.mobile-open {
    inset: calc(60px + env(safe-area-inset-top)) 0 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body[data-build="0.8.11"].mobile-chat-active .chat-active {
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: 58px auto auto auto minmax(0, 1fr) max-content !important;
  }
  body[data-build="0.8.11"].mobile-chat-active .message-list {
    padding-bottom: 6px !important;
    scroll-padding-bottom: 6px !important;
  }
  body[data-build="0.8.11"].mobile-chat-active .composer {
    align-self: end !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 4px 6px max(4px, env(safe-area-inset-bottom)) !important;
  }
  body[data-build="0.8.11"].mobile-chat-active .composer-input-shell {
    min-height: 48px !important;
  }
  body[data-build="0.8.11"].mobile-chat-active.keyboard-open #app-view.app,
  body[data-build="0.8.11"].mobile-chat-active.keyboard-open #view-inbox.inbox-view {
    padding-bottom: 0 !important;
    bottom: 0 !important;
  }
}

/* v0.8.11 — GIF first-frame visibility and native iPhone autoplay cleanup */
body[data-build="0.8.11"] .chat-gif-video::-webkit-media-controls,
body[data-build="0.8.11"] .chat-gif-video::-webkit-media-controls-panel,
body[data-build="0.8.11"] .chat-gif-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
}
body[data-build="0.8.11"] .chat-gif-video {
  min-width: 120px;
  min-height: 90px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
body[data-build="0.8.11"] .message-list {
  overflow-anchor: none;
}


/* v0.8.11 — WhatsApp-style document cards keep filename, caption and file identity separate */
body[data-build="0.8.11"] .bubble.has-document-media {
  width: fit-content;
  max-width: min(430px, 78%);
}
body[data-build="0.8.11"] .media-document {
  width: min(390px, 100%);
  margin-bottom: 7px;
  border-radius: 10px;
}
body[data-build="0.8.11"] .media-document-icon {
  border: 1px solid transparent;
  color: #fff;
  text-shadow: none;
  box-shadow: 0 2px 7px rgba(0,0,0,.16);
}
body[data-build="0.8.11"] .media-document-icon.file-pdf { background: #d7193f; border-color: #b40f31; }
body[data-build="0.8.11"] .media-document-icon.file-excel { background: #107c41; border-color: #0b6534; font-size: 18px; }
body[data-build="0.8.11"] .media-document-icon.file-word { background: #185abd; border-color: #124994; font-size: 18px; }
body[data-build="0.8.11"] .media-document-icon.file-powerpoint { background: #d24726; border-color: #ad361c; font-size: 18px; }
body[data-build="0.8.11"] .media-document-icon.file-archive { background: #7c3aed; border-color: #6426ca; }
body[data-build="0.8.11"] .media-document-icon.file-text { background: #64748b; border-color: #4b596d; }
body[data-build="0.8.11"] .media-document-icon.file-generic { background: #475569; border-color: #344156; }
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-pdf,
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-excel,
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-word,
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-powerpoint,
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-archive,
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-text,
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-generic {
  color: #fff;
}
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-pdf { background: #d7193f; border-color: #b40f31; }
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-excel { background: #107c41; border-color: #0b6534; }
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-word { background: #185abd; border-color: #124994; }
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-powerpoint { background: #d24726; border-color: #ad361c; }
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-archive { background: #7c3aed; border-color: #6426ca; }
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-text { background: #64748b; border-color: #4b596d; }
html[data-theme="light"] body[data-build="0.8.11"] .media-document-icon.file-generic { background: #475569; border-color: #344156; }
body[data-build="0.8.11"] .bubble.has-document-media > span:not(.ai-badge) {
  display: block;
  margin: 0 3px 2px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  body[data-build="0.8.11"] .bubble.has-document-media { max-width: 88%; }
  body[data-build="0.8.11"] .media-document { width: min(330px, 74vw); }
}

/* v0.8.11 — Chinese / English interface language */
body[data-build="0.8.11"] .language-segment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border, #2b3b55);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel, #101a2b) 88%, transparent);
}
body[data-build="0.8.11"] .language-segment button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  min-height: 34px;
  padding: 7px 14px;
  background: transparent;
  color: var(--muted, #93a3bd);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
body[data-build="0.8.11"] .language-segment button.active,
body[data-build="0.8.11"] .language-segment button[aria-pressed="true"] {
  background: var(--primary, #3478f6);
  color: #fff;
  box-shadow: 0 6px 18px rgba(52,120,246,.22);
}
body[data-build="0.8.11"] .login-language-switch {
  position: absolute;
  top: 18px;
  right: 18px;
}
body[data-build="0.8.11"] .login-card { position: relative; }
body[data-build="0.8.11"] .language-settings { grid-column: 1 / -1; }
body[data-build="0.8.11"] .language-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
body[data-build="0.8.11"] .language-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 16px;
  border: 1px solid var(--border, #2b3b55);
  border-radius: 16px;
  background: var(--panel-soft, #132036);
  color: var(--text, #edf3ff);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
body[data-build="0.8.11"] .language-choice:hover { transform: translateY(-1px); }
body[data-build="0.8.11"] .language-choice.active,
body[data-build="0.8.11"] .language-choice[aria-checked="true"] {
  border-color: var(--primary, #3478f6);
  background: color-mix(in srgb, var(--primary, #3478f6) 14%, var(--panel-soft, #132036));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary, #3478f6) 60%, transparent);
}
body[data-build="0.8.11"] .language-code {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary, #3478f6) 18%, transparent);
  color: var(--primary, #3478f6);
  font-weight: 900;
  letter-spacing: .02em;
}
body[data-build="0.8.11"] .language-choice > span:last-child {
  display: grid;
  gap: 4px;
}
body[data-build="0.8.11"] .language-choice b { font-size: 15px; }
body[data-build="0.8.11"] .language-choice small { color: var(--muted, #93a3bd); }

@media (max-width: 720px) {
  body[data-build="0.8.11"] .login-language-switch {
    position: static;
    margin: 0 auto 12px;
  }
  body[data-build="0.8.11"] .language-choice-grid { grid-template-columns: 1fr; }
  body[data-build="0.8.11"] .language-choice { min-height: 70px; padding: 13px 14px; }
}


/* v0.8.11 — quick replies with image + caption */
body[data-build="0.8.11"] .quick-reply-card-media {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(70,108,180,.10);
}
body[data-build="0.8.11"] .quick-reply-card-media img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
}
body[data-build="0.8.11"] .quick-reply-card-media small,
body[data-build="0.8.11"] .quick-reply-card-content {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
body[data-build="0.8.11"] .quick-reply-image-field small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.45; }
body[data-build="0.8.11"] .quick-reply-image-preview {
  display: grid;
  grid-template-columns: 86px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-soft, rgba(255,255,255,.04));
}
body[data-build="0.8.11"] .quick-reply-image-preview.hidden { display: none; }
body[data-build="0.8.11"] .quick-reply-image-preview img { width: 86px; height: 86px; object-fit: cover; border-radius: 10px; }
body[data-build="0.8.11"] .quick-reply-image-preview > div { min-width: 0; display: grid; gap: 9px; }
body[data-build="0.8.11"] .quick-reply-image-preview strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 720px) {
  body[data-build="0.8.11"] .quick-reply-image-preview { grid-template-columns: 70px minmax(0,1fr); }
  body[data-build="0.8.11"] .quick-reply-image-preview img { width: 70px; height: 70px; }
}

/* v0.8.11 — omnichannel connections, shared AI rules and optional service profiles */
.ai-profile-manager{display:grid;gap:16px;margin-bottom:18px;padding:20px}
.ai-profile-manager-top,.section-heading-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.ai-profile-manager-top h3,.section-heading-row h3{margin:2px 0 5px}
.ai-profile-actions{align-items:center;flex-wrap:wrap}
.ai-profile-actions select{min-width:250px}
.ai-profile-editor-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,.6fr);gap:14px}
.ai-profile-editor-grid .wide{grid-column:1/-1}
.ai-profile-switches{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:8px 0}
.ai-profile-knowledge-details{border:1px solid var(--border);border-radius:14px;padding:13px 15px;background:color-mix(in srgb,var(--panel) 92%,transparent)}
.ai-profile-knowledge-details summary{cursor:pointer;font-weight:750}
.ai-profile-knowledge-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px;margin-top:12px;max-height:280px;overflow:auto}
.ai-profile-knowledge-item{display:flex!important;align-items:flex-start;gap:10px;border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--panel-2)}
.ai-profile-knowledge-item input{width:auto;margin-top:3px}
.ai-profile-knowledge-item span{display:grid;gap:3px;min-width:0}
.ai-profile-knowledge-item strong,.ai-profile-knowledge-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-profile-bindings{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--panel-2);color:var(--muted)}
.ai-profile-binding-badge{display:inline-flex;padding:5px 9px;border:1px solid var(--border);border-radius:999px;color:var(--text);background:var(--panel)}

.channel-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.channel-summary-card{display:grid;gap:5px;padding:18px}
.channel-summary-card span{color:var(--muted);font-weight:650}
.channel-summary-card strong{font-size:30px;line-height:1;color:var(--text)}
.channel-summary-card small{color:var(--muted)}
.channel-catalog-card,.channel-connections-card,.channel-connection-editor{padding:20px;margin-bottom:16px}
.foundation-badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--primary) 45%,var(--border));background:color-mix(in srgb,var(--primary) 12%,var(--panel));color:var(--primary);font-weight:750;white-space:nowrap}
.channel-platform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:16px}
.channel-platform-card{--channel-accent:#4d84ff;display:grid;grid-template-columns:50px minmax(0,1fr) auto;align-items:center;gap:12px;text-align:left;border:1px solid var(--border);border-radius:16px;padding:15px;background:linear-gradient(135deg,color-mix(in srgb,var(--channel-accent) 9%,var(--panel)),var(--panel));color:var(--text);cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.channel-platform-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--channel-accent) 55%,var(--border));box-shadow:0 10px 24px rgba(0,0,0,.10)}
.channel-platform-icon,.channel-connection-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--channel-accent) 18%,var(--panel));border:1px solid color-mix(in srgb,var(--channel-accent) 40%,var(--border));color:var(--channel-accent);font-weight:900;font-size:18px}
.channel-platform-copy{display:grid;gap:3px;min-width:0}
.channel-platform-copy strong{font-size:16px}
.channel-platform-copy small{color:var(--channel-accent);font-weight:700}
.channel-platform-copy em{font-style:normal;color:var(--muted);font-size:12px;line-height:1.4}
.channel-platform-meta{display:grid;justify-items:end;gap:6px;white-space:nowrap}
.channel-platform-meta b{font-size:11px;color:var(--text)}
.channel-platform-meta small{color:var(--muted)}
.channel-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.channel-enabled-check{align-self:end;min-height:48px}
.channel-config-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.channel-config-fields label{position:relative}
.channel-required-label{position:absolute;right:8px;top:1px;color:#f6a63a;font-weight:700}
.channel-webhook-panel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:15px;padding:12px;border:1px dashed var(--border);border-radius:12px;background:var(--panel-2)}
.channel-webhook-panel code{overflow:auto;white-space:nowrap;color:var(--text)}
.channel-editor-status{min-height:38px;margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--panel-2);color:var(--muted)}
.channel-editor-status.success{color:#35c987;background:rgba(32,179,118,.12)}
.channel-editor-status.warning{color:#efad45;background:rgba(239,173,69,.12)}
.channel-editor-status.error{color:#ff7584;background:rgba(229,57,69,.12)}
.channel-connections-list{display:grid;gap:9px;margin-top:14px}
.channel-connection-row{--channel-accent:#4d84ff;display:grid;grid-template-columns:42px minmax(180px,1fr) minmax(140px,.7fr) auto;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--border);border-radius:13px;background:var(--panel-2);color:var(--text);text-align:left;cursor:pointer}
.channel-connection-row:hover{border-color:color-mix(in srgb,var(--channel-accent) 50%,var(--border))}
.channel-connection-icon{width:40px;height:40px;border-radius:11px;font-size:14px}
.channel-connection-copy{display:grid;gap:3px;min-width:0}
.channel-connection-copy strong,.channel-connection-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.channel-connection-copy small,.channel-connection-ai{color:var(--muted)}
.channel-status{display:inline-flex;justify-content:center;min-width:78px;padding:5px 9px;border-radius:999px;border:1px solid var(--border);font-size:11px;font-weight:800}
.channel-status.status-connected{color:#22bf75;border-color:rgba(34,191,117,.45);background:rgba(34,191,117,.10)}
.channel-status.status-configured{color:#4d84ff;border-color:rgba(77,132,255,.45);background:rgba(77,132,255,.10)}
.channel-status.status-error{color:#ff6577;border-color:rgba(255,101,119,.45);background:rgba(255,101,119,.10)}
.connection-section-divider{display:flex;align-items:center;gap:12px;margin:24px 0 14px;color:var(--muted);font-weight:800}
.connection-section-divider::before,.connection-section-divider::after{content:"";height:1px;flex:1;background:var(--border)}
.whatsapp-subheader{padding-top:0}
.wa-ai-profile-binding{display:grid;gap:7px;width:min(440px,100%);margin:14px auto;color:var(--muted);text-align:left}
.wa-ai-profile-binding select{width:100%}

@media (max-width:900px){
  .ai-profile-manager-top,.section-heading-row{flex-direction:column}
  .ai-profile-actions{width:100%}
  .ai-profile-actions select{flex:1;min-width:180px}
  .channel-summary-grid{grid-template-columns:1fr}
  .channel-platform-grid{grid-template-columns:1fr}
  .channel-editor-grid,.channel-config-fields,.ai-profile-editor-grid{grid-template-columns:1fr}
  .ai-profile-editor-grid .wide{grid-column:auto}
  .channel-connection-row{grid-template-columns:40px minmax(0,1fr) auto}
  .channel-connection-ai{grid-column:2/4;font-size:12px}
  .channel-webhook-panel{grid-template-columns:1fr}
  .channel-webhook-panel .button{justify-self:start}
}

/* v0.8.11 — resilient omnichannel picker and shared platform-aware AI rules */
.channel-center-notice,
.channel-shared-ai-note,
.channel-policy-preview {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, #4d84ff 42%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, #4d84ff 8%, var(--panel));
  color: var(--text);
}
.channel-center-notice { font-size: 13px; line-height: 1.5; }
.channel-shared-ai-note strong,
.channel-policy-preview strong { color: color-mix(in srgb, #6ea0ff 82%, var(--text)); }
.channel-shared-ai-note span,
.channel-policy-preview span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.channel-policy-preview.strict {
  border-color: color-mix(in srgb, #ff9b45 56%, var(--border));
  background: color-mix(in srgb, #ff9b45 8%, var(--panel));
}
.channel-policy-preview.strict strong { color: #ffad66; }
.channel-platform-picker { width: min(940px, calc(100vw - 28px)); }
.channel-platform-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.channel-picker-option {
  --channel-accent: #4d84ff;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  position: relative;
  min-height: 118px;
  padding: 15px;
  padding-bottom: 38px;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--channel-accent) 34%, var(--border));
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--channel-accent) 8%, var(--panel)), var(--panel));
  color: var(--text);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.channel-picker-option:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--channel-accent) 64%, var(--border));
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.channel-policy-badge {
  position: absolute;
  left: 75px;
  bottom: 12px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, #4d84ff 42%, var(--border));
  border-radius: 999px;
  color: #78a4ff;
  font-size: 10px;
  line-height: 1;
}
.channel-policy-badge.strict {
  border-color: color-mix(in srgb, #ff9b45 55%, var(--border));
  color: #ffad66;
}
.channel-editor-grid label > small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .channel-platform-picker { width: calc(100vw - 18px); padding: 14px; }
  .channel-platform-picker-grid { grid-template-columns: 1fr; }
  .channel-picker-option { min-height: 108px; }
}
.ai-playground-platform-control { display:flex; align-items:center; gap:10px; }
.ai-playground-platform-control label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.ai-playground-platform-control select { min-width:145px; padding:7px 28px 7px 9px; border:1px solid var(--border); border-radius:10px; background:var(--panel); color:var(--text); }
@media (max-width:720px) {
  .ai-playground-topbar { align-items:flex-start; gap:8px; }
  .ai-playground-platform-control { align-items:flex-end; flex-direction:column; gap:5px; }
  .ai-playground-platform-control select { min-width:128px; }
}

/* v0.8.11 Salesmartly-style channel cards and one-click Telegram setup */
.channel-platform-card{
  grid-template-columns:50px minmax(0,1fr) auto;
  grid-template-areas:"icon copy meta" "actions actions actions";
  cursor:default;
}
.channel-platform-card>.channel-platform-icon{grid-area:icon}
.channel-platform-card>.channel-platform-copy{grid-area:copy}
.channel-platform-card>.channel-platform-meta{grid-area:meta}
.channel-platform-actions{grid-area:actions;display:flex;justify-content:flex-end;gap:8px;padding-top:10px;border-top:1px solid var(--border)}
.button.compact{min-height:34px;padding:7px 14px;border-radius:9px;font-size:12px}
.telegram-token-guide{grid-column:1/-1;display:grid;gap:4px;padding:12px 14px;border:1px solid color-mix(in srgb,#229ed9 45%,var(--border));border-radius:12px;background:color-mix(in srgb,#229ed9 10%,var(--panel));color:var(--text)}
.telegram-token-guide strong{color:#55b9ec}
.telegram-token-guide span{color:var(--muted);line-height:1.55}
#channel-config-fields:has(.telegram-token-guide){grid-template-columns:1fr}
#channel-config-fields:has(.telegram-token-guide) label{max-width:none}

@media (max-width:720px){
  .channel-platform-card{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"icon copy" "meta meta" "actions actions"}
  .channel-platform-meta{justify-items:start;grid-auto-flow:column;justify-content:start;gap:12px}
  .channel-platform-actions{justify-content:stretch}
  .channel-platform-actions .button{flex:1}
}

/* v0.8.11 — clear omnichannel source markers in every contact list */
.conversation-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  overflow: visible;
}
.conversation-avatar-wrap > .avatar {
  width: 44px;
  height: 44px;
}
.conversation-platform-badge {
  --platform-accent: #6b7a90;
  position: absolute;
  right: -4px;
  bottom: -3px;
  z-index: 2;
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 3px;
  border: 2px solid var(--panel);
  border-radius: 999px;
  background: var(--platform-accent);
  color: #fff;
  font-size: 7px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,.32);
  pointer-events: none;
}
.conversation-item-content {
  min-width: 0;
}
.conversation-platform-source {
  --platform-accent: #6b7a90;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin-top: 5px;
  color: color-mix(in srgb, var(--platform-accent) 78%, var(--muted));
  font-size: 10px;
  font-weight: 760;
  line-height: 1.15;
  white-space: nowrap;
}
.conversation-platform-source > i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--platform-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-accent) 14%, transparent);
}
.conversation-platform-source > span,
.conversation-platform-source > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-platform-source > small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 620;
}
.contact-platform-pill {
  --platform-accent: #6b7a90;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  margin-top: 3px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--platform-accent) 48%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--platform-accent) 12%, var(--panel-2));
  color: color-mix(in srgb, var(--platform-accent) 76%, var(--text));
  font-size: 9px;
  font-weight: 850;
  line-height: 1.2;
}
.details-channel {
  --platform-accent: #25d366;
  border: 1px solid color-mix(in srgb, var(--platform-accent) 38%, transparent);
  background: color-mix(in srgb, var(--platform-accent) 14%, var(--panel-2));
  color: color-mix(in srgb, var(--platform-accent) 78%, var(--text));
  font-weight: 850;
}
.message-search-result .conversation-avatar-wrap {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}
.message-search-result .conversation-avatar-wrap > .avatar {
  width: 42px;
  height: 42px;
}
.message-search-result .conversation-platform-source {
  margin-top: 1px;
}
.forward-avatar-wrap {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}
.forward-avatar-wrap .conversation-platform-badge {
  right: -5px;
  bottom: -4px;
}
.forward-conversation-option .conversation-platform-source {
  margin-top: 3px;
}
html[data-theme="light"] .conversation-platform-badge {
  border-color: #fff;
  box-shadow: 0 2px 7px rgba(20,35,60,.2);
}
html[data-theme="light"] .conversation-platform-source {
  color: color-mix(in srgb, var(--platform-accent) 78%, #34445d);
}
@media (max-width: 720px) {
  .conversation-platform-badge {
    min-width: 21px;
    height: 21px;
    font-size: 7px;
  }
  .conversation-platform-source {
    font-size: 10px;
  }
  .contact-platform-pill {
    font-size: 9px;
  }
}

/* v0.8.11 — managed one-click channel connection experience */
.channel-connection-page-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.channel-connect-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--panel) 92%,var(--channel-accent,#4d84ff) 8%)}
.channel-connect-hero-icon{--channel-accent:#4d84ff;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:color-mix(in srgb,var(--channel-accent) 18%,transparent);border:1px solid color-mix(in srgb,var(--channel-accent) 55%,transparent);color:var(--channel-accent);font-weight:800}
.channel-connect-hero h3{margin:0 0 4px}.channel-connect-hero p{margin:0}
.channel-simple-content{display:grid;gap:16px;margin-top:18px;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--panel-soft)}
.channel-connect-steps{display:grid;gap:8px;margin:0;padding-left:24px;color:var(--muted)}
.channel-simple-field{display:grid;gap:8px;font-weight:650}.channel-simple-field input,.channel-simple-field select{width:100%}
.channel-oauth-main-button{min-height:46px;justify-self:start;min-width:190px}
.channel-auth-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.channel-auth-choice{display:grid;gap:7px;text-align:left;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--panel);color:var(--text);cursor:pointer;transition:.18s ease}
.channel-auth-choice:hover{transform:translateY(-1px);border-color:var(--primary)}.channel-auth-choice span{color:var(--muted);font-size:.9rem}.channel-auth-choice b{color:var(--primary);justify-self:end}
.channel-login-mode-list{display:grid;gap:10px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.channel-login-mode-list .check{justify-content:flex-start}.channel-login-mode-list small{color:var(--muted);margin-left:6px}
.channel-unavailable-notice{display:grid;gap:8px;padding:18px;border:1px solid color-mix(in srgb,#f0ad4e 45%,var(--border));border-radius:14px;background:color-mix(in srgb,#f0ad4e 9%,var(--panel));line-height:1.55}
.channel-unavailable-notice strong{color:#f0ad4e}.channel-unavailable-notice span{color:var(--muted)}
.channel-connected-identity{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:18px;border:1px solid color-mix(in srgb,#2ecc71 42%,var(--border));border-radius:14px;background:color-mix(in srgb,#2ecc71 8%,var(--panel))}.channel-connected-identity>div{display:grid;gap:8px}.channel-connected-identity strong{font-size:1.08rem}.channel-connected-identity span{color:var(--muted)}.channel-bot-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.channel-progressive-fields{display:grid;gap:14px}
.channel-advanced-details{margin-top:16px;border:1px dashed var(--border);border-radius:12px;padding:12px 14px}.channel-advanced-details summary{cursor:pointer;color:var(--muted);font-weight:700}.channel-advanced-content{display:grid;gap:0;margin-top:12px}.channel-advanced-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px solid var(--border)}.channel-advanced-row span{color:var(--muted)}.channel-advanced-row strong{overflow-wrap:anywhere}
.channel-editor-actions{margin-top:16px;flex-wrap:wrap}
.channel-oauth-account-selection{display:grid;gap:10px;margin-top:16px;padding:18px;border:1px solid var(--primary);border-radius:14px;background:color-mix(in srgb,var(--primary) 7%,var(--panel))}.channel-oauth-account-selection h4{margin:0 0 4px}
.channel-account-choice{display:grid;gap:4px;text-align:left;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--text);cursor:pointer}.channel-account-choice:hover{border-color:var(--primary)}.channel-account-choice span{color:var(--muted)}
.channel-flow-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.channel-flow-progress li{position:relative;display:grid;justify-items:center;gap:7px;min-width:0;color:var(--muted);font-size:11px;font-weight:720;text-align:center}
.channel-flow-progress li::after{content:"";position:absolute;top:14px;left:calc(50% + 18px);width:calc(100% - 28px);height:2px;background:var(--border)}
.channel-flow-progress li:last-child::after{display:none}
.channel-flow-progress b{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--border);border-radius:50%;background:var(--panel);color:var(--muted)}
.channel-flow-progress .active{color:var(--text)}.channel-flow-progress .active b{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 18%,var(--panel));color:var(--primary)}
.channel-flow-progress .complete{color:#2ecc71}.channel-flow-progress .complete b{border-color:#2ecc71;background:rgba(46,204,113,.14);color:#2ecc71}.channel-flow-progress .complete::after{background:#2ecc71}
.channel-oauth-intro{display:grid;gap:7px;padding:16px;border:1px solid color-mix(in srgb,var(--primary) 36%,var(--border));border-radius:13px;background:color-mix(in srgb,var(--primary) 7%,var(--panel))}
.channel-oauth-intro span,.channel-privacy-note,.channel-selection-help{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.channel-requirements{display:grid;gap:7px;margin:0;padding-left:22px;color:var(--muted);font-size:12px;line-height:1.5}
.channel-auth-choice small{color:var(--muted);font-size:11px}
.channel-feature-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.channel-feature-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:9px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.channel-feature-row i{width:9px;height:9px;margin-top:5px;border-radius:50%;background:#f0ad4e;box-shadow:0 0 0 4px rgba(240,173,78,.10)}
.channel-feature-row.ready i{background:#2ecc71;box-shadow:0 0 0 4px rgba(46,204,113,.10)}
.channel-feature-row span{display:grid;gap:3px;min-width:0}.channel-feature-row small{color:var(--muted)}.channel-feature-row strong{font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.channel-connected-identity.expired{border-color:rgba(255,101,119,.5);background:rgba(255,101,119,.08)}
.channel-connected-identity.expired strong{color:#ff7584}
.channel-card-availability{font-weight:700}.availability-server_setup_required .channel-card-availability,.availability-approval_required .channel-card-availability,.availability-adapter_pending .channel-card-availability{color:#f0ad4e}.availability-ready .channel-card-availability,.availability-authorization_ready .channel-card-availability,.availability-guided .channel-card-availability{color:#2ecc71}
.channel-account-row .channel-connection-copy small{overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.channel-connect-hero{grid-template-columns:auto minmax(0,1fr)}.channel-connect-hero>.channel-status{grid-column:1/-1;justify-self:start}.channel-auth-choice-grid,.channel-feature-summary{grid-template-columns:1fr}.channel-simple-content{padding:15px}.channel-oauth-main-button{width:100%;justify-self:stretch}.channel-advanced-row{grid-template-columns:1fr;gap:3px}.channel-editor-actions .button{flex:1 1 140px}.channel-connection-page-header{align-items:flex-start}.channel-platform-card{min-height:0}.channel-flow-progress{gap:3px}.channel-flow-progress li{font-size:9px}.channel-flow-progress li::after{left:calc(50% + 15px);width:calc(100% - 22px)}}

/* v0.8.11 — each platform opens as its own focused connection page */
#view-connection.channel-editor-open > :not(#channel-connection-editor) { display: none !important; }
#view-connection.channel-editor-open { padding-top: 18px; }
#view-connection.channel-editor-open #channel-connection-editor { display: block; width: min(900px, 100%); margin: 0 auto; min-height: calc(100dvh - 56px); }
#view-connection.channel-editor-open .channel-connection-page-header { position: sticky; top: 0; z-index: 3; padding-block: 8px; background: var(--surface, #0f1b2d); }
@media (max-width: 720px) {
  #view-connection.channel-editor-open { padding: 0; }
  #view-connection.channel-editor-open #channel-connection-editor { width: 100%; min-height: 100dvh; border-radius: 0; border-inline: 0; }
}

.channel-token-rotation{padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.channel-token-rotation>span{color:var(--muted);line-height:1.55}.channel-token-rotation .button{justify-self:start}

.invoice-comprehension-note {
  margin: -2px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(81, 137, 230, .38);
  border-radius: 10px;
  background: rgba(39, 77, 139, .18);
  color: #bcd0ee;
  font-size: 12px;
  line-height: 1.55;
}



/* TD_REACTION_STABLE_V4_START */

body[data-build="0.8.11"] #emoji-panel.td-reaction-panel {
  position: fixed !important;
  z-index: 30030 !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid var(--border, #334763) !important;
  border-radius: 18px;
  background: var(--panel, #101b2d) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.52);
  pointer-events: auto !important;
}
body[data-build="0.8.11"] #emoji-panel.td-reaction-panel.hidden { display: none !important; }
body[data-build="0.8.11"] #emoji-panel .td-reaction-drag-handle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 14px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border, #334763);
  background: color-mix(in srgb, var(--panel, #101b2d) 86%, #4d84ff 14%);
  color: var(--muted, #aebdd2);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
body[data-build="0.8.11"] #emoji-panel .td-reaction-drag-handle span {
  color: var(--primary, #4d84ff);
  font-size: 20px;
}
body[data-build="0.8.11"] #emoji-panel .emoji-search-row {
  position: relative !important;
  z-index: 4 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 10px !important;
  min-height: 58px;
  padding: 10px 14px 8px !important;
  box-sizing: border-box;
  background: var(--panel, #101b2d) !important;
  pointer-events: auto !important;
}
body[data-build="0.8.11"] #emoji-panel .emoji-categories {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 50px !important;
  padding: 5px 12px 7px !important;
  box-sizing: border-box;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-bottom: 1px solid var(--border, #334763) !important;
  background: var(--panel, #101b2d) !important;
  pointer-events: auto !important;
  touch-action: pan-x !important;
}
body[data-build="0.8.11"] #emoji-panel .emoji-categories button {
  position: relative !important;
  z-index: 5 !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
body[data-build="0.8.11"] #emoji-panel .emoji-grid {
  position: relative !important;
  z-index: 2 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  padding: 12px 16px 18px !important;
  box-sizing: border-box;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto !important;
  touch-action: pan-y !important;
}
body[data-build="0.8.11"] #emoji-panel .emoji-grid button {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* Preserve mobile scrolling on non-chat pages from the earlier mobile fix. */
@media (max-width: 720px) {
  body[data-build="0.8.11"]:not(.mobile-chat-active) #app-view.app {
    overflow: hidden !important;
  }

  body[data-build="0.8.11"]:not(.mobile-chat-active) #app-view.app > .view.content-view:not(.hidden),
  body[data-build="0.8.11"]:not(.mobile-chat-active) #view-ai-studio:not(.hidden),
  body[data-build="0.8.11"]:not(.mobile-chat-active) #view-knowledge:not(.hidden),
  body[data-build="0.8.11"]:not(.mobile-chat-active) #view-workflows:not(.hidden),
  body[data-build="0.8.11"]:not(.mobile-chat-active) #view-connection:not(.hidden),
  body[data-build="0.8.11"]:not(.mobile-chat-active) #view-settings:not(.hidden) {
    min-height: 0 !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-bottom: calc(110px + env(safe-area-inset-bottom));
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 720px), (pointer: coarse) {
  body[data-build="0.8.11"] .message-action-menu.portal-open {
    max-height: min(64dvh, 430px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  body[data-build="0.8.11"] #emoji-panel.td-reaction-panel:not(.hidden) {
    left: 8px !important;
    right: 8px !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 16px !important;
  }
  body[data-build="0.8.11"] #emoji-panel .td-reaction-drag-handle {
    min-height: 38px;
    padding: 6px 12px;
    cursor: default;
    touch-action: auto;
  }
  body[data-build="0.8.11"] #emoji-panel .emoji-search-row {
    min-height: 54px;
    padding: 8px 10px 6px !important;
  }
  body[data-build="0.8.11"] #emoji-panel .emoji-categories {
    min-height: 48px !important;
    padding-inline: 8px !important;
  }
  body[data-build="0.8.11"] #emoji-panel .emoji-grid {
    padding: 10px 10px calc(20px + env(safe-area-inset-bottom)) !important;
  }
}
/* TD_REACTION_STABLE_V4_END */


/* TD_REACTION_STABLE_V4_1_QUICK_BAR_START */
body[data-build="0.8.11"] .td-quick-reaction-bar {
  position: fixed !important;
  z-index: 30020 !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100vw - 16px) !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid #3a4659 !important;
  border-radius: 999px !important;
  background: #111a27 !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.48) !important;
  visibility: visible;
  opacity: 1 !important;
  pointer-events: auto !important;
  touch-action: pan-x !important;
  white-space: nowrap !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body[data-build="0.8.11"] .td-quick-reaction-bar::-webkit-scrollbar {
  display: none;
}
body[data-build="0.8.11"] .td-quick-reaction-bar > button {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: inherit !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}
body[data-build="0.8.11"] .td-quick-reaction-bar > button:hover,
body[data-build="0.8.11"] .td-quick-reaction-bar > button:focus-visible {
  background: #27344a !important;
  outline: 2px solid #78b6ff !important;
  outline-offset: 0 !important;
}
@media (max-width: 720px), (pointer: coarse) {
  body[data-build="0.8.11"] .td-quick-reaction-bar {
    max-width: calc(100vw - 12px) !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 5px 6px !important;
  }
  body[data-build="0.8.11"] .td-quick-reaction-bar > button {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    font-size: 22px !important;
  }
}
/* TD_REACTION_STABLE_V4_1_QUICK_BAR_END */


/* TD_WHATSAPP_MESSAGE_PARITY_V4_2_START */
body[data-build="0.8.11"] .whatsapp-quoted-message {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0 0 7px !important;
  padding: 6px 9px 7px !important;
  overflow: hidden;
  border: 0 !important;
  border-left: 3px solid #7fa0ff !important;
  border-radius: 3px 7px 7px 3px !important;
  background: rgba(5, 10, 18, .32) !important;
  color: #c8d4e8 !important;
  white-space: normal !important;
}
body[data-build="0.8.11"] .whatsapp-quoted-message .quoted-message-author {
  display: block;
  overflow: hidden;
  color: #90b1ff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body[data-build="0.8.11"] .whatsapp-quoted-message .quoted-message-text {
  display: -webkit-box;
  overflow: hidden;
  color: #d4dceb;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body[data-build="0.8.11"] .bubble.has-compact-image.has-reactions {
  margin-bottom: 13px;
}
body[data-build="0.8.11"] .bubble.has-compact-image.has-reactions > .reaction-list {
  position: absolute;
  left: 8px;
  bottom: -13px;
  z-index: 3;
  margin: 0 !important;
}
body[data-build="0.8.11"] .bubble.has-compact-image.has-reactions > .reaction-list span {
  min-width: 28px;
  min-height: 25px;
  padding: 1px 7px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: #111a27;
  box-shadow: 0 2px 7px rgba(0,0,0,.34);
  line-height: 21px;
}
html[data-theme="light"] body[data-build="0.8.11"] .whatsapp-quoted-message {
  background: rgba(44, 88, 166, .08) !important;
  color: #40516b !important;
}
html[data-theme="light"] body[data-build="0.8.11"] .whatsapp-quoted-message .quoted-message-author {
  color: #2457ad;
}
html[data-theme="light"] body[data-build="0.8.11"] .whatsapp-quoted-message .quoted-message-text {
  color: #46556b;
}
html[data-theme="light"] body[data-build="0.8.11"] .bubble.has-compact-image.has-reactions > .reaction-list span {
  background: #fff;
  border-color: #ccd4df;
}
@media (max-width: 720px), (pointer: coarse) {
  body[data-build="0.8.11"] .whatsapp-quoted-message {
    padding: 7px 9px 8px !important;
  }
  body[data-build="0.8.11"] .whatsapp-quoted-message .quoted-message-author {
    font-size: 12px;
  }
  body[data-build="0.8.11"] .whatsapp-quoted-message .quoted-message-text {
    font-size: 13px;
  }
}
/* TD_WHATSAPP_MESSAGE_PARITY_V4_2_END */

/* v0.8.11 truthful platform health + protected Meta attachment states */
.channel-platform-card.unavailable,
.channel-connection-row.unavailable {
  opacity: .72;
  filter: saturate(.72);
}
.channel-platform-card.unavailable:hover { transform: none; box-shadow: none; }
.channel-picker-option.unavailable { border-style: dashed; opacity: .82; }
.channel-policy-badge.unavailable { background: rgba(240,173,78,.12); border-color: rgba(240,173,78,.35); color: #f5bd62; }
.channel-legacy-disabled-notice {
  padding: 12px 14px;
  border: 1px solid rgba(240,173,78,.35);
  border-radius: 12px;
  background: rgba(240,173,78,.08);
  color: var(--muted);
  line-height: 1.55;
}
.channel-feature-row.error i { background: #ef5b6a; box-shadow: 0 0 0 4px rgba(239,91,106,.12); }
.channel-feature-summary { align-items: stretch; }
.channel-feature-row strong { white-space: normal; }

.media-state-card {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  align-items: start;
  gap: 10px;
  width: min(360px, 72vw);
  margin: 2px 0 6px;
  padding: 11px 12px;
  border: 1px solid rgba(240,173,78,.32);
  border-radius: 12px;
  background: rgba(240,173,78,.08);
}
.media-state-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(240,173,78,.16);
  color: #f5bd62;
  font-weight: 800;
}
.media-state-card > span:last-child { display: grid; gap: 3px; min-width: 0; }
.media-state-card strong { font-size: 12px; line-height: 1.4; }
.media-state-card small { color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.media-state-card.media-state-failed,
.media-state-card.media-state-blocked { border-color: rgba(239,91,106,.35); background: rgba(239,91,106,.08); }
.media-state-failed .media-state-icon,
.media-state-blocked .media-state-icon { background: rgba(239,91,106,.15); color: #ff8792; }
html[data-theme="light"] .channel-policy-badge.unavailable { color: #8c5a08; }
html[data-theme="light"] .media-state-card { background: #fff8ea; border-color: #e4bd78; }
html[data-theme="light"] .media-state-card.media-state-failed,
html[data-theme="light"] .media-state-card.media-state-blocked { background: #fff1f2; border-color: #e4a4aa; }

/* v0.8.11 — English responsive typography and width-aware workspace */
html[lang="en"] body[data-build="0.8.11"] {
  font-size: clamp(14px, .84vw, 16px);
}

html[lang="en"] body[data-build="0.8.11"] .sidebar {
  container-type: inline-size;
  padding-inline: clamp(13px, 1vw, 18px);
}
html[lang="en"] body[data-build="0.8.11"] .sidebar-brand-main > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(15px, .95vw, 18px);
  line-height: 1.2;
}
html[lang="en"] body[data-build="0.8.11"] .connection-pill {
  min-width: 0;
  padding: 10px clamp(9px, .8vw, 13px);
  font-size: clamp(11px, .68vw, 13px);
  line-height: 1.3;
}
html[lang="en"] body[data-build="0.8.11"] .connection-pill > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[lang="en"] body[data-build="0.8.11"] .nav {
  gap: clamp(6px, .45vw, 9px);
}
html[lang="en"] body[data-build="0.8.11"] .nav button {
  min-width: 0;
  min-height: 46px;
  gap: clamp(9px, .7vw, 13px);
  padding: 11px clamp(10px, .8vw, 14px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(13px, .78vw, 15px);
  line-height: 1.18;
}
html[lang="en"] body[data-build="0.8.11"] .nav button span {
  flex: 0 0 22px;
}
html[lang="en"] body[data-build="0.8.11"] .nav-section-title,
html[lang="en"] body[data-build="0.8.11"] .sidebar-footer small {
  font-size: clamp(10px, .62vw, 12px);
  letter-spacing: .09em;
}
html[lang="en"] body[data-build="0.8.11"] .sidebar-footer strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(13px, .78vw, 15px);
}

html[lang="en"] body[data-build="0.8.11"] .content-view {
  padding-inline: clamp(22px, 3.4vw, 64px);
}
html[lang="en"] body[data-build="0.8.11"] .content-header {
  align-items: flex-start;
  margin-bottom: clamp(20px, 1.7vw, 30px);
}
html[lang="en"] body[data-build="0.8.11"] .content-header h2 {
  font-size: clamp(25px, 1.7vw, 34px);
  line-height: 1.1;
}
html[lang="en"] body[data-build="0.8.11"] .content-header p,
html[lang="en"] body[data-build="0.8.11"] .settings-card .muted,
html[lang="en"] body[data-build="0.8.11"] .settings-card .compact-note {
  font-size: clamp(13px, .76vw, 15px);
  line-height: 1.55;
}
html[lang="en"] body[data-build="0.8.11"] .settings-layout {
  width: min(1480px, 100%);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 1.25vw, 24px);
}
html[lang="en"] body[data-build="0.8.11"] .settings-layout > .settings-card {
  min-width: 0;
  padding: clamp(19px, 1.45vw, 28px);
}
html[lang="en"] body[data-build="0.8.11"] #language-settings,
html[lang="en"] body[data-build="0.8.11"] #appearance-settings {
  grid-column: span 6;
}
html[lang="en"] body[data-build="0.8.11"] #settings-form,
html[lang="en"] body[data-build="0.8.11"] #staff-management {
  grid-column: 1 / -1;
}
html[lang="en"] body[data-build="0.8.11"] #password-form {
  grid-column: span 6;
  margin-top: 0;
}
html[lang="en"] body[data-build="0.8.11"] .settings-card h3 {
  font-size: clamp(18px, 1.08vw, 22px);
  line-height: 1.2;
}
html[lang="en"] body[data-build="0.8.11"] .settings-card label,
html[lang="en"] body[data-build="0.8.11"] .settings-card input,
html[lang="en"] body[data-build="0.8.11"] .settings-card textarea,
html[lang="en"] body[data-build="0.8.11"] .settings-card select,
html[lang="en"] body[data-build="0.8.11"] .settings-card button {
  font-size: clamp(13px, .76vw, 15px);
}
html[lang="en"] body[data-build="0.8.11"] .appearance-heading {
  min-width: 0;
}
html[lang="en"] body[data-build="0.8.11"] .appearance-heading > div {
  min-width: 0;
}
html[lang="en"] body[data-build="0.8.11"] .theme-current-label {
  max-width: 42%;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: clamp(11px, .66vw, 13px);
}
html[lang="en"] body[data-build="0.8.11"] .language-choice-grid,
html[lang="en"] body[data-build="0.8.11"] .theme-mode-control {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
}
html[lang="en"] body[data-build="0.8.11"] .language-choice,
html[lang="en"] body[data-build="0.8.11"] .theme-choice {
  min-width: 0;
}
html[lang="en"] body[data-build="0.8.11"] .language-choice > span:last-child,
html[lang="en"] body[data-build="0.8.11"] .theme-choice b,
html[lang="en"] body[data-build="0.8.11"] .theme-choice small {
  min-width: 0;
  overflow-wrap: anywhere;
}
html[lang="en"] body[data-build="0.8.11"] .language-choice b,
html[lang="en"] body[data-build="0.8.11"] .theme-choice b {
  font-size: clamp(13px, .82vw, 16px);
}
html[lang="en"] body[data-build="0.8.11"] .language-choice small,
html[lang="en"] body[data-build="0.8.11"] .theme-choice small {
  font-size: clamp(11px, .67vw, 13px);
  line-height: 1.35;
}
html[lang="en"] body[data-build="0.8.11"] .staff-management-header,
html[lang="en"] body[data-build="0.8.11"] .staff-user-card,
html[lang="en"] body[data-build="0.8.11"] .staff-form-grid,
html[lang="en"] body[data-build="0.8.11"] .staff-permissions {
  min-width: 0;
}

html[lang="en"] body[data-build="0.8.11"] .details-header h3,
html[lang="en"] body[data-build="0.8.11"] .details-profile h3 {
  font-size: clamp(17px, 1vw, 21px);
  line-height: 1.15;
}
html[lang="en"] body[data-build="0.8.11"] .details-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, .95fr);
  align-items: start;
  gap: 10px;
}
html[lang="en"] body[data-build="0.8.11"] .details-list dt,
html[lang="en"] body[data-build="0.8.11"] .details-list dd {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: clamp(11px, .68vw, 13px);
  line-height: 1.35;
}
html[lang="en"] body[data-build="0.8.11"] .details-list dd {
  text-align: right;
}
html[lang="en"] body[data-build="0.8.11"] .details-tip {
  font-size: clamp(11px, .66vw, 13px);
  line-height: 1.55;
}
html[lang="en"] body[data-build="0.8.11"] .ai-toggle-button {
  min-width: max-content;
  padding-inline: clamp(8px, .65vw, 11px);
}
html[lang="en"] body[data-build="0.8.11"] .ai-toggle-button b {
  white-space: nowrap;
  font-size: clamp(11px, .7vw, 13px);
}

@container (max-width: 260px) {
  html[lang="en"] body[data-build="0.8.11"] .nav button {
    gap: 8px;
    padding-inline: 9px;
    font-size: 12px;
  }
}

@media (max-width: 1280px) and (min-width: 721px) {
  html[lang="en"] body[data-build="0.8.11"] .settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  html[lang="en"] body[data-build="0.8.11"] #language-settings,
  html[lang="en"] body[data-build="0.8.11"] #appearance-settings,
  html[lang="en"] body[data-build="0.8.11"] #settings-form,
  html[lang="en"] body[data-build="0.8.11"] #staff-management,
  html[lang="en"] body[data-build="0.8.11"] #password-form {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  html[lang="en"] body[data-build="0.8.11"] {
    font-size: 14px;
  }
  html[lang="en"] body[data-build="0.8.11"] .content-view {
    padding-inline: 13px;
  }
  html[lang="en"] body[data-build="0.8.11"] .settings-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  html[lang="en"] body[data-build="0.8.11"] #language-settings,
  html[lang="en"] body[data-build="0.8.11"] #appearance-settings,
  html[lang="en"] body[data-build="0.8.11"] #settings-form,
  html[lang="en"] body[data-build="0.8.11"] #staff-management,
  html[lang="en"] body[data-build="0.8.11"] #password-form {
    grid-column: 1;
  }
  html[lang="en"] body[data-build="0.8.11"] .settings-layout > .settings-card {
    padding: 15px;
  }
  html[lang="en"] body[data-build="0.8.11"] .language-choice-grid,
  html[lang="en"] body[data-build="0.8.11"] .theme-mode-control {
    grid-template-columns: minmax(0, 1fr);
  }
  html[lang="en"] body[data-build="0.8.11"] .ai-toggle-button {
    min-width: 51px;
  }
  html[lang="en"] body[data-build="0.8.11"] .ai-toggle-button b {
    font-size: 10px;
    white-space: normal;
  }
}

/* v0.8.12 — owner-managed, token-free payment confirmation sentences */
.payment-trigger-card {
  display: grid;
  gap: 17px;
  width: min(100%, 1120px);
  margin: 0 0 20px;
  padding: clamp(18px, 2vw, 24px);
}
.payment-trigger-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.payment-trigger-heading h3 { margin: 2px 0 7px; font-size: clamp(18px, 1.45vw, 22px); }
.payment-trigger-heading p { margin: 0; max-width: 760px; line-height: 1.55; }
.payment-trigger-no-ai {
  flex: 0 0 auto;
  border: 1px solid rgba(52, 211, 153, .42);
  border-radius: 999px;
  background: rgba(16, 185, 129, .12);
  color: #6ee7b7;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.payment-trigger-switch {
  width: fit-content;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
  font-weight: 760;
}
.payment-trigger-editor-label { display: grid; gap: 8px; font-weight: 760; }
#payment-trigger-phrases {
  min-height: 190px;
  resize: vertical;
  font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.payment-trigger-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.payment-trigger-toolbar .row { margin-left: auto; flex-wrap: wrap; }
.payment-trigger-status { display: grid; gap: 3px; min-width: 220px; }
.payment-trigger-status strong { font-size: 13px; }
.payment-trigger-status span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.payment-trigger-owner-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, .42);
  border-radius: 10px;
  background: rgba(245, 158, 11, .10);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}
#payment-trigger-phrases[readonly] { cursor: default; opacity: .82; }
.payment-trigger-safety {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 92%, #f59e0b 8%);
  padding: 12px 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.payment-trigger-safety span::before { content: "✓"; margin-right: 7px; color: #34d399; font-weight: 900; }
.workflow-editor-grid { width: min(100%, 1120px); }
html[data-theme="light"] .payment-trigger-no-ai { color: #027a48; background: #ecfdf3; border-color: #abefc6; }
html[lang="en"] .payment-trigger-heading h3 { font-size: clamp(18px, 1.35vw, 21px); }
html[lang="en"] .payment-trigger-card,
html[lang="en"] .workflow-editor-grid { width: min(100%, 1180px); }
@media (max-width: 760px) {
  .payment-trigger-heading { display: grid; }
  .payment-trigger-no-ai { justify-self: start; }
  .payment-trigger-toolbar { align-items: stretch; }
  .payment-trigger-toolbar .row { width: 100%; margin-left: 0; }
  .payment-trigger-toolbar .button { flex: 1 1 160px; }
  .payment-trigger-safety { grid-template-columns: 1fr; }
}
/* TD_STABLE_CHAT_MEDIA_VIEWER_V1_START */
body[data-build="0.8.11"] .media-document {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

html.file-viewer-open,
html.file-viewer-open body {
  overflow: hidden !important;
}

body[data-build="0.8.11"] .file-preview-dialog.media-overlay-open {
  position: fixed !important;
  z-index: 21000 !important;
  inset: 4dvh 4vw !important;
  width: 92vw !important;
  height: 92dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: 58px minmax(0, 1fr);
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: var(--panel, #101b2d) !important;
  color: var(--text, #f4f7fb) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
}
body[data-build="0.8.11"] .file-preview-dialog::backdrop {
  background: rgba(2, 8, 18, .82);
  backdrop-filter: blur(4px);
}
body[data-build="0.8.11"] .file-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel, #101b2d);
}
body[data-build="0.8.11"] .file-preview-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}
body[data-build="0.8.11"] .file-preview-heading strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-build="0.8.11"] .file-preview-heading small {
  color: var(--muted);
}
body[data-build="0.8.11"] .file-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
body[data-build="0.8.11"] .file-preview-actions .button {
  min-height: 36px;
  padding: 7px 14px;
  text-decoration: none;
}
body[data-build="0.8.11"] .file-preview-stage {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #0b111d;
}
body[data-build="0.8.11"] .file-preview-text {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
body[data-build="0.8.11"] .file-preview-text.hidden,
body[data-build="0.8.11"] .file-preview-unsupported.hidden {
  display: none !important;
}
body[data-build="0.8.11"] .file-preview-unsupported {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
}
body[data-build="0.8.11"] .file-preview-generic-icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #17263e;
  font-weight: 900;
  letter-spacing: .05em;
}

/* Stable keyed message reconciliation: unchanged bubbles are never destroyed/recreated. */
body[data-build="0.8.11"] #message-list > .message-row {
  transition: none !important;
}

@media (max-width: 720px) {
  body[data-build="0.8.11"] .file-preview-dialog.media-overlay-open {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    grid-template-rows: calc(56px + env(safe-area-inset-top)) minmax(0,1fr);
    border: 0 !important;
    border-radius: 0 !important;
  }
  body[data-build="0.8.11"] .file-preview-toolbar {
    padding: calc(7px + env(safe-area-inset-top)) 8px 7px 12px;
  }
  body[data-build="0.8.11"] .file-preview-actions .button {
    min-height: 38px;
    padding: 7px 12px;
  }
  body[data-build="0.8.11"] .file-preview-actions .icon-button {
    width: 38px;
    height: 38px;
  }
  body[data-build="0.8.11"] .file-preview-stage {
    padding-bottom: env(safe-area-inset-bottom);
  }
}
/* TD_STABLE_CHAT_MEDIA_VIEWER_V1_END */

/* TD_STABLE_CHAT_MEDIA_VIEWER_V2_START */
body[data-build="0.8.11"] .message-selection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
body[data-build="0.8.11"] .message-selection-actions .button {
  min-height: 34px;
  white-space: nowrap;
}

body[data-build="0.8.11"] .media-document {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: min(420px, 78vw);
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel) 88%, #315fae 12%);
}
body[data-build="0.8.11"] .media-document-info {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-width: 0;
}
body[data-build="0.8.11"] .media-document-preview-shell {
  display: block;
  width: 100%;
  height: 112px;
  min-height: 112px;
  max-height: 112px;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
body[data-build="0.8.11"] .media-document-preview-shell.preview-unavailable {
  display: none;
}
body[data-build="0.8.11"] .media-document-preview {
  display: block;
  width: 100%;
  height: auto;
  min-height: 112px;
  object-fit: cover;
  object-position: center top;
  background: #fff;
}
body[data-build="0.8.11"] .media-document.has-pdf-preview .media-document-icon {
  width: 46px;
  height: 46px;
}

body[data-build="0.8.11"] .file-preview-dialog.media-overlay-open {
  grid-template-rows: auto minmax(0, 1fr) !important;
}
body[data-build="0.8.11"] .file-preview-toolbar {
  min-height: 58px;
  box-sizing: border-box;
}
body[data-build="0.8.11"] .file-preview-actions {
  min-width: 0;
}
body[data-build="0.8.11"] .file-preview-zoom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 88%, #315fae 12%);
}
body[data-build="0.8.11"] .file-preview-zoom.hidden { display: none !important; }
body[data-build="0.8.11"] .file-preview-zoom button {
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
body[data-build="0.8.11"] .file-preview-zoom button:hover {
  background: rgba(255,255,255,.08);
}
body[data-build="0.8.11"] #file-preview-fit { min-width: 54px; font-size: 12px; }
body[data-build="0.8.11"] .file-preview-stage {
  position: relative;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
body[data-build="0.8.11"] .file-preview-pdf {
  min-width: 100%;
  min-height: 100%;
  padding: 14px;
  box-sizing: border-box;
  overflow: visible;
  background: #20252c;
}
body[data-build="0.8.11"] .file-preview-pdf.hidden { display: none !important; }
body[data-build="0.8.11"] .file-preview-pdf-pages {
  width: min(100%, 980px);
  margin: 0 auto;
  display: grid;
  gap: 14px;
  transform-origin: top center;
}
body[data-build="0.8.11"] .file-preview-pdf-page-shell {
  position: relative;
  width: 100%;
  min-height: 120px;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
body[data-build="0.8.11"] .file-preview-pdf-page {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
body[data-build="0.8.11"] .file-preview-pdf-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  box-sizing: border-box;
  color: #475569;
  background: #f8fafc;
  font-size: 12px;
  z-index: 1;
}
body[data-build="0.8.11"] .file-preview-pdf-page-shell.preview-error .file-preview-pdf-page {
  display: none;
}

@media (max-width: 720px) {
  body[data-build="0.8.11"] .message-selection-bar {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 7px;
    padding-inline: 8px;
  }
  body[data-build="0.8.11"] .message-selection-actions { gap: 5px; }
  body[data-build="0.8.11"] .message-selection-actions .button {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 11px;
  }
  body[data-build="0.8.11"] .media-document {
    width: min(420px, 82vw);
  }
  body[data-build="0.8.11"] .media-document-preview-shell {
    height: 96px;
    min-height: 96px;
    max-height: 96px;
  }
  body[data-build="0.8.11"] .media-document-preview {
    min-height: 96px;
  }
  body[data-build="0.8.11"] .file-preview-dialog.media-overlay-open {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  body[data-build="0.8.11"] .file-preview-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    min-height: calc(54px + env(safe-area-inset-top));
    padding: calc(6px + env(safe-area-inset-top)) 7px 6px 10px;
  }
  body[data-build="0.8.11"] .file-preview-heading strong { font-size: 13px; }
  body[data-build="0.8.11"] .file-preview-heading small { font-size: 10px; }
  body[data-build="0.8.11"] .file-preview-actions {
    gap: 5px;
  }
  body[data-build="0.8.11"] .file-preview-actions .button {
    min-height: 34px;
    padding: 5px 9px;
    font-size: 11px;
  }
  body[data-build="0.8.11"] .file-preview-actions .icon-button {
    width: 34px;
    height: 34px;
  }
  body[data-build="0.8.11"] .file-preview-zoom {
    position: fixed;
    left: 50%;
    bottom: calc(10px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 21020;
    padding: 4px;
    border-color: #526783;
    background: rgba(13, 24, 40, .94);
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
  }
  body[data-build="0.8.11"] .file-preview-zoom button {
    height: 38px;
    min-width: 42px;
    font-size: 18px;
  }
  body[data-build="0.8.11"] #file-preview-fit {
    min-width: 60px;
    font-size: 12px;
  }
  body[data-build="0.8.11"] .file-preview-stage {
    padding-bottom: 0 !important;
    background: #1c222a;
  }
  body[data-build="0.8.11"] .file-preview-pdf {
    padding: 7px 7px calc(66px + env(safe-area-inset-bottom));
  }
  body[data-build="0.8.11"] .file-preview-pdf-pages {
    width: 100%;
    gap: 8px;
  }
  body[data-build="0.8.11"] .file-preview-pdf-page-shell {
    min-height: 90px;
    border-radius: 3px;
  }
}
/* TD_STABLE_CHAT_MEDIA_VIEWER_V2_END */

/* TD_COMPLETE_DATA_EXPORT_V2_2_START */
body[data-build="0.8.11"] .data-export-settings {
  display: grid;
  gap: 14px;
}
body[data-build="0.8.11"] .data-export-settings.hidden {
  display: none !important;
}
body[data-build="0.8.11"] .data-export-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
body[data-build="0.8.11"] .data-export-heading h3,
body[data-build="0.8.11"] .data-export-heading p {
  margin-top: 0;
}
body[data-build="0.8.11"] .data-export-heading .muted {
  margin-bottom: 0;
  max-width: 720px;
}
body[data-build="0.8.11"] .data-export-owner-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #f59e0b 48%, var(--border));
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
body[data-build="0.8.11"] .data-export-content-summary {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 82%, #315fae 18%);
}
body[data-build="0.8.11"] .data-export-content-summary strong {
  font-size: 14px;
}
body[data-build="0.8.11"] .data-export-content-summary span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
body[data-build="0.8.11"] .data-export-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
body[data-build="0.8.11"] .data-export-actions .button {
  min-height: 40px;
}
body[data-build="0.8.11"] .data-export-status {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
body[data-build="0.8.11"] .data-export-progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 72%, transparent);
}
body[data-build="0.8.11"] .data-export-progress.hidden {
  display: none !important;
}
body[data-build="0.8.11"] .data-export-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  color: #3b82f6;
  transition: width .25s ease;
}
@media (max-width: 720px) {
  body[data-build="0.8.11"] .data-export-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  body[data-build="0.8.11"] .data-export-owner-badge {
    align-self: start;
  }
  body[data-build="0.8.11"] .data-export-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  body[data-build="0.8.11"] .data-export-actions .button {
    width: 100%;
  }
}
/* TD_COMPLETE_DATA_EXPORT_V2_2_END */

/* TD_UI_UX_REFINEMENT_V2_3_START
   Production-safe refinement: faster perceived navigation, optional customer panel,
   readable chat density, knowledge overview/search, settings anchors and safer rule replacement. */

/* Immediate route feedback without full-screen skeleton flashes. */
body[data-ux-release="2.3"] .page-progress {
  position: fixed;
  z-index: 60000;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .12s ease;
}
body[data-ux-release="2.3"] .page-progress i {
  display: block;
  width: 32%;
  height: 100%;
  border-radius: 0 999px 999px 0;
  background: var(--primary);
  transform: translateX(-110%);
}
body[data-ux-release="2.3"] .page-progress.active { opacity: 1; }
body[data-ux-release="2.3"] .page-progress.active i { animation: td-v23-progress 1s cubic-bezier(.4,0,.2,1) infinite; }
body[data-ux-release="2.3"] .page-progress.complete i { width: 100%; transform: translateX(0); animation: none; transition: width .12s ease, transform .12s ease; }
body[data-ux-release="2.3"] .page-progress.cached { opacity: .72; }
@keyframes td-v23-progress {
  0% { transform: translateX(-115%); width: 28%; }
  55% { width: 52%; }
  100% { transform: translateX(330%); width: 32%; }
}

/* Consistent navigation icon system. */
body[data-ux-release="2.3"] .nav button .nav-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  font-size: 0 !important;
}
body[data-ux-release="2.3"] .nav button .nav-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-ux-release="2.3"] .app.sidebar-collapsed .nav button .nav-icon,
body[data-ux-release="2.3"] .app:not(.sidebar-collapsed) .nav button .nav-icon { font-size: 0 !important; }

/* Clear keyboard focus throughout the production UI. */
body[data-ux-release="2.3"] :is(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 58%, white 12%);
  outline-offset: 2px;
}
body[data-ux-release="2.3"] .nav button[aria-current="page"] { position: relative; }

/* Customer details can be collapsed to give the chat more room. */
body[data-ux-release="2.3"] .customer-details-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-ux-release="2.3"] .customer-details-toggle.active {
  border-color: color-mix(in srgb, var(--primary) 54%, var(--border));
  background: color-mix(in srgb, var(--primary) 13%, transparent);
  color: #8db7ff;
}
@media (min-width: 1181px) {
  body[data-ux-release="2.3"] .inbox-view.customer-details-collapsed {
    grid-template-columns: var(--td-conversation-width) 7px minmax(360px, 1fr) 0 0;
  }
  body[data-ux-release="2.3"] .inbox-view.customer-details-collapsed .customer-panel-resizer,
  body[data-ux-release="2.3"] .inbox-view.customer-details-collapsed .customer-details {
    display: none !important;
  }
}
@media (max-width: 1180px) {
  body[data-ux-release="2.3"] .customer-details-toggle { display: none !important; }
}

/* Slightly larger desktop chat copy and status text without making bubbles bulky. */
@media (min-width: 721px) {
  body[data-ux-release="2.3"] .bubble {
    font-size: 14.2px;
    line-height: 1.42;
  }
  body[data-ux-release="2.3"] .bubble small {
    font-size: 9.5px;
    line-height: 1.25;
    color: color-mix(in srgb, currentColor 65%, #9fb2cf);
  }
  body[data-ux-release="2.3"] .conversation-item p { font-size: 12.5px; }
  body[data-ux-release="2.3"] .conversation-item time { font-size: 10.5px; }
}

/* Failed media remains contained and visually explicit after automatic retries. */
body[data-ux-release="2.3"] img.media-load-failed {
  min-width: 86px;
  min-height: 72px;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, #8aa2c3);
  background: color-mix(in srgb, var(--panel) 88%, #1d3556 12%);
}

/* Knowledge page: useful even with one or zero articles. */
body[data-ux-release="2.3"] .knowledge-dashboard {
  width: min(1180px, 100%);
  display: grid;
  gap: 12px;
  margin: -6px 0 18px;
}
body[data-ux-release="2.3"] .knowledge-stats {
  display: grid;
  grid-template-columns: minmax(120px, .45fr) minmax(120px, .45fr) minmax(220px, 1fr);
  gap: 10px;
}
body[data-ux-release="2.3"] .knowledge-stats article {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 94%, var(--primary) 6%);
}
body[data-ux-release="2.3"] .knowledge-stats span { color: var(--muted); font-size: 11px; }
body[data-ux-release="2.3"] .knowledge-stats strong { font-size: 18px; line-height: 1.2; }
body[data-ux-release="2.3"] .knowledge-stats .knowledge-latest strong { font-size: 14px; }
body[data-ux-release="2.3"] .knowledge-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px);
  gap: 10px;
  align-items: end;
}
body[data-ux-release="2.3"] .knowledge-search {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel);
}
body[data-ux-release="2.3"] .knowledge-search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
}
body[data-ux-release="2.3"] .knowledge-search input {
  width: 100%;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body[data-ux-release="2.3"] .knowledge-search input:focus { outline: 0; }
body[data-ux-release="2.3"] .knowledge-filter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; color: var(--muted); font-size: 12px; }
body[data-ux-release="2.3"] .knowledge-filter select { min-width: 0; }
body[data-ux-release="2.3"] .knowledge-layout:not(:has(#knowledge-import-form:not(.hidden), #article-form:not(.hidden))) {
  grid-template-columns: minmax(0, 1fr);
}
body[data-ux-release="2.3"] .knowledge-layout:not(:has(#knowledge-import-form:not(.hidden), #article-form:not(.hidden))) #article-list {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
body[data-ux-release="2.3"] .knowledge-card {
  min-height: 154px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
body[data-ux-release="2.3"] .knowledge-card:hover { transform: translateY(-1px); }
body[data-ux-release="2.3"] .knowledge-card-preview { flex: 1 1 auto; margin: 0; }
body[data-ux-release="2.3"] .knowledge-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
body[data-ux-release="2.3"] .knowledge-card-tags span {
  max-width: 150px;
  overflow: hidden;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body[data-ux-release="2.3"] .knowledge-card-meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; color: var(--muted); font-size: 10.5px; }
body[data-ux-release="2.3"] .knowledge-card-meta .badge.disabled { opacity: .7; }
body[data-ux-release="2.3"] .knowledge-empty {
  min-height: 280px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 34px;
  text-align: center;
}
body[data-ux-release="2.3"] .knowledge-empty.compact { min-height: 180px; }
body[data-ux-release="2.3"] .knowledge-empty strong { font-size: 18px; }
body[data-ux-release="2.3"] .knowledge-empty p { max-width: 520px; margin: 0; color: var(--muted); line-height: 1.65; }
body[data-ux-release="2.3"] .knowledge-empty-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: #8fb8ff;
  font-size: 28px;
}

/* Settings directory: sticky, compact and permission-aware. */
body[data-ux-release="2.3"] .settings-anchor-nav {
  position: sticky;
  z-index: 12;
  top: -12px;
  width: min(1120px, 100%);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: -8px 0 16px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}
body[data-ux-release="2.3"] .settings-anchor-nav::-webkit-scrollbar { display: none; }
body[data-ux-release="2.3"] .settings-anchor-nav button {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
}
body[data-ux-release="2.3"] .settings-anchor-nav button:hover,
body[data-ux-release="2.3"] .settings-anchor-nav button.active {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  background: color-mix(in srgb, var(--primary) 11%, var(--panel));
  color: var(--text);
}
body[data-ux-release="2.3"] .settings-layout > :is(section, form) { scroll-margin-top: 72px; }

/* Safe action hierarchy. */
body[data-ux-release="2.3"] .button.warning-outline {
  border-color: color-mix(in srgb, #f59e0b 52%, var(--border));
  background: color-mix(in srgb, #f59e0b 8%, transparent);
  color: #f6bd59;
}
body[data-ux-release="2.3"] .button.warning {
  border-color: #d99009;
  background: #d99009;
  color: #17120a;
}
body[data-ux-release="2.3"] .button.warning-outline:hover,
body[data-ux-release="2.3"] .button.warning:hover { filter: brightness(1.08); }
body[data-ux-release="2.3"] .ai-rules-preview-dialog {
  width: min(760px, calc(100vw - 30px));
  max-height: min(84dvh, 760px);
  padding: 0;
  overflow: hidden;
}
body[data-ux-release="2.3"] .ai-rules-preview-dialog .dialog-header { padding: 18px 20px 14px; }
body[data-ux-release="2.3"] .ai-rules-preview-summary {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  padding: 0 20px 12px;
}
body[data-ux-release="2.3"] .ai-rules-preview-summary span {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--muted);
  font-size: 11px;
}
body[data-ux-release="2.3"] .ai-rules-preview-summary b { margin-left: 5px; color: var(--text); }
body[data-ux-release="2.3"] .ai-rules-preview-text {
  max-height: 52dvh;
  overflow: auto;
  margin: 0 20px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 88%, #050b15 12%);
  color: var(--text);
  font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
body[data-ux-release="2.3"] .ai-rules-preview-actions { padding: 16px 20px 20px; }

/* Utility for screen-reader-only labels. */
body[data-ux-release="2.3"] .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html[data-theme="light"] body[data-ux-release="2.3"] .settings-anchor-nav {
  background: color-mix(in srgb, #f6f8fb 92%, transparent);
}
html[data-theme="light"] body[data-ux-release="2.3"] .button.warning-outline { color: #9a6200; }
html[data-theme="light"] body[data-ux-release="2.3"] .knowledge-empty-icon { color: #245fc7; }

@media (max-width: 720px) {
  body[data-ux-release="2.3"] .knowledge-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-ux-release="2.3"] .knowledge-stats .knowledge-latest { grid-column: 1 / -1; }
  body[data-ux-release="2.3"] .knowledge-toolbar { grid-template-columns: 1fr; }
  body[data-ux-release="2.3"] .knowledge-layout,
  body[data-ux-release="2.3"] .knowledge-layout:not(:has(#knowledge-import-form:not(.hidden), #article-form:not(.hidden))) { grid-template-columns: 1fr; }
  body[data-ux-release="2.3"] .knowledge-layout:not(:has(#knowledge-import-form:not(.hidden), #article-form:not(.hidden))) #article-list { grid-template-columns: 1fr; }
  body[data-ux-release="2.3"] .settings-anchor-nav { top: 0; margin-top: -4px; padding: 7px; border-radius: 11px; }
  body[data-ux-release="2.3"] .ai-rules-preview-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 20px); }
  body[data-ux-release="2.3"] .ai-rules-preview-text { max-height: 58dvh; margin-inline: 12px; }
  body[data-ux-release="2.3"] .ai-rules-preview-dialog .dialog-header,
  body[data-ux-release="2.3"] .ai-rules-preview-summary,
  body[data-ux-release="2.3"] .ai-rules-preview-actions { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ux-release="2.3"] *,
  body[data-ux-release="2.3"] *::before,
  body[data-ux-release="2.3"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* TD_UI_UX_REFINEMENT_V2_3_END */


/* TD_V2_3_2_NO_DIALOG_MEDIA_START */
body[data-build="0.8.11"] .media-overlay:not(.media-overlay-open) {
  display: none !important;
}
body[data-build="0.8.11"] .media-overlay.media-overlay-open {
  visibility: visible !important;
  pointer-events: auto !important;
}
body.media-overlay-active { overscroll-behavior: none; }
/* Media preview deliberately avoids native dialog opening and the open attribute.
   This prevents iOS/WebKit close-navigation entries from accumulating in Back navigation. */
/* TD_V2_3_2_NO_DIALOG_MEDIA_END */


/* TD_V2_3_3_MOBILE_DOC_CONTROLS_START */
body[data-build="0.8.11"] .file-preview-text {
  width: min(100%, 980px);
  min-height: 100%;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
  border: 0;
  background: #0c1524;
  color: #e8eef8;
  font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-overflow-scrolling: touch;
}
body[data-build="0.8.11"] .ai-toggle-button.pending { opacity: .72; cursor: progress; }
@media (max-width: 720px) {
  body[data-build="0.8.11"] .file-preview-text { padding: 14px; font-size: 13px; }
  body[data-build="0.8.11"] .ai-toggle-button { touch-action: manipulation; }
}
/* TD_V2_3_3_MOBILE_DOC_CONTROLS_END */

/* v2.3.4 — WhatsApp-style incremental history rendering. */
body[data-build="0.8.11"] .message-history-loader {
  display: block;
  width: max-content;
  max-width: min(92%, 420px);
  margin: 4px auto 12px;
  padding: 7px 13px;
  border: 1px solid rgba(120, 155, 220, .28);
  border-radius: 999px;
  background: rgba(19, 31, 51, .88);
  color: #aebfda;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
body[data-build="0.8.11"] .message-history-loader:hover,
body[data-build="0.8.11"] .message-history-loader:focus-visible { background: rgba(35, 57, 91, .94); color: #eef4ff; }
html[data-theme="light"] body[data-build="0.8.11"] .message-history-loader { background: rgba(255,255,255,.94); color: #4f6075; border-color: #d4dce7; }


/* TD_EYE_CARE_THEMES_V2_3_5_POLISH_START */
html[data-theme="sage-mist"] {
  --bg: #08110d;
  --panel: rgba(14, 29, 22, .78);
  --panel-2: rgba(18, 36, 28, .88);
  --border: rgba(132, 180, 148, .20);
  --text: #eef7ef;
  --muted: #b6cab8;
  --primary: #4fcb86;
  --primary-2: #97e2b2;
  --green: #6fe09a;
  --shadow: 0 24px 60px rgba(2, 10, 6, .42);
}
html[data-theme="sage-mist"] body,
html[data-theme="sage-mist"] #app-view,
html[data-theme="sage-mist"] .app,
html[data-theme="sage-mist"] .content-view {
  background:
    radial-gradient(circle at 14% 12%, rgba(65, 121, 92, .30), transparent 26%),
    radial-gradient(circle at 84% 14%, rgba(93, 157, 116, .14), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(18, 52, 35, .38), transparent 40%),
    linear-gradient(180deg, #09140f 0%, #0c1712 38%, #0a130f 100%) !important;
  color: var(--text);
}
html[data-theme="sage-mist"] .sidebar {
  background:
    linear-gradient(180deg, rgba(9, 28, 21, .96) 0%, rgba(12, 36, 27, .97) 56%, rgba(10, 25, 19, .98) 100%),
    radial-gradient(circle at 10% 10%, rgba(108, 167, 126, .16), transparent 30%);
  border-right-color: rgba(137, 185, 151, .14);
}
html[data-theme="sage-mist"] .conversation-panel,
html[data-theme="sage-mist"] .chat-panel,
html[data-theme="sage-mist"] .customer-details,
html[data-theme="sage-mist"] .settings-card,
html[data-theme="sage-mist"] .editor-card,
html[data-theme="sage-mist"] .card,
html[data-theme="sage-mist"] .connection-card,
html[data-theme="sage-mist"] .qr-card,
html[data-theme="sage-mist"] .profile-card,
html[data-theme="sage-mist"] .staff-user-card,
html[data-theme="sage-mist"] .channel-summary-card,
html[data-theme="sage-mist"] .channel-catalog-card,
html[data-theme="sage-mist"] .channel-connections-card,
html[data-theme="sage-mist"] .channel-connection-editor,
html[data-theme="sage-mist"] .channel-platform-card,
html[data-theme="sage-mist"] .ai-usage-card,
html[data-theme="sage-mist"] .quick-reply-card,
html[data-theme="sage-mist"] .catalogue-card,
html[data-theme="sage-mist"] .special-message-card,
html[data-theme="sage-mist"] .attachment-preview,
html[data-theme="sage-mist"] .reply-preview,
html[data-theme="sage-mist"] .staff-user-form,
html[data-theme="sage-mist"] .staff-permissions,
html[data-theme="sage-mist"] .details-profile,
html[data-theme="sage-mist"] .details-list,
html[data-theme="sage-mist"] .details-list div,
html[data-theme="sage-mist"] .profile-section {
  background: linear-gradient(180deg, rgba(15, 31, 24, .90) 0%, rgba(11, 24, 18, .88) 100%) !important;
  border-color: rgba(130, 179, 144, .18) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  backdrop-filter: blur(12px);
}
html[data-theme="sage-mist"] .chat-panel,
html[data-theme="sage-mist"] .message-list {
  background:
    radial-gradient(circle at 18% 12%, rgba(70, 132, 96, .16), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(86, 145, 110, .10), transparent 20%),
    linear-gradient(180deg, rgba(9, 19, 14, .94) 0%, rgba(8, 16, 13, .97) 100%) !important;
}
html[data-theme="sage-mist"] .panel-header,
html[data-theme="sage-mist"] .chat-header,
html[data-theme="sage-mist"] .details-header,
html[data-theme="sage-mist"] .inbox-tabs,
html[data-theme="sage-mist"] .filters,
html[data-theme="sage-mist"] .inbox-search-row,
html[data-theme="sage-mist"] .channel-connection-page-header,
html[data-theme="sage-mist"] .settings-tabs {
  background: rgba(19, 37, 28, .76) !important;
  border-color: rgba(136, 185, 151, .18) !important;
  backdrop-filter: blur(10px);
}
html[data-theme="sage-mist"] .conversation-item {
  background: rgba(255, 255, 255, .02);
  border-color: rgba(130, 179, 145, .16) !important;
}
html[data-theme="sage-mist"] .conversation-item:hover,
html[data-theme="sage-mist"] .conversation-item.active {
  background: linear-gradient(180deg, rgba(47, 87, 64, .44) 0%, rgba(29, 54, 40, .44) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(126, 206, 154, .14);
}
html[data-theme="sage-mist"] h1,
html[data-theme="sage-mist"] h2,
html[data-theme="sage-mist"] h3,
html[data-theme="sage-mist"] h4,
html[data-theme="sage-mist"] strong,
html[data-theme="sage-mist"] .content-header,
html[data-theme="sage-mist"] .sidebar-brand,
html[data-theme="sage-mist"] .profile-name,
html[data-theme="sage-mist"] .contact-summary h4 { color: #f4fbf5 !important; }
html[data-theme="sage-mist"] p,
html[data-theme="sage-mist"] label,
html[data-theme="sage-mist"] small,
html[data-theme="sage-mist"] .muted,
html[data-theme="sage-mist"] .content-header p,
html[data-theme="sage-mist"] .details-list dd,
html[data-theme="sage-mist"] .staff-user-details span,
html[data-theme="sage-mist"] .conversation-item p,
html[data-theme="sage-mist"] .conversation-item time,
html[data-theme="sage-mist"] .contact-summary p { color: #b8cdbd !important; }
html[data-theme="sage-mist"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="sage-mist"] textarea,
html[data-theme="sage-mist"] select {
  background: rgba(5, 18, 13, .92) !important;
  color: #eff8f0 !important;
  border-color: rgba(128, 182, 145, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
html[data-theme="sage-mist"] input::placeholder,
html[data-theme="sage-mist"] textarea::placeholder { color: #8fa894 !important; }
html[data-theme="sage-mist"] .button.primary,
html[data-theme="sage-mist"] .channel-oauth-main-button,
html[data-theme="sage-mist"] .send-button {
  background: linear-gradient(180deg, #48c47f 0%, #2c9d60 100%) !important;
  color: #f6fff8 !important;
  border-color: rgba(164, 232, 188, .24) !important;
  box-shadow: 0 8px 20px rgba(44, 157, 96, .22);
}
html[data-theme="sage-mist"] .button.secondary,
html[data-theme="sage-mist"] .button.ghost,
html[data-theme="sage-mist"] .tool-button,
html[data-theme="sage-mist"] .icon-button,
html[data-theme="sage-mist"] .ai-icon-button,
html[data-theme="sage-mist"] .mobile-chat-back,
html[data-theme="sage-mist"] .ai-toggle-button {
  background: rgba(18, 36, 27, .82) !important;
  color: #eaf7ed !important;
  border-color: rgba(130, 179, 145, .18) !important;
}
html[data-theme="sage-mist"] .nav button.active {
  background: linear-gradient(180deg, rgba(239, 250, 242, .96) 0%, rgba(220, 240, 225, .93) 100%) !important;
  color: #1f5a3d !important;
  box-shadow: 0 12px 28px rgba(6, 22, 13, .28);
}
html[data-theme="sage-mist"] .nav button.active span { color: #1f5a3d !important; }
html[data-theme="sage-mist"] .bubble {
  background: linear-gradient(180deg, rgba(20, 39, 29, .94) 0%, rgba(15, 29, 23, .95) 100%) !important;
  color: #edf8ef !important;
  border-color: rgba(127, 177, 142, .22) !important;
}
html[data-theme="sage-mist"] .outbound .bubble {
  background: linear-gradient(180deg, rgba(48, 115, 78, .95) 0%, rgba(36, 93, 62, .97) 100%) !important;
  border-color: rgba(152, 223, 178, .24) !important;
}
html[data-theme="sage-mist"] .bubble small,
html[data-theme="sage-mist"] .meta-text,
html[data-theme="sage-mist"] .message-meta { color: #c0d5c5 !important; }
html[data-theme="sage-mist"] .message-history-loader {
  background: rgba(16, 34, 25, .90) !important;
  color: #dceee0 !important;
  border-color: rgba(129, 179, 144, .20) !important;
}
html[data-theme="sage-mist"] .toast,
html[data-theme="sage-mist"] .app-dialog,
html[data-theme="sage-mist"] .image-lightbox,
html[data-theme="sage-mist"] .incoming-call-dialog,
html[data-theme="sage-mist"] .send-tools-menu,
html[data-theme="sage-mist"] .emoji-panel,
html[data-theme="sage-mist"] .message-actions-menu,
html[data-theme="sage-mist"] .reaction-picker,
html[data-theme="sage-mist"] .translation-preview-panel,
html[data-theme="sage-mist"] .compose-translation-preview {
  background: rgba(13, 27, 21, .96) !important;
  color: #eef6f0 !important;
  border-color: rgba(130, 179, 145, .20) !important;
}
html[data-theme="sage-mist"] .monitor-banner,
html[data-theme="sage-mist"] .details-tip,
html[data-theme="sage-mist"] .settings-help,
html[data-theme="sage-mist"] .invoice-bridge-note {
  background: rgba(83, 140, 106, .14) !important;
  color: #dceee1 !important;
  border-color: rgba(130, 185, 148, .24) !important;
}
html[data-theme="sage-mist"] .theme-choice { background: rgba(16, 31, 24, .82) !important; }
html[data-theme="sage-mist"] .theme-choice.active {
  background: rgba(26, 49, 37, .94) !important;
  border-color: rgba(121, 196, 149, .44) !important;
  box-shadow: 0 0 0 1px rgba(121,196,149,.18);
}

html[data-theme="forest-dawn"] {
  --bg: #eef3ee;
  --panel: rgba(255, 255, 251, .78);
  --panel-2: rgba(248, 250, 246, .90);
  --border: rgba(159, 182, 163, .34);
  --text: #22362a;
  --muted: #627467;
  --primary: #408f62;
  --primary-2: #2d704c;
  --green: #4da36e;
  --shadow: 0 20px 46px rgba(83, 106, 87, .14);
}
html[data-theme="forest-dawn"] body,
html[data-theme="forest-dawn"] #app-view,
html[data-theme="forest-dawn"] .app,
html[data-theme="forest-dawn"] .content-view {
  background:
    radial-gradient(circle at 15% 10%, rgba(176, 200, 177, .34), transparent 22%),
    radial-gradient(circle at 82% 8%, rgba(206, 219, 205, .26), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(221, 229, 220, .66), transparent 44%),
    linear-gradient(180deg, #eef3ee 0%, #e8efea 34%, #edf2ed 100%) !important;
  color: var(--text);
}
html[data-theme="forest-dawn"] .sidebar {
  background: linear-gradient(180deg, rgba(225, 234, 225, .96) 0%, rgba(214, 225, 214, .98) 100%);
  border-right-color: rgba(154, 177, 159, .22);
}
html[data-theme="forest-dawn"] .conversation-panel,
html[data-theme="forest-dawn"] .chat-panel,
html[data-theme="forest-dawn"] .customer-details,
html[data-theme="forest-dawn"] .settings-card,
html[data-theme="forest-dawn"] .editor-card,
html[data-theme="forest-dawn"] .card,
html[data-theme="forest-dawn"] .connection-card,
html[data-theme="forest-dawn"] .qr-card,
html[data-theme="forest-dawn"] .profile-card,
html[data-theme="forest-dawn"] .staff-user-card,
html[data-theme="forest-dawn"] .channel-summary-card,
html[data-theme="forest-dawn"] .channel-catalog-card,
html[data-theme="forest-dawn"] .channel-connections-card,
html[data-theme="forest-dawn"] .channel-connection-editor,
html[data-theme="forest-dawn"] .channel-platform-card,
html[data-theme="forest-dawn"] .ai-usage-card,
html[data-theme="forest-dawn"] .quick-reply-card,
html[data-theme="forest-dawn"] .catalogue-card,
html[data-theme="forest-dawn"] .special-message-card,
html[data-theme="forest-dawn"] .attachment-preview,
html[data-theme="forest-dawn"] .reply-preview,
html[data-theme="forest-dawn"] .staff-user-form,
html[data-theme="forest-dawn"] .staff-permissions,
html[data-theme="forest-dawn"] .details-profile,
html[data-theme="forest-dawn"] .details-list,
html[data-theme="forest-dawn"] .details-list div,
html[data-theme="forest-dawn"] .profile-section {
  background: linear-gradient(180deg, rgba(255,255,252,.84) 0%, rgba(250, 252, 248, .90) 100%) !important;
  border-color: rgba(161, 182, 166, .30) !important;
  box-shadow: 0 16px 34px rgba(103, 124, 107, .10);
  backdrop-filter: blur(10px);
}
html[data-theme="forest-dawn"] .chat-panel,
html[data-theme="forest-dawn"] .message-list {
  background:
    radial-gradient(circle at 20% 12%, rgba(181, 205, 182, .30), transparent 22%),
    radial-gradient(circle at 80% 18%, rgba(203, 219, 203, .20), transparent 18%),
    linear-gradient(180deg, rgba(244, 248, 243, .96) 0%, rgba(240, 245, 239, .98) 100%) !important;
}
html[data-theme="forest-dawn"] .panel-header,
html[data-theme="forest-dawn"] .chat-header,
html[data-theme="forest-dawn"] .details-header,
html[data-theme="forest-dawn"] .inbox-tabs,
html[data-theme="forest-dawn"] .filters,
html[data-theme="forest-dawn"] .inbox-search-row,
html[data-theme="forest-dawn"] .channel-connection-page-header,
html[data-theme="forest-dawn"] .settings-tabs {
  background: rgba(252, 253, 250, .80) !important;
  border-color: rgba(163, 183, 167, .24) !important;
  backdrop-filter: blur(8px);
}
html[data-theme="forest-dawn"] .conversation-item {
  background: rgba(255,255,255,.42);
  border-color: rgba(170, 187, 173, .36) !important;
}
html[data-theme="forest-dawn"] .conversation-item:hover,
html[data-theme="forest-dawn"] .conversation-item.active {
  background: linear-gradient(180deg, rgba(233, 243, 233, .94) 0%, rgba(228, 240, 229, .96) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(83, 140, 106, .10);
}
html[data-theme="forest-dawn"] h1,
html[data-theme="forest-dawn"] h2,
html[data-theme="forest-dawn"] h3,
html[data-theme="forest-dawn"] h4,
html[data-theme="forest-dawn"] strong,
html[data-theme="forest-dawn"] .content-header,
html[data-theme="forest-dawn"] .sidebar-brand,
html[data-theme="forest-dawn"] .profile-name,
html[data-theme="forest-dawn"] .contact-summary h4 { color: #213328 !important; }
html[data-theme="forest-dawn"] p,
html[data-theme="forest-dawn"] label,
html[data-theme="forest-dawn"] small,
html[data-theme="forest-dawn"] .muted,
html[data-theme="forest-dawn"] .content-header p,
html[data-theme="forest-dawn"] .details-list dd,
html[data-theme="forest-dawn"] .staff-user-details span,
html[data-theme="forest-dawn"] .conversation-item p,
html[data-theme="forest-dawn"] .conversation-item time,
html[data-theme="forest-dawn"] .contact-summary p { color: #627566 !important; }
html[data-theme="forest-dawn"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="forest-dawn"] textarea,
html[data-theme="forest-dawn"] select {
  background: rgba(252, 252, 248, .96) !important;
  color: #203126 !important;
  border-color: rgba(173, 191, 176, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
html[data-theme="forest-dawn"] input::placeholder,
html[data-theme="forest-dawn"] textarea::placeholder { color: #8a9c8d !important; }
html[data-theme="forest-dawn"] .button.primary,
html[data-theme="forest-dawn"] .channel-oauth-main-button,
html[data-theme="forest-dawn"] .send-button {
  background: linear-gradient(180deg, #4aa36d 0%, #367e55 100%) !important;
  color: #fbfffc !important;
  border-color: rgba(78, 139, 101, .18) !important;
  box-shadow: 0 8px 18px rgba(74, 163, 109, .18);
}
html[data-theme="forest-dawn"] .button.secondary,
html[data-theme="forest-dawn"] .button.ghost,
html[data-theme="forest-dawn"] .tool-button,
html[data-theme="forest-dawn"] .icon-button,
html[data-theme="forest-dawn"] .ai-icon-button,
html[data-theme="forest-dawn"] .mobile-chat-back,
html[data-theme="forest-dawn"] .ai-toggle-button {
  background: rgba(255,255,252,.92) !important;
  color: #294036 !important;
  border-color: rgba(169, 188, 173, .38) !important;
}
html[data-theme="forest-dawn"] .nav button.active {
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(245, 249, 245, .98) 100%) !important;
  color: #2b714c !important;
  box-shadow: 0 10px 24px rgba(106, 134, 112, .12);
}
html[data-theme="forest-dawn"] .nav button.active span { color: #2b714c !important; }
html[data-theme="forest-dawn"] .bubble {
  background: rgba(255,255,252,.96) !important;
  color: #24352a !important;
  border-color: rgba(175, 193, 178, .46) !important;
}
html[data-theme="forest-dawn"] .outbound .bubble {
  background: linear-gradient(180deg, rgba(230, 244, 233, .98) 0%, rgba(221, 240, 226, .98) 100%) !important;
  border-color: rgba(128, 177, 144, .46) !important;
  color: #21402d !important;
}
html[data-theme="forest-dawn"] .bubble small,
html[data-theme="forest-dawn"] .meta-text,
html[data-theme="forest-dawn"] .message-meta { color: #6e8172 !important; }
html[data-theme="forest-dawn"] .message-history-loader {
  background: rgba(255,255,252,.94) !important;
  color: #4d6456 !important;
  border-color: rgba(171, 188, 173, .42) !important;
}
html[data-theme="forest-dawn"] .toast,
html[data-theme="forest-dawn"] .app-dialog,
html[data-theme="forest-dawn"] .image-lightbox,
html[data-theme="forest-dawn"] .incoming-call-dialog,
html[data-theme="forest-dawn"] .send-tools-menu,
html[data-theme="forest-dawn"] .emoji-panel,
html[data-theme="forest-dawn"] .message-actions-menu,
html[data-theme="forest-dawn"] .reaction-picker,
html[data-theme="forest-dawn"] .translation-preview-panel,
html[data-theme="forest-dawn"] .compose-translation-preview {
  background: rgba(255,255,252,.98) !important;
  color: #223429 !important;
  border-color: rgba(167, 186, 171, .34) !important;
}
html[data-theme="forest-dawn"] .monitor-banner,
html[data-theme="forest-dawn"] .details-tip,
html[data-theme="forest-dawn"] .settings-help,
html[data-theme="forest-dawn"] .invoice-bridge-note {
  background: rgba(237, 244, 234, .92) !important;
  color: #476050 !important;
  border-color: rgba(168, 187, 172, .28) !important;
}
html[data-theme="forest-dawn"] .theme-choice { background: rgba(255,255,253,.84) !important; }
html[data-theme="forest-dawn"] .theme-choice.active {
  background: rgba(243, 249, 243, .96) !important;
  border-color: rgba(107, 160, 125, .44) !important;
  box-shadow: 0 0 0 1px rgba(107,160,125,.12);
}
html[data-theme="forest-dawn"] .login-page {
  background:
    radial-gradient(circle at 18% 18%, rgba(184, 203, 186, .34), transparent 22%),
    radial-gradient(circle at 82% 75%, rgba(212, 224, 212, .30), transparent 24%),
    linear-gradient(180deg, #eef3ee 0%, #e8efea 100%) !important;
}
html[data-theme="forest-dawn"] .login-card {
  background: rgba(255,255,252,.88) !important;
  border-color: rgba(162, 183, 167, .30) !important;
}
/* TD_EYE_CARE_THEMES_V2_3_5_POLISH_END */


/* TD_EYE_CARE_THEMES_V2_3_6_FIX_START */
html[data-theme="sage-mist"],
html[data-theme="forest-dawn"] {
  --eyecare-radius: 16px;
}

html[data-theme="sage-mist"] .content-header,
html[data-theme="sage-mist"] .content-header h2,
html[data-theme="sage-mist"] .content-header h3,
html[data-theme="sage-mist"] .content-header strong,
html[data-theme="sage-mist"] .ai-studio-panel-title,
html[data-theme="sage-mist"] .ai-playground-topbar,
html[data-theme="sage-mist"] .ai-usage-heading,
html[data-theme="sage-mist"] .ai-usage-heading h3 { color: #eef7f1; }
html[data-theme="sage-mist"] .muted,
html[data-theme="sage-mist"] .content-header p,
html[data-theme="sage-mist"] .ai-usage-heading p:not(.eyebrow),
html[data-theme="sage-mist"] .ai-studio-panel-title span,
html[data-theme="sage-mist"] .ai-playground-topbar span,
html[data-theme="sage-mist"] .ai-playground-meta,
html[data-theme="sage-mist"] .connection-card p,
html[data-theme="sage-mist"] .qr-card p,
html[data-theme="sage-mist"] .compact-note { color: #b7cbc0 !important; }
html[data-theme="sage-mist"] .eyebrow { color: #7fd697; }

html[data-theme="forest-dawn"] .content-header,
html[data-theme="forest-dawn"] .content-header h2,
html[data-theme="forest-dawn"] .content-header h3,
html[data-theme="forest-dawn"] .content-header strong,
html[data-theme="forest-dawn"] .ai-studio-panel-title,
html[data-theme="forest-dawn"] .ai-playground-topbar,
html[data-theme="forest-dawn"] .ai-usage-heading,
html[data-theme="forest-dawn"] .ai-usage-heading h3 { color: #203127; }
html[data-theme="forest-dawn"] .muted,
html[data-theme="forest-dawn"] .content-header p,
html[data-theme="forest-dawn"] .ai-usage-heading p:not(.eyebrow),
html[data-theme="forest-dawn"] .ai-studio-panel-title span,
html[data-theme="forest-dawn"] .ai-playground-topbar span,
html[data-theme="forest-dawn"] .ai-playground-meta,
html[data-theme="forest-dawn"] .connection-card p,
html[data-theme="forest-dawn"] .qr-card p,
html[data-theme="forest-dawn"] .compact-note { color: #5d6f61 !important; }
html[data-theme="forest-dawn"] .eyebrow { color: #4d8e64; }

html[data-theme="sage-mist"] .settings-card,
html[data-theme="sage-mist"] .editor-card,
html[data-theme="sage-mist"] .card,
html[data-theme="sage-mist"] .connection-card,
html[data-theme="sage-mist"] .qr-card {
  background: linear-gradient(180deg, rgba(18, 33, 26, .94), rgba(14, 24, 20, .94));
  border-color: #2e5140;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="forest-dawn"] .settings-card,
html[data-theme="forest-dawn"] .editor-card,
html[data-theme="forest-dawn"] .card,
html[data-theme="forest-dawn"] .connection-card,
html[data-theme="forest-dawn"] .qr-card {
  background: rgba(255, 255, 252, .96);
  border-color: #d4ddd3;
  box-shadow: 0 16px 32px rgba(106, 123, 109, .10);
}

html[data-theme="sage-mist"] .settings-anchor-nav button {
  background: #15261d; border-color:#365544; color:#dceadf;
}
html[data-theme="sage-mist"] .settings-anchor-nav button.active,
html[data-theme="sage-mist"] .settings-anchor-nav button:hover { background:#1e362a; color:#ffffff; border-color:#5b8b71; }
html[data-theme="forest-dawn"] .settings-anchor-nav button {
  background: rgba(255,255,255,.9); border-color:#d2ddd3; color:#314337;
}
html[data-theme="forest-dawn"] .settings-anchor-nav button.active,
html[data-theme="forest-dawn"] .settings-anchor-nav button:hover { background:#ffffff; color:#215d3d; border-color:#9cc4a5; }

html[data-theme="sage-mist"] input,
html[data-theme="sage-mist"] textarea,
html[data-theme="sage-mist"] select {
  background:#112018; border-color:#426451; color:#eff7f1; box-shadow:none;
}
html[data-theme="sage-mist"] input::placeholder,
html[data-theme="sage-mist"] textarea::placeholder { color:#8ba594; }
html[data-theme="forest-dawn"] input,
html[data-theme="forest-dawn"] textarea,
html[data-theme="forest-dawn"] select {
  background:#ffffff; border-color:#d0dbd0; color:#233229; box-shadow:none;
}
html[data-theme="forest-dawn"] input::placeholder,
html[data-theme="forest-dawn"] textarea::placeholder { color:#8a9a8d; }

html[data-theme="sage-mist"] .theme-choice,
html[data-theme="sage-mist"] .language-choice,
html[data-theme="forest-dawn"] .theme-choice,
html[data-theme="forest-dawn"] .language-choice {
  align-items:flex-start; gap:10px; min-width:0; overflow:hidden;
}
html[data-theme="sage-mist"] .theme-choice b,
html[data-theme="sage-mist"] .theme-choice small,
html[data-theme="sage-mist"] .language-choice b,
html[data-theme="sage-mist"] .language-choice small,
html[data-theme="forest-dawn"] .theme-choice b,
html[data-theme="forest-dawn"] .theme-choice small,
html[data-theme="forest-dawn"] .language-choice b,
html[data-theme="forest-dawn"] .language-choice small {
  display:block; white-space:normal; overflow-wrap:anywhere; line-height:1.35;
}
html[data-theme="sage-mist"] .theme-choice small { color:#b7cbc0; }
html[data-theme="forest-dawn"] .theme-choice small { color:#617364; }

html[data-theme="sage-mist"] .staff-user-details strong,
html[data-theme="sage-mist"] .staff-user-details span,
html[data-theme="sage-mist"] .staff-user-details small,
html[data-theme="forest-dawn"] .staff-user-details strong,
html[data-theme="forest-dawn"] .staff-user-details span,
html[data-theme="forest-dawn"] .staff-user-details small,
html[data-theme="sage-mist"] .conversation-item h4,
html[data-theme="sage-mist"] .conversation-item p,
html[data-theme="forest-dawn"] .conversation-item h4,
html[data-theme="forest-dawn"] .conversation-item p,
html[data-theme="sage-mist"] .contact-summary h3,
html[data-theme="forest-dawn"] .contact-summary h3 {
  white-space:normal; overflow-wrap:anywhere; word-break:break-word;
}

html[data-theme="sage-mist"] .staff-user-details strong,
html[data-theme="sage-mist"] .staff-user-details span,
html[data-theme="sage-mist"] .staff-user-details small,
html[data-theme="forest-dawn"] .staff-user-details strong,
html[data-theme="forest-dawn"] .staff-user-details span,
html[data-theme="forest-dawn"] .staff-user-details small {
  overflow:visible; text-overflow:clip;
}

html[data-theme="sage-mist"] .ai-usage-dashboard {
  background: linear-gradient(180deg, #13241b 0%, #102118 100%);
  border-color:#2e5140;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
html[data-theme="sage-mist"] .ai-usage-card,
html[data-theme="sage-mist"] .ai-token-breakdown,
html[data-theme="sage-mist"] .ai-usage-note,
html[data-theme="sage-mist"] .ai-feature-usage-row {
  background: linear-gradient(180deg, rgba(17,33,25,.94), rgba(13,24,19,.94));
  border-color:#355a46; color:#eaf5ee;
}
html[data-theme="sage-mist"] .ai-usage-card.primary {
  background: linear-gradient(180deg, #163226, #13281f); border-color:#47775d;
}
html[data-theme="sage-mist"] .ai-usage-card strong,
html[data-theme="sage-mist"] .ai-token-breakdown strong,
html[data-theme="sage-mist"] .ai-usage-note strong,
html[data-theme="sage-mist"] .ai-feature-usage-row b { color:#f1fbf4; }
html[data-theme="sage-mist"] .ai-usage-card > span,
html[data-theme="sage-mist"] .ai-usage-card small,
html[data-theme="sage-mist"] .ai-usage-card em,
html[data-theme="sage-mist"] .ai-token-breakdown span,
html[data-theme="sage-mist"] .ai-usage-note span,
html[data-theme="sage-mist"] .ai-feature-usage-row span { color:#b6cbbd; }
html[data-theme="sage-mist"] .ai-token-breakdown > div { border-color:#2e4b3a; }
html[data-theme="sage-mist"] .ai-feature-usage-row { grid-template-columns:minmax(0,1fr) auto; gap:12px; }
html[data-theme="sage-mist"] .ai-studio-layout {
  background: linear-gradient(180deg, rgba(15,27,21,.94), rgba(11,21,17,.98));
  border-color:#2f5140;
}
html[data-theme="sage-mist"] .ai-studio-config {
  background: linear-gradient(180deg, rgba(17,30,24,.96), rgba(13,24,20,.96));
  border-right-color:#2d4b3b;
}
html[data-theme="sage-mist"] .ai-studio-fieldset { background:#15261d; border-color:#355544; }
html[data-theme="sage-mist"] .ai-studio-fieldset legend { color:#eaf5ee; }
html[data-theme="sage-mist"] .ai-playground { background: radial-gradient(circle at 50% 32%, rgba(85, 158, 109, .10), transparent 58%), #0e1b14; }
html[data-theme="sage-mist"] .ai-playground-topbar { background:#14251c; border-color:#355744; color:#eef7f1; }
html[data-theme="sage-mist"] .ai-playground-empty { color:#bbd1c2; }
html[data-theme="sage-mist"] .ai-playground-empty > span { border-color:#4e7d63; background:#173426; color:#aee0bf; }
html[data-theme="sage-mist"] .ai-playground-empty strong { color:#eef8f2; }
html[data-theme="sage-mist"] .ai-playground-message.customer { background:#163326; border-color:#4d8263; color:#eff8f2; }
html[data-theme="sage-mist"] .ai-playground-message.assistant { background:#13241b; border-color:#355744; color:#eff7f1; }
html[data-theme="sage-mist"] .ai-playground-composer { background:#14261d; border-color:#3c624f; box-shadow: 0 12px 28px rgba(0,0,0,.20); }
html[data-theme="sage-mist"] .ai-playground-composer textarea { color:#eef7f1; }
html[data-theme="sage-mist"] .ai-playground-platform-control label { color:#bfd2c6; }
html[data-theme="sage-mist"] .ai-playground-platform-control select { background:#14241b; border-color:#3c614f; color:#eef7f1; }

html[data-theme="forest-dawn"] .ai-usage-dashboard {
  background: linear-gradient(180deg, #eef5ee 0%, #e8f0e8 100%);
  border-color:#d3dcd2;
}
html[data-theme="forest-dawn"] .ai-usage-card,
html[data-theme="forest-dawn"] .ai-token-breakdown,
html[data-theme="forest-dawn"] .ai-usage-note,
html[data-theme="forest-dawn"] .ai-feature-usage-row {
  background:#ffffff; border-color:#d3dcd2; color:#223228;
}
html[data-theme="forest-dawn"] .ai-usage-card.primary { background:#f7fbf6; border-color:#c7d8c9; }
html[data-theme="forest-dawn"] .ai-usage-card strong,
html[data-theme="forest-dawn"] .ai-token-breakdown strong,
html[data-theme="forest-dawn"] .ai-usage-note strong,
html[data-theme="forest-dawn"] .ai-feature-usage-row b { color:#1f2f25; }
html[data-theme="forest-dawn"] .ai-usage-card > span,
html[data-theme="forest-dawn"] .ai-usage-card small,
html[data-theme="forest-dawn"] .ai-usage-card em,
html[data-theme="forest-dawn"] .ai-token-breakdown span,
html[data-theme="forest-dawn"] .ai-usage-note span,
html[data-theme="forest-dawn"] .ai-feature-usage-row span { color:#5d6f61; }
html[data-theme="forest-dawn"] .ai-token-breakdown > div { border-color:#d3ddd4; }
html[data-theme="forest-dawn"] .ai-feature-usage-row { grid-template-columns:minmax(0,1fr) auto; gap:12px; }
html[data-theme="forest-dawn"] .ai-studio-layout {
  background: rgba(255,255,253,.96);
  border-color:#d2ddd2;
}
html[data-theme="forest-dawn"] .ai-studio-config {
  background: linear-gradient(180deg, rgba(252,254,250,.98), rgba(248,252,246,.98));
  border-right-color:#d3ddd4;
}
html[data-theme="forest-dawn"] .ai-studio-fieldset { background:#ffffff; border-color:#d3ddd4; }
html[data-theme="forest-dawn"] .ai-studio-fieldset legend { color:#213127; }
html[data-theme="forest-dawn"] .ai-playground { background: radial-gradient(circle at 50% 30%, rgba(121,169,130,.10), transparent 56%), #f4f8f2; }
html[data-theme="forest-dawn"] .ai-playground-topbar { background:#ffffff; border-color:#d2ddd3; color:#203127; }
html[data-theme="forest-dawn"] .ai-playground-empty { color:#647567; }
html[data-theme="forest-dawn"] .ai-playground-empty > span { border-color:#a4c6aa; background:#eef7ef; color:#2b6e4b; }
html[data-theme="forest-dawn"] .ai-playground-empty strong { color:#1f2f24; }
html[data-theme="forest-dawn"] .ai-playground-message.customer { background:#e7f3e9; border-color:#add0b3; color:#1f3325; }
html[data-theme="forest-dawn"] .ai-playground-message.assistant { background:#ffffff; border-color:#d2ddd3; color:#203126; }
html[data-theme="forest-dawn"] .ai-playground-composer { background:#ffffff; border-color:#d2ddd3; box-shadow: 0 10px 24px rgba(54,75,57,.10); }
html[data-theme="forest-dawn"] .ai-playground-composer textarea { color:#1f2f24; }
html[data-theme="forest-dawn"] .ai-playground-platform-control label { color:#5f7263; }
html[data-theme="forest-dawn"] .ai-playground-platform-control select { background:#ffffff; border-color:#d0dbd0; color:#243229; }

html[data-theme="sage-mist"] .quick-reply-card-header,
html[data-theme="sage-mist"] .translation,
html[data-theme="sage-mist"] .source-text,
html[data-theme="sage-mist"] .image-analysis,
html[data-theme="sage-mist"] .transcription,
html[data-theme="sage-mist"] .video-analysis,
html[data-theme="sage-mist"] .document-analysis { color:#dceade !important; }
html[data-theme="forest-dawn"] .quick-reply-card-header,
html[data-theme="forest-dawn"] .translation,
html[data-theme="forest-dawn"] .source-text,
html[data-theme="forest-dawn"] .image-analysis,
html[data-theme="forest-dawn"] .transcription,
html[data-theme="forest-dawn"] .video-analysis,
html[data-theme="forest-dawn"] .document-analysis { color:#2a3b30 !important; }

html[data-theme="sage-mist"] .button.primary { background:#2f8f60; border-color:#2f8f60; color:#fff; }
html[data-theme="sage-mist"] .button.warning { background:#f0c96d; border-color:#f0c96d; color:#1f210f; }
html[data-theme="forest-dawn"] .button.warning { background:#f0cf8b; border-color:#e2c073; color:#4b390f; }

html[data-theme="sage-mist"] .contact-summary p,
html[data-theme="sage-mist"] .conversation-item p,
html[data-theme="sage-mist"] .conversation-item time,
html[data-theme="sage-mist"] .details-tip,
html[data-theme="sage-mist"] .settings-help,
html[data-theme="sage-mist"] .invoice-bridge-note { color:#b7cbc0; }
html[data-theme="forest-dawn"] .details-tip,
html[data-theme="forest-dawn"] .settings-help,
html[data-theme="forest-dawn"] .invoice-bridge-note { color:#536757; }

html[data-theme="sage-mist"] .contact-title-block h3,
html[data-theme="sage-mist"] .details-list dd,
html[data-theme="sage-mist"] .message-text,
html[data-theme="forest-dawn"] .contact-title-block h3,
html[data-theme="forest-dawn"] .details-list dd,
html[data-theme="forest-dawn"] .message-text { overflow-wrap:anywhere; word-break:break-word; }

/* TD_EYE_CARE_THEMES_V2_3_6_FIX_END */

/* TD WhatsApp compact voice player v20260827 */
.bubble.has-voice-player {
  width: clamp(250px, 29vw, 330px);
  min-width: 250px;
  max-width: min(330px, calc(100vw - 116px));
  padding: 9px 42px 7px 11px;
}
.voice-player {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  user-select: none;
}
.voice-play-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0 0 0 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #0b8f6a;
  font: 700 20px/1 system-ui, sans-serif;
  cursor: pointer;
}
.voice-play-toggle.is-playing {
  padding-left: 0;
  font-size: 16px;
  letter-spacing: -2px;
}
.voice-play-toggle:hover { background: rgba(11,143,106,.10); }
.voice-play-toggle:focus-visible,
.voice-progress:focus-visible { outline: 2px solid #16a085; outline-offset: 2px; }
.voice-track {
  display: grid;
  grid-template-rows: 31px 15px;
  min-width: 0;
  align-items: center;
}
.voice-waveform {
  position: relative;
  height: 31px;
  min-width: 0;
  display: flex;
  align-items: center;
}
.voice-wave-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 28px;
  overflow: hidden;
}
.voice-wave-bar {
  flex: 1 1 0;
  min-width: 1px;
  max-width: 3px;
  border-radius: 3px;
  background: #aeb8bd;
  transition: background-color .08s linear;
}
.voice-wave-bar.played { background: #21b6d7; }
.message-row.outbound .voice-wave-bar { background: #91b7a8; }
.message-row.outbound .voice-wave-bar.played { background: #10a37f; }
.voice-progress {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 31px;
  margin: 0;
  opacity: .001;
  cursor: pointer;
}
.voice-duration {
  justify-self: start;
  color: var(--muted, #667781);
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.voice-audio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.voice-player.voice-error .voice-wave-bar { opacity: .58; }
.voice-player.voice-error .voice-play-toggle { color: #b45353; }
.bubble.has-voice-player > .message-meta {
  margin-top: 2px;
  padding-right: 0;
}
@media (max-width: 640px) {
  .bubble.has-voice-player {
    width: min(292px, calc(100vw - 78px));
    min-width: min(250px, calc(100vw - 78px));
    max-width: calc(100vw - 78px);
    padding-right: 38px;
  }
  .voice-player { grid-template-columns: 38px minmax(0, 1fr); gap: 7px; }
  .voice-play-toggle { width: 38px; height: 38px; }
}


/* TD WhatsApp compact voice width lock v20260827 */
.message-row .bubble.has-voice-player {
  width: clamp(250px, 29vw, 330px) !important;
  min-width: 250px !important;
  max-width: min(330px, calc(100vw - 116px)) !important;
  padding: 9px 42px 7px 11px !important;
}
.message-row .bubble.has-voice-player .voice-player { width: 100% !important; }
@media (max-width: 640px) {
  .message-row .bubble.has-voice-player {
    width: min(292px, calc(100vw - 78px)) !important;
    min-width: min(250px, calc(100vw - 78px)) !important;
    max-width: calc(100vw - 78px) !important;
    padding-right: 38px !important;
  }
}

/* TD WhatsApp compact voice final specificity v20260827 */
#message-list .message-row .bubble.has-voice-player,
#message-list .message-row .bubble.has-voice-player.td-media-unified {
  width: clamp(250px, 29vw, 330px) !important;
  min-width: 250px !important;
  max-width: min(330px, calc(100vw - 116px)) !important;
  padding: 9px 42px 7px 11px !important;
}
#message-list .message-row .bubble.has-voice-player .voice-player { width: 100% !important; }
@media (max-width: 640px) {
  #message-list .message-row .bubble.has-voice-player,
  #message-list .message-row .bubble.has-voice-player.td-media-unified {
    width: min(292px, calc(100vw - 78px)) !important;
    min-width: min(250px, calc(100vw - 78px)) !important;
    max-width: calc(100vw - 78px) !important;
    padding-right: 38px !important;
  }
}

/* TD WhatsApp compact voice decisive cascade v20260827 */
html[data-theme="whatsapp"] body #message-list > .message-row > .bubble.has-voice-player,
html[data-theme="whatsapp"] body #message-list > .message-row > .bubble.has-voice-player.td-media-unified {
  box-sizing: border-box !important;
  width: clamp(250px, 29vw, 330px) !important;
  min-width: 250px !important;
  max-width: min(330px, calc(100vw - 116px)) !important;
  padding: 9px 42px 7px 11px !important;
}
@media (max-width: 640px) {
  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble.has-voice-player,
  html[data-theme="whatsapp"] body #message-list > .message-row > .bubble.has-voice-player.td-media-unified {
    width: min(292px, calc(100vw - 78px)) !important;
    min-width: min(250px, calc(100vw - 78px)) !important;
    max-width: calc(100vw - 78px) !important;
    padding-right: 36px !important;
  }
}