/**
 * Sleboda AI Agent App — Global Stylesheet
 * 
 * Jediný globálny stylesheet pre celú aplikáciu.
 * Pravidlo: žiadne inline CSS, žiadne per-súbor styling.
 * Farby, fonty a ďalšie dizajnové tokeny sú definované v tailwind.config
 * (v head.php) a tu.
 *
 * PHP 8.3, no frameworks. CDN TailwindCSS only.
 */

/* ── Base ──────────────────────────────────────────────────────────── */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Alpine.js cloak ────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Focus ring reset (remove native blue outline site-wide) ───────── */
button:focus, a:focus, [tabindex]:focus {
    outline: none !important;
    box-shadow: none !important;
}
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(92, 73, 67, 0.25) !important;
}

/* ── Language dropdown — custom arrow ──────────────────────────────── */
select.lang-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c7b74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}

/* ── Form inputs ────────────────────────────────────────────────────── */
input[type=range] { accent-color: #5c4943; }

/* ── Mobile height fix ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    body, html { height: 100%; height: 100dvh; overflow: hidden; width: 100%; }
    main { height: 100%; }
}

/* ── Recording pulse animation ─────────────────────────────────────── */
.recording-pulse { animation: pulse-red 1.5s infinite; }
@keyframes pulse-red {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* ── VAD indicator bars (voice activity detection) ─────────────────── */
.vad-bar {
    display: inline-block;
    width: 3px;
    background: #5c4943;
    border-radius: 2px;
    margin: 0 1px;
    transition: height 0.1s;
}

.vad-bar-h1 { height: 4px; }
.vad-bar-h2 { height: 8px; }
.vad-bar-h3 { height: 6px; }

/* Auto-resizing chat input */
.chat-input-autoresize { min-height: 2.5rem; max-height: 200px; }
/* dev-1.2.276: on mobile the composer is stacked (text row above, buttons
   row below — see chat.php), so the input can afford to read taller. */
@media (max-width: 767px) {
    .chat-input-autoresize { min-height: 3rem; }
}

/* Sidebar mobile pull-tab spacing */
.sidebar-pulltab { margin-bottom: 13px; }

/* Mention highlight inside chat input overlay */
.mention-hl { background: #e5e3de; color: #5c4943; border-radius: 4px; box-shadow: 0 0 0 2px #e5e3de; }

/* ── Markdown rendering ────────────────────────────────────────────── */
.markdown-body img { margin: 0 !important; display: inline-block !important; }
.markdown-body pre { border-radius: 12px; overflow-x: auto; }
.markdown-body code { font-size: 0.875em; }
.lightbox-wrapper, .image-attach-wrapper {
    width: 30% !important; min-width: 250px !important;
    display: block !important; margin: 10px 0 !important;
}
.lightbox-wrapper img, .image-attach-wrapper img { width: 100% !important; height: auto !important; margin: 0 !important; }

/* dev-1.2.108: image-grid thumbnails (chat attachment grids). The global
   .image-attach-wrapper rule above (30% / min 250px) is for SINGLE inline
   images; inside the multi-image grid it overrides the cell width and the
   250px thumbnails overlap each other. Grid cells take the track width,
   gap-2 provides spacing, click opens the lightbox. */
.grid .lightbox-wrapper, .grid .image-attach-wrapper { width: 100% !important; min-width: 0 !important; margin: 0 !important; }

/* ── Drag & drop highlight ─────────────────────────────────────────── */
.drag-over { border-color: #5c4943 !important; background: #f9f6f0 !important; }

/* ── Sidebar transition (mobile slide-up) ─────────────────────────── */
.sidebar-transition {
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* ── Logo shadow (login page) ──────────────────────────────────────── */
.logo-shadow {
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

/* ── Activity indicator: 3 bouncing dots ── */
.bounce-delay-1 { animation: bounce 1s infinite 0ms; }
.bounce-delay-2 { animation: bounce 1s infinite 150ms; }
.bounce-delay-3 { animation: bounce 1s infinite 300ms; }

/* ── Favicon thinking-pulse (chat "thinking" indicator) ──────────────── */
/* Gentle opacity breath — favicon fades in/out without rotation or deformation */
@keyframes thinking-pulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}
.favicon-spinner {
    animation: thinking-pulse 1.4s ease-in-out infinite !important;
    display: inline-block !important;
}

/* ── Typing dots (replaces "thinking..." filler text, dev-1.2.309) ──── */
@keyframes typing-dot-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40%           { transform: translateY(-3px); opacity: 1; }
}
.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: currentColor;
    animation: typing-dot-bounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

/* ── Browsing green-dot overlay ────────────────────────────────────── */
/* When .browsing-dot class is added to the favicon, a small green dot
   appears in the bottom-right corner via ::after pseudo-element. */
.favicon-wrap {
    position: relative;
    display: inline-block;
}
.favicon-wrap.browsing-dot::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.6);
    animation: browsing-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes browsing-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.7; }
}


/* ── Page layout components ────────────────────────────────────────── */
/* Unified layout classes used across all pages (agents, rules, KB, etc.) */
/* Replaces repeated inline Tailwind utility strings with single classes. */

.page-main {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 56px;
    overflow: hidden;
}
.page-main--cream { background: #f9f6f0; }
.page-main--white { background: #ffffff; }

@media (min-width: 768px) {
    .page-main {
        margin: 0.5rem;
        margin-left: 0;
        height: calc(100vh - 16px);
        border-radius: 2rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        border: 1px solid #e5e3de;
    }
}

.page-header {
    height: 80px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #4a3a35;
    background: #5c4943;
    flex-shrink: 0;
}
.page-header--wide { padding: 0 1rem; }
@media (min-width: 768px) {
    .page-header {
        padding: 0 2rem;
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
    }
    .page-header--wide { padding: 0 2rem; }
}

.page-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.025em;
}
@media (min-width: 768px) {
    .page-title {
        font-size: 1.5rem;
    }
}

.page-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}
@media (min-width: 768px) {
    .page-content {
        padding: 2rem;
    }
}

.btn-add {
    background: #ffffff;
    color: #5c4943;
    font-weight: 700;
    border-radius: 25px;
    font-size: 0.875rem;
    transition: background 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    margin-left: auto;
    cursor: pointer;
    border: none;
}
.btn-add:hover {
    background: #f9f6f0;
}
.btn-icon-round {
    border-radius: 50% !important;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
}
@media (min-width: 768px) {
    .btn-add {
        width: auto;
        height: auto;
        padding: 0.625rem 1.25rem;
    }
    .btn-add-icon {
        display: none;
    }
    .btn-add-text {
        display: inline;
    }
}
@media (max-width: 767px) {
    .btn-add-icon {
        display: inline;
        font-size: 1.125rem;
        line-height: 1;
    }
    .btn-add-text {
        display: none;
    }
}

.mobile-menu-btn {
    display: none; /* Hidden globally — replaced by mobile bottom nav bar */
    padding: 0.5rem;
    margin-left: -0.5rem;
    color: rgba(255, 255, 255, 0.8);
}
.mobile-menu-btn:hover {
    color: #ffffff;
}

/* Placeholder for header right side when no add button (keeps title centered) */
.header-spacer {
    width: 2.5rem;
    margin-left: auto;
}

/* ── Page content modifiers ────────────────────────────────────────── */
.page-content--cream { background: #f9f6f0; }

/* ── Automations page special overrides ────────────────────────────── */
.page-main--auto {
    position: relative;
    padding-top: env(safe-area-inset-top);
    border-radius: 0 0 2rem 2rem;
}
.page-header--full {
    width: 100%;
}
.page-content--auto {
    padding: 1.5rem;
    padding-bottom: 8rem;
}
@media (min-width: 768px) {
    .page-content--auto {
        padding: 2rem;
        padding-bottom: 2rem;
    }
}
@media (min-width: 1024px) {
    .page-content--auto {
        padding: 3rem;
    }
}



/* ── Content card (global, used in Master Zone + workspace subpages) ── */
.content-card {
    background: #f9f6f0;
    border-radius: 25px;
    border: 1px solid #e5e3de;
    padding: 1.5rem;
}
.content-card--white {
    background: #ffffff;
}
.content-card--sm {
    border-radius: 20px;
}

/* ── Mobile bottom navigation bar ──────────────────────────────────── */
.mobile-nav-bar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    
    transition: box-shadow 0.3s ease;
}
.mobile-nav-bar { pointer-events: none; }
.mobile-nav-bar button { pointer-events: auto; }
.mobile-nav-bar--open {
    
}

/* ── Reserve space above the floating mobile nav button so it never
     overlaps the chat input row (menu button is fixed bottom-0). ── */
@media (max-width: 767px) {
    #dropZone {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* dev-1.2.65: while the on-screen keyboard is open (a form field is
       focused — see keyboard-viewport.js), the 78px reserved for the
       floating mobile nav button is dead space above the keyboard.
       Shrink it down to a small fixed gap instead. */
    body.kb-open #dropZone {
        padding-bottom: 12px !important;
    }
}



