/* === chat-base.css === */
/**
 * Hilanaw Chat UI — Base
 * @package Hilanaw_Chat_UI
 * @version 5.0.0
 *
 * MERGED FILE — combines:
 *   1. chat-base.css    — Container, Layout, Header, Summary, Messages, Typing, Dropdowns, RTL
 *   2. chat-misc.css    — Performance Badge, Topic Filter, Scrollbar
 *   3. chat-mentor.css  — Mentor Widget and Card
 */


/* ============================================================
 * FROM: chat-base.css
 * Container, Layout, Header, Summary, Messages, Typing,
 * Header Dropdowns, RTL Support
 * ============================================================ */

/* ========================================
   Container & Layout
   ======================================== */

#hilanaw-chat-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    height: 100vh;
    height: 100dvh; /* prevents overflow on mobile browsers that include browser chrome in 100vh */
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: visible !important;
}

/* WordPress content area adjustments */
.entry-content #hilanaw-chat-container,
.page-content #hilanaw-chat-container {
    height: calc(100vh - 5rem) !important;
    min-height: calc(100vh - 5rem) !important;
}

/* Body padding for sticky elements */

body {
    padding-bottom: clamp(4rem, 12vw, 9.375rem);
    background-color: #f9fafb;
}


/* ========================================
   Header
   ======================================== */

#hilanaw-chat-header {
    position: sticky !important;
    top: 0;
    z-index: 10 !important;
    flex-shrink: 0;
    background: linear-gradient(135deg, #0046a0 0%, #0066cc 100%);
    color: white;
    padding: 0;
}

/* Top wrapper menu z-index priority */
.top-wrapper-menu,
.inner-top-menu,
.top-wrapper-menu .avatar-wrapper,
.top-wrapper-menu .inner-top-menu {
    z-index: 50 !important;
}

.hilanaw-header-top {
    display: flex;
    align-items: center;
    padding: clamp(12px, 2vw, 20px);
    gap: clamp(8px, 1.5vw, 16px);
}

.hilanaw-avatar {
    flex-shrink: 0;
    width: clamp(40px, 5vw, 48px);
    height: clamp(40px, 5vw, 48px);
}

.hilanaw-header-info {
    flex: 1;
}

.hilanaw-header-info h4 {
    margin: 0;
    font-size: clamp(14px, 1.8vw, 20px);
    font-weight: 600;
    color: #ffffff;
}

.hilanaw-status-online {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(11px, 1.3vw, 15px);
    opacity: 0.9;
}

.status-dot {
    width: clamp(6px, 1vw, 10px);
    height: clamp(6px, 1vw, 10px);
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.hilanaw-header-actions {
    display: flex;
    gap: clamp(6px, 1vw, 12px);
}

.hilanaw-icon-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    padding: clamp(6px, 1vw, 10px);
    cursor: pointer;
    transition: all 0.2s;
    color: white;
    font-size: clamp(14px, 1.5vw, 18px);
}

.hilanaw-icon-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ========================================
   Session Summary
   ======================================== */

#hilanaw-session-summary {
    background: rgba(0, 0, 0, 0.1);
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.hilanaw-summary-collapsed .hilanaw-summary-content {
    display: none;
}

#hilanaw-session-summary:not(.hilanaw-summary-collapsed) .hilanaw-summary-content {
    display: block;
}

.hilanaw-summary-content {
    padding: clamp(10px, 1.5vw, 16px);
}

.hilanaw-summary-section {
    padding-bottom: clamp(10px, 1.5vw, 16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: clamp(10px, 1.5vw, 16px);
}

.hilanaw-summary-text {
    font-size: clamp(12px, 1.5vw, 16px);
    line-height: 1.5;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.95);
}

.hilanaw-summary-stats {
    display: flex;
    gap: clamp(12px, 2vw, 20px);
    font-size: clamp(11px, 1.3vw, 15px);
}

.stat-item {
    display: flex;
    gap: 4px;
    color: rgba(255, 255, 255, 0.9);
}

.stat-item strong {
    font-weight: 600;
}

/* Mentor Section */
.hilanaw-mentor-section {
    padding-top: clamp(10px, 1.5vw, 16px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: clamp(10px, 1.5vw, 16px);
}

.mentor-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mentor-name-title {
    font-size: clamp(12px, 1.5vw, 16px);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 8px;
}

.mentor-info-header h5 {
    color: #ffffff;
    font-size: clamp(12px, 1.5vw, 16px);
}

.mentor-name {
    font-weight: 600;
}

.mentor-title {
    color: #ffffff;
    opacity: 0.8;
    font-size: clamp(11px, 1.3vw, 14px);
}

.mentor-stats-grid {
    display: flex !important;
    gap: clamp(12px, 2vw, 20px);
    font-size: clamp(11px, 1.3vw, 15px);
    flex-wrap: nowrap;
    align-items: baseline;
}

.mentor-stat {
    display: inline-flex !important;
    gap: 4px;
    color: rgba(255, 255, 255, 0.9) !important;
    white-space: nowrap;
    align-items: baseline;
}

.mentor-stat .stat-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1;
}

.mentor-stat .stat-value {
    font-weight: normal;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1;
}

/* Toggle Button */
.hilanaw-summary-toggle {
    position: absolute;
    top: clamp(10px, 1.5vw, 16px);
    right: clamp(12px, 2vw, 20px);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    padding: clamp(4px, 0.8vw, 8px);
    opacity: 0.8;
    transition: all 0.2s;
    font-size: clamp(14px, 1.5vw, 18px);
}

.hilanaw-summary-toggle:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.3);
}

.hilanaw-summary-collapsed .toggle-icon-close {
    display: none;
}

.hilanaw-summary-collapsed .toggle-icon-open {
    display: block !important;
}

#hilanaw-session-summary:not(.hilanaw-summary-collapsed) .toggle-icon-close {
    display: block;
}

#hilanaw-session-summary:not(.hilanaw-summary-collapsed) .toggle-icon-open {
    display: none !important;
}

/* ========================================
   Messages Container
   ======================================== */

.hilanaw-messages-container {
    flex: 1 1 auto !important;
    padding: clamp(12px, 2.5vw, 24px);
    padding-bottom: 100px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #f9fafb;
    scroll-behavior: smooth;
    min-height: 0 !important;
}

.hilanaw-welcome-message {
    text-align: center;
    padding: clamp(30px, 5vw, 60px) clamp(16px, 3vw, 32px);
    color: #6b7280;
}

.welcome-icon {
    font-size: clamp(36px, 6vw, 64px);
    margin-bottom: clamp(12px, 2vw, 20px);
}

.hilanaw-welcome-message h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: clamp(18px, 2.5vw, 28px);
}

.hilanaw-welcome-message p {
    margin: 0;
    font-size: clamp(13px, 1.6vw, 18px);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* ========================================
   Messages
   ======================================== */

.hilanaw-message {
    display: flex;
    margin-bottom: clamp(12px, 1.8vw, 20px);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hilanaw-message.user {
    justify-content: flex-end;
}

.hilanaw-message.ai {
    justify-content: flex-start;
}

.hilanaw-message-content {
    max-width: 75%;
    padding: clamp(10px, 1.5vw, 16px) clamp(12px, 1.8vw, 20px);
    border-radius: clamp(12px, 1.8vw, 18px);
    position: relative;
    word-wrap: break-word;
}

.hilanaw-message.user .hilanaw-message-content {
    background: linear-gradient(135deg, #0046a0 0%, #0066cc 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.hilanaw-message.ai .hilanaw-message-content {
    background: white;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.hilanaw-message-text {
    font-size: clamp(13px, 1.6vw, 18px);
    line-height: 1.6;
}

/* ========================================
   Visual Components (v6.1.0)
   ======================================== */

/* Message row becomes a column when it has a visual */
.hilanaw-message.ai.has-visual {
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
}

/* Keep the text bubble at its normal width — must use width not just max-width
   because in column flex direction children shrink to content width by default */
.hilanaw-message.ai.has-visual .hilanaw-message-content {
    max-width: 75%;
    width: 75%;
}

/* On mobile phones, widen the text bubble so it doesn't look cramped
   alongside a full-width visual below it */
@media (max-width: 480px) {
    .hilanaw-message.ai.has-visual .hilanaw-message-content {
        max-width: 85%;
        width: 85%;
    }
}

/* Visual wrapper renders full width below the bubble */
.hilanaw-visual-wrapper {
    width: 100%;
    margin-top: 8px;
}

/* Visual component base */
.hilanaw-visual {
    width: 100%;
}

/* ========================================
   Markdown formatting in AI messages */
.hilanaw-message.ai .hilanaw-message-text h1,
.hilanaw-message.ai .hilanaw-message-text h2,
.hilanaw-message.ai .hilanaw-message-text h3 {
    margin: 8px 0 4px;
    font-weight: 600;
    font-size: clamp(15px, 2vw, 22px);
}

.hilanaw-message.ai .hilanaw-message-text p {
    margin: 8px 0;
}

.hilanaw-message.ai .hilanaw-message-text ul,
.hilanaw-message.ai .hilanaw-message-text ol {
    margin: 8px 0;
    padding-left: clamp(20px, 3vw, 28px);
}

.hilanaw-message.ai .hilanaw-message-text li {
    margin: 4px 0;
}

.hilanaw-message.ai .hilanaw-message-text code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: clamp(12px, 1.4vw, 16px);
}

.hilanaw-message.ai .hilanaw-message-text pre {
    background: #1f2937;
    color: #f9fafb;
    padding: clamp(10px, 1.5vw, 16px);
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
}

.hilanaw-message.ai .hilanaw-message-text pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.hilanaw-message.ai .hilanaw-message-text strong {
    font-weight: 600;
}

.hilanaw-message.ai .hilanaw-message-text em {
    font-style: italic;
}

.hilanaw-message.ai .hilanaw-message-text blockquote {
    border-left: 3px solid #667eea;
    padding-left: clamp(10px, 1.5vw, 16px);
    margin: 8px 0;
    color: #6b7280;
}

.hilanaw-message-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: clamp(10px, 1.2vw, 13px);
    /* opacity removed — applied per-child to avoid bleeding through Edit button background */
}

.hilanaw-message-time {
    font-size: clamp(10px, 1.2vw, 13px);
    opacity: 0.7;
}

.hilanaw-message.user .hilanaw-message-time {
    color: rgba(255, 255, 255, 0.8);
}

.hilanaw-message.ai .hilanaw-message-time {
    color: #6b7280;
}

/* ========================================
   Typing Indicator
   ======================================== */

.hilanaw-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: clamp(10px, 1.5vw, 16px) clamp(16px, 2.5vw, 24px);
    background: #f9fafb;
    margin-bottom: clamp(12px, 1.8vw, 20px);
    animation: slideIn 0.3s ease-out;
}

.hilanaw-typing span {
    width: clamp(6px, 1vw, 10px);
    height: clamp(6px, 1vw, 10px);
    background: #9ca3af;
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

.hilanaw-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.hilanaw-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}


/* ============================================================
   HEADER DROPDOWNS — Voice & Language
   Used by #hilanaw-voice-wrap and #hilanaw-language-wrap
   ============================================================ */

.hilanaw-header-dropdown-wrap {
    position: relative;
}

/* The floating panel */
.hilanaw-header-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10);
    z-index: 9999;
    overflow: hidden;
    /* Animate in */
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.hilanaw-header-dropdown.open {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Arrow tip pointing up toward the button */
.hilanaw-header-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 4px rgba(0,0,0,0.06);
}

