/* ===== 星宿食堂 V0.1.9D 混合UI样式 ===== */

/* 两栏布局：侧边栏 + 主内容区（主内容区含聊天流与底部输入栏） */
.app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width, 240px) 1fr;
    grid-template-rows: 1fr auto;
    height: 100vh;
    overflow: hidden;
}
.app-layout #sidebar { grid-row: 1 / 3; overflow-y: auto; }
.app-layout .chat-stream { grid-row: 1; overflow-y: auto; padding: var(--gap-md); }
.app-layout .chat-bottom-bar {
    grid-row: 2;
    display: flex; align-items: center; gap: var(--gap-sm);
    padding: var(--gap-sm) var(--gap-md); background: var(--surface, #fff);
    border-top: 1px solid var(--border, #e6eee8);
}

/* 底部输入栏 */
.chat-tools { display: flex; gap: var(--gap-xs); }
.chat-tool-btn {
    width: 32px; height: 32px; border: none; border-radius: var(--radius-sm);
    background: transparent; cursor: pointer; color: var(--river, #4A7C59);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition-fast);
}
.chat-tool-btn:hover { background: var(--surface-hover, #f0f9f4); }
.chat-tool-btn.active { background: var(--surface-active, #e8f5f0); }
.chat-tool-btn svg { width: 18px; height: 18px; }
#chatInput {
    flex: 1; border: 1px solid var(--border, #e6eee8); border-radius: var(--radius-md);
    padding: var(--gap-sm) var(--gap-md); font-size: var(--font-size-base); resize: none; max-height: 120px;
    outline: none; transition: border-color var(--transition-fast);
    font-family: inherit;
}
#chatInput:focus { border-color: var(--river, #4A7C59); }
.send-btn {
    width: 36px; height: 36px; border: none; border-radius: 50%;
    background: var(--river, #4A7C59); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity var(--transition-fast);
}
.send-btn:hover { opacity: .85; }
.send-btn svg { width: 18px; height: 18px; }

/* 底部抽屉面板 */
.chat-drawer {
    position: fixed; bottom: var(--header-height, 56px); left: var(--sidebar-width, 240px); right: 0;
    max-height: 400px; background: var(--surface, #fff); border-top: 1px solid var(--border, #e6eee8);
    box-shadow: var(--shadow-top, 0 -4px 12px rgba(0,0,0,.08));
    transform: translateY(100%); transition: transform var(--transition-slow);
    z-index: var(--z-drawer, 100); overflow-y: auto;
}
.chat-drawer.open { transform: translateY(0); }
.drawer-content { padding: var(--gap-md); }
.drawer-content h4 { margin: 0 0 var(--gap-sm); font-size: var(--font-size-base); color: var(--deep, #2d5a3d); }

/* 语音/图片浮层 */
.tool-overlay {
    position: fixed; top: 0; left: var(--sidebar-width, 240px); right: 0; bottom: 0;
    background: rgba(0,0,0,.3); z-index: var(--z-overlay, 200);
    display: flex; align-items: center; justify-content: center;
}
.tool-overlay-content {
    background: var(--surface, #fff); border-radius: var(--radius-lg); padding: var(--gap-lg);
    min-width: 300px; max-width: 500px; text-align: center;
}
.voice-recording {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--surface-hover, #f0f9f4); display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--gap-md); animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(74,124,89,.3); }
    70% { box-shadow: 0 0 0 20px rgba(74,124,89,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,124,89,0); }
}

/* 思考过程 */
.reasoning-wrapper { margin-bottom: var(--gap-sm); border-radius: var(--radius-sm); background: var(--surface-soft, #f8faf8); overflow: hidden; }
.reasoning-header {
    display: flex; align-items: center; gap: var(--gap-sm); padding: var(--gap-sm) var(--gap-md);
    cursor: pointer; font-size: var(--font-size-sm); color: var(--text-muted, #888);
    user-select: none;
}
.reasoning-arrow { transition: transform var(--transition-fast); flex-shrink: 0; }
.reasoning-arrow.collapsed { transform: rotate(-90deg); }
.reasoning-label { font-weight: 600; color: var(--deep, #2d5a3d); }
.reasoning-body { padding: var(--gap-sm) var(--gap-md); font-size: var(--font-size-sm); color: var(--text-secondary, #666); }
.reasoning-body.collapsed { display: none; }
.reasoning-step { padding: var(--gap-xs) 0; border-bottom: 1px dashed var(--border, #e6eee8); }
.reasoning-step:last-child { border-bottom: none; }
.reasoning-step-name { font-weight: 600; color: var(--deep, #2d5a3d); }
.reasoning-step-detail { color: var(--text-muted, #888); margin-top: 2px; }
.reasoning-status { margin-left: auto; font-size: var(--font-size-xs); color: var(--text-faint, #aaa); }
.citations { margin-top: var(--gap-xs); padding: var(--gap-xs) var(--gap-sm); background: var(--surface-hover, #f0f9f4); border-radius: var(--radius-sm); }
.citations small { color: var(--river, #4A7C59); }

/* 侧边栏树形折叠 */
.sidebar-core-section { padding: 8px 0; border-bottom: 1px solid #e6eee8; }
.sidebar-core-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px;
    cursor: pointer; font-size: 13px; color: var(--deep, #2d5a3d);
    transition: background .2s;
}
.sidebar-core-item:hover { background: #f0f9f4; }
.sidebar-core-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-tree-section { padding: 4px 0; border-bottom: 1px solid #e6eee8; }
.sidebar-tree-label {
    display: flex; align-items: center; gap: 6px; padding: 8px 16px;
    cursor: pointer; font-size: 12px; color: #888; font-weight: 600;
    user-select: none;
}
.sidebar-tree-arrow { display: inline-block; transition: transform .2s; font-size: 10px; }
.sidebar-tree-arrow.collapsed { transform: rotate(-90deg); }
.sidebar-tree-children { overflow: hidden; }
.sidebar-tree-children.collapsed { display: none; }
.sidebar-tree-item {
    display: flex; align-items: center; gap: 6px; padding: 6px 16px 6px 28px;
    cursor: pointer; font-size: 12px; color: var(--deep, #2d5a3d);
    transition: background .2s;
}
.sidebar-tree-item:hover { background: #f0f9f4; }
.sidebar-tree-sub-item {
    padding: 4px 16px 4px 40px; font-size: 11px; color: #888;
    cursor: pointer; transition: color .2s;
}
.sidebar-tree-sub-item:hover { color: var(--river, #4A7C59); }
.sidebar-cross-link {
    font-size: 10px; color: var(--river, #4A7C59); cursor: pointer;
    text-decoration: underline; margin-left: 4px;
}
.sidebar-settings-section { padding: 4px 0; }

/* 思考过程设置 */
.reasoning-settings {
    display: flex; gap: 8px; padding: 8px 12px; font-size: 11px;
}
.reasoning-settings label {
    display: flex; align-items: center; gap: 4px; cursor: pointer;
    color: #888;
}
.reasoning-settings input[type="radio"] {
    margin: 0; accent-color: var(--river, #4A7C59);
}

/* 暗色模式适配 */
[data-mode="dark"] .chat-bottom-bar { background: #1a1a2e; border-top-color: #2a2a4e; }
[data-mode="dark"] .chat-drawer { background: #1a1a2e; border-top-color: #2a2a4e; }
[data-mode="dark"] .reasoning-wrapper { background: #16213e; }
[data-mode="dark"] .reasoning-step { border-bottom-color: #2a2a4e; }
[data-mode="dark"] .chat-tool-btn:hover { background: #1a3a2e; }
[data-mode="dark"] .chat-tool-btn.active { background: #2a4a3e; }
[data-mode="dark"] #chatInput { background: #16213e; border-color: #2a2a4e; color: #e0e0e0; }
[data-mode="dark"] .sidebar-core-item:hover { background: #1a3a2e; }
[data-mode="dark"] .sidebar-tree-item:hover { background: #1a3a2e; }