/* ============================================================================
   kimi-light.css — Phase 22 / Фаза 4: светлый Kimi/GLM реског ВСЕГО app.

   Грузится ПОСЛЕ app.css и minimal.css → переопределяет дизайн-токены, и весь
   интерфейс переское́шивается «бесплатно» (тот же приём, что minimal.css).
   Палитра сверена с реальным Kimi (синий #1783FF) и светлой темой GLM (#F6F7F9).
   Откат = снять этот <link>. `!important` — только там, где app.css перебивает
   токен хардкодом.

   Дефолт — СВЕТЛЫЙ (юзер: «светлая палитра лучше, тёмная не нравится»); тёмная
   остаётся под data-theme="dark", но тоже в стиле Kimi (синий акцент).
   ============================================================================ */

/* ── Светлый Kimi (дефолт + явная светлая) ───────────────────────────────── */
:root,
:root[data-theme="light"] {
  --bg:#FFFFFF; --bg-nav:#F6F7F9; --bg-card:#FFFFFF; --bg-surface:#FFFFFF;
  --bg-input:#F5F6F8; --bg-hover:rgba(0,0,0,.045); --bg-active:rgba(0,0,0,.075);
  --bg-code:#F4F5F7; --bg-tooltip:#1E2024;
  --text:#0E0F12; --text-secondary:#3F434B; --text-muted:#585E6B; --text-dim:#98A0AC;
  --accent:#1783FF; --accent-hover:#0E6FE6; --accent-bright:#4A93FF;
  --accent-soft:rgba(23,131,255,.10); --accent-glow:transparent; --accent-text:#0A63CC;
  --green:#12A150; --green-soft:rgba(18,161,80,.12);
  --red:#D1453B; --red-soft:rgba(209,69,59,.10);
  --yellow:#B7791F; --yellow-soft:rgba(183,121,31,.12);
  --blue:#1783FF; --blue-soft:rgba(23,131,255,.10);
  --border:rgba(0,0,0,.09); --border-light:rgba(0,0,0,.14); --border-glow:rgba(0,0,0,.10);
  --glass-bg:#FFFFFF; --glass-border:rgba(0,0,0,.09);
  --shadow-glow:none; --highlight-inset:none;
}

/* ── Тёмный Kimi (для тех, кто переключит тему) ──────────────────────────── */
:root[data-theme="dark"] {
  --bg:#121212; --bg-nav:#0E0E0E; --bg-card:#1B1B1D; --bg-surface:#1B1B1D;
  --bg-input:#1B1B1D; --bg-hover:rgba(255,255,255,.06); --bg-active:rgba(255,255,255,.10);
  --bg-code:#0E0F12; --bg-tooltip:#2A2C30;
  --text:#ECECEC; --text-secondary:#C6C8CC; --text-muted:#A0A1A5; --text-dim:#6E6F73;
  --accent:#2D8CFF; --accent-hover:#4A9BFF; --accent-bright:#6BAcFF;
  --accent-soft:rgba(45,140,255,.16); --accent-glow:transparent; --accent-text:#8FBFFF;
  --green:#45C579; --green-soft:rgba(69,197,121,.14);
  --red:#F06A5F; --red-soft:rgba(240,106,95,.14);
  --yellow:#E5B567; --yellow-soft:rgba(229,181,103,.14);
  --blue:#2D8CFF; --blue-soft:rgba(45,140,255,.16);
  --border:rgba(255,255,255,.09); --border-light:rgba(255,255,255,.15); --border-glow:rgba(255,255,255,.12);
  --glass-bg:#1B1B1D; --glass-border:rgba(255,255,255,.09);
  --shadow-glow:none; --highlight-inset:none;
}

/* ── Точечные заплатки: где app.css хардкодит тёмный цвет мимо токенов ────── */
/* Аватар ассистента / бренд-бейджи — синий Kimi вместо старого. */
:root .msg-avatar.assistant, :root .brand-mark { background: var(--accent) !important; }
/* Кнопка отправки — синий Kimi. */
:root #send-btn, :root .send-btn { background: var(--accent) !important; color:#fff !important; }
/* Скроллбары под светлую тему. */
:root ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); }

/* ============================================================================
   LAYOUT под макет (Kimi). Шаг 1 — композер: из компактной строки в крупный
   скруглённый бокс (textarea сверху во всю ширину, снизу скрепка + круглая
   синяя кнопка). CSS-only через flex-wrap+order — DOM не трогаем.
   ============================================================================ */
#input-wrapper {
  display: flex !important; flex-wrap: wrap !important; align-items: center;
  gap: 4px 6px; padding: 14px 15px 10px !important; border-radius: 24px !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 30px -20px rgba(0,0,0,.25) !important;
}
#input-wrapper:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) !important;
}
#message-input {
  flex: 1 1 100% !important; order: -1; min-width: 0;
  padding: 2px 4px 6px !important; font-size: 16px !important; background: transparent !important;
}
#attach-btn { order: 1; width: 32px; height: 32px; border-radius: 9px; }
#send-btn {
  order: 3; margin-left: auto !important; width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
}

/* Шаг 2 — welcome-hero под макет: по центру, крупное приветствие, «PL» синим
   бейджем, чипы — чистые пилюли. Композер остаётся под hero (как в диалоге). */
#welcome {
  max-width: 720px; margin: 0 auto; padding: 7vh 20px 0 !important;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
#welcome .welcome-icon {
  width: 54px !important; height: 54px !important; border-radius: 15px !important;
  background: var(--accent) !important; color: #fff !important;
  font-weight: 700; font-size: 20px; display: grid; place-items: center;
  box-shadow: 0 8px 22px -8px var(--accent) !important; margin-bottom: 6px;
}
#welcome h2 { font-size: 28px !important; font-weight: 600; letter-spacing: -0.02em; }
#welcome .welcome-hint { color: var(--text-muted); max-width: 52ch; }
#welcome .welcome-chips { justify-content: center; gap: 9px; margin-top: 8px; }
#welcome .welcome-chip {
  border-radius: 999px !important; border: 1px solid var(--border) !important;
  background: var(--bg-card) !important; padding: 8px 14px !important; font-size: 13px;
}
#welcome .welcome-chip:hover { border-color: var(--accent) !important; }