body { background:#000; color:#f5f5f7; -webkit-font-smoothing:antialiased; margin:0; padding:0; overflow-x: hidden; transition: background 0.3s, color 0.3s; }

/* 搜索高亮样式 */
.search-highlight {
  background: #fbbf24;
  color: #000;
  padding: 1px 3px;
  border-radius: 3px;
}

.search-result-active {
  animation: searchPulse 1s ease-in-out infinite;
}

@keyframes searchPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
  50% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0); }
}

/* 日间模式搜索框 */
body.day-mode #searchBox {
  background: #f3f4f6;
  border-color: #d1d5db;
}

body.day-mode #searchInput {
  color: #111827;
}

body.day-mode #searchInput::placeholder {
  color: #9ca3af;
}

/* 日间模式搜索结果 */
body.day-mode #searchResultsInfo {
  background: rgba(59, 130, 246, 0.95);
}

/* 当搜索结果显示时，调整聊天区域的顶部padding */
body.search-active #chat {
  padding-top: 108px !important;
}

/* 当搜索结果显示时，调整空对话提示的位置 */
body.search-active #emptyChatHint {
  bottom: 180px;
}
    body.day-mode { background:#f9fafb; color:#111827; }
    * { -webkit-tap-highlight-color:transparent; box-sizing:border-box; }
    #chat {
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      transition: padding-bottom 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); }
    .input-counter {
      user-select: none;
      transition: color 0.3s;
    }
    body.day-mode .input-counter {
      color: #6b7280 !important;
    }
    .font-size-option {
      cursor: pointer;
      user-select: none;
      padding: 8px 4px;
      line-height: 1.2;
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .font-size-option[data-size="small"] {
      font-size: 0.75rem;
    }
    .font-size-option[data-size="smaller"] {
      font-size: 0.875rem;
    }
    .font-size-option[data-size="default"] {
      font-size: 1rem;
    }
    .font-size-option[data-size="larger"] {
      font-size: 1.125rem;
    }
    .font-size-option[data-size="large"] {
      font-size: 1.25rem;
    }
    .font-size-option:hover:not(.active) {
      border-color: #6b7280;
      color: #e5e7eb;
    }
    .font-size-option.active {
      background: #3b82f6;
      border-color: #3b82f6;
      color: white;
    }
    .settings-panel-card {
      max-height: min(88vh, 760px);
      overflow-y: auto;
    }
    .settings-api-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px auto;
      align-items: center;
    }
    #settingsApiKeyInput {
      min-width: 0;
      width: 100%;
      overflow-x: auto;
      text-overflow: clip;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }
    .settings-save-key-btn {
      min-width: 56px;
      flex-shrink: 0;
    }
    .model-info-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      color: #9ca3af;
      cursor: pointer;
      flex-shrink: 0;
      border: none;
      background: none;
      padding: 0;
      margin: -3px -3px -3px 0;
    }
    .model-info-btn:hover {
      color: #f3f4f6;
    }
    body.day-mode .model-info-btn {
      color: #9ca3af;
    }
    body.day-mode .model-info-btn:hover {
      color: #374151;
    }
    .model-info-title {
      color: #e5e7eb;
    }
    .model-info-name {
      color: #e5e7eb;
    }
    .model-info-sub {
      color: #9ca3af;
    }
    .model-info-border {
      border-top: 1px solid #374151;
    }
    body.day-mode .model-info-title {
      color: #111827;
    }
    body.day-mode .model-info-name {
      color: #111827;
    }
    body.day-mode .model-info-sub {
      color: #6b7280;
    }
    body.day-mode .model-info-border {
      border-top-color: #e5e7eb;
    }
    body.day-mode .font-size-option:not(.active) {
      border-color: #d1d5db;
      color: #4b5563;
    }
    body.day-mode .font-size-option:hover:not(.active) {
      border-color: #9ca3af;
      color: #111827;
    }
    .msg-content,
    .reasoning-content {
      transition: font-size 0.2s ease;
      line-height: 1.6;
    }
    .reasoning-content {
      line-height: 1.8;
    }
    body.font-size-small .msg-content,
    body.font-size-small .reasoning-content {
      font-size: 0.875rem !important;
    }
    body.font-size-smaller .msg-content,
    body.font-size-smaller .reasoning-content {
      font-size: 0.9375rem !important;
    }
    body.font-size-default .msg-content,
    body.font-size-default .reasoning-content {
      font-size: 1rem !important;
    }
    body.font-size-larger .msg-content,
    body.font-size-larger .reasoning-content {
      font-size: 1.0625rem !important;
    }
    body.font-size-large .msg-content,
    body.font-size-large .reasoning-content {
      font-size: 1.125rem !important;
    }

    #input {
      min-height: 44px;
      max-height: 104px;
      min-width: 0;
      line-height: 1.5;
      overflow-y: auto;
      resize: none;
      border-radius: 18px;
      padding: 10px 16px 10px 16px;
      border: none;
      background: transparent !important;
    }
    #input:focus,
    #input:focus-visible {
      outline: none !important;
      box-shadow: none !important;
    }
    
    /* Token预估隐藏样式 */
    body.hide-token-estimate .input-counter,
    body.hide-token-estimate .toolbar-input-counter,
    body.hide-token-estimate .message-meta {
      display: none !important;
    }

    #sendBtn {
      min-width: 48px;
      width: 48px;
      height: 48px;
      padding: 0;
      border-radius: 9999px;
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      color: white;
      border: none;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
    }
    #sendBtn.plus-mode {
      font-size: 24px;
      line-height: 1;
      background: rgba(255, 255, 255, 0.08);
      color: #e5e7eb;
      box-shadow: none;
    }
    #sendBtn.plus-mode:hover {
      background: rgba(255, 255, 255, 0.14);
      color: #ffffff;
    }
    #sendBtn.plus-mode:active {
      background: rgba(255, 255, 255, 0.18);
      transform: scale(0.98);
    }

    #sendBtn:hover { background: linear-gradient(135deg, #4f8df8 0%, #2563eb 100%); }
    #sendBtn:active { background: #1d4ed8; transform: scale(0.98); }
    #sendBtn:disabled { background: #6b7280; cursor: not-allowed; }

    #sendBtn.stop-mode {
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
    }
    #sendBtn.stop-mode:hover {
      background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    }
    #sendBtn.stop-mode:active {
      background: #b91c1c;
    }
    .composer-primary-slot {
      position: relative;
      flex-shrink: 0;
    }
    .composer-action-menu {
      margin-top: 12px;
      padding: 4px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(17, 24, 39, 0.92);
      box-shadow: 0 20px 36px rgba(0,0,0,0.22);
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      overflow: hidden;
      transform-origin: bottom center;
    }
    .composer-action-menu.hidden {
      display: none;
    }
    .composer-action-menu.opening {
      animation: composerMenuSlideUp 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .composer-action-menu.closing {
      pointer-events: none;
      animation: composerMenuSlideDown 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
    }
    .composer-action-item {
      border: none;
      background: rgba(255,255,255,0.05);
      color: #e5e7eb;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 8px;
      width: 100%;
      min-height: 104px;
      border-radius: 18px;
      padding: 14px 12px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.18s ease;
      text-align: left;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }
    .composer-action-item:hover {
      background: rgba(255,255,255,0.09);
      color: #ffffff;
      transform: translateY(-1px);
    }
    .composer-action-icon {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #93c5fd;
      flex-shrink: 0;
      border-radius: 9999px;
      background: rgba(59,130,246,0.14);
    }
    .composer-action-label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.3;
      color: inherit;
    }
    .composer-action-subtitle {
      display: block;
      font-size: 11px;
      line-height: 1.45;
      color: #9ca3af;
    }
    .input-shell.composer-expanded {
      padding-bottom: 14px;
    }

    @keyframes composerMenuSlideUp {
      from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes composerMenuSlideDown {
      from {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      to {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
      }
    }

    .copy-btn, .regenerate-btn, .edit-btn, .delete-btn, .reply-btn, .favorite-btn {
      position: absolute;
      bottom:6px;
      background:rgba(51,51,51,0.6);
      color:#fff;
      border:none;
      border-radius:6px;
      padding:2px 5px;
      font-size:12px;
      opacity:0.5;
      z-index:5;
      cursor: pointer;
      transition: all 0.2s ease;
      height:24px;
      width:24px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .copy-btn { right:6px; }
    .delete-btn { right:36px; }
    .favorite-btn { right:66px; }
    .edit-btn { right:96px; }
    .reply-btn { right:96px; }
    .regenerate-btn { right:96px; }

    .copy-btn:hover, .regenerate-btn:hover, .edit-btn:hover, .delete-btn:hover, .reply-btn:hover, .favorite-btn:hover {
      opacity:1; background:rgba(51,51,51,0.8);
    }
    .delete-btn:hover { background:rgba(220,38,38,0.8); }
    .reply-btn:hover { background:rgba(59,130,246,0.8); }
    .favorite-btn:hover, .favorite-btn.favorited {
      color: #facc15;
    }
    .favorite-btn.favorited {
      background: rgba(250, 204, 21, 0.2);
      opacity: 1;
    }
    .copy-btn:active, .regenerate-btn:active, .edit-btn:active, .delete-btn:active, .reply-btn:active, .favorite-btn:active { transform: scale(0.95); }

    .message-box {
      position:relative;
      padding-bottom:32px !important;
      min-width: 60px;
    }

    .group-narration {
      text-align: center;
    }

    .group-narration-content {
      color: rgba(156, 163, 175, 0.76);
      font-size: 0.72rem;
      line-height: 1.7;
      letter-spacing: 0.01em;
      font-weight: 400;
      font-style: normal;
      text-align: center;
    }

    .group-narration-content :where(p, ul, ol, blockquote) {
      margin: 0.2rem 0;
    }

    .group-narration-content :where(strong, b) {
      font-weight: 400;
      color: inherit;
    }

    .message-meta {
      margin-bottom: 12px;
    }

    .assistant-meta {
      color: #9ca3af;
    }

    .user-input-meta {
      color: rgba(255, 255, 255, 0.82);
    }

    .generation-status {
      margin-bottom: 12px;
    }

    .version-control {
      position: absolute;
      bottom: 6px;
      left: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #d1d5db;
      background: rgba(51,51,51,0.6);
      padding: 2px 8px;
      border-radius: 6px;
      z-index: 5;
      height: 24px;
    }
    .version-btn {
      cursor: pointer;
      transition: color 0.2s;
      user-select: none;
    }
    .version-btn:hover { color: #fff; }
    .version-btn.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

    .tab {
      padding:10px 12px;
      border-radius:8px;
      cursor:pointer;
      font-size:14px;
      display:flex;
      align-items:center;
      justify-content: space-between;
      background:transparent;
      color: #d1d5db;
      transition: background 0.2s;
      gap: 8px;
    }

    .tab.active { background:#3b82f6; color:white; }
    .tab:hover:not(.active) { background:#374151; }

    .tab-title {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 6px;
    }

    .tab-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    .tab-btn {
      font-size:14px;
      width:24px;
      height:24px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:4px;
      background:rgba(255,255,255,0.1);
      cursor:pointer;
      transition: background 0.2s;
    }
    .tab-btn:hover { background:rgba(255,255,255,0.3); }

    .edit-panel {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }
    .edit-panel.hidden { display: none; }
    .edit-container {
      background: #1a1a1a;
      border-radius: 12px;
      padding: 20px;
      width: 90%;
      max-width: 560px;
      max-height: 90vh;
      overflow-y: auto;
      border: 1px solid #333;
    }
    .edit-textarea {
      width: 100%;
      min-height: 150px;
      background: #2a2a2a;
      border: 1px solid #444;
      border-radius: 8px;
      padding: 12px;
      color: white;
      font-size: 14px;
      line-height: 1.5;
      resize: vertical;
      margin-bottom: 15px;
    }
    .edit-input {
      width:100%;
      background:#2a2a2a;
      border:1px solid #444;
      border-radius:8px;
      padding:12px;
      color:#fff;
      font-size:14px;
      line-height:1.5;
      margin-bottom:15px;
      outline:none;
    }
    .edit-input:focus, .edit-textarea:focus {
      border-color:#3b82f6;
    }
    .edit-buttons { display: flex; gap: 10px; justify-content: flex-end; }
    .edit-btn-save, .edit-btn-cancel {
      padding: 8px 16px;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      font-size: 14px;
    }
    .edit-btn-save { background: #007aff; color: white; }
    .edit-btn-cancel { background: #444; color: white; }

    .scroll-to-bottom-btn {
      position: fixed;
      bottom: 168px;
      right: 20px;
      width: 40px;
      height: 40px;
      background: rgba(51, 51, 51, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      color: white;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.2s ease, bottom 0.22s ease;
      z-index: 15;
      backdrop-filter: blur(4px);
      pointer-events: none;
    }
    body.composer-panel-open .scroll-to-bottom-btn {
      bottom: 304px;
    }
    .scroll-to-bottom-btn.visible { opacity: 0.7; pointer-events: auto; }
    .scroll-to-bottom-btn:hover { opacity: 0.9; background: rgba(51, 51, 51, 0.9); transform: scale(1.05); }
    .scroll-to-bottom-btn:active { transform: scale(0.95); }

    .input-container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #000;
      backdrop-filter: none;
      padding: 10px 14px 12px;
      border-top: none;
      z-index: 10;
    }
    .input-container::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      height: 20px;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 82%, #000 100%);
    }
    .input-shell {
      width: 100%;
      max-width: 1320px;
      margin: 0 auto;
      padding: 12px 14px 12px;
      border-radius: 28px;
      background: rgba(24, 24, 27, 0.96);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
      backdrop-filter: blur(18px);
      transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
    }
    .input-shell.composer-expanded {
      transform: translateY(-12px);
      box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
    }
    .input-toolbar {
      margin: 0 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .toolbar-input-counter {
      flex-shrink: 1;
      margin-left: auto;
      text-align: right;
      font-size: 12px;
      line-height: 1;
      color: #9ca3af;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    .deepthink-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 9999px;
      border: 1px solid #374151;
      background: #111827;
      color: #d1d5db;
      cursor: pointer;
      user-select: none;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }
    .deepthink-chip:hover {
      background: #1f2937;
      border-color: #4b5563;
      color: #f3f4f6;
    }
    .deepthink-chip-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #93c5fd;
      flex-shrink: 0;
    }
    .deepthink-chip-text {
      font-size: 13px;
      font-weight: 500;
      line-height: 1;
    }
    .deepthink-chip-badge {
      font-size: 11px;
      line-height: 1;
      padding: 3px 6px;
      border-radius: 9999px;
      background: rgba(59, 130, 246, 0.16);
      color: #93c5fd;
    }
    .deepthink-chip:has(.peer:checked) {
      background: rgba(37, 99, 235, 0.18);
      border-color: #3b82f6;
      color: #ffffff;
      box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2) inset;
    }
    .deepthink-chip:has(.peer:checked) .deepthink-chip-icon,
    .deepthink-chip:has(.peer:checked) .deepthink-chip-badge {
      color: #dbeafe;
    }
    .deepthink-chip:has(.peer:checked) .deepthink-chip-badge {
      background: rgba(255, 255, 255, 0.18);
    }
    .input-wrapper {
      display: flex;
      gap: 12px;
      align-items: center;
      margin: 0;
      padding: 8px 8px 8px 14px;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .input-wrapper:focus-within {
      border-color: rgba(255, 255, 255, 0.06);
      box-shadow: none;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    details.reasoning-details > summary {
      list-style: none;
    }
    details.reasoning-details > summary::-webkit-details-marker {
      display: none;
    }
    details.reasoning-details > summary::before {
      content: '▶';
      display: inline-block;
      margin-right: 6px;
      font-size: 10px;
      transition: transform 0.2s;
    }
    details.reasoning-details[open] > summary::before {
      transform: rotate(90deg);
    }

    .prose pre { background-color: #1f2937 !important; margin-top: 0.5em; margin-bottom: 0.5em; }
    .prose p { margin-top: 0.5em; margin-bottom: 0.5em; }
    .prose p:first-child { margin-top: 0; }
    .prose p:last-child { margin-bottom: 0; }

    .lang-sep {
      display: block;
      text-align: center;
      margin: 6px 0;
      user-select: none;
      opacity: 0.3;
      letter-spacing: 2px;
    }
    .lang-sep::before {
      content: '————';
    }
    body.day-mode .lang-sep {
      opacity: 0.25;
    }

    .panel-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 60;
    }
    .panel-modal.hidden { display: none; }
    .panel-backdrop {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .prompt-panel-container {
      width: 92%;
      max-width: 760px;
      max-height: 86vh;
      background: #111827;
      border: 1px solid #374151;
      border-radius: 18px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 1;
    }

    .prompt-panel-header {
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:16px 18px;
      border-bottom:1px solid #374151;
      background:#0f172a;
    }

    .prompt-panel-body {
      padding: 16px;
      overflow-y: auto;
      flex: 1;
    }

    .prompt-toolbar {
      display:flex;
      gap:10px;
      margin-bottom:14px;
      flex-wrap: wrap;
    }

    .prompt-toolbar button {
      border:none;
      border-radius:10px;
      padding:10px 14px;
      cursor:pointer;
      font-size:14px;
      color:#fff;
      transition: all .2s;
    }

    .prompt-add-btn { background:#2563eb; }
    .prompt-add-btn:hover { background:#1d4ed8; }

    .prompt-list {
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .prompt-item {
      background:#1f2937;
      border:1px solid #374151;
      border-radius:14px;
      padding:14px;
    }

    .prompt-item-header {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }

    .prompt-title {
      font-size:15px;
      font-weight:600;
      color:#fff;
      word-break: break-word;
    }

    .prompt-preview {
      color:#cbd5e1;
      font-size:13px;
      line-height:1.6;
      white-space: pre-wrap;
      word-break: break-word;
      margin-top: 6px;
    }

    .prompt-actions {
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      flex-shrink:0;
      align-items:center;
    }

    .prompt-action-btn {
      border:none;
      border-radius:8px;
      padding:7px 10px;
      font-size:12px;
      cursor:pointer;
      color:#fff;
      transition: all .2s;
    }

    .prompt-use-btn {
      background: rgba(59, 130, 246, 0.10);
      color: #cfe0ff;
      border: 1px solid rgba(96,165,250,0.18);
      border-radius: 9px;
      padding: 7px 12px;
      font-size: 12px;
      cursor: pointer;
      transition: all .2s;
    }
    .prompt-use-btn:hover {
      background: rgba(59, 130, 246, 0.16);
      border-color: rgba(96,165,250,0.28);
      color: #e6f0ff;
    }

    .prompt-icon-btn {
      width: 30px;
      height: 30px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      color: #94a3b8;
      border-radius: 8px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition: all .2s;
      padding: 0;
    }
    .prompt-icon-btn:hover {
      background: rgba(255,255,255,0.08);
      color: #e5e7eb;
      border-color: rgba(255,255,255,0.14);
    }
    .prompt-icon-btn.delete:hover {
      background: rgba(220,38,38,0.10);
      color: #fca5a5;
      border-color: rgba(220,38,38,0.18);
    }

    .prompt-empty {
      text-align:center;
      color:#9ca3af;
      padding:40px 12px;
      border:1px dashed #4b5563;
      border-radius:14px;
      background:#111827;
    }

    .prompt-form {
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .prompt-input, .prompt-textarea {
      width:100%;
      background:#111827;
      color:#fff;
      border:1px solid #4b5563;
      border-radius:10px;
      padding:12px;
      outline:none;
    }

    .prompt-input:focus, .prompt-textarea:focus {
      border-color:#3b82f6;
    }

    .prompt-textarea {
      min-height:180px;
      resize:vertical;
      line-height:1.6;
    }

    .prompt-form-actions {
      display:flex;
      justify-content:flex-end;
      gap:10px;
      margin-top:6px;
    }

    .prompt-form-actions button {
      border:none;
      border-radius:10px;
      padding:10px 16px;
      cursor:pointer;
      font-size:14px;
      color:#fff;
    }

    .btn-gray { background:#4b5563; }
    .btn-blue { background:#2563eb; }
    .btn-gray:hover { background:#374151; }
    .btn-blue:hover { background:#1d4ed8; }

    .prompt-form-topbar {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:2px;
    }

    .prompt-form-label {
      font-size:13px;
      color:#9ca3af;
    }

    .prompt-ai-inline {
      display:flex;
      align-items:center;
      gap:8px;
      color:#94a3b8;
      flex-shrink:0;
    }

    .prompt-ai-opt-btn {
      width:32px;
      height:32px;
      border-radius:9999px;
      border:1px solid rgba(148,163,184,0.22);
      background:rgba(255,255,255,0.04);
      color:#9ca3af;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all .2s;
      flex-shrink:0;
    }

    .prompt-ai-opt-btn:hover {
      color:#dbeafe;
      border-color:rgba(96,165,250,0.45);
      background:rgba(59,130,246,0.10);
      transform:translateY(-1px);
    }

    .prompt-ai-opt-btn:disabled {
      opacity:0.5;
      cursor:not-allowed;
      transform:none;
    }

    .prompt-ai-label {
      font-size:12px;
      color:#7f8ea3;
      user-select:none;
      white-space:nowrap;
    }

    .compare-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin-top:14px;
    }

    .compare-box {
      background:#111827;
      border:1px solid #374151;
      border-radius:10px;
      padding:12px;
      min-height:180px;
      white-space:pre-wrap;
      word-break:break-word;
      color:#e5e7eb;
      font-size:13px;
      line-height:1.6;
      overflow-y:auto;
      max-height:42vh;
    }

    .compare-title {
      font-size:13px;
      color:#9ca3af;
      margin-bottom:8px;
    }

    .modal-desc {
      font-size:13px;
      color:#cbd5e1;
      line-height:1.7;
      margin-top:6px;
    }

    .loading-spinner {
      width:16px;
      height:16px;
      border:2px solid rgba(255,255,255,.25);
      border-top-color:#fff;
      border-radius:50%;
      animation:spin .8s linear infinite;
    }

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

    @media (max-width: 640px) {
      .prompt-item-header {
        flex-direction: column;
      }
      .prompt-actions {
        width:100%;
      }
      .compare-grid {
        grid-template-columns:1fr;
      }
      .compare-box {
        max-height: 30vh;
      }
      .settings-panel-card {
        width: 94% !important;
        padding: 20px 16px !important;
        border-radius: 24px !important;
      }
      .settings-api-row {
        grid-template-columns: minmax(0, 1fr) 40px;
        gap: 8px;
      }
      .settings-save-key-btn {
        grid-column: 1 / -1;
        min-width: 54px;
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 14px;
      }
      .settings-font-grid {
        gap: 6px !important;
      }
      .font-size-option {
        min-width: 0;
        font-size: 13px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .input-container {
        padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
      }
      .input-shell {
        padding: 10px 12px 10px;
        border-radius: 24px;
      }
      .input-toolbar {
        margin-bottom: 8px;
        gap: 8px;
      }
      .toolbar-input-counter {
        font-size: 11px;
      }
      .deepthink-chip {
        min-height: 32px;
        padding: 0 10px;
      }
      .deepthink-chip-text {
        font-size: 12px;
      }
      .deepthink-chip-badge {
        font-size: 10px;
        padding: 3px 5px;
      }
      .input-wrapper {
        gap: 10px;
        padding: 7px 7px 7px 12px;
        border-radius: 20px;
      }
      #input {
        min-height: 42px;
        max-height: 96px;
        font-size: 15px !important;
      }
      #sendBtn {
        min-width: 44px;
        width: 44px;
        height: 44px;
      }
    }

/* generated from inline style="..." */
.inl_0201436a24 { scrollbar-width: none;-ms-overflow-style: none; }
.inl_fd9f6e7d33 { max-width: 920px; }

/* ========== 存储用量样式 ========== */
.storage-usage-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 1px 0 8px;
  user-select: none;
}

.storage-usage-text {
  font-size: 11px;
  color: #6b7280;
  line-height: 1;
  transition: color 0.3s;
}

.storage-usage-text.storage-warning {
  color: #ef4444;
  font-weight: 500;
}

.storage-warning-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
  cursor: pointer;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.storage-warning-icon:hover {
  opacity: 0.7;
}

.storage-warning-icon.hidden {
  display: none;
}

/* ========== 日间模式样式 ========== */

/* Header */
body.day-mode .fixed.top-0.left-0.right-0 {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom-color: #d1d5db !important;
}
body.day-mode h1 {
  color: #111827 !important;
}
body.day-mode #menuBtn {
  color: #111827 !important;
}
body.day-mode #openInfoBtn,
body.day-mode #openDonateBtn {
  color: #4b5563 !important;
}
body.day-mode #openInfoBtn:hover,
body.day-mode #openDonateBtn:hover {
  color: #111827 !important;
}

/* Sidebar */
body.day-mode #sidebar {
  background: #ffffff !important;
  border-right-color: #d1d5db !important;
}
body.day-mode #sidebar .p-4.border-b {
  border-bottom-color: #e5e7eb !important;
}
body.day-mode #sidebar .p-4.border-t {
  border-top-color: #e5e7eb !important;
}
body.day-mode #sidebar .text-sm.text-gray-300 {
  color: #374151 !important;
  font-weight: 500;
}
body.day-mode #sidebar .bg-gray-700 {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  font-weight: 500;
}
body.day-mode #sidebar .bg-gray-700:hover {
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}
body.day-mode #sidebar button:not(.bg-blue-600):not(.bg-red-600\/90):not(.bg-gray-700) {
  color: #111827 !important;
}
body.day-mode #sidebar .w-9.h-5 {
  background: #d1d5db !important;
}
body.day-mode #sidebar .peer:checked + .w-9.h-5 {
  background: #3b82f6 !important;
}
body.day-mode #sidebar select,
body.day-mode #sidebar input[type=number] {
  background: #f9fafb !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}
body.day-mode #sidebar select:focus,
body.day-mode #sidebar input[type=number]:focus {
  border-color: #3b82f6 !important;
}
body.day-mode #sidebar .text-xs.text-gray-400 {
  color: #4b5563 !important;
  font-weight: 500;
}
body.day-mode #sidebar .bg-red-600\/90 {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
  font-weight: 500;
}
body.day-mode #sidebar .bg-red-600\/90:hover {
  background: #fecaca !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}
