/* ===================================================
   MangaMood - style.css
   "Mood Orb" purple/violet theme
=================================================== */

.full-width{ width:100%; }
.mt-10{ margin-top:10px; }
.mt-20{ margin-top:20px; }
.hidden{ display:none; }

.pro-tip{
    margin-top:10px;
    text-align:center;
    color:var(--text-muted);
    font-size:.85rem;
    line-height:1.5;
}

/* ==========================
   RESET
========================== */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

/* ==========================
   ROOT VARIABLES
========================== */
:root{

    --bg-dark:#0c0a16;
    --bg-dark-2:#12101f;
    --card-bg:#17142a;

    --purple:#8b7cf6;
    --purple-bright:#a996ff;
    --purple-soft:rgba(139,124,246,.16);
    --pink:#f472b6;
    --accent:#a996ff;
    --accent-hover:#8b7cf6;

    --gold:#f4c542;
    --green:#34d399;
    --orange:#fb923c;
    --red:#fb7185;

    --text-title:#f5f3ff;
    --text-main:#b6b0cf;
    --text-muted:#786f95;
    --text-bright:#ffffff;

    --glass:rgba(23,20,42,.6);

    --border:rgba(255,255,255,.08);

    --shadow:0 14px 32px rgba(0,0,0,.4);

    --radius:20px;

    --transition:.3s ease;
}

/* ==========================
   BODY
========================== */
body{
    background:
        radial-gradient(circle at 15% 0%, rgba(139,124,246,.16), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(244,114,182,.10), transparent 40%),
        var(--bg-dark);
    color:var(--text-main);
    font-family:"Inter",system-ui,sans-serif;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding:18px;
    padding-bottom:90px;
    overflow-x:hidden;
}

/* ==========================
   SCROLLBAR
========================== */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#09070f; }
::-webkit-scrollbar-thumb{ background:#332d54; border-radius:50px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* ==========================
   LOADING BAR
========================== */
#loading-bar{
    position:fixed; top:0; left:0; width:0; height:4px;
    background:linear-gradient(90deg,var(--purple),var(--pink));
    z-index:9999;
    box-shadow:0 0 15px var(--purple);
    transition:width .3s;
}
.is-loading{ display:block !important; animation:loading 1.5s infinite; }
@keyframes loading{
    0%{ width:0%; } 50%{ width:70%; } 100%{ width:100%; }
}

/* ==========================
   TOP NAVIGATION
========================== */
.topbar{
    width:min(1100px,95%);
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px;
    background:var(--glass);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:var(--shadow);
   z-index:20;
}

.topbar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:1.3rem;
    font-weight:700;
    color:var(--text-title);
    letter-spacing:-.3px;
    font-family:Georgia,"Times New Roman",serif;
}

.topbar-brand::before{
    content:"";
    display:inline-block;
    width:26px;
    height:26px;
    border-radius:50%;
    background:conic-gradient(from 200deg,var(--pink),var(--purple),#60a5fa,var(--pink));
    box-shadow:0 0 14px rgba(139,124,246,.6);
}

/* ==========================
   NAVIGATION BUTTONS
========================== */
.view-toggle{
    display:flex;
    gap:8px;
    align-items:center;
}

.tab-btn{
    border:none;
    background:rgba(255,255,255,.05);
    color:var(--text-main);
    width:42px;
    height:42px;
    border-radius:50%;
    cursor:pointer;
    font-size:1rem;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
    border:1px solid rgba(255,255,255,.06);
}

.tab-btn:hover{
    background:var(--purple-soft);
    color:white;
    border-color:rgba(139,124,246,.4);
}

/* STEP 6: .tab-btn.active-view was only ever applied by the old
   setupViewToggle() in main.js (removed in Step 5) to highlight the ♡
   button while "My List" was toggled in-place. Nothing sets this class
   anymore now that ♡ opens the dedicated My List page instead, so the
   rule is gone too. */

/* ==========================
   HEADER
========================== */
header{
    width:min(560px,94%);
    margin:36px auto 8px;
    text-align:center;
}

/* Mood orb */
.mood-orb-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:26px;
}

