/* ═══════════════════════════════════════════════════════════════════════════
   FullTimeCode Feature Modules
   Visual overrides for Notes, Calendar, Email, Cookbook, Gallery,
   Document Editor, and Research panels. Loaded after /static/style.css.
   Uses the FullTimeCode design tokens defined in :root.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared feature surfaces ── */
.notes-pane,
.cal-modal-content,
.gallery-modal-content,
.doc-editor-pane,
.research-pane {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 20px;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.notes-pane.modal-right-docked,
.notes-pane.modal-left-docked {
  border-radius: 0;
}

body.notes-view .notes-pane,
body.doc-view .doc-editor-pane {
  border-radius: 14px 14px 0 0;
}

/* ── Notes ── */
.notes-pane-header {
  border-bottom-color: var(--border, #334155);
  padding: 10px 12px 8px;
}

.notes-pane-title {
  color: var(--text, #f1f5f9);
}

.notes-pane-body {
  background: var(--bg-elevated, #0a0f1a);
}

.note-card {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 16px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.note-card:hover:not([class*="note-color-"]) {
  background: var(--surface-hover, #1f2937);
  border-color: var(--border-light, #374151);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.note-card-pinned {
  border-top: 2px solid var(--accent, #38bdf8);
}

.note-card-selected {
  outline: 2px solid var(--accent, #38bdf8);
  outline-offset: -2px;
}

.note-card-ai-chip {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: var(--accent, #38bdf8);
  border-radius: 999px;
}

.note-card-ai-chip:hover {
  background: rgba(6, 182, 212, 0.2);
  box-shadow: 0 0 12px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

.notes-quick-add {
  background: var(--bg-elevated, #0a0f1a);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  animation: none;
}

.notes-quick-add:hover,
.notes-quick-add:focus-within {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

.notes-quick-input {
  color: var(--text, #f1f5f9);
  caret-color: var(--accent, #38bdf8);
}

.notes-new-btn,
.note-form-save,
.note-form-text-btn,
.note-fullscreen-actions .note-form-text-btn {
  background: var(--gradient-1, linear-gradient(135deg, #06b6d4 0%, #10b981 50%, #a3e635 100%));
  color: #fff;
  border: none;
  border-radius: 100px;
  box-shadow: 0 10px 40px var(--accent-glow, rgba(6, 182, 212, 0.4));
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notes-new-btn:hover,
.note-form-save:hover,
.note-form-text-btn:hover,
.note-fullscreen-actions .note-form-text-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px var(--accent-glow, rgba(6, 182, 212, 0.5));
}

.note-form-cancel,
.note-form-photo-btn,
.note-form-remind-btn,
.note-fullscreen-back {
  background: var(--surface, #1e293b);
  color: var(--text, #f1f5f9);
  border: 1px solid var(--border, #334155);
  border-radius: 100px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.note-form-cancel:hover,
.note-form-photo-btn:hover,
.note-form-remind-btn:hover,
.note-fullscreen-back:hover {
  border-color: var(--accent, #38bdf8);
  background: var(--surface-hover, #1f2937);
}

.note-form-remind-btn.has-date {
  color: var(--accent, #38bdf8);
  border-color: var(--accent, #38bdf8);
}

.note-form-content,
.note-form-content-reader,
.note-cl-text,
.note-fullscreen-overlay .note-form-content,
.note-fullscreen-overlay .note-form-content-reader {
  background: var(--bg-elevated, #0a0f1a);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text, #f1f5f9);
}

.note-form-content:focus,
.note-form-content-reader:focus,
.note-cl-text:focus,
.note-fullscreen-overlay .note-form-content:focus {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

.note-corner-menu-dropdown {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.note-corner-menu-dropdown .ncm-item:hover {
  background: var(--surface-hover, #1f2937);
  color: var(--accent, #38bdf8);
}

.note-card-select,
.note-card-pin,
.note-card-edit-corner,
.note-card-done,
.note-card-copy-corner,
.note-card-corner-copy,
.note-card-corner-trash,
.note-card-corner-unarchive {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
}

.note-card-edit-corner:hover,
.note-card-done:hover,
.note-card-copy-corner:hover,
.note-card-corner-copy:hover,
.note-card-corner-unarchive:hover {
  border-color: var(--accent, #38bdf8);
  color: var(--accent, #38bdf8);
  background: rgba(6, 182, 212, 0.12);
}

.note-card-corner-trash:hover {
  border-color: var(--color-error, #ff4444);
  color: var(--color-error, #ff4444);
  background: rgba(239, 68, 68, 0.12);
}

/* ── Calendar ── */
.cal-modal-content {
  padding: 16px;
}

.cal-toolbar {
  margin-bottom: 12px;
}

.cal-title {
  color: var(--text, #f1f5f9);
  font-weight: 700;
}

button.cal-nav {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  color: var(--text, #f1f5f9);
  border-radius: 100px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

button.cal-nav:hover {
  background: var(--surface-hover, #1f2937);
  border-color: var(--accent, #38bdf8);
}

button.cal-add-btn {
  background: var(--gradient-1, linear-gradient(135deg, #06b6d4 0%, #10b981 50%, #a3e635 100%));
  color: #fff;
  box-shadow: 0 8px 28px var(--accent-glow, rgba(6, 182, 212, 0.4));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

button.cal-add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px var(--accent-glow, rgba(6, 182, 212, 0.5));
}

.cal-grid {
  background: var(--bg-elevated, #0a0f1a);
  border: 1px solid var(--border, #334155);
  border-radius: 16px;
  overflow: hidden;
}

.cal-day {
  background: var(--surface, #1e293b);
  border-right: 1px solid var(--border, #334155);
  border-bottom: 1px solid var(--border, #334155);
  transition: background 0.2s;
}

.cal-day:hover {
  background: var(--surface-hover, #1f2937);
}

.cal-day.cal-today {
  box-shadow: inset 0 0 0 2px var(--accent, #38bdf8);
  background: rgba(6, 182, 212, 0.15);
}

.cal-day.cal-today .cal-day-num {
  background: var(--accent, #38bdf8);
  color: var(--bg, #0B1020);
  border-radius: 100px;
}

.cal-day.cal-selected:not(.cal-today) {
  background: rgba(6, 182, 212, 0.12);
  box-shadow: inset 0 0 0 1px var(--accent, #38bdf8);
}

.cal-day.cal-drag-over,
.cal-day.cal-range-select {
  background: rgba(6, 182, 212, 0.18);
}

.cal-event-row {
  border-radius: 4px;
}

.cal-event-row:hover {
  background: rgba(6, 182, 212, 0.12);
}

.cal-day-detail {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.cal-event-item {
  border-radius: 8px;
}

.cal-event-item:hover {
  background: var(--surface-hover, #1f2937);
}

.cal-event-name {
  color: var(--text, #f1f5f9);
}

.cal-event-time,
.cal-event-loc {
  color: var(--text-muted, #9ca3af);
}

.cal-form-bespoke {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.cal-hero-title,
.cal-input.cal-hero-title,
.cal-form-bespoke input[type="date"],
.cal-form-bespoke input[type="time"],
.cal-form-bespoke input[type="datetime-local"],
.cal-form-bespoke textarea {
  background: var(--bg-elevated, #0a0f1a);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text, #f1f5f9);
}

.cal-hero-title:focus,
.cal-input.cal-hero-title:focus,
.cal-form-bespoke input[type="date"]:focus,
.cal-form-bespoke input[type="time"]:focus,
.cal-form-bespoke input[type="datetime-local"]:focus {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

button.cal-btn {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  color: var(--text, #f1f5f9);
  border-radius: 100px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

button.cal-btn:hover {
  background: var(--surface-hover, #1f2937);
  border-color: var(--accent, #38bdf8);
}

button.cal-btn.cal-btn-primary {
  background: var(--gradient-1, linear-gradient(135deg, #06b6d4 0%, #10b981 50%, #a3e635 100%));
  color: #fff;
  border: none;
  box-shadow: 0 10px 40px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

button.cal-btn.cal-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px var(--accent-glow, rgba(6, 182, 212, 0.5));
}

button.cal-btn.cal-btn-danger {
  color: var(--color-error, #ff4444);
  border-color: var(--color-error, #ff4444);
  background: transparent;
}

button.cal-btn.cal-btn-danger:hover {
  background: var(--color-error, #ff4444);
  color: #fff;
}

.cal-filters {
  margin: 8px 0 12px;
}

.cal-filter-item {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 100px;
  color: var(--text-muted, #9ca3af);
  transition: all 0.25s;
}

.cal-filter-item:hover {
  background: var(--surface-hover, #1f2937);
  border-color: var(--accent, #38bdf8);
  color: var(--text, #f1f5f9);
}

.cal-view-toggle {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 100px;
  overflow: hidden;
}

button.cal-view-btn {
  color: var(--text-muted, #9ca3af);
  transition: all 0.25s;
}

button.cal-view-btn.active {
  background: var(--gradient-1, linear-gradient(135deg, #06b6d4 0%, #10b981 50%, #a3e635 100%));
  color: #fff;
}

/* ── Email ── */
#doc-email-fields,
.email-compose-fields {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 16px;
  padding: 12px;
}

.email-field input,
.email-field select,
.doc-email-input,
.email-compose-input {
  background: var(--bg-elevated, #0a0f1a);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text, #f1f5f9);
}

.email-field input:focus,
.email-field select:focus,
.doc-email-input:focus,
.email-compose-input:focus {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

.email-send-btn {
  background: var(--gradient-1, linear-gradient(135deg, #06b6d4 0%, #10b981 50%, #a3e635 100%));
  color: #fff;
  border: none;
  border-radius: 100px;
  box-shadow: 0 10px 40px var(--accent-glow, rgba(6, 182, 212, 0.4));
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.email-send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px var(--accent-glow, rgba(6, 182, 212, 0.5));
}

.email-draft-btn,
.email-ai-reply-btn,
.email-discard-btn,
#doc-email-more-btn {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  color: var(--text, #f1f5f9);
  border-radius: 100px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.email-draft-btn:hover,
.email-ai-reply-btn:hover,
.email-discard-btn:hover,
#doc-email-more-btn:hover {
  background: var(--surface-hover, #1f2937);
  border-color: var(--accent, #38bdf8);
  color: var(--accent, #38bdf8);
}

.email-attachment-chip,
.email-compose-chip {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 100px;
  color: var(--text, #f1f5f9);
}

.email-attachment-chip:hover {
  background: var(--surface-hover, #1f2937);
  border-color: var(--accent, #38bdf8);
}

.email-attachment-open {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: var(--accent, #38bdf8);
  border-radius: 100px;
}

.email-attachment-open:hover {
  background: rgba(6, 182, 212, 0.22);
  border-color: var(--accent, #38bdf8);
}

.email-autocomplete {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.contact-suggestion:hover,
.contact-suggestion.active {
  background: rgba(6, 182, 212, 0.12);
  color: var(--accent, #38bdf8);
}

.email-reader-header,
.email-reader-atts,
.email-reader-body {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
}

.email-reader-body a {
  color: var(--accent, #38bdf8);
}

/* ── Cookbook ── */
#cookbook-modal .cookbook-body,
.cookbook-body {
  background: var(--bg-elevated, #0a0f1a);
}

#cookbook-modal .cookbook-group,
.cookbook-group {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.cookbook-card {
  background: var(--surface-hover, #1f2937);
  border: 1px solid var(--border, #334155);
  border-radius: 16px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookbook-card:hover {
  border-color: var(--accent, #38bdf8);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.cookbook-card-header {
  border-bottom: 1px solid var(--border, #334155);
}

.cookbook-card-title {
  color: var(--text, #f1f5f9);
}

.cookbook-field-input {
  background: var(--bg-elevated, #0a0f1a);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text, #f1f5f9);
}

.cookbook-field-input:focus {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

.cookbook-btn {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  color: var(--text, #f1f5f9);
  border-radius: 100px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookbook-btn:hover {
  background: var(--surface-hover, #1f2937);
  border-color: var(--accent, #38bdf8);
}

.cookbook-run-btn {
  background: var(--gradient-1, linear-gradient(135deg, #06b6d4 0%, #10b981 50%, #a3e635 100%));
  color: #fff;
  border: none;
  box-shadow: 0 10px 40px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

.cookbook-run-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px var(--accent-glow, rgba(6, 182, 212, 0.5));
}

.cookbook-stop-btn {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: var(--color-error, #ff4444);
  border-radius: 100px;
}

.cookbook-stop-btn:hover {
  background: rgba(239, 68, 68, 0.25);
}

.cookbook-output-wrap {
  background: var(--bg-elevated, #0a0f1a);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
}

.cookbook-output-pre {
  background: var(--bg-elevated, #0a0f1a);
  border-radius: 8px;
}

.cookbook-gpu-btn {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text, #f1f5f9);
}

.cookbook-gpu-btn:hover {
  border-color: var(--accent, #38bdf8);
}

.cookbook-gpu-btn.active {
  background: var(--gradient-1, linear-gradient(135deg, #06b6d4 0%, #10b981 50%, #a3e635 100%));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 28px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

.cookbook-serve-preset {
  background: var(--surface-hover, #1f2937);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
}

.cookbook-serve-preset:hover {
  background: rgba(6, 182, 212, 0.12);
  border-color: var(--accent, #38bdf8);
}

/* ── Gallery ── */
.gallery-modal-content {
  padding: 16px;
}

.gallery-toolbar {
  margin-bottom: 12px;
}

.gallery-search {
  background: var(--bg-elevated, #0a0f1a);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text, #f1f5f9);
}

.gallery-search:focus {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

.gallery-search-enter-hint {
  color: var(--accent, #38bdf8);
}

.gallery-model-filter,
.gallery-sort {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text, #f1f5f9);
}

.gallery-chip {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 100px;
  color: var(--text, #f1f5f9);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-chip:hover {
  border-color: var(--accent, #38bdf8);
  background: var(--surface-hover, #1f2937);
}

.gallery-chip.active,
.gallery-chip-fav.active,
.gallery-chip-active-album {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.4);
  color: var(--accent, #38bdf8);
}

.gallery-grid {
  background: var(--bg-elevated, #0a0f1a);
  border: 1px solid var(--border, #334155);
  border-radius: 16px;
  padding: 12px;
}

.gallery-card {
  border: 1px solid var(--border, #334155);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-card:hover {
  border-color: var(--accent, #38bdf8);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(6, 182, 212, 0.2);
}

.gallery-card-upload {
  border-style: dashed;
  background: var(--surface, #1e293b);
}

.gallery-card-upload:hover {
  border-color: var(--accent, #38bdf8);
  background: var(--surface-hover, #1f2937);
}

.gallery-card-skeleton {
  background: linear-gradient(
    100deg,
    var(--surface, #1e293b) 30%,
    var(--surface-hover, #1f2937) 50%,
    var(--surface, #1e293b) 70%
  );
  background-size: 200% 100%;
}

.gallery-select-dot.selected,
.gallery-card:has(.gallery-select-dot.selected) {
  box-shadow: inset 0 0 0 7px var(--accent, #38bdf8);
}

.gallery-select-dot:hover {
  background: rgba(6, 182, 212, 0.5);
}

.gallery-select-btn {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text, #f1f5f9);
}

.gallery-select-btn.active {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--accent, #38bdf8);
  color: var(--accent, #38bdf8);
}

.gallery-bulk-bar {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  padding: 8px 12px;
}

.gallery-load-more {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 100px;
  color: var(--text, #f1f5f9);
}

.gallery-load-more:hover {
  border-color: var(--accent, #38bdf8);
  color: var(--accent, #38bdf8);
}

.gallery-detail {
  background: var(--surface, #1e293b);
}

.gallery-detail-header {
  background: var(--surface, #1e293b);
  border-bottom-color: var(--border, #334155);
}

.gallery-detail-action {
  background: var(--surface-hover, #1f2937);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text, #f1f5f9);
}

.gallery-detail-action:hover {
  border-color: var(--accent, #38bdf8);
}

.gallery-detail-menu {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.gallery-detail-menu .dropdown-item-compact:hover {
  background: var(--surface-hover, #1f2937);
  color: var(--accent, #38bdf8);
}

.gallery-ai-chip {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 999px;
  color: var(--accent, #38bdf8);
}

.gallery-ai-chip:hover {
  background: rgba(6, 182, 212, 0.2);
  border-color: rgba(6, 182, 212, 0.5);
}

.gallery-aitag-chip {
  background: var(--surface-hover, #1f2937);
  border-color: var(--border, #334155);
}

.gallery-user-chip {
  background: rgba(163, 230, 53, 0.12);
  border: 1px solid rgba(163, 230, 53, 0.3);
  color: var(--accent-lime, #a3e635);
}

.gallery-tag-x:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* ── Document Editor ── */
.doc-editor-pane {
  background: var(--surface, #1e293b);
}

.doc-tab-bar {
  background: var(--bg-elevated, #0a0f1a);
  border-bottom-color: var(--border, #334155);
}

.doc-tab {
  color: var(--text-muted, #9ca3af);
  border-right-color: var(--border, #334155);
}

.doc-tab:hover {
  color: var(--text, #f1f5f9);
  background: var(--surface-hover, #1f2937);
}

.doc-tab.active {
  color: var(--text, #f1f5f9);
  background: var(--surface, #1e293b);
}

.doc-tab.active::after {
  background: var(--accent, #38bdf8);
  box-shadow: 0 0 8px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

.doc-tab-close:hover {
  color: var(--color-error, #ff4444);
}

.doc-editor-header {
  background: var(--bg-elevated, #0a0f1a);
  border-top-color: var(--border, #334155);
}

.doc-md-toolbar {
  background: var(--bg-elevated, #0a0f1a);
  border-bottom-color: var(--border, #334155);
}

.doc-md-toolbar button {
  color: var(--text-muted, #9ca3af);
  border-radius: 8px;
}

.doc-md-toolbar button:hover {
  color: var(--text, #f1f5f9);
  background: var(--surface-hover, #1f2937);
}

.doc-md-toolbar button.is-active {
  color: var(--accent, #38bdf8);
  background: rgba(6, 182, 212, 0.12);
}

.md-view-toggle {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
}

.md-view-toggle .md-view-opt.active {
  background: rgba(6, 182, 212, 0.15) !important;
  color: var(--accent, #38bdf8);
}

.doc-editor-wrap {
  background: var(--bg-elevated, #0a0f1a);
}

.doc-editor-highlight,
.doc-editor-textarea {
  background: var(--bg-elevated, #0a0f1a) !important;
  color: var(--text, #f1f5f9);
}

.doc-editor-textarea::selection {
  background: rgba(6, 182, 212, 0.3);
}

.doc-editor-textarea::placeholder {
  color: var(--text-muted, #9ca3af);
}

.doc-action-btn,
.doc-action-icon-btn,
.doc-tab-new,
.doc-tab-arrow,
.doc-tab-play,
.doc-close-btn,
.doc-overflow-toggle {
  color: var(--text-muted, #9ca3af);
}

.doc-action-btn:hover,
.doc-action-icon-btn:hover,
.doc-tab-new:hover,
.doc-tab-arrow:hover,
.doc-close-btn:hover,
.doc-overflow-toggle:hover {
  color: var(--accent, #38bdf8);
}

.doc-tab-play:hover,
.doc-tab-play.active {
  color: var(--accent-lime, #a3e635);
}

.doc-version-badge,
.doc-tab-version {
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: var(--accent, #38bdf8);
  border-radius: 999px;
}

.doc-version-badge:hover,
.doc-tab-version:hover {
  background: rgba(6, 182, 212, 0.2);
  border-color: var(--accent, #38bdf8);
}

.doc-stream-indicator,
.doc-stream-dot {
  color: var(--accent, #38bdf8);
}

.doc-find-bar {
  background: var(--surface, #1e293b);
  border-bottom-color: var(--border, #334155);
}

.doc-find-input {
  background: var(--bg-elevated, #0a0f1a);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text, #f1f5f9);
}

.doc-find-input:focus {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

mark.doc-find-mark,
mark.doc-find-mark.current {
  background: var(--accent, #38bdf8) !important;
  color: var(--bg, #0B1020) !important;
}

.doc-version-panel {
  background: var(--surface, #1e293b);
  border-right-color: var(--border, #334155);
}

.doc-version-header {
  border-bottom-color: var(--border, #334155);
  color: var(--text, #f1f5f9);
}

.doc-version-item {
  background: var(--surface-hover, #1f2937);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
}

.doc-version-item:hover {
  background: rgba(6, 182, 212, 0.12);
  border-color: var(--accent, #38bdf8);
}

.doc-version-latest {
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent, #38bdf8);
}

.doc-suggestion-card {
  background: var(--surface, #1e293b);
  border: 1px solid var(--accent, #38bdf8);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.doc-suggestion-card::before {
  background: var(--surface, #1e293b);
  border-left-color: var(--accent, #38bdf8);
  border-bottom-color: var(--accent, #38bdf8);
}

.doc-suggestion-accept {
  background: var(--gradient-1, linear-gradient(135deg, #06b6d4 0%, #10b981 50%, #a3e635 100%));
  color: #fff;
  border: none;
  border-radius: 100px;
  box-shadow: 0 8px 28px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

.doc-suggestion-dismiss {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  color: var(--text, #f1f5f9);
  border-radius: 100px;
}

.doc-suggestion-dismiss:hover {
  background: var(--surface-hover, #1f2937);
  border-color: var(--accent, #38bdf8);
}

.diff-toolbar {
  background: var(--surface, #1e293b);
  border-bottom-color: var(--border, #334155);
}

.diff-toolbar-btn {
  background: var(--surface-hover, #1f2937);
  border: 1px solid var(--border, #334155);
  border-radius: 100px;
  color: var(--text, #f1f5f9);
}

.diff-toolbar-btn:hover {
  border-color: var(--accent, #38bdf8);
  background: rgba(6, 182, 212, 0.12);
}

.diff-toolbar-btn-accept {
  color: var(--accent-lime, #a3e635);
  border-color: rgba(163, 230, 53, 0.4);
}

.diff-toolbar-btn-accept:hover {
  background: rgba(163, 230, 53, 0.12);
  border-color: var(--accent-lime, #a3e635);
}

.diff-toolbar-btn-reject {
  color: var(--color-error, #ff4444);
  border-color: rgba(239, 68, 68, 0.4);
}

.diff-toolbar-btn-reject:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: var(--color-error, #ff4444);
}

.doc-langpicker-trigger,
.doc-language-select {
  background: var(--bg-elevated, #0a0f1a);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text, #f1f5f9);
}

.doc-langpicker-trigger:hover,
.doc-language-select:hover {
  border-color: var(--accent, #38bdf8);
}

.doc-langpicker-menu {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.doc-langpicker-item:hover {
  background: var(--surface-hover, #1f2937);
}

.doc-langpicker-item.is-selected {
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent, #38bdf8);
}

.doc-overflow-menu,
.md-toolbar-overflow-menu {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.doc-overflow-item:hover,
.md-toolbar-overflow-item:hover {
  background: var(--surface-hover, #1f2937);
  color: var(--accent, #38bdf8);
}

/* ── Research Panels ── */
.research-pane {
  background: var(--surface, #1e293b);
}

.research-pane-header h4 {
  color: var(--text, #f1f5f9);
}

.research-pane-header h4 svg {
  color: var(--accent, #38bdf8);
}

.research-pane::after {
  background: conic-gradient(
    from var(--research-orbit-angle, 0deg),
    transparent 0deg,
    transparent 300deg,
    rgba(6, 182, 212, 0.7) 335deg,
    var(--accent, #38bdf8) 350deg,
    rgba(6, 182, 212, 0.7) 358deg,
    transparent 360deg
  );
}

.research-new-job {
  background: var(--surface-hover, #1f2937);
  border: 1px solid var(--border, #334155);
  border-radius: 20px;
}

.research-new-job h2 {
  color: var(--text, #f1f5f9);
}

.research-query {
  background: var(--bg-elevated, #0a0f1a);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text, #f1f5f9);
}

.research-query:focus {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(6, 182, 212, 0.4));
}

.research-settings-row {
  background: var(--bg-elevated, #0a0f1a);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
}

.research-setting select {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  color: var(--text, #f1f5f9);
}

.research-start-btn {
  background: var(--gradient-1, linear-gradient(135deg, #06b6d4 0%, #10b981 50%, #a3e635 100%));
  color: #fff;
  border: none;
  border-radius: 100px;
  box-shadow: 0 10px 40px var(--accent-glow, rgba(6, 182, 212, 0.4));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.research-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px var(--accent-glow, rgba(6, 182, 212, 0.5));
}

.research-cat {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 100px;
  color: var(--text-muted, #9ca3af);
}

.research-cat:hover {
  border-color: var(--accent, #38bdf8);
  color: var(--text, #f1f5f9);
}

.research-cat.active {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.4);
  color: var(--accent, #38bdf8);
}

.research-settings-toggle {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text-muted, #9ca3af);
}

.research-settings-toggle:hover {
  border-color: var(--accent, #38bdf8);
  color: var(--text, #f1f5f9);
}

.research-add-btn {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 100px;
  color: var(--text, #f1f5f9);
}

.research-add-btn:hover {
  background: var(--surface-hover, #1f2937);
  border-color: var(--accent, #38bdf8);
}

.research-run-mode-popover {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.research-run-mode-popover .research-run-mode-row:hover {
  background: rgba(6, 182, 212, 0.12);
  color: var(--accent, #38bdf8);
}

.research-job-card {
  background: var(--surface-hover, #1f2937);
  border: 1px solid var(--border, #334155);
  border-radius: 16px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.research-job-card:hover {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.research-job-card.running {
  border-left: 3px solid var(--accent, #38bdf8);
}

.research-job-card.queued {
  border-left: 3px solid var(--text-muted, #9ca3af);
}

.research-job-card.error,
.research-job-card.cancelled {
  border-left: 3px solid var(--color-error, #ff4444);
}

.research-job-card.done[data-category] {
  background: var(--surface-hover, #1f2937);
}

.research-job-card.done[data-category]:hover {
  background: rgba(6, 182, 212, 0.1);
}

.research-cat-badge {
  color: var(--accent, #38bdf8);
}

.research-hero {
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.18) 0%,
    rgba(6, 182, 212, 0.05) 100%
  );
  border-left: 4px solid var(--accent, #38bdf8);
  border-radius: 16px;
}

.research-hero::after {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 60%);
}

.research-hero-icon,
.research-hero-label {
  color: var(--accent, #38bdf8);
}

.research-job-action {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 100px;
  color: var(--text, #f1f5f9);
}

.research-job-action:hover {
  border-color: var(--accent, #38bdf8);
  color: var(--accent, #38bdf8);
}

.research-job-action-copied {
  color: var(--accent-lime, #a3e635) !important;
  border-color: rgba(163, 230, 53, 0.45) !important;
}

.research-section {
  background: var(--surface-hover, #1f2937);
  border: 1px solid var(--border, #334155);
  border-radius: 16px;
}

.research-section-header:hover {
  background: rgba(6, 182, 212, 0.08);
}

.research-section-title {
  color: var(--text, #f1f5f9);
}

.research-section-dot.pulsing {
  animation: research-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes research-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.55); }
  70%      { box-shadow: 0 0 0 6px rgba(6, 182, 212, 0); }
}

.research-empty {
  color: var(--text-muted, #9ca3af);
}

.research-job-report-body h1,
.research-job-report-body h2,
.research-job-report-body h3 {
  color: var(--accent, #38bdf8);
}

/* ── Document library cards (shared by email/gallery/docs) ── */
.doclib-card,
.doclib-grid .doclib-card {
  background: var(--surface, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 16px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.doclib-card:hover {
  background: var(--surface-hover, #1f2937);
  border-color: var(--accent, #38bdf8);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.doclib-card-header {
  color: var(--text, #f1f5f9);
}

.doclib-card-session,
.doclib-card-time {
  color: var(--text-muted, #9ca3af);
}

.doclib-card-action-btn {
  background: var(--surface-hover, #1f2937);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  color: var(--text, #f1f5f9);
}

.doclib-card-action-btn:hover {
  border-color: var(--accent, #38bdf8);
  color: var(--accent, #38bdf8);
}

.doclib-card-preview {
  background: var(--bg-elevated, #0a0f1a);
  border-top: 1px solid var(--border, #334155);
}

#email-lib-modal .doclib-card.doclib-card-expanded,
#doclib-modal .doclib-card.doclib-card-expanded,
#memory-modal .doclib-card.doclib-card-expanded {
  background: var(--surface, #1e293b);
  border-color: var(--accent, #38bdf8);
}