body.day-mode #sidebar .bg-blue-600 {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border: 1px solid #2563eb !important;
  font-weight: 500;
}
body.day-mode #sidebar .bg-blue-600:hover {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
}

/* 日间模式 - 存储用量 */
body.day-mode .storage-usage-text {
  color: #9ca3af !important;
}
body.day-mode .storage-usage-text.storage-warning {
  color: #dc2626 !important;
}

body.day-mode .bg-blue-600 {
  background: #3b82f6 !important;
  color: white !important;
}
body.day-mode .bg-blue-600:hover {
  background: #2563eb !important;
}
body.day-mode .btn-blue {
  background: #3b82f6 !important;
  color: white !important;
}
body.day-mode .btn-blue:hover {
  background: #2563eb !important;
}

/* Tabs */
body.day-mode .tab {
  color: #111827 !important;
  font-weight: 500;
}
body.day-mode .tab:hover:not(.active) {
  background: #f3f4f6 !important;
}
body.day-mode .tab.active {
  background: #3b82f6 !important;
  color: white !important;
}
body.day-mode .tab-btn {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #374151 !important;
}
body.day-mode .tab-btn:hover {
  background: rgba(0, 0, 0, 0.15) !important;
  color: #111827 !important;
}
body.day-mode .tab.active .tab-btn {
  background: rgba(255, 255, 255, 0.18) !important;
  color: white !important;
}
body.day-mode .tab.active .tab-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  color: white !important;
}