/* Section title */
.hilanaw-dropdown-title {
    padding: 12px 16px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid #f3f4f6;
}

/* ── Voice dropdown rows ── */
.hilanaw-dropdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    gap: 12px;
    border-bottom: 1px solid #f9fafb;
    transition: background 0.15s ease;
}

.hilanaw-dropdown-row:last-child {
    border-bottom: none;
}

.hilanaw-dropdown-row:hover {
    background: #f8faff;
}

.hilanaw-dropdown-row-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.hilanaw-dropdown-row-label svg {
    flex-shrink: 0;
    color: #6b7280;
}

/* Toggle button inside the dropdown row */
.hilanaw-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: #f3f4f6;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
    outline: none;
}

/* Responsive icon size inside toggle buttons */
.hilanaw-dropdown-toggle svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .hilanaw-dropdown-toggle {
        width: 40px;
        height: 40px;
    }

    .hilanaw-dropdown-toggle svg {
        width: 22px;
        height: 22px;
    }
}

.hilanaw-dropdown-toggle:hover {
    background: #e5e7eb;
}

/* Active (on) state — blue tint */
.hilanaw-dropdown-toggle[aria-pressed="true"] {
    background: #eff6ff;
    color: #4A90E2;
}

.hilanaw-dropdown-toggle[aria-pressed="true"]:hover {
    background: #dbeafe;
}

/* Muted TTS state */
.hilanaw-dropdown-toggle.tts-muted {
    background: #f3f4f6;
    color: #9ca3af;
}

/* ── Language dropdown ── */
.hilanaw-lang-dropdown {
    min-width: 240px;
}

.hilanaw-lang-list {
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.hilanaw-lang-list::-webkit-scrollbar {
    width: 4px;
}

.hilanaw-lang-list::-webkit-scrollbar-track {
    background: transparent;
}

.hilanaw-lang-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.hilanaw-lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 16px;
    border: none;
    background: transparent;
    color: #374151;
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
    outline: none;
    gap: 8px;
}

.hilanaw-lang-option:hover {
    background: #f3f4f6;
}

.hilanaw-lang-option.active {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

.hilanaw-lang-option.active:hover {
    background: #dbeafe;
}

.hilanaw-lang-check {
    flex-shrink: 0;
    color: #4A90E2;
}

/* Saving feedback at the bottom of the language dropdown */
.hilanaw-lang-saving {
    min-height: 28px;
    padding: 4px 16px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #10b981;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.hilanaw-lang-saving.visible {
    opacity: 1;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .hilanaw-header-dropdown {
        right: -8px;
        min-width: 200px;
    }

    .hilanaw-lang-dropdown {
        min-width: 210px;
        right: -30px;
    }

    .hilanaw-lang-list {
        max-height: 220px;
    }
}

/* ── Accessibility ── */
.hilanaw-dropdown-toggle:focus-visible,
.hilanaw-lang-option:focus-visible {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .hilanaw-header-dropdown {
        transition: none;
    }
}

/* ============================================================
   RTL SUPPORT — .hilanaw-rtl
   Applied to #hilanaw-chat-container when the user's language
   is right-to-left (Arabic, Farsi, Urdu).
   All rules are scoped to .hilanaw-rtl so LTR users are
   completely unaffected.
   ============================================================ */

/* ── Message bubbles ── */

/* User bubble: flip to left side */
.hilanaw-rtl .hilanaw-message.user {
    justify-content: flex-start;
}

/* AI bubble: flip to right side */
.hilanaw-rtl .hilanaw-message.ai {
    justify-content: flex-end;
}

/* User bubble tail: flip corner from right to left */
.hilanaw-rtl .hilanaw-message.user .hilanaw-message-content {
    border-bottom-right-radius: clamp(12px, 1.8vw, 18px);
    border-bottom-left-radius: 4px;
}

/* AI bubble tail: flip corner from left to right */
.hilanaw-rtl .hilanaw-message.ai .hilanaw-message-content {
    border-bottom-left-radius: clamp(12px, 1.8vw, 18px);
    border-bottom-right-radius: 4px;
}

/* Message text: right-align and RTL reading direction */
.hilanaw-rtl .hilanaw-message-text {
    text-align: right;
    direction: rtl;
}

/* Timestamps: flip alignment */
.hilanaw-rtl .hilanaw-message.user .hilanaw-message-time {
    text-align: left;
}

.hilanaw-rtl .hilanaw-message.ai .hilanaw-message-time {
    text-align: right;
}

/* ── Visual messages (has-visual) ── */
.hilanaw-rtl .hilanaw-message.ai.has-visual {
    align-items: flex-end;
}

/* ── Header actions: reverse icon order ── */
.hilanaw-rtl .hilanaw-header-actions {
    flex-direction: row-reverse;
}

/* ── Dropdowns: anchor to left instead of right ── */
.hilanaw-rtl .hilanaw-header-dropdown {
    right: auto;
    left: 0;
}

.hilanaw-rtl .hilanaw-header-dropdown::before {
    right: auto;
    left: 14px;
}

/* ── Language dropdown: keep text LTR inside (language names read naturally) ── */
.hilanaw-rtl .hilanaw-lang-option {
    direction: ltr;
    text-align: left;
}

/* ── Onboarding overlay: RTL text ── */
.hilanaw-rtl #hilanaw-onboarding-overlay {
    direction: rtl;
    text-align: right;
}

/* ── Summary panel: RTL text ── */
.hilanaw-rtl .hilanaw-summary-content {
    direction: rtl;
    text-align: right;
}

.hilanaw-rtl .hilanaw-summary-stats {
    flex-direction: row-reverse;
}

/* ── Mode controls: reverse button order ── */
.hilanaw-rtl .hilanaw-mode-switcher {
    flex-direction: row-reverse;
}

.hilanaw-rtl .hilanaw-syllabus-nav {
    flex-direction: row-reverse;
}

/* ── Input area: RTL text direction (textarea inherits from container dir) ── */
.hilanaw-rtl #hilanaw-chat-input {
    text-align: right;
}

/* ── Notifications: appear from left instead of right ── */
.hilanaw-rtl .hilanaw-notification {
    right: auto;
    left: 20px;
    animation-name: hilanaw-slideInLeft-rtl;
}

