/*
=================================
ZÁKLADNÍ A GLOBÁLNÍ STYLY
=================================
*/

:root {
    /* Firemní barevná paleta */
    --c-primary: #63b3e0;
    /* Modrá */
    --c-secondary: #495057;
    /* Tmavě šedá (pro odkazy v sidebaru/patičce) */
    --c-accent: #ffd200;
    /* Žlutá */

    --c-text: #212529;
    /* Téměř černá pro hlavní text */
    --c-text-muted: #6c757d;
    /* Středně šedá pro méně důležitý text */

    --c-bg-body: #f6f6f6;
    /* Tělo stránky - velmi světlá šedá */
    --c-bg-container: #ffffff;
    /* Kontejnery, karty - bílá pro kontrast */
    --c-bg-subtle: #eaf0f2;
    /* Jemné pozadí pro hover, atd. */
    --c-bg-light: #eae8df;
    /* Světle béžová pro patičky, atd. */

    --c-border: #d7e2e6;
    /* Okraje */
    --c-border-light: #eaf0f2;
    /* Světlejší okraje */

    --c-danger: #dc3545;
    /* Červená pro chyby */
    --c-success: #28a745;
    /* Zelená pro úspěch */
    --c-warning: #ffd200;
    /* Žlutá pro varování */
    --c-info: #63b3e0;
    /* Modrá pro informace */

    /* RGB verze pro použití v rgba() */
    --c-primary-rgb: 99, 179, 224;
    --c-danger-rgb: 220, 53, 69;
    --c-text-rgb: 33, 37, 41;

    /* Bootstrap proměnné přepsané naší paletou */
    --bs-primary: var(--c-primary);
    --bs-secondary: var(--c-secondary);
    --bs-body-bg: var(--c-bg-container);
    --bs-body-color: var(--c-text);
    --bs-emphasis-color: var(--c-text);
    --bs-secondary-color: var(--c-text-muted);
    --bs-tertiary-bg: var(--c-bg-subtle);
    --bs-border-color: var(--c-border);
    --bs-border-color-translucent: rgba(var(--c-text-rgb), 0.175);
    --bs-primary-bg-subtle: rgba(var(--c-primary-rgb), 0.15);
    --bs-primary-emphasis-color: #4a98c7;
    /* Ztmavená primární */

    /* Původní proměnné layoutu */
    --bs-body-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --sidebar-width: 16.25rem;
    /* 260px */
    --sidebar-width-collapsed: 3.375rem;
    /* 54px */
    --top-header-height: 3.75rem;
    /* 60px */
    --footer-height: 3.25rem;
    /* 52px */
    /* NOVÁ PROMĚNNÁ: Jednotná výška patičky */
    --transition-speed: 0.25s;

    /* Proměnné komponent namapované na novou paletu */
    --sidebar-bg: var(--c-bg-container);
    --sidebar-link-color: var(--c-secondary);
    --sidebar-link-hover-bg: var(--c-bg-subtle);
    --sidebar-link-active-color: var(--c-primary);
    --sidebar-link-active-bg: rgba(var(--c-primary-rgb), 0.1);
}

html {
    font-size: 16px;
    /* Nastavení základní velikosti pro rem */
}

