/* ========== Gemini 风格 1:1 ========== */
:root {
    --g-bg: #000000;
    --g-sidebar: #1f2024;
    --g-panel: #252525;
    --g-input: #2d2d2d;
    --g-border: #3c4043;
    --g-text: #CCCCCC;
    --g-text-secondary: #9aa0a6;
    --g-content-text: #e8eaed;
    --g-composer-text: #B8B8B8;
    --g-blue: #8ab4f8;
    --g-blue-bg: #1a73e8;
    --g-orange: #f9ab00;
    --radius: 24px;
    --radius-sm: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--g-bg);
    color: var(--g-text);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

.app-container.gemini-style {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-container.gemini-style .background-layer { display: none; }

/* ---------- 顶栏 ---------- */
/* 顶栏仅覆盖主内容列（图2：不贯穿全屏） */
.content-header.global-header {
    background: var(--g-bg);
    /* 顶栏与消息区同色纯黑，无下划线 */
}

.global-header {
    display: flex;
    align-items: center;
    height: 56px;
    min-height: 56px;
    padding: 6px 16px 0;
}

.header-icon-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--g-text);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-icon-btn:hover {
    background: var(--g-panel);
}

.header-left-zone {
    flex-shrink: 0;
    margin-right: 16px;
}

.site-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--g-text);
}

.header-main-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.conversation-title {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--g-text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-name {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--g-text);
}

.header-actions-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-more-wrap {
    position: relative;
}

#topbar-more-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    min-width: 160px;
    padding: 6px 0;
    background: var(--g-panel);
    border: 1px solid var(--g-border);
    border-radius: var(--radius-sm);
    z-index: 100;
}

#topbar-more-dropdown .dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    color: var(--g-text);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

#topbar-more-dropdown .dropdown-item:hover {
    background: rgba(255,255,255,0.08);
}

#topbar-more-dropdown.hidden {
    display: none !important;
}

.conversation-dropdown-floating {
    min-width: 140px;
    padding: 6px 0;
    background: var(--g-panel);
    border: 1px solid var(--g-border);
    border-radius: var(--radius-sm);
}

.conversation-dropdown-floating .dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    color: var(--g-text);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.conversation-dropdown-floating .dropdown-item:hover {
    background: rgba(255,255,255,0.08);
}

.header-share-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--g-text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 4px;
}

.header-share-btn:hover {
    color: var(--g-text);
    background: var(--g-panel);
}

.header-right-zone {
    display: flex;
    align-items: center;
    gap: 12px;
}

.upgrade-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background: #134a62;
    color: #C5EEFF;
    font-size: 0.875rem;
    cursor: pointer;
}

.upgrade-btn:hover {
    filter: brightness(1.1);
}

.upgrade-icon {
    font-size: 0.9rem;
    opacity: 0.9;
}

.ds-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.upgrade-btn .ds-logo-icon {
    width: 18px;
    height: 18px;
}

.upgrade-btn .ds-logo-icon svg {
    width: 100%;
    height: 100%;
}

.header-avatar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #E9722C;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#user-avatar-initial {
    font-size: 80%;
    font-weight: 500;
}

/* 未登录时顶栏：关于DYTools、联系我们（样式参考图） */
.header-guest-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 20px;
    background: var(--g-sidebar);
    color: var(--g-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.2s, color 0.2s;
}
.header-link-btn:hover {
    background: var(--g-panel);
    color: var(--g-text);
}

.avatar-wrap { position: relative; }

#account-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 220px;
    padding: 12px;
    background: var(--g-panel);
    border: 1px solid var(--g-border);
    border-radius: var(--radius-sm);
    z-index: 100;
}

.account-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--g-border);
}

