/* =========================
   AI APP
   uses --bg / --surface / --border / --curve etc
   tokens already defined in main.css
   — proportions & component patterns aligned to music.css
   (sidebar width/padding, display-font section labels,
   flatter button hovers, glass floating composer bar)
========================= */

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

@keyframes aiTypingBounce{
    0%,60%,100%{ transform:translateY(0); opacity:.35; }
    30%{ transform:translateY(-4px); opacity:1; }
}

main:has(.ai-panel.active){
    padding:0;
    overflow:hidden;
    align-items:stretch;
    justify-content:stretch;
}

.ai-panel.active{
    width:100%;
    height:100%;
}

.ai-app{
    width:100%;
    height:100%;
    display:flex;
    overflow:hidden;
    animation:aiFade .35s ease;
    position:relative;
}


/* =========================
   RAIL (chat sidebar)
   — width/padding now match .music-sidebar
========================= */

.ai-rail{
    width:220px;
    flex-shrink:0;
    height:100%;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:18px 10px;
    background:var(--sidebar);
    border-right:1px solid var(--border);
}

.ai-rail-top{
    display:flex;
    flex-direction:column;
    gap:10px;
    flex-shrink:0;
}

.ai-rail-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2px 2px 14px;
    margin-bottom:2px;
    border-bottom:1px solid var(--border);
}

.ai-rail-heading strong{
    font-family:var(--font-display);
    font-size:15px;
    font-weight:800;
    letter-spacing:-.01em;
}

.ai-rail-close{
    display:none;
    width:30px;
    height:30px;
    border-radius:9px;
    align-items:center;
    justify-content:center;
    color:var(--muted);
}

.ai-new-chat{
    height:42px;
    border-radius:11px;
    background:var(--white);
    color:var(--bg);
    font-family:var(--font-body);
    font-weight:700;
    font-size:13.5px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:transform var(--speed) var(--curve-spring), background var(--speed) var(--curve);
}

.ai-new-chat:hover{
    transform:scale(1.03);
}

.ai-new-chat svg{
    width:15px;
    height:15px;
    stroke:currentColor;
    fill:none;
    stroke-width:2.2;
}

.ai-search{
    height:46px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    transition:.2s var(--curve);
}

.ai-search:hover{
    border-color:var(--border-strong);
}

.ai-search:focus-within{
    border-color:var(--border-strong);
    background:var(--surface-2);
    box-shadow:0 0 0 3px var(--surface-3);
}

.ai-search svg{
    width:15px;
    height:15px;
    opacity:.5;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    flex-shrink:0;
}

.ai-search input{
    flex:1;
    min-width:0;
    background:none;
    border:none;
    outline:none;
    color:var(--text);
    font-family:var(--font-body);
    font-size:13.5px;
}


/* =========================
   HISTORY LIST
   — labels now match .music-section-label (display font,
   uppercase, margin-based rhythm instead of padding block)
========================= */

.ai-history{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    margin:0 -6px;
    padding:2px 6px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.ai-history::-webkit-scrollbar{
    width:5px;
}

.ai-history::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.12);
    border-radius:20px;
}

.ai-history-group{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.ai-history-label{
    font-family:var(--font-display);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--muted-dim);
    margin:14px 2px 8px;
}

.ai-history-group:first-child .ai-history-label{
    margin-top:2px;
}

.ai-history-empty{
    padding:26px 10px;
    text-align:center;
    font-size:12.5px;
    line-height:1.6;
    color:var(--muted-dim);
}

.ai-chat-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    height:40px;
    padding:0 8px;
    border-radius:9px;
    cursor:pointer;
    color:var(--muted);
    transition:background var(--speed) var(--curve), color var(--speed) var(--curve), transform var(--speed) var(--curve-spring);
}

.ai-chat-item:hover{
    background:var(--surface);
    color:var(--text);
    transform:translateX(3px);
}

.ai-chat-item.active{
    background:var(--surface-2);
    color:var(--white);
}

.ai-chat-mono{
    width:26px;
    height:26px;
    border-radius:7px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--surface-3);
    border:1px solid var(--border);
    font-family:var(--font-mono);
    font-size:10.5px;
    font-weight:600;
    color:var(--muted);
    transition:.2s ease;
}

.ai-chat-item:hover .ai-chat-mono,
.ai-chat-item.active .ai-chat-mono{
    color:var(--text);
    border-color:var(--border-strong);
}

.ai-chat-text{
    flex:1;
    min-width:0;
}