/* Chat area */
body.day-mode #chat {
  background: #f3f4f6 !important;
}

/* Messages */
body.day-mode .message-box.bg-gray-800 {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
body.day-mode .message-box.bg-blue-600 {
  color: white !important;
}
body.day-mode .msg-content.prose.prose-invert {
  color: #111827 !important;
}
body.day-mode .message-box.bg-blue-600 .msg-content.prose.prose-invert {
  color: #ffffff !important;
}
body.day-mode .message-box.bg-blue-600 .msg-content.prose.prose-invert h1,
body.day-mode .message-box.bg-blue-600 .msg-content.prose.prose-invert h2,
body.day-mode .message-box.bg-blue-600 .msg-content.prose.prose-invert h3,
body.day-mode .message-box.bg-blue-600 .msg-content.prose.prose-invert h4,
body.day-mode .message-box.bg-blue-600 .msg-content.prose.prose-invert h5,
body.day-mode .message-box.bg-blue-600 .msg-content.prose.prose-invert h6 {
  color: #ffffff !important;
}
body.day-mode .message-box.bg-blue-600 .msg-content.prose.prose-invert a {
  color: #dbeafe !important;
}
body.day-mode .message-box.bg-blue-600 .msg-content.prose.prose-invert code {
  color: #fecaca !important;
  background: rgba(255,255,255,0.15) !important;
}
body.day-mode .message-box.bg-blue-600 .msg-content.prose.prose-invert pre {
  background: rgba(0,0,0,0.25) !important;
}
body.day-mode .message-box.bg-blue-600 .msg-content.prose.prose-invert pre code {
  color: #e5e7eb !important;
  background: transparent !important;
}
body.day-mode .message-box.bg-blue-600 .msg-content.prose.prose-invert strong {
  color: #ffffff !important;
}
body.day-mode .message-box.bg-blue-600 .msg-content.prose.prose-invert blockquote {
  color: #e5e7eb !important;
  border-left-color: rgba(255,255,255,0.3) !important;
}
body.day-mode .message-box.bg-gray-800 .msg-content.prose.prose-invert h1,
body.day-mode .message-box.bg-gray-800 .msg-content.prose.prose-invert h2,
body.day-mode .message-box.bg-gray-800 .msg-content.prose.prose-invert h3,
body.day-mode .message-box.bg-gray-800 .msg-content.prose.prose-invert h4,
body.day-mode .message-box.bg-gray-800 .msg-content.prose.prose-invert h5,
body.day-mode .message-box.bg-gray-800 .msg-content.prose.prose-invert h6 {
  color: #111827 !important;
  font-weight: 600;
}
body.day-mode .message-box.bg-gray-800 .msg-content.prose.prose-invert a {
  color: #2563eb !important;
  font-weight: 500;
}
body.day-mode .message-box.bg-gray-800 .msg-content.prose.prose-invert code {
  color: #be123c !important;
  background: #fef2f2 !important;
  font-weight: 500;
}
body.day-mode .message-box.bg-gray-800 .msg-content.prose.prose-invert pre {
  background: #1f2937 !important;
}
body.day-mode .message-box.bg-gray-800 .msg-content.prose.prose-invert pre code {
  color: #e5e7eb !important;
  background: transparent !important;
}
body.day-mode .message-box.bg-gray-800 .msg-content.prose.prose-invert strong {
  color: #111827 !important;
  font-weight: 600;
}
body.day-mode .message-box.bg-gray-800 .msg-content.prose.prose-invert blockquote {
  color: #374151 !important;
  border-left-color: #d1d5db !important;
  font-weight: 500;
}

body.day-mode .group-narration-content {
  color: rgba(107, 114, 128, 0.84);
}

/* Group chat agent typing indicator (three dots) */
.group-agent-typing {
  text-align: center;
  pointer-events: none;
}

.group-agent-typing-inner {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  height: 18px;
}

.group-agent-typing-inner .typing-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(156, 163, 175, 0.72);
  opacity: 0.25;
  animation: groupTypingDot 1.1s infinite ease-in-out;
}