.account-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--g-blue-bg);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.account-email {
    font-size: 0.875rem;
    color: var(--g-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-membership {
    font-size: 0.75rem;
    color: var(--g-text-secondary);
}
.account-ds-points {
    font-size: 0.75rem;
    color: var(--g-blue);
    margin-top: 2px;
}

.account-link {
    display: block;
    padding: 8px 0;
    color: var(--g-blue);
    font-size: 0.875rem;
    text-decoration: none;
}

.account-link:hover { text-decoration: underline; }

#account-logout-btn {
    margin-top: 4px;
    padding: 8px 0;
    width: 100%;
    border: none;
    background: none;
    color: var(--g-text-secondary);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

#account-logout-btn:hover { color: var(--g-text); }

/* ---------- 主体布局 ---------- */
.main-shell {
    display: flex;
    flex: 1;
    min-height: 0;
}

.main-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 侧栏折叠/展开：阻尼感缓动，时长略长更顺滑 */
.sidebar {
    width: 280px;
    min-width: 280px;
    background: var(--g-sidebar);
    border-right: 1px solid var(--g-border);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    --sidebar-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sidebar-duration: 0.35s;
    transition: width var(--sidebar-duration) var(--sidebar-ease), min-width var(--sidebar-duration) var(--sidebar-ease);
}

/* 图2：顶栏无横线，折叠在左、搜索在右；整体下移一点 */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
    flex-shrink: 0;
    min-height: 48px;
    box-sizing: border-box;
}

.sidebar-header-spacer {
    flex: 1;
    min-width: 0;
}

.sidebar-header-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border: none;
    background: transparent;
    color: var(--g-text);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1), min-width 0.35s cubic-bezier(0.22, 1, 0.36, 1), margin 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-header-btn:hover {
    background: var(--g-panel);
}

/* 搜索：简约白色线稿图标 */
.sidebar-search-btn {
    color: var(--g-text);
}

.sidebar-header-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
}

#sidebar-toggle-btn .sidebar-header-icon-svg {
    width: 1.3rem;
    height: 1.3rem;
}

.sidebar-header-icon-svg svg {
    width: 100%;
    height: 100%;
}

/* 折叠时隐藏搜索；折叠按钮与下方图标统一左对齐（16px），与展开时同一竖线 */
.sidebar-collapsed #sidebar-search-btn {
    width: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.sidebar-collapsed .sidebar-header-spacer {
    display: none;
}

.sidebar-collapsed .sidebar-header {
    justify-content: flex-start;
    padding: 14px 16px 10px;
}

.sidebar-collapsed .sidebar-header-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    min-height: 48px;
    box-sizing: border-box;
    border: none;
    background: none;
    color: #D0D0D0;
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: gap 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-community-chevron {
    font-size: 1.14rem;
    color: var(--g-text-secondary);
    margin-left: auto;
    width: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 社区按钮上下的柔和分隔线过渡效果 */
.sidebar-community {
    position: relative;
    margin-top: 12px;
}

.sidebar-community::before,
.sidebar-community::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.16), transparent);
}

.sidebar-community::before {
    top: 0;
}

.sidebar-community::after {
    bottom: 0;
}

/* DS模版社区：图标列与「发起新对话」「我的收藏」对齐（40px 图标列 + 文字） */
.sidebar-community.sidebar-item {
    padding: 10px 16px;
}
.sidebar-community-ds-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    min-width: 40px;
    color: #E0E0E0;
    box-sizing: border-box;
}
.sidebar-community-ds-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}
.sidebar-community .sidebar-item-text {
    color: #E0E0E0;
    font-weight: 500;
}

/* 右侧图标列统一宽度，保证搜索图标、社区箭头和对话设置/置顶图标对齐 */
.conversation-item-actions {
    opacity: 0;
    display: flex;
    gap: 4px;
    width: 40px;
    min-width: 40px;
    justify-content: flex-end;
}

/* 展开/折叠统一：图标列 40px 与顶栏折叠按钮同宽，左缘 16px 对齐；图标与文字水平对齐 */
.sidebar-item-icon {
    font-size: 1.1rem;
    opacity: 0.9;
    flex-shrink: 0;
    width: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 0;
}

