/*
 * newtab desktop theme overrides.
 *
 * The legacy template still contains several feature-specific style blocks.
 * New shared and maintenance-oriented rules should be added here so the main
 * PHP view does not continue growing. Existing inline CSS can be migrated here
 * incrementally without changing the rendered page.
 */

.ctx-item.is-danger {
    color: #ff9aab;
}

.ctx-item.is-danger:hover {
    color: #fff;
    background: rgba(244, 63, 94, .26);
}

.nav-board-link {
    position: relative;
}

.nav-board-link[data-id]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid transparent;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.nav-board-link[data-id]:hover::after {
    border-color: rgba(34, 211, 238, .2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

/* Music and AI chat: use the same glass system as the netdisk window. */
.music-overlay,
#aiChatOverlay {
    background: rgba(4, 8, 18, .46);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.music-modal,
#aiChatBox {
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .09));
    backdrop-filter: blur(30px) saturate(170%);
    -webkit-backdrop-filter: blur(30px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 26px;
    box-shadow: 0 30px 70px rgba(7, 12, 28, .45), 0 10px 30px rgba(168, 85, 247, .10);
}

.music-modal::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 34%);
}

.music-card-head {
    padding: 18px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
}

.music-main {
    padding: 0 18px 18px;
}

.music-sidebar {
    padding: 14px 2px;
    border-bottom-color: rgba(255, 255, 255, .10);
}

.mc-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
    color: rgba(232, 242, 255, .72);
    box-shadow: none;
}

.mc-btn:hover,
.music-nav-item:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}

.music-nav-item {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .10);
    color: rgba(214, 228, 255, .66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.music-nav-item.active {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .18);
    color: #f8fbff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.music-track-row {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.music-track-row:hover,
.music-track-row.active {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .14);
}

.music-track-index,
.music-form-card,
.mc-sinput,
.mc-stype,
.music-action-btn {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.mc-sinput:focus,
.mc-stype:focus {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .22);
}

.music-sideplayer {
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
    border-color: rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 38px rgba(7, 12, 28, .12);
}

.music-cover {
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 40px rgba(7, 12, 28, .28);
}

.music-progress {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .06);
}

/* AI chat keeps its layout and behaviour, but every visible surface is glass. */
#aiChatBox {
    overflow: hidden;
    color: #f8fbff;
}

.ai-shell {
    background: transparent;
}

.ai-sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
    border-right: 1px solid rgba(255, 255, 255, .10);
}

.ai-main {
    background: rgba(7, 16, 34, .18);
}

.ai-brand-mark,
.ai-head-avatar,
.ai-avatar,
.ai-conv-icon {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .11);
    color: #c9c2ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.ai-brand-title,
.ai-sidebar-card-title,
.ai-conv-title,
#aiChatTitle {
    color: #f8fbff;
}

.ai-sidebar-label,
.ai-sidebar-card,
.ai-sidebar-card-sub,
.ai-conv-sub,
.ai-head-sub {
    color: rgba(214, 228, 255, .58);
}

.ai-sidebar-btn,
.ai-sidebar-card,
.ai-conv-item {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.ai-sidebar-btn {
    color: #d9d4ff;
}

.ai-sidebar-btn:hover,
.ai-conv-item:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .15);
}

.ai-conv-item.active {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.ai-conv-del {
    color: rgba(214, 228, 255, .45);
}

.ai-conv-del:hover {
    color: #ffb5b5;
}

.ai-head-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(232, 242, 255, .72);
    box-shadow: none;
}

.ai-head-close:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

#aiChatMsgs::-webkit-scrollbar-thumb,
#aiChatInput::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
}

.ai-bubble {
    color: #eef6ff;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .10);
}

.ai-msg-row.user .ai-bubble {
    background: linear-gradient(135deg, rgba(99, 102, 241, .28), rgba(168, 85, 247, .22));
    border: 1px solid rgba(184, 151, 255, .22);
    color: #f8fbff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 28px rgba(7, 12, 28, .10);
}

.ai-msg-row.bot .ai-bubble {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #eef6ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 28px rgba(7, 12, 28, .10);
}

.ai-bubble h1,
.ai-bubble h2,
.ai-bubble h3,
.ai-bubble strong {
    color: #f8fbff;
}

.ai-bubble em {
    color: rgba(238, 246, 255, .82);
}

.ai-bubble a {
    color: #8cecff !important;
}