.mood-orb{
    width:150px;
    height:150px;
    border-radius:50%;
    background:
        radial-gradient(circle at 32% 28%, #ffffff 0%, rgba(255,255,255,0) 22%),
        conic-gradient(from 210deg,#f9a8d4,#c4b5fd,#93c5fd,#f9a8d4);
    box-shadow:
        0 0 60px rgba(147,120,255,.55),
        0 0 120px rgba(244,114,182,.25);
    animation:orbFloat 5s ease-in-out infinite;
}

.mood-orb-stem{
    width:6px;
    height:16px;
    margin-top:-2px;
    border-radius:0 0 4px 4px;
    background:linear-gradient(180deg,rgba(196,181,253,.9),rgba(196,181,253,0));
}

@keyframes orbFloat{
    0%,100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-8px) scale(1.02); }
}

.tagline{
    color:var(--text-title);
    font-family:Georgia,"Times New Roman",serif;
    font-size:1.9rem;
    font-weight:700;
    line-height:1.25;
    margin-bottom:8px;
}

.tagline-sub{
    color:var(--text-muted);
    font-size:.92rem;
    margin-bottom:24px;
}

/* ==========================
   SEARCH
========================== */
.search-container{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.search-container input{
    width:100%;
    padding:17px 24px;
    border:none;
    outline:none;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    color:white;
    font-size:.98rem;
    transition:var(--transition);
    box-shadow:inset 0 2px 8px rgba(0,0,0,.25);
}

.search-container input::placeholder{ color:#726a8c; }

.search-container input:focus{
    border-color:var(--purple);
    box-shadow:
        0 0 0 3px rgba(139,124,246,.18),
        inset 0 2px 8px rgba(0,0,0,.25);
}

/* ==========================
   BUTTONS
========================== */
.vibe-btn{
    border:none;
    cursor:pointer;
    padding:13px 22px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
    color:var(--text-title);
    font-size:.92rem;
    font-weight:600;
    transition:all .3s ease;
}

.vibe-btn:hover{
    background:var(--purple-soft);
    color:white;
    transform:translateY(-2px);
    border-color:rgba(139,124,246,.4);
}

.vibe-btn:active{ transform:scale(.98); }

/* STEP 1: highlights a mood chip that's part of the current 1-or-2-mood
   mix, so it's visually obvious what's actively being blended. */
.vibe-btn.selected{
    background:linear-gradient(135deg,var(--purple-bright),var(--purple),var(--pink));
    color:#161225;
    border-color:transparent;
    box-shadow:0 10px 22px rgba(139,124,246,.4);
}

.vibe-btn.selected:hover{
    color:#161225;
}

/* Primary CTA — "Find My Vibe" */
#search-submit-btn{
    background:linear-gradient(135deg,var(--purple-bright),var(--purple),var(--pink));
    color:#161225;
    font-weight:700;
    font-size:1.02rem;
    padding:17px 24px;
    box-shadow:0 14px 30px rgba(139,124,246,.4);
    border:none;
}

#search-submit-btn:hover{
    color:#161225;
    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(139,124,246,.5);
}

/* ===================================================
   MangaMood - style.css
   Part 2
   Layout • Results • Footer • Responsive
=================================================== */

.container{ width:min(1200px,95%); margin:0 auto; flex:1; }

/* ==========================
   MOOD SECTION
========================== */
.vibe-panel-container{
    padding:34px 0 24px;
    text-align:center;
}


.mixer-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}

.mixer-heading h3{
    font-family:Georgia,"Times New Roman",serif;
    font-size:1.15rem;
    font-weight:700;
    color:var(--text-title);
}

.mixer-heading span{
    font-size:.7rem;
    font-weight:700;
    letter-spacing:1.2px;
    color:var(--text-muted);
    text-transform:uppercase;
}

.vibe-panel,
.hidden-tags{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.hidden-tags{ display:none; margin-top:18px; }
.hidden-tags.show{ display:flex; }

/* Quick filter chip row (decorative, matches design mockup) */
.quick-filters{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:4px 2px 18px;
    scrollbar-width:none;
}
.quick-filters::-webkit-scrollbar{ display:none; }

.qf-chip{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:6px;
    padding:10px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    color:var(--text-main);
    font-size:.85rem;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    transition:var(--transition);
}
.qf-chip:hover{ border-color:rgba(139,124,246,.4); color:var(--text-title); }

/* BUGFIX: this used to be `.qf-chip.qf-done` — a class hardcoded onto the
   "Completed" button in index.html, so it was permanently green no matter
   what the user tapped, and the other two chips could never show any
   selected state at all. Renamed to `.active` and toggled purely by JS
   (js/main.js's setupQuickFilters()) on whichever chip was actually
   clicked last, so the highlight now reflects real user interaction
   instead of being baked into the markup for one specific chip. */
.qf-chip.active{ color:var(--green); border-color:rgba(52,211,153,.3); background:rgba(52,211,153,.06); }

/* ==========================
   SECTION EYEBROWS / HEADERS
========================== */
.section-eyebrow{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin:6px 0 4px;
}

.section-eyebrow span.eyebrow-label{
    font-size:.68rem;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--text-muted);
}