.sidebar-item-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    color: currentColor;
}

.sidebar-item-icon-svg svg {
    width: 100%;
    height: 100%;
}

/* 发起新对话、我的收藏：字号与对话一致，字重 500 */
.sidebar-new-chat .sidebar-item-text,
.sidebar-item[data-page="content"] .sidebar-item-text {
    font-size: 0.90rem;
    font-weight: 500;
}

.sidebar-new-chat,
.sidebar-item[data-page="content"] {
    padding: 7px 16px;
    min-height: 40px;
}


/* 与侧栏折叠同节奏：阻尼感缓动；文字与图标垂直居中 */
.sidebar-item-text {
    min-width: 0;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    line-height: 1.2;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-new-chat .sidebar-item-text,
.sidebar-item[data-page="content"] .sidebar-item-text {
    line-height: 1;
}

.sidebar-category,
.sidebar-category-title {
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-category {
    overflow: hidden;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), padding 0.35s cubic-bezier(0.22, 1, 0.36, 1), margin 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.conversation-item-title {
    max-width: 100%;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 与图2一致：折叠按钮与下方按钮的垂直间距、图标与文字的水平间距 */
/* 对标图2：发起新对话与我的内容间距约一行，不偏大 */
.sidebar-new-chat { margin-top: 5px; margin-bottom: 10px; }
.sidebar-item-my-favorites { margin-top: 0; }

/* “对话”：右移约 2 个中文字符，与 DS模版社区 对齐 */
.sidebar-category {
    display: flex;
    align-items: center;
    padding: 8px 16px 4px calc(16px + 1em);
    margin-top: 8px;
    max-height: 56px;
    box-sizing: border-box;
}

.sidebar-category-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #D0D0D0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    padding: 0;
    text-align: left;
    white-space: nowrap;
    flex-shrink: 0;
    overflow: visible;
    box-sizing: border-box;
}

.conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conversation-item {
    padding: 10px 16px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--g-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    border-radius: 0 20px 20px 0;
}

.conversation-item:hover {
    background: var(--g-panel);
}

.conversation-item.active {
    background: var(--g-panel);
}

.conversation-item-title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item-actions {
    opacity: 0;
    display: flex;
    gap: 4px;
}

.conversation-item:hover .conversation-item-actions { opacity: 1; }

.conversation-item-setting {
    padding: 4px;
    border: none;
    background: none;
    color: var(--g-text-secondary);
    cursor: pointer;
    border-radius: 50%;
}

.conversation-item-setting:hover { color: var(--g-text); }

.sidebar-footer {
    padding: 10px 0;
    border-top: none;
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.sidebar-footer .sidebar-item {
    font-size: 0.8125rem;
    font-weight: 400;
}

.hidden-help { display: none; }

.search-panel {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--g-border);
    border-radius: var(--radius-sm);
    background: var(--g-input);
    color: var(--g-text);
    font-size: 0.875rem;
}

.search-input::placeholder { color: var(--g-text-secondary); }

.search-results {
    max-height: 240px;
    overflow-y: auto;
}

.search-results .conversation-item {
    border-radius: var(--radius-sm);
}

/* ---------- 主内容区：消息区纯黑 #000000 对标图中网站 ---------- */
.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--g-bg);
}

.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 24px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.chat-message-list {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 未对话时：消息列表不占高度，欢迎+输入区整体居中 */
.chat-area:not(.has-messages) .chat-message-list {
    flex: 0 0 0;
    overflow: hidden;
    padding-bottom: 0;
}

.chat-center-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
}

.chat-area:not(.has-messages) .chat-center-group {
    flex: 1;
    justify-content: center;
    min-height: 0;
}

.chat-area:not(.has-messages) .chat-center-group > *:first-child {
    margin-top: auto;
}
.chat-area:not(.has-messages) .chat-center-group > *:last-child {
    margin-bottom: auto;
}