.ai-chat-text strong{
    display:block;
    font-size:13px;
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ai-chat-del{
    width:24px;
    height:24px;
    border-radius:7px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    color:var(--muted);
    transition:opacity .18s ease, background .18s ease, color .18s ease;
}

.ai-chat-item:hover .ai-chat-del{
    opacity:.65;
}

.ai-chat-del:hover{
    opacity:1 !important;
    background:var(--surface-3);
    color:var(--white);
}

.ai-chat-del svg{
    width:13px;
    height:13px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
}


/* =========================
   RAIL BOTTOM — model + key
   — sits where .music-sidebar-footer sits, same border-top rhythm
========================= */

.ai-rail-bottom{
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-top:14px;
    border-top:1px solid var(--border);
}

.ai-model-select{
    position:relative;
}

.ai-model-current{
    width:100%;
    height:50px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 12px;
    border-radius:12px;
    background:var(--surface);
    border:1px solid var(--border);
    cursor:pointer;
    transition:.2s ease;
}

.ai-model-current:hover{
    border-color:var(--border-strong);
    background:var(--surface-2);
}

.ai-model-mono{
    width:30px;
    height:30px;
    border-radius:8px;
    flex-shrink:0;
    background:var(--surface-3);
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:700;
}

.ai-model-labels{
    flex:1;
    min-width:0;
    text-align:left;
}

.ai-model-labels strong{
    display:block;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ai-free-tag{
    display:inline-block;
    font-family:var(--font-mono);
    font-size:9px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--bg);
    background:var(--white);
    padding:2px 6px;
    border-radius:999px;
    margin-left:6px;
    vertical-align:middle;
}

.ai-model-labels span{
    display:block;
    font-family:var(--font-mono);
    font-size:10.5px;
    color:var(--muted-dim);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-top:1px;
}

.ai-model-arrow{
    flex-shrink:0;
    width:14px;
    height:14px;
    opacity:.6;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    transition:transform .2s ease;
}

.ai-model-select.open .ai-model-arrow{
    transform:rotate(180deg);
}

.ai-model-dropdown{
    position:absolute;
    left:0;
    right:0;
    bottom:calc(100% + 8px);
    max-height:340px;
    overflow-y:auto;
    background:var(--glass-strong);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--border-strong);
    border-radius:14px;
    padding:8px;
    box-shadow:0 10px 28px rgba(0,0,0,.28);
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    transition:.2s ease;
    z-index:40;
}

.ai-model-dropdown::-webkit-scrollbar{
    width:5px;
}

.ai-model-dropdown::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.14);
    border-radius:20px;
}

.ai-model-dropdown.open{
    opacity:1;
    visibility:visible;
    transform:none;
}

.ai-model-search{
    height:36px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 10px;
    margin-bottom:8px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
}

.ai-model-search svg{
    width:13px;
    height:13px;
    opacity:.5;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    flex-shrink:0;
}

.ai-model-search input{
    flex:1;
    min-width:0;
    background:none;
    border:none;
    outline:none;
    color:var(--text);
    font-size:12.5px;
}

.ai-model-group-label{
    font-family:var(--font-mono);
    font-size:9.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted-dim);
    padding:9px 8px 4px;
}

.ai-model-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 8px;
    border-radius:9px;
    cursor:pointer;
    transition:background .15s ease;
}

.ai-model-option:hover{
    background:var(--surface);
}

.ai-model-option.selected{
    background:var(--surface-2);
}

.ai-model-option .ai-model-mono{
    width:26px;
    height:26px;
    font-size:10px;
}

.ai-model-option-text{
    flex:1;
    min-width:0;
}

.ai-model-option-text strong{
    display:block;
    font-size:12.5px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ai-model-option-text span{
    display:block;
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--muted-dim);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ai-model-option-check{
    width:14px;
    height:14px;
    flex-shrink:0;
    stroke:var(--white);
    fill:none;
    stroke-width:2.2;
    opacity:0;
}

.ai-model-option.selected .ai-model-option-check{
    opacity:1;
}

.ai-model-empty{
    padding:18px 10px;
    text-align:center;
    font-size:12px;
    color:var(--muted-dim);
}


/* api key */

.ai-key-row{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.ai-key-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 2px;
}

.ai-key-label-row span{
    font-size:11.5px;
    color:var(--muted);
    font-weight:500;
}

.ai-key-status{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:var(--font-mono);
    font-size:9.5px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--muted-dim);
}

.ai-key-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--muted-dim);
}

.ai-key-status.connected{
    color:var(--text);
}