body {
    font-family: var(--bs-body-font-family);
    background-color: var(--c-bg-body);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    max-width: 87.5rem;
    /* 1400px */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

a {
    color: var(--bs-primary);
}

a:hover {
    color: var(--bs-primary-emphasis-color);
}

/* Animace načtení obsahu */
@keyframes contentFadeInUp {
    from {
        opacity: 0;
        transform: translateY(0.9375rem);
        /* 15px */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-load {
    animation: contentFadeInUp 0.6s ease-out forwards;
}

/* Stylování scrollbaru */
::-webkit-scrollbar {
    width: 0.625rem;
    /* 10px */
    height: 0.625rem;
    /* 10px */
}

::-webkit-scrollbar-track {
    background: var(--c-bg-subtle);
}

::-webkit-scrollbar-thumb {
    background: #d6d1c1;
    border-radius: 0.625rem;
    /* 10px */
    border: 2px solid var(--c-bg-subtle);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--c-text-muted);
}


/*
=================================
NOVÝ LAYOUT SE SIDEBAREM
=================================
*/
.app-container {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 1fr;
    /* Patička je nyní součástí .content-wrapper, proto je zde jen jeden řádek. */
    grid-template-areas:
        "sidebar content";
    height: 100dvh;
    overflow: hidden;
    transition: grid-template-columns var(--transition-speed) ease;
}

.content-wrapper {
    grid-area: content;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    /* Nutný flexbox/grid fix pro přetékající obsah. */
}

.main-content {
    flex-grow: 1;
    /* Hlavní obsah zabere veškeré zbývající místo. */
    overflow-y: auto;
    /* KLÍČOVÉ: Toto je jediný prvek, který se bude posouvat. */
    position: relative;
    transition: padding 0.2s ease-in-out;

    animation: fadeInUpContent 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.sidebar {
    grid-area: sidebar;
    width: var(--sidebar-width);
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    /* OPRAVA: Odebrání 'transform' z globálního přechodu.
     * Zabrání se tak animaci sidebaru při načtení stránky na mobilu.
    */
    transition: width var(--transition-speed) ease;
    overflow-x: hidden;
}

.sidebar-header {
    height: var(--top-header-height);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}

.sidebar-brand {
    display: inline-block;
}

.sidebar-logo-full {
    height: 2.25rem;
    /* 36px */
    display: block;
}

.sidebar-logo-mini {
    height: 2rem;
    /* 32px */
    display: none;
}

.sidebar-nav {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem 0.75rem;
}

.sidebar-link {
    position: relative;
    /* Pro absolutní pozicování potomků (např. odznaků). */
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
    border-radius: 0.5rem;
    /* 8px */
    color: var(--sidebar-link-color);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.sidebar-link i.fa-fw {
    width: 1.25em;
    font-size: 1.1rem;
    margin-right: 1rem;
    flex-shrink: 0;
    text-align: center;
    transition: color 0.2s ease-in-out;
    /* Přidána plynulá změna barvy */
}

.sidebar-link .sidebar-link-text {
    flex-grow: 1;
    opacity: 1;
    transition: opacity var(--transition-speed) ease;
}

.sidebar-link .submenu-arrow {
    font-size: 0.7rem;
    margin-left: auto;
    transition: transform var(--transition-speed) ease;
}

.sidebar-link:not(.collapsed) .submenu-arrow {
    transform: rotate(180deg);
}

.sidebar-link:hover {
    background-color: var(--sidebar-link-hover-bg);
    color: var(--sidebar-link-active-color);
}

.sidebar-link.active {
    background: linear-gradient(90deg, rgba(var(--c-primary-rgb), 0.15) 0%, transparent 100%);
    color: var(--sidebar-link-active-color);
    border-left: 3px solid var(--c-primary);
    /* Indikátor vlevo */
    border-radius: 0 0.5rem 0.5rem 0;
    /* Zaoblení jen vpravo */
    font-weight: 600;
}

.submenu {
    padding-left: 1rem;
    margin-left: 0.6rem;
    border-left: 1px solid var(--c-border);
}

.submenu .submenu-link {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--c-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 0.375rem;
    /* 6px */
    white-space: nowrap;
}

.submenu .submenu-link:hover {
    color: var(--c-primary);
    background-color: var(--c-bg-subtle);
}

.submenu-header {
    color: var(--c-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1rem 0.75rem 0.5rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.submenu-divider {
    height: 1px;
    margin: 0.75rem;
    background-color: var(--c-border-light);
}

/* ===== NOVÁ PATIČKA SIDEBARU A TLAČÍTKO ===== */
.sidebar-footer {
    height: var(--footer-height);
    border-top: 1px solid var(--c-border);
    flex-shrink: 0;
    position: relative;
}

.sidebar-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    z-index: 10;
    width: 2.25rem;
    /* 36px */
    height: 2.25rem;
    /* 36px */
    border-radius: 50%;
    background-color: var(--c-bg-body);
    border: 1px solid var(--c-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

.sidebar-toggle-btn:hover {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: white;
    transform: translate(50%, -50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(var(--c-primary-rgb), 0.3);
}

.sidebar-toggle-btn i {
    transition: transform var(--transition-speed) ease;
    /* Ikona 'angles-left' není opticky centrovaná, provedeme malý posun */
    margin-left: -2px;
}


/* ===== Sbalený stav Sidebaru ===== */
body.sidebar-collapsed .app-container {
    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

body.sidebar-collapsed .sidebar {
    width: var(--sidebar-width-collapsed);
}

body.sidebar-collapsed .sidebar-logo-full,
body.sidebar-collapsed .sidebar-link-text,
body.sidebar-collapsed .submenu-arrow {
    opacity: 0;
    width: 0;
    display: none;
}

body.sidebar-collapsed .sidebar-logo-mini {
    display: block;
}

body.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: 0;
}

/* NOVÝ BLOK PRO ZAROVNÁNÍ IKON */
body.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

body.sidebar-collapsed .sidebar-link i.fa-fw {
    margin-right: 0;
}

body.sidebar-collapsed .submenu {
    display: none !important;
}

body.sidebar-collapsed .sidebar-toggle-btn i {
    transform: rotate(180deg);
    /* Po otočení je potřeba opačný posun pro zarovnání */
    margin-left: 0;
    margin-right: -2px;
}

body.sidebar-collapsed .sidebar-nav {
    padding-left: 0;
    padding-right: 0;
}

/* --- ZMĚNA: Nová logika pro odznak nepřečtených emailů --- */
/* Skryje číselný odznak ve sbaleném sidebaru, protože ho nahrazuje barevná ikona. */
body.sidebar-collapsed #inbox-unread-count {
    display: none !important;
}

/* Obarví ikonu emailové sekce červeně, pokud jsou zde nepřečtené zprávy a sidebar je sbalený. */
body.sidebar-collapsed .sidebar-link.has-unread .fa-envelope {
    color: var(--c-danger);
    animation: bell-shake 0.8s cubic-bezier(.36, .07, .19, .97) both;
    /* Bonusová animace */
}

/*
=================================
VARIANTA S POSTARNÍM PANELEM VPRAVO
=================================
*/
.sidebar-on-right .sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--c-border);
    box-shadow: -1px 0 5px rgba(0, 0, 0, 0.05);
}

.sidebar-on-right .content-wrapper {
    margin-left: 0;
    margin-right: var(--sidebar-width);
}

body.sidebar-collapsed .sidebar-on-right .content-wrapper {
    margin-left: 0;
    margin-right: var(--sidebar-width-collapsed);
}


/*
=================================
NOVÁ HORNÍ LIŠTA (HEADER)
=================================
*/
.top-header {
    height: var(--top-header-height);
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1020;
    flex-shrink: 0;
    /* Zajišťuje, že se header nesmrští. */
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    .top-header {
        background-color: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.top-header .btn-outline-secondary {
    width: 2.625rem;
    /* 42px */
    height: 2.625rem;
    /* 42px */
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
=================================
UŽIVATELSKÝ PROFIL V HEADERU
=================================
*/
.navbar-user-avatar {
    width: 2.375rem;
    /* 38px */
    height: 2.375rem;
    /* 38px */
    border-radius: 50%;
    object-fit: cover;
    margin-right: 0.625rem;
    /* 10px */
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.navbar-profile-btn {
    border-radius: 50rem;
    padding: 0.125rem 0.625rem 0.125rem 0.125rem;
    /* 2px 10px 2px 2px */
    transition: background-color 0.2s ease;
}

.navbar-profile-btn:hover {
    background-color: var(--c-bg-subtle);
}

.navbar-profile-btn .fa-chevron-down {
    font-size: 0.75rem;
    opacity: 0.8;
}

#profileDropdownToggle:hover .navbar-user-avatar {
    border-color: rgba(var(--c-primary-rgb), 0.3);
}


/*
=====================================================
PROFILOVÉ A NOTIFIKAČNÍ DROPDOWN MENU - REDESIGN
=====================================================
*/
.user-profile-dropdown,
.notifications-panel-container {
    position: absolute;
    z-index: 1021;
    min-width: 15rem;
    /* 240px */
    background: var(--c-bg-container);
    border-radius: 0.75rem;
    /* 12px */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    /* 8px */
    animation: fadeInScaleUp 0.2s ease-out;
    border: 1px solid var(--c-border-light);
    top: 3.625rem;
    /* 58px */
    /* JS řídí finální 'left' pozici */
}

@keyframes fadeInScaleUp {
    from {
        opacity: 0;
        transform: translateY(-0.625rem) scale(0.95);
        /* -10px */
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.arrow-up {
    width: 1.25rem;
    /* 20px */
    height: 0.625rem;
    /* 10px */
    position: absolute;
    top: -0.625rem;
    /* -10px */
    overflow: hidden;
}

.arrow-up::before {
    content: '';
    position: absolute;
    width: 0.875rem;
    /* 14px */
    height: 0.875rem;
    /* 14px */
    background: var(--c-bg-container);
    border: 1px solid var(--c-border-light);
    transform: rotate(45deg);
    top: 0.4375rem;
    /* 7px */
    left: 0.1875rem;
    /* 3px */
    border-right: none;
    border-bottom: none;
}

/* Styly pro položky v profilovém dropdownu */
.user-profile-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* 12px */
    padding: 0.625rem 1rem;
    /* 10px 16px */
    font-size: 0.95rem;
    border-radius: 0.5rem;
    /* 8px */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.user-profile-dropdown .dropdown-item i.fa-fw {
    width: 1.2em;
    text-align: center;
}

.user-profile-dropdown .dropdown-item:hover {
    background-color: var(--c-bg-subtle);
    color: var(--c-primary);
}

.user-profile-dropdown .dropdown-item.text-danger:hover {
    background-color: rgba(var(--c-danger-rgb), 0.1);
    color: var(--c-danger) !important;
}

.user-profile-dropdown hr.dropdown-divider {
    margin: 0.375rem 0.5rem;
    /* 6px 8px */
    border-color: var(--c-border-light);
}


/*
=================================
TLAČÍTKA IKON V HEADERU
=================================
*/
.top-header .notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 1.25rem;
    /* 20px */
    height: 1.25rem;
    /* 20px */
    border-radius: 50%;
    background-color: var(--c-danger);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--c-bg-container);
}

/* Animace pro novou notifikaci */
@keyframes bell-shake {
    0% {
        transform: rotate(0);
    }

    15% {
        transform: rotate(15deg);
    }

    30% {
        transform: rotate(-15deg);
    }

    45% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(5deg);
    }

    90% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0);
    }
}

#notification-bell-btn.new-notification i,
#message-notification-bell-btn.new-notification i {
    animation: bell-shake 0.8s cubic-bezier(.36, .07, .19, .97) both;
}


/*
=================================
NOTIFIKAČNÍ PANEL
=================================
*/
/* Hlavička a patička */
.notifications-header,
.notifications-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    /* 12px 16px */
    border-bottom: 1px solid var(--c-border-light);
    flex-shrink: 0;
}

.notifications-footer {
    border-top: 1px solid var(--c-border-light);
    border-bottom: none;
    gap: 0.625rem;
    /* 10px */
}

.notifications-header h6 {
    margin: 0;
    font-weight: 600;
    color: var(--c-text);
}

.notifications-header .btn-link {
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
}

.notifications-footer .btn {
    flex-grow: 1;
}

/* Seznam notifikací */
.notifications-list {
    max-height: 28.125rem;
    /* 450px */
    overflow-y: auto;
    padding: 0.5rem;
    /* 8px */
}

.notifications-empty {
    padding: 2.5rem 1.25rem;
    /* 40px 20px */
    text-align: center;
    color: var(--c-text-muted);
    font-size: 0.9rem;
}

/* Položka notifikace */
.notification-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* 12px */
    padding: 0.75rem;
    /* 12px */
    border-radius: 0.5rem;
    /* 8px */
    text-decoration: none;
    transition: background-color 0.2s ease;
    border: 1px solid transparent;
    position: relative;
}

.notification-item:not(:last-child) {
    margin-bottom: 0.25rem;
    /* 4px */
}

.notification-item:hover {
    background-color: var(--c-bg-subtle);
}

.notification-item.unread {
    background-color: var(--bs-primary-bg-subtle);
}

.notification-item.unread:hover {
    background-color: rgba(var(--c-primary-rgb), 0.25);
}

.notification-icon-wrapper {
    flex-shrink: 0;
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    /* 40px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon-wrapper>i {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-border-light);
    color: var(--c-text);
    font-size: 1rem;
}

/* NOVÉ: Styly pro avatar (obrázek) v notifikacích zpráv */
.notification-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Zajistí kulatý tvar */
    object-fit: cover;
    /* Ořízne obrázek, aby vyplnil kruh bez deformace */
    background-color: var(--bs-light-bg-subtle);
    /* Záložní barva */
}

.notification-content {
    flex-grow: 1;
    min-width: 0;
}

.notification-content p {
    margin: 0;
    line-height: 1.4;
}

.notification-title {
    font-weight: 600;
    color: var(--c-text);
    font-size: 0.95rem;
}

.notification-message {
    font-size: 0.85rem;
    color: var(--c-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-timestamp {
    font-size: 0.75rem;
    color: var(--c-text-muted);
    margin-top: 0.25rem;
    /* 4px */
}

.notification-unread-dot {
    position: absolute;
    top: 0.75rem;
    /* 12px */
    right: 0.75rem;
    /* 12px */
    width: 0.5rem;
    /* 8px */
    height: 0.5rem;
    /* 8px */
    background-color: var(--c-primary);
    border-radius: 50%;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.notification-item:hover .notification-unread-dot {
    opacity: 0;
    transform: scale(0.5);
}

.notification-actions {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    /* 12px */
    transform: translateY(-50%);
    display: flex;
    gap: 0.375rem;
    /* 6px */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

.notification-item:hover .notification-actions {
    opacity: 1;
    pointer-events: auto;
}

.notification-read-btn,
.notification-delete-btn {
    width: 1.75rem;
    /* 28px */
    height: 1.75rem;
    /* 28px */
    border-radius: 50%;
    border: none;
    background-color: var(--c-border-light);
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.notification-item:hover .notification-read-btn,
.notification-item:hover .notification-delete-btn {
    transform: scale(1);
    opacity: 1;
}

/* Malé zpoždění pro druhé tlačítko pro hezčí animaci */
.notification-item:hover .notification-read-btn+.notification-delete-btn {
    transition-delay: 0.07s;
}

.notification-read-btn:hover {
    background-color: var(--c-success);
    color: white;
    transform: scale(1.15);
}

.notification-delete-btn:hover {
    background-color: var(--c-danger);
    color: white;
    transform: scale(1.15);
}

@keyframes fadeOutAndShrink {
    from {
        opacity: 1;
        transform: scaleY(1);
        max-height: 5rem;
        /* 80px */
        margin-bottom: 0.25rem;
        /* 4px */
        padding-top: 0.75rem;
        /* 12px */
        padding-bottom: 0.75rem;
        /* 12px */
    }

    to {
        opacity: 0;
        transform: scaleY(0);
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border: none;
    }
}

.notification-item-fade-out {
    animation: fadeOutAndShrink 0.35s ease-out forwards;
}

/* Specifická šířka pro notifikační panel, aby se předešlo posunutí layoutu. */
#notifications-panel {
    width: 40rem;
    /* 640px */
}

/*
=================================
Patička (Footer) - REDESIGN
=================================
*/
.footer {
    background-color: var(--c-bg-container);
    font-size: 0.85rem;
    flex-shrink: 0;
    border-top: 1px solid var(--c-border);
    z-index: 1;
    height: var(--footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0 1.5rem;
}

.footer a {
    color: var(--c-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer a:hover {
    color: var(--c-primary);
}

.footer-divider {
    color: var(--c-text-muted);
    opacity: 0.5;
}


/*
=================================
TLAČÍTKA PRO SCROLLOVÁNÍ
=================================
*/
.scroll-buttons-container {
    position: fixed;
    bottom: 5.3125rem;
    /* 85px */
    right: 1.25rem;
    /* 20px */
    z-index: 998;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* 8px */
    pointer-events: none;
}

.scroll-btn {
    width: 2.625rem;
    /* 42px */
    height: 2.625rem;
    /* 42px */
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.625rem);
    /* 10px */
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s ease-out, bottom 0.3s ease-out;
}

@supports (backdrop-filter: blur(5px)) {
    .scroll-btn {
        backdrop-filter: blur(5px);
    }
}

.scroll-btn.visible {
    opacity: 0.8;
    visibility: visible;
    transform: translateY(0);
}

.scroll-btn:hover {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: var(--c-primary);
}


/*
=================================
FLASH TOAST NOTIFIKACE - KOMPAKTNÍ VERZE
=================================
*/
#toast-container {
    position: fixed;
    bottom: 1.25rem;
    /* 20px */
    right: 1.25rem;
    /* 20px */
    z-index: 1055;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.625rem;
    /* 10px */
    /* Snížení mezery mezi toasty */
    pointer-events: none;
}

.toast-notification {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    /* 8px 12px */
    /* Zmenšený padding pro kompaktnější vzhled */
    background-color: var(--c-text);
    color: white;
    border-radius: 0.375rem;
    /* 6px */
    /* Jemnější zaoblení */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* Decentnější stín */
    min-width: 17.5rem;
    /* 280px */
    /* Zmenšení minimální šířky */
    max-width: 21.875rem;
    /* 350px */
    pointer-events: auto;
    animation: toastSlideInUp 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    border-left: 4px solid transparent;
    /* Ztenčený boční pruh */
}

.toast-notification.toast-fade-out {
    animation: toastSlideOutDown 0.4s cubic-bezier(0.75, 0, 0.75, 0.25) forwards;
}

.toast-success {
    background-color: var(--c-success);
    border-color: #1e7e34;
}

.toast-error {
    background-color: var(--c-danger);
    border-color: #b02a37;
}

.toast-warning {
    background-color: var(--c-warning);
    color: var(--c-text);
    border-color: #d9b400;
}

.toast-info {
    background-color: var(--c-info);
    border-color: #529bc4;
}

.toast-icon {
    font-size: 1.1rem;
    /* Zmenšení ikony */
    margin-right: 0.625rem;
    /* 10px */
    /* Zmenšení mezery od textu */
    line-height: 1;
    flex-shrink: 0;
}

.toast-message {
    flex-grow: 1;
    font-size: 0.9rem;
    /* Zmenšení písma zprávy */
    line-height: 1.4;
}

.toast-close-btn {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.4rem;
    /* Zmenšení zavíracího křížku */
    line-height: 1;
    margin-left: 0.625rem;
    /* 10px */
    /* Zmenšení mezery */
    padding: 0 0.3125rem;
    /* 5px */
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.toast-close-btn:hover {
    opacity: 1;
}

@keyframes toastSlideInUp {
    from {
        transform: translateY(120%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* OPRAVA: Původní animace byla nefunkční, nyní toast správně odjede a zmizí. */
@keyframes toastSlideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(120%);
        opacity: 0;
    }
}


/*
=================================
COMMAND PALETTE - PROFI REDESIGN V4
=================================
*/
.command-palette-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 2000;
    padding-top: 15vh;
}

.command-palette-container.visible {
    display: flex;
    animation: paletteFadeIn 0.2s ease-out forwards;
}

.command-palette-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, 0.4);
}

@supports (backdrop-filter: blur(4px)) {
    .command-palette-overlay {
        background-color: rgba(18, 18, 18, 0.2);
        backdrop-filter: blur(4px);
    }
}

.command-palette-content {
    position: relative;
    width: 100%;
    max-width: 42.5rem;
    /* 680px */
    margin: 0 1rem;
    background-color: var(--bs-body-bg);
    border-radius: 0.75rem;
    /* 12px */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bs-border-color-translucent);
    animation: paletteSlideDown 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.command-palette-input-wrapper {
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    height: 4rem;
    /* 64px */
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.command-palette-input-wrapper .bi-search {
    font-size: 1.25rem;
    color: var(--bs-secondary-color);
    margin-right: 1rem;
}

#command-palette-input {
    flex-grow: 1;
    font-size: 1.25rem;
    font-weight: 500;
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--bs-emphasis-color);
    height: 100%;
}

#command-palette-input::placeholder {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

#command-palette-results-wrapper {
    padding: 0.5rem;
    min-height: 7.5rem;
    /* 120px */
    max-height: 55vh;
    overflow-y: auto;
}

#command-palette-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.palette-group-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    padding: 0.75rem 0.75rem 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.palette-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    /* 8px */
    cursor: pointer;
    transition: background-color 0.15s ease;
    position: relative;
    color: var(--bs-body-color);
}

.palette-item:not(:last-child) {
    margin-bottom: 2px;
}

.palette-item.active {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-emphasis-color);
}

.palette-item-icon {
    font-size: 1.25rem;
    min-width: 2rem;
    /* 32px */
    text-align: center;
    margin-right: 0.75rem;
    color: var(--bs-secondary-color);
}

.palette-item.active .palette-item-icon {
    color: var(--bs-primary);
}

.palette-item-content {
    flex-grow: 1;
    min-width: 0;
}

.palette-item-title {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--bs-emphasis-color);
}

.palette-item-desc {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palette-item-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--bs-tertiary-color);
    margin-left: 1rem;
}

