/* ============================================================
   Academic Assistant – UI Styles
   Supports RTL (Arabic) and LTR (English) via [dir] attribute
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    --primary:        #1e2965; /* Navy */
    --primary-light:  #3a4a9f; /* Vibrant Navy */
    --primary-dark:   #131b46; /* Deep Navy */
    --bg-dark:        #f0eddd; /* Sand Soft */
    --bg-mid:         #e5dfcd; /* Darker Sand */
    --panel-bg:       rgba(240, 237, 221, 0.85); /* Translucent Sand */
    --panel-border:   rgba(30, 41, 101, 0.2); /* Soft Navy borders */
    --text-main:      #1e2965; /* Navy Main Text */
    --text-muted:     #68719f; /* Muted Navy Text */
    --error:          #dc2626;
    --success:        #16a34a;
    --user-bubble:    #1e2965; /* Navy user bubble */
    --bot-bubble:     #ffffff; /* White assistant bubble */
    --font-ar:        'Tajawal', sans-serif;
    --font-en:        'Inter', 'Tajawal', sans-serif;
    --font-family:    var(--font-ar);
    --border-radius:  20px;
}

html[lang="en"] { --font-family: var(--font-en); }

/* ── Base ─────────────────────────────────────────────────── */
html, body {
    height: 100%;
    background: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 1.6;
    overflow: hidden;
}

/* ── Animated background blobs ────────────────────────────── */
.background-effects {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation: floatBlob 12s ease-in-out infinite alternate;
}
.blob-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--primary), transparent);
    top: -100px; right: -100px;
    animation-delay: 0s;
}
.blob-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #ebdcb9, transparent);
    bottom: -100px; left: -80px;
    animation-delay: -6s;
}
@keyframes floatBlob {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(30px, 40px) scale(1.08); }
}

/* ── App shell ─────────────────────────────────────────────── */
.app-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    padding: 16px;
}

/* ── Screen transitions ────────────────────────────────────── */
.screen {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.screen.active { display: flex; }

/* ── Glass panel ───────────────────────────────────────────── */
.glass-panel {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: var(--border-radius);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  LOGIN PANEL                                              ║
   ╚══════════════════════════════════════════════════════════╝ */
.login-panel {
    width: 420px;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Brand */
.brand {
    text-align: center;
}
.brand-robot-wrapper {
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 41, 101, 0.15) 0%, rgba(240, 237, 221, 0.4) 100%);
    border: 3px solid var(--panel-border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(30, 41, 101, 0.15), inset 0 0 15px rgba(240, 237, 221, 0.2);
    animation: floatRobot 6s ease-in-out infinite;
    overflow: hidden;
    transition: all 0.3s ease;
}

.brand-robot-wrapper:hover {
    transform: scale(1.05);
    border-color: var(--primary-light);
    box-shadow: 0 15px 35px rgba(30, 41, 101, 0.25), inset 0 0 20px rgba(240, 237, 221, 0.3);
}

.brand-robot-img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

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

.brand h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 8px;
    background: linear-gradient(135deg, #1e2965, #3a4a9f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 4px rgba(30, 41, 101, 0.15);
}
.brand p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 4px;
}

/* Language pills */
.lang-pills {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.lang-pill {
    flex: 1;
    padding: 9px 16px;
    border-radius: 20px;
    background: rgba(30, 41, 101, 0.04);
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}
.lang-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Inputs */
.input-group {
    position: relative;
}
.input-group i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    color: var(--text-muted);
    font-size: 18px;
    pointer-events: none;
}
.input-group input {
    width: 100%;
    padding: 14px 46px 14px 18px;
    background: rgba(30, 41, 101, 0.04);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    color: var(--text-main);
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
}
.input-group input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(30, 41, 101, 0.08);
}
.input-group input::placeholder { color: var(--text-muted); }

/* LTR override — icon on left */
[dir="ltr"] .input-group i {
    right: auto;
    left: 15px;
}
[dir="ltr"] .input-group input {
    padding: 14px 18px 14px 46px;
}

/* Login button */
#login-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 0.2s, transform 0.1s;
}
#login-btn:hover  { opacity: 0.9; }
#login-btn:active { transform: scale(0.98); }
#login-btn:disabled { opacity: 0.6; cursor: default; }

