/**
 * 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; }

/* 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; }

/* ── 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;
}

/* ── 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;
}

/* ── 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;
}
@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;
    }
}



/* ── 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; }
}