.palette-item-empty,
.palette-item-error {
    padding: 2rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    list-style-type: none;
}

.command-palette-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color-translucent);
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}

.command-palette-footer .footer-brand {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.command-palette-footer .footer-shortcuts {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.command-palette-footer kbd {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 1px 1px var(--bs-border-color-translucent);
    padding: 0.125rem 0.375rem;
    /* 2px 6px */
    font-family: monospace;
    font-weight: 600;
    border-radius: 0.25rem;
    /* 4px */
    color: var(--bs-secondary-color);
    margin: 0 0.15rem;
}

@keyframes paletteFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes paletteSlideDown {
    from {
        transform: translateY(-1.25rem) scale(0.98);
        /* -20px */
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* === NOVÉ: Plovoucí tlačítko pro nahlášení chyby === */
#bug-report-fab {
    position: fixed;
    bottom: 0.9375rem;
    /* 15px */
    /* Zarovnáno s chatbot tlačítkem */
    right: 5.3125rem;
    /* 85px */
    /* 20px (chatbot_right) + 55px (chatbot_width) + 10px (gap) */
    z-index: 1001;
    width: 3rem;
    /* 48px */
    /* O něco menší než chatbot */
    height: 3rem;
    /* 48px */
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(var(--c-danger-rgb), 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3em;
    cursor: pointer;
    transition: all 0.3s ease;
}

#bug-report-fab:hover {
    transform: translateY(-0.1875rem);
    /* -3px */
    box-shadow: 0 6px 20px rgba(var(--c-danger-rgb), 0.6);
}

/*
=================================
CHATBOT & TTS
=================================
*/
#chatbotContainer {
    position: fixed;
    bottom: 5rem;
    /* 80px */
    right: 1.25rem;
    /* 20px */
    width: 30.75rem;
    /* 492px */
    height: 41.5625rem;
    /* 665px */
    background-color: #ffffff;
    border: 1px solid var(--c-border);
    border-radius: 0.9375rem;
    /* 15px */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    transform: scale(0.95) translateY(0.625rem);
    /* 10px */
    opacity: 0;
    pointer-events: none;
}

#chatbotContainer.show {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

#chatbotHeader {
    background-color: var(--c-primary);
    color: white;
    padding: 0.75rem 0.9375rem;
    /* 12px 15px */
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

#chatbotHeader .header-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#chatbotHeader .header-buttons i {
    cursor: pointer;
    padding: 0.3125rem;
    /* 5px */
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

#chatbotHeader .header-buttons i:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

#chatbotHeader .header-buttons i.tts-off {
    color: var(--c-warning);
}

#chatbotContent {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}

#chatWindow {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

#chatbotMessages {
    flex-grow: 1;
    padding: 0.9375rem;
    /* 15px */
    overflow-y: auto;
    background-color: var(--c-bg-body);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* 12px */
}

.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    /* 10px */
    max-width: 90%;
    animation: fadeInMessage 0.3s ease-out;
}

.chat-message.user {
    flex-direction: row-reverse;
    align-self: flex-end;
}

.chat-message.bot {
    flex-direction: row;
    align-self: flex-start;
}

.chat-avatar {
    width: 2.375rem;
    /* 38px */
    height: 2.375rem;
    /* 38px */
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 0.3125rem;
    /* 5px */
}

.chat-bubble {
    padding: 0.625rem 0.875rem;
    /* 10px 14px */
    border-radius: 1rem;
    /* 16px */
    font-size: 0.95em;
    line-height: 1.5;
    max-width: 100%;
}

.chat-message.user .chat-bubble {
    background-color: rgba(var(--c-primary-rgb), 0.2);
    color: var(--c-text);
    border-bottom-right-radius: 0.25rem;
    /* 4px */
}

.chat-message.bot .chat-bubble {
    background-color: var(--c-bg-subtle);
    color: var(--c-text);
    border-bottom-left-radius: 0.25rem;
    /* 4px */
}

#chatbotInputContainer {
    padding: 0.625rem 0.9375rem;
    /* 10px 15px */
    border-top: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    background-color: #ffffff;
    flex-shrink: 0;
}

#chatbotInput {
    flex-grow: 1;
    border: 1px solid var(--c-border);
    border-radius: 1.25rem;
    /* 20px */
    padding: 0.5rem 0.9375rem;
    /* 8px 15px */
    font-size: 0.95em;
    margin-right: 0.625rem;
    /* 10px */
    resize: none;
    max-height: 6.25rem;
    /* 100px */
    overflow-y: auto;
}

#chatbotInputContainer #chatbotContextBtn {
    background-color: var(--c-bg-subtle);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
    border-radius: 50%;
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    /* 40px */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.0em;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

#chatbotInputContainer #chatbotContextBtn:hover {
    background-color: var(--c-border-light);
    color: var(--c-primary);
}

#chatbotInputContainer #chatbotContextBtn.active {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--c-primary);
    border-color: rgba(var(--c-primary-rgb), 0.5);
    box-shadow: 0 0 0 0.2rem rgba(var(--c-primary-rgb), 0.25);
}

#chatbotSendBtn {
    background-color: var(--c-primary);
    color: white;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    /* 40px */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

#chatbotToggleBtn {
    position: fixed;
    bottom: 0.9375rem;
    /* 15px */
    right: 1.25rem;
    /* 20px */
    z-index: 1001;
    width: 3.4375rem;
    /* 55px */
    height: 3.4375rem;
    /* 55px */
    border-radius: 50%;
    background-color: var(--c-primary);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(var(--c-primary-rgb), 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6em;
    cursor: pointer;
    transition: all 0.3s ease;
}

#chatbotToggleBtn:hover {
    transform: translateY(-0.1875rem);
    /* -3px */
    box-shadow: 0 6px 20px rgba(var(--c-primary-rgb), 0.6);
}

#chatbotToggleBtn.active {
    background-color: var(--c-danger);
    box-shadow: 0 4px 15px rgba(var(--c-danger-rgb), 0.4);
}

@keyframes fadeInMessage {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
        /* 10px */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chatbot TTS Button */
.chat-bubble-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    /* 8px */
    min-height: 1.375rem;
    /* 22px */
}

.chat-timestamp {
    font-size: 0.75em;
    color: #888;
}

.tts-button {
    background: transparent;
    color: #888;
    border: none;
    border-radius: 50%;
    width: 1.375rem;
    /* 22px */
    height: 1.375rem;
    /* 22px */
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.tts-button:hover {
    color: var(--c-primary);
    background-color: rgba(var(--c-primary-rgb), 0.1);
}

.tts-button.playing i {
    color: var(--c-primary);
}

.tts-button i {
    pointer-events: none;
}

/* Fullscreen Chatbot */
body.chatbot-fullscreen-active {
    overflow: hidden;
}

#chatbotContainer.fullscreen {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    z-index: 9999;
}

#chatbotContainer.fullscreen #chatbotContent {
    flex-direction: row;
}

/* ================================== */
/* === CHATBOT HISTORY PANEL - REDESIGN === */
/* ================================== */
#chatHistoryPanel {
    display: none;
    flex-direction: column;
    width: 20rem;
    /* 320px */
    border-right: 1px solid var(--c-border);
    background-color: #f7f9fc;
    flex-shrink: 0;
}

#chatbotContainer.fullscreen #chatHistoryPanel {
    display: flex;
}

.history-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.9375rem;
    /* 12px 15px */
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
    background-color: #fff;
}

.history-panel-header h5 {
    font-size: 1.1rem;
    font-weight: 600;
}

.history-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.history-header-actions .btn-icon {
    width: 2rem;
    /* 32px */
    height: 2rem;
    /* 32px */
    padding: 0;
}