.group-agent-typing-inner .typing-dot:nth-child(2) { animation-delay: 0.15s; }
.group-agent-typing-inner .typing-dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes groupTypingDot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 0.9; transform: translateY(-2px); }
}

body.day-mode .group-agent-typing-inner .typing-dot {
  background: rgba(107, 114, 128, 0.70);
}

/* Assistant meta */
body.day-mode .assistant-meta {
  color: #4b5563 !important;
}
body.day-mode .user-input-meta {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Generation status */
body.day-mode .generation-status {
  color: #b45309 !important;
  font-weight: 500;
}

/* Reasoning details */
body.day-mode .reasoning-details {
  border-color: #d1d5db !important;
  background: #f9fafb !important;
}
body.day-mode .reasoning-details summary {
  color: #374151 !important;
  font-weight: 600;
}
body.day-mode .reasoning-content {
  border-top-color: #e5e7eb !important;
  color: #374151 !important;
}

/* Message buttons */
body.day-mode .copy-btn,
body.day-mode .regenerate-btn,
body.day-mode .edit-btn,
body.day-mode .delete-btn,
body.day-mode .reply-btn,
body.day-mode .favorite-btn {
  background: rgba(0, 0, 0, 0.12) !important;
  color: #1f2937 !important;
}
body.day-mode .copy-btn:hover,
body.day-mode .regenerate-btn:hover,
body.day-mode .edit-btn:hover,
body.day-mode .reply-btn:hover,
body.day-mode .favorite-btn:hover {
  background: rgba(0, 0, 0, 0.18) !important;
  color: #111827 !important;
}
body.day-mode .delete-btn:hover {
  background: rgba(220, 38, 38, 0.15) !important;
  color: #dc2626 !important;
}

/* User message (blue background) buttons in day mode */
body.day-mode .message-box.bg-blue-600 .copy-btn,
body.day-mode .message-box.bg-blue-600 .regenerate-btn,
body.day-mode .message-box.bg-blue-600 .edit-btn,
body.day-mode .message-box.bg-blue-600 .delete-btn,
body.day-mode .message-box.bg-blue-600 .reply-btn,
body.day-mode .message-box.bg-blue-600 .favorite-btn {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}
body.day-mode .message-box.bg-blue-600 .copy-btn:hover,
body.day-mode .message-box.bg-blue-600 .regenerate-btn:hover,
body.day-mode .message-box.bg-blue-600 .edit-btn:hover,
body.day-mode .message-box.bg-blue-600 .reply-btn:hover,
body.day-mode .message-box.bg-blue-600 .favorite-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}
body.day-mode .favorite-btn.favorited,
body.day-mode .message-box.bg-blue-600 .favorite-btn.favorited {
  color: #f59e0b !important;
}
body.day-mode .message-box.bg-blue-600 .delete-btn:hover {
  background: rgba(248, 113, 113, 0.3) !important;
  color: #fecaca !important;
}

/* Version control */
body.day-mode .version-control {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #1f2937 !important;
  font-weight: 500;
}
body.day-mode .version-btn:hover {
  color: #111827 !important;
}

/* Input container */
body.day-mode .input-container {
  background: #f9fafb !important;
  border-top-color: transparent !important;
}
body.day-mode .input-container::before {
  background: linear-gradient(to bottom, rgba(249, 250, 251, 0) 0%, rgba(249, 250, 251, 0.86) 82%, #f9fafb 100%) !important;
}
body.day-mode .input-shell {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(209, 213, 219, 0.95) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
}
body.day-mode .toolbar-input-counter {
  color: #6b7280 !important;
}
body.day-mode .deepthink-chip {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}
body.day-mode .deepthink-chip:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
}
body.day-mode .deepthink-chip-icon {
  color: #2563eb !important;
}
body.day-mode .deepthink-chip-badge {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #2563eb !important;
}
body.day-mode .deepthink-chip:has(.peer:checked) {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
}
body.day-mode .deepthink-chip:has(.peer:checked) .deepthink-chip-icon,
body.day-mode .deepthink-chip:has(.peer:checked) .deepthink-chip-badge {
  color: #1d4ed8 !important;
}
body.day-mode .deepthink-chip:has(.peer:checked) .deepthink-chip-badge {
  background: rgba(59, 130, 246, 0.18) !important;
}
body.day-mode #input {
  background: transparent !important;
  border-color: transparent !important;
  color: #111827 !important;
  font-weight: 400;
}
body.day-mode #input::placeholder {
  color: #9ca3af !important;
}
body.day-mode .input-wrapper {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}
body.day-mode #sendBtn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25) !important;
}
body.day-mode #sendBtn.plus-mode {
  background: #ffffff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none !important;
}
body.day-mode #sendBtn.plus-mode:hover {
  background: #f9fafb !important;
  color: #111827 !important;
}
body.day-mode #sendBtn.plus-mode:active {
  background: #f3f4f6 !important;
}
body.day-mode #sendBtn.stop-mode {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28) !important;
}
body.day-mode #sendBtn.stop-mode:hover {
  background: linear-gradient(135deg, #f87171 0%, #dc2626 100%) !important;
}
body.day-mode #sendBtn.stop-mode:active {
  background: #b91c1c !important;
}

/* Scroll to bottom button */
body.day-mode .scroll-to-bottom-btn {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #d1d5db !important;
  color: #1f2937 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
body.day-mode .scroll-to-bottom-btn:hover {
  background: #ffffff !important;
  color: #111827 !important;
}

/* Edit panel */
body.day-mode .edit-panel {
  background: rgba(0, 0, 0, 0.5) !important;
}
body.day-mode .edit-container {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
body.day-mode .edit-container h3 {
  color: #111827 !important;
  font-weight: 600;
}
body.day-mode .edit-textarea,
body.day-mode .edit-input {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
  font-weight: 400;
}
body.day-mode .edit-textarea:focus,
body.day-mode .edit-input:focus {
  border-color: #3b82f6 !important;
}
body.day-mode .edit-btn-cancel {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  font-weight: 500;
}
body.day-mode .edit-btn-cancel:hover {
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

/* Panels (key, info, donate) */
body.day-mode #keyPanel,
body.day-mode #infoPanel,
body.day-mode #donatePanel {
  background: rgba(0, 0, 0, 0.5) !important;
}
body.day-mode #keyPanel .bg-gray-900,
body.day-mode #infoPanel .bg-gray-900,
body.day-mode #donatePanel .bg-gray-900 {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
body.day-mode #keyPanel h3,
body.day-mode #infoPanel h3,
body.day-mode #donatePanel h3 {
  color: #111827 !important;
  font-weight: 600;
}
body.day-mode #keyPanel .text-gray-300,
body.day-mode #infoPanel .text-gray-300,
body.day-mode #donatePanel .text-gray-300 {
  color: #374151 !important;
  font-weight: 400;
}
body.day-mode #keyPanel .text-white,
body.day-mode #infoPanel .text-white,
body.day-mode #donatePanel .text-white,
body.day-mode #characterPanel .text-white,
body.day-mode #characterEditPanel .text-white,
body.day-mode #createGroupPanel .text-white {
  color: #111827 !important;
  font-weight: 500;
}
body.day-mode #apiKeyInput {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
  font-weight: 400;
}
body.day-mode #apiKeyInput::placeholder {
  color: #9ca3af !important;
}
body.day-mode #apiKeyInput:focus {
  border-color: #3b82f6 !important;
}
body.day-mode #keyPanel .bg-gray-800\/50 {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}
body.day-mode #settingsPanel {
  background: rgba(0, 0, 0, 0.5) !important;
}
body.day-mode #settingsPanel .bg-gray-900 {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
body.day-mode #settingsPanel h3,
body.day-mode #settingsPanel h4 {
  color: #111827 !important;
  font-weight: 600;
}
body.day-mode #settingsApiKeyInput {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}
body.day-mode #settingsApiKeyInput::placeholder {
  color: #9ca3af !important;
}
body.day-mode #settingsApiKeyInput:focus {
  border-color: #3b82f6 !important;
}
body.day-mode #settingsSaveKeyBtn {
  background: #3b82f6 !important;
  color: white !important;
}
body.day-mode #settingsSaveKeyBtn:hover {
  background: #2563eb !important;
}
.settings-icon-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.day-mode #settingsCopyKeyBtn {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  color: #6b7280 !important;
}
body.day-mode #settingsCopyKeyBtn:hover {
  background: #e5e7eb !important;
  color: #374151 !important;
}
body.day-mode #settingsCloseBtn {
  background: #f3f4f6 !important;
  color: #374151 !important;
}
body.day-mode #settingsCloseBtn:hover {
  background: #e5e7eb !important;
}

body.day-mode .settings-day-mode-container {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}
body.day-mode .settings-day-mode-container .text-gray-300 {
  color: #374151 !important;
}
body.day-mode .bg-gray-800 {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}
body.day-mode .bg-gray-800 .text-gray-400 {
  color: #6b7280 !important;
}
body.day-mode .bg-gray-800 .text-gray-300 {
  color: #374151 !important;
}

/* Settings panel: ensure day-mode text contrast for memory strategy cards and similar blocks */
body.day-mode #settingsPanel .bg-gray-800 .text-white {
  color: #111827 !important;
}
body.day-mode #settingsPanel label.bg-gray-800:hover {
  background: #eef2f7 !important;
  border-color: #d1d5db !important;
}
body.day-mode #settingsPanel input[type=radio] {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

