﻿/* 来源：GlassMusicPlayer layout/aside.vue + index.vue · 呼吸感排版 */

[data-theme="glass"] .station-frame {
 padding: 24px 48px 28px;
}

[data-theme="glass"] .app {
 grid-template-columns: 256px minmax(0, 1fr) 300px;
}

[data-theme="glass"] .sidebar-inner {
 padding: 16px;
 gap: 0;
}

[data-theme="glass"] .brand {
 padding: 4px 4px 20px;
 margin-bottom: 4px;
 border-bottom: 1px solid var(--glass-border-subtle);
}

[data-theme="glass"] .brand-row {
 display: flex;
 align-items: center;
 gap: 10px;
}

[data-theme="glass"] .brand-icon {
 color: var(--accent);
 flex-shrink: 0;
 filter: drop-shadow(0 0 12px rgba(124, 92, 224, 0.35));
}

[data-theme="glass"] .brand h1 {
 font-size: 1.05rem;
 font-weight: 700;
 letter-spacing: 0.02em;
}

[data-theme="glass"] .brand p {
 font-size: 0.72rem;
 margin-top: 4px;
 opacity: 0.72;
}

.nav-wrap {
 position: relative;
 flex: 1;
 min-height: 0;
 overflow-y: auto;
}

[data-theme="glass"] .nav-wrap {
 padding: 4px 0;
}

.nav-indicator {
 position: absolute;
 left: 8px;
 right: 8px;
 top: 0;
 height: 36px;
 border-radius: 8px;
 background: rgba(255, 255, 255, 0.08);
 pointer-events: none;
 opacity: 0;
 z-index: 0;
 transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), height 0.2s ease, opacity 0.2s ease;
}

[data-theme="glass"] .nav-indicator {
 background: rgba(255, 255, 255, 0.1);
}

.nav-section {
 margin-bottom: 18px;
}

.nav-section-title {
 margin: 0 0 8px 10px;
 font-size: 0.68rem;
 font-weight: 600;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--muted);
}

.nav-list {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 4px;
}

[data-theme="glass"] .nav-section {
 margin-bottom: 22px;
}

[data-theme="glass"] .nav-section-title {
 margin: 0 0 10px 8px;
 font-size: 0.68rem;
 font-weight: 600;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--glass-text-secondary);
}

[data-theme="glass"] .nav-list {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 4px;
}

[data-theme="glass"] .nav-item {
 position: relative;
 z-index: 1;
 width: 100%;
 padding: 8px 10px;
 border-radius: 8px;
 gap: 10px;
 font-size: 0.88rem;
 font-weight: 450;
 color: color-mix(in srgb, var(--glass-text-primary) 68%, transparent);
 background: transparent;
 border: none;
 box-shadow: none;
 transition: color 0.2s ease, transform 0.2s ease;
}

[data-theme="glass"] .nav-item iconify-icon {
 flex-shrink: 0;
 opacity: 0.82;
 transition: transform 0.2s ease, opacity 0.2s ease;
}

[data-theme="glass"] .nav-item:hover {
 color: var(--glass-text-primary);
 background: rgba(255, 255, 255, 0.04);
}

[data-theme="glass"] .nav-item.active {
 color: var(--glass-text-primary);
 font-weight: 500;
 background: transparent;
 box-shadow: none !important;
}

[data-theme="glass"] .nav-item.active iconify-icon {
 opacity: 1;
 transform: scale(1.08);
}

[data-theme="glass"] .content {
 padding: 28px 32px 32px;
}

[data-theme="glass"] .section-head {
 margin-bottom: 26px;
}

[data-theme="glass"] .section-head h2 {
 font-size: 1.5rem;
 font-weight: 700;
 letter-spacing: -0.01em;
}

[data-theme="glass"] .section-head p {
 font-size: 0.86rem;
 line-height: 1.6;
 margin-top: 8px;
}

[data-theme="glass"] .kb-grid,
[data-theme="glass"] #company-grid,
[data-theme="glass"] #app-grid,
[data-theme="glass"] #career-grid,
[data-theme="glass"] #pm-grid {
 gap: 20px;
 grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
}

[data-theme="glass"] .kb-card,
[data-theme="glass"] .info-card {
 padding: 18px 20px;
}

[data-theme="glass"] .search-wrap::before {
 content: none;
}

[data-theme="glass"] .search-box {
 display: flex;
 flex-wrap: nowrap;
 align-items: center;
 gap: 8px;
 padding: 8px 12px;
 border-radius: 10px;
 border: 1px solid transparent;
 background: var(--glass-interactive-bg);
 transition: border-color 0.25s ease, box-shadow 0.25s ease, min-width 0.25s ease;
 min-width: 220px;
}

[data-theme="glass"] .search-box input {
 flex: 1;
 min-width: 0;
 width: auto;
 border: none !important;
 background: transparent !important;
 box-shadow: none !important;
}

[data-theme="glass"] .search-box.focused {
 border-color: var(--glass-border-default);
 box-shadow: var(--glass-shadow-inset), 0 0 0 3px rgba(255, 255, 255, 0.08);
 min-width: 280px;
}

