/* =========================================================
   Nova AI — Design tokens
   ========================================================= */
:root {
    --bg-deep: #080a14;
    --bg-deep-2: #0c0f1e;
    --panel: rgba(255, 255, 255, 0.045);
    --panel-strong: rgba(255, 255, 255, 0.07);
    --panel-border: rgba(255, 255, 255, 0.09);
    --panel-border-strong: rgba(255, 255, 255, 0.16);

    --violet: #7c5cff;
    --violet-soft: #8b7cff;
    --cyan: #22d3ee;
    --pink: #f472b6;

    --grad-main: linear-gradient(135deg, var(--violet-soft) 0%, var(--violet) 55%, var(--cyan) 100%);
    --grad-text: linear-gradient(90deg, var(--violet-soft), var(--cyan));

    --text-primary: #eef0f7;
    --text-secondary: #a6acc2;
    --text-muted: #6b7290;

    --success: #34d399;

    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;

    --font-fa: 'Vazirmatn', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/* Author styles like .messages{display:flex} otherwise beat the browser's
   default [hidden]{display:none}. This guarantees hidden always wins. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: var(--font-fa);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

::selection { background: rgba(124, 92, 255, 0.35); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

button, textarea { font-family: inherit; }
button:focus-visible, textarea:focus-visible, .suggestion-card:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

/* =========================================================
   Ambient background
   ========================================================= */
.bg-orbs {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 15% -10%, rgba(124, 92, 255, 0.16), transparent 60%),
        radial-gradient(ellipse 70% 50% at 100% 0%, rgba(34, 211, 238, 0.12), transparent 60%),
        var(--bg-deep);
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    will-change: transform;
}
.orb-1 {
    width: 46vw; height: 46vw;
    background: radial-gradient(circle, rgba(124,92,255,0.55), transparent 70%);
    top: -14vw; left: -10vw;
    animation: drift1 26s ease-in-out infinite;
}
.orb-2 {
    width: 38vw; height: 38vw;
    background: radial-gradient(circle, rgba(34,211,238,0.4), transparent 70%);
    bottom: -12vw; right: -8vw;
    animation: drift2 30s ease-in-out infinite;
}
.orb-3 {
    width: 26vw; height: 26vw;
    background: radial-gradient(circle, rgba(244,114,182,0.28), transparent 70%);
    top: 40%; left: 55%;
    animation: drift3 22s ease-in-out infinite;
}
@keyframes drift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(4vw, 5vw) scale(1.08); }
}
@keyframes drift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-5vw, -3vw) scale(1.1); }
}
@keyframes drift3 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(-3vw, 4vw) scale(1.15); opacity: 0.7; }
}
.grain {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
    .orb, .orbit-ring, .orbit-dot, .pulse-dot, .grad-text, * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* =========================================================
   App shell
   ========================================================= */
.app {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* =========================================================
   Sidebar
   ========================================================= */
.sidebar {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid var(--panel-border);
    padding: 20px 16px;
    transition: transform 0.35s var(--ease);
    z-index: 20;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-strong);
    border: 1px solid var(--panel-border-strong);
    border-radius: 11px;
}
.logo-mark svg { width: 22px; height: 22px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.25; }
.logo-name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.logo-name .accent {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.logo-sub { font-size: 11.5px; color: var(--text-muted); }

.icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--panel-strong); color: var(--text-primary); border-color: var(--panel-border); }

.new-chat-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: var(--grad-main);
    border: none;
    border-radius: var(--radius-md);
    color: #0a0d18;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 8px 24px -8px rgba(124, 92, 255, 0.55);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.new-chat-btn svg { width: 17px; height: 17px; stroke: #0a0d18; }
.new-chat-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -6px rgba(124, 92, 255, 0.7); }
.new-chat-btn:active { transform: translateY(0); }

.chat-history {
    flex: 1;
    margin-top: 18px;
    overflow-y: auto;
}
.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12.5px;
    padding: 40px 12px;
}
.history-empty svg { width: 26px; height: 26px; opacity: 0.5; }

.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.status-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.status-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.status-dot.active { background: var(--success); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); }
.provider-badges { display: flex; gap: 6px; }
.badge {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 600;
    border-radius: 7px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--panel-border);
    color: var(--text-secondary);
}
.mini-footer { text-align: center; font-size: 11px; color: var(--text-muted); padding-bottom: 2px; }

/* =========================================================
   Chat area
   ========================================================= */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 28px;
    border-bottom: 1px solid var(--panel-border);
    background: rgba(8, 10, 20, 0.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.menu-btn { display: none; }
.header-title { display: flex; flex-direction: column; line-height: 1.3; }
.header-title h1 { margin: 0; font-size: 16px; font-weight: 700; }
.header-sub { font-size: 12px; color: var(--text-muted); }
.header-actions { margin-right: auto; display: flex; align-items: center; gap: 10px; }

.api-status {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 12px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-secondary);
}
.pulse-dot {
    position: relative;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--success);
}
.pulse-dot::after {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 50%;
    background: var(--success);
    opacity: 0.4;
    animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* =========================================================
   Welcome screen
   ========================================================= */
.welcome-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    overflow-y: auto;
}

