/* --- 基础重置 --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    display: flex;
    height: 100dvh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #ffffff;
    color: #333333;
    overflow: hidden;
}

/* --- 侧边栏 --- */
#sidebar {
    width: 260px;
    background-color: #f7f7f8;
    display: flex;
    flex-direction: column;
    padding: 10px;
    flex-shrink: 0;
    border-right: 1px solid #e5e5e5;
}

#status-bar {
    padding: 15px 10px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 15px;
}
#current-time { font-size: 2rem; font-weight: bold; color: #000; }
#current-date { font-size: 0.9rem; color: #666; margin-top: 5px; }

#new-plan-btn {
    display: flex; align-items: center; gap: 10px; padding: 12px;
    border: 1px solid #e5e5e5; border-radius: 6px;
    background: #ffffff; color: #333; cursor: pointer;
    font-size: 0.9rem; transition: all 0.2s; text-align: left;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
#new-plan-btn:hover { background-color: #f0f0f0; border-color: #d9d9d9; }
#new-plan-btn span { font-size: 1.2rem; line-height: 1; color: #10a37f; }

#history-label {
    font-size: 0.75rem; font-weight: bold; color: #888; text-transform: uppercase;
    margin-top: 20px; margin-bottom: 10px; padding-left: 10px;
}
#history-list {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
}
#history-list::-webkit-scrollbar { display: none; }

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    color: #333;
    font-size: 0.9rem;
    transition: background 0.2s;
    overflow: hidden;
}

.history-item:hover { background-color: #ececf1; }
.history-item.active { background-color: #e5e5e5; font-weight: 500; }

/* 左侧标题文字 (为了配合 flex 使用) */
.history-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1; 
    margin-right: 5px;
}

.history-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* 通用按钮样式 (默认隐藏) */
.icon-btn {
    opacity: 0;
    font-size: 1.1rem;
    padding: 2px 5px;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
    color: #999;
}

/* 悬停或选中时显示按钮 */
.history-item:hover .icon-btn,
.history-item.active .icon-btn {
    opacity: 1 !important; /* 手机上选中也能看到 */
}

/* 编辑按钮 (铅笔) */
.edit-btn:hover {
    background-color: #e0f2fe; /* 浅蓝背景 */
    color: #0284c7; /* 蓝色图标 */
}

/* 删除按钮 (叉号) */
.delete-btn:hover {
    background-color: #fee2e2;
    color: #dc2626;
}

/* 移动端适配：确保按钮够大 */
@media (max-width: 768px) {
    .icon-btn {
        padding: 5px 8px; /* 加大触控区 */
        font-size: 1.2rem;
    }
}

/* 新增：删除按钮 (默认隐藏) */
.delete-btn {
    opacity: 0; /* 平时看不见 */
    color: #999;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

/* 悬停时显示删除按钮 */
.history-item:hover .delete-btn {
    opacity: 1;
}

/* 删除按钮悬停变红 */
.delete-btn:hover {
    background-color: #fee2e2;
    color: #dc2626;
}

#user-profile {
    border-top: 1px solid #e5e5e5; padding: 15px 10px 5px;
    display: flex; align-items: center; gap: 10px; color: #333;
}
.avatar { 
    width: 30px; height: 30px; background: #10a37f; color: white;
    border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: bold; 
}

/* --- 右侧主区域 (布局核心修改) --- */
#main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 100dvh;
    overflow: hidden;
}

/* ★★★ 空状态模式 (让输入框居中) ★★★ */
#main-content.empty-mode {
    justify-content: center;
    align-items: center;
}
/* 隐藏日程表、聊天记录、以及中间的控制条 */
#main-content.empty-mode #schedule-container,
#main-content.empty-mode #chat-log,
#main-content.empty-mode #toggle-bar { 
    display: none !important;
}
/* 在空状态下，输入框样式微调 */
#main-content.empty-mode #compass-input-area {
    width: 100%;
    max-width: 600px;
    border: none;
    padding-bottom: 20vh; /* 视觉上往上提一点，大概在黄金分割点 */
}