.ai-key-status.connected .ai-key-dot{
    background:var(--white);
}

.ai-key-input-wrap{
    display:flex;
    gap:6px;
}

.ai-key-input-wrap input{
    flex:1;
    min-width:0;
    height:38px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:9px;
    padding:0 12px;
    color:var(--text);
    font-family:var(--font-mono);
    font-size:12px;
    outline:none;
    transition:.2s ease;
}

.ai-key-input-wrap input:focus{
    border-color:var(--border-strong);
    background:var(--surface-2);
    box-shadow:0 0 0 3px var(--surface-3);
}

.ai-key-save{
    width:38px;
    height:38px;
    flex-shrink:0;
    border-radius:9px;
    background:var(--surface-3);
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    transition:.2s ease;
}

.ai-key-save:hover{
    background:var(--white);
    color:var(--bg);
    border-color:var(--white);
}

.ai-key-save svg{
    width:14px;
    height:14px;
    stroke:currentColor;
    fill:none;
    stroke-width:2.2;
}

.ai-key-hint{
    font-size:10.5px;
    line-height:1.55;
    color:var(--muted-dim);
    padding:0 2px;
}


/* =========================
   MAIN COLUMN
========================= */

.ai-main{
    flex:1;
    min-width:0;
    height:100%;
    display:flex;
    flex-direction:column;
    position:relative;
}

.ai-main-header{
    height:64px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:0 28px;
    border-bottom:1px solid var(--border);
}

.ai-rail-toggle{
    display:none;
    width:34px;
    height:34px;
    flex-shrink:0;
    border-radius:9px;
    align-items:center;
    justify-content:center;
    color:var(--muted);
}

.ai-rail-toggle svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
}

.ai-main-title{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex:1;
}

.ai-main-title strong{
    font-family:var(--font-display);
    font-size:16px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ai-badge{
    flex-shrink:0;
    font-family:var(--font-mono);
    font-size:10.5px;
    color:var(--muted);
    background:var(--surface);
    border:1px solid var(--border);
    padding:5px 10px;
    border-radius:999px;
    white-space:nowrap;
}

.ai-clear-btn{
    width:34px;
    height:34px;
    flex-shrink:0;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    transition:.2s ease;
}

.ai-clear-btn:hover{
    background:var(--surface);
    color:var(--text);
}

.ai-clear-btn svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
}


/* =========================
   MESSAGES + EMPTY STATE
========================= */

.ai-messages{
    flex:1;
    overflow-y:auto;
    padding:32px 28px 8px;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.ai-messages::-webkit-scrollbar{
    width:6px;
}

.ai-messages::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.13);
    border-radius:20px;
}

.ai-empty{
    margin:auto;
    width:min(680px,100%);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.ai-empty-mark{
    width:52px;
    height:52px;
    border-radius:14px;
    background:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
}

.ai-empty-mark svg{
    width:22px;
    height:22px;
    stroke:var(--bg);
    fill:none;
    stroke-width:1.8;
}

.ai-empty h1{
    font-family:var(--font-display);
    font-size:24px;
    font-weight:800;
    letter-spacing:-.02em;
    color:var(--white);
}

.ai-empty p{
    font-size:14.5px;
    line-height:1.6;
    color:var(--muted);
    max-width:400px;
    margin-top:12px;
    margin-bottom:26px;
}

.ai-suggest-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
    text-align:left;
}

.ai-suggest-card{
    padding:16px;
    border-radius:14px;
    background:var(--surface);
    border:1px solid var(--border);
    cursor:pointer;
    transition:transform var(--speed) var(--curve-spring),
               background var(--speed) var(--curve),
               border-color var(--speed) var(--curve),
               box-shadow var(--speed) var(--curve);
}

.ai-suggest-card:hover{
    transform:translateY(-2px);
    background:var(--surface-2);
    border-color:var(--border-strong);
    box-shadow:0 8px 20px rgba(0,0,0,.22);
}

.ai-suggest-card strong{
    display:block;
    font-size:13.5px;
    font-weight:600;
}

.ai-suggest-card span{
    display:block;
    font-size:12px;
    color:var(--muted-dim);
    margin-top:4px;
    line-height:1.5;
}


/* message bubbles */

.ai-msg{
    display:flex;
    gap:14px;
    max-width:760px;
    width:100%;
    margin:0 auto;
}

.ai-msg.user{
    flex-direction:row-reverse;
}

