/* ============ Custom titlebar (desktop-only) ============
   Активируется через html.desktop класс — ставит desktop-bootstrap.js
   при наличии Tauri runtime. В web-сборке остаётся display:none.

   Высота 1.86rem (~26px на font-size 14px). Glassmorph поверх ambient canvas.

   Layout (Windows-order — кнопки справа, как в Discord/Spotify):
   ┌──────────────────────────────────────────────────┐
   │ <─── drag region ───>                  ─  □  ×  │
   └──────────────────────────────────────────────────┘

   data-tauri-drag-region на header и .void-titlebar-drag — target клика
   без атрибута (сами кнопки) не двигает окно. allow-start-dragging должен
   быть в capabilities — иначе drag молча игнорируется. */

html.desktop {
    --titlebar-h: 2.1rem;
}

.void-titlebar { display: none; }

html.desktop .void-titlebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--titlebar-h);
    z-index: 200;
    display: flex;
    align-items: center;
    padding: 0 0.71rem;
    background: rgba(10, 10, 11, 0.78);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    user-select: none;
    -webkit-user-select: none;
}

html.desktop .void-titlebar-drag {
    flex: 1 1 auto;
    height: 100%;
    min-width: 0;
}

html.desktop .void-titlebar-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.14rem;
    flex-shrink: 0;
}

/* Кнопки окна — стиль кастомного установщика (installer/dist/installer.css
   .v-winbtn): плоские прямоугольные 30×24, иконка видна ВСЕГДА (idle тусклая
   #4d4d54), без обводки/кружков. hover — серый фон #101012 + иконка светлеет
   до #8a8a90; close на hover — тёплый красный --signal-warn. Значения-литералы
   из токенов установщика (--bg-1/--fg-2/--fg-3/--radius), чтобы не тащить в
   public чужие имена переменных. */
html.desktop .void-titlebar-btn {
    /* Отдельные чипы, а НЕ виндовские full-height кнопки: высота заметно
       меньше бара (1.86rem), поэтому при align-items:center остаётся воздух
       сверху/снизу — кнопка читается как самостоятельный квадратик.
       Размеры в rem (а не px) — чтобы масштабироваться вместе с --auto-scale,
       как остальной UI (CONTEXT.md §14). border-radius — хайрлайн, остаётся px. */
    width: 2.05rem;
    height: 1.55rem;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
    flex-shrink: 0;
    background: transparent;
    color: #4d4d54;
    transition: color var(--t-fast), background var(--t-fast);
}

html.desktop .void-titlebar-btn:hover {
    color: #8a8a90;
    background: #101012;
}

html.desktop .void-titlebar-close:hover {
    color: var(--signal-warn);
}

/* Stroke-иконки, цвет наследуется от кнопки (currentColor). 14×14 фикс —
   viewBox 16 рисует глиф в bbox 6×6 по центру → ~5px визуально, на сетке. */
html.desktop .void-titlebar-btn svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
    pointer-events: none;
}

/* Maximize ↔ Restore: переключение иконки по is-maximized классу. */
html.desktop .void-titlebar-max .void-titlebar-icon-restore { display: none; }
html.desktop .void-titlebar-max.is-maximized .void-titlebar-icon-max { display: none; }
html.desktop .void-titlebar-max.is-maximized .void-titlebar-icon-restore { display: block; }

/* ============ Сдвиг существующих fixed-элементов под titlebar ============
   Каждый из них опирается на top:0 в своём CSS — компенсируем через
   var(--titlebar-h). В web переменная = 0, поэтому web-layout не задет. */

html.desktop .intro,
html.desktop .app {
    padding-top: var(--titlebar-h);
}

html.desktop .chat-panel {
    top: var(--titlebar-h);
}

html.desktop .chat-toggle {
    top: calc((var(--hdr-h) - 1rem) / 2 + var(--titlebar-h));
}

html.desktop .settings-panel {
    top: var(--titlebar-h);
}

/* Settings hint (стрелочка "нажми чтобы открыть") — position:fixed относительно
   viewport, наш titlebar поверх. Без поправки hint попадает ПОД titlebar и
   стрелка не указывает на лого. Сдвигаем вниз ровно на высоту титлбара. */
html.desktop .settings-hint {
    top: calc(5rem + var(--titlebar-h));
}

/* Close-кнопка лайтбокса (картинка из чата). Оверлей растянут inset:0, то есть
   от самого верха окна, а z-index:90 < titlebar z-index:200 → крестик в правом
   верхнем углу попадал бы ПОД titlebar и его кнопки. Сдвигаем вниз на высоту
   титлбара.

   Демке такая поправка НЕ нужна и раньше ломала ей отступ: .screen-overlay сам
   начинается с top: var(--titlebar-h), поэтому крестик внутри него уже ниже
   титлбара — вторая добавка уводила его вниз на лишнюю высоту, и отступ сверху
   переставал совпадать с отступом справа. */
html.desktop .chat-lightbox-close {
    top: calc(1.43rem + var(--titlebar-h));
}