.chat-area.has-messages .chat-center-group {
    flex: 0 0 auto;
}

.welcome-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 24px 24px;
    min-height: 200px;
}

.chat-center-group .welcome-block {
    flex: none;
    min-height: 0;
    justify-content: flex-start;
    padding: 24px 24px 0;
    margin-bottom: 0;
}

.welcome-greeting {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--g-text-secondary);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    line-height: 1.6;
}

.welcome-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 10px;
    height: 2em;
    width: 2em;
}

.welcome-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.welcome-block .ds-logo-icon {
    width: 28px;
    height: 28px;
}

.welcome-block .ds-logo-icon svg {
    width: 100%;
    height: 100%;
}

.welcome-prompt {
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--g-text);
    line-height: 1.3;
    margin-bottom: 8px;
}

.chat-area.has-messages .welcome-block { display: none; }

.composer-wrapper {
    padding-top: 0;
    width: 100%;
}

.composer-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.attachment-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--g-panel);
    border: 1px solid var(--g-border);
    max-width: 280px;
    min-width: 160px;
}

.attachment-card-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--g-input);
    flex-shrink: 0;
}

.attachment-card-thumb.fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--g-text-secondary);
}

.attachment-card-body {
    flex: 1;
    min-width: 0;
}

.attachment-card-name {
    font-size: 0.875rem;
    color: var(--g-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-card-meta {
    font-size: 0.75rem;
    color: var(--g-text-secondary);
    margin-top: 2px;
}

.attachment-remove-btn {
    border: none;
    background: none;
    color: var(--g-text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.attachment-remove-btn:hover {
    color: var(--g-text);
}

/* 拓展功能按钮 + 下拉 */
.expand-fn-wrap {
    position: relative;
}

.expand-fn-btn {
    width: 36px;
    height: 36px;
    font-size: 1.32rem;
    transition: transform 0.2s ease;
}
.expand-fn-btn[aria-expanded="true"] {
    transform: rotate(45deg);
}

.expand-fn-dropdown {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    min-width: 200px;
    padding: 6px 0;
    background: var(--g-panel);
    border: 1px solid var(--g-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.expand-fn-dropdown.hidden {
    display: none !important;
}

.expand-fn-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    color: var(--g-text);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.expand-fn-item:hover {
    background: var(--g-input);
}

.expand-fn-icon {
    font-size: 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* 拓展下拉：图标缩小 30%，与文字水平对齐 */
.expand-fn-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    color: var(--g-text-secondary);
    flex-shrink: 0;
}

.expand-fn-item:hover .expand-fn-icon-svg {
    color: var(--g-text);
}

.expand-fn-icon-svg svg {
    width: 100%;
    height: 100%;
}

/* 对标图2：输入区四边与可输入区域间距一致；边框同 Gemini */
.composer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 14px 14px 14px;
    background: var(--g-sidebar);
    border: none;
    border-radius: var(--radius);
    min-height: 88px;
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

.composer-input-wrap {
    min-height: 28px;
    flex-shrink: 0;
}

/* 输入文字首字中心对齐拓展按钮中心、末字中心对齐发送按钮中心（两按钮均 36px，中心距边缘 18px） */
.composer-input-wrap .composer-input {
    width: 100%;
    display: block;
    padding: 0 calc(18px - 0.5em);
    min-height: 28px;
    box-sizing: border-box;
}

.composer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    min-height: 36px;
}

.composer-left,
.composer-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.composer-tools-label {
    font-size: 0.875rem;
    color: var(--g-text-secondary);
}

.composer-icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--g-composer-text);
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.composer-icon-btn:hover {
    background: rgba(255,255,255,0.08);
}

.composer-input {
    border: none;
    background: none;
    color: var(--g-composer-text);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    resize: none;
    min-width: 0;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.02em;
}

.composer-input::placeholder {
    color: var(--g-composer-text);
    font-size: 0.9375rem;
    font-weight: 400;
    opacity: 0.9;
}

.composer-input:focus { outline: none; }

.composer-mode-btn {
    padding: 6px 12px;
    border: none;
    background: none;
    color: var(--g-composer-text);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 400;
    cursor: pointer;
    border-radius: 4px;
}

.composer-mode-btn:hover { color: var(--g-text); }

/* 对标图1：浅色圆角矩形 + 深色三角；尺寸缩小 20% */
.composer-send-btn {
    width: 29px;
    height: 29px;
    min-width: 29px;
    border: none;
    border-radius: 8px;
    background: #e0e0e0;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    position: relative;
}

.composer-send-btn #send-btn-icon {
    color: #1a1a1a;
}

/* 未输入：灰色不可点击 */
.composer-send-btn:disabled {
    background: var(--g-input);
    color: var(--g-text-secondary);
    cursor: default;
    opacity: 0.9;
}

.composer-send-btn:disabled #send-btn-icon {
    color: var(--g-text-secondary);
}

/* 输入后：可点击，悬停略亮 */
.composer-send-btn:not(:disabled):hover {
    background: #ebebeb;
    filter: none;
}

/* 发送中 / AI 思考中：显示加载图标 */
.composer-send-btn.is-loading {
    cursor: default;
    pointer-events: none;
}

.composer-send-btn.is-loading .send-btn-spinner {
    display: block !important;
}

.composer-send-btn.is-loading #send-btn-icon {
    display: none;
}

.send-btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--g-border);
    border-top-color: var(--g-text);
    border-radius: 50%;
    animation: send-btn-spin 0.7s linear infinite;
}

