/* ══════════════════════════════════════════════════════════════
   SIDE PANELS
══════════════════════════════════════════════════════════════ */
.panel-backdrop {
  position: fixed; inset: 0; z-index: 135;
  background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.panel-backdrop.visible { opacity: 1; pointer-events: auto; }
.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--panel-width); max-width: 100vw;
  background: var(--bg-surface); border-left: 1px solid var(--border);
  /* Must outrank .app-header (120) and #more-dropdown (130) — a panel is a
     full-height overlay and needs to fully cover the header (including its
     own panel-header/close button) rather than sliding in underneath it. */
  z-index: 140; display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s cubic-bezier(0.4,0,0.2,1);
}
/* Shadow only while actually on-screen — there are 7 of these panels in the
   DOM at once (tools/files/history/comments/presence/settings/search), each
   translateX(100%) off to the right when closed. A box-shadow's blur radius
   (--shadow-lg is 40px) isn't clipped by the transform, so an unconditional
   shadow here bled ~40px past each closed panel's left edge — which sits
   exactly at the viewport's right edge — into the visible page. With all 7
   stacked at that same off-screen position the effect compounded into a
   permanent dark vertical band along the right edge of the window, visible
   even with no panel open at all. */
.side-panel.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.panel-header h3 { font-size: 14px; font-weight: 600; }
.panel-close {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); transition: background var(--transition), color var(--transition);
}
.panel-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.panel-close svg { width: 16px; height: 16px; }
.panel-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.panel-body::-webkit-scrollbar { width: 4px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Empty states */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 36px 16px; text-align: center;
}
.empty-state svg { width: 36px; height: 36px; margin-bottom: 12px; color: var(--text-muted); opacity: 0.5; }
.empty-state-title { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; }
.empty-state-sub   { font-size: 12px; color: var(--text-muted); line-height: 1.55; max-width: 220px; }

/* Tools Panel */
.tools-section { margin-bottom: 16px; }
.tools-section:last-child { margin-bottom: 0; }
.tools-section-title {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); padding: 0 2px 7px;
}
.tools-section-danger .tools-section-title { color: var(--red); opacity: 0.7; }
.tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-btn {
  position: relative;
  padding: 12px 10px; border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.tool-btn:hover  { background: var(--bg-base); border-color: var(--accent); }
.tool-btn:active { transform: scale(0.96); }
.tool-btn .tool-icon { width: 20px; height: 20px; color: var(--text-secondary); }
.tool-btn:hover .tool-icon { color: var(--accent); }
.tool-btn .tool-label { font-size: 11px; color: var(--text-secondary); text-align: center; }
.tool-btn.danger:hover { border-color: var(--red); }
.tool-btn.danger:hover .tool-icon { color: var(--red); }
.tool-btn.danger:hover .tool-label { color: var(--red); }
/* How many comments exist in the note — visible without opening the panel,
   same discoverability idea as the connected-device count in the header. */
.tool-count-badge {
  position: absolute; top: 6px; right: 6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: var(--text-inverse);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* Files Panel */
.files-upload-zone {
  border: 2px dashed var(--border); border-radius: var(--radius-md);
  padding: 22px; text-align: center; cursor: pointer;
  color: var(--text-secondary); font-size: 13px;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  margin-bottom: 16px;
}
.files-upload-zone:hover, .files-upload-zone.drag-over {
  border-color: var(--accent); color: var(--accent); background: var(--accent-dim);
}
.files-upload-zone .upload-icon { width: 28px; height: 28px; margin: 0 auto 8px; opacity: 0.6; }
.files-upload-zone:hover .upload-icon,
.files-upload-zone.drag-over .upload-icon { opacity: 1; color: var(--accent); }
.files-upload-zone .upload-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
#file-input { display: none; }
.file-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border); margin-bottom: 8px;
}
.file-emoji { font-size: 20px; flex-shrink: 0; line-height: 1; }
.file-info { flex: 1; min-width: 0; }
.file-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-encrypted-icon {
  display: inline-flex; vertical-align: -1px; margin-right: 4px;
  color: var(--text-secondary);
}
.file-encrypted-icon svg { width: 11px; height: 11px; }
.file-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
/* Short, human-typable file reference (syncpad-file:<N>) — click to copy.
   Monospace + a subtle pill so it visually reads as "code you could type",
   not just more metadata text. */