/* Prompt panel */
body.day-mode .panel-modal {
  background: rgba(0, 0, 0, 0.5) !important;
}
body.day-mode .prompt-panel-container {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
body.day-mode .prompt-panel-header {
  background: #f9fafb !important;
  border-bottom-color: #e5e7eb !important;
}
body.day-mode .prompt-panel-header h3 {
  color: #111827 !important;
  font-weight: 600;
}
body.day-mode .prompt-panel-header button {
  color: #4b5563 !important;
}
body.day-mode .prompt-panel-header button:hover {
  color: #111827 !important;
}
body.day-mode .prompt-item {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}
body.day-mode .prompt-title {
  color: #111827 !important;
  font-weight: 600;
}
body.day-mode .prompt-preview {
  color: #374151 !important;
  font-weight: 400;
}
body.day-mode .prompt-input,
body.day-mode .prompt-textarea {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
  font-weight: 400;
}
body.day-mode .prompt-input::placeholder,
body.day-mode .prompt-textarea::placeholder {
  color: #9ca3af !important;
}
body.day-mode .prompt-input:focus,
body.day-mode .prompt-textarea:focus {
  border-color: #3b82f6 !important;
}
body.day-mode .btn-gray {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  font-weight: 500;
}
body.day-mode .btn-gray:hover {
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}
body.day-mode .prompt-form-label {
  color: #4b5563 !important;
  font-weight: 500;
}
body.day-mode .prompt-ai-opt-btn {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(107, 114, 128, 0.3) !important;
  color: #4b5563 !important;
}
body.day-mode .prompt-ai-opt-btn:hover {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  color: #2563eb !important;
}
body.day-mode .prompt-ai-label {
  color: #4b5563 !important;
  font-weight: 500;
}
body.day-mode .prompt-icon-btn {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #4b5563 !important;
}
body.day-mode .prompt-icon-btn:hover {
  background: rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  color: #1f2937 !important;
}
body.day-mode .prompt-icon-btn.delete:hover {
  background: rgba(220, 38, 38, 0.15) !important;
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
}
body.day-mode .prompt-use-btn {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #1d4ed8 !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
  font-weight: 500;
}
body.day-mode .prompt-use-btn:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: #1e40af !important;
}
body.day-mode .prompt-empty {
  color: #6b7280 !important;
  border-color: #d1d5db !important;
  background: #f9fafb !important;
  font-weight: 500;
}
body.day-mode .compare-box {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #1f2937 !important;
  font-weight: 400;
}
body.day-mode .compare-title {
  color: #4b5563 !important;
  font-weight: 600;
}
body.day-mode .modal-desc {
  color: #374151 !important;
  font-weight: 400;
}

/* Token limit warning */
body.day-mode .text-xs.text-gray-500.text-center {
  color: #4b5563 !important;
  font-weight: 500;
}
body.day-mode .text-xs.text-gray-500.text-center .bg-gray-800 {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}
body.day-mode .text-xs.text-gray-500.text-center #promptText {
  color: #374151 !important;
  font-weight: 400;
}
body.day-mode .text-xs.text-gray-500.text-center #copyPromptBtn {
  background: #f3f4f6 !important;
  color: #4b5563 !important;
}
body.day-mode .text-xs.text-gray-500.text-center #copyPromptBtn:hover {
  color: #1f2937 !important;
  background: #e5e7eb !important;
}

/* Toast */
body.day-mode .toast-like-element {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  font-weight: 500;
}

/* Sidebar overlay */
body.day-mode #sidebarOverlay {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* Prose inversion fix for day mode */
body.day-mode .prose.prose-invert {
  color: inherit !important;
}
body.day-mode .prose.prose-invert :where(h1, h2, h3, h4, h5, h6) {
  color: inherit !important;
}
body.day-mode .prose.prose-invert :where(a) {
  color: #2563eb !important;
}
body.day-mode .prose.prose-invert :where(strong) {
  color: inherit !important;
}
body.day-mode .prose.prose-invert :where(code) {
  color: #be123c !important;
  background: #fef2f2 !important;
}
body.day-mode .prose.prose-invert :where(pre) {
  background: #1f2937 !important;
}
body.day-mode .prose.prose-invert :where(pre code) {
  color: #e5e7eb !important;
  background: transparent !important;
}
body.day-mode .prose.prose-invert :where(blockquote) {
  color: #374151 !important;
  border-left-color: #d1d5db !important;
}

/* Download panel */
.download-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.download-option-btn {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #4b5563;
  border-radius: 10px;
  background: #1f2937;
  color: #f5f5f7;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.download-option-btn:hover {
  background: #374151;
  border-color: #6b7280;
}
.download-option-btn.bg-blue-600 {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}
.download-option-btn.bg-blue-600:hover {
  background: #2563eb;
  border-color: #2563eb;
}
body.day-mode .download-option-btn {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #1f2937;
}
body.day-mode .download-option-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
body.day-mode .download-option-btn.bg-blue-600 {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: white !important;
}
body.day-mode .download-option-btn.bg-blue-600:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
}
body.day-mode #downloadPanel .text-gray-400 {
  color: #6b7280 !important;
}

/* FORCE SAVE KEY BUTTON WHITE */
body.day-mode #saveKey,
body.day-mode #keyPanel button.bg-blue-600,
body.day-mode button#saveKey.bg-blue-600,
body.day-mode button#saveKey {
  background: #3b82f6 !important;
  color: #ffffff !important;
}
body.day-mode #saveKey:hover,
body.day-mode #keyPanel button.bg-blue-600:hover,
body.day-mode button#saveKey.bg-blue-600:hover,
body.day-mode button#saveKey:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}
body.day-mode #saveKey *,
body.day-mode #keyPanel button.bg-blue-600 *,
body.day-mode button#saveKey.bg-blue-600 *,
body.day-mode button#saveKey * {
  color: #ffffff !important;
}

/* ========== 空对话提示样式 ========== */
#emptyChatHint {
  z-index: 10;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

/* 日间模式 - 空对话提示 */
body.day-mode #emptyChatHint .text-gray-500 {
  color: #9ca3af !important;
}

/* 输入工具栏 - 背景信息按钮（复用 deepthink-chip 风格） */
.bg-info-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1px solid #374151;
  background: #111827;
  color: #d1d5db;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
  font-size: 13px;
}
.bg-info-chip:hover {
  background: #1f2937;
  border-color: #4b5563;
  color: #f3f4f6;
}
.bg-info-chip svg {
  color: #93c5fd;
  flex-shrink: 0;
}
.bg-info-chip-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.txt-upload-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1px solid #374151;
  background: #111827;
  color: #d1d5db;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
  font-size: 13px;
}
.txt-upload-chip:hover {
  background: #1f2937;
  border-color: #4b5563;
  color: #f3f4f6;
}
.txt-upload-chip svg {
  color: #93c5fd;
  flex-shrink: 0;
}
.txt-upload-chip-text {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.txt-attachment-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.txt-attachment-main {
  min-width: 0;
  flex: 1;
}
.txt-attachment-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 4px;
}
.txt-attachment-badge {
  flex-shrink: 0;
  border-radius: 9999px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1;
  background: rgba(59, 130, 246, 0.16);
  color: #93c5fd;
  font-weight: 700;
}
.txt-attachment-name {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #f3f4f6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.txt-attachment-mode {
  flex-shrink: 0;
  border-radius: 9999px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
}
.txt-attachment-mode.mode-summary {
  background: rgba(168, 85, 247, 0.16);
  color: #d8b4fe;
}
.txt-attachment-mode.mode-error {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
}
.txt-attachment-meta {
  font-size: 12px;
  line-height: 1.5;
  color: #9ca3af;
}
.txt-attachment-remove {
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.txt-attachment-remove:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fecaca;
}
body.day-mode .bg-info-chip {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}
body.day-mode .bg-info-chip:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
}
body.day-mode .bg-info-chip svg {
  color: #2563eb !important;
}
body.day-mode .txt-upload-chip {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}
body.day-mode .txt-upload-chip:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
}
body.day-mode .txt-upload-chip svg {
  color: #2563eb !important;
}
body.day-mode .composer-action-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: #dbe3ee !important;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.14) !important;
}
body.day-mode .composer-action-item {
  background: #f8fafc !important;
  color: #374151 !important;
  box-shadow: inset 0 0 0 1px #e5e7eb !important;
}
body.day-mode .composer-action-item:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
}
body.day-mode .composer-action-icon {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.1) !important;
}
body.day-mode .composer-action-subtitle {
  color: #6b7280 !important;
}
body.day-mode .txt-attachment-bar {
  background: #f8fafc !important;
  border-color: #dbe3ee !important;
}
body.day-mode .txt-attachment-badge {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #2563eb !important;
}
body.day-mode .txt-attachment-name {
  color: #111827 !important;
}
body.day-mode .txt-attachment-mode {
  background: #e5e7eb !important;
  color: #374151 !important;
}
body.day-mode .txt-attachment-mode.mode-summary {
  background: rgba(168, 85, 247, 0.12) !important;
  color: #7c3aed !important;
}
body.day-mode .txt-attachment-mode.mode-error {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
}
body.day-mode .txt-attachment-meta {
  color: #6b7280 !important;
}
body.day-mode .txt-attachment-remove {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #374151 !important;
}
body.day-mode .txt-attachment-remove:hover {
  background: rgba(220, 38, 38, 0.12) !important;
  color: #b91c1c !important;
}

/* 背景信息面板 textarea */
#bgInfoStoryInput {
  resize: vertical;
  min-height: 80px;
  max-height: 200px;
}

/* ========== 指令市场样式 ========== */
.prompt-market-container {
  width: 92%;
  max-width: 760px;
  max-height: 86vh;
  background: #111827;
  border: 1px solid #374151;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.favorites-panel-container {
  max-width: 620px;
}

.favorite-preview-container {
  max-width: 620px;
}

.favorites-list {
  padding: 16px;
}

.favorites-empty {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  text-align: center;
  border: 1px dashed #374151;
  border-radius: 18px;
  background: #0f172a;
  padding: 24px;
}

.favorite-item {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 18px;
  padding: 16px;
  box-shadow: none;
}

.favorite-item + .favorite-item {
  margin-top: 14px;
}