[data-theme="glass"] .search-box iconify-icon {
 flex-shrink: 0;
 opacity: 0.45;
 transition: opacity 0.2s;
}

[data-theme="glass"] .search-box.focused iconify-icon,
[data-theme="glass"] .search-box input:not(:placeholder-shown) ~ iconify-icon {
 opacity: 0.7;
}

[data-theme="glass"] .search-wrap input {
 border: none;
 background: transparent;
 padding: 0;
 border-radius: 0;
 font-size: 0.82rem;
 font-weight: 450;
}

[data-theme="glass"] .search-wrap input::placeholder {
 color: color-mix(in srgb, var(--glass-text-primary) 42%, transparent);
}

[data-theme="glass"] .pill {
 padding: 6px 12px;
 border-radius: 10px;
 font-size: 0.76rem;
 background: var(--glass-interactive-bg);
 border: 1px solid var(--glass-border-subtle);
 box-shadow: var(--glass-shadow-inset);
}

[data-theme="glass"] .sidebar-footer-dock,
[data-theme="glass"] .personalize-block {
 margin-top: 12px;
}

[data-theme="glass"] .sidebar-dock-panel,
[data-theme="glass"] .sidebar-drop-panel {
 background: var(--dock-panel-bg, var(--panel));
 border-color: var(--line);
}

[data-theme="glass"] .sidebar-dock-wrap .sidebar-drop-head {
 background: var(--dock-panel-head-bg, var(--panel2));
}

[data-theme="glass"] .sidebar-dock-wrap .sidebar-drop-body {
 background: var(--dock-panel-bg, var(--panel));
}

[data-theme="glass"] .token-usage-list {
 background: var(--panel2);
}

[data-theme="glass"] .personalize-panel .sidebar-drop-body {
 background: var(--panel);
}

[data-theme="glass"] .theme-panel > summary iconify-icon,
[data-theme="glass"] .font-panel > summary {
 display: inline-flex;
 align-items: center;
 gap: 6px;
}

[data-theme="glass"] .chat-head h3 {
 display: flex;
 align-items: center;
 gap: 8px;
 font-weight: 600;
}

[data-theme="glass"] .icon-btn {
 border-radius: 10px;
 border: 1px solid var(--glass-border-subtle);
 background: var(--glass-interactive-bg);
 box-shadow: var(--glass-shadow-inset);
}

/* 留白皮肤也受益的通用排版 */
.brand-row {
 display: flex;
 align-items: center;
 gap: 10px;
}

.nav-item {
 display: flex;
 align-items: center;
}

.nav-item iconify-icon {
 flex-shrink: 0;
}

.search-box {
 display: flex;
 align-items: center;
 gap: 8px;
 width: 100%;
}

.search-box iconify-icon {
 flex-shrink: 0;
 opacity: 0.5;
}

/* ── 顶栏 glass-nav 浮动条（复刻 header.vue） ── */
[data-theme="glass"] .topbar.glass-nav {
 flex-shrink: 0;
 margin: 14px 18px 8px;
 padding: 12px 16px;
 border-bottom: none;
 border-radius: 12px;
 gap: 16px;
}

[data-theme="glass"] .main .content {
 padding-top: 12px;
}

[data-theme="glass"] .search-box:has(input:not(:placeholder-shown)) {
 border-color: var(--glass-border-default);
}

[data-theme="glass"] .search-clear {
 opacity: 0.35;
}

[data-theme="glass"] .search-box.focused .search-clear,
[data-theme="glass"] .search-box:has(input:not(:placeholder-shown)) .search-clear {
 opacity: 0.55;
}

[data-theme="glass"] #search-results {
 background: rgba(255, 255, 255, 0.97);
 border-color: var(--glass-border-default);
 backdrop-filter: blur(var(--glass-dropdown-blur)) saturate(1.5);
 -webkit-backdrop-filter: blur(var(--glass-dropdown-blur)) saturate(1.5);
 box-shadow: var(--glass-shadow-lg);
}

[data-theme="glass"] .search-hit {
 border-radius: 8px;
 transition: background 0.2s ease;
}

[data-theme="glass"] .search-hit:hover {
 background: rgba(255, 255, 255, 0.06);
}

/* ── 卡片 hover 微动效（复刻 song.vue / search.vue） ── */
[data-theme="glass"] .kb-card,
[data-theme="glass"] .info-card,
[data-theme="glass"] .practice-box,
[data-theme="glass"] .news-block,
[data-theme="glass"] .note-card {
 transition:
 transform 0.28s var(--glass-ease, ease),
 box-shadow 0.28s var(--glass-ease, ease),
 border-color 0.28s ease,
 background 0.28s ease;
}

[data-theme="glass"] .kb-card:hover {
 transform: translateY(-3px);
 border-color: var(--glass-border-default);
 background: color-mix(in srgb, var(--glass-bg-card) 90%, white);
 box-shadow:
 var(--glass-shadow-md),
 var(--glass-shadow-inset),
 0 10px 28px rgba(15, 23, 42, 0.06);
}