.file-ref-badge {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--text-secondary); background: var(--bg-base);
  border: 1px solid var(--border); border-radius: 100px;
  padding: 0 6px; line-height: 1.6; vertical-align: middle;
  transition: background var(--transition), color var(--transition);
}
.file-ref-badge:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.file-actions { display: flex; gap: 4px; flex-shrink: 0; }
.file-action-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); transition: background var(--transition), color var(--transition);
}
.file-action-btn svg { width: 14px; height: 14px; }
.file-action-btn:hover { background: var(--bg-base); color: var(--text-primary); }
.file-action-btn.delete:hover { color: var(--red); }
.uploading-indicator {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-secondary); padding: 8px 0;
}
.uploading-indicator .mini-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
.files-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 24px 0; }

/* Version History panel */
.history-activity-item { align-items: flex-start; }
.history-activity-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-base); color: var(--text-secondary); margin-top: 1px;
}
.history-activity-icon svg { width: 14px; height: 14px; }
.history-loading {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-secondary); padding: 8px 0;
}
.history-loading .mini-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
.history-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border); margin-bottom: 8px;
}
.history-info { flex: 1; min-width: 0; }
.history-meta { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.history-preview {
  font-size: 13px; color: var(--text-primary); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-preview-locked, .history-preview-empty { color: var(--text-muted); font-style: italic; }
.history-actions { flex-shrink: 0; }
.history-restore-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary); border: 1px solid var(--border);
  transition: background var(--transition), color var(--transition);
}
.history-restore-btn svg { width: 14px; height: 14px; }
.history-restore-btn:hover { background: var(--bg-base); color: var(--accent); border-color: var(--accent); }
.history-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 24px 0; }

/* Scrubbable time-slider — drag through history live, alongside the
   discrete list above rather than replacing it. */
.history-scrubber {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elevated); padding: 12px 14px; margin-bottom: 14px;
}
.history-scrubber-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.history-scrubber-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.history-scrubber-label { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.history-slider {
  width: 100%; appearance: none; height: 4px; border-radius: 2px;
  background: var(--border); outline: none; margin: 6px 0 10px;
}
.history-slider::-webkit-slider-thumb {
  appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 2px solid var(--bg-elevated);
  box-shadow: 0 0 0 1px var(--accent);
}
.history-slider::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--bg-elevated);
  background: var(--accent); cursor: pointer; box-shadow: 0 0 0 1px var(--accent);
}
.history-scrubber-preview {
  font-size: 12.5px; font-family: var(--font-mono); color: var(--text-primary);
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; max-height: 160px; overflow-y: auto; white-space: pre-wrap;
  word-break: break-word; margin-bottom: 10px;
}
.history-scrubber-preview:empty::before { content: '(empty note)'; color: var(--text-muted); font-style: italic; }
.history-scrubber-restore-btn { width: 100%; text-align: center; }
.history-scrubber-restore-btn:disabled { opacity: 0.5; cursor: default; pointer-events: none; }

