/* @budding: 特色功能 (侧边栏/表情/世界书/总结/各种弹窗) */
/* 侧边栏与设置 */
.settings-sidebar { position: absolute; top: 0; right: -100%; width: 80%; height: 100%; background: #fff; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); transition: right 0.4s ease-in-out; z-index: 101; display: flex; flex-direction: column; }
.settings-sidebar.open { right: 0; }
.settings-sidebar .header { padding: 15px; border-bottom: 1px solid #eee; font-weight: bold; text-align: center; color: var(--text-color); }
.settings-sidebar .content { padding: 20px; overflow-y: auto; flex-grow: 1; }
.settings-sidebar .form-group textarea { height: 100px; resize: vertical; }
.settings-sidebar .avatar-setting { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.settings-sidebar .avatar-preview { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #ddd; cursor: pointer; }
.wallpaper-preview { width: 100%; aspect-ratio: 9 / 16; max-height: 400px; border-radius: var(--border-radius); margin-bottom: 25px; background-size: cover; background-position: center; border: 3px dashed #ccc; display: flex; align-items: center; justify-content: center; color: var(--secondary-color); font-style: italic; background-color: #f7f7f7; }

/* 表情包面板 */
#sticker-modal { position: absolute; bottom: 0; left: 0; right: 0; height: 35%; max-height: 250px; background: #f7f7f7; border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1); z-index: 25; display: none; flex-direction: column; }
#sticker-modal.visible { display: flex; animation: slideUp 0.3s ease-out; }
#sticker-modal .header { padding: 10px 15px; font-weight: bold; color: var(--text-color); border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.sticker-grid { flex-grow: 1; overflow-y: auto; padding: 15px; display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 15px; }
.sticker-item { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.sticker-item img { width: 60px; height: 60px; object-fit: contain; transition: transform 0.2s ease; }
.sticker-item span { font-size: 12px; color: #666; margin-bottom: 5px; text-align: center; }
.sticker-categories { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; white-space: nowrap; padding: 10px 10px 8px 10px; border-bottom: 1px solid #eee; gap: 10px; scrollbar-width: none; }
.sticker-categories::-webkit-scrollbar { display: none; }
.sticker-category-tab { flex-shrink: 0; flex-grow: 0; display: flex; align-items: center; justify-content: center; padding: 4px 20px 12px 20px; border-radius: 16px; background-color: #f0f2f5; color: #333; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; user-select: none; white-space: nowrap; }
.sticker-category-tab.active { background-color: var(--accent-color); color: white; }
.sticker-category-tab:active { opacity: 0.8; }
.sticker-grid-inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 10px 0; }
.sticker-header-actions { display: flex; align-items: center; gap: 8px; }
.sticker-header-btn { border: none; background: #e9e9e9; color: var(--text-color); border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.sticker-header-btn.btn-danger { background: #ef5350; color: #fff; }
.sticker-header-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sticker-item.multi-select-selected { background-color: #e6f7ff; border-radius: 12px; }
.sticker-item.multi-select-selected img { transform: scale(0.95); }

/* 世界书 */
#world-book-screen .content { padding: 10px 0 0 0; }
.world-book-category-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #f0f0f0; border-left: 4px solid var(--secondary-color); margin: 10px 0 5px 0; font-weight: 600; color: var(--text-color); font-size: 14px; }
.world-book-category-header .category-count { background-color: var(--secondary-color); color: white; font-size: 12px; padding: 2px 8px; border-radius: 10px; font-weight: normal; }
.world-book-item { margin-left: 10px; border-left: 2px solid #e9e9e9; }
.world-book-item.multi-select-selected { background-color: #e6f7ff; }
.world-book-link-category-group { border-bottom: 1px solid var(--border-color); }
.world-book-link-category-group:last-child { border-bottom: none; }
.world-book-link-category-title { padding: 12px 16px; font-weight: bold; cursor: pointer; position: relative; user-select: none; }
.world-book-link-category-content { max-height: 0 !important; overflow: hidden !important; padding-top: 0 !important; margin-top: 0 !important; transition: max-height 0.3s ease-in-out !important; }
.world-book-link-category-group.expanded .world-book-link-category-content { max-height: 3000px !important; overflow-y: auto !important; }
.world-book-link-item { padding: 8px 16px 8px 32px; background-color: rgba(0,0,0,0.02); }
.world-book-link-category-title::after { display: none !important; content: none !important; }

/* 总结与日记 */
.summary-modal-window { max-width: 360px; width: 90%; padding-bottom: 18px; }
.summary-modal-top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.summary-top-left, .summary-top-right { flex: 1; min-width: 0; }
.summary-top-left label, .summary-top-right label, .summary-auto-config label { display: block; margin-bottom: 6px; color: var(--secondary-color); font-weight: 600; font-size: 13px; }
.summary-modal-window select, .summary-modal-window input[type="number"] { width: 100%; padding: 10px 12px; border: 2px solid #e0e0e0; border-radius: 10px; background: #fff; font-size: 14px; }
.summary-inline-title { font-size: 13px; font-weight: 600; color: var(--secondary-color); margin-bottom: 8px; }
.summary-worldbook-wrap { margin-bottom: 14px; }
.summary-worldbook-list { max-height: 150px; overflow-y: auto; border: 1px solid #eee; border-radius: 12px; background: #fafafa; padding: 8px; }
.summary-worldbook-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #f0f0f0; }
.summary-worldbook-item:last-child { border-bottom: none; }
.summary-worldbook-item input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.summary-worldbook-item span { font-size: 14px; color: var(--text-color); word-break: break-all; }
.summary-range-block { margin-bottom: 14px; }
.summary-range-row { display: flex; gap: 10px; }
.summary-auto-block { margin-bottom: 16px; border: 1px solid #eee; border-radius: 12px; padding: 12px; background: #fafafa; }
.summary-auto-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; color: var(--text-color); }
.summary-switch-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.summary-switch-wrap input[type="checkbox"] { width: auto; }
.summary-auto-config { margin-top: 12px; }
.summary-action-buttons { display: flex; flex-direction: column; gap: 10px; }
.summary-action-buttons .btn { margin: 0; }
.summary-modal-footer { display: flex; justify-content: flex-end; margin-top: 14px; }
.summary-diary-entry-btn { width: 42px; height: 42px; border: none; border-radius: 50%; background: var(--primary-color); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.summary-diary-entry-btn svg { width: 20px; height: 20px; fill: currentColor; }
#summary-modal, #summary-diary-modal { z-index: 140; }
#summary-modal .modal-window, #summary-diary-modal .modal-window { position: relative; z-index: 141; }
.summary-diary-window { width: 90%; max-width: 370px; max-height: 80vh; display: flex; flex-direction: column; }
.summary-diary-header, .summary-diary-select-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.summary-diary-header h3 { margin: 0; color: var(--text-color); }
.summary-diary-list { max-height: 60vh; overflow-y: auto; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.summary-diary-item { padding: 12px 8px; border-bottom: 1px solid #f0f0f0; border-radius: 10px; }
.summary-diary-item:last-child { border-bottom: none; }
.summary-diary-item.multi-select-selected { background: #e6f7ff; }
.summary-diary-meta { font-size: 12px; color: #888; margin-bottom: 6px; }
.summary-diary-empty { padding: 18px 8px; text-align: center; color: #999; }
.summary-range-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.summary-total-count-text { font-size: 12px; color: #888; white-space: nowrap; flex-shrink: 0; }
.summary-diary-title { display: flex; justify-content: space-between; align-items: center; cursor: pointer; position: relative; }
.summary-diary-title::after { display: none !important; content: none !important; }
.summary-diary-content { max-height: 0 !important; overflow: hidden !important; padding-top: 0 !important; margin-top: 0 !important; transition: max-height 0.3s ease-out, padding 0.3s ease-out !important; color: var(--text-color); font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.summary-diary-item.expanded .summary-diary-content { max-height: 3000px !important; padding-top: 8px !important; transition: max-height 0.5s ease-in, padding 0.3s ease-in !important; }

/* 用户预设 */
.input-with-button { display: flex; align-items: center; gap: 10px; }
.input-with-button input { flex: 1; min-width: 0; }
.btn-preset { padding: 8px 12px; font-size: 14px; background-color: var(--accent-color); color: var(--white-color); border: none; border-radius: 8px; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
.btn-preset:hover { opacity: 0.85; }
#user-preset-list-modal, #edit-user-preset-modal, #delete-user-preset-modal { z-index: 150; }
.user-preset-list { list-style: none; padding: 0; margin: 15px 0; max-height: 50vh; overflow-y: auto; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.user-preset-item { display: flex; align-items: center; gap: 12px; padding: 10px 5px; border-bottom: 1px solid #f0f0f0; }
.user-preset-item:last-child { border-bottom: none; }
.user-preset-info { flex: 1; min-width: 0; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.user-preset-info:hover .user-preset-name { color: var(--accent-color); }
.user-preset-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.user-preset-name { font-weight: 500; color: var(--text-color); word-break: break-all; transition: color 0.2s; }
.user-preset-actions .btn-small { margin-left: 5px; padding: 4px 10px; font-size: 12px; }
#edit-user-preset-modal .avatar-preview { width: 60px; height: 60px; }

/* 各种保存/应用预设弹窗与按钮 (自定义气泡、API、字体) */
.form-group-buttons, .api-preset-buttons, .font-preset-buttons { display: flex; gap: 10px; margin-top: 10px; flex-wrap: nowrap; align-items: stretch; }
.form-group-buttons .btn, .api-preset-buttons .btn, .font-preset-buttons .btn { flex: 1; margin-top: 0 !important; margin-bottom: 0 !important; white-space: nowrap; min-width: 0; box-shadow: none; }
.form-group-buttons .btn-secondary:hover, .form-group-buttons .btn-primary:hover, .form-group-buttons .btn-neutral:hover { box-shadow: none; }
.api-preset-buttons .btn-secondary:hover, .api-preset-buttons .btn-primary:hover, .api-preset-buttons .btn-neutral:hover { box-shadow: none; }
.font-preset-buttons .btn-secondary:hover, .font-preset-buttons .btn-primary:hover, .font-preset-buttons .btn-neutral:hover { box-shadow: none; }
.modal-button-group { display: flex; gap: 10px; margin-top: 25px; align-items: stretch; }
.modal-button-group .btn { flex: 1; margin-top: 0 !important; margin-bottom: 0 !important; }
.bubble-style-list, .api-preset-list, .font-preset-list { list-style: none; padding: 0; margin: 0; max-height: 40vh; overflow-y: auto; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.bubble-style-item, .api-preset-item, .font-preset-item { display: flex; align-items: center; gap: 8px; padding: 12px 5px; border-bottom: 1px solid #f0f0f0; }
.bubble-style-item:last-child, .api-preset-item:last-child, .font-preset-item:last-child { border-bottom: none; }
.bubble-style-name, .api-preset-name, .font-preset-name { flex: 1; min-width: 0; cursor: pointer; font-weight: 500; color: var(--text-color); word-break: break-all; }
.bubble-style-name:hover, .api-preset-name:hover, .font-preset-name:hover { color: var(--accent-color); }
.bubble-style-item .btn-small, .api-preset-item .btn-small, .font-preset-item .btn-small { margin: 0; padding: 4px 10px; font-size: 12px; width: auto; flex-shrink: 0; }
#save-bubble-style-modal, #apply-bubble-style-modal, #rename-bubble-style-modal, #delete-bubble-style-modal,
#save-api-preset-modal, #apply-api-preset-modal, #rename-api-preset-modal, #delete-api-preset-modal,
#save-font-preset-modal, #apply-font-preset-modal, #rename-font-preset-modal, #delete-font-preset-modal { z-index: 130; }
#save-bubble-style-modal .modal-window, #apply-bubble-style-modal .modal-window, #rename-bubble-style-modal .modal-window, #delete-bubble-style-modal .modal-window,
#save-api-preset-modal .modal-window, #apply-api-preset-modal .modal-window, #rename-api-preset-modal .modal-window, #delete-api-preset-modal .modal-window,
#save-font-preset-modal .modal-window, #apply-font-preset-modal .modal-window, #rename-font-preset-modal .modal-window, #delete-font-preset-modal .modal-window { position: relative; z-index: 131; }
#delete-style-confirm-text, #delete-api-preset-confirm-text, #delete-font-preset-confirm-text { word-break: break-all; }

/* 其他弹窗与选择器 */
#world-book-selection-modal, #invite-member-modal, #group-recipient-selection-modal { z-index: 102; }
#world-book-selection-modal .modal-window, #invite-member-modal .modal-window, #group-recipient-selection-modal .modal-window { width: 90%; max-width: 380px; }
#world-book-selection-list, #invite-member-selection-list, #group-recipient-selection-list { list-style: none; padding: 0; margin: 0; max-height: 40vh; overflow-y: auto; }
.world-book-select-item, .invite-member-select-item, .group-recipient-select-item { display: flex; align-items: center; padding: 12px 5px; border-bottom: 1px solid #f0f0f0; }
.world-book-select-item:last-child, .invite-member-select-item:last-child, .group-recipient-select-item:last-child { border-bottom: none; }
.world-book-select-item input[type="checkbox"], .invite-member-select-item input[type="checkbox"], .group-recipient-select-item input[type="checkbox"] { margin-right: 15px; width: 20px; height: 20px; }
.world-book-select-item label, .invite-member-select-item label, .group-recipient-select-item label { font-weight: 500; color: var(--text-color); display: flex; align-items: center; gap: 10px; width: 100%; }
.invite-member-select-item img, .group-recipient-select-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.member-selection-list { list-style: none; padding: 0; margin: 15px 0; max-height: 40vh; overflow-y: auto; }
.member-selection-item { display: flex; align-items: center; padding: 10px 5px; border-bottom: 1px solid #f0f0f0; }
.member-selection-item:last-child { border-bottom: none; }
.member-selection-item input[type="checkbox"] { margin-right: 15px; width: 20px; height: 20px; flex-shrink: 0; }
.member-selection-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 10px; }
.member-selection-item label { font-weight: 500; color: var(--text-color); }
#group-settings-sidebar .group-avatar-setting { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
#group-settings-sidebar .group-avatar-preview { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; border: 2px solid #ddd; cursor: pointer; }
#group-settings-sidebar .group-members-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 15px; margin-top: 10px; }
#group-settings-sidebar .group-member, #group-settings-sidebar .add-member-btn { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
#group-settings-sidebar .group-member img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-bottom: 5px; border: 2px solid #eee; }
#group-settings-sidebar .add-member-btn .add-icon { width: 50px; height: 50px; border-radius: 50%; border: 2px dashed #ccc; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #ccc; margin-bottom: 5px; transition: all 0.2s ease; }
#group-settings-sidebar .add-member-btn:hover .add-icon { color: var(--accent-color); border-color: var(--accent-color); }
#group-settings-sidebar .group-member span, #group-settings-sidebar .add-member-btn span { font-size: 12px; text-align: center; color: var(--text-color); }
#edit-group-member-modal, #create-member-for-group-modal { z-index: 102; }
#edit-group-member-modal .avatar-preview, #create-member-for-group-modal .avatar-preview { width: 80px; height: 80px; }
#add-sticker-modal .modal-window { max-width: 360px; }
#sticker-preview { width: 100px; height: 100px; border: 2px dashed #ddd; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; color: #aaa; background-color: #f9f9f9; }
#sticker-preview img { max-width: 100%; max-height: 100%; }
.add-char-method-list { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.add-char-method-btn { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 14px 0; border: 2px solid #e0e0e0; border-radius: 14px; background: #fff; cursor: pointer; transition: all 0.2s ease; text-align: left; width: 100%; }
.add-char-method-btn:active { border-color: var(--accent-color); background: rgba(64, 169, 255, 0.05); }
.add-char-method-btn .method-icon { font-size: 28px; flex-shrink: 0; width: 40px; text-align: center; }
.add-char-method-btn .method-info { flex: 1; min-width: 0; }
.add-char-method-btn .method-title { font-size: 15px; font-weight: 600; color: var(--text-color); margin-bottom: 2px; }
.add-char-method-btn .method-desc { font-size: 12px; color: #888; }
#sticker-category-binding-modal .modal-window { width: 90%; max-width: 360px; }
.sticker-binding-char-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background-color 0.2s ease; }
.sticker-binding-char-item:last-child { border-bottom: none; }
.sticker-binding-char-item:hover { background-color: #f5f5f5; }
.sticker-binding-char-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 15px; object-fit: cover; flex-shrink: 0; }
.sticker-binding-char-name { font-weight: 600; color: var(--text-color); font-size: 16px; }
.sticker-binding-char-item.selected { background-color: #e6f7ff; }

/* 图标自定义 */
#customize-screen .icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 10px 0; }
#customize-screen .icon-grid-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 10px; border-radius: 12px; transition: background-color 0.2s ease; }
#customize-screen .icon-grid-item:active { background-color: #f0f0f0; }
#customize-screen .icon-grid-img { width: 60px; height: 60px; border-radius: 15px; object-fit: cover; margin-bottom: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
#customize-screen .icon-grid-label { font-size: 12px; color: var(--text-color); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#icon-settings-modal .modal-window { max-width: 320px; }
#icon-settings-modal .icon-preview-large { width: 80px; height: 80px; border-radius: 18px; object-fit: cover; margin: 0 auto 20px; display: block; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); }
#icon-settings-modal .btn-group { display: flex; gap: 10px; margin-top: 15px; }
#icon-settings-modal .btn-group .btn { flex: 1; margin: 0; }
#customize-screen .icon-custom-item { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; }
#customize-screen .icon-custom-item:last-child { border-bottom: none; }
#customize-screen .icon-preview { width: 50px; height: 50px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
#customize-screen .icon-details { flex-grow: 1; }
#customize-screen .icon-details p { margin: 0 0 8px 0; font-weight: 600; }
#customize-screen .icon-details input { width: calc(100% - 70px); }
#customize-screen .reset-icon-btn { background: #e0e0e0; color: #555; border: none; border-radius: 8px; padding: 8px 10px; font-size: 12px; cursor: pointer; margin-left: 10px; }

/* 教程 */
.tutorial-item { margin-bottom: 15px; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; background-color: #fcfcfc; }
.tutorial-header { padding: 12px 18px; font-weight: 600; color: var(--secondary-color); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.tutorial-header::after { content: '▼'; font-size: 12px; transition: transform 0.3s ease; }
.tutorial-item.open .tutorial-header::after { transform: rotate(180deg); }
.tutorial-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out, padding 0.5s ease; padding: 0 10px; }
.tutorial-item.open .tutorial-content { padding: 10px 10px; max-height: 5000px; }
.tutorial-content img { width: 100%; height: auto; border-radius: 8px; display: block; }