.history-header-actions #newConversationBtn {
    font-weight: 500;
}

#chatHistoryPanelContent {
    overflow-y: auto;
    padding: 0.625rem;
    /* 10px */
}

.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    /* 10px 12px */
    border-radius: 0.5rem;
    /* 8px */
    cursor: pointer;
    text-decoration: none;
    color: var(--c-text);
    transition: background-color 0.2s ease, color 0.2s ease;
    border: 1px solid transparent;
}

.history-item:hover {
    background-color: var(--c-bg-subtle);
    border-color: var(--c-border-light);
}

.history-item.active {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-emphasis-color);
    font-weight: 600;
    border-color: rgba(var(--bs-primary-rgb), 0.3);
}

.history-item-summary {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    padding-right: 0.625rem;
    /* 10px */
}

.history-item .delete-convo-btn {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transition: all 0.2s ease;
    width: 1.875rem;
    /* 30px */
    height: 1.875rem;
    /* 30px */
    color: var(--c-text-muted);
}

.history-item:hover .delete-convo-btn {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.history-item .delete-convo-btn:hover {
    color: var(--c-danger);
    background-color: rgba(var(--bs-danger-rgb), 0.1);
}

.history-empty {
    text-align: center;
    padding: 2.5rem 1.25rem;
    /* 40px 20px */
    color: var(--c-text-muted);
}

.history-empty i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

/**************************************************************************************
 * *
 * KOMPLEXNÍ REFAKTOROVANÝ DARK MODE (NOVÁ SEKCE) *
 * Místo přepisování každé komponenty zvlášť redefinujeme základní proměnné. *
 * To zajišťuje konzistentní vzhled a snadnější budoucí údržbu. *
 * *
 **************************************************************************************/
body.dark-mode {
    color-scheme: dark;

    /* ------------------------------------------------------------- */
    /* 1. DEFINICE ZÁKLADNÍCH HODNOT BAREV PRO TMAVÝ REŽIM */
    /* ------------------------------------------------------------- */
    --c-primary-dark-val: #81c9f5;
    --c-secondary-dark-val: #ced4da;
    --c-text-dark-val: #f8f9fa;
    --c-text-muted-dark-val: #adb5bd;
    --c-bg-body-dark-val: #3c362f;
    --c-bg-container-dark-val: #4a433a;
    --c-bg-subtle-dark-val: #5e544a;
    --c-bg-light-dark-val: #3c362f;
    --c-border-dark-val: #7f735c;
    --c-border-light-dark-val: #5e544a;
    --c-danger-dark-val: #ff8a80;
    --c-success-dark-val: #80cbc4;
    --c-warning-dark-val: #ffd54f;
    --c-info-dark-val: #81c9f5;

    --c-primary-dark-rgb-val: 129, 201, 245;
    --c-danger-dark-rgb-val: 255, 138, 128;
    --c-text-dark-rgb-val: 248, 249, 250;

    /* ------------------------------------------------------------- */
    /* 2. PŘEPIS GLOBÁLNÍCH PROMĚNNÝCH PRO TMAVÝ REŽIM */
    /* Tento krok automaticky aplikuje změny na většinu prvků. */
    /* ------------------------------------------------------------- */
    --c-primary: var(--c-primary-dark-val);
    --c-secondary: var(--c-secondary-dark-val);
    --c-accent: var(--c-warning-dark-val);
    --c-text: var(--c-text-dark-val);
    --c-text-muted: var(--c-text-muted-dark-val);
    --c-bg-body: var(--c-bg-body-dark-val);
    --c-bg-container: var(--c-bg-container-dark-val);
    --c-bg-subtle: var(--c-bg-subtle-dark-val);
    --c-bg-light: var(--c-bg-light-dark-val);
    --c-border: var(--c-border-dark-val);
    --c-border-light: var(--c-border-light-dark-val);
    --c-danger: var(--c-danger-dark-val);
    --c-success: var(--c-success-dark-val);
    --c-warning: var(--c-warning-dark-val);
    --c-info: var(--c-info-dark-val);

    --c-primary-rgb: var(--c-primary-dark-rgb-val);
    --c-danger-rgb: var(--c-danger-dark-rgb-val);
    --c-text-rgb: var(--c-text-dark-rgb-val);

    /* Přepis Bootstrap proměnných pro tmavý režim */
    --bs-body-bg: var(--c-bg-container);
    /* Pozadí pro komponenty */
    --bs-body-color: var(--c-text);
    --bs-emphasis-color: var(--c-text);
    --bs-secondary-color: var(--c-text-muted);
    --bs-tertiary-bg: var(--c-bg-subtle);
    --bs-border-color: var(--c-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-primary-bg-subtle: rgba(var(--c-primary-rgb), 0.15);
    --bs-primary-emphasis-color: #a5d8ff;

    /* Přepis proměnných komponent */
    --sidebar-bg: var(--c-bg-container);
    --sidebar-link-color: var(--c-secondary);
    --sidebar-link-hover-bg: var(--c-bg-subtle);
    --sidebar-link-active-color: var(--c-primary);
    --sidebar-link-active-bg: rgba(var(--c-primary-rgb), 0.15);
}

/* -------------------------------------------------------------------- */
/* 3. SPECIFICKÉ ÚPRAVY PRO KOMPONENTY, KTERÉ NELZE ŘEŠIT PROMĚNNÝMI */
/* (Např. filtry, RGBA barvy, specifické chování...) */
/* -------------------------------------------------------------------- */

/* Základní tělo a scrollbar */
body.dark-mode {
    background-color: var(--c-bg-body-dark-val);
    /* Skutečné pozadí stránky */
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #202020;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--c-bg-subtle);
    border-color: #202020;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--c-border);
}

/* Layout */
body.dark-mode .sidebar {
    background-color: rgba(30, 30, 30, 0.85);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
}

body.dark-mode .sidebar-on-right .sidebar {
    box-shadow: -1px 0 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .top-header {
    background-color: rgba(30, 30, 30, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .navbar-profile-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .scroll-btn {
    background-color: rgba(94, 84, 74, 0.8);
}

/* Komponenty */
body.dark-mode .modal-header .btn-close,
body.dark-mode .offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode .table {
    --bs-table-striped-bg: var(--c-bg-subtle-dark-val);
    --bs-table-hover-bg: var(--c-bg-body-dark-val);
}

body.dark-mode .accordion-button:not(.collapsed) {
    background-color: var(--c-bg-body-dark-val);
}

body.dark-mode .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode .user-profile-dropdown,
body.dark-mode .notifications-panel-container {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

body.dark-mode .top-header .notification-badge {
    border-color: var(--c-bg-body-dark-val);
}

/* Command Palette */
body.dark-mode .command-palette-content {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Toast notifikace */
body.dark-mode .toast-warning {
    color: #212529;
}

/* Tiptap - tyto komponenty si drží vlastní proměnné, stačí je přepsat */
body.dark-mode {
    --tiptap-text-color: var(--c-text-dark-val);
    --tiptap-bg-color: var(--c-bg-body-dark-val);
    --tiptap-border-color: var(--c-border-dark-val);
    --tiptap-border-focus-color: var(--c-primary-dark-val);
    --tiptap-placeholder-color: var(--c-text-muted-dark-val);
    --tiptap-invalid-color: #e06c75;
    --tiptap-link-color: var(--c-primary-dark-val);
    --tiptap-code-bg: var(--c-bg-container-dark-val);
    --tiptap-code-border: var(--c-border-dark-val);
    --tiptap-blockquote-border: var(--c-border-dark-val);
    --toolbar-bg-color: var(--c-bg-container-dark-val);
    --toolbar-border-color: var(--c-border-dark-val);
    --toolbar-divider-color: var(--c-border-dark-val);
    --toolbar-button-color: var(--c-secondary-dark-val);
    --toolbar-button-hover-bg: var(--c-bg-subtle-dark-val);
    --toolbar-button-hover-color: var(--c-text-dark-val);
    --toolbar-button-active-bg: var(--c-primary-dark-val);
    --toolbar-button-active-color: #fff;
    --image-selected-outline: var(--c-primary-dark-val);
    --image-selected-shadow: rgba(var(--c-primary-dark-rgb-val), 0.4);
}

/* Chatbot */
body.dark-mode .chat-message.user .chat-bubble {
    background-color: var(--c-bg-subtle-dark-val);
}

body.dark-mode .chat-message.bot .chat-bubble {
    background-color: var(--c-bg-body-dark-val);
}

body.dark-mode .chat-timestamp,
body.dark-mode .tts-button {
    color: var(--c-text-muted-dark-val);
}

body.dark-mode .tts-button:hover {
    background-color: rgba(var(--c-primary-rgb), 0.15);
}

/* Chatbot History */
body.dark-mode #chatHistoryPanel {
    background-color: var(--c-bg-body-dark-val);
}

body.dark-mode .history-item:hover {
    background-color: var(--c-bg-subtle-dark-val);
}

body.dark-mode .history-item .delete-convo-btn:hover {
    color: #ff8a80;
    background-color: rgba(255, 138, 128, 0.1);
}

/* Jitsi PiP a Notepads */
body.dark-mode .jitsi-pip-container,
body.dark-mode .notepad-window {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

body.dark-mode .jitsi-pip-header .pip-control-btn#jitsi-pip-close:hover,
body.dark-mode .notepad-controls .btn-danger:hover {
    background-color: var(--c-danger-dark-val);
    color: #000;
}

body.dark-mode .jitsi-pip-header .pip-control-btn#jitsi-pip-restore:hover,
body.dark-mode .notepad-controls .btn-primary:hover {
    background-color: var(--c-primary-dark-val);
    color: #000;
}

body.dark-mode .jitsi-pip-container .ui-resizable-se {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23adb5bd' d='M8 10H10V8L8 10ZM5 10H7V8L5 10ZM8 7H10V5L8 7Z'/%3E%3C/svg%3E");
}

/* Message Bubbles */
body.dark-mode .message-bubble {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
}

/*
=================================
OPTIMALIZACE PRO NÍZKÉ OBRAZOVKY (NOTEBOOKY)
=================================
*/
/* * Řeší scénář "FHD (1080p) + 125% Windows scaling",
 * kde efektivní výška viewportu je pouze cca 864px.
 * Redukujeme vertikální prostor lišt, abychom dali více místa obsahu.
*/
@media (max-height: 56.25rem) {
    /* 900px */

    /* 1. Snížení globálních výšek lišt */
    :root {
        --top-header-height: 3.125rem;
        /* 50px (původně 60px) */
        --footer-height: 2.625rem;
        /* 42px (původně 52px) */
    }

    /* 2. Úprava horního headeru */
    .top-header {
        padding: 0 1rem;
        /* Lehké zmenšení bočního paddingu */
    }

    .top-header .btn-outline-secondary {
        width: 2.375rem;
        /* 38px */
        height: 2.375rem;
        /* 38px */
        font-size: 1rem;
    }

    .navbar-user-avatar {
        width: 2.125rem;
        /* 34px */
        height: 2.125rem;
        /* 34px */
        margin-right: 0.5rem;
        /* 8px */
    }

    .navbar-profile-btn {
        padding: 0.125rem 0.5rem 0.125rem 0.125rem;
        /* 2px 8px 2px 2px */
    }

    /* 3. Úprava sidebaru (pro menší horní lištu a patičku) */
    .sidebar-logo-full {
        height: 2rem;
        /* 32px */
    }

    .sidebar-logo-mini {
        height: 1.875rem;
        /* 30px */
    }

    .sidebar-link {
        padding: 0.6rem 1rem;
        /* Menší vertikální padding */
    }

    /* 4. Úprava dropdownů, aby seděly pod menším headerem */
    .user-profile-dropdown,
    .notifications-panel-container {
        top: 3rem;
        /* 48px (50px (výška) - 2px (pro přesah)) */
    }
}

/*
=================================
RESPONZIVNÍ DESIGN
=================================
*/
.mobile-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1029;
    display: none;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}

body.mobile-sidebar-open .mobile-sidebar-overlay {
    display: block;
    opacity: 1;
}

@media (max-width: 61.99875rem) {
    /* 991.98px */

    /*
     * KLÍČOVÁ OPRAVA SCROLLOVÁNÍ
     * Místo posouvání celého těla stránky (body), což způsobuje problémy
     * s výpočtem 100vh na mobilních zařízeních, vracíme layout do "app-like"
     * režimu, kde se posouvá pouze vnitřní obsah (.main-content).
     */
    html,
    body {
        height: 100vh;
        overflow: hidden;
        /* Zabráníme posouvání celé stránky. */
    }

    .app-container {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        /* Kontejner bude mít vždy přesně výšku obrazovky. */
    }

    .content-wrapper {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        /* Důležitý flexbox fix pro správné fungování vnitřního scrollu. */
        overflow: hidden;
    }

    .main-content {
        overflow-y: auto;
        /* Povolíme posouvání pouze pro hlavní obsahovou část. */
    }

    /* Původní styly pro mobilní sidebar zůstávají */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1030;
        transform: translateX(-100%);
        box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.2);
        transition: transform var(--transition-speed) ease;
    }

    body.mobile-sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-on-right .sidebar {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }
}

@media (max-width: 48rem) {

    /* 768px */
    .scroll-buttons-container {
        bottom: 4.6875rem;
        /* 75px */
        right: 0.625rem;
        /* 10px */
        gap: 0.375rem;
        /* 6px */
    }

    .scroll-btn {
        width: 2.375rem;
        /* 38px */
        height: 2.375rem;
        /* 38px */
        font-size: 0.9rem;
    }

    /* NOVÉ: Úprava FAB pro nahlášení chyby na mobilu */
    #bug-report-fab {
        right: 4.375rem;
        /* 70px */
        /* 10px (chatbot_right) + 50px (chatbot_width @1920px) + 10px (gap) */
        bottom: 0.625rem;
        /* 10px */
        /* Velikost (44px) je převzata z @media (max-width: 1920px) */
    }

    #chatbotToggleBtn {
        right: 0.625rem;
        /* 10px */
        bottom: 0.625rem;
        /* 10px */
    }

    #chatbotContainer {
        bottom: 5rem;
        /* 80px */
        right: 0.625rem;
        /* 10px */
        width: calc(100% - 1.25rem);
        /* 20px */
        height: 70vh;
    }
}

@media (max-width: 36rem) {
    /* 576px */

    /* Oprava vyskakovacích oken na mobilu */
    .user-profile-dropdown,
    .notifications-panel-container {
        max-width: calc(100vw - 1.25rem);
        /* 20px */
        left: auto !important;
        /* Ignoruje JS a nechá CSS řídit pozici */
        right: 0.625rem;
        /* 10px */
    }

    .user-profile-dropdown .arrow-up,
    #notifications-panel .arrow-up,
    #messages-notifications-panel .arrow-up {
        right: 0.9375rem;
        /* 15px */
        /* Upraví pozici šipky, aby seděla */
    }

    #toast-container {
        right: 0.625rem;
        /* 10px */
        left: 0.625rem;
        /* 10px */
        bottom: 0.625rem;
        /* 10px */
        width: auto;
    }

    .toast-notification {
        min-width: 0;
        width: 100%;
    }
}