.composer-send-btn:disabled .send-btn-spinner {
    border-color: var(--g-border);
    border-top-color: var(--g-text-secondary);
}

@keyframes send-btn-spin {
    to { transform: rotate(360deg); }
}

.composer-options {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding: 0 4px;
}

.composer-options-inline {
    margin-top: 0;
    padding: 0;
    display: flex;
    gap: 8px;
}

.pill-toggle {
    padding: 6px 12px;
    border: none;
    background: rgba(255, 255, 255, 0.03);
    color: var(--g-composer-text);
    font-size: 0.875rem;
    font-weight: 400;
    cursor: pointer;
    border-radius: 16px;
    line-height: 1.25;
}

.pill-toggle:hover { color: var(--g-text); background: rgba(255, 255, 255, 0.06); }

.pill-toggle[data-active="true"] {
    background: rgba(138, 180, 248, 0.14);
    color: var(--g-blue);
}
.pill-toggle[data-active="true"]:hover {
    background: rgba(138, 180, 248, 0.20);
}

.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 29px;
    justify-content: center;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--g-text);
    font-size: 0.8125rem;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s ease;
}

.chip .chip-logo.ds-logo-icon {
    width: 18px;
    height: 18px;
    color: var(--g-text-secondary);
}

.chip .chip-logo.ds-logo-icon svg {
    width: 100%;
    height: 100%;
}

.chip:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ---------- 对话气泡 ---------- */
.chat-message {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.chat-message.user { flex-direction: row-reverse; }

.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--g-panel);
    color: var(--g-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.chat-avatar.ai {
    background: var(--g-blue);
    color: #1a1a1a;
}

.chat-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--g-content-text);
}

.chat-bubble.user {
    background: var(--g-panel);
    border: 1px solid var(--g-border);
}

.chat-bubble.ai {
    background: var(--g-panel);
    border: 1px solid var(--g-border);
}

.chat-bubble-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 0.75rem;
    color: var(--g-text-secondary);
}

.chat-bubble-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
}

.chat-bubble:hover .chat-bubble-actions { opacity: 1; }