/* Comments panel */
.comment-loading {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-secondary); padding: 8px 0;
}
.comment-loading .mini-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
.comment-composer {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-elevated); padding: 10px 12px; margin-bottom: 14px;
}
.comment-composer-anchor {
  font-size: 11px; color: var(--text-muted); font-style: italic;
  margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comment-composer-input {
  width: 100%; min-height: 60px; resize: vertical;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); font: inherit; font-size: 13px; padding: 8px 10px;
  outline: none; margin-bottom: 8px;
}
.comment-composer-input:focus { border-color: var(--accent); }
.comment-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comment-composer-charcount { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.comment-composer-btn { flex: 1; text-align: center; }
.comment-composer-hint {
  font-size: 12px; color: var(--text-muted); padding: 8px 2px 14px; line-height: 1.5;
}
/* A thread is every comment sharing one exact anchor, rendered as a small
   feed — one anchor header, a stack of messages, and its own reply box —
   instead of each comment repeating the same "On: ..." line as an
   independent card (see UI.renderCommentsList()/_groupIntoThreads()). */
.comment-thread {
  border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border); margin-bottom: 10px;
  overflow: hidden;
}
.comment-thread-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.comment-anchor-preview {
  flex: 1; min-width: 0;
  font-size: 11px; color: var(--text-muted); font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comment-thread-messages { padding: 2px 12px; }
.comment-thread-message {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 0;
}
.comment-thread-message + .comment-thread-message { border-top: 1px solid var(--border-soft); }
.comment-info { flex: 1; min-width: 0; }
.comment-meta { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.comment-text {
  font-size: 13px; color: var(--text-primary); margin-top: 4px;
  white-space: pre-wrap; word-break: break-word;
}
.comment-text-locked { color: var(--text-muted); font-style: italic; }
.comment-jump-btn, .comment-delete-btn {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--text-muted); border: 1px solid transparent;
}
.comment-jump-btn:hover { color: var(--accent); background: var(--bg-base); }
.comment-delete-btn:hover { color: var(--red); background: var(--bg-base); }
.comment-thread-reply {
  padding: 8px 10px; border-top: 1px solid var(--border-soft);
  background: var(--bg-surface);
}
.comment-thread-reply-input {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); font: inherit;
  font-size: 12.5px; padding: 6px 9px; outline: none;
}
.comment-thread-reply-input:focus { border-color: var(--accent); }
.comments-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 24px 0; }

@media (max-width: 639px) {
  /* Composer/reply inputs: under 16px triggers iOS Safari's page-zoom-on-
     focus (same fix already applied to Find/Replace's inputs). Jump/delete
     buttons: 26px is under the ~44px touch-target guideline used elsewhere
     in this pass. */
  .comment-composer-input, .comment-thread-reply-input { font-size: 16px; }
  .comment-jump-btn, .comment-delete-btn { width: 40px; height: 40px; }
}
.note-live .cm-comment-anchor { border-bottom: 2px dotted var(--accent); }
/* On touch, this span is the ONLY way to open a comment (the margin dot is
   hidden — see editor.css) — a faint fill makes it read as "tappable",
   not just styled text, since there's no hover state to discover it by. */
@media (hover: none), (pointer: coarse) {
  .note-live .cm-comment-anchor { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 2px; }
}

/* Files panel — select mode */
.panel-header-actions { display: flex; align-items: center; gap: 6px; }

/* Files sort dropdown */
.files-sort-select {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 5px;
  color: var(--text-secondary); font-size: 12px; padding: 3px 6px; cursor: pointer;
  font-family: inherit; outline: none;
}
.files-sort-select:hover { border-color: var(--accent); }
.files-sort-select:focus { border-color: var(--accent); }

.files-select-toggle {
  font-size: 12px; font-weight: 500; padding: 4px 10px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  color: var(--text-secondary); background: transparent;
  cursor: pointer; transition: border-color var(--transition), color var(--transition), background var(--transition);
  white-space: nowrap;
}
.files-select-toggle:hover { border-color: var(--accent); color: var(--accent); }
.files-select-toggle.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* Comments panel header — Prev/Next between the note's comments, alongside close */
.panel-header-nav-btn {
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; color: var(--text-secondary);
  background: transparent; border: none; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.panel-header-nav-btn:hover { background: var(--bg-elevated); color: var(--accent); }
.panel-header-nav-btn:disabled { opacity: 0.35; cursor: default; }
.panel-header-nav-btn:disabled:hover { background: transparent; color: var(--text-secondary); }
.files-bulk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-md); margin-bottom: 12px; flex-wrap: wrap;
}
.files-bulk-count { font-size: 13px; color: var(--text-secondary); flex-shrink: 0; }
.files-bulk-actions { display: flex; gap: 8px; }
.files-bulk-cancel-btn {
  font-size: 12px; padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--text-secondary); background: transparent;
  cursor: pointer; transition: border-color var(--transition), color var(--transition);
}
.files-bulk-cancel-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.files-bulk-delete-btn {
  font-size: 12px; padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--red); color: var(--red); background: transparent;
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.files-bulk-delete-btn:hover:not(:disabled) { background: var(--red); color: var(--text-inverse); }
.files-bulk-delete-btn:disabled { opacity: 0.38; cursor: not-allowed; }
.file-item--selectable { cursor: pointer; }
.file-item--selectable:hover { border-color: var(--accent); }
.file-select-cb { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); }