/*
=================================
IFRAME VIEWER
=================================
*/

/*
 * Třída přidaná na .main-content, když je iframe aktivní.
 * Odstraní vnitřní odsazení, aby iframe vyplnil celý prostor.
 */
.main-content.iframe-active {
    padding: 0;
}

/*
 * Hlavní kontejner pro iframe, skrytý ve výchozím stavu.
 * Díky absolutní pozici vyplní celý rodičovský prvek (.main-content).
 */
#iframe-view-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: var(--bs-body-bg);
    flex-direction: column;
}

/*
 * Hlavička s titulem a zavíracím tlačítkem.
 */
.iframe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    flex-shrink: 0;
    background-color: var(--bs-tertiary-bg);
}

#iframe-title {
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Kontejner pro spinner, který centruje loader.
 */
.iframe-loader-wrapper {
    position: absolute;
    top: 3.375rem;
    /* 54px */
    /* Přibližná výška hlavičky */
    left: 0;
    width: 100%;
    height: calc(100% - 3.375rem);
    /* 54px */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(var(--bs-body-rgb, 255, 255, 255), 0.5);
    z-index: 12;
    transition: background-color 0.3s ease;
}

body.dark-mode .iframe-loader-wrapper {
    background-color: rgba(var(--bs-body-rgb, 18, 18, 18), 0.5);
}

/*
 * Vlastní iframe, který se roztáhne na zbytek místa.
 */
#content-iframe {
    flex-grow: 1;
    border: none;
    width: 100%;
    height: 100%;
    /* Důležité pro správné zobrazení */
}

/*
 * Skryje všechny přímé potomky .main-content kromě iframe kontejneru, když je aktivní.
 */
.main-content.iframe-active>*:not(#iframe-view-container) {
    display: none !important;
}

/*
=================================
GIPHY PICKER - DARK MODE
=================================
*/
body.dark-mode .tt-giphy-popover {
    background-color: var(--c-bg-container-dark-val);
    border-color: var(--c-border-dark-val);
}

body.dark-mode .tt-giphy-search {
    background-color: var(--c-bg-body-dark-val);
    border-color: var(--c-border-dark-val);
    color: var(--c-text-dark-val);
}

body.dark-mode .tt-giphy-search::placeholder {
    color: var(--c-text-muted-dark-val);
}

body.dark-mode .tt-giphy-header .search-icon {
    color: var(--c-text-muted-dark-val);
}

body.dark-mode .tt-giphy-loader {
    background: rgba(var(--c-bg-container-dark-val), 0.8);
}

body.dark-mode .giphy-logo-light-theme {
    display: none;
}

body.dark-mode .giphy-logo-dark-theme {
    display: block;
}

/* ==========================================================================
   TIPTAP WYSIWYG EDITOR STYLES
   ========================================================================== */

/* --- BAREVNÉ PROMENNÉ (PRO SNADNOU ÚDRBU) --- */
:root {
    --tiptap-text-color: var(--c-text);
    --tiptap-bg-color: var(--c-bg-container);
    --tiptap-border-color: var(--c-border);
    --tiptap-border-focus-color: var(--c-primary);
    --tiptap-placeholder-color: var(--c-text-muted);
    --tiptap-invalid-color: var(--c-danger);
    --tiptap-link-color: var(--c-primary);
    --tiptap-code-bg: var(--c-bg-body);
    --tiptap-code-border: var(--c-border-light);
    --tiptap-blockquote-border: var(--c-border-light);

    --toolbar-bg-color: var(--c-bg-body);
    --toolbar-border-color: var(--c-border);
    --toolbar-divider-color: var(--c-border);
    --toolbar-button-color: var(--c-secondary);
    --toolbar-button-hover-bg: var(--c-bg-subtle);
    --toolbar-button-hover-color: var(--c-text);
    --toolbar-button-active-bg: var(--c-primary);
    --toolbar-button-active-color: #fff;

    --image-selected-outline: var(--c-primary);
    --image-selected-shadow: rgba(99, 179, 224, 0.4);
}

/* --- WRAPPER A ZÁKLADNÍ POLE EDITORU --- */
.tiptap-editor-wrapper {
    background-color: var(--tiptap-bg-color);
    border: 1px solid var(--tiptap-border-color);
    border-top: none;
    /* Horní okraj je nyní na kontejneru lišty */
    border-radius: 0 0 0.5rem 0.5rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Vylepšený focus stav pro celý editor */
.tiptap-editor-wrapper:focus-within {
    border-color: var(--tiptap-border-focus-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--c-primary-rgb), 0.25);
}

.tiptap-editor-wrapper.is-invalid {
    border-color: var(--tiptap-invalid-color);
}

.tiptap-editor-wrapper.is-invalid:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(var(--c-danger-rgb), 0.25);
}


.ProseMirror {
    padding: 0.75rem 1rem;
    min-height: 15.625rem;
    /* 250px */
    outline: none;
    color: var(--tiptap-text-color);
    line-height: 1.6;
}

/* Placeholder styl */
.ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    color: var(--tiptap-placeholder-color);
    pointer-events: none;
    height: 0;
}

/* --- STYLY PRO OBSAH EDITORU --- */
.ProseMirror>*+* {
    margin-top: 0.75em;
}

.ProseMirror ul,
.ProseMirror ol {
    padding: 0 1rem;
}

.ProseMirror blockquote {
    padding-left: 1rem;
    border-left: 3px solid var(--tiptap-blockquote-border);
    margin-left: 0.5rem;
    font-style: italic;
}

.ProseMirror a {
    color: var(--tiptap-link-color);
    text-decoration: none;
    cursor: pointer;
}

.ProseMirror a:hover {
    text-decoration: underline;
}

/* Obrázky a jejich výběr */
.ProseMirror img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
    cursor: pointer;
}

.ProseMirror img.ProseMirror-selectednode {
    outline: 3px solid var(--image-selected-outline);
    box-shadow: 0 0 0.5rem var(--image-selected-shadow);
    /* 8px */
}

/* Styly pro změnu velikosti obrázku (nové) */
.ProseMirror .resize-cursor {
    cursor: ew-resize;
}

/* Video a jeho responzivní kontejner */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* Poměr stran 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border-radius: 0.375rem;
    margin: 1em 0;
    background-color: #000;
    /* Pozadí pro případ pomalého načítání */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- NÁSTROJOVÁ LIŠTA (PŘEPRACOVANÁ STRUKTURA) --- */
.tiptap-toolbar-container {
    position: relative;
    /* decentní gradient pro "WoW" efekt */
    background: linear-gradient(to bottom, var(--toolbar-bg-color) 0%, color-mix(in srgb, var(--toolbar-bg-color) 95%, var(--c-border)) 100%);
    border: 1px solid var(--toolbar-border-color);
    border-radius: 0.6rem;
    /* Mírně větší zaoblení */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* Jemný stín */
    transition: border-radius 0.3s ease, border-color 0.2s ease-in-out, box-shadow 0.2s ease;
}