.favorite-item-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.favorite-item-tab,
.favorite-item-role {
  font-size: 12px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.favorite-item-preview {
  color: #f3f4f6;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.favorite-item-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.favorite-item-btn {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #94a3b8;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 30px;
}

.favorite-item-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #e5e7eb;
  border-color: rgba(255,255,255,0.14);
}

.favorite-item-btn.danger {
  color: #f87171;
  border-color: rgba(220,38,38,0.18);
}

.favorite-item-btn.danger:hover {
  background: rgba(220,38,38,0.10);
  color: #fca5a5;
  border-color: rgba(220,38,38,0.18);
}

.favorite-target-highlight {
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.75), 0 10px 30px rgba(250, 204, 21, 0.18);
  transition: box-shadow 0.2s ease;
}

.favorite-preview-body {
  padding: 16px;
}

.favorite-preview-content {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.8;
  color: #f3f4f6;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 18px;
  padding: 18px;
  min-height: 180px;
}

.prompt-market-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #374151;
  background: #0f172a;
}

.prompt-market-header > div:first-child {
  margin-left: 6px;
}

.prompt-market-header > div:last-child {
  margin-right: -4px;
}

.prompt-market-refresh-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-right: 10px;
}

.prompt-market-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05) rotate(180deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.prompt-market-refresh-btn:active {
  transform: scale(0.95);
}

.prompt-market-refresh-btn.spinning svg {
  animation: spin 0.8s linear infinite;
}

.prompt-market-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.prompt-market-content {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 18px;
  padding: 18px;
  min-height: 120px;
  max-height: 300px;
  width: 100%;
  resize: none;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.7;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4b5563 #1f2937;
  outline: none;
}

.prompt-market-content:focus {
  border-color: rgba(96, 165, 250, 0.35);
}

.prompt-market-content::placeholder {
  color: #6b7280;
}

.prompt-market-content::-webkit-scrollbar {
  width: 6px;
}

.prompt-market-content::-webkit-scrollbar-track {
  background: #1f2937;
  border-radius: 3px;
}

.prompt-market-content::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 3px;
}

.prompt-market-content::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

.prompt-market-prompt-content {
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 智能生成按钮 */
.prompt-market-ai-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(96, 165, 250, 0.25);
  background: rgba(59, 130, 246, 0.12);
  color: #cfe0ff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.prompt-market-ai-btn:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(96, 165, 250, 0.35);
  color: #e6f0ff;
}

/* 生成按钮loading状态 */
#confirmAiGenerateBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#confirmAiGenerateBtn .loading-spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

#confirmAiGenerateBtn .loading-spinner.hidden {
  display: none;
}

.prompt-market-footer {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #374151;
  background: #0f172a;
}

.prompt-market-footer button {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #fff;
  transition: all 0.2s;
}

.bg-info-footer {
  flex-wrap: nowrap;
}

.bg-info-footer button {
  min-width: 0;
}

.story-archive-container {
  max-width: 920px;
}

.story-archive-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.story-archive-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
}

.story-archive-status.fresh {
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
}

.story-archive-status.warning {
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
}

.story-archive-status.loading {
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
}

.story-archive-status.error {
  background: rgba(248, 113, 113, 0.16);
  color: #fca5a5;
}

.story-archive-status.muted {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
}

.story-archive-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.story-archive-feedback.hidden {
  display: none;
}

.story-archive-feedback {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(30, 41, 59, 0.65);
}

.story-archive-feedback.loading {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.22);
}

.story-archive-feedback.error {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.2);
}

.story-archive-feedback.stale,
.story-archive-feedback.info {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
}

.story-archive-feedback.success {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.18);
}

.story-archive-feedback-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.story-archive-feedback-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.story-archive-feedback-title {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 600;
}

.story-archive-feedback-body {
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.7;
}

.story-archive-feedback-hint {
  margin-top: 10px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.6;
}

.story-archive-feedback-hint.hidden,
.story-archive-feedback-action.hidden {
  display: none;
}

.story-archive-feedback-action {
  flex-shrink: 0;
  border: none;
  border-radius: 9999px;
  min-height: 34px;
  padding: 0 14px;
  background: rgba(59, 130, 246, 0.16);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.story-archive-feedback-action:hover {
  background: rgba(59, 130, 246, 0.24);
}

.story-archive-meta {
  font-size: 12px;
  color: #94a3b8;
}

.story-archive-overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.story-archive-overview-card {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 16px;
  padding: 14px;
}

.story-archive-overview-label {
  font-size: 12px;
  color: #93c5fd;
  margin-bottom: 8px;
}

.story-archive-overview-value {
  color: #e5e7eb;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.story-archive-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.story-archive-section-title {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 600;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
}

.story-archive-section-title::-webkit-details-marker {
  display: none;
}

.story-archive-section-title::before {
  content: '▶';
  display: inline-block;
  font-size: 10px;
  color: #93c5fd;
  transition: transform 0.2s ease;
}

.story-archive-section[open] > .story-archive-section-title::before {
  transform: rotate(90deg);
}

.story-archive-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.story-archive-item {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 16px;
  padding: 14px;
}

.story-archive-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.story-archive-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #f8fafc;
}

.story-archive-item-meta {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
}

.story-archive-item-desc,
.story-archive-item-impact {
  font-size: 13px;
  line-height: 1.7;
  color: #cbd5e1;
}

.story-archive-item-impact {
  margin-top: 8px;
  color: #94a3b8;
}

.story-archive-quote {
  margin: 10px 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(96, 165, 250, 0.8);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: #f8fafc;
  line-height: 1.7;
  font-size: 12px;
  white-space: pre-wrap;
}

.story-archive-quote-wrap {
  margin: 10px 0;
}

.story-archive-quote-toggle {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #93c5fd;
}

.story-archive-quote-toggle::-webkit-details-marker {
  display: none;
}

.story-archive-quote-toggle::before {
  content: '▶';
  display: inline-block;
  font-size: 10px;
  transition: transform 0.2s ease;
}

.story-archive-quote-wrap[open] > .story-archive-quote-toggle::before {
  transform: rotate(90deg);
}

.story-archive-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.story-archive-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 9999px;
  background: rgba(59, 130, 246, 0.14);
  color: #bfdbfe;
  font-size: 12px;
}

.story-archive-chip.tone {
  background: rgba(244, 114, 182, 0.14);
  color: #f9a8d4;
}

.story-archive-chip.warning {
  background: rgba(245, 158, 11, 0.14);
  color: #fcd34d;
}

.story-archive-chip.resolved {
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
}

.story-archive-empty {
  padding: 16px;
  border: 1px dashed #374151;
  border-radius: 14px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.7;
}

.story-archive-refresh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#refreshStoryArchiveBtn.is-loading .story-archive-refresh-icon {
  animation: storyArchiveSpin 0.9s linear infinite;
}

#refreshStoryArchiveBtn.is-stop {
  background: rgba(248, 113, 113, 0.16);
  color: #fca5a5;
}

#refreshStoryArchiveBtn.is-stop:hover {
  background: rgba(248, 113, 113, 0.24);
}

#refreshStoryArchiveBtn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

@keyframes storyArchiveSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 日间模式 - 指令市场 */
body.day-mode .prompt-market-container {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

body.day-mode .prompt-market-header {
  background: #f9fafb !important;
  border-bottom-color: #e5e7eb !important;
}

body.day-mode .prompt-market-header h3 {
  color: #111827 !important;
  font-weight: 600;
}

body.day-mode .prompt-market-header button {
  color: #4b5563 !important;
}

body.day-mode .prompt-market-header button:hover {
  color: #111827 !important;
}


body.day-mode .prompt-market-content:focus {
  border-color: rgba(59, 130, 246, 0.35) !important;
}

body.day-mode .prompt-market-content::placeholder {
  color: #9ca3af !important;
}

body.day-mode .prompt-market-footer {
  background: #f9fafb !important;
  border-top-color: #e5e7eb !important;
}

body.day-mode .favorites-empty {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #6b7280;
}

body.day-mode .favorites-panel-container,
body.day-mode .favorite-preview-container {
  max-width: 620px;
}

body.day-mode .favorites-list {
  background: #ffffff;
}

body.day-mode .favorite-item {
  background: #f9fafb;
  border-color: #e5e7eb;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

body.day-mode .favorite-item-tab,
body.day-mode .favorite-item-role {
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
}

body.day-mode .favorite-item-preview {
  color: #111827;
}

body.day-mode .favorite-preview-content {
  color: #111827;
  background: #f9fafb;
  border-color: #e5e7eb;
}

body.day-mode .favorite-item-btn {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}

body.day-mode .favorite-item-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

body.day-mode .favorite-item-btn.danger {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.25);
}

body.day-mode .favorite-item-btn.danger:hover {
  background: rgba(220, 38, 38, 0.08);
}

body.day-mode .story-archive-status.fresh {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

body.day-mode .story-archive-status.warning {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

body.day-mode .story-archive-status.loading {
  background: rgba(251, 191, 36, 0.14);
  color: #b45309;
}

body.day-mode .story-archive-status.error {
  background: rgba(248, 113, 113, 0.12);
  color: #b91c1c;
}

body.day-mode .story-archive-status.muted {
  background: rgba(148, 163, 184, 0.12);
  color: #475569;
}

body.day-mode .story-archive-feedback {
  background: rgba(248, 250, 252, 0.92);
  border-color: #e5e7eb;
}

body.day-mode .story-archive-feedback.loading {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.2);
}

body.day-mode .story-archive-feedback.error {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.18);
}

body.day-mode .story-archive-feedback.stale,
body.day-mode .story-archive-feedback.info {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.16);
}

body.day-mode .story-archive-feedback.success {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.16);
}

body.day-mode .story-archive-meta,
body.day-mode .story-archive-item-meta,
body.day-mode .story-archive-item-impact,
body.day-mode .story-archive-empty,
body.day-mode .story-archive-feedback-hint {
  color: #64748b;
}

body.day-mode .story-archive-feedback-title,
body.day-mode .story-archive-feedback-body {
  color: #111827;
}

body.day-mode .story-archive-feedback-action {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

body.day-mode .story-archive-feedback-action:hover {
  background: rgba(37, 99, 235, 0.16);
}

body.day-mode #refreshStoryArchiveBtn.is-stop {
  background: rgba(248, 113, 113, 0.14) !important;
  border-color: rgba(248, 113, 113, 0.38) !important;
  color: #b91c1c !important;
}