/* Prism.js syntax highlighting — JotRelay-theme-aware */
.note-preview pre[class*="language-"],
.note-preview code[class*="language-"] { background: var(--bg-base); color: var(--text-primary); }
.note-preview .token.comment,
.note-preview .token.prolog,
.note-preview .token.doctype,
.note-preview .token.cdata { color: var(--text-muted); font-style: italic; }
.note-preview .token.punctuation { color: var(--text-secondary); }
.note-preview .token.keyword,
.note-preview .token.tag,
.note-preview .token.selector,
.note-preview .token.important,
.note-preview .token.atrule,
.note-preview .token.attr-name { color: var(--accent); }
.note-preview .token.string,
.note-preview .token.char,
.note-preview .token.attr-value { color: var(--syntax-string); }
.note-preview .token.number,
.note-preview .token.boolean,
.note-preview .token.unit { color: var(--syntax-number); }
.note-preview .token.function,
.note-preview .token.class-name { color: var(--syntax-fn); }
.note-preview .token.operator,
.note-preview .token.entity,
.note-preview .token.url { color: var(--text-secondary); }
.note-preview .token.regex { color: var(--syntax-regex); }
.note-preview .token.inserted { color: var(--syntax-string); }
.note-preview .token.deleted { color: var(--red); }

/* Presence Panel */
.presence-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.presence-header-row h4 { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; }
.device-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--border); margin-bottom: 8px;
}
.device-item.me { border-color: rgba(245,166,35,0.25); }
/* background is set inline per device (colorForDevice()) — matches that
   device's caret/selection colour in the Live editor surface. */