body.dark-mode .tiptap-toolbar-container {
    background: linear-gradient(to bottom, var(--toolbar-bg-color) 0%, color-mix(in srgb, var(--toolbar-bg-color) 92%, var(--c-border)) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


.tiptap-toolbar-container.is-expanded {
    border-radius: 0.6rem 0.6rem 0 0;
    border-bottom-color: transparent;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    /* Výraznější stín při rozbalení */
}

body.dark-mode .tiptap-toolbar-container.is-expanded {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tiptap-toolbar-content-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out;
}

.tiptap-toolbar-container.is-expanded .tiptap-toolbar-content-wrapper {
    max-height: 31.25rem;
    /* 500px */
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.tiptap-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    /* ZMENŠENO: Kompaktnější mezery mezi všemi prvky */
    padding: 0.5rem 0.6rem;
    /* ZMENŠENO: Kompaktnější padding */
}

/* Ovládací tlačítko pro rozbalení/sbalení - Vylepšený vzhled */
.toolbar-toggle-button {
    position: absolute;
    bottom: -1rem;
    /* -16px */
    /* Posunuto o 1px níže kvůli silnějšímu okraji */
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
    /* 32px */
    height: 2rem;
    /* 32px */
    border-radius: 50%;
    background-color: var(--toolbar-bg-color);
    border: 2px solid var(--tiptap-border-color);
    /* Silnější okraj */
    color: var(--toolbar-button-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease;
}

.toolbar-toggle-button:hover {
    background-color: var(--toolbar-button-hover-bg);
    color: var(--toolbar-button-hover-color);
    border-color: var(--toolbar-button-hover-bg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transform: translateX(-50%) scale(1.05);
    /* Mírné zvětšení při najetí */
}

.toolbar-toggle-button i {
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    font-size: 0.9rem;
    /* Mírně menší ikona */
}

.tiptap-toolbar-container.is-expanded .toolbar-toggle-button i {
    transform: rotate(180deg);
}


/* Oddělovač skupin ikon */
.toolbar-divider {
    width: 1px;
    height: 1.5rem;
    /* ZMENŠENO: Mírně nižší */
    background-color: var(--toolbar-divider-color);
    margin: 0 0.25rem;
    /* ZMENŠENO: Menší odsazení oddělovače */
    opacity: 0.6;
}

/* Jednotlivé prvky lišty - Zjemnění vzhledu */
.toolbar-button,
.toolbar-select,
.toolbar-dropdown .dropdown-toggle

/* Cílení na Bootstrap tlačítko */
    {
    background: transparent;
    border: none;
    color: var(--toolbar-button-color);
    padding: 0.4rem 0.6rem;
    /* Mírně upravený padding */
    border-radius: 0.4rem;
    /* Mírně větší zaoblení */
    cursor: pointer;
    line-height: 1;
    font-size: 0.9rem;
    /* Mírně menší písmo/ikony */
    transition: all 0.15s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    /* 32px */
    /* Sjednocení výšky */
    min-width: 2rem;
    /* 32px */
    /* Minimální šířka pro ikony */
    vertical-align: middle;
    /* Lepší zarovnání s textem/ostatními prvky */
}

.toolbar-button:hover,
.toolbar-select:hover,
.toolbar-dropdown .dropdown-toggle:hover {
    background-color: var(--toolbar-button-hover-bg);
    color: var(--toolbar-button-hover-color);
}

/* Aktivní stav - Jemnější zvýraznění */
.toolbar-button.is-active,
.toolbar-dropdown .dropdown-item.is-active

/* Pro aktivní položky v dropdownu */
    {
    background-color: color-mix(in srgb, var(--toolbar-button-active-bg) 85%, var(--toolbar-bg-color));
    color: var(--toolbar-button-active-color);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

body.dark-mode .toolbar-button.is-active,
body.dark-mode .toolbar-dropdown .dropdown-item.is-active {
    background-color: color-mix(in srgb, var(--toolbar-button-active-bg) 70%, var(--toolbar-bg-color));
    box-shadow: none;
}


/* Přepis Bootstrap dropdown šipky, pokud používáme ikonu */
.toolbar-dropdown .dropdown-toggle::after {
    display: none;
}

.toolbar-dropdown .dropdown-toggle i.fa-angle-down {
    margin-left: 0.3rem;
    font-size: 0.8em;
    opacity: 0.8;
}

/*
 * Stylování Bootstrap Dropdown menu v kontextu toolbaru
 * ZMĚNA: Přidán selektor .tiptap-toolbar-dropdown-menu pro menu připojená k 'body'
 */
.tiptap-toolbar .dropdown-menu,
.tiptap-toolbar-dropdown-menu {
    --bs-dropdown-min-width: 11.25rem;
    /* 180px */
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.4rem;
    --bs-dropdown-font-size: 0.9rem;
    --bs-dropdown-border-radius: 0.5rem;
    --bs-dropdown-border-color: var(--toolbar-border-color);
    --bs-dropdown-bg: var(--toolbar-bg-color);
    --bs-dropdown-link-color: var(--toolbar-button-color);
    --bs-dropdown-link-hover-color: var(--toolbar-button-hover-color);
    --bs-dropdown-link-hover-bg: var(--toolbar-button-hover-bg);
    --bs-dropdown-link-active-color: var(--toolbar-button-active-color);
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--toolbar-button-active-bg) 85%, var(--toolbar-bg-color));
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /* Odebrán margin-top !important; bude řízeno JS */
    /* margin-top: 0.25rem !important; */
    z-index: 1060;
    /* Ujistíme se, že je nad ostatními prvky, např. modály (1055) */
}

body.dark-mode .tiptap-toolbar .dropdown-menu,
body.dark-mode .tiptap-toolbar-dropdown-menu {
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--toolbar-button-active-bg) 70%, var(--toolbar-bg-color));
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
}


.tiptap-toolbar .dropdown-item,
.tiptap-toolbar-dropdown-menu .dropdown-item {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Mezera mezi ikonou a textem */
}

.tiptap-toolbar .dropdown-item i,
.tiptap-toolbar-dropdown-menu .dropdown-item i {
    width: 1em;
    /* Zajistí zarovnání textu, i když některé položky ikonu nemají */
    text-align: center;
    opacity: 0.8;
}

/* Speciální úprava pro select, aby vypadal podobně */
.toolbar-select {
    padding-left: 0.75rem;
    padding-right: 2rem;
    /* Více místa pro šipku */
    height: 2rem;
    /* 32px */
    border: 1px solid var(--c-border-subtle);
    /* Jemný okraj pro odlišení */
    background-color: var(--c-bg-inset);
    /* Lehce odlišené pozadí */
    min-width: 8.125rem;
    /* 130px */
    /* Trochu širší */
    /* Zdědí vzhled šipky z původních stylů */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    /* Mírně upravená pozice šipky */
    background-size: 14px 10px;
    /* Mírně menší šipka */
}

.toolbar-select:hover {
    border-color: var(--c-border);
}

body.dark-mode .toolbar-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}


/* Barva textu - tlačítko */
.toolbar-color-button .color-dot {
    width: 0.75rem;
    /* 12px */
    height: 0.75rem;
    /* 12px */
    border-radius: 50%;
    margin-left: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--toolbar-button-color) 40%, transparent);
    background: var(--dot-color, #000000);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
    /* Vnitřní stín pro lepší viditelnost na tmavých barvách */
}



/* --- POČÍTADLO ZNAKŮ --- */
.character-count {
    padding: 0 0.5rem;
    font-size: 0.8rem;
    color: var(--tiptap-placeholder-color);
    user-select: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    margin-left: auto;
    /* Posune doprava */
    background-color: var(--c-bg-inset);
    /* Lehce odlišené pozadí */
    height: 1.75rem;
    /* 28px */
    /* Menší výška */
    border-radius: 0.3rem;
    border: 1px solid var(--c-border-subtle);
}

body.dark-mode .character-count {
    color: #868e96;
    /* Mírně upraveno z původního kódu */
}

.character-count.is-over-limit {
    color: var(--tiptap-invalid-color);
    font-weight: bold;
    border-color: color-mix(in srgb, var(--tiptap-invalid-color) 50%, transparent);
    background-color: color-mix(in srgb, var(--tiptap-invalid-color) 10%, transparent);
}

body.dark-mode .character-count.is-over-limit {
    color: #e57373;
    /* Mírně upraveno z původního kódu */
}


/* Třída pro skrytí textu pro čtečky obrazovky */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* --- OSTATNÍ STYLY --- */
body.public-page {
    position: relative;
}

.public-page-header {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

.public-page-header .btn {
    width: 2.625rem;
    /* 42px */
    height: 2.625rem;
    /* 42px */
}

/* ==========================================================================
   NOVÉ: STYLY PRO ZVÝRAZŇOVÁNÍ SYNTAXE (LOWLIGHT / HIGHLIGHT.JS)
   ========================================================================== */

/* Základní kontejner bloku kódu */
.ProseMirror pre {
    background: #282c34;
    /* Tmavé pozadí pro téma 'atom-one-dark' */
    color: #abb2bf;
    font-family: 'JetBrains Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    padding: 1rem;
    border-radius: 0.5rem;
    position: relative;
    overflow-x: auto;
}

/* Zobrazení jazyka v rohu bloku */
.ProseMirror pre::before {
    content: attr(data-language);
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    color: #9da5b4;
    font-size: 0.7em;
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0.8;
}

.ProseMirror pre code {
    background: none;
    color: inherit;
    font-size: 0.9em;
    padding: 0;
}

/* Téma: Atom One Dark (převzato z highlight.js) */
.ProseMirror .hljs-comment,
.ProseMirror .hljs-quote {
    color: #5c6370;
    font-style: italic;
}

.ProseMirror .hljs-doctag,
.ProseMirror .hljs-keyword,
.ProseMirror .hljs-formula {
    color: #c678dd;
}

.ProseMirror .hljs-section,
.ProseMirror .hljs-name,
.ProseMirror .hljs-selector-tag,
.ProseMirror .hljs-deletion,
.ProseMirror .hljs-subst {
    color: #e06c75;
}

.ProseMirror .hljs-literal {
    color: #56b6c2;
}

.ProseMirror .hljs-string,
.ProseMirror .hljs-regexp,
.ProseMirror .hljs-addition,
.ProseMirror .hljs-attribute,
.ProseMirror .hljs-meta .hljs-string {
    color: #98c379;
}

.ProseMirror .hljs-attr,
.ProseMirror .hljs-variable,
.ProseMirror .hljs-template-variable,
.ProseMirror .hljs-type,
.ProseMirror .hljs-selector-class,
.ProseMirror .hljs-selector-attr,
.ProseMirror .hljs-selector-pseudo,
.ProseMirror .hljs-number {
    color: #d19a66;
}

.ProseMirror .hljs-symbol,
.ProseMirror .hljs-bullet,
.ProseMirror .hljs-link,
.ProseMirror .hljs-meta,
.ProseMirror .hljs-selector-id,
.ProseMirror .hljs-title {
    color: #61afef;
}

.ProseMirror .hljs-built_in,
.ProseMirror .hljs-title.class_,
.ProseMirror .hljs-class .hljs-title {
    color: #e6c07b;
}

.ProseMirror .hljs-emphasis {
    font-style: italic;
}

.ProseMirror .hljs-strong {
    font-weight: bold;
}

.ProseMirror .hljs-link {
    text-decoration: underline;
}

/*
=================================
JITSI PICTURE-IN-PICTURE (PiP) OKNO
=================================
*/

.jitsi-pip-container {
    position: fixed;
    bottom: 1.25rem;
    /* 20px */
    right: 1.25rem;
    /* 20px */
    width: 26.25rem;
    /* 420px */
    height: 20rem;
    /* 320px */
    background-color: var(--c-bg-container);
    border: 1px solid var(--c-border);
    border-radius: 0.75rem;
    /* 12px */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Důležité pro zaoblené rohy u iframe */
    min-width: 20rem;
    /* 320px */
    min-height: 15rem;
    /* 240px */
}

.jitsi-pip-header {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    /* 8px 12px */
    background-color: var(--c-bg-subtle);
    border-bottom: 1px solid var(--c-border);
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.jitsi-pip-header .pip-control-btn#jitsi-pip-close:hover {
    background-color: var(--c-danger);
    color: #fff;
}

/* NOVÝ STYL PRO TLAČÍTKO OBNOVENÍ */
.jitsi-pip-header .pip-control-btn#jitsi-pip-restore:hover {
    background-color: var(--c-primary);
    color: #fff;
}

