:root {
  --wa-accent: #008069;
  --wa-accent-hover: #006e5a;
  --wa-on-accent: #ffffff;
  --wa-panel: #ffffff;
  --wa-panel-2: #f0f2f5;
  --wa-chat-bg: #efeae2;
  --wa-dots: rgba(84, 101, 111, .09);
  --wa-bubble-in: #ffffff;
  --wa-bubble-out: #d9fdd3;
  --wa-text: #111b21;
  --wa-muted: #54656f;
  --wa-meta-out: #4b5f57;
  --wa-line: #e1e5e8;
  --wa-line-strong: #c9d1d6;
  --wa-hover: #f5f6f6;
  --wa-active: #e4e8eb;
  --wa-avatar-bg: #dfe5e7;
  --wa-avatar-text: #3b4a54;
  --wa-chip-on-bg: #d9fdd3;
  --wa-chip-on-text: #0b5c48;
  --wa-human-bg: #ffe6c2;
  --wa-human-text: #8a4300;
  --wa-agent: #9a4600;
  --wa-link: #0266a0;
  --wa-danger: #b3261e;
  --wa-focus: #0b5c48;
  --wa-info-bg: #e3f1f8;
  --wa-info-text: #0b4a6b;
  --wa-success-bg: #dcf5e7;
  --wa-success-text: #0b5c48;
  --wa-error-bg: #fdecea;
  --wa-error-text: #8c1d18;
  --wa-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  --wa-card-shadow: 0 2px 12px rgba(11, 20, 26, .08);
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --wa-accent: #00a884;
    --wa-accent-hover: #06cf9c;
    --wa-on-accent: #0b141a;
    --wa-panel: #111b21;
    --wa-panel-2: #202c33;
    --wa-chat-bg: #0b141a;
    --wa-dots: rgba(233, 237, 239, .04);
    --wa-bubble-in: #202c33;
    --wa-bubble-out: #005c4b;
    --wa-text: #e9edef;
    --wa-muted: #8696a0;
    --wa-meta-out: #cfe3dd;
    --wa-line: #222d34;
    --wa-line-strong: #3b4a54;
    --wa-hover: #202c33;
    --wa-active: #2a3942;
    --wa-avatar-bg: #3b4a54;
    --wa-avatar-text: #e9edef;
    --wa-chip-on-bg: #0a332c;
    --wa-chip-on-text: #7ae3c3;
    --wa-human-bg: #4a3417;
    --wa-human-text: #ffc978;
    --wa-agent: #ffbf80;
    --wa-link: #7fd3f7;
    --wa-danger: #ff8a80;
    --wa-focus: #7ae3c3;
    --wa-info-bg: #10364a;
    --wa-info-text: #bfe6fa;
    --wa-success-bg: #0a332c;
    --wa-success-text: #a6ecd5;
    --wa-error-bg: #4a1f1c;
    --wa-error-text: #ffc4bd;
    --wa-shadow: 0 1px .5px rgba(0, 0, 0, .3);
    --wa-card-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--wa-panel-2); }
body { margin: 0; min-height: 100vh; color: var(--wa-text); background: var(--wa-panel-2); }
a { color: inherit; }
button, input, textarea { font: inherit; }
button, .button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--wa-focus); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------------------------------
   Uygulama iskeleti: WhatsApp Web gibi solda dar ikon çubuğu, sağda içerik. Tüm sayfalar
   aynı renk değişkenlerini kullanır; koyu tema sistem ayarını izler.
   ------------------------------------------------------------------------------------------ */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 72px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: 2; height: 100vh; height: 100dvh; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; color: var(--wa-muted); background: var(--wa-panel-2); border-right: 1px solid var(--wa-line); }