#main-content.empty-mode .input-wrapper {
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* 加大阴影，更像一个主要入口 */
    border: 1px solid #e5e5e5;
    padding: 8px 15px;
    border-radius: 12px; /* 更圆润 */
}

/* 空状态下的输入框文字变大一点 */
#main-content.empty-mode #chat-input {
    font-size: 1.1rem;
}

/* --- A. 楼上：日程表格 --- */
#schedule-container {
    /* ★ 修改：使用 flex-grow: 1 自动占满剩余空间 */
    flex-grow: 1; 
    flex-shrink: 1; /* 允许被压缩 */
    flex-basis: 0;  /* 基础高度为0，完全靠剩余空间撑开 */
    
    position: relative;
    background-color: #f7f7f8;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e5e5e5;
    transition: all 0.3s ease; /* 这里的动画可能跟 JS 拖拽有微小冲突，如果卡顿可以把这个删掉 */
    min-height: 0;
}
#schedule-header {
    padding: 15px 20px; background: #fff;
    border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}

/* --- 标题编辑样式 --- */
#plan-title {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 5px;
    font-weight: 600;
    
    cursor: pointer;
    transition: color 0.2s;
    position: relative;
    display: inline-block; /* 为了让伪元素跟随文字 */
    padding-right: 20px; /* 给铅笔留位置 */
}

#plan-title:hover {
    color: #10a37f; /* 悬停变绿 */
}

/* 悬停时显示小铅笔 */
#plan-title::after {
    content: '✎';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.2s;
}

#plan-title:hover::after {
    opacity: 1; /* 悬停显示 */
}

.day-progress { height: 4px; width: 100%; background: #eee; border-radius: 2px; overflow: hidden; }
#day-progress-bar { height: 100%; width: 0%; background: #10a37f; transition: width 0.5s; }

#schedule-list {
    flex: 1; 
    overflow-y: auto; /* 允许内部滚动 */
    padding: 20px;
    /* ★ 改动：给积木列表加一点间距 */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 时间积木 */
.time-block {
    /* ★★★ 核心修复：必须是 Flex 布局才能横向排列 ★★★ */
    display: flex; 
    align-items: center; 
    justify-content: space-between; /* 左右撑开 */
    gap: 10px; /* 元素间距 */
    
    /* 视觉样式 */
    background: #fff;
    border: 1px solid #e5e5e5;
    border-left: 4px solid #10a37f; /* 绿色左边条 */
    padding: 12px 15px; /* 舒服的内边距 */
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    transition: all 0.2s;
    width: 100%; /* 占满容器宽度 */
    
    /* 交互属性 */
    position: relative;
    cursor: pointer;
    user-select: none; /* 禁止选中文本 (为了长按拖拽) */
    -webkit-user-select: none;
    touch-action: pan-y; /* 允许垂直滚动，禁止水平手势干扰 */
}

/* 悬停效果 */
.time-block:hover {
    transform: translateX(2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* 完成状态 */
.time-block.completed {
    opacity: 0.6;
    background: #f9f9f9;
    border-left-color: #ccc;
    text-decoration: line-through;
}/* --- 拖拽反馈样式 (升级版) --- */

/* 1. 长按/选中瞬间 (Chosen) */
.sortable-chosen {
    background-color: #f0fdf4 !important; /* 极淡的绿色背景 */
}

/* 2. 拖拽中 (Drag) - 指尖拿着的那个 */
.sortable-drag {
    opacity: 1 !important;
    background: #fff !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important; /* 更大的阴影 */
    transform: scale(1.05) rotate(2deg); /* 稍微倾斜 */
    z-index: 9999;
    cursor: grabbing;
}

/* 3. 占位符 (Ghost) - 变成一条插入线 */
.sortable-ghost {
    /* 强制把高度压扁，变成一条线 */
    height: 4px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 10px 0 !important; /* 上下留点空隙 */
    
    /* 样式：绿色实线或虚线 */
    background-color: #10a37f !important;
    border: none !important;
    border-radius: 2px !important;
    
    /* 隐藏内容 */
    color: transparent !important;
    overflow: hidden !important;
    opacity: 1 !important;
    box-shadow: 0 0 5px rgba(16, 163, 127, 0.5) !important;
}

/* 彻底隐藏 Ghost 里的子元素 */
.sortable-ghost * {
    display: none !important;
}

/* 拖拽手柄 (Handle) - 放在左侧 */
.drag-handle {
    width: 20px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 1.2rem;
    opacity: 0; /* 默认隐藏，显得干净 */
    transition: opacity 0.2s;
}
.time-block:hover .drag-handle {
    opacity: 1; /* 悬停显示 */
}

/* 给内容留点位置，别被手柄挡住 */
.block-time {
    margin-left: 15px; 
}

.block-time { font-family: 'Courier New', monospace; font-weight: bold; color: #555; width: 110px; flex-shrink: 0; }
.block-task { flex: 1; color: #333; font-weight: 500; }
.block-check { width: 18px; height: 18px; cursor: pointer; accent-color: #10a37f; margin-left: 10px; }

/* --- ★ 控制条 --- */
#toggle-bar {
    height: 24px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0; /* 不会被压缩 */
    z-index: 10;
    cursor: pointer; /* 默认手型 */
}
/* 当展开时，把手显示为调整大小 */
#main-content:not(.chat-collapsed) #toggle-bar {
    cursor: row-resize;
}
#toggle-bar:hover {
    background: #f0f0f0;
}
#toggle-icon {
    transition: transform 0.3s;
    color: #999;
}

/* --- B. 楼下：聊天日志 --- */
#chat-log {
    /* ★ 修改：初始高度 250px，且禁止 flex 自动调整 */
    height: 150px; 
    flex: none; /* ★★★ 关键修复：禁止 flex 伸缩，完全听 JS 的话 ★★★ */
    
    overflow-y: auto;
    padding: 20px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* 这里的 transition 可以保留，但 JS 拖拽开始时记得把它设为 none */
    transition: height 0.3s ease, padding 0.3s ease;
}

/* --- 状态类：折叠模式 (Collapsed) --- */
#main-content.chat-collapsed #chat-log {
    height: 0 !important; /* 强制覆盖 JS 的内联样式 */
    padding: 0 20px;
    border: none;
}