.welcome-logo { width: 108px; height: 108px; margin-bottom: 22px; }
.welcome-logo svg { width: 100%; height: 100%; }

.orbit-ring { transform-origin: 60px 60px; animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.orbit-dot { transform-origin: 60px 60px; }
.orbit-dot-1 { animation: orbit 4.5s linear infinite; }
.orbit-dot-2 { animation: orbit 4.5s linear infinite; animation-delay: -1.5s; }
.orbit-dot-3 { animation: orbit 4.5s linear infinite; animation-delay: -3s; }
@keyframes orbit { to { transform: rotate(360deg); } }

.welcome-screen h2 { font-size: 27px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.01em; }
.grad-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.welcome-screen p {
    margin: 0 0 34px;
    color: var(--text-secondary);
    font-size: 14.5px;
    line-height: 1.9;
    max-width: 480px;
}
.engines-inline { color: var(--text-primary); font-family: var(--font-mono); font-size: 12.5px; }

.suggestions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 620px;
}

.suggestion-card {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: right;
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.suggestion-card:hover {
    transform: translateY(-3px);
    background: var(--panel-strong);
    border-color: var(--panel-border-strong);
}
.sugg-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(124, 92, 255, 0.14);
    color: var(--violet-soft);
}
.sugg-icon svg { width: 19px; height: 19px; }
.icon-db { background: rgba(34, 211, 238, 0.14); color: var(--cyan); }
.icon-spark { background: rgba(244, 114, 182, 0.14); color: var(--pink); }
.icon-bolt { background: rgba(52, 211, 153, 0.14); color: var(--success); }

.sugg-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sugg-title { font-size: 13.5px; font-weight: 600; }
.sugg-desc { font-size: 11.5px; color: var(--text-muted); }

/* =========================================================
   Messages
   ========================================================= */
.messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.message { display: flex; gap: 12px; max-width: 780px; align-self: flex-start; }
.message.user { margin-inline-start: auto; margin-inline-end: 0; }
.avatar {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-strong);
    border: 1px solid var(--panel-border);
}
.avatar svg { width: 18px; height: 18px; }
.message-content {
    padding: 13px 16px;
    border-radius: var(--radius-md);
    background: var(--panel);
    border: 1px solid var(--panel-border);
    font-size: 14px;
    line-height: 1.9;
}
.message.user .message-content { background: rgba(124, 92, 255, 0.14); border-color: rgba(124, 92, 255, 0.25); }

.typing-dots { display: flex; gap: 5px; padding: 4px 2px; }
.typing-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-secondary);
    animation: bounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* =========================================================
   Input area
   ========================================================= */
.input-area {
    padding: 16px 28px 20px;
    border-top: 1px solid var(--panel-border);
    background: rgba(8, 10, 20, 0.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: var(--panel-strong);
    border: 1px solid var(--panel-border-strong);
    border-radius: var(--radius-lg);
    padding: 8px 8px 8px 8px;
    max-width: 780px;
    margin: 0 auto;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.input-wrapper:focus-within {
    border-color: rgba(124, 92, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.14);
}

#promptInput {
    flex: 1;
    resize: none;
    max-height: 160px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14.5px;
    line-height: 1.6;
    padding: 8px 10px;
}
#promptInput::placeholder { color: var(--text-muted); }

.send-btn {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--grad-main);
    border: none;
    border-radius: 12px;
    color: #0a0d18;
    cursor: pointer;
    transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.send-btn svg { width: 18px; height: 18px; transform: rotate(90deg); }
.send-btn:hover { transform: scale(1.06); }
.send-btn:active { transform: scale(0.96); }

.input-hint {
    max-width: 780px;
    margin: 10px auto 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.input-hint-sep { opacity: 0.6; }

/* =========================================================
   Overlay (mobile)
   ========================================================= */
.overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
    z-index: 15;
}
.overlay.active { opacity: 1; pointer-events: auto; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        transform: translateX(100%);
    }
    .sidebar.open { transform: translateX(0); }
    .menu-btn { display: flex; }
    .chat-header { padding: 14px 16px; }
    .messages { padding: 18px 16px; }
    .input-area { padding: 12px 14px 16px; }
    .suggestions { grid-template-columns: 1fr; }
    .welcome-screen h2 { font-size: 22px; }
}

@media (max-width: 480px) {
    .header-sub { display: none; }
    .api-status-text { display: none; }
    .api-status { padding: 7px; }
}