.jitsi-pip-header .title {
    font-weight: 600;
    color: var(--c-text);
}

.jitsi-pip-header .controls {
    display: flex;
    align-items: center;
    gap: 2px;
    /* Mezera mezi tlačítky */
}

.jitsi-pip-header .pip-control-btn {
    background: transparent;
    border: none;
    color: var(--c-text-muted);
    width: 1.75rem;
    /* 28px */
    height: 1.75rem;
    /* 28px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.jitsi-pip-header .pip-control-btn:hover {
    background-color: var(--c-border);
    color: var(--c-text);
}

.jitsi-pip-header .pip-control-btn#jitsi-pip-close:hover {
    background-color: var(--c-danger);
    color: #fff;
}

.jitsi-pip-content {
    flex-grow: 1;
    min-height: 0;
    background-color: #000;
    /* Černé pozadí, než se načte video */
}

/* Styly pro úchyty pro změnu velikosti od jQuery UI */
.jitsi-pip-container .ui-resizable-handle {
    background: transparent;
    border: 0;
    z-index: 1051;
}

.jitsi-pip-container .ui-resizable-se {
    width: 0.875rem;
    /* 14px */
    height: 0.875rem;
    /* 14px */
    right: 1px;
    bottom: 1px;
    cursor: se-resize;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236c757d' d='M8 10H10V8L8 10ZM5 10H7V8L5 10ZM8 7H10V5L8 7Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom right;
    opacity: 0.6;
}

/*
=================================
POZNÁMKOVÉ BLOKY (NOTEPADS)
=================================
*/
.notepad-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1045;
    /* Mezi modály a Jitsi */
    pointer-events: none;
    overflow: hidden;
}

.notepad-window {
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: var(--c-bg-container);
    border: 1px solid var(--c-border);
    border-radius: 0.75rem;
    /* 12px */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    pointer-events: auto;
    /* --- OPRAVA --- */
    /* Vlastnost `overflow: hidden` skrývala úchyty pro změnu velikosti (resize handles) z jQuery UI. */
    /* Vlastnost `resize: both` byla odstraněna, protože změnu velikosti plně obsluhuje JavaScript. */
    min-width: 20rem;
    /* 320px */
    min-height: 15.625rem;
    /* 250px */
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, height 0.2s ease-in-out;
}

.notepad-window:focus-within {
    box-shadow: 0 0 0 2px var(--c-primary);
}

.notepad-window.is-minimized {
    height: 2.875rem !important;
    /* 46px */
    min-height: 2.875rem;
    /* 46px */
    resize: none;
}

.notepad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--c-bg-subtle);
    border-bottom: 1px solid var(--c-border);
    cursor: move;
    flex-shrink: 0;
    user-select: none;
}

.notepad-title-input {
    font-weight: 600;
    flex-grow: 1;
    border: none;
    background: transparent;
    padding: 0.25rem 0.5rem;
    /* 4px 8px */
    margin: -0.25rem 0;
    /* -4px */
    border-radius: 0.375rem;
    /* 6px */
    transition: background-color 0.2s;
    outline: none;
}

.notepad-title-input:focus {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    box-shadow: 0 0 0 2px var(--c-primary);
}

.notepad-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
}

.notepad-controls .btn {
    width: 1.75rem;
    /* 28px */
    height: 1.75rem;
    /* 28px */
    font-size: 0.8rem;
    padding: 0;
    line-height: 1;
}

.notepad-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notepad-toolbar {
    flex-shrink: 0;
    border-bottom: 1px solid var(--c-border);
    background-color: var(--c-bg-subtle);
}

.notepad-toolbar .simple-toolbar .btn {
    box-shadow: none !important;
}

.notepad-editor-content {
    flex-grow: 1;
    padding: 0.75rem;
    overflow-y: auto;
    cursor: text;
    -webkit-user-modify: read-write;
    outline: none;
    line-height: 1.6;
}

.notepad-editor-content b,
.notepad-editor-content strong {
    font-weight: bold;
}

.notepad-editor-content i,
.notepad-editor-content em {
    font-style: italic;
}

/* === NOVÉ: Patička s metadaty === */
.notepad-footer {
    flex-shrink: 0;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    color: var(--c-text-muted);
    background-color: var(--c-bg-subtle);
    border-top: 1px solid var(--c-border);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
=================================
POZNÁMKOVÉ BLOKY - RESPONZIVITA
=================================
*/

@media (max-width: 61.99875rem) {

    /* 991.98px */
    .notepad-container {
        /* Kontejner se stává viditelným a posuvným plátnem */
        pointer-events: auto;
        overflow-y: auto;
        /* Vytvoříme prostor nahoře pro sticky tlačítko a po stranách */
        padding: 4.6875rem 0.9375rem 0.9375rem 0.9375rem;
        /* 75px 15px 15px 15px */
        -webkit-overflow-scrolling: touch;
        /* Jemné pozadí pro odlišení od obsahu pod ním */
        background-color: rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(4px);
    }

    .notepad-window {
        /* Okna se mění z absolutní pozice na relativní a řadí se pod sebe */
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 15.625rem !important;
        /* 250px */
        margin: 0 auto 1.25rem;
        /* 20px */
        resize: none;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }

    /* Skryjeme úchyty pro změnu velikosti od jQuery UI */
    .notepad-window .ui-resizable-handle {
        display: none !important;
    }

    /* --- OPRAVA --- */
    /* Původní pravidlo způsobovalo, že minimalizované bloky zůstaly malé i na mobilu. */
    /* Toto pravidlo zajistí, že se na mobilních zařízeních VŽDY zobrazí v plné, použitelné výšce. */
    .notepad-window.is-minimized {
        height: auto !important;
        min-height: 15.625rem !important;
        /* 250px */
    }

    /* Dark mode pro mobilní kontejner */
    body.dark-mode .notepad-container {
        background-color: rgba(18, 18, 18, 0.5);
    }
}

/*
=================================
ONLINE USERS PANEL
=================================
*/
.online-user-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* 12px */
    padding: 0.5rem 0.75rem;
    /* 8px 12px */
    border-radius: 0.5rem;
    /* 8px */
    text-decoration: none;
    color: var(--c-text);
}

.online-user-item:hover {
    background-color: var(--c-bg-subtle);
}

.online-user-avatar {
    width: 2rem;
    /* 32px */
    height: 2rem;
    /* 32px */
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.online-user-name {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === NOVÉ STYLY === */
.online-user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Nutné pro správné fungování text-overflow v .online-user-name */
}

.online-user-last-seen {
    font-size: 0.75rem;
    color: var(--c-text-muted);
    font-weight: 400;
    white-space: nowrap;
}

/*
=================================
MODÁL PRO VÝBĚR KONVERZACE (NOVÉ)
=================================
*/
#modal-conversations-list .list-group-item-action {
    transition: background-color 0.2s ease-in-out;
}

.modal-conv-avatar {
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    /* 40px */
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/*
=================================
AKČNÍ TLAČÍTKA PRO NOTIFIKACE ZPRÁV
=================================
*/

/* Zafixování šířky panelu, aby se předešlo posunutí layoutu při prvním načtení obsahu. */
#messages-notifications-panel {
    width: 40rem;
    /* 640px */
}

/* Kontejner pro tlačítka, skrytý ve výchozím stavu */
.message-notification-actions {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    /* 12px */
    transform: translateY(-50%);
    display: flex;
    gap: 0.375rem;
    /* 6px */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

/* Zobrazení kontejneru při najetí myší na položku notifikace */
.notification-item:hover .message-notification-actions {
    opacity: 1;
    pointer-events: auto;
}

/* Společný styl pro obě tlačítka */
.message-mark-read-btn,
.message-open-bubble-btn {
    width: 1.75rem;
    /* 28px */
    height: 1.75rem;
    /* 28px */
    border-radius: 50%;
    border: none;
    background-color: var(--c-border-light);
    color: var(--c-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Hover efekt pro tlačítko "Označit jako přečtené" */
.message-mark-read-btn:hover {
    background-color: var(--c-success);
    color: white;
    transform: scale(1.15);
}

/* Hover efekt pro tlačítko "Otevřít v bublině" */
.message-open-bubble-btn:hover {
    background-color: var(--c-info);
    color: white;
    transform: scale(1.15);
}

/* Skryje tlačítko pro označení jako přečtené, pokud je konverzace již přečtená. */
.notification-item:not(.unread) .message-mark-read-btn {
    display: none;
}

.bug-report-modal .screenshot-preview-container {
    position: relative;
    max-height: 18.75rem;
    /* 300px */
    /* Omezení výšky náhledu */
    overflow-y: auto;
    /* Scrollbar, pokud je obrázek vyšší */
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    /* Bootstrap .rounded */
    background-color: #f8f9fa;
    /* Lehké pozadí */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 9.375rem;
    /* 150px */
    /* Minimální výška pro zobrazení spinneru */
}

.bug-report-modal .screenshot-preview-container img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Odstraní mezeru pod obrázkem */
}

.bug-report-modal .screenshot-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--bs-secondary-color);
    /* Použije barvu textu motivu */
}

.bug-report-modal .screenshot-loading-spinner .spinner-border {
    margin-bottom: 0.5rem;
}