.brand { display: flex; color: var(--wa-text); text-decoration: none; }
.brand-mark { width: 40px; height: 40px; flex: none; border: 1px solid var(--wa-line-strong); border-radius: 50% 50% 50% 8px; display: grid; place-items: center; color: var(--wa-accent); font: 700 20px/1 Georgia, serif; transform: rotate(-5deg); }
.brand-text, .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav { margin-top: 28px; display: grid; gap: 6px; justify-items: center; }
.nav-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav a, .text-button { position: relative; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 12px; color: var(--wa-muted); background: transparent; text-decoration: none; cursor: pointer; }
.nav a:hover, .text-button:hover, .nav a.active { color: var(--wa-text); background: var(--wa-active); }
.nav b { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; color: var(--wa-on-accent); background: var(--wa-accent); font-size: 10px; }
.nav b[hidden], .notify-button[hidden] { display: none; }
.logout-form { margin-top: auto; }
.notify-button:not([hidden]) { margin-top: auto; }
.notify-button:not([hidden]) + .logout-form { margin-top: 0; }

/* Liste ve form sayfaları: sohbet başlığına benzer üst çubuk, altında düz panel. */
.workspace { min-width: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--wa-panel); }
.page-header { position: sticky; top: 0; z-index: 1; min-height: 64px; padding: 10px clamp(16px, 3vw, 32px); display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--wa-line); background: var(--wa-panel-2); }
.page-header .icon-button { margin-left: -8px; }
.page-title { flex: 1; min-width: 0; }
.page-header h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.005em; }
.page-header p { margin: 2px 0 0; color: var(--wa-muted); font-size: 13.5px; line-height: 1.4; }
.page-body { width: 100%; max-width: 820px; margin: 0 auto; padding: 24px clamp(16px, 3vw, 32px) 72px; }
.page-body.list-body { max-width: 980px; padding: 8px 0 72px; }
.list-body > .flash { margin: 12px 16px; }
.icon-button { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--wa-muted); }
.icon-button:hover { color: var(--wa-text); background: var(--wa-active); }
.icon-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kicker { margin: 0 0 8px; color: var(--wa-accent); font-size: 13px; font-weight: 650; }

.button { min-height: 40px; padding: 0 20px; border: 1px solid transparent; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--wa-accent); background: transparent; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.button.primary { color: var(--wa-on-accent); background: var(--wa-accent); }
.button.primary:hover { background: var(--wa-accent-hover); }
.button.quiet { border-color: var(--wa-line-strong); }
.button.quiet:hover { background: var(--wa-hover); }
.button.danger { border-color: var(--wa-danger); color: var(--wa-danger); }
.button.danger:hover { color: var(--wa-panel); background: var(--wa-danger); }
.button.full { width: 100%; }
.flash { margin: 0 0 18px; padding: 12px 16px; border-radius: 8px; color: var(--wa-info-text); background: var(--wa-info-bg); font-size: 14px; line-height: 1.45; }
.flash.error { color: var(--wa-error-text); background: var(--wa-error-bg); }
.flash.success { color: var(--wa-success-text); background: var(--wa-success-bg); }
.send-error strong { font-weight: 750; }

.status, .badge { flex: none; padding: 2px 8px; border-radius: 10px; display: inline-block; font-size: 11.5px; font-weight: 650; line-height: 16px; white-space: nowrap; }
.status.active { color: var(--wa-chip-on-text); background: var(--wa-chip-on-bg); }
.status.attention, .badge.human { color: var(--wa-human-text); background: var(--wa-human-bg); }
.status.muted { color: var(--wa-muted); background: var(--wa-panel-2); }
.reason { color: var(--wa-muted); font-size: 12.5px; font-weight: 600; }
.reason.send_failed { color: var(--wa-danger); }