/* Quick-login demo buttons */
.quick-logins {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.quick-label {
    font-size: 12px;
    color: var(--text-muted);
    flex-basis: 100%;
}
.quick-btn {
    padding: 5px 14px;
    border-radius: 16px;
    background: rgba(30, 41, 101, 0.04);
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.18s;
    letter-spacing: 0.3px;
}
.quick-btn:hover {
    background: rgba(30, 41, 101, 0.1);
    border-color: var(--primary-light);
    color: var(--text-main);
}
.quick-btn.admin {
    border-color: rgba(220, 38, 38, 0.4);
    color: var(--error);
}
.quick-btn.admin:hover {
    background: rgba(248, 113, 113, 0.15);
    border-color: var(--error);
}

.error-text {
    color: var(--error);
    font-size: 13px;
    text-align: center;
    min-height: 18px;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  CHAT PANEL                                               ║
   ╚══════════════════════════════════════════════════════════╝ */
.chat-panel {
    width: 100%;
    max-width: 760px;
    height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────── */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--primary);
    color: #ffffff;
    border-bottom: 1.5px solid rgba(30, 41, 101, 0.1);
    flex-shrink: 0;
    gap: 10px;
}
.chat-header .status h2 {
    color: #ffffff;
}
.chat-header .online-indicator {
    color: #a3e635;
}
.chat-header .online-indicator::before {
    background: #a3e635;
}
.chat-header .icon-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: transparent;
}
.chat-header .icon-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}
.chat-header .lang-toggle {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
}
.chat-header .user-badge {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-light), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.header-avatar-img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}
.status h2 {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.online-indicator {
    font-size: 11px;
    color: var(--success);
    display: flex;
    align-items: center;
    gap: 5px;
}
.online-indicator::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--success);
    display: inline-block;
    animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

/* Header action buttons */
.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    font-family: inherit;
    line-height: 1;
}
.icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-main);
    border-color: var(--panel-border);
}
.icon-btn.voice-off { color: var(--error); }
.icon-btn.recording {
    background: rgba(248, 113, 113, 0.2);
    color: var(--error);
    border-color: var(--error);
    animation: recPulse 1s ease-in-out infinite;
}
@keyframes recPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
    50%       { box-shadow: 0 0 0 6px rgba(248,113,113,0.25); }
}
.lang-toggle {
    width: auto;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 1px solid var(--panel-border);
    color: var(--text-main);
}

/* User badge */
.user-badge {
    display: none;
    align-items: center;
    font-size: 13px;
    color: var(--text-muted);
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    white-space: nowrap;
    font-family: inherit;
}

/* ── Messages area ────────────────────────────────────────── */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 18px 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--panel-border) transparent;
}
.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
    background: var(--panel-border);
    border-radius: 3px;
}

/* ── Bubbles ──────────────────────────────────────────────── */
.message {
    max-width: 82%;
    animation: msgIn 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.message.user       { margin-inline-start: auto; }
.message.assistant  { margin-inline-end:   auto; }

.bubble {
    padding: 12px 16px;
    border-radius: 18px;
    line-height: 1.65;
    word-break: break-word;
}
.message.user .bubble {
    background: var(--user-bubble);
    border: 1px solid rgba(30, 41, 101, 0.3);
    color: #ffffff;
    border-end-start-radius: 6px;        /* RTL bottom-left */
}
.message.assistant .bubble {
    background: var(--bot-bubble);
    border: 1px solid var(--panel-border);
    border-end-end-radius: 6px;          /* RTL bottom-right */
}

.message-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.bot-avatar-small {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--primary-light), var(--primary));
    border: 1.5px solid var(--panel-border);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.bot-avatar-small img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

/* LTR overrides (swap "sharp corner" direction) */
[dir="ltr"] .message.user .bubble      { border-end-start-radius: 18px; border-end-end-radius: 6px; }
[dir="ltr"] .message.assistant .bubble { border-end-end-radius:   18px; border-end-start-radius: 6px; }

.message.welcome .bubble {
    background: rgba(255, 255, 255, 0.04);
    border-style: dashed;
    color: var(--text-muted);
    text-align: center;
    max-width: 100%;
    margin: auto;
}