.section-eyebrow a,
.see-all{
    font-size:.85rem;
    font-weight:600;
    color:var(--purple-bright);
    text-decoration:none;
    cursor:pointer;
}

/* ==========================
   RESULTS
========================== */
#results-area{ width:100%; margin-top:8px; }

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

#results-title{
    color:var(--text-title);
    font-family:Georgia,"Times New Roman",serif;
    font-size:1.5rem;
    font-weight:700;
}

.refresh-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--purple-bright);
    background:transparent;
    border:none;
    font-weight:700;
}
.refresh-btn:hover{ background:transparent; color:var(--purple-bright); transform:none; }

/* ==========================
   GRID
========================== */
.grid{ width:100%; }

/* ==========================
   FOOTER
========================== */
footer{
    margin-top:auto;
    text-align:center;
    padding:36px 20px 20px;
    color:var(--text-muted);
    font-size:.72rem;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

/* ==========================
   BOTTOM NAV (mobile-style)
========================== */
.bottom-nav{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:500;
    display:flex;
    justify-content:space-around;
    align-items:center;
    padding:10px 6px calc(10px + env(safe-area-inset-bottom));
    background:rgba(12,10,22,.85);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-top:1px solid var(--border);
}

.bn-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    background:none;
    border:none;
    color:var(--text-muted);
    font-size:.68rem;
    font-weight:600;
    cursor:pointer;
    padding:4px 8px;
}

.bn-item .bn-icon{ font-size:1.15rem; }

.bn-item.active{ color:var(--purple-bright); }

@media (min-width:900px){
    .bottom-nav{ display:none; }
    body{ padding-bottom:22px; }
}

/* ==========================
   ANIMATIONS
========================== */
@keyframes fadeUp{
    from{ opacity:0; transform:translateY(20px); }
    to{ opacity:1; transform:translateY(0); }
}

header,#results-area{ animation:fadeUp .5s ease; }

/* ==========================
   MOBILE
========================== */
@media (max-width:768px){

    body{ padding:14px; padding-bottom:90px; }

    .topbar{ width:100%; padding:14px 16px; }

    .topbar-brand{ font-size:1.15rem; }
       /* Topbar got crowded once the mode switcher replaced the old 2-link
       toggle — logo, brand text, switcher, heart, and hamburger all now
       compete for the same row on narrow screens. Tighten everything down
       a notch rather than wrapping to a second row. */
    .topbar{ gap:8px; padding:10px 12px; }

    .topbar-brand{ font-size:1rem; gap:6px; }
    .topbar-brand::before{ width:22px; height:22px; }

    .mode-switcher-btn{ padding:6px 10px; font-size:.78rem; gap:4px; }

    .view-toggle{ gap:4px; }
    .tab-btn{ width:36px; height:36px; font-size:.9rem; }

    /* Below ~380px (small phones in portrait), let the brand name shrink
       further and truncate rather than forcing the row to wrap — keeps
       the switcher/heart/menu from getting squeezed off-screen. */
    @media (max-width:380px){
        .topbar{ padding:9px 10px; gap:6px; }
        .topbar-brand{ font-size:.9rem; max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .mode-switcher-btn{ padding:5px 8px; font-size:.72rem; }
        .tab-btn{ width:32px; height:32px; font-size:.8rem; }
    }

    header{ width:100%; margin:26px auto 6px; }

    .mood-orb{ width:120px; height:120px; }

    .tagline{ font-size:1.55rem; }

    .search-container input{ font-size:.95rem; padding:15px 20px; }

    .vibe-btn{ width:auto; }

    #results-title{ font-size:1.3rem; }

}

/* ==========================
   TABLET
========================== */
@media (min-width:769px) and (max-width:1024px){
    .container{ width:94%; }
}

/* ==========================
   LARGE SCREENS
========================== */
@media (min-width:1400px){
    .container{ max-width:1300px; }
}

/* ===================================================
   MangaMood - style.css
   Part 4
   AI Search Intelligence Panel
=================================================== */

.ai-panel{
    margin-top:22px;
    padding:18px 22px;
    border-radius:var(--radius);
    background:var(--glass);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    text-align:left;
}

.ai-panel-live{ display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto; }
.ai-line{ font-size:.92rem; color:var(--text-main); animation:aiLineIn .3s ease; }
.ai-line-lead{ color:var(--text-title); font-weight:700; }
.ai-line-status{ color:var(--purple-bright); font-weight:600; }
.ai-line-done{ color:var(--green); font-weight:700; }

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

.ai-api-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }

.ai-api-chip{
    padding:5px 12px;
    border-radius:20px;
    font-size:.8rem;
    font-weight:600;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    color:var(--text-muted);
    transition:var(--transition);
}

.ai-api-pending{ color:var(--purple-bright); border-color:rgba(139,124,246,.4); animation:aiPulse 1.2s ease infinite; }
.ai-api-success{ color:var(--green); border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.08); }
.ai-api-fail{ color:var(--red); border-color:rgba(251,113,133,.35); background:rgba(251,113,133,.06); }
.ai-api-skip{ opacity:.5; }

@keyframes aiPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

.ai-panel-summary{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.ai-panel-summary-left{ display:flex; align-items:center; gap:10px; }
.ai-panel-icon{ font-size:1.2rem; }
.ai-panel-title{ color:var(--text-title); font-weight:700; font-size:.95rem; }
.ai-panel-summary-right{ display:flex; align-items:center; gap:10px; }

.ai-confidence-pill{
    padding:5px 14px;
    border-radius:20px;
    font-size:.82rem;
    font-weight:700;
    color:var(--text-bright);
    background:linear-gradient(135deg,rgba(139,124,246,.35),rgba(139,124,246,.12));
    border:1px solid rgba(139,124,246,.4);
}

.ai-panel-toggle{
    border:none;
    background:transparent;
    color:var(--purple-bright);
    font-weight:700;
    font-size:.85rem;
    cursor:pointer;
    padding:4px 6px;
    transition:var(--transition);
}
.ai-panel-toggle:hover{ color:var(--accent-hover); }

.ai-panel-details{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--border);
    display:flex;
    flex-direction:column;
    gap:18px;
}
.ai-panel-details:not(.open){ display:none; }

.ai-detail-section h4{
    color:var(--text-title);
    font-size:.85rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:10px;
    opacity:.85;
}

.ai-empty{ color:var(--text-muted); font-size:.85rem; }

.ai-mood-bars{ display:flex; flex-direction:column; gap:10px; }
.ai-mood-bar-label{ display:flex; justify-content:space-between; font-size:.85rem; font-weight:600; color:var(--text-main); margin-bottom:4px; }
.ai-mood-bar-track{ width:100%; height:8px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.ai-mood-bar-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,var(--purple),var(--pink)); transition:width .5s ease; }

.ai-tag-columns{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ai-tag-group{ display:flex; flex-wrap:wrap; gap:6px; }
.ai-tag{ padding:4px 10px; border-radius:14px; font-size:.78rem; font-weight:600; white-space:nowrap; }

.ai-tag-must{ color:var(--green); background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.3); }
.ai-tag-nice{ color:var(--purple-bright); background:rgba(139,124,246,.1); border:1px solid rgba(139,124,246,.3); }
.ai-tag-avoid{ color:var(--red); background:rgba(251,113,133,.08); border:1px solid rgba(251,113,133,.28); }

.ai-route{ font-size:.85rem; color:var(--text-main); }

.ai-reasoning-list{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.ai-reasoning-list li{ font-size:.82rem; color:var(--text-muted); padding-left:14px; position:relative; }
.ai-reasoning-list li:not(.ai-empty)::before{ content:"•"; position:absolute; left:0; color:var(--purple-bright); }

@media (max-width:768px){
    .ai-panel{ padding:16px 18px; }
    .ai-tag-columns{ grid-template-columns:1fr; gap:14px; }
}