.avatar { width: 48px; height: 48px; flex: none; overflow: hidden; border-radius: 50%; display: grid; place-items: center; color: var(--wa-avatar-text); background: var(--wa-avatar-bg); font-size: 16px; font-weight: 650; }
.avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.chat-row-preview.wrap { display: -webkit-box; color: var(--wa-text); white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chat-row-preview.keywords { font-size: 13px; }
.question-row .chat-row-bottom { flex-wrap: wrap; gap: 4px 10px; }
.chat-row.resolved .chat-row-name, .chat-row.resolved .chat-row-preview.wrap { color: var(--wa-muted); }
.chat-row.resolved .avatar { opacity: .6; }

.empty-state { max-width: 460px; margin: auto; padding: 48px 16px; color: var(--wa-muted); text-align: center; }
.empty-state h1, .empty-state h2 { margin: 18px 0 8px; color: var(--wa-text); font-size: 24px; font-weight: 400; }
.empty-state p { margin: 0 0 22px; line-height: 1.55; }
.empty-mark { width: 56px; height: 56px; margin: 0 auto; border: 1.5px solid var(--wa-accent); border-radius: 50%; display: grid; place-items: center; color: var(--wa-accent); font-size: 24px; }

/* Formlar: yazma kutusu gibi gri zeminli alanlar, yeşil başlıklar. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.form-grid label, .form-stack label { display: grid; gap: 7px; color: var(--wa-accent); font-size: 13.5px; font-weight: 600; }
.form-grid label small, .form-grid p small { color: var(--wa-muted); font-size: 12.5px; font-weight: 400; line-height: 1.45; }
.form-grid > p { margin: 0; }
.span-2 { grid-column: span 2; }
input, textarea { width: 100%; padding: 11px 14px; border: 1px solid transparent; border-radius: 10px; color: var(--wa-text); background: var(--wa-panel-2); font-size: 15px; font-weight: 400; }
input::placeholder, textarea::placeholder { color: var(--wa-muted); }
textarea { resize: vertical; line-height: 1.5; }
input:hover, textarea:hover { border-color: var(--wa-line-strong); }
input:focus, textarea:focus { border-color: transparent; outline: none; box-shadow: 0 0 0 2px var(--wa-focus); }
input[type="file"] { padding: 9px 10px; font-size: 14px; }
input[type="file"]::file-selector-button { margin-right: 12px; padding: 7px 14px; border: 0; border-radius: 16px; color: var(--wa-on-accent); background: var(--wa-accent); font-weight: 600; cursor: pointer; }
.check-row { grid-template-columns: 22px 1fr !important; align-items: start; padding: 14px; border-radius: 10px; color: var(--wa-text) !important; background: var(--wa-panel-2); cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--wa-accent); box-shadow: none; }
.check-row strong, .check-row small { display: block; }
.check-row strong { font-weight: 600; }
.check-row small { margin-top: 4px; }
.form-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.image-field { display: grid; gap: 12px; }
.image-field img { max-width: 220px; max-height: 280px; border-radius: 8px; object-fit: contain; background: var(--wa-panel-2); box-shadow: var(--wa-shadow); }
.danger-zone { margin-top: 32px; padding: 18px 20px; border: 1px solid var(--wa-line-strong); border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.danger-zone strong { color: var(--wa-danger); font-weight: 650; }
.danger-zone p { margin: 4px 0 0; color: var(--wa-muted); font-size: 13px; }

/* Giriş: WhatsApp Web'in yeşil üst şeridi ve ortada kart. */
.login-shell { min-height: 100vh; padding: 48px 16px; display: grid; place-items: center; background: linear-gradient(var(--wa-accent) 0 222px, var(--wa-panel-2) 222px); }
.login-card { width: min(100%, 440px); padding: 40px; border-radius: 12px; background: var(--wa-panel); box-shadow: var(--wa-card-shadow); }
.login-mark { width: 52px; height: 52px; margin-bottom: 22px; font-size: 24px; }
.login-card h1 { margin: 6px 0 10px; font-size: 28px; font-weight: 400; line-height: 1.2; }
.login-card .lede { margin: 0 0 26px; color: var(--wa-muted); line-height: 1.55; }
.login-card .flash { margin-bottom: 18px; }
.form-stack { display: grid; gap: 18px; }
.form-stack .button { margin-top: 4px; }

.legal { max-width: 760px; min-height: auto; margin: 0 auto; padding: 40px 20px 64px; display: block; line-height: 1.65; }
.legal h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 600; line-height: 1.2; }
.legal h2 { margin-top: 32px; font-size: 18px; }
.legal a { color: var(--wa-link); }