.bubble p { margin-bottom: 6px; white-space: pre-line; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul { padding-inline-start: 20px; margin-top: 4px; }
.bubble li { margin-bottom: 4px; }
.streaming-text { white-space: pre-line; }

.streaming-text::after {
    content: '▋';
    animation: cursor 0.7s step-end infinite;
}
@keyframes cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.error-msg { color: var(--error); }

/* ── Typing indicator ────────────────────────────────────── */
.typing-indicator {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 4px 2px;
}
.typing-indicator .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingDot 1.2s ease-in-out infinite;
}
.typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1;   }
}

/* ── Response metadata ────────────────────────────────────── */
.response-metadata {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}

.student-data-card {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(30, 41, 101, 0.04);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
}
.student-data-card span { color: var(--text-muted); }
.student-data-card strong { color: var(--text-main); }

.decision-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid rgba(30, 41, 101, 0.15);
    align-self: flex-start;
}
.decision-APPROVED    { border-color: var(--success); color: var(--success); }
.decision-DENIED      { border-color: var(--error);   color: var(--error);   }
.decision-CONDITIONAL { border-color: #fbbf24;        color: #fbbf24;        }
.decision-PENDING     { border-color: #60a5fa;        color: #60a5fa;        }

/* Collapsible sections */
details.collapsible {
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}
details.collapsible summary {
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-main);
    background: rgba(30, 41, 101, 0.03);
    font-weight: 500;
    list-style: none;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
details.collapsible summary::after { content: '▾'; font-size: 11px; }
details.collapsible[open] summary::after { content: '▴'; }
details.collapsible > *:not(summary) {
    padding: 10px 14px;
    background: #ffffff;
}
details.collapsible ul { padding-inline-start: 18px; }
details.collapsible li { margin-bottom: 5px; color: var(--text-muted); font-size: 13px; }

/* Citation box */
.citation-box {
    border-inline-start: 3px solid var(--primary);
    padding: 8px 12px;
    margin-top: 8px;
    background: rgba(30, 41, 101, 0.06);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
}
[dir="ltr"] .citation-box { border-radius: 8px 0 0 8px; }

.citation-box strong { color: var(--text-main); }
.citation-box em     { color: var(--text-muted); font-style: normal; }
.citation-box p      { color: var(--text-muted); margin-top: 4px; }

/* Confidence bar */
.confidence-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
}
.confidence-track {
    flex: 1;
    background: rgba(30, 41, 101, 0.08);
    border-radius: 10px;
    height: 5px;
    overflow: hidden;
}
.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: 10px;
    transition: width 0.6s ease;
}

/* ── Suggestions ──────────────────────────────────────────── */
.suggestions {
    padding: 0 14px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.suggestion-chip {
    padding: 9px 18px;
    background: #ffffff;
    border: 1.5px solid rgba(30, 41, 101, 0.35);
    border-radius: 22px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(30, 41, 101, 0.08);
}
.suggestion-chip:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(30, 41, 101, 0.2);
    transform: translateY(-1px);
}

/* ── Input bar ────────────────────────────────────────────── */
.chat-input-container {
    padding: 12px 14px;
    border-top: 1px solid var(--panel-border);
    flex-shrink: 0;
}
.chat-input-container form {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 6px 8px;
    transition: border-color 0.2s;
}
.chat-input-container form:focus-within {
    border-color: var(--primary);
}
.chat-input-container input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    font-size: 15px;
    font-family: inherit;
    padding: 6px 8px;
}
.chat-input-container input::placeholder { color: var(--text-muted); }

#mic-btn, #send-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.2s;
}
#mic-btn {
    background: rgba(30, 41, 101, 0.05);
    border: 1px solid transparent;
    color: var(--text-muted);
}
#mic-btn:hover { color: var(--text-main); background: rgba(30, 41, 101, 0.1); }
#send-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    color: #fff;
}
#send-btn:hover   { opacity: 0.9; }
#send-btn:active  { transform: scale(0.96); }

/* ── Toast ────────────────────────────────────────────────── */
#toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid var(--panel-border);
    color: var(--text-main);
    border-radius: 24px;
    padding: 9px 22px;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 1000;
    white-space: nowrap;
}
#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Utilities ────────────────────────────────────────────── */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.spin {
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .login-panel {
        width: 92vw;
        padding: 28px 20px;
    }
    .chat-panel {
        height: 100dvh;
        border-radius: 0;
    }
    .app-container { padding: 0; }
    .suggestion-chip { font-size: 12px; padding: 6px 12px; }
    .user-badge { display: none !important; }
    .header-actions { gap: 4px; }
    .message { max-width: 90%; }
}