.ai-msg-avatar{
    width:30px;
    height:30px;
    flex-shrink:0;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:700;
    background:var(--surface-3);
    border:1px solid var(--border);
    color:var(--muted);
}

.ai-msg.user .ai-msg-avatar{
    background:var(--white);
    color:var(--bg);
    border-color:var(--white);
}

.ai-msg-body{
    max-width:calc(100% - 44px);
    display:flex;
    flex-direction:column;
}

.ai-msg.user .ai-msg-body{
    align-items:flex-end;
}

.ai-msg-bubble{
    padding:13px 16px;
    border-radius:14px;
    font-size:14.5px;
    line-height:1.65;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);
    white-space:pre-wrap;
    word-wrap:break-word;
}

.ai-msg.user .ai-msg-bubble{
    background:var(--white);
    color:var(--bg);
    border-color:var(--white);
}

.ai-msg-meta{
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--muted-dim);
    margin-top:6px;
    padding:0 4px;
}

.ai-typing{
    display:flex;
    gap:5px;
    padding:8px 4px;
}

.ai-typing span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--muted);
    animation:aiTypingBounce 1.1s infinite ease-in-out;
}

.ai-typing span:nth-child(2){ animation-delay:.15s; }
.ai-typing span:nth-child(3){ animation-delay:.3s; }

.ai-error-bubble{
    max-width:520px;
    margin:0 auto;
    padding:12px 18px;
    border-radius:12px;
    background:var(--surface);
    border:1px solid var(--border-strong);
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
    text-align:center;
}

.ai-error-bubble strong{
    color:var(--text);
}


/* =========================
   COMPOSER
   — restyled as a floating glass bar, matching .music-player
========================= */

.ai-composer-wrap{
    flex-shrink:0;
    padding:0 24px 20px;
}

.ai-composer{
    display:flex;
    align-items:flex-end;
    gap:10px;
    max-width:760px;
    margin:0 auto;
    background:var(--glass-strong);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--border);
    border-radius:16px;
    padding:8px 8px 8px 18px;
    box-shadow:0 10px 28px rgba(0,0,0,.28);
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.ai-composer:focus-within{
    border-color:var(--border-strong);
    box-shadow:0 10px 28px rgba(0,0,0,.28), 0 0 0 3px var(--surface-3);
}

.ai-composer textarea{
    flex:1;
    background:none;
    border:none;
    outline:none;
    resize:none;
    color:var(--text);
    font-family:var(--font-body);
    font-size:14.5px;
    line-height:1.5;
    max-height:160px;
    padding:9px 0;
}

.ai-composer textarea::placeholder{
    color:var(--muted-dim);
}

.ai-send{
    width:40px;
    height:40px;
    flex-shrink:0;
    border-radius:10px;
    background:var(--white);
    color:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform var(--speed) var(--curve-spring),
               background var(--speed) var(--curve),
               opacity .2s ease;
}

.ai-send:hover{
    transform:scale(1.05) rotate(-3deg);
}

.ai-send:disabled{
    opacity:.35;
    cursor:default;
    transform:none;
    background:var(--white);
}

.ai-send svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    fill:none;
    stroke-width:2.2;
}

.ai-composer-footer{
    max-width:760px;
    margin:10px auto 0;
    text-align:center;
    font-size:11px;
    color:var(--muted-dim);
}


/* =========================
   MOBILE
========================= */

.ai-rail-backdrop{
    display:none;
}

@media(max-width:900px){

    .ai-rail-toggle{
        display:flex;
    }

    .ai-rail-close{
        display:flex;
    }

    .ai-rail{
        position:fixed;
        top:0;
        bottom:64px;
        left:0;
        width:min(320px,84%);
        z-index:70;
        transform:translateX(-100%);
        transition:transform .3s var(--curve);
        box-shadow:20px 0 40px rgba(0,0,0,.35);
    }

    .ai-rail.open{
        transform:none;
    }

    .ai-rail-backdrop{
        display:block;
        position:fixed;
        inset:0;
        bottom:64px;
        background:rgba(0,0,0,.55);
        z-index:65;
        opacity:0;
        visibility:hidden;
        transition:.25s ease;
    }

    .ai-rail-backdrop.open{
        opacity:1;
        visibility:visible;
    }

    .ai-main-header{
        padding:0 16px;
    }

    .ai-main-title strong{
        max-width:140px;
    }

    .ai-messages{
        padding:22px 16px 8px;
    }

    .ai-composer-wrap{
        padding:0 16px 16px;
    }

    .ai-suggest-grid{
        grid-template-columns:1fr;
    }
}