@media (prefers-reduced-motion: no-preference) {
  .login-card { animation: settle .45s ease-out both; }
  @keyframes settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* ------------------------------------------------------------------------------------------
   Konuşma ekranı: WhatsApp Web düzeni (solda liste, sağda sohbet).
   ------------------------------------------------------------------------------------------ */
.chat-shell {
  height: var(--app-height, 100vh);
  height: var(--app-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  background: var(--wa-panel-2);
}
body:has(.chat-shell) { overflow: hidden; }
.chat-shell .sidebar { position: static; height: 100%; }

.chat-app { min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }

/* Sol sütun: konuşma listesi */
.chat-list-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--wa-line); background: var(--wa-panel); }
.pane-header { padding: 16px 16px 8px; }
.pane-header h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.chat-list-pane .flash { margin: 6px 12px; font-size: 13px; line-height: 1.45; }
.chat-tools { padding: 4px 12px 10px; display: grid; gap: 10px; border-bottom: 1px solid var(--wa-line); }
.chat-tools[hidden] { display: none; }
.chat-search { height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; color: var(--wa-text); background: var(--wa-panel-2); font-size: 14.5px; }
.chat-search::placeholder { color: var(--wa-muted); }
.chat-search:hover { border-color: transparent; }
.chat-search:focus { outline: none; }
.chat-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 17px; color: var(--wa-muted); background: var(--wa-panel-2); font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.filter-chip:hover { color: var(--wa-text); }
.filter-chip[aria-pressed="true"] { color: var(--wa-chip-on-text); background: var(--wa-chip-on-bg); font-weight: 650; }
.filter-chip span:empty { display: none; }
.chat-list-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.chat-list { margin: 0; padding: 0; list-style: none; }
.chat-row-item[hidden] { display: none; }
.chat-row { min-height: 72px; padding-left: 12px; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.chat-row:hover { background: var(--wa-hover); }
.chat-row.active { background: var(--wa-active); }
.chat-row:focus-visible { outline-offset: -2px; }
.chat-row-main { flex: 1; min-width: 0; align-self: stretch; padding: 10px 14px 10px 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; border-bottom: 1px solid var(--wa-line); }
.chat-row-top, .chat-row-bottom { min-width: 0; display: flex; align-items: center; gap: 8px; }
.chat-row-name { flex: 1; min-width: 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.chat-row-time { flex: none; color: var(--wa-muted); font-size: 12px; }
.chat-row-time.waiting { color: var(--wa-accent); font-weight: 650; }
.chat-row-preview { flex: 1; min-width: 0; overflow: hidden; color: var(--wa-muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.badge.count { min-width: 20px; padding: 2px 6px; text-align: center; color: var(--wa-on-accent); background: var(--wa-accent); }
.chat-list-empty { margin: 0; padding: 32px 24px; color: var(--wa-muted); font-size: 14px; line-height: 1.5; text-align: center; }
.chat-list-empty[hidden] { display: none; }

/* Sağ sütun: sohbet */
.chat-pane { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--wa-panel-2); }
.chat-placeholder { max-width: 460px; margin: auto; padding: 32px; color: var(--wa-muted); text-align: center; }
.chat-placeholder h2 { margin: 18px 0 8px; color: var(--wa-text); font-size: 26px; font-weight: 400; }
.chat-placeholder p { margin: 0; line-height: 1.55; }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-header { min-height: 60px; padding: 8px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--wa-line); background: var(--wa-panel-2); }
.chat-header .avatar { width: 40px; height: 40px; font-size: 14px; }
.chat-title { flex: 1; min-width: 0; }
.chat-title h2 { margin: 0; font-size: 16px; font-weight: 600; }
.chat-title h2:focus { outline: none; }
.chat-title p { margin: 2px 0 0; overflow: hidden; color: var(--wa-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.chat-status.human { color: var(--wa-human-text); font-weight: 650; }
.chat-header form[hidden] { display: none; }
.chat .reactivate-button { min-height: 40px; border-color: var(--wa-accent); border-radius: 20px; color: var(--wa-accent); background: transparent; }
.chat .reactivate-button:hover { border-color: var(--wa-accent); color: var(--wa-on-accent); background: var(--wa-accent); }
.chat-back { display: none; }
.chat-flash { margin: 0; border-radius: 0; font-size: 13px; }

.chat-body { flex: 1; min-height: 0; padding: 12px clamp(12px, 6%, 72px) 16px; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; background-color: var(--wa-chat-bg); background-image: radial-gradient(var(--wa-dots) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.chat-older, .chat-empty { margin: 8px 0; color: var(--wa-muted); font-size: 12.5px; text-align: center; }
.chat-older[hidden] { display: none; }
.messages { max-width: 940px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 2px; list-style: none; }
.msg { display: flex; flex-direction: column; align-items: flex-start; }
.msg.out { align-items: flex-end; }
.msg.in + .msg.out, .msg.out + .msg.in { margin-top: 8px; }
.bubble { position: relative; max-width: min(72%, 580px); min-width: 72px; padding: 6px 9px 8px; border-radius: 8px; color: var(--wa-text); background: var(--wa-bubble-in); box-shadow: var(--wa-shadow); font-size: 14.5px; line-height: 1.42; }
.msg.out .bubble { background: var(--wa-bubble-out); }
.msg-sender { display: block; margin-bottom: 2px; color: var(--wa-meta-out); font-size: 12px; font-weight: 650; }
.msg.agent .msg-sender { color: var(--wa-agent); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-text a { color: var(--wa-link); }
.msg-spacer { display: inline-block; width: 42px; height: 1px; }
.msg-meta { position: absolute; right: 8px; bottom: 5px; color: var(--wa-muted); font-size: 11px; line-height: 1; white-space: nowrap; }
.msg.out .msg-meta { color: var(--wa-meta-out); }
.msg-image { margin: 2px 0 4px; padding: 0; display: block; overflow: hidden; border: 0; border-radius: 6px; background: var(--wa-active); cursor: zoom-in; }
.msg-image img { width: 260px; max-width: 100%; aspect-ratio: 4 / 5; display: block; object-fit: cover; }
.msg.image-only .msg-meta { right: 14px; bottom: 14px; padding: 3px 6px; border-radius: 8px; color: #fff; background: rgba(11, 20, 26, .6); }
.msg-image-missing { margin-bottom: 4px; display: block; color: var(--wa-muted); font-style: italic; }
.msg-info, .day-sep { margin: 8px 0; align-self: center; text-align: center; }
.msg-info span, .day-sep span { padding: 5px 12px; display: inline-block; border-radius: 8px; color: var(--wa-muted); background: var(--wa-panel); box-shadow: var(--wa-shadow); font-size: 12.5px; line-height: 1.4; }
.day-sep { position: sticky; top: 0; z-index: 1; margin: 10px 0; }
.msg.pending .msg-spacer { width: 88px; }
.msg.pending .bubble { opacity: .85; }
.msg.failed .bubble { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--wa-danger); }
.msg.failed [data-pending-state] { color: var(--wa-danger); font-weight: 650; }
.msg-failure { max-width: min(72%, 580px); margin-top: 4px; padding: 4px 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 10px; border-radius: 8px; color: var(--wa-danger); background: var(--wa-panel); font-size: 12.5px; text-align: right; }
.msg-failure[hidden] { display: none; }
.link-button { min-height: 32px; padding: 0 4px; border: 0; color: var(--wa-accent); background: none; font-weight: 650; text-decoration: underline; cursor: pointer; }

/* Yazma alanı */
.composer-dock { position: relative; padding: 8px 14px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--wa-line); background: var(--wa-panel-2); }
.new-messages { position: absolute; right: 20px; bottom: calc(100% + 14px); z-index: 2; min-height: 40px; padding: 0 16px; border: 0; border-radius: 20px; color: var(--wa-on-accent); background: var(--wa-accent); box-shadow: 0 2px 8px rgba(11, 20, 26, .25); font-weight: 650; cursor: pointer; }
.new-messages[hidden], .composer[hidden], .window-closed[hidden] { display: none; }
.composer { position: relative; display: flex; align-items: flex-end; gap: 8px; }
.composer-field { position: relative; flex: 1; min-width: 0; border-radius: 10px; background: var(--wa-panel); }
.composer-field:focus-within { box-shadow: 0 0 0 2px var(--wa-focus); }
.composer textarea { min-height: 44px; max-height: 160px; padding: 11px 14px; display: block; overflow-y: auto; border: 0; border-radius: 10px; color: var(--wa-text); background: transparent; font-size: 15px; line-height: 1.45; resize: none; }
.composer textarea::placeholder { color: var(--wa-muted); }
.composer textarea:focus { outline: none; box-shadow: none; }
.char-count { position: absolute; right: 6px; bottom: calc(100% + 4px); padding: 1px 6px; border-radius: 6px; color: var(--wa-muted); background: var(--wa-panel-2); font-size: 11px; }
.char-count:empty { display: none; }
.char-count.near-limit { color: var(--wa-danger); font-weight: 650; }
.send-button { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--wa-on-accent); background: var(--wa-accent); cursor: pointer; }
.send-button:disabled { opacity: .55; cursor: progress; }
.send-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.window-closed { margin: 0; padding: 12px 16px; border-radius: 8px; color: var(--wa-muted); background: var(--wa-panel); font-size: 13.5px; line-height: 1.5; text-align: center; }
.quick-replies { position: absolute; right: 52px; bottom: calc(100% + 8px); left: 0; z-index: 3; max-height: 264px; margin: 0; padding: 6px 0; overflow-y: auto; border-radius: 10px; list-style: none; background: var(--wa-panel); box-shadow: 0 4px 18px rgba(11, 20, 26, .22); }
.quick-replies[hidden] { display: none; }
.quick-item { min-height: 44px; padding: 10px 14px; display: flex; align-items: center; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.quick-item:hover, .quick-item.active { background: var(--wa-active); }
.quick-empty { padding: 12px 14px; color: var(--wa-muted); font-size: 13.5px; }
.quick-empty a { color: var(--wa-link); }

.lightbox { max-width: 94vw; max-height: 94vh; padding: 0; border: 0; overflow: visible; background: transparent; }
.lightbox::backdrop { background: rgba(11, 20, 26, .88); }
.lightbox img { max-width: 94vw; max-height: 94vh; display: block; object-fit: contain; cursor: zoom-out; }
.lightbox-close { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .16); font-size: 26px; line-height: 1; cursor: pointer; }

@media (pointer: coarse) {
  .filter-chip, .chat-search, .link-button { min-height: 44px; }
}

@media (max-width: 767px) {
  .app-shell { display: block; }
  .sidebar { width: 100%; height: auto; padding: 4px 8px; padding-top: max(4px, env(safe-area-inset-top)); flex-direction: row; gap: 2px; border-right: 0; border-bottom: 1px solid var(--wa-line); }
  .nav { margin: 0; display: flex; gap: 2px; }
  .logout-form, .notify-button:not([hidden]) { margin: 0 0 0 auto; }
  .notify-button:not([hidden]) + .logout-form { margin-left: 0; }
  .workspace { min-height: calc(100dvh - 57px); }
  .page-header { position: static; min-height: 0; padding: 12px 16px; flex-wrap: wrap; }
  .page-header .button { width: 100%; }
  .page-body { padding: 18px 16px 64px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .danger-zone { flex-direction: column; align-items: stretch; }
  .form-actions .button { flex: 1; }
  input, textarea { font-size: 16px; }
  .login-shell { place-items: start center; background: linear-gradient(var(--wa-accent) 0 160px, var(--wa-panel-2) 160px); }
  .login-card { padding: 32px 24px; }
  .chat-shell { display: flex; flex-direction: column; }
  .chat-shell .sidebar { height: auto; }
  .chat-shell.has-chat .sidebar { display: none; }
  .chat-app { flex: 1; display: block; }
  .chat-list-pane, .chat-pane { height: 100%; }
  .chat-list-pane { border-right: 0; }
  .chat-pane { display: none; }
  .chat-shell.has-chat .chat-list-pane { display: none; }
  .chat-shell.has-chat .chat-pane { display: flex; }
  .pane-header { padding: 12px 16px 6px; }
  .chat-header { padding: 6px 10px 6px 4px; padding-top: max(6px, env(safe-area-inset-top)); flex-wrap: wrap; gap: 6px 8px; }
  .chat-back { display: grid; }
  .chat-header form { flex-basis: 100%; }
  .chat .reactivate-button { width: 100%; }
  .chat-body { padding: 8px 10px 12px; }
  .bubble, .msg-failure { max-width: 86%; }
  .composer-dock { padding: 6px 8px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .composer textarea { font-size: 16px; }
  .new-messages { right: 12px; }
}