/* 箭头旋转：当折叠时，箭头指向上 */
#main-content.chat-collapsed #toggle-icon {
    transform: rotate(180deg); /* 翻转箭头 */
}

.chat-msg { max-width: 90%; padding: 10px 15px; border-radius: 8px; line-height: 1.5; font-size: 0.95rem; }
.chat-user { align-self: flex-end; background: #f4f4f4; color: #333; border-bottom-right-radius: 0; }
.chat-ai { align-self: flex-start; background: #ebfcf6; color: #106a4e; border-bottom-left-radius: 0; }

/* --- C. 底部输入框 --- */
#compass-input-area {
    flex-shrink: 0;
    padding: 20px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    z-index: 11;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.input-wrapper {
    display: flex; align-items: center; position: relative;
    border: 1px solid #e5e5e5; border-radius: 6px; padding: 5px;
    background: #fff;
}
#chat-input {
    flex: 1; background: transparent; border: none;
    color: #333; font-size: 1rem; padding: 10px; outline: none;
}
#send-btn {
    background: transparent; border: none; cursor: pointer;
    padding: 8px; display: flex; align-items: center; color: #10a37f;
}
#send-btn:disabled { color: #ccc; cursor: not-allowed; }

/* Modal 保持不变 */
.hidden { display: none !important; }
.modal {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(255,255,255,0.8); 
    backdrop-filter: blur(5px); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    
    /* ★★★ 修复：从 1000 改为 2000 (必须要比 sidebar 的 1001 大) ★★★ */
    z-index: 2000; 
}
.modal-content { background: #ffffff; border: 1px solid #e5e5e5; padding: 40px; border-radius: 12px; width: 400px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); color: #333; }
.modal-content h2 { margin-bottom: 10px; }
.modal-content input[type="date"] { background: #f7f7f8; border: 1px solid #e5e5e5; color: #333; padding: 12px; border-radius: 6px; width: 100%; margin: 10px 0 30px 0; font-size: 1.1rem; outline: none; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
button { cursor: pointer; border-radius: 6px; padding: 10px 20px; font-weight: 600; border: none; transition: all 0.2s; }
.btn-primary { background: #10a37f; color: white; }
.btn-secondary { background: #f0f0f0; color: #333; }
.btn-danger { background: #fee2e2; color: #dc2626; }
.btn-text { background: transparent; color: #666; }
.warning-text { color: #dc2626; margin-bottom: 20px; }

/* 积木块悬停效果 */
.time-block {
    position: relative; /* 为了定位编辑按钮 */
    cursor: pointer;
}

/* 编辑提示图标 (默认隐藏，悬停显示) */
.time-block::after {
    content: '✎';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #ccc;
    opacity: 0;
    transition: opacity 0.2s;
}
.time-block:hover::after {
    opacity: 1;
}

/* 避免勾选框触发编辑弹窗 */
.block-check {
    position: relative;
    z-index: 2; 
}


/* --- ★★★ 移动端适配 (Mobile Responsive) ★★★ --- */
@media (max-width: 768px) {
    
    /* 1. 侧边栏：变成抽屉模式 */
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        z-index: 1001; /* 比主内容高 */
        transform: translateX(-100%); /* 默认藏在屏幕左边 */
        transition: transform 0.3s ease;
        width: 80%; /* 手机上占 80% 宽度 */
        max-width: 300px;
        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    }

    /* 调整标题大小，防止被挤压 */
    #plan-title {
        font-size: 1rem !important;
        padding-left: 35px; /* 让标题往右移，别被按钮挡住 */
    }
    
    /* 激活状态：滑出来 */
    #sidebar.mobile-open {
        transform: translateX(0);
    }

    /* 2. 主内容区：占满全屏 */
    #main-content {
        width: 100%;
        flex: 1;
    }

    /* 3. 弹窗修复：防止撑破屏幕 */
    .modal-content {
        width: 90%; /* 手机上占 90% 宽 */
        max-width: 400px; /* 最大不超过 400 */
        padding: 25px; /* 内边距稍微小一点 */
    }

    /* 4. 显示汉堡菜单按钮 (默认是隐藏的) */
    #mobile-menu-btn {
        display: block !important;
        position: absolute; /* 悬浮在左上角 */
        top: 10px;
        left: 10px;
        z-index: 100; /* 保证在最上层 */
        background: rgba(255,255,255,0.8); /*稍微加点背景，防止文字重叠*/
        border-radius: 4px;
    }

    /* ★★★ 手机上强制显示删除按钮 ★★★ */
    .delete-btn {
        opacity: 0; 
        color: #ccc;
        padding: 5px 10px;
        font-size: 1.5rem;
    }

    /* ★★★ 只有被选中的项 (.active) 才显示删除按钮 ★★★ */
    .history-item.active .delete-btn {
        opacity: 1 !important;
    }
    
    /* 稍微调整一下列表项布局 */
    .history-item {
        padding-right: 5px; 
    }
}

/* --- 遮罩层 (点击侧边栏外部关闭) --- */
#mobile-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: none; /* 默认隐藏 */
    opacity: 0;
    transition: opacity 0.3s;
}
#mobile-overlay.visible {
    display: block;
    opacity: 1;
}