@keyframes hilanaw-slideInLeft-rtl {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ── Reduced motion: disable RTL animation too ── */
@media (prefers-reduced-motion: reduce) {
    .hilanaw-rtl .hilanaw-notification {
        animation: none;
    }
}


/* ============================================================
 * FROM: chat-misc.css
 * Performance Badge, Topic Filter, Scrollbar
 * ============================================================ */

/* ========================================
   Performance Badge
   ======================================== */

.hilanaw-performance-badge {
    font-size: clamp(9px, 1.1vw, 12px);
    padding: 2px clamp(4px, 0.8vw, 8px);
    border-radius: 4px;
    font-weight: 500;
}

.hilanaw-performance-badge.fast {
    background: #d1fae5;
    color: #065f46;
}

.hilanaw-performance-badge.normal {
    background: #dbeafe;
    color: #1e40af;
}

.hilanaw-performance-badge.slow {
    background: #fee2e2;
    color: #991b1b;
}

/* ========================================
   Topic Filter Message
   ======================================== */

.hilanaw-message.filtered-message {
    opacity: 0.7;
    animation: shake 0.5s;
}

.hilanaw-message.filtered-message .hilanaw-message-content {
    border: 1px dashed #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* ========================================
   Scrollbar Customization
   ======================================== */

.hilanaw-messages-container::-webkit-scrollbar {
    width: clamp(6px, 0.8vw, 10px);
}

.hilanaw-messages-container::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.hilanaw-messages-container::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.hilanaw-messages-container::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ============================================================
 * FROM: chat-mentor.css
 * Mentor Widget and Card
 * ============================================================ */

/* ========================================
   Mentor Widget
   ======================================== */

.hilanaw-mentor-widget {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: clamp(10px, 1.5vw, 14px);
    padding: clamp(12px, 2vw, 20px);
    margin: clamp(10px, 1.5vw, 16px);
}

.mentor-header {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 16px);
    margin-bottom: clamp(12px, 2vw, 18px);
}

.mentor-avatar {
    width: clamp(40px, 6vw, 56px);
    height: clamp(40px, 6vw, 56px);
    border-radius: clamp(10px, 1.5vw, 14px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 700;
}

.mentor-info h4 {
    margin: 0;
    font-size: clamp(14px, 1.8vw, 19px);
    color: #111827;
}

.mentor-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.5vw, 16px);
    margin-bottom: clamp(12px, 2vw, 18px);
}

.mentor-stats .stat {
    text-align: center;
    padding: clamp(10px, 1.5vw, 14px);
    background: #f9fafb;
    border-radius: 8px;
}

.stat-label {
    display: block;
    font-size: clamp(10px, 1.2vw, 13px);
    color: #6b7280;
    margin-bottom: 4px;
}

.stat-value {
    display: block;
    font-size: clamp(16px, 2.2vw, 22px);
    font-weight: 700;
    color: #111827;
}

.mentor-change-btn {
    width: 100%;
    padding: clamp(8px, 1.2vw, 12px);
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: clamp(12px, 1.5vw, 15px);
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.mentor-change-btn:hover {
    background: #e5e7eb;
}

/* ========================================
   Mentor Card
   ======================================== */

.hilanaw-mentor-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: clamp(10px, 1.5vw, 14px);
    padding: clamp(12px, 2vw, 20px);
    margin-bottom: clamp(12px, 2vw, 20px);
}

.hilanaw-mentor-card h4 {
    margin: 0 0 8px;
    font-size: clamp(14px, 1.8vw, 19px);
    color: #111827;
}

.hilanaw-mentor-card .compatibility-score {
    background: #f3f4f6;
    padding: clamp(6px, 1vw, 10px) clamp(10px, 1.5vw, 14px);
    border-radius: 8px;
    font-size: clamp(12px, 1.5vw, 15px);
    text-align: center;
}

.hilanaw-mentor-card .compatibility-score strong {
    display: block;
    font-size: clamp(18px, 2.5vw, 24px);
    color: #667eea;
    margin-bottom: 4px;
}



/* === chat-interactions.css === */
/**
 * Hilanaw Chat UI — Interactions
 * @package Hilanaw_Chat_UI
 * @version 5.0.0
 *
 * MERGED FILE — combines:
 *   1. chat-input.css         — Input Form, Card, Textarea, Buttons, File Preview, Edit, Copy, Modal
 *   2. chat-notifications.css — Login Prompt, Errors, Loading, Notifications, Skeleton
 *   3. chat-responsive.css    — Breakpoints, Accessibility, Print, Pass Limit
 */


/* ============================================================
 * FROM: chat-input.css
 * Input Form, Card Layout, Textarea, Buttons,
 * File Preview, Edit Button, Copy Button, Confirm Modal
 * ============================================================ */

/* ========================================
   Input Form (Fixed at Bottom)
   ======================================== */

/* ============================================
   CHAT INPUT — Card layout v4.0 (Claude-style)
   ============================================ */

#hilanaw-chat-form {
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    padding: clamp(10px, 2vw, 16px) clamp(12px, 2.5vw, 20px);
    padding-bottom: max(clamp(10px, 2vw, 16px), -webkit-env(safe-area-inset-bottom));
    padding-bottom: max(clamp(10px, 2vw, 16px), env(safe-area-inset-bottom));
    background: transparent;
    border-top: none;
    flex-shrink: 0;
    z-index: 55 !important;
    margin-bottom: 0 !important;
    box-shadow: none;
}

.hilanaw-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.8vw, 8px);
}

/* ── Input card — rounded container ─────────────────────────────── */

/*
  COLLAPSED grid (1 row):
  [ attach ] [ textarea.................. ] [ mic ] [ send ]

  EXPANDED grid (2 rows):
  [ textarea.................................. ]
  [ attach ] [ char count........... ] [ mic ] [ send ]
*/

.hilanaw-input-card {
    background: #ffffff;
    border: 2px solid #9ca3af;
    border-radius: clamp(16px, 2.5vw, 22px);
    transition: border-color 0.25s, box-shadow 0.25s;

    /* COLLAPSED: single row grid */
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: auto;
    grid-template-areas: "attach input mic send";
    align-items: center;
    padding: clamp(6px, 1vw, 10px) clamp(10px, 1.5vw, 14px);
    gap: clamp(6px, 1vw, 10px);
}

.hilanaw-input-card.is-expanded {
    border-color: #0046a0;
    box-shadow: 0 0 0 3px rgba(0, 70, 160, 0.1);

    /* EXPANDED: two row grid */
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "input  input  input  input"
        "attach charcnt  mic  send";
    padding: clamp(10px, 1.5vw, 14px) clamp(12px, 1.8vw, 16px) clamp(6px, 1vw, 10px);
}

/* ── Grid area assignments ───────────────────────────────────────── */
#hilanaw-attach-btn   { grid-area: attach; }
#hilanaw-chat-input   { grid-area: input;  }
#hilanaw-mic-btn      { grid-area: mic;    }
#hilanaw-send-btn     { grid-area: send;   }
.char-count           { grid-area: charcnt; }

/* ── Textarea ────────────────────────────────────────────────────── */
#hilanaw-chat-input {
    border: none;
    background: transparent;
    padding: 0;
    font-size: clamp(13px, 1.6vw, 16px);
    font-family: inherit;
    resize: none;
    line-height: 1.6;
    color: #111827;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    width: 100%;

    /* COLLAPSED: single line, centred placeholder */
    min-height: clamp(24px, 3.5vw, 36px);
    max-height: clamp(24px, 3.5vw, 36px);
    overflow: hidden;
    text-align: center;
}

/* EXPANDED: grows with content */
.hilanaw-input-card.is-expanded #hilanaw-chat-input {
    min-height: clamp(24px, 3.5vw, 36px);
    max-height: clamp(120px, 18vh, 180px);
    overflow-y: auto;
    text-align: left;
}

#hilanaw-chat-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

#hilanaw-chat-input:not(:placeholder-shown) {
    text-align: left;
}

#hilanaw-chat-input::placeholder {
    color: #6b7280;
    text-align: center;
}

/* ── History loading state ───────────────────────────────────────────────────
   Applied by _lockInputForHistory() while conversation history is rendering.
   Removed by _unlockInputAfterHistory() once the last message chunk is in DOM.
   ─────────────────────────────────────────────────────────────────────────── */
#hilanaw-chat-input.hilanaw-input-loading {
    opacity: 0.45;
    cursor: not-allowed;
}

#hilanaw-chat-input.hilanaw-input-loading::placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* ── Action row wrapper — not needed with grid, remove it from flow ── */
.hilanaw-input-actions {
    display: contents; /* children participate directly in the grid */
}

.hilanaw-actions-left,
.hilanaw-actions-right {
    display: contents; /* same — let individual buttons sit in grid areas */
}

/* ── Char count: hidden collapsed, visible expanded ──────────────── */
.char-count {
    font-size: clamp(10px, 1.2vw, 12px);
    color: #d1d5db;
    transition: color 0.2s;
    text-align: center;
    pointer-events: none;
    display: none;
}

.hilanaw-input-card.is-expanded .char-count {
    display: block;
}

.char-count.warning { color: #f59e0b; }
.char-count.danger  { color: #ef4444; }

/* ── Action buttons ──────────────────────────────────────────────── */
.hilanaw-input-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(30px, 4vw, 36px);
    height: clamp(30px, 4vw, 36px);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, opacity 0.2s;
    padding: 0;
}

.hilanaw-input-action-btn svg {
    width: clamp(15px, 2vw, 18px);
    height: clamp(15px, 2vw, 18px);
}

/* Attach button */
#hilanaw-attach-btn {
    background: #e8edf5;
    color: #0046a0;
}

#hilanaw-attach-btn:hover:not(:disabled) {
    background: #d4e0f0;
    color: #003580;
    transform: scale(1.08);
}