.ai-bubble pre {
    background: rgba(7, 16, 34, .42);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.ai-bubble code,
.ai-bubble pre code {
    color: #dff8ff;
}

.ai-table-wrap {
    background: rgba(7, 16, 34, .30);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.ai-table {
    color: #eef6ff;
}

.ai-table th {
    background: rgba(255, 255, 255, .09);
    color: #f8fbff;
    border-bottom-color: rgba(255, 255, 255, .12);
}

.ai-table td {
    border-bottom-color: rgba(255, 255, 255, .08);
}

.ai-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, .035);
}

.ai-table th:not(:last-child),
.ai-table td:not(:last-child) {
    border-right-color: rgba(255, 255, 255, .08);
}

.ai-error-box {
    color: #ffd3d3;
    background: rgba(248, 113, 113, .10);
    border-color: rgba(248, 113, 113, .22);
}

.ai-retry-btn,
.ai-copy-btn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #d9d4ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.ai-reply-copy,
.ai-time {
    color: rgba(214, 228, 255, .48);
}

.ai-reply-copy:hover,
.ai-retry-btn:hover {
    color: #fff;
}

.ai-source-panel{margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.09)}
.ai-source-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.ai-source-panel>header span{color:#a5f3fc;font-size:11px;font-weight:800;letter-spacing:.08em}
.ai-source-panel>header em{color:rgba(214,228,255,.44);font-size:9px;font-style:normal}
.ai-source-panel>div{display:grid;gap:7px}
.ai-source-card{width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) 18px;align-items:start;gap:9px;padding:11px;border:1px solid rgba(255,255,255,.09);border-radius:13px;color:#eef6ff;text-align:left;background:rgba(7,16,34,.26);cursor:pointer;transition:.18s}
.ai-source-card:hover{background:rgba(255,255,255,.08);border-color:rgba(103,232,249,.2);transform:translateY(-1px)}
.ai-source-card>b{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;color:#67e8f9;background:rgba(34,211,238,.1);font-size:10px}
.ai-source-card>span{min-width:0}.ai-source-card strong{display:block!important;color:#f8fbff!important;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ai-source-card small{display:block;margin-top:2px;color:rgba(196,181,253,.75);font-size:9px}.ai-source-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:6px 0 0;color:rgba(214,228,255,.62);font-size:10px;line-height:1.55}.ai-source-card>i{color:rgba(103,232,249,.62);font-size:13px;font-style:normal}
.ai-web-source-panel>header span{color:#fde68a}
.ai-web-source-panel .ai-source-card:hover{border-color:rgba(253,230,138,.25)}
.ai-web-source-panel .ai-source-card>b{color:#fde68a;background:rgba(245,158,11,.12)}
.ai-web-source-panel .ai-source-card>i{color:rgba(253,230,138,.72)}

.ai-typing {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.ai-typing span {
    background: #b9adff;
}

.ai-reasoning {
    background: rgba(168, 85, 247, .10);
    border-color: rgba(184, 151, 255, .18);
}

.ai-reasoning-head {
    color: #d9d4ff;
}

.ai-reasoning-head span:last-child,
.ai-reasoning-body {
    color: rgba(226, 232, 255, .70);
}

.ai-stream-caret {
    background: #c9c2ff;
}

#aiChatInput {
    color: #f8fbff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

#aiChatInput:focus {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .20);
}

#aiChatInput::placeholder {
    color: rgba(214, 228, 255, .42);
}

.ai-upload-btn {
    color: rgba(214, 228, 255, .56);
}

.ai-upload-btn:hover {
    color: #fff;
}

.ai-model-switcher {
    color: rgba(238, 246, 255, .78);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .10);
}

.ai-model-switcher:hover {
    color: #fff;
    background: rgba(255, 255, 255, .13);
}

.ai-model-dropdown {
    background: linear-gradient(180deg, rgba(49, 55, 80, .92), rgba(25, 31, 53, .94));
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 18px 40px rgba(7, 12, 28, .38), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.ai-model-option {
    color: rgba(238, 246, 255, .78);
}

.ai-model-option:hover {
    background: rgba(255, 255, 255, .10);
}

.ai-model-option.active {
    color: #d9d4ff;
}

.ai-send-btn {
    background: linear-gradient(135deg, rgba(99, 102, 241, .94), rgba(168, 85, 247, .88));
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 12px 24px rgba(99, 102, 241, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.ai-upload-chip {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 24px rgba(7, 12, 28, .14);
}

#aiThinkLabel {
    color: #c9c2ff;
}

@media (max-width: 640px) {
    .music-modal,
    #aiChatBox {
        border-radius: 22px;
    }

    .music-card-head {
        padding: 14px 16px 12px;
    }

    .ai-source-panel>header{align-items:flex-start;flex-direction:column;gap:3px}
    .ai-source-card{grid-template-columns:26px minmax(0,1fr) 14px;padding:10px 9px}
}