body.day-mode #refreshStoryArchiveBtn.is-stop:hover {
  background: rgba(248, 113, 113, 0.2) !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
  color: #991b1b !important;
}

body.day-mode .story-archive-overview-card,
body.day-mode .story-archive-item {
  background: #f9fafb;
  border-color: #e5e7eb;
}

body.day-mode .story-archive-overview-label {
  color: #2563eb;
}

body.day-mode .story-archive-overview-value,
body.day-mode .story-archive-section-title,
body.day-mode .story-archive-item-title,
body.day-mode .story-archive-item-desc,
body.day-mode .story-archive-quote {
  color: #111827;
}

body.day-mode .story-archive-section-title::before,
body.day-mode .story-archive-quote-toggle,
body.day-mode .story-archive-quote-toggle::before {
  color: #2563eb;
}

body.day-mode .story-archive-quote {
  background: rgba(37, 99, 235, 0.04);
  border-left-color: rgba(37, 99, 235, 0.8);
}

body.day-mode .story-archive-chip {
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}

body.day-mode .story-archive-chip.tone {
  background: rgba(244, 114, 182, 0.12);
  color: #be185d;
}

body.day-mode .story-archive-chip.warning {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

body.day-mode .story-archive-chip.resolved {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}

/* 日间模式 - 刷新按钮 */
body.day-mode .prompt-market-refresh-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #6b7280 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.day-mode .prompt-market-refresh-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #111827 !important;
}

/* 日间模式 - 内容区域和滚动条 */
body.day-mode .prompt-market-content {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

body.day-mode .prompt-market-content::-webkit-scrollbar-track {
  background: #f9fafb !important;
}

body.day-mode .prompt-market-content::-webkit-scrollbar-thumb {
  background: #d1d5db !important;
}

body.day-mode .prompt-market-content::-webkit-scrollbar-thumb:hover {
  background: #9ca3af !important;
}

body.day-mode .prompt-market-prompt-content {
  color: #111827 !important;
}

body.day-mode #closePromptMarketBtn,
body.day-mode #closeAiGenerateBtn,
body.day-mode #closeStoryArchiveBtn {
  color: #6b7280 !important;
}
body.day-mode #closePromptMarketBtn:hover,
body.day-mode #closeAiGenerateBtn:hover,
body.day-mode #closeStoryArchiveBtn:hover {
  color: #111827 !important;
}

/* 日间模式 - 智能生成按钮 */
body.day-mode .prompt-market-ai-btn {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
  color: #1d4ed8 !important;
}

body.day-mode .prompt-market-ai-btn:hover {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: #1e40af !important;
}

/* 日间模式 - 智能生成对话框 */
body.day-mode #aiGeneratePromptPanel label {
  color: #374151 !important;
}

body.day-mode #aiGeneratePromptPanel .text-gray-500 {
  color: #6b7280 !important;
}

@media (max-width: 640px) {
  .prompt-market-footer {
    flex-direction: column;
  }

  .bg-info-footer {
    flex-direction: row;
  }
}



/* ========== 角色卡样式 ========== */
.character-item {
  background: #1f2937;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #374151;
  transition: border-color 0.2s;
}
.character-item:hover {
  border-color: #4b5563;
}
body.day-mode .character-item {
  background: #f9fafb;
  border-color: #e5e7eb;
}
body.day-mode .character-item:hover {
  border-color: #d1d5db;
}
.character-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.character-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}
.character-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
body.day-mode .character-name {
  color: #111827;
}
.character-summary {
  font-size: 12px;
  color: #9ca3af;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body.day-mode .character-summary {
  color: #6b7280;
}
.character-edit-field {
  margin-bottom: 10px;
}
.character-field-label {
  display: block;
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 4px;
}
body.day-mode .character-field-label {
  color: #6b7280;
}

.character-brief-wrapper {
  position: relative;
  margin-bottom: 10px;
}
.character-brief-ai-btn {
  position: absolute;
  bottom: 18px;
  right: 8px;
}

/* AI 生成中 - 金色动态样式 */
.character-brief-ai-btn.ai-generating .prompt-ai-opt-btn {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.1);
  animation: ai-generate-pulse 1.5s ease-in-out infinite;
}

.character-brief-ai-btn.ai-generating .prompt-ai-opt-btn svg {
  animation: ai-generate-spin 2s linear infinite;
}

.character-brief-ai-btn.ai-generating .prompt-ai-label {
  color: #fbbf24;
  animation: ai-generate-pulse 1.5s ease-in-out infinite;
}

@keyframes ai-generate-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes ai-generate-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body.day-mode .character-brief-ai-btn.ai-generating .prompt-ai-opt-btn {
  color: #d97706 !important;
  border-color: rgba(217, 119, 6, 0.5) !important;
  background: rgba(217, 119, 6, 0.1) !important;
}

body.day-mode .character-brief-ai-btn.ai-generating .prompt-ai-label {
  color: #d97706 !important;
}
.character-brief-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}
.character-brief-row .prompt-textarea {
  flex: 1;
}

/* ========== 角色活跃度滑块 ========== */
.talkativeness-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.talkativeness-label-left,
.talkativeness-label-right {
  font-size: 12px;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
}

.talkativeness-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: #374151;
  outline: none;
  cursor: pointer;
}

.talkativeness-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #60a5fa;
  cursor: pointer;
  transition: background 0.15s;
}

.talkativeness-slider::-webkit-slider-thumb:hover {
  background: #93c5fd;
}

.talkativeness-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #60a5fa;
  cursor: pointer;
  border: none;
}

.talkativeness-value {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: #9ca3af;
}

/* 活跃度日间模式 */
body.day-mode .talkativeness-label-left,
body.day-mode .talkativeness-label-right {
  color: #6b7280;
}

body.day-mode .talkativeness-slider {
  background: #d1d5db;
}

body.day-mode .talkativeness-slider::-webkit-slider-thumb {
  background: #2563eb;
}

body.day-mode .talkativeness-slider::-webkit-slider-thumb:hover {
  background: #1d4ed8;
}

body.day-mode .talkativeness-slider::-moz-range-thumb {
  background: #2563eb;
}

body.day-mode .talkativeness-value {
  color: #6b7280;
}

/* ========== 角色选择面板 ========== */
.character-select-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #374151;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.character-select-item:hover {
  background: #374151;
}
.character-select-info {
  flex: 1;
  min-width: 0;
}
.character-select-name {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.character-select-summary {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.day-mode .character-select-item {
  border-color: #e5e7eb;
}
body.day-mode .character-select-item:hover {
  background: #f3f4f6;
}
body.day-mode .character-select-name {
  color: #111827;
}
body.day-mode .character-select-summary {
  color: #6b7280;
}

/* ========== 回复引用条（输入区） ========== */
.reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #1f2937;
  border-top: 1px solid #374151;
  font-size: 13px;
  color: #d1d5db;
}
.reply-bar-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.reply-bar-icon {
  flex-shrink: 0;
  color: #60a5fa;
}
.reply-bar-text strong {
  color: #60a5fa;
}
.reply-bar-snippet {
  color: #9ca3af;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reply-bar-cancel {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.reply-bar-cancel:hover {
  color: #fff;
}
body.day-mode .reply-bar {
  background: #f9fafb;
  border-top-color: #e5e7eb;
  color: #374151;
}
body.day-mode .reply-bar-cancel:hover {
  color: #111827;
}

/* ========== 回复引用条（消息气泡内） ========== */
.reply-quote {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
  padding: 4px 8px;
  border-left: 2px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.12);
  border-radius: 0 4px 4px 0;
  line-height: 1.5;
}
.reply-quote strong {
  color: #fff;
}
.reply-quote-text {
  color: rgba(255,255,255,0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 200px;
  vertical-align: middle;
}
.user-file-question {
  white-space: pre-wrap;
  word-break: break-word;
}
.user-file-attachment {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.user-file-attachment summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.96);
  user-select: none;
}
.user-file-attachment summary::-webkit-details-marker {
  display: none;
}
.user-file-attachment summary::before {
  content: '▶';
  font-size: 10px;
  transition: transform 0.2s ease;
}
.user-file-attachment[open] summary::before {
  transform: rotate(90deg);
}
.user-file-attachment-badge {
  flex-shrink: 0;
  border-radius: 9999px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.18);
  color: #dbeafe;
  font-weight: 700;
}
.user-file-attachment-label {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-file-attachment-mode {
  flex-shrink: 0;
  border-radius: 9999px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.14);
  color: #e5e7eb;
}
.user-file-attachment-mode.mode-summary {
  background: rgba(196, 181, 253, 0.22);
  color: #ede9fe;
}
.user-file-attachment-body {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px;
}
.user-file-attachment-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 8px;
}
.user-file-attachment-content {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ========== 群聊角色选择 ========== */
.group-char-select-item {
  border: 1px solid #374151;
  border-radius: 8px;
  margin-bottom: 4px;
  transition: background 0.2s;
}
.group-char-select-item:hover {
  background: #374151;
}
body.day-mode .group-char-select-item {
  border-color: #e5e7eb;
}
body.day-mode .group-char-select-item:hover {
  background: #f3f4f6;
}
.group-char-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
}

/* ========== 群聊消息样式 ========== */
.message-box.character-msg {
  border-left: 3px solid;
}
.message-box.bg-blue-600 .user-file-attachment {
  background: rgba(255, 255, 255, 0.08);
}
.character-msg-label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}
.group-chat-header {
  text-align: center;
  padding: 8px 16px;
  margin-bottom: 8px;
}
.group-chat-header-text {
  font-size: 12px;
  color: #9ca3af;
}
body.day-mode .group-chat-header-text {
  color: #6b7280;
}
.group-chat-members {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.group-chat-member-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
}

/* ========== 新建 Tab 下拉菜单日间模式 ========== */
body.day-mode #addTabDropdown {
  background: #fff;
  border-color: #e5e7eb;
}
body.day-mode #addTabDropdown button {
  color: #374151 !important;
}
body.day-mode #addTabDropdown button:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
}

/* ========== Header 按钮日间模式 ========== */
body.day-mode #addTab,
body.day-mode #searchToggleBtn {
  color: #4b5563 !important;
}
body.day-mode #addTab:hover,
body.day-mode #searchToggleBtn:hover {
  color: #111827 !important;
}