#hilanaw-attach-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mic button */
.hilanaw-mic-btn {
    background: #e8edf5;
    color: #0046a0;
    transition: background 0.2s, color 0.2s, transform 0.15s, opacity 0.2s;
}

.hilanaw-mic-btn:hover:not(:disabled) {
    background: #d4e0f0;
    color: #003580;
    transform: scale(1.08);
}

.hilanaw-mic-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Recording state */
.hilanaw-mic-btn.recording {
    background: #fee2e2;
    color: #dc2626;
    animation: mic-pulse 1.2s ease-in-out infinite;
}

@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.3); }
    50%       { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Send button — slides in when input has text */
.hilanaw-send-btn {
    background: linear-gradient(135deg, #0046a0 0%, #0066cc 100%);
    color: white;
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.hilanaw-send-btn.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.hilanaw-send-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #003d8f 0%, #0055aa 100%);
    transform: scale(1.05);
}

.hilanaw-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Hides mic when user is typing — send button takes over */
.hidden-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.8) !important;
}

/* Ensure mic is always visible when card is expanded and input is empty */
.hilanaw-input-card.is-expanded #hilanaw-mic-btn:not(.hidden-btn) {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
}


/* ── File preview bar (shown above input card when file attached) ── */
.hilanaw-file-preview {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: clamp(10px, 1.5vw, 14px);
    padding: clamp(6px, 1vw, 10px) clamp(10px, 1.5vw, 14px);
    margin-bottom: clamp(4px, 0.6vw, 8px);
}

.hilanaw-file-preview-inner {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
}

.hilanaw-file-name {
    flex: 1;
    font-size: clamp(12px, 1.4vw, 14px);
    font-weight: 500;
    color: #1e40af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hilanaw-file-size {
    font-size: clamp(11px, 1.2vw, 13px);
    color: #6b7280;
    white-space: nowrap;
    flex-shrink: 0;
}

.hilanaw-file-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: #dbeafe;
    color: #1e40af;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.15s;
    margin-left: auto;
}

.hilanaw-file-remove:hover {
    background: #bfdbfe;
    transform: scale(1.1);
}

.hilanaw-file-remove svg {
    width: 12px;
    height: 12px;
}

/* File tag shown inside user message bubble */
.hilanaw-msg-file-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: clamp(10px, 1.2vw, 12px);
    font-weight: 500;
    margin-top: 6px;
    width: fit-content;
}

/* ── Transcribing / recording indicator ─────────────────────────── */
.hilanaw-transcribing-indicator {
    text-align: center;
    font-size: clamp(11px, 1.3vw, 13px);
    color: #0046a0;
    font-weight: 500;
    padding: clamp(4px, 0.6vw, 6px) 0;
    animation: pulse-text 1.4s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── Edit button on user messages ────────────────────────────────── */
.hilanaw-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    border: none;
    cursor: pointer;
    padding: 4px 10px 4px 7px;
    border-radius: 20px;
    color: #0046a0;
    font-size: clamp(10px, 1.2vw, 12px);
    font-weight: 600;
    font-family: inherit;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    flex-shrink: 0;
}

.hilanaw-edit-btn svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.hilanaw-edit-btn:hover {
    background: #f0f5ff;
    box-shadow: 0 2px 8px rgba(0,70,160,0.2);
    transform: scale(1.04);
}

/* ── Copy button ─────────────────────────────────────────────────── */
.hilanaw-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    color: rgba(255,255,255,0.75);
    transition: background 0.2s, color 0.2s, transform 0.15s;
    margin-left: 2px;
    vertical-align: middle;
    flex-shrink: 0;
}

.hilanaw-message.ai .hilanaw-copy-btn {
    color: #9ca3af;
}

.hilanaw-copy-btn:hover {
    background: rgba(255,255,255,0.15);
    color: white;
    transform: scale(1.08);
}

.hilanaw-message.ai .hilanaw-copy-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.hilanaw-copy-btn.copied {
    color: #4ade80 !important;
}

.hilanaw-message.ai .hilanaw-copy-btn.copied {
    color: #16a34a !important;
}

/* ── Custom confirmation modal ───────────────────────────────────── */
.hilanaw-confirm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 32px);
    animation: fadeInOverlay 0.15s ease;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hilanaw-confirm-box {
    background: #ffffff;
    border-radius: clamp(14px, 2vw, 18px);
    padding: clamp(20px, 3vw, 28px);
    width: 100%;
    max-width: 340px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    animation: slideUpBox 0.2s ease;
}