/* Dark mode specifické styly */
body.dark-mode .bug-report-modal .screenshot-preview-container {
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

body.dark-mode .bug-report-modal .screenshot-loading-spinner {
    color: var(--bs-gray-400);
}

body.dark-mode .bug-report-modal .screenshot-loading-spinner .spinner-border {
    color: var(--bs-primary) !important;
    /* Vynutit primární barvu i v tmavém režimu */
}

/*
=================================
OPTIMALIZACE PRO FHD MONITORY (max 1920px šířka)
Cíl: Zmenšit globální prvky pro lepší využití prostoru.
=================================
*/
@media (min-width: 62rem) and (max-width: 120rem) {
    /* 992px and 1920px */

    /* --- Proměnné Layoutu --- */
    :root {
        --sidebar-width: 15rem;
        /* 240px (Pův. 260px) */
        --sidebar-width-collapsed: 3.125rem;
        /* 50px (Pův. 54px) */
        --top-header-height: 3.4375rem;
        /* 55px (Pův. 60px) */
        --footer-height: 3rem;
        /* 48px (Pův. 52px) */
    }

    /* --- Sidebar --- */
    .sidebar-header {
        padding: 0 1.2rem;
        /* (Pův. 0 1.5rem) */
    }

    .sidebar-logo-full {
        height: 2.125rem;
        /* 34px (Pův. 36px) */
    }

    .sidebar-logo-mini {
        height: 1.875rem;
        /* 30px (Pův. 32px) */
    }

    .sidebar-nav {
        padding: 0.8rem 0.6rem;
        /* (Pův. 1rem 0.75rem) */
    }

    .sidebar-link {
        padding: 0.65rem 0.8rem;
        /* (Pův. 0.75rem 1rem) */
        font-size: 0.95rem;
        /* Lehce menší */
    }

    .sidebar-link i.fa-fw {
        font-size: 1rem;
        /* (Pův. 1.1rem) */
        margin-right: 0.8rem;
        /* (Pův. 1rem) */
    }

    .submenu .submenu-link {
        padding: 0.4rem 0.6rem;
        /* (Pův. 0.5rem 0.75rem) */
        font-size: 0.85rem;
        /* (Pův. 0.9rem) */
    }

    /* --- Header --- */
    .top-header {
        padding: 0 1.2rem;
        /* (Pův. 0 1.5rem) */
    }

    .top-header .btn-outline-secondary {
        width: 2.375rem;
        /* 38px (Pův. 42px) */
        height: 2.375rem;
        /* 38px (Pův. 42px) */
        font-size: 1rem;
        /* (Pův. 1.1rem) */
    }

    .navbar-user-avatar {
        width: 2.125rem;
        /* 34px (Pův. 38px) */
        height: 2.125rem;
        /* 34px (Pův. 38px) */
        margin-right: 0.5rem;
        /* 8px (Pův. 10px) */
    }

    .navbar-profile-btn {
        padding: 0.125rem 0.5rem 0.125rem 0.125rem;
        /* 2px 8px 2px 2px (Pův. 2px 10px 2px 2px) */
    }

    /* --- Dropdowny/Panely --- */
    .user-profile-dropdown,
    .notifications-panel-container {
        top: 3.3125rem;
        /* 53px (Upraveno dle nové výšky headeru) */
        padding: 0.375rem;
        /* 6px (Pův. 8px) */
    }

    .user-profile-dropdown .dropdown-item {
        padding: 0.5rem 0.75rem;
        /* 8px 12px (Pův. 10px 16px) */
        font-size: 0.9rem;
        /* (Pův. 0.95rem) */
        gap: 0.625rem;
        /* 10px (Pův. 12px) */
    }

    .notifications-header,
    .notifications-footer {
        padding: 0.625rem 0.75rem;
        /* 10px 12px (Pův. 12px 16px) */
    }

    .notifications-list {
        padding: 0.375rem;
        /* 6px (Pův. 8px) */
    }

    .notification-item {
        padding: 0.625rem;
        /* 10px (Pův. 12px) */
        gap: 0.625rem;
        /* 10px (Pův. 12px) */
    }

    .notification-icon-wrapper {
        width: 2.25rem;
        /* 36px (Pův. 40px) */
        height: 2.25rem;
        /* 36px (Pův. 40px) */
    }

    .notification-icon-wrapper>i {
        font-size: 0.9rem;
        /* (Pův. 1rem) */
    }

    .notification-title {
        font-size: 0.9rem;
        /* (Pův. 0.95rem) */
    }

    .notification-message {
        font-size: 0.8rem;
        /* (Pův. 0.85rem) */
    }

    .notification-timestamp {
        font-size: 0.7rem;
        /* (Pův. 0.75rem) */
    }

    .notification-read-btn,
    .notification-delete-btn {
        width: 1.625rem;
        /* 26px (Pův. 28px) */
        height: 1.625rem;
        /* 26px (Pův. 28px) */
        font-size: 0.75rem;
        /* (Pův. 0.8rem) */
    }

    #notifications-panel,
    #messages-notifications-panel {
        width: 37.5rem;
        /* 600px (Pův. 640px) */
    }

    /* --- Patička --- */
    .footer {
        font-size: 0.8rem;
        /* (Pův. 0.85rem) */
    }

    /* --- Scroll Buttons --- */
    .scroll-btn {
        width: 2.375rem;
        /* 38px (Pův. 42px) */
        height: 2.375rem;
        /* 38px (Pův. 42px) */
        font-size: 0.9rem;
        /* (Pův. 1rem) */
    }

    /* Posuneme tlačítka výše kvůli menší patičce */
    .scroll-buttons-container {
        bottom: 4.6875rem;
        /* 75px (Pův. 85px) */
    }

    /* --- Toast Notifications --- */
    #toast-container {
        gap: 0.5rem;
        /* 8px (Pův. 10px) */
    }

    .toast-notification {
        padding: 0.375rem 0.625rem;
        /* 6px 10px (Pův. 8px 12px) */
        font-size: 0.85rem;
        /* (Pův. 0.9rem) */
    }

    .toast-icon {
        font-size: 1rem;
        /* (Pův. 1.1rem) */
        margin-right: 0.5rem;
        /* 8px (Pův. 10px) */
    }

    .toast-close-btn {
        font-size: 1.3rem;
        /* (Pův. 1.4rem) */
    }

    /* --- Command Palette --- */
    .command-palette-content {
        max-width: 40rem;
        /* 640px (Pův. 680px) */
    }

    .command-palette-input-wrapper {
        height: 3.75rem;
        /* 60px (Pův. 64px) */
        padding: 0 1rem;
        /* (Pův. 0 1.25rem) */
    }

    #command-palette-input {
        font-size: 1.1rem;
        /* (Pův. 1.25rem) */
    }

    .palette-item {
        padding: 0.4rem 0.6rem;
        /* (Pův. 0.5rem 0.75rem) */
    }

    .palette-item-icon {
        font-size: 1.1rem;
        /* (Pův. 1.25rem) */
        min-width: 1.75rem;
        /* 28px (Pův. 32px) */
        margin-right: 0.6rem;
        /* (Pův. 0.75rem) */
    }

    .palette-item-title {
        font-size: 0.9rem;
        /* (Pův. 0.95rem) */
    }

    .palette-item-desc {
        font-size: 0.8rem;
        /* (Pův. 0.85rem) */
    }

    .command-palette-footer {
        padding: 0.4rem 0.8rem;
        /* (Pův. 0.5rem 1rem) */
        font-size: 0.75rem;
        /* (Pův. 0.8rem) */
    }

    /* --- Chatbot (možná není potřeba, ale pro jistotu) --- */
    #chatbotContainer {
        width: 28.75rem;
        /* 460px (Pův. 492px) */
        height: 38.75rem;
        /* 620px (Pův. 665px) */
        bottom: 4.375rem;
        /* 70px (Pův. 80px) */
    }

    #bug-report-fab {
        width: 2.75rem;
        /* 44px */
        height: 2.75rem;
        /* 44px */
        font-size: 1.2em;
        right: 5rem;
        /* 80px (20px (chatbot_right) + 50px (chatbot_width) + 10px (gap)) */
        /* bottom: 15px zůstává stejný */
    }

    #chatbotToggleBtn {
        width: 3.125rem;
        /* 50px (Pův. 55px) */
        height: 3.125rem;
        /* 50px (Pův. 55px) */
        font-size: 1.5em;
        /* (Pův. 1.6em) */
    }

}

/*
=================================
OVLÁDÁNÍ MĚŘÍTKA (ZOOM) V DROPDOWNU
=================================
*/
/* Pomocná třída pro tlačítka s ikonou (často kruhová) */
.btn-icon {
    width: 2rem;
    /* 32px */
    height: 2rem;
    /* 32px */
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
}

/* Specifické styly pro ovládání zoomu v profilovém menu */
#view-scale-controls {
    /* Menší mezera mezi tlačítky pro kompaktnější vzhled */
    gap: 0.25rem;
    /* 4px */
}

#view-scale-controls button.btn-icon {
    width: 1.75rem;
    /* 28px */
    height: 1.75rem;
    /* 28px */
    font-size: 0.8rem;
}

/* NOVÉ STYLY pro resetovací tlačítko */
#zoom-reset-btn {
    height: 1.75rem;
    /* 28px - Sjednocení výšky s ostatními tlačítky */
    padding: 0 0.5rem;
    /* 8px - horizontální padding */
    font-size: 0.8rem;
    line-height: 1;
    /* Zajistí, že text uvnitř je vertikálně centrován */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    /* 6px - Standardní zaoblení pro "ne-ikonová" tlačítka */
}

#zoom-reset-btn:disabled {
    /* * Vylepšený vzhled pro neaktivní reset (když je na 100 %).
     * Vypadá spíše jako "aktivní" stav než "zakázané" tlačítko.
     */
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    border-color: transparent;
    opacity: 1;
    /* Přepsání výchozí opacity pro disabled */
}

#zoom-reset-btn:not(:disabled):hover {
    /* Standardní hover efekt, když NENÍ zakázané */
    background-color: var(--bs-tertiary-bg);
}

#zoom-level-display {
    /* Definuje pevnou šířku, aby tlačítko neměnilo velikost při změně % */
    width: 2.5rem;
    text-align: center;
    display: inline-block;
    transition: color 0.2s ease;
}

/* =================================
VLASTNÍ IKONY TÉMAT (PNG)
=================================
*/
.theme-icon-img {
    width: 1.5rem;
    /* cca 24px - optimální velikost pro tlačítko v headeru */
    height: 1.5rem;
    object-fit: contain;
    /* Zachová poměr stran */
    display: block;
    /* Odstraní spodní mezeru inline prvků */
    border-radius: 50%;
    /* Jistota, že zůstanou kulaté */
    pointer-events: none;
    /* Kliknutí propadne na tlačítko */
}

/* Jemné zvětšení při najetí na tlačítko */
#toggleDarkMode:hover .theme-icon-img {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* =================================
VIZUÁLNÍ UPGRADE
=================================
*/

/* Moderní barva výběru textu
   Sjednotí vizuál při označování textu myší
*/
::selection {
    background-color: rgba(var(--c-primary-rgb), 0.3);
    color: inherit;
}

@keyframes fadeInUpContent {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}