/* ========== 搜索框日间模式 ========== */
body.day-mode #closeSearchBtn {
  color: #6b7280 !important;
}
body.day-mode #closeSearchBtn:hover {
  color: #111827 !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
body.day-mode #searchBox .text-gray-400 {
  color: #6b7280 !important;
}

/* ========== 新建群聊面板日间模式补充 ========== */
body.day-mode #createGroupPanel .text-gray-300 {
  color: #374151 !important;
}
body.day-mode #bgInfoPanel .text-gray-300 {
  color: #374151 !important;
}
body.day-mode #createGroupPanel .text-gray-500 {
  color: #4b5563 !important;
}
body.day-mode #createGroupPanel label:hover {
  background: #f3f4f6 !important;
}

/* ========== Token 警告复制按钮 hover ========== */
body.day-mode .text-xs.text-gray-500.text-center #copyPromptBtn:hover {
  color: #1f2937 !important;
}

/* ========== 链接颜色日间模式 ========== */
body.day-mode #keyPanel .text-blue-400 {
  color: #2563eb !important;
}
body.day-mode #keyPanel .text-blue-400:hover {
  color: #1d4ed8 !important;
}
body.day-mode #emptyChatHint .text-blue-400 {
  color: #2563eb !important;
}

/* ========== 面板关闭按钮 hover 日间模式 ========== */
body.day-mode #closeInfoBtn,
body.day-mode #closeDonateBtn {
  color: #6b7280 !important;
}
body.day-mode #closeInfoBtn:hover,
body.day-mode #closeDonateBtn:hover {
  color: #111827 !important;
}

/* ========== 群聊 Tab 标识 ========== */
.tab.group-tab .tab-title::before {
  content: '👥 ';
  font-size: 12px;
}
.tab.char-tab .tab-title::before {
  content: '🎭 ';
  font-size: 12px;
}

/* ========== 群聊 & 角色卡日间模式 ========== */
body.day-mode .character-item {
  background: #f9fafb;
  border-color: #e5e7eb;
}
body.day-mode .character-item:hover {
  border-color: #d1d5db;
}



body.day-mode .group-char-select-item {
  border-color: #e5e7eb;
}
body.day-mode .group-char-select-item:hover {
  background: #f3f4f6;
}
body.day-mode .message-box.character-msg {
  background: #f3f4f6 !important;
}
body.day-mode .message-box.character-msg.bg-gray-800 {
  background: #f3f4f6 !important;
}
body.day-mode .user-file-attachment {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}
body.day-mode .user-file-attachment summary {
  color: #ffffff !important;
}
body.day-mode .user-file-attachment-badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #eff6ff !important;
}
body.day-mode .user-file-attachment-mode {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #eff6ff !important;
}
body.day-mode .user-file-attachment-mode.mode-summary {
  background: rgba(221, 214, 254, 0.28) !important;
  color: #f5f3ff !important;
}
body.day-mode .user-file-attachment-body {
  border-top-color: rgba(255, 255, 255, 0.24) !important;
}
body.day-mode .user-file-attachment-meta {
  color: rgba(255, 255, 255, 0.84) !important;
}
body.day-mode .user-file-attachment-content {
  color: #ffffff !important;
}

/* ========== HTML 代码块预览 ========== */

/* 折叠容器 */
.html-preview-wrapper {
  margin: 4px 0;
  border: 1px solid #374151;
  border-radius: 8px;
}

.html-preview-wrapper:not([open]) {
  overflow: hidden;
}

.html-preview-wrapper[open] {
  border-color: #4b5563;
}

/* 折叠标题 */
.html-preview-summary {
  padding: 8px 12px;
  font-size: 12px;
  color: #9ca3af;
  cursor: pointer;
  user-select: none;
  background: #1f2937;
  transition: color 0.15s, background 0.15s;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.html-preview-summary::-webkit-details-marker {
  display: none;
}

.html-preview-summary::before {
  content: '▶';
  font-size: 10px;
  transition: transform 0.15s;
  display: inline-block;
}

.html-preview-wrapper[open] > .html-preview-summary::before {
  transform: rotate(90deg);
}

.html-preview-summary:hover {
  color: #d1d5db;
  background: #263041;
}

/* 收起时隐藏内部 pre 的 margin */
.html-preview-wrapper:not([open]) pre {
  display: none;
}

/* 预览触发链接 */
.html-preview-trigger {
  text-align: right;
  margin-top: 4px;
  margin-bottom: 8px;
}

.html-preview-link {
  font-size: 12px;
  color: #60a5fa;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}

.html-preview-link:hover {
  color: #93c5fd;
  text-decoration: underline;
}

/* 遮罩层 */
.html-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: html-preview-fade-in 0.15s ease-out;
}

@keyframes html-preview-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 弹窗容器 */
.html-preview-modal {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 12px;
  width: 100%;
  max-width: 900px;
  height: 85vh;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* 弹窗头部 */
.html-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #374151;
  flex-shrink: 0;
}

.html-preview-title {
  font-size: 14px;
  font-weight: 500;
  color: #e5e7eb;
}

.html-preview-close {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.html-preview-close:hover {
  color: #f3f4f6;
  background: #374151;
}

/* iframe */
.html-preview-iframe {
  flex: 1;
  border: none;
  width: 100%;
  background: #ffffff;
  border-radius: 0 0 12px 12px;
}

/* ========== HTML 预览日间模式 ========== */
body.day-mode .html-preview-wrapper {
  border-color: #e5e7eb;
}
body.day-mode .html-preview-wrapper[open] {
  border-color: #d1d5db;
}
body.day-mode .html-preview-summary {
  color: #6b7280;
  background: #f9fafb;
}
body.day-mode .html-preview-summary:hover {
  color: #374151;
  background: #f3f4f6;
}

body.day-mode .html-preview-link {
  color: #2563eb;
}
body.day-mode .html-preview-link:hover {
  color: #1d4ed8;
}

body.day-mode .html-preview-modal {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

body.day-mode .html-preview-header {
  border-bottom-color: #e5e7eb;
}

body.day-mode .html-preview-title {
  color: #111827;
}

body.day-mode .html-preview-close {
  color: #6b7280;
}
body.day-mode .html-preview-close:hover {
  color: #111827;
  background: #f3f4f6;
}

/* ========== HTML 预览移动端适配 ========== */
@media (max-width: 640px) {
  .html-preview-overlay {
    padding: 8px;
  }
  .html-preview-modal {
    max-width: 100%;
    height: 95vh;
    max-height: none;
    border-radius: 8px;
  }
  .html-preview-iframe {
    border-radius: 0 0 8px 8px;
  }
}

/* ========== 「预览网页」chip（复用 deepthink-chip 风格） ========== */
.htmlmode-chip .deepthink-chip-icon {
  color: #fbbf24;
}
.htmlmode-chip:has(.peer:checked) {
  background: rgba(251, 191, 36, 0.16);
  border-color: #f59e0b;
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.22) inset;
}
.htmlmode-chip:has(.peer:checked) .deepthink-chip-icon {
  color: #fde68a;
}
.htmlmode-chip.disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* HTML 模式开启时，深度思考 chip 会被打上 disabled 标识（互斥置灰） */
.deepthink-chip.disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
body.day-mode .deepthink-chip.disabled {
  opacity: 0.5;
}

body.day-mode .htmlmode-chip .deepthink-chip-icon {
  color: #d97706;
}
body.day-mode .htmlmode-chip:has(.peer:checked) {
  background: rgba(217, 119, 6, 0.14);
  border-color: #d97706;
  color: #1f2937;
}

/* ========== HTML 引导弹框 ========== */
#htmlModeGuidePanel:not(.hidden) {
  display: flex !important;
}
.html-guide-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fbbf24;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
.html-guide-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.html-guide-body {
  color: #e5e7eb;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.html-guide-body p + p {
  margin-top: 6px;
}
.html-guide-example {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
}
.html-guide-example-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.html-guide-example-label {
  color: #fbbf24;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.html-guide-example-label::before {
  content: '💡';
  font-size: 12px;
}
.html-guide-example-actions {
  display: inline-flex;
  gap: 6px;
}
.html-guide-example-btn {
  background: transparent;
  border: none;
  color: #d1d5db;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.html-guide-example-btn:hover {
  background: rgba(251, 191, 36, 0.18);
  color: #fde68a;
}
.html-guide-example-btn.copied {
  color: #34d399;
}
.html-guide-example-text {
  color: #f3f4f6;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 48px;
}
.html-guide-confirm-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.html-guide-confirm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}

body.day-mode .html-guide-title { color: #b45309; }
body.day-mode .html-guide-body { color: #1f2937; }
body.day-mode .html-guide-body .text-gray-400 { color: #6b7280 !important; }
body.day-mode .html-guide-example {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.35);
}
body.day-mode .html-guide-example-label { color: #b45309; }
body.day-mode .html-guide-example-text { color: #1f2937; }
body.day-mode .html-guide-example-btn { color: #6b7280; }
body.day-mode .html-guide-example-btn:hover {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}
body.day-mode .html-guide-example-btn.copied { color: #059669; }
body.day-mode .html-guide-confirm-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
}
body.day-mode .html-guide-confirm-btn:hover {
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
}

/* 引导弹框日间模式 — 遮罩 + 卡片 + 关闭按钮 */
body.day-mode #htmlModeGuidePanel {
  background: rgba(0, 0, 0, 0.5) !important;
}
body.day-mode #htmlModeGuidePanel .bg-gray-900 {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
body.day-mode #htmlModeGuidePanel #htmlModeGuideCloseBtn {
  color: #9ca3af !important;
}
body.day-mode #htmlModeGuidePanel #htmlModeGuideCloseBtn:hover {
  color: #374151 !important;
}

/* ========== 生成中气泡状态文案 ========== */
.html-gen-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fde68a;
  font-size: 13px;
}
.html-gen-status-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(251, 191, 36, 0.3);
  border-top-color: #fbbf24;
  border-radius: 50%;
  animation: htmlGenSpin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes htmlGenSpin {
  to { transform: rotate(360deg); }
}
.html-gen-meta {
  margin-top: 6px;
  font-size: 12px;
  color: #9ca3af;
}
body.day-mode .html-gen-status {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.3);
  color: #78350f;
}
body.day-mode .html-gen-status-spinner {
  border-color: rgba(217, 119, 6, 0.25);
  border-top-color: #d97706;
}