[data-theme="glass"] .info-card:hover,
[data-theme="glass"] .news-block:hover,
[data-theme="glass"] .note-card:hover {
 transform: translateY(-2px);
 background: color-mix(in srgb, var(--glass-bg-card) 92%, white);
 box-shadow: var(--glass-shadow-md), var(--glass-shadow-inset);
}

[data-theme="glass"] .quiz-opt {
 transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

[data-theme="glass"] .quiz-opt:hover {
 transform: translateY(-1px);
 background: rgba(255, 255, 255, 0.04);
}

/* ── 主按钮 glass-button ── */
[data-theme="glass"] .btn.primary.glass-button {
 background: var(--glass-interactive-bg);
 color: var(--glass-text-primary);
 border: 1px solid var(--glass-border-default);
 border-radius: 12px;
 box-shadow: var(--glass-shadow-sm), var(--glass-shadow-inset);
 font-weight: 500;
}

[data-theme="glass"] .btn.primary.glass-button:hover {
 background: var(--glass-interactive-hover);
 transform: translateY(-1px);
 box-shadow: var(--glass-shadow-md), var(--glass-shadow-inset);
}

[data-theme="glass"] .selection-popover.glass-button {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 14px;
 border-radius: 10px;
 color: var(--glass-text-primary);
}

[data-theme="glass"] .icon-btn:hover {
 background: var(--glass-interactive-hover-muted);
 transform: translateY(-1px);
}

[data-theme="glass"] .chat-mode-btn {
 border-radius: 8px;
 transition: background 0.2s ease, color 0.2s ease;
}

[data-theme="glass"] .chat-mode-btn.active {
 background: rgba(255, 255, 255, 0.1);
 color: var(--glass-text-primary);
}

[data-theme="glass"] .agent-avatar {
 background: var(--glass-bg-card);
 border-color: var(--glass-border-default);
 box-shadow: var(--glass-shadow-md), 0 0 32px rgba(124, 92, 224, 0.12);
}

[data-theme="glass"] .phone-avatar {
 background: var(--glass-interactive-bg);
 border-color: var(--glass-border-subtle);
}

/* ── 聊天底栏（复刻 footer.vue 浮动条感） ── */
[data-theme="glass"] .chat-foot:not(.chat-compose) {
 margin: 6px 10px 10px;
 padding: 12px;
 border: 1px solid var(--glass-border-default);
 border-radius: 12px;
 background: var(--glass-bg-subtle);
 box-shadow: var(--glass-shadow-sm), var(--glass-shadow-inset);
}

[data-theme="glass"] .chat-foot.chat-compose {
 margin: 0;
 padding: 6px 12px 10px;
 border: none;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
}

[data-theme="glass"] .chat-compose-bar {
 border-color: var(--glass-border-default);
 background: var(--glass-interactive-bg);
 box-shadow: var(--glass-shadow-sm), var(--glass-shadow-inset);
}

[data-theme="glass"] #chat-input {
 background: transparent;
 border: none;
 border-radius: 0;
 box-shadow: none;
}

[data-theme="glass"] #chat-input:focus {
 border: none;
 box-shadow: none;
}

[data-theme="glass"] .chat-bubble {
 border-radius: 14px;
 line-height: 1.55;
}

[data-theme="glass"] .chat-bubble.agent {
 background: rgba(255, 255, 255, 0.06);
 border-color: var(--glass-border-subtle);
 border-radius: 14px 14px 14px 4px;
}

[data-theme="glass"] .chat-bubble.user {
 background: color-mix(in srgb, var(--accent) 18%, var(--glass-bg-card));
 border-color: color-mix(in srgb, var(--accent) 35%, transparent);
 border-radius: 14px 14px 4px 14px;
}

/* ── 行业标签页 ── */
[data-theme="glass"] .ind-tab {
 padding: 8px 14px;
 border-radius: 10px;
 background: var(--glass-interactive-bg);
 color: color-mix(in srgb, var(--glass-text-primary) 65%, transparent);
 font-size: 0.82rem;
 font-weight: 450;
 transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

[data-theme="glass"] .ind-tab:hover {
 background: rgba(255, 255, 255, 0.06);
 color: var(--glass-text-primary);
}

[data-theme="glass"] .ind-tab.active {
 background: rgba(255, 255, 255, 0.12);
 color: var(--glass-text-primary);
 font-weight: 500;
}

/* ── 阅读浮层关闭钮 ── */
[data-theme="glass"] .read-session-close,
[data-theme="glass"] .read-group-close {
 display: grid;
 place-items: center;
 width: 28px;
 height: 28px;
 border-radius: 8px;
 background: var(--glass-interactive-bg);
 border: 1px solid var(--glass-border-subtle);
 color: var(--glass-text-secondary);
 transition: background 0.2s, color 0.2s;
}

[data-theme="glass"] .read-session-close:hover,
[data-theme="glass"] .read-group-close:hover {
 background: var(--glass-interactive-hover-muted);
 color: var(--glass-text-primary);
}

[data-theme="glass"] .kb-card-head {
 background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent);
 border-bottom-color: var(--glass-border-subtle);
}

[data-theme="glass"] .toast {
 border-radius: 12px;
 padding: 12px 22px;
}