.device-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
.device-info { flex: 1; min-width: 0; }
.device-name-text { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.device-meta { display: flex; align-items: center; gap: 4px; margin-top: 2px; flex-wrap: wrap; }
.device-activity { font-size: 11px; color: var(--text-muted); }
.device-activity.typing { color: var(--accent); font-style: italic; }
.device-activity.muted  { color: var(--text-muted); }
.device-joined { font-size: 11px; color: var(--text-muted); }
.device-followed-by { font-size: 11px; color: var(--accent); }
.device-role { font-size: 10px; color: var(--blue); background: rgba(96,165,250,0.1); border-radius: 10px; padding: 1px 7px; }
.device-you  { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.device-empty { font-size: 13px; color: var(--text-muted); padding: 6px 2px; }
.device-follow-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  color: var(--text-muted); border: 1px solid transparent;
}
.device-follow-btn:hover { color: var(--text-primary); background: var(--bg-base); }
@media (max-width: 639px) {
  /* Same fixes as Find/Replace and the Comments panel: under 16px triggers
     iOS Safari's zoom-on-focus, and 26px is under the ~44px touch-target
     guideline used elsewhere in this pass. */
  .device-name-edit { font-size: 16px; }
  .device-follow-btn { width: 40px; height: 40px; }
}
.device-follow-btn.is-active { color: var(--accent); background: var(--accent-dim); border-color: var(--accent); }
.device-name-edit {
  width: 100%; padding: 4px 8px; border-radius: var(--radius-sm);
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 13px; outline: none;
  transition: border-color var(--transition);
}
.device-name-edit:focus { border-color: var(--accent); }
.devices-help-text { font-size: 12px; color: var(--text-muted); margin-top: 14px; }

/* Settings Panel */
.settings-section { margin-bottom: 24px; }
.settings-section-title {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft);
}
.setting-row:last-child { border-bottom: none; }
.setting-label { font-size: 13px; color: var(--text-primary); }
.setting-label--about { color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.setting-sub   { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.setting-btn {
  padding: 5px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); font-size: 12px; font-weight: 500;
  color: var(--text-primary); background: var(--bg-elevated);
  transition: background var(--transition), border-color var(--transition);
}
.setting-btn:hover { background: var(--bg-base); border-color: var(--accent); color: var(--accent); }
.setting-btn.danger:hover { border-color: var(--red); color: var(--red); }
.setting-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

/* Theme picker */
.theme-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 8px;
}
.theme-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); padding: 6px 2px 2px;
}
.theme-section-title:first-child { padding-top: 0; }
.theme-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-bottom: 4px;
}
.theme-option {
  display: flex; flex-direction: column; gap: 6px; padding: 6px;
  border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border);
  cursor: pointer; font-size: 12px; color: var(--text-primary); text-align: left;
  transition: background var(--transition), border-color var(--transition), transform 0.15s ease, box-shadow 0.15s ease;
  /* Grid items default to an automatic minimum width of their content's
     min-content size, NOT 0 — a flex container child (.theme-label) having
     overflow:hidden only zeroes out ITS OWN min-content contribution one
     level up (inside this flex row), not this grid item's contribution to
     its 1fr column track. Without this, the two "equal" 1fr columns actually
     size themselves to each column's widest label's full unwrapped text
     width (e.g. "Charcoal Amber" vs "Midnight Blue" pull their columns to
     different widths), overflowing .panel-body horizontally — which, on top
     of its own overflow-y:auto, silently promotes overflow-x to auto too
     (the CSS "one non-visible axis forces the other out of visible" rule),
     producing the reported subtle sideways scroll. min-width: 0 lets the
     column tracks actually shrink to the panel's width, so .theme-label's
     existing ellipsis rule (below) is what visibly truncates long names
     instead of the grid silently overflowing around it. */
  min-width: 0;
}
/* Purely visual lift on hover/focus — unlike the old hover-preview, this
   never touches [data-theme] on <html>, so casually moving the pointer or
   tabbing through the list can't repaint the whole app. */
.theme-option:hover,
.theme-option:focus-visible { border-color: var(--text-muted); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.theme-option.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* Mini window mockup: base bg fills the card, a header-bar strip in the
   elevated tone sits on top, and a small accent "button" — reads like a
   tiny screenshot of the theme rather than an abstract color chip. */
.theme-preview {
  position: relative; width: 100%; height: 42px; border-radius: 6px;
  overflow: hidden; border: 1px solid rgba(127,127,127,0.18);
}
.theme-preview-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 30%;
}
.theme-preview-accent {
  position: absolute; left: 8px; bottom: 8px;
  width: 20px; height: 6px; border-radius: 3px;
}
.theme-preview-check {
  position: absolute; top: 5px; right: 5px;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--text-inverse);
  opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease;
}
.theme-option.active .theme-preview-check { opacity: 1; transform: scale(1); }
.theme-option-footer { display: flex; align-items: center; padding: 0 2px; }
.theme-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-option.active .theme-label { color: var(--accent); font-weight: 600; }

.settings-input {
  width: 100%; padding: 9px 12px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 13px; outline: none; margin-top: 6px;
  transition: border-color var(--transition);
}
.settings-input:focus { border-color: var(--accent); }
.device-limit-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.device-limit-input { width: 46px; margin-top: 0; padding: 6px 8px; text-align: center; flex-shrink: 0; }
@media (max-width: 639px) {
  /* The device-limit row's label+sub-text pairs with a number input and a
     button on the same line — on narrow viewports that crowds/overflows.
     Wrap the row and let the controls drop to their own full-width line
     instead of squeezing next to the label. */
  .setting-row { flex-wrap: wrap; gap: 8px 0; }
  .setting-row .device-limit-controls { width: 100%; justify-content: flex-end; }
}