/* --- 手势导航提示条 --- */
#schedule-list {
    position: relative;
    z-index: 10; /* ★ 关键：放在顶层 */
    background: transparent; /* 透明，以便透视到底下的背景 */
    /* 保持原有的 flex/padding 设置 */
    display: flex;
    flex-direction: column;
    padding: 0; /* 把 padding 移给 content */
    overflow-y: auto;
    overscroll-behavior-y: contain; /* ★ 关键：防止拉动时整个页面跟着动 */
}

#schedule-content {
    background-color: #f7f7f8; /* ★ 必须有背景色，且与父容器一致 */
    min-height: 100%; /* 保证占满 */
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 101%; /* ★ 关键：强制让它总是能滚动一点点，保证触发布局 */
    transition: transform 0.2s ease-out; /* 让回弹有动画 */
}

/* 2. 提示箭头：绝对定位，默认隐藏 */
.pull-loader {
    position: absolute;
    left: 0; 
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #999;
    font-size: 0.9rem;
    font-weight: bold;
    z-index: 0; /* ★ 关键：放在底层 */
    opacity: 0; /* 默认完全透明，防止隐约看到 */
    transition: opacity 0.2s;
}

/* 激活状态：显示出来 */
.pull-loader.visible {
    opacity: 1;
}

.pull-loader.active {
    color: #10a37f;
}
.pull-loader.active .loader-icon {
    transform: rotate(180deg);
    transition: transform 0.3s;
}