.chat-footer-btn {
    padding: 4px 8px;
    border: none;
    background: none;
    color: var(--g-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 4px;
}

.chat-footer-btn:hover { color: var(--g-text); }

.chat-bubble-footer {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.chat-thinking-wrap { margin-bottom: 8px; }

.show-thinking-btn {
    padding: 4px 10px;
    border: 1px solid var(--g-border);
    background: none;
    color: var(--g-blue);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 16px;
}

.show-thinking-btn:hover { background: var(--g-panel); }

.thinking-content {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
    background: var(--g-input);
    border: 1px dashed var(--g-border);
    color: var(--g-text-secondary);
    font-size: 0.8rem;
}

.thinking-content.hidden { display: none; }

.chat-footer-btn[data-feedback="like"] { color: var(--g-blue); }
.chat-footer-btn[data-feedback="dislike"] { color: #f28b82; }

/* ---------- 弹窗 ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow: auto;
    background: var(--g-panel);
    border: 1px solid var(--g-border);
    border-radius: var(--radius-sm);
    padding: 24px;
}

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

.modal-header h2 {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--g-text);
}

.icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--g-text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover { color: var(--g-text); background: var(--g-input); }

.modal-body { margin-bottom: 16px; }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.primary-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background: var(--g-blue-bg);
    color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
}

.primary-btn:hover { filter: brightness(1.1); }

.secondary-btn {
    padding: 10px 20px;
    border: 1px solid var(--g-border);
    border-radius: 4px;
    background: none;
    color: var(--g-text);
    font-size: 0.875rem;
    cursor: pointer;
}

.secondary-btn:hover { background: var(--g-input); }

/* ---------- 升级会员弹窗（参考 Google One 卡片布局） ---------- */
.upgrade-modal-content {
    max-width: 720px;
}
.upgrade-modal-header {
    margin-bottom: 8px;
}
.upgrade-modal-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--g-text);
    line-height: 1.35;
    padding-right: 12px;
}
.upgrade-modal-body {
    margin-bottom: 0;
}
.upgrade-modal-intro {
    font-size: 0.9rem;
    color: var(--g-text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}
.upgrade-plan-cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.upgrade-plan-card {
    flex: 1;
    min-width: 260px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--g-border);
    background: var(--g-input);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.upgrade-plan-card-pro {
    border-color: var(--g-blue);
    background: rgba(138, 180, 248, 0.08);
}
.upgrade-plan-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--g-text);
    margin: 0;
}
.upgrade-plan-desc {
    font-size: 0.875rem;
    color: var(--g-text-secondary);
    line-height: 1.45;
    margin: 0;
}
.upgrade-plan-price {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--g-text);
}
.upgrade-plan-ds {
    font-size: 0.85rem;
    color: var(--g-blue);
    font-weight: 500;
}
.upgrade-plan-card-max {
    border-color: var(--g-blue);
    background: rgba(138, 180, 248, 0.08);
}
.upgrade-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 auto 0;
    font-size: 0.85rem;
    color: var(--g-text-secondary);
    line-height: 1.6;
}
.upgrade-plan-features li {
    padding-left: 1.2em;
    position: relative;
}
.upgrade-plan-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--g-blue);
    font-weight: 600;
}
.upgrade-plan-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    margin-top: 8px;
}
.upgrade-plan-btn-current {
    background: var(--g-border);
    color: var(--g-text-secondary);
    cursor: default;
}
.upgrade-plan-btn-current:disabled {
    opacity: 0.9;
}
.upgrade-plan-btn-primary {
    background: var(--g-blue-bg);
    color: #fff;
}
.upgrade-plan-btn-primary:hover {
    filter: brightness(1.1);
}

.template-quick-section { margin-bottom: 16px; }

.template-quick-label {
    font-size: 0.8rem;
    color: var(--g-text-secondary);
    margin-bottom: 8px;
}

.template-quick-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.template-quick-btn {
    padding: 8px 14px;
    border: 1px solid var(--g-border);
    border-radius: 16px;
    background: var(--g-input);
    color: var(--g-text);
    font-size: 0.85rem;
    cursor: pointer;
}

