/* =========================================================================
     assistant.css — the site-wide AI helper dock (left, after the main menu)
     and its menu toggle button. The grid column itself is declared in shell.css
     (.app grid-template-columns ... var(--ai-w) ...); this sheet styles the dock
     internals, the toggle button, and the mobile full-screen overlay.
     ========================================================================= */

  /* Menu toggle button — first item in the sidebar nav, accent-tinted so it
     reads as the always-available assistant. */
  .side .nav .ai-nav-btn {
    border-color: rgba(95, 180, 135, 0.45);
    background: linear-gradient(180deg, rgba(95,180,135,0.14), rgba(95,180,135,0.04));
    color: var(--accent-soft);
  }
  .side .nav .ai-nav-btn:hover {
    border-color: var(--accent-soft);
    background: linear-gradient(180deg, rgba(95,180,135,0.22), rgba(95,180,135,0.07));
  }
  .side .nav .ai-nav-btn.active { color: var(--text); }

  /* The dock — a sticky full-height column between .side and .main. */
  .ai-dock {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    min-width: 0; overflow: hidden;
    background: var(--bg-2);
    border-right: 1px solid var(--border);
  }
  /* CLOSED (desktop): the dock STAYS in the grid flow at 0 width (--ai-w:0px)
     rather than display:none. display:none would remove it from the grid, and
     CSS auto-placement would then drop .main into the now-empty middle (narrow)
     track — the bug that squished the page. Keeping it in flow at 0px keeps
     .main correctly in the 3rd (1fr) track. */
  .app:not(.ai-open) .ai-dock { border-right: 0; }

  .ai-head {
    display: flex; align-items: center;
    gap: 8px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--border-2);
    flex: 0 0 auto;
  }
  .ai-title {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: var(--text); flex: 0 0 auto;
  }
  .ai-title svg { width: 16px; height: 16px; color: var(--accent-soft); }
  .ai-head .ai-close { margin-left: auto; }
  /* Session pluses-spend chip — sits right after the title (small offset). */
  .ai-head .ai-spend {
    display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
    appearance: none; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--border-2);
    border-radius: 999px; color: var(--accent-soft);
    font: inherit; font-size: 11px; font-weight: 700; line-height: 1; padding: 2px 8px;
  }
  .ai-head .ai-spend svg { width: 11px; height: 11px; }
  .ai-head .ai-spend:hover { border-color: var(--accent-soft); color: var(--text); }
  /* Spend breakdown popover (since-last-clear + all-time). */
  .ai-spend-pop {
    position: absolute; top: 44px; left: 12px; z-index: 12;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 10px; box-shadow: var(--shadow-card, 0 8px 22px rgba(0,0,0,0.45));
    padding: 11px 13px; font-size: 12px; color: var(--text); min-width: 252px; max-width: 304px;
  }
  .ai-spend-pop[hidden] { display: none; }
  .ai-spend-title { font-weight: 600; font-size: 12.5px; margin-bottom: 8px; }
  .ai-spend-grid { display: flex; flex-direction: column; }
  .ai-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border-2); }
  .ai-stat:last-child { border-bottom: 0; }
  .ai-stat-k { color: var(--muted); }
  .ai-stat-v { color: var(--text); font-weight: 600; white-space: nowrap; }
  .ai-stat-v svg { width: 11px; height: 11px; vertical-align: -1px; }
  .ai-stat-sub { color: var(--muted); font-weight: 400; font-size: 10.5px; margin-left: 3px; }
  .ai-spend-spark:not(:empty) { margin-top: 9px; }
  .ai-spark-label { color: var(--muted); font-size: 10.5px; margin-bottom: 5px; }
  .ai-spark-bars { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
  .ai-spark-bar { flex: 1 1 0; min-width: 3px; background: var(--accent-soft, #6aa3ff); border-radius: 2px 2px 0 0; opacity: 0.8; }
  .ai-spark-bar:last-child { background: var(--accent, #4d8dff); opacity: 1; }
  /* legacy spend rows (kept for backward-compat) */
  .ai-spend-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 3px 0; }
  .ai-spend-row b { color: var(--accent-soft); }
  .ai-spend-row svg { width: 11px; height: 11px; vertical-align: -1px; }
  /* Sidebar AI button — session-spend badge (visible while the dock is collapsed). */
  .side .nav [data-action="ai-panel"] { position: relative; }
  .side .nav [data-action="ai-panel"].has-ai-spend::after {
    content: attr(data-ai-spend);
    position: absolute; top: 3px; right: 3px;
    min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 8px; background: var(--accent, #2a8669); color: #fff;
    font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
  }
  .ai-ctx {
    font-size: 11px; color: var(--muted);
    max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 2px 8px; border: 1px solid var(--border-2); border-radius: 999px;
    background: var(--surface-2);
  }
  /* Controls row — a dedicated line below the header: model switch + clear. */
  .ai-controls {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-bottom: 1px solid var(--border-2);
    flex: 0 0 auto;
  }
  .ai-model {
    appearance: none; -webkit-appearance: none;
    flex: 1 1 auto; min-width: 0;
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border-2); border-radius: 6px;
    font: inherit; font-size: 12px; padding: 5px 8px; cursor: pointer;
  }
  .ai-model:hover { border-color: var(--border); }
  .ai-model[hidden] + .ai-reset { margin-left: auto; }
  /* Чип «к какому месту относится этот чат» (🎮 игра / 📁 папка / 🌐 платформа). */
  .ai-place {
    flex: 1 1 auto; min-width: 0;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: var(--text);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  /* Маленькая кнопка-иконка «открыть место этого чата» (видна, когда открытый чат
     относится к другому месту, чем открыто сейчас). Без текста, у «Чаты». */
  .ai-place-jump {
    flex: 0 0 auto; color: var(--accent-soft);
    border: 1px solid var(--accent-soft); border-radius: 6px; padding: 4px;
  }
  .ai-place-jump[hidden] { display: none; }
  .ai-place-jump:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
  .ai-ctrl-btn {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px;
    color: var(--muted); font: inherit; font-size: 12px; padding: 5px 9px;
  }
  .ai-ctrl-btn svg { width: 14px; height: 14px; }
  .ai-ctrl-btn:hover { color: var(--text); border-color: var(--border); }
  .ai-reset:hover { color: var(--warn); border-color: var(--warn); }
  .ai-icon-btn {
    appearance: none; background: transparent; border: 0; cursor: pointer;
    color: var(--muted); padding: 4px; border-radius: 6px;
    display: inline-grid; place-items: center;
  }
  .ai-icon-btn svg { width: 16px; height: 16px; display: block; }
  .ai-icon-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); }
  .ai-reset:hover { color: var(--warn); }
  .ai-close:hover { color: var(--danger); }

  .ai-messages {
    flex: 1 1 auto; overflow-y: auto;
    padding: 12px; display: flex; flex-direction: column; gap: 10px;
  }
  .ai-messages::-webkit-scrollbar { width: 8px; }
  .ai-messages::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; }

  .ai-msg {
    font-size: 13px; line-height: 1.5; max-width: 92%;
    word-wrap: break-word; overflow-wrap: anywhere;
  }
  .ai-msg.user {
    align-self: flex-end;
    background: var(--accent-glow, rgba(95,180,135,0.12));
    border: 1px solid rgba(95,180,135,0.3);
    color: var(--text);
    padding: 7px 11px; border-radius: 12px 12px 4px 12px;
  }
  .ai-msg.assistant {
    align-self: flex-start;
    background: var(--surface);
    border: 1px solid var(--border-2);
    color: var(--text);
    padding: 8px 11px; border-radius: 12px 12px 12px 4px;
  }
  .ai-msg.tool {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--muted);
    background: var(--surface-2); border: 1px solid var(--border-2);
    padding: 4px 9px; border-radius: 999px; max-width: 100%;
  }
  .ai-msg.tool svg { width: 12px; height: 12px; flex: 0 0 12px; }
  .ai-msg.tool span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ai-msg.tool-err {
    align-self: flex-start; font-size: 11.5px;
    color: var(--danger); background: rgba(213,106,82,0.08);
    border: 1px solid rgba(213,106,82,0.3);
    padding: 4px 9px; border-radius: 8px;
  }
  .ai-msg.spend { align-self: flex-end; font-size: 10.5px; color: var(--dim, var(--muted)); }
  .ai-msg.card {
    align-self: stretch; font-size: 12px; color: var(--text);
    background: rgba(91,140,255,0.08); border: 1px solid rgba(91,140,255,0.35);
    padding: 9px 11px; border-radius: 10px; line-height: 1.4;
  }
  .ai-msg.card .ai-card-h { font-weight: 700; margin-bottom: 3px; }
  .ai-msg.card .ai-card-sum { opacity: .85; }
  .ai-msg.card .ai-card-mods { margin-top: 5px; font-size: 11.5px; opacity: .8; word-break: break-word; }
  .ai-msg.error {
    align-self: stretch; font-size: 12px; color: #f0bdac;
    background: rgba(213,106,82,0.1); border: 1px solid rgba(213,106,82,0.4);
    padding: 8px 11px; border-radius: 8px;
  }
  .ai-msg .ai-code {
    display: block; margin: 6px 0 0; padding: 8px 10px;
    background: var(--bg); border: 1px solid var(--border-2); border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; line-height: 1.45; white-space: pre; overflow-x: auto;
  }
  .ai-msg .ai-inline {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px; background: var(--bg); border: 1px solid var(--border-2);
    border-radius: 4px; padding: 1px 5px;
  }

  /* Thinking dots */
  .ai-thinking { align-self: flex-start; display: inline-flex; gap: 4px; padding: 8px 11px; }
  .ai-thinking span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
    animation: ai-dot 1.1s ease-in-out infinite;
  }
  .ai-thinking span:nth-child(2) { animation-delay: 0.18s; }
  .ai-thinking span:nth-child(3) { animation-delay: 0.36s; }
  @keyframes ai-dot { 0%,80%,100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

  /* Input sits at the TOP (below the header), feed runs newest-first below it. */
  .ai-input-row {
    flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--border-2);
  }
  .ai-input {
    flex: 1 1 auto; resize: none; box-sizing: border-box;
    min-height: 38px; max-height: 140px;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: 10px; color: var(--text); font: inherit; font-size: 13px;
    padding: 9px 11px; line-height: 1.4;
  }
  /* Drag the dock's right edge to resize it (--ai-w persisted in localStorage). */
  .ai-resize {
    position: absolute; top: 0; right: 0; width: 6px; height: 100%;
    cursor: ew-resize; z-index: 6; background: transparent; touch-action: none;
  }
  .ai-resize:hover, .ai-resize.dragging { background: var(--accent-soft); opacity: 0.5; }
  .ai-input:focus { outline: none; border-color: var(--accent-soft); }
  .ai-input:disabled { opacity: 0.6; }
  .ai-send {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
    background: var(--accent, #2a8669); border: 0; color: #fff; cursor: pointer;
    display: grid; place-items: center;
  }
  .ai-send svg { width: 18px; height: 18px; }
  .ai-send:hover { filter: brightness(1.08); }
  .ai-send:disabled { opacity: 0.5; cursor: default; }

  /* Mobile: the dock becomes a full-screen overlay (the sidebar is a top bar at
     z-index 60 — the dock sits above it; close via its own × button). */
  @media (max-width: 640px) {
    .ai-dock {
      position: fixed; inset: 0;
      height: 100vh; height: 100dvh;
      /* push content above the iOS home-indicator / Android nav-bar */
      padding-bottom: env(safe-area-inset-bottom, 0px);
      /* z-index ВЫШЕ .engine-editor-overlay (game.css = 9999): на мобиле редактор
         занимает весь экран fixed-оверлеем, и без этого открытый из редактора
         AI-док («Помощник», engine-editor-assistant) оказался бы ПОД ним. Док
         закрыт = display:none (правило ниже), поэтому высокий z-index безопасен. */
      z-index: 10010; border-right: 0;
    }
    /* Mobile is single-column with the dock as a fixed overlay (out of grid
       flow), so display:none here is safe and needed — a closed fixed inset:0
       element would otherwise cover the page. */
    .app:not(.ai-open) .ai-dock { display: none; }
    .ai-resize { display: none; } /* full-screen on mobile — nothing to resize */

    /* Prevent background scroll while the AI panel is open */
    .app.ai-open { overflow: hidden; }

    /* Tap-target enlargement for action buttons */
    .ai-send {
      min-width: 44px; min-height: 44px;
      width: 44px; height: 44px;
    }
    .ai-icon-btn {
      min-width: 44px; min-height: 44px;
      padding: 10px;
    }
    /* ai-close and ai-place-jump are .ai-icon-btn — already covered above */
    .ai-chats-close {
      min-width: 44px; min-height: 44px;
      width: 44px; height: 44px;
    }
    .ai-chat-rename,
    .ai-chat-del {
      min-width: 44px; min-height: 44px;
      width: 44px; height: 44px;
    }

    /* Keep the safe-area gap at the bottom of the message feed */
    .ai-messages {
      padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    /* iOS zoom prevention: this file sets font-size:13px on .ai-input which
       overrides the global responsive.css fix — bump to 16px on mobile */
    .ai-input { font-size: 16px; }
  }

  /* Active states for touch feedback (replaces hover on pointer:coarse devices) */
  @media (hover: none) {
    .ai-send:active { filter: brightness(1.12); }
    .ai-icon-btn:active { color: var(--text); background: rgba(255,255,255,0.08); }
    .ai-close:active { color: var(--danger); }
    .ai-place-jump:active { color: #fff; background: var(--accent); border-color: var(--accent); }
    .ai-chats-close:active { color: var(--text); background: var(--bg-2); }
    .ai-chat-rename:active { background: var(--bg); color: var(--text); }
    .ai-chat-del:active { background: rgba(213,106,82,0.14); color: var(--danger); }
  }

  /* ── «Чаты» — saved-chats modal (covers the dock; dock is a positioning
     context via .ai-resize's absolute children) ── */
  .ai-chats-modal {
    position: absolute; inset: 0; z-index: 20;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 54px 12px 12px;
  }
  .ai-chats-modal[hidden] { display: none; }
  .ai-chats-panel {
    width: 100%; max-width: 360px; max-height: calc(100% - 66px);
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); overflow: hidden;
  }
  .ai-chats-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--border-2);
    font-weight: 600; font-size: 13px; color: var(--text);
  }
  .ai-chats-head > span:first-child { flex: 1 1 auto; }
  .ai-chats-new {
    font-size: 12px; padding: 5px 10px; border-radius: 8px;
    background: var(--accent, #2a8669); color: #fff; border: 0; cursor: pointer;
  }
  .ai-chats-new:hover { filter: brightness(1.08); }
  .ai-chats-close {
    width: 26px; height: 26px; display: grid; place-items: center;
    background: transparent; border: 0; color: var(--muted); cursor: pointer; border-radius: 6px;
  }
  .ai-chats-close:hover { color: var(--text); background: var(--bg-2); }
  .ai-chats-close svg { width: 16px; height: 16px; }
  .ai-chats-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
  .ai-chats-empty { color: var(--muted); font-size: 12px; padding: 18px 12px; text-align: center; line-height: 1.5; }
  .ai-chat-row {
    display: flex; align-items: center; gap: 4px;
    border: 1px solid var(--border-2); border-radius: 9px;
    background: var(--bg-2); padding: 2px 4px 2px 2px;
  }
  .ai-chat-row.active { border-color: rgba(95,180,135,0.5); background: var(--accent-glow, rgba(95,180,135,0.1)); }
  .ai-chat-open {
    flex: 1 1 auto; min-width: 0; text-align: left; cursor: pointer;
    background: transparent; border: 0; color: var(--text);
    display: flex; flex-direction: column; gap: 1px; padding: 7px 9px;
  }
  .ai-chat-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ai-chat-meta { font-size: 10.5px; color: var(--muted); }
  .ai-chat-rename, .ai-chat-del {
    flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center;
    background: transparent; border: 0; cursor: pointer; border-radius: 6px;
    color: var(--muted); font-size: 14px; line-height: 1;
  }
  .ai-chat-rename:hover { background: var(--bg); color: var(--text); }
  .ai-chat-del:hover { background: rgba(213,106,82,0.14); color: var(--danger); }