/* ── Page views ── */
.page-view { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.page-view.active { display: flex; }

/* scrollable inner areas */
.scroll-area { flex: 1; overflow-y: auto; }

/* ── Home ── */
.welcome-screen {
    min-height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 40px; text-align: center;
}


.welcome-logo {
    width: 80px; height: 72px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    flex-shrink: 0;
    background: #000;
}
.welcome-logo img {
    width: 120%; height: 120%;
    object-fit: contain;
    display: block;
}
.welcome-title {
    font-size: 32px; font-weight: 600; margin-bottom: 8px;
    color: var(--text-primary);
}
.welcome-subtitle { font-size: 18px; color: var(--text-secondary); margin-bottom: 40px; }

.suggestion-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; max-width: 720px; width: 100%;
}

.suggestion-card {
    padding: 18px 16px; background: var(--bg-secondary);
    border: 1px solid var(--border-color); border-radius: 12px;
    cursor: pointer; transition: all 0.2s; text-align: left;
    display: flex; align-items: flex-start; gap: 12px;
}
.suggestion-card:hover { background: var(--bg-hover); border-color: var(--text-tertiary); transform: translateY(-2px); }

.suggestion-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
}
.suggestion-icon svg { width: 17px; height: 17px; }

.suggestion-card:nth-child(1) .suggestion-icon { background: rgba(0,201,255,.12);   color: #00c9ff; }
.suggestion-card:nth-child(2) .suggestion-icon { background: rgba(16,163,127,.15);  color: #10a37f; }
.suggestion-card:nth-child(3) .suggestion-icon { background: rgba(245,166,35,.12);  color: #f5a623; }
.suggestion-card:nth-child(4) .suggestion-icon { background: rgba(255,60,120,.12);  color: #ff3c78; }
.suggestion-card:nth-child(5) .suggestion-icon { background: rgba(16,163,127,.15);  color: #10a37f; }
.suggestion-card:nth-child(6) .suggestion-icon { background: rgba(100,180,255,.12); color: #64b4ff; }

.suggestion-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.suggestion-desc  { font-size: 12px; color: var(--text-tertiary); line-height: 1.4; }

/* ── Stub pages ── */
.stub-page {
    min-height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 60px 40px; text-align: center;
}

.stub-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--text-tertiary);
    border: 1px solid var(--border-color); border-radius: 100px;
    padding: 5px 14px; margin-bottom: 28px; background: var(--bg-secondary);
    letter-spacing: .07em; text-transform: uppercase;
}
.stub-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.stub-icon {
    width: 72px; height: 72px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
}
.stub-icon svg { width: 34px; height: 34px; }

.stub-page h2 { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.stub-page p  { font-size: 15px; color: var(--text-secondary); max-width: 420px; line-height: 1.7; margin-bottom: 28px; }

.stub-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; border-radius: 8px; font-size: 14px;
    font-weight: 600; cursor: pointer; border: none; transition: all 0.2s;
    color: #000; margin-bottom: 24px;
}
.stub-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }

.stub-features {
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.stub-feature {
    font-size: 12px; color: var(--text-secondary);
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 8px; padding: 9px 14px;
}

/* per-service accent */
.stub-chat      .stub-icon { background: rgba(16,163,127,.12);  color: #10a37f; }
.stub-chat      .stub-btn  { background: #10a37f; }
.stub-chat      .stub-badge-dot { background: #10a37f; }

.stub-api       .stub-icon { background: rgba(0,201,255,.10);   color: #00c9ff; }
.stub-api       .stub-btn  { background: #00c9ff; }
.stub-api       .stub-badge-dot { background: #00c9ff; }

.stub-assistant .stub-icon { background: rgba(245,166,35,.10);  color: #f5a623; }
.stub-assistant .stub-btn  { background: #f5a623; }
.stub-assistant .stub-badge-dot { background: #f5a623; }

.stub-skills    .stub-icon { background: rgba(180,0,255,.10);   color: #b400ff; }
.stub-skills    .stub-btn  { background: #b400ff; color: #fff; }
.stub-skills    .stub-badge-dot { background: #b400ff; }

.stub-search    .stub-icon { background: rgba(255,60,120,.10);  color: #ff3c78; }
.stub-search    .stub-btn  { background: #ff3c78; color: #fff; }
.stub-search    .stub-badge-dot { background: #ff3c78; }

.stub-learn     .stub-icon { background: rgba(100,180,255,.10); color: #64b4ff; }
.stub-learn     .stub-btn  { background: #64b4ff; }
.stub-learn     .stub-badge-dot { background: #64b4ff; }

/* ── Chat input area ── */
.input-container { padding: 20px 20%; border-top: 1px solid var(--border-color); background: var(--bg-primary); flex-shrink: 0; }
.input-wrapper {
    position: relative; background: var(--bg-secondary);
    border: 1px solid var(--border-color); border-radius: 16px;
    padding: 14px 16px; transition: all 0.2s;
}
.input-wrapper:focus-within { border-color: var(--text-tertiary); background: var(--bg-hover); }
.chat-input {
    width: 100%; background: transparent; border: none; outline: none;
    color: var(--text-primary); font-size: 15px; resize: none;
    min-height: 24px; max-height: 200px; font-family: inherit;
}
.chat-input::placeholder { color: var(--text-tertiary); }
.input-actions {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-color);
}
.input-left-actions { display: flex; gap: 8px; }
.input-btn {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--text-secondary);
    cursor: pointer; border-radius: 6px; transition: all 0.2s;
}
.input-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.send-btn {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: var(--text-primary); border: none; color: var(--bg-primary);
    cursor: pointer; border-radius: 8px; transition: all 0.2s;
}
.send-btn:hover   { background: var(--text-secondary); }
.send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.input-footer { text-align: center; padding: 8px; font-size: 12px; color: var(--text-tertiary); }

/* ── Models page ── */
.models-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px; padding: 20px; overflow-y: auto;
}
.model-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.2s; }
.model-card:hover { background: var(--bg-hover); border-color: var(--text-tertiary); }
.model-card.selected { border-color: var(--accent-color); background: rgba(16,163,127,.1); }
.model-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.model-icon { width: 40px; height: 40px; background: var(--bg-tertiary); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.model-info h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.model-info p  { font-size: 13px; color: var(--text-secondary); }
.model-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.model-tag  { padding: 4px 10px; background: var(--bg-tertiary); border-radius: 20px; font-size: 12px; color: var(--text-secondary); }



/* ══════════════════════════════════════════
   AIKLOAK HOME — minimal product-console landing
   ══════════════════════════════════════════ */

.aik-home {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 6vw, 72px);
}

.aik-home-card {
    width: min(860px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeIn .35s ease both;
}

.aik-home-logo {
    width: 76px;
    height: 76px;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border-color);
    margin-bottom: 28px;
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.aik-home-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aik-home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-color);
    background: rgba(16, 163, 127, .10);
    border: 1px solid rgba(16, 163, 127, .26);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.aik-home-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 0 5px rgba(16, 163, 127, .12);
}

.aik-home-title {
    max-width: 820px;
    color: var(--text-primary);
    font-size: clamp(34px, 5.4vw, 64px);
    line-height: 1.02;
    font-weight: 650;
    letter-spacing: -0.055em;
    margin: 0 0 26px;
}

.aik-home-kicker {
    color: var(--text-primary);
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 600;
    margin: 0 0 10px;
}

.aik-home-copy {
    max-width: 650px;
    color: var(--text-secondary);
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.65;
    margin: 0;
}

.aik-home-chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    max-width: 720px;
    margin: 32px 0 30px;
}

.aik-home-chips span {
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 500;
}

.aik-home-chips span:nth-child(1),
.aik-home-chips span:nth-child(2),
.aik-home-chips span:nth-child(3) {
    color: var(--text-primary);
}

.aik-home-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.aik-primary-btn,
.aik-secondary-btn {
    min-width: 132px;
    height: 42px;
    border-radius: 12px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.aik-primary-btn {
    color: #000;
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
}

.aik-secondary-btn {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.aik-primary-btn:hover,
.aik-secondary-btn:hover {
    transform: translateY(-1px);
}

.aik-secondary-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-tertiary);
}

/* keep the new home clean; old suggestion cards can stay unused */
@media (max-width: 768px) {
    .aik-home {
        padding: 28px 18px 36px;
        align-items: flex-start;
    }

    .aik-home-card {
        padding-top: 24px;
    }

    .aik-home-logo {
        width: 64px;
        height: 64px;
        border-radius: 17px;
        margin-bottom: 22px;
    }

    .aik-home-title {
        font-size: clamp(31px, 10vw, 44px);
        line-height: 1.06;
        margin-bottom: 22px;
    }

    .aik-home-copy {
        font-size: 16px;
        line-height: 1.6;
    }

    .aik-home-chips {
        margin: 26px 0 26px;
        gap: 8px;
    }

    .aik-home-chips span {
        font-size: 12px;
        padding: 7px 11px;
    }

    .aik-home-actions {
        width: 100%;
    }

    .aik-primary-btn,
    .aik-secondary-btn {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .aik-home-actions {
        flex-direction: column;
    }

    .aik-primary-btn,
    .aik-secondary-btn {
        width: 100%;
    }
}