.template-quick-btn:hover { background: var(--g-panel); }

.template-group { margin-bottom: 16px; }

.template-group label {
    display: block;
    font-size: 0.875rem;
    color: var(--g-text-secondary);
    margin-bottom: 6px;
}

.template-input {
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    border: 1px solid var(--g-border);
    border-radius: 8px;
    background: var(--g-input);
    color: var(--g-text);
    font-size: 0.875rem;
    resize: vertical;
}

.template-input::placeholder { color: var(--g-text-secondary); }

.auth-form label {
    display: block;
    margin-bottom: 12px;
    color: var(--g-text-secondary);
    font-size: 0.875rem;
}

.auth-form input {
    width: 100%;
    padding: 10px 12px;
    margin-top: 4px;
    border: 1px solid var(--g-border);
    border-radius: 8px;
    background: var(--g-input);
    color: var(--g-text);
}

.auth-toggle { margin: 10px 0; }

.link-btn {
    border: none;
    background: none;
    color: var(--g-blue);
    cursor: pointer;
    font-size: 0.875rem;
}

.settings-section { margin-bottom: 20px; }

.settings-section-title {
    font-size: 0.9rem;
    color: var(--g-text-secondary);
    margin-bottom: 8px;
}

.theme-options { display: flex; flex-wrap: wrap; gap: 16px; }

.theme-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--g-text-secondary);
    font-size: 0.875rem;
}

.settings-link {
    display: block;
    color: var(--g-blue);
    font-size: 0.875rem;
    margin-bottom: 8px;
    text-decoration: none;
}

.settings-link:hover { text-decoration: underline; }

.files-modal-list { display: flex; flex-direction: column; gap: 8px; }

.files-modal-empty { color: var(--g-text-secondary); font-size: 0.9rem; }

.files-modal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--g-input);
}

.files-modal-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    color: var(--g-text);
}

.files-modal-size { font-size: 0.8rem; color: var(--g-text-secondary); }

.files-modal-remove {
    border: none;
    background: none;
    color: var(--g-text-secondary);
    cursor: pointer;
    padding: 4px;
}

.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    background: var(--g-panel);
    border: 1px solid var(--g-border);
    border-radius: 8px;
    color: var(--g-text);
    font-size: 0.875rem;
    z-index: 1100;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.success { border-color: #81c995; }
.toast.error { border-color: #f28b82; }

/* ---------- 侧栏折叠 ---------- */
.sidebar-collapsed {
    width: 72px;
    min-width: 72px;
}

/* 折叠时文字淡出并收窄占位，图标保持不动 */
.sidebar-collapsed .sidebar-item-text {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    visibility: hidden;
}

.sidebar-collapsed .sidebar-category {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    overflow: hidden;
    visibility: hidden;
}

.sidebar-collapsed .conversation-item .conversation-item-title {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    visibility: hidden;
}

/* 折叠后：与顶栏折叠按钮同一 40px 列，左缘 16px */
.sidebar-collapsed .sidebar-item {
    justify-content: flex-start;
    padding: 10px 16px;
    gap: 0;
}

.sidebar-collapsed .conversation-item {
    justify-content: flex-start;
    padding: 10px 16px;
}

.sidebar-collapsed .conversation-item .conversation-item-actions {
    margin-left: 0;
}

/* 折叠时去掉底部分隔线，与顶栏一致 */
.sidebar-collapsed .sidebar-footer {
    border-top: none;
}

/* 折叠时隐藏 DS社区 的上下线条与右侧箭头 */
.sidebar-collapsed .sidebar-community::before,
.sidebar-collapsed .sidebar-community::after {
    display: none;
}
.sidebar-collapsed .sidebar-community-chevron {
    display: none;
}


@media (max-width: 768px) {
    .sidebar { width: 72px; min-width: 72px; }
    .sidebar-item-text,
    .sidebar-category-title,
    .conversation-item-title { display: none; }
}