@keyframes slideUpBox {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hilanaw-confirm-title {
    font-size: clamp(15px, 1.8vw, 17px);
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}

.hilanaw-confirm-body {
    font-size: clamp(12px, 1.5vw, 14px);
    color: #6b7280;
    line-height: 1.55;
    margin: 0 0 clamp(16px, 2.5vw, 22px);
}

.hilanaw-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.hilanaw-confirm-cancel {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    background: transparent;
    color: #374151;
    font-size: clamp(12px, 1.4vw, 14px);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.hilanaw-confirm-cancel:hover {
    background: #f3f4f6;
}

.hilanaw-confirm-proceed {
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #0046a0 0%, #0066cc 100%);
    color: white;
    font-size: clamp(12px, 1.4vw, 14px);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.hilanaw-confirm-proceed:hover {
    background: linear-gradient(135deg, #003d8f 0%, #0055aa 100%);
    transform: scale(1.03);
}

/* Message editing loading state */
.hilanaw-msg-editing {
    opacity: 0.5;
    pointer-events: none;
}



/* ============================================================
 * FROM: chat-notifications.css
 * Login Prompt, Error States, Loading, Notifications,
 * Stage Change, Mentor Change, Trait Update, Skeleton
 * ============================================================ */

/* ========================================
   Login Prompt
   ======================================== */

.hilanaw-login-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 8vw, 80px) clamp(24px, 5vw, 48px);
    text-align: center;
    flex: 1;
}

.hilanaw-login-prompt h3 {
    margin: clamp(12px, 2vw, 20px) 0 8px;
    color: #111827;
    font-size: clamp(18px, 2.5vw, 26px);
}

.hilanaw-login-prompt p {
    margin: 0 0 clamp(20px, 3vw, 28px);
    color: #6b7280;
    font-size: clamp(13px, 1.6vw, 17px);
}

.hilanaw-btn-primary {
    display: inline-block;
    background: linear-gradient(135deg, #0046a0 0%, #0066cc 100%);
    color: white;
    padding: clamp(10px, 1.5vw, 14px) clamp(24px, 4vw, 36px);
    border-radius: clamp(8px, 1.2vw, 12px);
    text-decoration: none;
    font-weight: 500;
    font-size: clamp(13px, 1.6vw, 17px);
    transition: all 0.2s;
}

.hilanaw-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ========================================
   Error States
   ======================================== */

.hilanaw-error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: clamp(10px, 1.5vw, 16px);
    border-radius: 8px;
    margin: clamp(10px, 1.5vw, 16px) clamp(16px, 2.5vw, 24px);
    font-size: clamp(12px, 1.5vw, 16px);
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 10px);
}

.hilanaw-error-message svg {
    flex-shrink: 0;
    width: clamp(16px, 2vw, 20px);
    height: clamp(16px, 2vw, 20px);
}

.hilanaw-error-message.rate-limit {
    background: #fef2f2;
    border-left-width: 4px;
}

.hilanaw-error-message.rate-limit strong {
    display: block;
    margin-bottom: 6px;
    color: #991b1b;
}

.hilanaw-error-message.rate-limit p {
    margin: 4px 0;
}

.hilanaw-error-message.rate-limit small {
    opacity: 0.8;
}

.hilanaw-error-message[data-type="warning"] {
    background: #fffbeb;
    border-color: #fbbf24;
    color: #92400e;
}

/* ========================================
   Loading States
   ======================================== */

.hilanaw-message.loading .hilanaw-message-content {
    background: #f3f4f6;
    animation: pulse 2s infinite;
}

/* ========================================
   Notifications
   ======================================== */

.hilanaw-stage-change {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    padding: clamp(10px, 1.5vw, 16px);
    border-radius: 8px;
    margin: clamp(10px, 1.5vw, 16px) clamp(16px, 2.5vw, 24px);
    text-align: center;
    font-size: clamp(12px, 1.5vw, 16px);
    color: #92400e;
    animation: slideIn 0.3s ease-out;
}

.hilanaw-stage-change strong {
    color: #78350f;
}

.hilanaw-info-message {
    background: #eff6ff;
    border: 1px solid #3b82f6;
    border-left: 4px solid #3b82f6;
    padding: clamp(10px, 1.5vw, 16px);
    border-radius: 8px;
    margin: clamp(10px, 1.5vw, 16px) clamp(16px, 2.5vw, 24px);
    font-size: clamp(12px, 1.5vw, 16px);
    color: #1e40af;
    display: flex;
    gap: clamp(8px, 1.5vw, 14px);
    align-items: flex-start;
}

.hilanaw-info-message strong {
    display: block;
    margin-bottom: 6px;
    color: #1e3a8a;
}

.hilanaw-info-message p {
    margin: 0;
    line-height: 1.5;
}

.hilanaw-info-message svg {
    flex-shrink: 0;
    margin-top: 2px;
    width: clamp(16px, 2vw, 20px);
    height: clamp(16px, 2vw, 20px);
}

.hilanaw-info-message div {
    flex: 1;
}

.hilanaw-mentor-change {
    background: linear-gradient(135deg, #e0f2fe 0%, #bfdbfe 100%);
    border: 1px solid #60a5fa;
    padding: clamp(10px, 1.5vw, 16px);
    border-radius: 8px;
    margin: clamp(10px, 1.5vw, 16px) clamp(16px, 2.5vw, 24px);
    text-align: center;
    font-size: clamp(12px, 1.5vw, 16px);
    color: #1e40af;
    animation: slideIn 0.3s ease-out;
}

.hilanaw-mentor-change strong {
    color: #1e3a8a;
}

.hilanaw-mentor-change-notification {
    background: linear-gradient(135deg, #e0f2fe 0%, #bfdbfe 100%);
    border: 1px solid #60a5fa;
    border-radius: clamp(10px, 1.5vw, 14px);
    padding: clamp(12px, 2vw, 20px);
    margin: clamp(12px, 2vw, 20px) clamp(16px, 2.5vw, 24px);
    display: flex;
    gap: clamp(10px, 1.5vw, 16px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.mentor-change-icon {
    font-size: clamp(24px, 4vw, 36px);
}

.mentor-change-content strong {
    display: block;
    color: #1e3a8a;
    margin-bottom: 8px;
    font-size: clamp(13px, 1.6vw, 17px);
}

.mentor-transition {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(10px, 1.5vw, 14px);
    padding-top: clamp(10px, 1.5vw, 14px);
    border-top: 1px solid rgba(59, 130, 246, 0.3);
    font-size: clamp(12px, 1.5vw, 15px);
}

.mentor-transition svg {
    flex-shrink: 0;
    color: #3b82f6;
}

.old-mentor {
    color: #6b7280;
    text-decoration: line-through;
}

.new-mentor {
    color: #1e40af;
    font-weight: 600;
}

.hilanaw-trait-update {
    background: #f0fdf4;
    border: 1px solid #86efac;
    padding: clamp(8px, 1.2vw, 12px) clamp(12px, 1.8vw, 18px);
    border-radius: 8px;
    margin: clamp(6px, 1vw, 10px) clamp(16px, 2.5vw, 24px);
    font-size: clamp(11px, 1.3vw, 14px);
    color: #166534;
    text-align: center;
    animation: slideIn 0.3s ease-out;
}

.hilanaw-milestone-notification {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    padding: clamp(10px, 1.5vw, 16px);
    border-radius: 8px;
    margin: clamp(10px, 1.5vw, 16px) clamp(16px, 2.5vw, 24px);
    text-align: center;
    font-size: clamp(12px, 1.6vw, 17px);
    color: #92400e;
    font-weight: 500;
    animation: slideIn 0.3s ease-out;
}

/* ========================================
   Message History Skeleton
   Shown on first paint while history loads.
   Removed by JS once real messages render.
   ======================================== */

.hilanaw-skeleton-messages {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 22px);
    padding: clamp(12px, 2.5vw, 24px);
    padding-bottom: 40px;
}

.hilanaw-skeleton-msg {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hilanaw-skeleton-msg.user {
    align-items: flex-end;
}

.hilanaw-skeleton-msg.ai {
    align-items: flex-start;
}

/* Defined here because skeleton bubbles below depend on it.
   hilanaw-mode-controls.css also defines this keyframe — both are
   intentionally identical; do not change one without updating the other. */
@keyframes hilanaw-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.hilanaw-skeleton-bubble {
    height: clamp(14px, 2vw, 18px);
    border-radius: 10px;
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 600px 100%;
    animation: hilanaw-shimmer 1.4s infinite linear;
}

.hilanaw-skeleton-msg.user .hilanaw-skeleton-bubble {
    background: linear-gradient(90deg, #c7d7f0 25%, #dbeafe 50%, #c7d7f0 75%);
    background-size: 600px 100%;
    animation: hilanaw-shimmer 1.4s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
    .hilanaw-skeleton-bubble {
        animation: none;
        background: #e5e7eb;
    }
    .hilanaw-skeleton-msg.user .hilanaw-skeleton-bubble {
        background: #c7d7f0;
    }
}



/* ============================================================
 * FROM: chat-responsive.css
 * Responsive Breakpoints, Accessibility, Print, Pass Limit
 * ============================================================ */

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 640px) {
    #hilanaw-chat-container {
        height: 100vh !important;
        height: 100dvh !important;
    }

    .hilanaw-header-top {
        padding: 12px;
    }

    .hilanaw-messages-container {
        padding: 12px;
    }

    .hilanaw-message-content {
        max-width: 85%;
    }

    #hilanaw-chat-form {
        padding: 12px;
    }

    .hilanaw-welcome-message {
        padding: 20px 12px;
    }

    .mentor-stats-grid {
        flex-wrap: wrap;
        gap: 12px;
    }

    .hilanaw-summary-stats {
        flex-direction: column;
        gap: 8px;
    }
}

/* bottom: 0 and padding-bottom: 100px are set on the base rules above —
   no media query overrides needed; removed redundant 768px / 768–1023px / 1024px blocks. */

/* ========================================
   Accessibility
   ======================================== */

.hilanaw-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

button:focus-visible,
textarea:focus-visible:not(#hilanaw-chat-input),
a:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Chat input never shows a focus ring — the card border handles focus state */
#hilanaw-chat-input:focus-visible {
    outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    .hilanaw-message.ai .hilanaw-message-content {
        border-width: 2px;
    }
    
    .hilanaw-message.user .hilanaw-message-content {
        background: #000;
        color: #fff;
    }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    #hilanaw-chat-header,
    #hilanaw-chat-form,
    .hilanaw-header-actions {
        display: none;
    }

    #hilanaw-chat-container {
        border: none;
        box-shadow: none;
    }

    .hilanaw-messages-container {
        overflow: visible;
    }
}





/* ========================================
Pass Limit & Purchase Warning 
======================================== */

/* Upgrade Button - Border Only Style with Minimal Padding */
.hilanaw-upgrade-button {
    display: inline-block;
    background: transparent;
    color: #0046a0;
    padding: clamp(4px, 1vw, 6px) clamp(12px, 2vw, 16px);
    border: 2px solid #0046a0;
    border-radius: 50px;
    font-weight: 700;
    font-size: clamp(13px, 3vw, 15px);
    text-decoration: none;
    transition: all 0.2s;
    margin-top: clamp(8px, 2vw, 12px);
}

.hilanaw-upgrade-button:hover {
    background: white;
    color: #667eea;
    text-decoration: none;
}


/**
 * Hilanaw Chat UI - Onboarding Progress Styles
 * Add these styles to chat-ui.css
 * Version: 4.0.0
 */



/* === chat-onboarding-tts.css === */
/**
 * Hilanaw Chat UI — Onboarding & TTS
 * @package Hilanaw_Chat_UI
 * @version 5.0.0
 *
 * MERGED FILE — combines:
 *   1. chat-onboarding.css  — Progress Indicator, Badge, Completion, Responsive
 *   2. hilanaw-chat-tts.css — TTS Play Button, Sound Waves, Header Toggle, Dark Overrides
 */


/* ============================================================
 * FROM: chat-onboarding.css
 * Onboarding Progress Indicator, Badge in Message,
 * Completion Celebration, Responsive Adjustments
 * ============================================================ */

/* ========================================
   ONBOARDING PROGRESS INDICATOR
   ======================================== */

.hilanaw-onboarding-progress {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hilanaw-onboarding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.hilanaw-onboarding-title {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hilanaw-onboarding-title svg {
    width: 18px;
    height: 18px;
}

.hilanaw-onboarding-percentage {
    font-size: 16px;
    font-weight: 700;
}

.hilanaw-onboarding-bar {
    background: rgba(255, 255, 255, 0.2);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.hilanaw-onboarding-bar-fill {
    background: white;
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease-out;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.hilanaw-onboarding-step-info {
    font-size: 12px;
    opacity: 0.9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hilanaw-onboarding-step-count {
    font-weight: 500;
}

.hilanaw-onboarding-field-label {
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ========================================
   ONBOARDING BADGE IN MESSAGE
   ======================================== */

.hilanaw-message.onboarding-mode {
    position: relative;
}

.hilanaw-message.onboarding-mode .hilanaw-message-text {
    white-space: pre-wrap;
}

.hilanaw-message.onboarding-mode.ai::before {
    content: '📝 ONBOARDING';
    position: absolute;
    top: -8px;
    left: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    z-index: 1;
}

/* ========================================
   ONBOARDING COMPLETION CELEBRATION
   ======================================== */

.hilanaw-onboarding-complete {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 16px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(56, 239, 125, 0.3);
    animation: celebrationPulse 0.6s ease-out;
}

@keyframes celebrationPulse {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.hilanaw-onboarding-complete-icon {
    font-size: 48px;
    margin-bottom: 12px;
    animation: bounceIn 0.8s ease-out;
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.hilanaw-onboarding-complete-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.hilanaw-onboarding-complete-text {
    font-size: 14px;
    opacity: 0.95;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .hilanaw-onboarding-progress {
        padding: 12px 16px;
    }
    
    .hilanaw-onboarding-title {
        font-size: 13px;
    }
    
    .hilanaw-onboarding-percentage {
        font-size: 14px;
    }
    
    .hilanaw-onboarding-step-info {
        font-size: 11px;
    }
}

/* ========================================
   DARK MODE SUPPORT (if applicable)
   ======================================== */

.dark-mode .hilanaw-onboarding-progress {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.dark-mode .hilanaw-onboarding-complete {
    box-shadow: 0 6px 20px rgba(56, 239, 125, 0.4);
}









/* ============================================================
 * FROM: hilanaw-chat-tts.css
 * TTS Play Button, Loading Spinner, Sound Waves,
 * Header Toggle Button, Dark Theme Overrides
 * ============================================================ */

/* ─────────────────────────────────────────────────────────────────────────
   Play Button — sits in .hilanaw-message-meta alongside copy/edit buttons
   ───────────────────────────────────────────────────────────────────────── */

.hilanaw-tts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    border-radius: 4px;
    color: #6b7280;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    line-height: 1;
}

.hilanaw-tts-btn:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
}

/* Playing state — pulsing blue */
.hilanaw-tts-btn.is-playing {
    color: #2563eb;
}

/* Loading state — muted, no pointer */
.hilanaw-tts-btn.is-loading {
    color: #9ca3af;
    cursor: wait;
    pointer-events: none;
}

/* Error state — brief red flash */
.hilanaw-tts-btn.is-error {
    color: #ef4444;
}

/* SVG icons inside the button */
.hilanaw-tts-btn svg {
    width: clamp(11px, 1.3vw, 14px);
    height: clamp(11px, 1.3vw, 14px);
    flex-shrink: 0;
}

/* Show/hide the right icon per state */
.hilanaw-tts-btn .tts-icon-play    { display: block; }
.hilanaw-tts-btn .tts-icon-stop    { display: none;  }
.hilanaw-tts-btn .tts-icon-loading { display: none;  }

.hilanaw-tts-btn.is-playing .tts-icon-play    { display: none;  }
.hilanaw-tts-btn.is-playing .tts-icon-stop    { display: block; }
.hilanaw-tts-btn.is-playing .tts-icon-loading { display: none;  }

.hilanaw-tts-btn.is-loading .tts-icon-play    { display: none;  }
.hilanaw-tts-btn.is-loading .tts-icon-stop    { display: none;  }
.hilanaw-tts-btn.is-loading .tts-icon-loading { display: block; }

/* ─────────────────────────────────────────────────────────────────────────
   Loading spinner animation
   ───────────────────────────────────────────────────────────────────────── */

.hilanaw-tts-btn .tts-icon-loading circle {
    animation: hilanaw-tts-spin 1s linear infinite;
    transform-origin: center;
}

@keyframes hilanaw-tts-spin {
    from { stroke-dashoffset: 20; }
    to   { stroke-dashoffset: 0;  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Playing state — animated sound waves next to the play button
   ───────────────────────────────────────────────────────────────────────── */

.hilanaw-tts-waves {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
    margin-left: 2px;
}

.hilanaw-tts-btn.is-playing + .hilanaw-tts-waves {
    display: inline-flex;
}

.hilanaw-tts-waves span {
    display: block;
    width: 2px;
    border-radius: 1px;
    background: #2563eb;
    animation: hilanaw-tts-wave 0.8s ease-in-out infinite;
}

.hilanaw-tts-waves span:nth-child(1) { height: 4px;  animation-delay: 0s;    }
.hilanaw-tts-waves span:nth-child(2) { height: 8px;  animation-delay: 0.1s;  }
.hilanaw-tts-waves span:nth-child(3) { height: 12px; animation-delay: 0.2s;  }
.hilanaw-tts-waves span:nth-child(4) { height: 8px;  animation-delay: 0.3s;  }
.hilanaw-tts-waves span:nth-child(5) { height: 4px;  animation-delay: 0.4s;  }

@keyframes hilanaw-tts-wave {
    0%, 100% { transform: scaleY(0.4); opacity: 0.6; }
    50%       { transform: scaleY(1);   opacity: 1;   }
}

/* ─────────────────────────────────────────────────────────────────────────
   Header mentor voice toggle button
   Matches the existing .hilanaw-icon-btn pattern in chat-base.css
   ───────────────────────────────────────────────────────────────────────── */

#hilanaw-tts-toggle-btn {
    /* inherits .hilanaw-icon-btn from chat-base.css */
    position: relative;
}

/* Muted state — dim the button slightly */
#hilanaw-tts-toggle-btn.tts-muted {
    opacity: 0.5;
}

/* Small "off" badge when muted */
#hilanaw-tts-toggle-btn.tts-muted::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.8);
}

/* ─────────────────────────────────────────────────────────────────────────
   Dark theme overrides
   ───────────────────────────────────────────────────────────────────────── */

.hilanaw-theme-dark .hilanaw-tts-btn {
    color: #9ca3af;
}

.hilanaw-theme-dark .hilanaw-tts-btn:hover,
.hilanaw-theme-dark .hilanaw-tts-btn.is-playing {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
}

.hilanaw-theme-dark .hilanaw-tts-waves span {
    background: #60a5fa;
}


/* === hilanaw-mode-controls.css === */
/**
 * Hilanaw Dual-Mode Controls - Standalone CSS
 * Version: 2.0.0 - Custom Navigator Panel
 *
 * CHANGES v2.0.0:
 *  - Removed native select + jump-btn styles (replaced by navigator panel)
 *  - Added .hilanaw-nav-trigger button style
 *  - Added full .hilanaw-nav-panel styles (hnp-* BEM)
 *  - Skeleton loaders for panel levels/modules columns
 *  - Paywall modal styles retained
 *  - Skeleton nav shimmer retained for load states
 */

/* ===== MODE CONTROLS CONTAINER ===== */
.hilanaw-mode-controls {
    background: rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    margin: 8px 12px;
    padding: 12px 14px;
    /* Ensure panel can overflow visually */
    position: relative;
    z-index: 10;
}

/* ===== MODE SWITCHER BUTTONS ===== */
.hilanaw-mode-switcher {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

.hilanaw-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    white-space: nowrap;
}

.hilanaw-mode-btn:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.hilanaw-mode-btn.active {
    border-color: white;
    background: white;
    color: #0046a0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hilanaw-mode-btn.active:hover {
    background: #f0f7ff;
    border-color: white;
    transform: translateY(-1px);
}

/* ── Navigator row — full width below mode buttons ── */
.hilanaw-nav-row {
    margin-top: 8px;
}

.hilanaw-nav-row .hilanaw-nav-trigger {
    width: 100%;
    flex: none;
    justify-content: flex-start;
    gap: 8px;
}

.hilanaw-mode-btn svg {
    flex-shrink: 0;
}

.hilanaw-mode-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.hilanaw-mode-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.hilanaw-mode-btn.loading::after {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 6px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: hilanaw-spin 0.6s linear infinite;
}

@keyframes hilanaw-spin {
    to { transform: rotate(360deg); }
}

/* ── Navigate trigger button specifics ── */
.hilanaw-nav-trigger {
    gap: 8px;
}

.hilanaw-nav-trigger.panel-open {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.22);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.hilanaw-nav-trigger.panel-open:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: white;
    transform: translateY(-1px);
}

.hilanaw-nav-chevron {
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.7;
}

.hilanaw-nav-trigger.panel-open .hilanaw-nav-chevron {
    transform: rotate(180deg);
}

/* ===================================================================
   NAVIGATOR PANEL
   =================================================================== */

.hilanaw-nav-panel {
    /* Hidden by default — slides down on open */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.22s ease;

    background: #f8faff;           /* light blue-white */
    border: 1px solid #dbeafe;
    border-radius: 10px;
    margin-top: 10px;
    box-shadow: 0 8px 32px rgba(0, 70, 160, 0.10),
                0 2px 8px  rgba(0, 70, 160, 0.07);
    display: flex;
    flex-direction: column;
    /* Panel sits above chat messages */
    position: relative;
    z-index: 20;
}

.hilanaw-nav-panel.is-open {
    max-height: 360px;
    opacity: 1;
    pointer-events: all;
    /* overflow stays hidden — inner .hnp-levels-col / .hnp-modules-col
       handle their own overflow-y: auto scroll independently */
}

/* ── Panel header ── */
.hnp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px 10px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.hnp-header-left {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    flex-shrink: 0;
}

.hnp-header-left svg {
    color: #4A90E2;
    flex-shrink: 0;
}

/* Close button */
.hnp-close-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.hnp-close-btn:hover {
    color: #1e293b;
    background: #e2e8f0;
}

/* Back button — mobile drilldown only, hidden by default (see 480px query) */
.hnp-back-btn {
    display: none;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    margin-right: -2px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.hnp-back-btn:hover {
    color: #1e293b;
    background: #e2e8f0;
}

/* ── Panel body (two columns) ── */
.hnp-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    max-height: 268px;
}

/* Left column — levels */
.hnp-levels-col {
    width: 42%;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.hnp-levels-col::-webkit-scrollbar { width: 4px; }
.hnp-levels-col::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

/* Divider */
.hnp-divider {
    width: 1px;
    background: #e2e8f0;
    flex-shrink: 0;
}

/* Right column — modules */
.hnp-modules-col {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.hnp-modules-col::-webkit-scrollbar { width: 4px; }
.hnp-modules-col::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

/* ── Section label (Core Levels / Specialized Tracks) ── */
.hnp-section-label {
    padding: 6px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    pointer-events: none;
    user-select: none;
}

.hnp-section-label.track-label {
    margin-top: 4px;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
}

/* ── Level items ── */
.hnp-level-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: #475569;
    font-size: 12.5px;
    font-family: inherit;
    line-height: 1.3;
    position: relative;
}

.hnp-level-item:hover {
    background: #eff6ff;
    color: #1e40af;
}

.hnp-level-item.active {
    background: #dbeafe;
    color: #1d4ed8;
}

.hnp-level-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: #4A90E2;
    border-radius: 0 2px 2px 0;
}

.hnp-level-item.locked {
    color: #cbd5e1;
    cursor: pointer;
}

.hnp-level-item.locked:hover {
    background: #f8faff;
    color: #94a3b8;
}

.hnp-level-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hnp-level-count {
    font-size: 10px;
    color: #94a3b8;
    flex-shrink: 0;
    background: #e2e8f0;
    padding: 1px 5px;
    border-radius: 3px;
}

.hnp-level-item.active .hnp-level-count {
    background: #bfdbfe;
    color: #1d4ed8;
}

.hnp-lock-icon {
    flex-shrink: 0;
    color: #cbd5e1;
    font-size: 11px;
}

/* ── Module items ── */
.hnp-module-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: #475569;
    font-size: 12px;
    font-family: inherit;
    line-height: 1.3;
}

.hnp-module-item:hover {
    background: #eff6ff;
    color: #1e40af;
}

.hnp-module-item.active-module {
    background: #dbeafe;
    color: #1d4ed8;
}

.hnp-module-item.jumping {
    pointer-events: none;
    opacity: 0.6;
}

/* Status dot */
.hnp-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #cbd5e1;     /* default: not started */
}

.hnp-status-dot.completed {
    background: #10b981;
}

.hnp-status-dot.in-progress {
    background: #f59e0b;
    animation: hnp-pulse 2s infinite;
}

@keyframes hnp-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

.hnp-module-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hnp-module-item .hnp-jump-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid #bfdbfe;
    border-top-color: #1d4ed8;
    border-radius: 50%;
    animation: hilanaw-spin 0.6s linear infinite;
    flex-shrink: 0;
    display: none;
}

.hnp-module-item.jumping .hnp-jump-spinner {
    display: block;
}

/* ── Empty / placeholder states ── */
.hnp-modules-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
    color: #94a3b8;
    font-size: 12px;
    padding: 20px;
    text-align: center;
}

.hnp-no-results {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #64748b;
    font-size: 12px;
    padding: 16px;
    text-align: center;
    flex-direction: column;
    gap: 6px;
}

/* ── Panel footer ── */
.hnp-footer {
    padding: 8px 14px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 34px;
}

.hnp-footer-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    font-weight: 600;
    flex-shrink: 0;
}

.hnp-footer-crumb {
    font-size: 11.5px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hnp-footer-crumb.has-value {
    color: #4A90E2;
}

/* ===================================================================
   SKELETON LOADERS — panel columns
   =================================================================== */
@keyframes hilanaw-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.hnp-levels-skeleton,
.hnp-modules-skeleton {
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hnp-skeleton-item {
    height: 28px;
    border-radius: 5px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 600px 100%;
    animation: hilanaw-shimmer 1.4s infinite linear;
}

.hnp-skeleton-separator {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 0;
}

/* ===================================================================
   NAV SKELETON (legacy — outside panel, kept for load state)
   =================================================================== */
.hilanaw-skeleton-nav {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    padding: 4px 0;
}

.hilanaw-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 600px 100%;
    animation: hilanaw-shimmer 1.4s infinite linear;
    border-radius: 6px;
}

.hilanaw-skeleton-select {
    flex: 1;
    height: 38px;
    border-radius: 6px;
}

.hilanaw-skeleton-btn {
    width: 72px;
    height: 38px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* ===================================================================
   NOTIFICATION
   =================================================================== */
.hilanaw-notification {
    position: fixed;
    top: 80px;
    right: 20px;
    padding: 12px 20px;
    background: #4A90E2;
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    animation: hilanaw-slideInRight 0.3s ease;
    transition: opacity 0.3s ease;
}

.hilanaw-notification.hidden { display: none; }
.hilanaw-notification.success { background: #10b981; }
.hilanaw-notification.error   { background: #ef4444; }
.hilanaw-notification.warning { background: #f59e0b; }

@keyframes hilanaw-slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ===================================================================
   TRACK PAYWALL MODAL
   =================================================================== */
#hilanaw-track-paywall-modal .hilanaw-pass-grid {
    display: flex;
    gap: 10px;
    margin: 12px 0;
    justify-content: center;
}

#hilanaw-track-paywall-modal .hilanaw-pass-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    min-width: 120px;
}

#hilanaw-track-paywall-modal .hilanaw-pass-emoji   { font-size: 1.4rem; }
#hilanaw-track-paywall-modal .hilanaw-pass-name    { font-size: .8rem; font-weight: 600; color: #374151; }
#hilanaw-track-paywall-modal .hilanaw-pass-price   { font-size: 1rem;  font-weight: 700; color: #111827; }
#hilanaw-track-paywall-modal .hilanaw-pass-duration{ font-size: .75rem; color: #6b7280; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 768px) {
    .hilanaw-mode-controls { padding: 10px 12px; margin: 6px 10px; }
    .hilanaw-mode-btn      { padding: 8px 12px; font-size: 12px; }
    .hnp-body              { max-height: 340px; } /* taller on mobile so more levels show */
}

@media (max-width: 640px) {
    .hilanaw-mode-controls { padding: 8px 10px; margin: 5px 8px; }
    .hilanaw-mode-btn      { padding: 8px 10px; font-size: 12px; }
    .hilanaw-mode-btn .mode-text { display: none; }
    .hilanaw-mode-btn svg  { width: 18px; height: 18px; }
    /* Navigator row: always show label on its own row */
    .hilanaw-nav-row .hilanaw-nav-trigger .mode-text { display: inline; }

    /* Taller panel on small screens — two columns still visible */
    .hnp-levels-col { width: 38%; }
    .hnp-body       { max-height: 320px; }

    .hnp-level-count { display: none; }
    .hnp-section-label { padding: 5px 10px 3px; font-size: 9px; }
    .hnp-level-item    { padding: 8px 10px; font-size: 12px; }
    .hnp-module-item   { padding: 8px 10px; font-size: 11.5px; }
}

@media (max-width: 480px) {
    .hilanaw-mode-controls { padding: 8px 10px; }

    /* Mobile drilldown: only one column is visible at a time.
       Default state = levels list, full height. Selecting a level adds
       .hnp-panel--drilldown to the panel, which swaps to the modules
       list (full height) and reveals the back button in the header. */
    .hnp-body {
        flex-direction: column;
        max-height: 380px; /* more room now that only one column shows at once */
    }

    .hnp-levels-col {
        width: 100%;
        flex: 1;
        max-height: none;
        border-bottom: none;
    }

    .hnp-divider { display: none; }

    .hnp-modules-col {
        display: none;
        width: 100%;
        flex: 1;
    }

    /* Drilldown (modules) view */
    .hnp-panel--drilldown .hnp-levels-col {
        display: none;
    }

    .hnp-panel--drilldown .hnp-modules-col {
        display: flex;
        flex-direction: column;
    }

    .hnp-panel--drilldown .hnp-back-btn {
        display: flex;
    }

    #hilanaw-track-paywall-modal .hilanaw-pass-grid {
        flex-direction: column;
        align-items: center;
    }
    #hilanaw-track-paywall-modal .hilanaw-pass-card { width: 100%; }
}

/* ===================================================================
   ACCESSIBILITY
   =================================================================== */
.hilanaw-mode-btn:focus-visible,
.hnp-level-item:focus-visible,
.hnp-module-item:focus-visible,
.hnp-back-btn:focus-visible,
.hnp-close-btn:focus-visible {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
}

@media (prefers-contrast: high) {
    .hilanaw-mode-btn { border-width: 3px; }
    .hnp-divider      { background: rgba(255,255,255,0.2); }
}

@media (prefers-reduced-motion: reduce) {
    .hilanaw-mode-btn,
    .hilanaw-nav-panel,
    .hnp-level-item,
    .hnp-module-item {
        transition: none;
        animation: none;
    }
    .hilanaw-nav-panel.is-open { max-height: 360px; opacity: 1; }
    .hnp-status-dot.in-progress { animation: none; }
    .hnp-skeleton-item,
    .hilanaw-skeleton { animation: none; background: #e2e8f0; }
}

/* ===================================================================
   SETTINGS DROPDOWN MENU ITEMS
   Rows inside #hilanaw-settings-dropdown
   =================================================================== */
.hilanaw-settings-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

.hilanaw-settings-menu-item:last-child {
    border-bottom: none;
}

.hilanaw-settings-menu-item:hover {
    background: #f0f7ff;
    color: #4A90E2;
}

.hilanaw-settings-menu-item svg:first-child {
    flex-shrink: 0;
    color: #6b7280;
    transition: color 0.15s;
}

.hilanaw-settings-menu-item:hover svg:first-child {
    color: #4A90E2;
}

.hilanaw-settings-menu-item span {
    flex: 1;
}

.hilanaw-settings-menu-arrow {
    flex-shrink: 0;
    color: #d1d5db;
    transition: color 0.15s;
}

.hilanaw-settings-menu-item:hover .hilanaw-settings-menu-arrow {
    color: #4A90E2;
}

/* Danger variant — Reset All Data */
.hilanaw-settings-menu-item--danger {
    color: #dc2626;
    border-top: 1px solid #fee2e2;
}

.hilanaw-settings-menu-item--danger svg:first-child {
    color: #dc2626;
}

.hilanaw-settings-menu-item--danger:hover {
    background: #fff5f5;
    color: #b91c1c;
}

.hilanaw-settings-menu-item--danger:hover svg:first-child {
    color: #b91c1c;
}

.hilanaw-settings-menu-item--danger:hover .hilanaw-settings-menu-arrow {
    color: #b91c1c;
}

/* ===================================================================
   CHAT HISTORY PANEL
   Full overlay inside #hilanaw-chat-container.
   Slides up from bottom on mobile, covers the messages area.
   =================================================================== */
.hilanaw-history-panel {
    position: absolute;
    inset: 0;                         /* covers the entire chat container */
    z-index: 500;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    /* Hidden state */
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.hilanaw-history-panel.is-open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

/* ── Panel header ── */
.hilanaw-history-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #0046a0 0%, #0066cc 100%);
    color: white;
    flex-shrink: 0;
}

.hilanaw-history-header-left {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    flex-shrink: 0;
}

.hilanaw-history-header-left svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* ── Filter tabs ── */
.hilanaw-history-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: center;
}

.hilanaw-history-tab {
    padding: 5px 14px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.hilanaw-history-tab:hover {
    background: rgba(255,255,255,0.25);
    color: white;
}

.hilanaw-history-tab.active {
    background: white;
    border-color: white;
    color: #0046a0;
    font-weight: 600;
}

/* ── Close button ── */
.hilanaw-history-close {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}

.hilanaw-history-close:hover {
    background: rgba(255,255,255,0.28);
}

/* ── Scrollable message list ── */
.hilanaw-history-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.hilanaw-history-messages::-webkit-scrollbar { width: 5px; }
.hilanaw-history-messages::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

/* ── Message bubbles inside history panel ──
   Cloned from the chat window bubble styles so they look identical */
.hilanaw-history-messages .hilanaw-message {
    /* Disable the slide-in animation for history items */
    animation: none;
    margin-bottom: 0;
}

/* Mode badge on history messages */
.hilanaw-history-mode-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-bottom: 4px;
}

.hilanaw-history-mode-badge.syllabus {
    background: #dbeafe;
    color: #1e40af;
}

.hilanaw-history-mode-badge.free {
    background: #d1fae5;
    color: #065f46;
}

/* Date divider between session groups */
.hilanaw-history-date-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hilanaw-history-date-divider::before,
.hilanaw-history-date-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* ── Empty state ── */
.hilanaw-history-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #9ca3af;
    padding: 40px 20px;
    text-align: center;
}

.hilanaw-history-empty svg {
    opacity: 0.4;
}

.hilanaw-history-empty p {
    margin: 0;
    font-size: 13px;
}

/* ── Position the container correctly so the panel can overlay it ── */
#hilanaw-chat-container {
    position: relative;
}

/* ===================================================================
   RESPONSIVE — HISTORY PANEL
   =================================================================== */
@media (max-width: 640px) {
    .hilanaw-history-tab {
        padding: 4px 10px;
        font-size: 11px;
    }
    .hilanaw-history-messages {
        padding: 12px;
    }
}

/* ===================================================================
   REDUCED MOTION — HISTORY PANEL
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hilanaw-history-panel {
        transition: none;
    }
}

/* ============================================================
   HILANAW MODALS — v2.1.0
   Shared overlay + box styles for:
     #hilanaw-upgrade-modal  (track paywall / Pro gate)
     #hilanaw-seq-lock-modal (sequential progress lock)
   Both modals are appended to <body> by JS, so they are
   outside #hilanaw-chat-container.
   ============================================================ */

/* ── Shared overlay ── */
.hilanaw-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: hilanaw-modal-fade-in 0.18s ease;
}