/* --- 撤销按钮样式 --- */
.undo-container {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0,0,0,0.1);
    text-align: right;
}

.undo-btn {
    background: transparent;
    border: 1px solid #ccc;
    color: #666;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.undo-btn:hover {
    background: #fff;
    border-color: #f90; /* 橙色警告色，暗示回退 */
    color: #f90;
}

/* 已撤销状态 */
.undo-btn.undone {
    border-color: transparent;
    color: #aaa;
    cursor: default;
    background: transparent;
}

/* --- 专注倒计时样式 --- */
#focus-timer-area {
    background: #f7f7f8;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.timer-display {
    font-size: 3rem; /* 做得很大 */
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.timer-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btn-timer {
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    transition: transform 0.1s;
}
.btn-timer:active { transform: scale(0.95); }

.btn-timer.start { background: #333; color: #fff; }
.btn-timer.pause { background: #eab308; color: #fff; } /* 黄色 */
.btn-timer.resume { background: #10a37f; color: #fff; } /* 绿色 */
.btn-timer.finish { background: #10a37f; color: #fff; }

/* 计时状态下的颜色变化 */
.timer-running .timer-display { color: #10a37f; }
.timer-paused .timer-display { color: #eab308; opacity: 0.7; }


/* --- 备注输入框样式 --- */
.notes-toggle-btn {
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
    user-select: none;
}
.notes-toggle-btn:hover {
    color: #10a37f;
}

.task-notes {
    width: 100%;
    height: 80px;
    margin-top: 8px;
    padding: 12px;
    background-color: #f7f7f8; /* 灰色底 */
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
    color: #333;
    resize: vertical; /* 允许拉伸高度 */
    outline: none;
    transition: all 0.2s;
}

.task-notes:focus {
    background-color: #fff; /* 聚焦变白 */
    border-color: #10a37f;
    box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.1);
}

/* 隐藏状态 */
.task-notes.hidden {
    display: none;
}

/* --- 桌面端悬停编辑按钮 (跟随文本版) --- */
.edit-trigger {
    /* ★ 核心修改：去掉 absolute，改回默认流式 */
    position: relative; 
    transform: none;
    top: auto;
    right: auto;
    
    /* 外观微调 */
    width: 24px; 
    height: 24px;
    margin-left: 8px; /* 离文字远一点 */
    background: #f0fdf4; /* 淡淡的绿背景 */
    border: 1px solid #dcfce7;
    border-radius: 4px; /* 方圆形更像按钮 */
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #16a34a;
    
    opacity: 0; /* 默认隐藏 */
    transition: all 0.2s;
    cursor: pointer;
    flex-shrink: 0; /* ★ 关键：防止被长文字挤扁 */
}

.edit-trigger:hover {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
    transform: scale(1.1);
}

/* 鼠标悬停在整行时显示 */
.time-block:hover .edit-trigger {
    opacity: 1;
}

/* 移除之前的 padding-right Hack */
.time-block {
    padding-right: 15px; 
}

/* 移动端依然隐藏 */
@media (max-width: 768px) {
    .edit-trigger {
        display: none !important;
    }
}