:root {
    --primary: #5c7cfa;
    --header-bg: #4056b5;
    --body-bg: #eef2ff;
    --text: #1f2937;
    --border: #e5e7eb;
    --shared-color: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #10b981;
}
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--body-bg); color: var(--text); }

* { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }
.full-screen { width: 100vw; height: 100vh; display: flex; flex-direction: column; }

/* 按钮通用样式 */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all 0.2s; gap: 6px; font-weight: 500; user-select: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--primary); color: white; border-color: transparent; }
.btn.primary:hover { background: #4b6cb7; }
.btn.secondary { background: #ffffff; color: #374151; border: 1px solid #d1d5db; }
.btn.secondary:hover { background: #f9fafb; border-color: #9ca3af; color: #111; }
.btn.glass { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: white; backdrop-filter: blur(4px); }
.btn.glass:hover { background: rgba(255,255,255,0.3); }
.btn.danger { background: var(--danger); color: white; }
.btn.danger:hover { background: #dc2626; }
.btn.warning { background: var(--warning); color: white; }
.btn.warning:hover { background: #d97706; }
.btn.success { background: var(--success); color: white; }
.btn.success:hover { background: #059669; }
.btn-xs { padding: 5px 10px; border-radius: 6px; font-size: 12px; line-height: 1.2; height: 28px; }
.btn-xs i { font-size: 12px; }
.full-width { width: 100%; margin-top: 15px; padding: 12px; font-size: 16px; }
input, textarea { width: 100%; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; background: #f9fafb; color: #333; }
input:focus, textarea:focus { border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(92, 124, 250, 0.15); }
header { flex: 0 0 64px; background: var(--header-bg); border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 500; color: white; box-shadow: 0 2px 15px rgba(0,0,0,0.08); transition: background 0.3s; position: relative; }
.h-left, .h-right { display: flex; align-items: center; gap: 15px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: white; letter-spacing: 0.5px; white-space: nowrap; }
.h-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 450px; z-index: 1; transition: width 0.3s; display: flex; align-items: center; gap: 10px; }
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.6); font-size: 14px; pointer-events: none; }
#search { flex: 1; padding: 8px 10px 8px 35px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: white; border-radius: 50px; backdrop-filter: blur(5px); transition: all 0.3s; }
#search::placeholder { color: rgba(255,255,255,0.6); }

/* AI Toggle Styles */
.ai-toggle-wrapper { display: flex; align-items: center; gap: 5px; margin-left: 5px; }
.ai-label-off, .ai-label-on { font-size: 12px; font-weight: bold; opacity: 0.8; }
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.3); -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: var(--primary); border: 1px solid white; }
input:focus + .slider { box-shadow: 0 0 1px var(--primary); }
input:checked + .slider:before { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

.filters { display: flex; background: rgba(0,0,0,0.2); padding: 3px; border-radius: 8px; }
.f-btn { border: none; background: transparent; padding: 5px 12px; font-size: 12px; color: rgba(255,255,255,0.7); cursor: pointer; border-radius: 6px; white-space: nowrap; }
.f-btn.active { background: white; color: var(--header-bg); font-weight: 600; }
.stats-box { display: flex; align-items: center; gap: 12px; font-size: 12px; color: rgba(255,255,255,0.8); white-space: nowrap; }
.stats-box b { margin-left: 3px; font-size: 14px; color: white !important; }
.v-line { width: 1px; height: 20px; background: rgba(255,255,255,0.2); margin-right: 10px; }

@media (max-width: 850px) { .stats-box { display: none; } .h-center { width: 300px; } }
@media (max-width: 600px) {
    header { padding: 0 10px; gap: 10px; }
    .brand { display: none; }
    .h-center { position: relative; transform: none; left: auto; top: auto; flex: 1; width: auto; margin: 0; display: flex; align-items: center; gap: 5px; transition: all 0.3s; }
    .h-center:focus-within { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; background: var(--header-bg); z-index: 999; padding: 0 10px; }
    .h-center .search-icon { display: none; }
    .h-center:focus-within #search { padding: 10px 15px; }
    .h-center #search { flex: 1; padding: 6px 10px; font-size: 12px; }
    .btn-new span { display: none; }
    .h-left, .h-right { gap: 8px; }
    .f-btn { padding: 5px 8px; font-size: 12px; }
    .ai-label-off, .ai-label-on { font-size: 10px; }
    .switch { width: 34px; height: 18px; }
    .slider:before { height: 14px; width: 14px; }
    input:checked + .slider:before { transform: translateX(16px); }
}

#canvas-area { flex: 1; position: relative; overflow-y: auto; overflow-x: hidden; background-image: radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1px); background-size: 24px 24px; }
#canvas-content { position: relative; width: 100%; min-height: 100%; transform: translateZ(0); }
.note { position: absolute; background: white; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(0,0,0,0.04); }
.note.animate { transition: top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.note:hover { box-shadow: 0 20px 40px -5px rgba(0,0,0,0.15); z-index: 10; border-color: rgba(0,0,0,0.05); transform: translateY(-2px); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.note.is-dragging { opacity: 0.95; box-shadow: 0 25px 50px rgba(0,0,0,0.25); z-index: 9999 !important; transform: scale(1.02); transition: none !important; }
.note.done { opacity: 0.6; filter: grayscale(100%); z-index: 1; }
.note.done .n-head span { text-decoration: line-through; opacity: 0.7; }
.n-head { padding: 16px 16px 6px 16px; font-weight: 700; display: flex; justify-content: space-between; cursor: grab; user-select: none; color: #1f2937; }
.head-right-controls { display: flex; align-items: center; gap: 8px; }
.pin-btn { color: #d1d5db; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-size: 14px; transform: rotate(45deg); }
.pin-btn:hover { color: var(--primary); transform: scale(1.2) rotate(45deg); }
.pin-btn.active { color: var(--primary); transform: rotate(0deg) scale(1.1); filter: drop-shadow(0 2px 2px rgba(92, 124, 250, 0.2)); }
.check { width: 22px; height: 22px; border: 2px solid rgba(0,0,0,0.2); border-radius: 50%; cursor: pointer; transition: all 0.2s; }
.check:hover { border-color: var(--primary); }
.note.done .check { background: var(--primary); border-color: var(--primary); position: relative; }
.note.done .check::after { content: '✓'; position: absolute; left: 5px; top: -1px; color: white; font-size: 14px; }
.n-body { flex: 1; padding: 6px 16px; font-size: 14px; color: #374151; overflow-y: auto; line-height: 1.6; }
.n-body h1, .n-body h2, .n-body h3, .n-body h4 { margin-top: 10px; margin-bottom: 5px; font-weight: 600; line-height: 1.25; }
.n-body h1 { font-size: 1.5em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; }
.n-body h2 { font-size: 1.3em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; }
.n-body p { margin-bottom: 10px; }
.n-body ul, .n-body ol { padding-left: 20px; margin-bottom: 10px; }
.n-body blockquote { border-left: 4px solid #dfe2e5; color: #6a737d; padding-left: 10px; margin: 10px 0; background: rgba(0,0,0,0.02); }
.n-body code { background: rgba(27,31,35,0.05); padding: 0.2em 0.4em; border-radius: 3px; font-family: monospace; font-size: 85%; }
.n-body pre { background: #f6f8fa; padding: 10px; overflow: auto; border-radius: 6px; margin-bottom: 10px; }
.n-body pre code { background: transparent; padding: 0; }
.n-body a { color: var(--primary); text-decoration: none; }
.n-body a:hover { text-decoration: underline; }
.n-body img { max-width: 100%; border-radius: 4px; }
.n-body table { border-collapse: collapse; width: 100%; margin-bottom: 10px; font-size: 13px; }
.n-body th, .n-body td { border: 1px solid #dfe2e5; padding: 6px 13px; }
.n-body th { background-color: #f6f8fa; font-weight: 600; }
.n-body hr { height: 0.25em; padding: 0; margin: 24px 0; background-color: #e1e4e8; border: 0; }
.n-foot { padding: 8px 16px 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tags span { font-size: 11px; height: 20px; padding: 0 10px; border-radius: 20px; font-weight: 600; display: inline-flex; justify-content: center; align-items: center; line-height: 1; }
.n-foot-bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.n-date { font-size: 11px; color: #6B7280; }
.tools { display: flex; gap: 6px; }
.tools button { border: none; background: white; color: #9ca3af; width: 24px; height: 24px; padding: 0; font-size: 12px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s; }
.tools button i { line-height: 1; display: block; margin-top: 1px; }
.tools button:hover { transform: scale(1.1); color: var(--primary); }
.tools button.shared { color: var(--shared-color); }
.resize { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; cursor: nwse-resize; z-index: 20; }
.theme-wrapper { position: relative; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 2px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; color: white; }
#theme-picker { position: absolute; left: -10px; top: -10px; width: 60px; height: 60px; opacity: 0; }
.user-menu { position: relative; }
.avatar { width: 36px; height: 36px; background: white; color: var(--header-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: pointer; }
.dropdown { position: absolute; top: 130%; right: 0; width: 160px; background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); display: none; flex-direction: column; overflow: hidden; z-index: 1000; }
.user-menu:focus-within .dropdown { display: flex; }
.dropdown div { padding: 14px; font-size: 14px; color: #4b5563; cursor: pointer; }
.dropdown div:hover { background: #f0f9ff; color: var(--primary); }
.l-tabs { display: flex; background: #f3f4f6; padding: 5px; border-radius: 12px; margin-bottom: 25px; gap: 5px; border: 1px solid #e5e7eb; }
.l-tab { flex: 1; text-align: center; padding: 10px 0; cursor: pointer; color: #6b7280; font-weight: 600; font-size: 15px; border-radius: 8px; transition: all 0.3s; }
.l-tab.active { background: white; color: var(--primary); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.login-box { width: 380px; background: white; padding: 40px; border-radius: 20px; text-align: center; box-shadow: 0 25px 60px -10px rgba(0,0,0,0.15); border-top: 6px solid var(--primary); }
#page-login { position: fixed; inset: 0; background: #e0e7ff; display: flex; align-items: center; justify-content: center; z-index: 9999; }
.input-title { width: 100%; padding: 12px 15px; font-size: 16px; font-weight: 700; border: 1px solid #e5e7eb; border-radius: 8px; background: #fdfdfd; }
.control-row { display: flex; gap: 10px; }
.input-tag { flex: 1; height: 42px; border-radius: 8px; font-size: 14px; padding: 0 12px; border: 1px solid #e5e7eb; }
.color-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.color-dot { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 3px solid white; box-shadow: 0 0 0 1px #e5e7eb; }
.color-dot.selected { transform: scale(1.2); border-color: #333; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center; z-index: 2000; animation: fadeIn 0.2s; }

/* === 弹窗布局：强制所有弹窗使用统一的自适应逻辑 === */

/* 通用弹窗容器：宽度40%，最小高度60%（对齐新建便签），Flex纵向布局 */
.m-box {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.2);
    animation: zoomIn 0.3s;
    display: flex;
    flex-direction: column;
    border-top: 5px solid var(--primary);

    /* 核心尺寸控制: 严格对齐新建便签 */
    width: 40%;
    min-width: 650px;
    min-height: 60vh;
    max-width: 95vw;
    max-height: 95vh;
}

/* 确认框例外：只需要极小尺寸 */
.m-box.xs {
    width: 320px;
    min-width: 300px;
    min-height: auto;
    padding: 20px;
}

.modal-resizable { resize: both; overflow: hidden; } /* 允许用户手动拖拽大小 */

/* 通用自适应填充区 (用于表格、列表、文本域) */
.flex-grow-y {
    flex: 1; /* 占据所有垂直剩余空间 */
    display: flex;
    flex-direction: column;
    min-height: 0; /* 防止Flex子元素溢出 */
    overflow: hidden;
    margin-bottom: 10px;
}

/* 表格/列表的滚动容器 */
.scroll-content {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #f3f4f6;
    border-radius: 10px;
    background: #fff;
}

/* 新建便签的表单特殊处理 */
#form-note { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.m-row.full-height-row { flex: 1; margin-bottom: 18px; display: flex; flex-direction: column; min-height: 0; }
.m-row.full-height-row textarea { flex: 1; min-height: 100px; }

/* 头部和底部 */
.m-box h3 { margin: 0 0 20px 0; color: var(--header-bg); font-size: 20px; font-weight: 600; border-bottom: 1px solid #f3f4f6; padding-bottom: 15px; flex-shrink: 0; }
.m-row { margin-bottom: 18px; flex-shrink: 0; }
.m-foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: auto; padding-top: 10px; flex-shrink: 0; }
.settings-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #374151; cursor: pointer; user-select: none; }
.settings-check input { width: 16px; height: 16px; }
.settings-desc { margin-top: 6px; margin-left: 26px; font-size: 12px; line-height: 1.5; color: #6b7280; }

@keyframes zoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* 移动端强制全宽 */
@media (max-width: 600px) {
    .m-box, .m-box.xs { width: 92% !important; min-width: 92% !important; max-height: 85vh; overflow-y: auto; padding: 20px; resize: none; }
    .login-box { width: 90%; padding: 30px 20px; }
}

/* 手机/小屏：仅便签编辑弹层全屏 + 紧凑布局（桌面端不受影响） */
@media (max-width: 768px) {
    #modal-note.modal {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }
    #modal-note #note-modal-box.m-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 100vh;
        max-height: 100vh;
        min-height: 100dvh;
        max-height: 100dvh;
        height: 100%;
        border-radius: 0;
        padding: 10px 12px;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
        overflow: hidden !important;
        resize: none !important;
        border-top-width: 3px;
    }
    #modal-note .m-box h3 {
        margin: 0 0 8px 0;
        padding-bottom: 8px;
        font-size: 17px;
    }
    #modal-note .m-row {
        margin-bottom: 8px;
    }
    #modal-note .m-row.full-height-row {
        margin-bottom: 8px;
        flex: 1;
        min-height: 100px;
    }
    #modal-note .m-row.full-height-row textarea {
        min-height: 0;
    }
    #modal-note .m-foot {
        margin-top: 6px;
        padding-top: 6px;
        gap: 8px;
    }
    #modal-note .input-title {
        padding: 8px 10px;
        font-size: 16px;
    }
    #modal-note textarea[name="content"] {
        padding: 8px 10px;
        font-size: 16px;
    }
    #modal-note .input-tag {
        height: 38px;
        padding: 0 10px;
        font-size: 14px;
    }
    #modal-note .color-row {
        gap: 6px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 0 4px;
        -webkit-overflow-scrolling: touch;
    }
    #modal-note .color-dot {
        width: 22px;
        height: 22px;
        border-width: 2px;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    #modal-note .color-dot.selected {
        transform: scale(1.08);
    }
}

#share-list { list-style: none; margin: 0; padding: 0; }
#share-list li { display: flex; align-items: center; gap: 8px; padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f3f4f6; }
#share-list li:hover { background: #f9fafb; }
#share-list li.shared-user { background: #f0fdf4; border-left: 3px solid var(--shared-color); }

/* === 管理表格样式优化 (Admin Table) === */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 固定布局，方便精准控制列宽 */
}
.admin-table th, .admin-table td {
    padding: 12px 10px; /* 稍微减小左右内边距，挤出更多空间 */
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #4b5563;
    position: sticky;
    top: 0;
    z-index: 10;
}
.admin-table tr:hover { background: #f9fafb; }
.action-cell { display: flex; gap: 8px; align-items: center; justify-content: flex-start; }

/* === 针对不同弹窗的表格列宽定制 === */

/* 1. 全局便签管理 (#modal-admin-notes) */
/* 列序: 1:ID, 2:标题, 3:拥有者, 4:状态, 5:操作 */
#modal-admin-notes .admin-table th:nth-child(1) { width: 60px; }  /* ID: 窄 */
#modal-admin-notes .admin-table th:nth-child(2) { width: auto; }  /* 标题: 自适应占据剩余 */
#modal-admin-notes .admin-table th:nth-child(3) { width: 100px; } /* 拥有者 */
#modal-admin-notes .admin-table th:nth-child(4) { width: 70px; }  /* 状态: 变窄 */
#modal-admin-notes .admin-table th:nth-child(5) { width: 180px; } /* 操作: 加宽，确保按钮不换行 */

/* 2. 已删除便签 (#modal-deleted-notes) */
/* 列序: 1:多选, 2:ID, 3:标题, 4:拥有者, 5:操作 */
#modal-deleted-notes .admin-table th:nth-child(1) { width: 40px; } /* Checkbox */
#modal-deleted-notes .admin-table th:nth-child(2) { width: 60px; } /* ID: 窄 */
#modal-deleted-notes .admin-table th:nth-child(3) { width: auto; } /* 标题: 自适应加大 */
#modal-deleted-notes .admin-table th:nth-child(4) { width: 100px; }/* 拥有者 */
#modal-deleted-notes .admin-table th:nth-child(5) { width: 200px; }/* 操作: 加宽 */

/* 3. 用户管理 (#modal-admin) */
/* 列序: 1:ID, 2:用户名, 3:姓名, 4:操作 */
#modal-admin .admin-table th:nth-child(1) { width: 80px; }
#modal-admin .admin-table th:nth-child(2) { width: 30%; }
#modal-admin .admin-table th:nth-child(3) { width: 30%; }
#modal-admin .admin-table th:nth-child(4) { width: auto; }

/* AI Window Styles */
.ai-float-window {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 50%; height: 50vh;
    background: white; border-radius: 16px; box-shadow: 0 -5px 30px rgba(0,0,0,0.2); z-index: 2000;
    display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(0,0,0,0.1);
    animation: slideUp 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); min-width: 300px; min-height: 200px;
}
@keyframes slideUp { from { transform: translate(-50%, 100px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.ai-float-header { background: linear-gradient(135deg, var(--primary), #a78bfa); color: white; padding: 12px 20px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; cursor: move; user-select: none; }
.close-ai-btn { cursor: pointer; transition: transform 0.2s; }
.close-ai-btn:hover { transform: scale(1.2); }
.ai-chat-history { flex: 1; overflow-y: auto; padding: 20px; background: #f9fafb; display: flex; flex-direction: column; gap: 15px; border-bottom: 1px solid #eee; }
.ai-msg { max-width: 90%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; position: relative; word-wrap: break-word; }
.ai-sys { background: white; color: #333; border: 1px solid #e5e7eb; align-self: flex-start; border-bottom-left-radius: 2px; }
.ai-user { background: var(--primary); color: white; align-self: flex-end; border-bottom-right-radius: 2px; }
.ai-input-area-large { padding: 15px; background: white; display: flex; gap: 10px; align-items: flex-end; height: 80px; flex-shrink: 0; }
.ai-input-area-large textarea { flex: 1; height: 100%; border: 1px solid #ddd; border-radius: 12px; padding: 10px; resize: none; font-family: inherit; background: #fdfdfd; }
.ai-input-area-large textarea:focus { background: white; border-color: var(--primary); }
.ai-input-area-large button { width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: white; border: none; cursor: pointer; flex-shrink: 0; transition: transform 0.2s; margin-bottom: 2px; }
.ai-input-area-large button:hover { transform: scale(1.1); }
.ai-resize-handle { position: absolute; bottom: 0; right: 0; width: 25px; height: 25px; cursor: nwse-resize; z-index: 2010; background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.2) 50%); border-bottom-right-radius: 16px; }
.ai-float-window { width: 50%; left: 50%; max-width: 95vw; max-height: 95vh; transform: translateX(-50%); }