/* ── Send/Phone button swap-on-hover ────────────────────────────────── */
.send-phone-btn {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.25s ease,
                color 0.25s ease;
}


/* ── Favicon spin on reload (swipe-right or pull-to-refresh) ──────────── */
@keyframes reload-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(720deg); }
}
.favicon-reloading {
    animation: reload-spin 0.5s ease-out forwards !important;
}

/* ── Mobile back button (chat header) ──────────────────────────────────── */
.mobile-back-btn {
    display: none;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
    margin-left: -4px;
    align-items: center;
    justify-content: center;
}
.mobile-back-btn:active { color: #fff; }
@media (max-width: 767px) {
    .mobile-back-btn { display: inline-flex; }
}

/* ── iOS Safari auto-zoom prevention (2026-09-10) ─────────────────────
   iOS Safari zooms the viewport into any focused form field with
   font-size < 16px. Force 16px on all inputs/textareas/selects on
   touch devices. #chatInputBackdrop mirrors the textarea (mention
   highlights) so it must match, otherwise overlay text misaligns. */
@media (pointer: coarse) {
    input, select, textarea { font-size: 16px !important; }
    #chatInputBackdrop { font-size: 16px !important; }
}

/* ── Attach "+" wheel menu (chat input) ─────────────────────────────── */
/* dev-1.2.75 (Lukas sketch v2): disc shrunk 30% (R = 91px), gray-white
   50% ground glass, HARD edge (no feather, no tinted fade), only the
   SECTOR with the icons is visible (inline SVG mask). The two
   connecting lines are now SEE-THROUGH channels cut out of the glass
   (4px wide) and there is a see-through ring (~20px) around the "+",
   so you see what is behind the disc through both. Brown icons sit
   closer to the "+" (r = 52px) and pop straight out on open — the
   wheel rolls ONLY when there are more icons than the sector holds
   (assets/attach-menu.js, dev-1.2.75). */
.attach-plus-btn {
    position: relative;
    z-index: 90;            /* stays ON TOP of the glass sector */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.attach-plus-btn:active { transform: scale(0.92); }
/* the "+" spins 45deg clockwise into an "x" while the fan is open */
#attachMenuBtn.fan-plus-open { transform: rotate(45deg); }

.attach-fan {
    /* FIXED so the disc escapes the chat pane's overflow:hidden —
       left/top (viewport coords, centered on the "+") are set inline
       by assets/attach-menu.js. */
    position: fixed;
    width: 220px;
    height: 220px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 70;
}
.attach-fan-open { pointer-events: auto; }

.fan-wheel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
    transform-origin: 50% 50%;
    transition: transform 0.55s cubic-bezier(0.22, 1.18, 0.32, 1);
}



/* tiles around the "+" at r = 70px, dev-1.2.77: wheel rotated 45deg right —
   tiles sit at 3:00 / 1:30 / 12:00, arc on the UPPER RIGHT (~2 o'clock per Lukas) */
/* dev-1.2.76: each icon sits on its OWN quadrilateral cut-out tile
   (rounded 12px per Lukas) — the tiles together form the ILLUSION of a
   circle around the "+" with 4-5px gaps; page background stays visible */
.fan-item {
    position: absolute;
    left: 50%;
    top: 50%;
    /* dev-1.2.79c: ring-SEGMENT background per Lukáš's sketch (no squares):
       a 44x40 box clipped into a circular segment of the ring around the
       "+" — flat base toward the center, straight radial sides, outer edge
       an arc of the big circle (sketch: "vonkajšok akoby do kruhového tvaru").
       The element is rotated per tile (--fan-rot), the glyph counter-rotated
       so icons stay upright. */
    width: 44px;
    height: 40px;
    margin: -20px 0 0 -22px;
    /* segment: flat base on the r=62 line, sides along the ±12° radii,
       outer edge = arc of the r=98 circle (both arcs centred on the "+") */
    /* dev-1.2.79c: 5 segments, 22.5 deg slots — sides along +-10 deg radii */
    clip-path: path("M 11.2 39 L 5 3.5 A 98 98 0 0 1 39 3.5 L 32.8 39 Z");
    border-radius: 0;
    /* dev-1.2.79d (Lukas): BROWN boxes, WHITE icons, shadow under them */
    background: #5b4c49;
    -webkit-filter: drop-shadow(0 7px 16px rgba(58, 44, 38, 0.5));
    filter: drop-shadow(0 7px 16px rgba(58, 44, 38, 0.5));
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* brown glyphs on the white glass */
.fan-item svg {
    width: 16px;
    height: 16px;
    color: #ffffff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
    /* dev-1.2.79c: keep glyphs upright while the segment itself rotates */
    transform: rotate(calc(-1 * var(--fan-rot, 0deg)));
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* dev-1.2.79c: ::after halo removed — clip-path clips it to the segment
   anyway; the drop-shadow filter on the element carries the halo. */
.fan-item:hover svg { transform: rotate(calc(-1 * var(--fan-rot, 0deg))); }
.fan-item:active svg { transform: rotate(calc(-1 * var(--fan-rot, 0deg))) scale(0.95); }

/* dev-1.2.79c: FOUR segments at exact clock hours 12-3 (Lukáš), r = 80px,
   30° apart — upload 3:00, file picker 2:00, KB picker 1:00, connectors
   12:00. Each element rotates so its segment points outward (--fan-rot),
   the glyph inside counter-rotates and stays upright.
   dev-1.2.79b: segments rotate so the SHORT side faces the "+" (local
   down = toward center). Hover: zoom 1.8x in place, overlap allowed,
   no spread (see below). */
.fan-item-1 { --fan-rot: 90deg; transform: translate(80px, 0) rotate(90deg) scale(0.4); }
.fan-item-2 { --fan-rot: 67.5deg; transform: translate(73.9px, -30.6px) rotate(67.5deg) scale(0.4); }
.fan-item-3 { --fan-rot: 45deg; transform: translate(56.6px, -56.6px) rotate(45deg) scale(0.4); }
.fan-item-4 { --fan-rot: 22.5deg; transform: translate(30.6px, -73.9px) rotate(22.5deg) scale(0.4); }
.fan-item-5 { --fan-rot: 0deg; transform: translate(0, -80px) scale(0.4); }
.attach-fan-open .fan-item-1 { transform: translate(80px, 0) rotate(90deg) scale(1); opacity: 1; pointer-events: auto; transition-delay: 0.08s, 0.08s; }
.attach-fan-open .fan-item-2 { transform: translate(73.9px, -30.6px) rotate(67.5deg) scale(1); opacity: 1; pointer-events: auto; transition-delay: 0.13s, 0.13s; }
.attach-fan-open .fan-item-3 { transform: translate(56.6px, -56.6px) rotate(45deg) scale(1); opacity: 1; pointer-events: auto; transition-delay: 0.18s, 0.18s; }
.attach-fan-open .fan-item-4 { transform: translate(30.6px, -73.9px) rotate(22.5deg) scale(1); opacity: 1; pointer-events: auto; transition-delay: 0.23s, 0.23s; }
.attach-fan-open .fan-item-5 { transform: translate(0, -80px) scale(1); opacity: 1; pointer-events: auto; transition-delay: 0.28s, 0.28s; }
/* dev-1.2.79b (Lukas): hover = zoom 1.8x IN PLACE, no spreading — the
   hovered segment simply overlaps its neighbours; hovered sits on top. */
/* dev-1.2.79c (Lukas): hover = zoom 1.4x in place, overlap allowed */
.attach-fan-open .fan-item:hover { z-index: 10; }
.attach-fan-open .fan-item-1:hover { transform: translate(80px, 0) rotate(90deg) scale(1.4); }
.attach-fan-open .fan-item-2:hover { transform: translate(73.9px, -30.6px) rotate(67.5deg) scale(1.4); }
.attach-fan-open .fan-item-3:hover { transform: translate(56.6px, -56.6px) rotate(45deg) scale(1.4); }
.attach-fan-open .fan-item-4:hover { transform: translate(30.6px, -73.9px) rotate(22.5deg) scale(1.4); }
.attach-fan-open .fan-item-5:hover { transform: translate(0, -80px) scale(1.4); }

/* invisible click-catcher only (Lukas: no dim overlay) */
.fan-dim {
    position: fixed;
    inset: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 39;
}
.fan-dim-on { opacity: 1; }

/* the "+" button — brown when the wheel is open */
.attach-plus-btn[aria-expanded="true"] {
    background: #5b4c49;
    border-color: #5b4c49;
}


/* dev-1.2.80 (Lukas): fan icon tooltip (1s hover, fixed, viewport-clamped) */
.app-tip {
    position: fixed;
    z-index: 80;
    background: #3d322c;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}
.app-tip-on { opacity: 1; }

/* ── Chat input: hidden scrollbar (caret drift fix, dev-1.2.106) ────────
   The chat input mirrors typed text in a backdrop div (#chatInputBackdrop).
   When content exceeds the 200px cap, the native scrollbar shrinks the
   textarea content width by the scrollbar width (6px) while the backdrop
   stays full width — line wrapping diverges and the caret detaches from the
   visible text (measured 55px drift on backoffice). Hiding the scrollbar
   keeps both layouts pixel-identical; scrolling (wheel/keyboard) still works
   and onscroll keeps the backdrop in sync. */
#chatInput { scrollbar-width: none; -ms-overflow-style: none; }
#chatInput::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ── dev-1.2.123: mobile — cap the attach "+" button under the sidebar
   overlay/panel. On mobile the open sidebar (z-65) + overlay (z-40) must
   cover the whole chat pane; the "+" was leaking through at z-90.
   Desktop keeps z-90 (above the glass sector). ── */
@media (max-width: 767px) {
    #attachMenuBtn { z-index: 30; }
}

/* ── dev-1.2.146: ask_user options card — ANSWERED state.
   When the user picks an option, the chosen button stays MARKED in the chat
   (Lukáš: "keď vyberiem štýl a označím odpoveď, musí ostať v chate označená"):
   filled brown with a check, the others dimmed and inert. The state survives
   reloads — the static renderer derives it from the next user message. ── */
.ask-opt-selected {
    background-color: #5c4943 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
    pointer-events: none;
}
.ask-opt-dimmed {
    opacity: .5;
    pointer-events: none;
}

/* dev-1.2.186: fan item 6 (project panel) — continues the item1..5 arc
   22.5deg past item 5 (top), matching the existing 22.5deg step pattern. */
.fan-item-6 { --fan-rot: -22.5deg; transform: translate(-30.6px, -73.9px) rotate(-22.5deg) scale(0.4); }
.attach-fan-open .fan-item-6 { transform: translate(-30.6px, -73.9px) rotate(-22.5deg) scale(1); opacity: 1; pointer-events: auto; transition-delay: 0.33s, 0.33s; }
.attach-fan-open .fan-item-6:hover { transform: translate(-30.6px, -73.9px) rotate(-22.5deg) scale(1.4); }


/* dev-1.2.216: FINAL / UNUSED are two permanent same-style pills below the
   card (Lukas 2026-09-26 re-test) — replaces the 1.2.207 "collapse to gold
   star only, hide everything else" behavior, which fought the 1.2.213
   "always visible" row and hid Nepoužívať + Odpovedat as soon as a file was
   marked final. Both pills now stay visible in EVERY state; marking final
   only changes the pill's own look (gold fill) and re-labels it to unmark.
   Filled backgrounds + white text, matching border/size across all attach
   render paths (history reload, live tool render, JS renderFileCard). */
.file-attach-wrapper.att-below { display: flex; flex-direction: column; align-items: flex-start; }
.file-attach-wrapper.att-below .att-btn-row { position: static; opacity: 1; margin-top: 6px; }
.mark-final-btn, .unused-btn {
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 9999px;
    border: 1px solid transparent; color: #ffffff; transition: filter .15s;
}
.mark-final-btn:not(.is-final) { background: #d4a017; border-color: #b8860b; }
.mark-final-btn:not(.is-final):hover { filter: brightness(0.92); }
.mark-final-btn.is-final { background: #b8860b; border-color: #96700a; width: auto; height: auto; }
.mark-final-btn.is-final:hover { filter: brightness(0.92); }
.unused-btn { background: #d7503f; border-color: #c23f2f; }
.unused-btn:hover { filter: brightness(0.92); }

/* dev-1.2.230: ask_user card icon — gothic question mark (UnifrakturMaguntia),
   Lukáš's pick #1 from the typographic set. Falls back to serif offline. */
.ask-user-glyph {
    font-family: 'UnifrakturMaguntia', 'Georgia', serif;
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* dev-1.2.260: ask_user card question — a multi-step plan detected inside
   the question renders as a real numbered/bulleted list (Lukáš: "musí byť
   v bodoch a v zozname"), matching the card's existing brown/bold palette
   instead of Tailwind's neutral "prose" typography. */
.ask-user-question p { margin: 0 0 0.5rem 0; }
.ask-user-question p:last-child { margin-bottom: 0; }
.ask-user-question ol, .ask-user-question ul { margin: 0.35rem 0 0.5rem 1.25rem; padding: 0; }
.ask-user-question ol { list-style: decimal; }
.ask-user-question ul { list-style: disc; }
.ask-user-question li { margin: 0.2rem 0; }
/* ── dev-1.2.284 (Lukáš: "dlhý plán do poľa ~200px, scroll + slider na boku") ──
   The plan-card item list becomes a compact fixed-height scroll area: short
   plans render naturally, long plans cap at 200px with a visible thin slider.
   scroll-behavior stays AUTO here — smoothness is applied only
   programmatically (planScrollApply), so manual wheel/touch scrolling never
   feels laggy. overscroll-behavior:contain stops the inner scroll from
   chaining to the page while the user is inside the plan area. */
[data-plan-scroll] {
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;              /* Firefox: thin + themed */
    scrollbar-color: #d8c6b0 #fdf6ec;
}
[data-plan-scroll]::-webkit-scrollbar { width: 8px; }          /* the slider */
[data-plan-scroll]::-webkit-scrollbar-track { background: #fdf6ec; border-radius: 4px; }
[data-plan-scroll]::-webkit-scrollbar-thumb {
    background: #d8c6b0; border-radius: 4px; border: 2px solid #fdf6ec;
}
[data-plan-scroll]::-webkit-scrollbar-thumb:hover { background: #c9b8a9; }

/* ─── dev-1.2.302: SIDE DOCK (chat.php #sideDock) ───────────────────────────
   Plan panel + status pills floating bottom-right above the composer.
   Visibility is state-driven via .is-on (JS toggles it); Tailwind's hidden /
   md:flex pair would fight at the breakpoint, so the display rules live here.
   PC: full pills. Mobile (<768px): colored icon dots only — a pill shows for
   10s while it carries .is-peek (tap = peek), then collapses back to the dot. */
.dock-item { display: none; }
.dock-item.is-on { display: flex; }
@media (max-width: 767.98px) {
    .dock-pill.is-on:not(.is-peek) { display: none; }
}