@keyframes hilanaw-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Shared modal box ── */
.hilanaw-modal-box {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    padding: 32px 24px 24px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.1);
    font-family: inherit;
    text-align: center;
    animation: hilanaw-modal-slide-up 0.2s ease;
}

@keyframes hilanaw-modal-slide-up {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Shared close button ── */
.hilanaw-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.hilanaw-modal-close:hover {
    color: #475569;
    background: #f1f5f9;
}

/* ============================================================
   UPGRADE MODAL  (#hilanaw-upgrade-modal)
   ============================================================ */

.hilanaw-upgrade-modal__box {
    border-top: 4px solid #f97316;
}

.hilanaw-upgrade-modal__icon {
    font-size: 2.2rem;
    margin-bottom: 10px;
    line-height: 1;
}

.hilanaw-upgrade-modal__title {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.hilanaw-upgrade-modal__body {
    margin: 0 0 18px;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.6;
}

.hilanaw-upgrade-modal__subtitle {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 10px;
}

/* ── Pricing grid ── */
.hilanaw-pass-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.hilanaw-pass-grid--2col {
    grid-template-columns: 1fr 1fr;
}

.hilanaw-pass-grid--4col {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* ── Pricing cards ── */
.hilanaw-pass-card {
    border-radius: 10px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: 1.5px solid transparent;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: default;
}

.hilanaw-pass-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.hilanaw-pass-card--standard {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.hilanaw-pass-card--pro {
    background: #faf5ff;
    border-color: #e9d5ff;
}

.hilanaw-pass-card--featured {
    border-color: #a855f7;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15);
}

.hilanaw-pass-emoji {
    font-size: 1.3rem;
    line-height: 1;
}

.hilanaw-pass-tier-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.hilanaw-pass-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
}

.hilanaw-pass-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.hilanaw-pass-card--pro .hilanaw-pass-price {
    color: #7c3aed;
}

.hilanaw-pass-card--standard .hilanaw-pass-price {
    color: #1d4ed8;
}

.hilanaw-pass-duration {
    font-size: 0.68rem;
    color: #94a3b8;
}

/* ── CTA button ── */
.hilanaw-upgrade-modal__cta {
    display: block;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    margin-bottom: 10px;
    transition: opacity 0.15s, transform 0.15s;
}

.hilanaw-upgrade-modal__cta:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

.hilanaw-upgrade-modal__skip {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.82rem;
    padding: 4px;
    transition: color 0.15s;
}

.hilanaw-upgrade-modal__skip:hover {
    color: #475569;
}

/* ============================================================
   SEQUENTIAL LOCK MODAL  (#hilanaw-seq-lock-modal)
   ============================================================ */

.hilanaw-seq-modal__box {
    border-top: 4px solid #10b981;
}

.hilanaw-seq-modal__icon {
    font-size: 2.2rem;
    margin-bottom: 10px;
    line-height: 1;
}

.hilanaw-seq-modal__title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.hilanaw-seq-modal__body {
    margin: 0 0 12px;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.65;
}

.hilanaw-seq-modal__level-note {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0 0 14px;
    padding: 8px 12px;
    background: #f0fdf4;
    border-radius: 6px;
    border-left: 3px solid #10b981;
    text-align: left;
}

/* ── Progress bar (decorative — shows ~60% "almost there" feel) ── */
.hilanaw-seq-modal__progress-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin: 0 0 16px;
}

.hilanaw-seq-modal__progress-fill {
    height: 100%;
    width: 62%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    border-radius: 999px;
    animation: hilanaw-progress-grow 0.6s ease 0.2s both;
}

@keyframes hilanaw-progress-grow {
    from { width: 0; }
    to   { width: 62%; }
}

.hilanaw-seq-modal__tip {
    font-size: 0.82rem;
    color: #64748b;
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 18px;
    text-align: left;
    line-height: 1.55;
}

.hilanaw-seq-modal__continue {
    display: block;
    width: 100%;
    padding: 11px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    margin-bottom: 10px;
    transition: opacity 0.15s, transform 0.15s;
}

.hilanaw-seq-modal__continue:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.hilanaw-seq-modal__dismiss {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.82rem;
    padding: 4px;
    transition: color 0.15s;
}

.hilanaw-seq-modal__dismiss:hover {
    color: #475569;
}

/* ── Responsive: stack 4-col grid on narrow screens ── */
@media (max-width: 440px) {
    .hilanaw-pass-grid--4col {
        grid-template-columns: 1fr 1fr;
    }

    .hilanaw-modal-box {
        padding: 28px 16px 20px;
    }
}

@media (max-width: 320px) {
    .hilanaw-pass-grid--4col,
    .hilanaw-pass-grid--2col {
        grid-template-columns: 1fr;
    }
}