/*! purgecss start ignore */
/* ============================================================================
   RADIM BRANDING v3.0 — Complete Visual Identity Override

   This file loads LAST and overrides the dark theme from kolibri-dashboard-v2.css
   with a clean, senior-friendly light theme using Radim brand colors.

   Brand Colors:
   - Teal:  #5BA8A0 (primary), #71B6B8 (light), #4A9690 (dark)
   - Coral: #F07D7E (accent), #F5A3A3 (light)
   - Background: #f8fafa → #ffffff
   ============================================================================ */

/* ============================================================================
   ROOT VARIABLE OVERRIDE — Radim brand aliases only
   Base variables now defined in kolibri-dashboard-v2.css :root
   ============================================================================ */
:root {
    /* Radim brand name aliases (for semantic use) */
    --radim-teal: #5BA8A0;
    --radim-teal-light: #71B6B8;
    --radim-teal-dark: #4A9690;
    --radim-coral: #F07D7E;
    --radim-coral-light: #F5A3A3;
}

/* ============================================================================
   BODY & HTML — Light Background
   ============================================================================ */
html, body {
    background: var(--bg-primary, #f8fafa) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
}

/* ============================================================================
   TOP BAR — Radim Teal with Larger Logo + Info Center
   ============================================================================ */
.top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 24px !important;
    background: linear-gradient(135deg, rgba(75,140,133,0.97) 0%, rgba(91,168,160,0.97) 50%, rgba(113,182,184,0.95) 100%) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    min-height: 56px !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.top-bar::before {
    display: none !important;
}

.top-bar .logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Logo size controlled by radim-inline.css (52px desktop, 36px mobile) */

/* Header center info bar (date | nameday | weather) */
.header-info-center {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 !important;
    justify-content: center !important;
}

.header-info-center .header-divider {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 0.85rem !important;
}

.header-date,
.header-nameday,
.header-weather {
    padding: 5px 12px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: white !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.header-nameday {
    color: #fef3c7 !important;
}

/* Header right (time + energy) */
.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.header-time,
.header-energy {
    padding: 5px 12px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: white !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* Hide old header elements */
.top-bar .weather-status,
.top-bar .time-energy {
    display: none !important;
}

/* Top bar widgets */
.weather-widget-compact,
.weather-status,
.time-energy {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255,255,255,0.15) !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    color: white !important;
    font-size: 0.85rem !important;
}

.weather-status span,
.time-energy span {
    color: white !important;
    font-size: 0.85rem !important;
}

.nameday-badge {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255,255,255,0.12) !important;
    padding: 6px 12px !important;
    border-radius: 16px !important;
    color: white !important;
    font-size: 0.85rem !important;
}

.time-badge, .energy-badge {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(255,255,255,0.1) !important;
    padding: 6px 10px !important;
    border-radius: 16px !important;
    color: white !important;
    font-size: 0.8rem !important;
}

.energy-badge {
    background: rgba(16,185,129,0.25) !important;
    color: #d1fae5 !important;
}

/* ============================================================================
   DASHBOARD LAYOUT — Light
   ============================================================================ */
.dashboard-layout {
    background: var(--bg-primary, #f8fafa) !important;
}

/* Sidebar styling — handled by radim-inline.css (master override) */

/* ============================================================================
   MAIN PANEL — Light background
   ============================================================================ */
.main-panel,
main.main-panel {
    background: var(--bg-primary, #f8fafa) !important;
}

/* Module sections */
.module-section {
    background: var(--bg-primary, #f8fafa) !important;
    color: var(--text-primary, #2d3748) !important;
}

/* ============================================================================
   KAFÁNEK / HOME PANEL — LOGICAL LAYOUT v2.0
   ============================================================================ */
.kafanek-panel {
    grid-template-columns: 1fr 180px !important;
    grid-template-rows: auto !important;
    background: var(--bg-secondary, #ffffff) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(91, 168, 160, 0.1) !important;
    box-shadow: 0 4px 20px rgba(91, 168, 160, 0.08) !important;
    padding: 24px !important;
    gap: 20px !important;
    align-items: start !important;
}

/* Grid column assignment: content=LEFT(wide), avatar=RIGHT(narrow) */
.kafanek-content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
}

.kafanek-avatar {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: start !important;
    padding-top: 8px !important;
}

/* Hide duplicate elements (already in header) */
.kafanek-content .home-logo {
    display: none !important;
}
.kafanek-content .env-summary {
    display: none !important;
}

/* Avatar — head-only circular crop */
.kafanek-avatar {
    width: 160px !important;
    height: 160px !important;
}

.kafanek-avatar-wrapper {
    width: 160px !important;
    height: 160px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, rgba(91, 168, 160, 0.1), rgba(91, 168, 160, 0.05)) !important;
    box-shadow: 0 4px 16px rgba(91, 168, 160, 0.2), 0 0 0 3px rgba(91, 168, 160, 0.15) !important;
}

.kafanek-avatar #kafanek2d {
    width: 100% !important;
    height: 260% !important;
    object-fit: cover !important;
    object-position: top center !important;
}

.kafanek-content h2 {
    color: var(--accent-primary, #5BA8A0) !important;
    font-weight: 700 !important;
    background: none !important;
    -webkit-text-fill-color: var(--accent-primary, #5BA8A0) !important;
}

.kafanek-content .subtitle {
    color: var(--accent-primary, #5BA8A0) !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    text-align: left !important;
}

/* Kafanek-content flex layout */
.kafanek-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* Status display */
.status-display {
    background: rgba(91, 168, 160, 0.06) !important;
    border: 1px solid rgba(91, 168, 160, 0.12) !important;
    border-radius: 12px !important;
    color: var(--text-primary, #2d3748) !important;
}

/* Chat bubble */
.kafanek-bubble {
    background: var(--bg-secondary, #ffffff) !important;
    border: 1px solid rgba(91, 168, 160, 0.15) !important;
    border-radius: 16px !important;
    color: var(--text-primary, #2d3748) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

/* Microphone warning */
.kafanek-panel .status-display[style*="warning"],
.kafanek-panel .status-display[style*="Warning"] {
    background: rgba(246, 173, 85, 0.1) !important;
    border-color: rgba(246, 173, 85, 0.3) !important;
}

/* Quick chat area */
.quick-chat {
    background: #f0f5f5 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(91, 168, 160, 0.1) !important;
}

.chat-input-field,
#quickChatInput {
    background: var(--bg-secondary, #ffffff) !important;
    border: 1px solid rgba(91, 168, 160, 0.2) !important;
    color: var(--text-primary, #2d3748) !important;
    border-radius: 12px !important;
}

.chat-input-field:focus,
#quickChatInput:focus {
    border-color: var(--accent-primary, #5BA8A0) !important;
    box-shadow: 0 0 0 3px rgba(91, 168, 160, 0.15) !important;
}

.chat-actions button {
    border-radius: 12px !important;
    font-weight: 600 !important;
}

.chat-actions button:first-child {
    background: linear-gradient(135deg, var(--radim-teal), var(--radim-teal-light)) !important;
    color: white !important;
}

.chat-actions button:last-child {
    background: rgba(91, 168, 160, 0.1) !important;
    color: var(--accent-primary, #5BA8A0) !important;
    border: 1px solid rgba(91, 168, 160, 0.2) !important;
}

/* ============================================================================
   INFO CARDS
   ============================================================================ */
.info-card {
    background: var(--bg-secondary, #ffffff) !important;
    border: 1px solid rgba(91, 168, 160, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    color: var(--text-primary, #2d3748) !important;
}

.info-card h3 {
    color: var(--accent-primary, #5BA8A0) !important;
}

.info-card p,
.info-card span {
    color: var(--text-secondary, #4a5568) !important;
}

/* ============================================================================
   ENVIRONMENT SUMMARY — hidden (already in header)
   ============================================================================ */
.env-summary {
    display: none !important;
}

/* ============================================================================
   CONSCIOUSNESS MONITOR — anchored, scalable
   ============================================================================ */
.consciousness-section {
    display: block !important;
    margin-top: 16px;
    background: var(--bg-secondary, #ffffff);
    border: 1px solid rgba(91, 168, 160, 0.15);
    border-radius: 14px;
    padding: 16px;
    color: var(--text-primary, #2d3748);
}

.consciousness-section h2 {
    color: var(--accent-primary, #5BA8A0);
    font-size: 1.1rem;
    margin: 0 0 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

.consciousness-section .toggle-arrow {
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.consciousness-section .consciousness-body {
    transition: max-height 0.3s ease;
}

.consciousness-section .consciousness-body .text-muted {
    font-size: 0.8rem;
    color: #718096;
    margin: 0 0 12px 0;
}

/* Collapsed state */
.consciousness-section.collapsed .consciousness-body {
    display: none;
}
.consciousness-section.collapsed .toggle-arrow {
    transform: rotate(-90deg);
}

/* Mobile */
@media (max-width: 768px) {
    .consciousness-section {
        margin-top: 12px;
        padding: 12px;
    }
}

/* ── Brain Status Indicator (floating pill) ── */
#brain-status-indicator {
    position: fixed;
    bottom: 86px;
    right: 8px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 11px;
    font-family: -apple-system, system-ui, sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid rgba(91,168,160,0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    max-width: 160px;
    overflow: hidden;
}

#brain-status-indicator .brain-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

#brain-status-indicator .brain-label {
    color: #64748b;
    font-weight: 500;
    flex-shrink: 0;
}

#brain-status-indicator .brain-mode {
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet+ — indicator above FAB */
@media (min-width: 769px) {
    #brain-status-indicator {
        bottom: 104px;
        right: 24px;
        padding: 6px 14px;
        font-size: 12px;
    }
}

/* Very small screens — compact indicator */
@media (max-width: 374px) {
    #brain-status-indicator {
        bottom: 78px;
        right: 4px;
        padding: 3px 8px;
        font-size: 10px;
        max-width: 130px;
    }
}

/* ============================================================================
   INFO CARDS GRID — logical spacing
   ============================================================================ */
.info-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

/* ============================================================================
   CHAT MODULE — Light messenger
   ============================================================================ */
.wa-messenger,
.radim-messenger-v3 {
    background: var(--bg-primary, #f8fafa) !important;
    border: 1px solid rgba(91, 168, 160, 0.1) !important;
}

.wa-chat-header {
    background: linear-gradient(135deg, var(--radim-teal) 0%, var(--radim-teal-light) 100%) !important;
    color: white !important;
}

.wa-chat-header .chat-name {
    color: white !important;
}

.wa-chat-header .chat-status {
    color: rgba(255, 255, 255, 0.8) !important;
}

.wa-messages {
    background: #f0f5f5 !important;
}

.wa-message {
    background: var(--bg-secondary, #ffffff) !important;
    color: var(--text-primary, #2d3748) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

.wa-message.assistant,
.wa-message.bot {
    background: var(--bg-secondary, #ffffff) !important;
    color: var(--text-primary, #2d3748) !important;
}

.wa-message.user {
    background: linear-gradient(135deg, var(--radim-teal), var(--radim-teal-light)) !important;
    color: white !important;
}

.wa-input-area {
    background: var(--bg-secondary, #ffffff) !important;
    border-top: 1px solid rgba(91, 168, 160, 0.12) !important;
}

.wa-input-area input,
.wa-input-area textarea {
    background: #f0f5f5 !important;
    border: 1px solid rgba(91, 168, 160, 0.15) !important;
    color: var(--text-primary, #2d3748) !important;
    border-radius: 20px !important;
}

.wa-send-btn {
    background: var(--accent-primary, #5BA8A0) !important;
    color: white !important;
    border-radius: 50% !important;
}

.wa-voice-btn {
    background: rgba(91, 168, 160, 0.1) !important;
    color: var(--accent-primary, #5BA8A0) !important;
    border-radius: 50% !important;
}

/* ============================================================================
   VIDEO CALL MODULE — Light with teal accents
   ============================================================================ */
.video-call-start,
.video-call-join,
.video-call-new {
    background: var(--bg-primary, #f8fafa) !important;
    color: var(--text-primary, #2d3748) !important;
}

.video-call-start h2,
.video-call-join h2,
.video-call-new h2,
#module-video h2,
.video-section h2 {
    color: var(--text-primary, #2d3748) !important;
}

.video-call-start p,
.video-call-join p,
.video-call-new p {
    color: var(--text-secondary, #4a5568) !important;
}

/* Video call buttons */
.video-new-call-btn,
.video-call-start .btn-primary,
.video-call-btn {
    background: linear-gradient(135deg, var(--radim-teal), var(--radim-teal-light)) !important;
    color: white !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 16px 24px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(91, 168, 160, 0.3) !important;
}

.video-join-call-btn,
.video-call-start .btn-secondary {
    background: rgba(91, 168, 160, 0.1) !important;
    color: var(--accent-primary, #5BA8A0) !important;
    border: 1px solid rgba(91, 168, 160, 0.25) !important;
    border-radius: 14px !important;
    padding: 16px 24px !important;
    font-size: 1rem !important;
}

/* Favorite contacts */
.fav-contacts-title,
.video-section-title {
    color: var(--text-secondary, #4a5568) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.fav-contact-btn {
    background: rgba(91, 168, 160, 0.06) !important;
    border: 1px solid rgba(91, 168, 160, 0.12) !important;
    border-radius: 12px !important;
    color: var(--text-primary, #2d3748) !important;
}

/* Back button in video */
.video-back-btn {
    color: var(--accent-primary, #5BA8A0) !important;
}

/* ============================================================================
   QUIZ MODULE — Light cards
   ============================================================================ */
#module-quiz h2 {
    color: var(--text-primary, #2d3748) !important;
}

#quizContent .info-card {
    background: var(--bg-secondary, #ffffff) !important;
    border: 1px solid rgba(91, 168, 160, 0.1) !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#quizContent .info-card:hover {
    border-color: var(--accent-primary, #5BA8A0) !important;
    box-shadow: 0 4px 20px rgba(91, 168, 160, 0.15) !important;
}

#quizDisplay {
    background: var(--bg-secondary, #ffffff) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(91, 168, 160, 0.1) !important;
    color: var(--text-primary, #2d3748) !important;
}

/* ============================================================================
   NEWS MODULE — Light
   ============================================================================ */
.news-widget {
    background: var(--bg-secondary, #ffffff) !important;
    border: 1px solid rgba(91, 168, 160, 0.1) !important;
    border-radius: 14px !important;
    color: var(--text-primary, #2d3748) !important;
}

.news-category-btn {
    background: rgba(91, 168, 160, 0.06) !important;
    border: 1px solid rgba(91, 168, 160, 0.12) !important;
    color: var(--text-primary, #2d3748) !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.news-category-btn:hover,
.news-category-btn.active {
    background: var(--accent-primary, #5BA8A0) !important;
    color: white !important;
    border-color: var(--accent-primary, #5BA8A0) !important;
}

/* ============================================================================
   SEARCH — Light
   ============================================================================ */
.search-input,
#internetSearchInput {
    background: var(--bg-secondary, #ffffff) !important;
    border: 1px solid rgba(91, 168, 160, 0.2) !important;
    color: var(--text-primary, #2d3748) !important;
    border-radius: 12px !important;
}

.search-input:focus,
#internetSearchInput:focus {
    border-color: var(--accent-primary, #5BA8A0) !important;
    box-shadow: 0 0 0 3px rgba(91, 168, 160, 0.15) !important;
}

.search-button {
    background: linear-gradient(135deg, var(--radim-teal), var(--radim-teal-light)) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
}

/* ============================================================================
   HEADINGS — All module h2/h3
   ============================================================================ */
.module-section h2 {
    color: var(--text-primary, #2d3748) !important;
    font-weight: 700 !important;
}

.module-section h3 {
    color: var(--accent-primary, #5BA8A0) !important;
}

.module-section p {
    color: var(--text-secondary, #4a5568) !important;
}

/* ============================================================================
   BUTTONS — Global light theme
   ============================================================================ */
.btn-primary,
button.primary {
    background: linear-gradient(135deg, var(--radim-teal), var(--radim-teal-light)) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
}

.btn-secondary,
button.secondary {
    background: rgba(91, 168, 160, 0.1) !important;
    color: var(--accent-primary, #5BA8A0) !important;
    border: 1px solid rgba(91, 168, 160, 0.2) !important;
    border-radius: 12px !important;
}

/* ============================================================================
   SCROLLBAR — Teal
   ============================================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(91, 168, 160, 0.05);
}

::-webkit-scrollbar-thumb {
    background: rgba(91, 168, 160, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(91, 168, 160, 0.5);
}

/* ============================================================================
   ACTIVATION OVERLAY — Radim Teal (kept from v2)
   ============================================================================ */
/* .radim-activation-overlay — canonical definition in radim-inline.css */

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.activation-content {
    text-align: center; max-width: 440px; width: 100%;
    display: flex; flex-direction: column; align-items: center;
}
.activation-logo { margin-bottom: 12px; }
.activation-logo-img {
    height: 80px; width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.activation-avatar {
    width: 180px; height: 180px; margin: 0 auto 16px; border-radius: 50%;
    background: rgba(255,255,255,0.18); padding: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.1);
    animation: float 3s ease-in-out infinite;
}
.activation-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.activation-title {
    font-size: 2rem; font-weight: 700; color: white; margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.activation-subtitle {
    font-size: 1.1rem; color: rgba(255,255,255,0.92);
    margin-bottom: 32px; line-height: 1.5;
}
/* .radim-activate-btn — canonical definition in radim-inline.css */
.radim-activate-btn .btn-icon {
    width: 32px; height: 32px; object-fit: contain; border-radius: 8px;
}
.activation-hint { font-size: 0.88rem; color: rgba(255,255,255,0.7); margin-top: 22px; }
.activation-features {
    display: flex; justify-content: center; gap: 28px; margin-top: 40px; flex-wrap: wrap;
}
.activation-feature { text-align: center; color: rgba(255,255,255,0.92); min-width: 60px; }
.activation-feature-icon {
    font-size: 1.6rem; margin-bottom: 6px;
    background: rgba(255,255,255,0.15); width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; margin: 0 auto 8px;
}
.activation-feature-text { font-size: 0.78rem; line-height: 1.3; font-weight: 500; }

/* ============================================================================
   SPLASH SCREEN — Radim Teal  (.radim-splash base in radim-inline.css)
   ============================================================================ */
.splash-content { text-align: center; }
.splash-avatar {
    width: 280px !important; height: auto !important;
    max-width: 85vw;
    margin: 0 auto 16px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.splash-avatar-img {
    width: 280px !important; height: auto !important;
    max-width: 85vw;
    object-fit: contain;
    animation: pulse 2s ease-in-out infinite;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none;
    margin: -18% 0;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

/* .splash-title removed from HTML — SVG logo contains the text now */
.splash-title {
    display: none;
}
.splash-subtitle { color: #8CBCB6; font-size: 0.95rem; margin-bottom: 22px; font-weight: 500; }
.loading-spinner {
    border: 3px solid rgba(91, 168, 160, 0.15);
    border-top: 3px solid var(--radim-teal-light, #5BA8A0);
    border-radius: 50%; width: 36px; height: 36px;
    animation: spin 1s linear infinite; margin: 0 auto;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ============================================================================
   INLINE LOADING MESSAGES — consistent style across modules
   ============================================================================ */
.loading-message {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    font-size: 1rem;
    color: #718096;
    text-align: center;
    gap: 8px;
}

.loading-message::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(91, 168, 160, 0.2);
    border-top: 2px solid var(--accent-primary, #5BA8A0);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* ============================================================================
   SETTINGS / SOUL — Light cards
   ============================================================================ */
.settings-card,
.soul-card,
.soul-section {
    background: var(--bg-secondary, #ffffff) !important;
    border: 1px solid rgba(91, 168, 160, 0.1) !important;
    border-radius: 14px !important;
    color: var(--text-primary, #2d3748) !important;
}

.soul-value-badge {
    background: linear-gradient(135deg, var(--radim-teal), var(--radim-teal-light)) !important;
}

/* Consciousness panel light overrides — consolidated above (line ~367) */

/* ============================================================================
   MATH / WIDGETS — Light
   ============================================================================ */
#radimMathPanel,
.radim-math-widget {
    background: var(--bg-secondary, #ffffff) !important;
    border: 1px solid rgba(91, 168, 160, 0.1) !important;
    border-radius: 14px !important;
    color: var(--text-primary, #2d3748) !important;
}

/* ============================================================================
   HIDE DUPLICATE FLOATING SOS BUTTON — bottom bar already has "Nouzové volání"
   ============================================================================ */
.radim-sos-button,
#radim-sos-btn {
    display: none !important;
}

/* ============================================================================
   FLOATING CHAT BUTTON — Teal
   ============================================================================ */
.radim-floating-chat-btn {
    background: linear-gradient(135deg, var(--radim-teal), var(--radim-teal-light)) !important;
    color: white !important;
    box-shadow: 0 4px 20px rgba(91, 168, 160, 0.4) !important;
}

/* ============================================================================
   NOTIFICATION BELL — Teal
   ============================================================================ */
.notification-bell {
    background: rgba(255,255,255,0.1) !important;
    color: white !important;
}

.notification-bell:hover {
    background: rgba(255,255,255,0.2) !important;
}

.notification-dot {
    background: var(--radim-coral, #F07D7E) !important;
}

/* ============================================================================
   GENERIC CARDS & CONTAINERS — Ensure light theme
   ============================================================================ */
.card,
.widget,
.panel {
    background: var(--bg-secondary, #ffffff) !important;
    border: 1px solid rgba(91, 168, 160, 0.08) !important;
    border-radius: 14px !important;
    color: var(--text-primary, #2d3748) !important;
}

/* Modals */
.modal,
.modal-content {
    background: var(--bg-secondary, #ffffff) !important;
    color: var(--text-primary, #2d3748) !important;
}

/* ============================================================================
   MOBILE RESPONSIVE — Top bar
   ============================================================================ */
@media (max-width: 768px) {
    /* Mobile: top-bar = compact info strip; hide logo & right panel only */
    .top-bar .logo,
    .top-bar .header-right {
        display: none !important;
    }

    /* Kafanek panel — single column on mobile, avatar on top */
    .kafanek-panel {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .kafanek-avatar {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        width: 100px !important;
        height: 100px !important;
    }

    .kafanek-content {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .kafanek-avatar-wrapper {
        width: 100px !important;
        height: 100px !important;
    }

    /* Info cards single column on mobile */
    .info-cards-grid {
        grid-template-columns: 1fr !important;
    }

    .weather-status,
    .time-energy {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
        border-radius: 8px !important;
    }
}

@media (max-width: 480px) {
    .top-bar {
        padding: 6px 10px !important;
    }
}

/* ============================================================================
   ACTIVATION OVERLAY — Mobile responsive
   ============================================================================ */
@media (max-width: 768px) {
    .activation-logo-img { height: 64px; }
    .activation-avatar { width: 150px; height: 150px; padding: 12px; margin-bottom: 12px; }
    .activation-title { font-size: 1.7rem; margin-bottom: 6px; }
    .activation-subtitle { font-size: 1.05rem; margin-bottom: 18px; }
    .radim-activate-btn { padding: 16px 36px; font-size: 1.2rem; }
    .radim-activate-btn .btn-icon { width: 28px; height: 28px; }
    .activation-features { gap: 18px; margin-top: 22px; }
    .activation-feature-icon { width: 44px; height: 44px; font-size: 1.4rem; }
    .activation-feature-text { font-size: 0.75rem; }
}

@media (max-width: 480px) {
    .activation-content { padding: 0 16px; }
    .activation-logo-img { height: 56px; }
    .activation-avatar { width: 130px; height: 130px; padding: 10px; margin-bottom: 10px; }
    .activation-title { font-size: 1.5rem; margin-bottom: 4px; }
    .activation-subtitle { font-size: 0.95rem; margin-bottom: 16px; }
    .radim-activate-btn { padding: 14px 28px; font-size: 1.1rem; width: 100%; max-width: 300px; }
    .activation-hint { font-size: 0.78rem; margin-top: 14px; }
    .activation-features { gap: 14px; margin-top: 18px; }
    .activation-feature-icon { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 12px; }
    .activation-feature-text { font-size: 0.7rem; }
}

@media (max-height: 700px) {
    .activation-logo { margin-bottom: 8px; }
    .activation-logo-img { height: 44px; }
    .activation-avatar { width: 110px; height: 110px; padding: 8px; margin-bottom: 8px; }
    .activation-title { font-size: 1.4rem; margin-bottom: 4px; }
    .activation-subtitle { font-size: 0.9rem; margin-bottom: 12px; }
    .radim-activate-btn { padding: 12px 24px; font-size: 1rem; }
    .activation-hint { margin-top: 10px; font-size: 0.75rem; }
    .activation-features { margin-top: 12px; gap: 12px; }
    .activation-feature-icon { width: 36px; height: 36px; font-size: 1.1rem; }
}
/*! purgecss end ignore */