/* Desktop layout + components for the redesigned paste-app frontend.
   Every color/spacing/type value here comes from tokens.css (README "Design
   Tokens", transcribed verbatim) — no invented hex/px in this file. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-14-5);
  line-height: var(--lh-card);
  overflow: hidden;
}

button, input, textarea {
  font-family: inherit;
  color: inherit;
}
button { cursor: pointer; }

/* ─── PIN SCREEN ─────────────────────────────────────────────────────────── */

#pin-screen {
  position: fixed; inset: 0; z-index: 500; background: var(--surface-0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .35s ease;
}
#pin-screen.fade-out { opacity: 0; pointer-events: none; }
#pin-screen.gone { display: none; }

.pin-wordmark {
  font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-29);
  letter-spacing: .22em; color: var(--accent);
  text-shadow: 0 0 60px rgba(70,229,213,.25);
  margin-bottom: var(--sp-6); user-select: none;
}
.pin-sub {
  font-size: var(--fs-12); letter-spacing: .12em; color: var(--text-dim-2);
  margin-bottom: var(--sp-34);
}
.pin-dots-row { display: flex; gap: var(--sp-10); margin-bottom: var(--sp-24); cursor: text; position: relative; }
.pin-dot {
  width: 40px; height: 48px; border: 1px solid var(--border-accent);
  border-radius: var(--r-input); background: var(--surface-list);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-22); color: var(--accent);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.pin-dot.filled { background: var(--surface-selected); }
.pin-dot.cursor { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#pin-input {
  position: fixed; left: -200vw; top: 50%; width: 100vw; height: 50px;
  opacity: 0; border: none; background: transparent; font-size: 16px;
}
.pin-tip { font-size: var(--fs-11); color: var(--text-dim-2); letter-spacing: .08em; }
.pin-err {
  min-height: 18px; margin-top: var(--sp-14); font-size: var(--fs-11);
  letter-spacing: .06em; color: var(--danger);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-9px); }
  36% { transform: translateX(9px); }
  54% { transform: translateX(-6px); }
  72% { transform: translateX(6px); }
}
.shake { animation: shake .38s ease; }

/* ─── APP SHELL ──────────────────────────────────────────────────────────── */

#app {
  height: 100vh;
  display: grid;
  grid-template-columns: var(--w-sidebar) 1fr;
  opacity: 0; transition: opacity .25s ease;
}
#app.visible { opacity: 1; }

/* ─── SIDEBAR ────────────────────────────────────────────────────────────── */

#sidebar {
  width: var(--w-sidebar);
  background: var(--surface-sidebar);
  border-right: 1px solid var(--border-main);
  padding: var(--sp-16) var(--sp-14);
  display: flex; flex-direction: column; gap: var(--sp-18);
  overflow-y: auto; min-width: 0;
}

.btn-new-note {
  background: var(--accent); color: var(--accent-text-on); border: none;
  border-radius: var(--r-input); padding: var(--sp-9) var(--sp-10);
  font-weight: 600; font-size: var(--fs-14); font-family: var(--font-ui);
  width: 100%; text-align: left;
}
.btn-new-note:hover { filter: brightness(1.08); }

.nav-list { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-9);
  padding: var(--sp-7) var(--sp-9); border-radius: var(--r-button);
  font-size: 14.5px; color: var(--text-secondary); cursor: pointer;
}
.nav-item:hover { background: rgba(255,255,255,.03); }
.nav-item.selected { background: var(--surface-selected); font-weight: 500; color: var(--text-primary); }
.nav-glyph {
  width: 13px; flex-shrink: 0; text-align: center;
  font-family: var(--font-mono); color: var(--text-dim-2); font-size: var(--fs-13);
}
.nav-label { flex: 1; min-width: 0; }
.nav-count {
  font-family: var(--font-mono); font-size: var(--fs-12-5); color: var(--text-dim-2);
  flex-shrink: 0;
}
.nav-count.nav-count-badge {
  background: var(--accent); color: var(--accent-text-on); border-radius: var(--r-badge);
  padding: 1px 5px; font-size: 11px;
}

.sidebar-block { display: flex; flex-direction: column; gap: var(--sp-8); }
.sidebar-heading {
  font-family: var(--font-mono); font-size: var(--fs-11-5); letter-spacing: .08em;
  color: var(--text-dim-2); text-transform: uppercase;
}
.sidebar-heading-row { display: flex; align-items: center; justify-content: space-between; }
.btn-icon {
  background: transparent; border: 1px solid var(--border-button); color: var(--text-dim);
  border-radius: var(--r-button); width: 20px; height: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.btn-icon:hover { color: var(--text-primary); border-color: var(--border-accent); }

.tag-chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.tag-chip {
  border-radius: var(--r-pill); padding: 2px 10px; font-size: var(--fs-14-5);
  border: 1px solid color-mix(in srgb, var(--tag-c) 55%, transparent);
  background: color-mix(in srgb, var(--tag-c) 14%, transparent);
  color: var(--tag-c); cursor: pointer;
}
.tag-chip.active { background: var(--tag-c); color: #0a0a14; }
.sidebar-empty { font-size: var(--fs-12-5); color: var(--text-meta); }

.folder-list { display: flex; flex-direction: column; }
.folder-item {
  padding: var(--sp-6) var(--sp-7); border-radius: var(--r-button);
  font-size: var(--fs-13-5); color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; gap: var(--sp-6);
}
.folder-item-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.folder-item:hover { background: rgba(255,255,255,.03); }
.folder-item.selected { background: var(--surface-selected); color: var(--text-primary); }
.folder-item.drag-over { background: var(--surface-selected); outline: 1px dashed var(--border-accent); }
.folder-rename-btn {
  background: transparent; border: none; color: var(--text-dim-2); font-size: var(--fs-12-5);
  line-height: 1; padding: 2px; flex-shrink: 0; cursor: pointer; visibility: hidden;
}
.folder-item:hover .folder-rename-btn { visibility: visible; }
.folder-rename-btn:hover { color: var(--text-primary); }

.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-6); }
.quota-line { font-size: var(--fs-12); color: var(--text-dim-2); }
.quota-track { height: 5px; border-radius: var(--r-pill); background: var(--border-row); overflow: hidden; }
.quota-fill { height: 100%; background: var(--accent); transition: width .3s; }
.quota-fill.high { background: var(--danger); }
.vps-line { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-meta); }

/* ─── MAIN CONTENT ───────────────────────────────────────────────────────── */

#main-content { min-width: 0; overflow: hidden; display: flex; }
.screen-stub { flex: 1; }

/* ─── NOTES SCREEN ───────────────────────────────────────────────────────── */

.notes-screen { display: grid; grid-template-columns: var(--w-list) 1fr; width: 100%; min-width: 0; }

/* -- list column -- */
.notes-list-col {
  width: var(--w-list); border-right: 1px solid var(--border-main);
  background: var(--surface-list); display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
}
.notes-list-header { padding: var(--sp-14); display: flex; flex-direction: column; gap: var(--sp-10); border-bottom: 1px solid var(--border-row); }
.notes-search {
  background: var(--surface-input); border: 1px solid var(--border-button);
  border-radius: var(--r-input); padding: var(--sp-8) var(--sp-10);
  font-size: var(--fs-13-5); color: var(--text-primary); width: 100%; outline: none;
}
.notes-search:focus { border-color: var(--border-accent); }
.owner-filter-row { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.owner-chip, .fav-chip {
  border: 1px solid var(--border-button); border-radius: var(--r-pill);
  padding: 3px 11px; font-size: var(--fs-12-5); color: var(--text-secondary);
  background: transparent;
}
.owner-chip.active, .fav-chip.active { background: var(--accent); color: var(--accent-text-on); border-color: var(--accent); }
.notes-count-line { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-dim-2); }

.notes-list { flex: 1; overflow-y: auto; }
.note-card {
  padding: var(--sp-12); border-bottom: 1px solid var(--border-row);
  display: flex; flex-direction: column; gap: var(--sp-7); cursor: pointer;
  border-left: 2px solid transparent; min-width: 0;
}
.note-card:hover { background: rgba(255,255,255,.02); }
.note-card.selected { background: var(--surface-selected); border-left-color: var(--border-accent); }
.note-card[draggable="true"] { cursor: grab; }
.note-card[draggable="true"]:active { cursor: grabbing; }
.note-card-top { display: flex; align-items: center; gap: var(--sp-7); min-width: 0; }
.note-card-title {
  font-weight: 600; font-size: var(--fs-14-5); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
.note-pin-btn, .file-pin-btn {
  background: transparent; border: none; color: var(--text-dim-2); font-size: var(--fs-14-5);
  line-height: 1; padding: 2px; flex-shrink: 0; cursor: pointer;
}
.note-pin-btn:hover, .file-pin-btn:hover { color: var(--text-primary); }
.note-pin-btn.pinned, .file-pin-btn.pinned { color: var(--accent); }
.btn-ghost.pinned { color: var(--accent); border-color: var(--accent-border-dim); }
.owner-badge {
  font-family: var(--font-mono); font-size: 11px; border-radius: var(--r-badge);
  padding: 0 5px; flex-shrink: 0;
}
.owner-badge.ai { border: 1px solid var(--badge-ai-border); color: var(--badge-ai-text); }
.owner-badge.me { border: 1px solid var(--badge-me-border-end); color: var(--badge-me-text); }
.note-card-excerpt {
  font-size: var(--fs-13-5); line-height: var(--lh-card); color: #9292bd;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.note-card-tags { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.note-card-time { font-family: var(--font-mono); font-size: var(--fs-12); color: #67678f; }
.note-card-folder {
  font-family: var(--font-mono); font-size: var(--fs-12); color: #67678f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.list-empty {
  padding: 40px var(--sp-16); text-align: center; color: var(--text-dim-2);
  font-size: var(--fs-12-5); line-height: 2;
}

/* -- editor column -- */
.notes-editor-col { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-frame); }

.editor-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-16); color: var(--text-dim-2);
}
.editor-empty-text { font-size: var(--fs-14-5); }

.editor-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

.editor-head {
  display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-14) var(--sp-18);
  border-bottom: 1px solid var(--border-row); flex-wrap: wrap;
}
.editor-breadcrumb {
  font-family: var(--font-mono); font-size: var(--fs-13); color: var(--text-dim-2);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto;
}
.editor-actions { display: flex; gap: var(--sp-6); flex-wrap: wrap; justify-content: flex-end; }
.btn-ghost {
  border: 1px solid var(--border-button); border-radius: var(--r-button);
  padding: var(--sp-5) var(--sp-11); font-size: var(--fs-13); background: transparent;
  color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--border-accent); color: var(--text-primary); }
.btn-ghost.danger:hover { border-color: var(--danger); color: var(--danger); }

.ai-bar {
  display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap;
  background: var(--surface-ai-bar); padding: var(--sp-11) var(--sp-18);
  border-bottom: 1px solid var(--border-row);
}
.ai-badge {
  font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--badge-ai-border);
  color: var(--badge-ai-text); border-radius: var(--r-badge); padding: 0 5px; flex-shrink: 0;
}
.ai-bar-text {
  flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: var(--fs-13-5); color: var(--text-secondary);
}
.ai-bar-actions { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.btn-primary {
  background: var(--accent); color: var(--accent-text-on); border: none;
  border-radius: var(--r-button); padding: var(--sp-6) var(--sp-14);
  font-weight: 600; font-size: var(--fs-13); white-space: nowrap;
}
.btn-primary:hover { filter: brightness(1.08); }
.ai-diff { padding: var(--sp-10) var(--sp-18); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }
.ai-diff-add { background: var(--diff-add-bg); color: var(--diff-add-text); padding: 2px 8px; white-space: pre-wrap; word-break: break-word; }
.ai-diff-add .sign { color: var(--diff-add-sign); }
.ai-diff-del { background: var(--diff-del-bg); color: var(--diff-del-text); padding: 2px 8px; white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.ai-diff-del .sign { color: var(--diff-del-sign); }

.editor-title-input {
  border: none; background: transparent; outline: none;
  font-weight: 700; font-size: var(--fs-29); line-height: var(--lh-heading);
  font-family: var(--font-ui); color: var(--text-primary);
  padding: var(--sp-18) var(--sp-18) 0;
}

.editor-tag-row { display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap; padding: var(--sp-10) var(--sp-18); }
.editor-tag-chip {
  border-radius: var(--r-pill); padding: 2px 10px; font-size: var(--fs-14-5);
  border: 1px solid color-mix(in srgb, var(--tag-c) 55%, transparent);
  background: color-mix(in srgb, var(--tag-c) 14%, transparent);
  color: var(--tag-c); cursor: pointer;
}
.editor-tag-add {
  border: 1px dashed var(--border-accent); border-radius: var(--r-pill);
  padding: 2px 10px; font-size: var(--fs-14-5); color: var(--text-dim-2); background: transparent;
}
.tag-row-spacer { flex: 1; }
.mode-switch { display: flex; border: 1px solid var(--border-button); border-radius: var(--r-button); overflow: hidden; }
.mode-switch-btn { background: transparent; border: none; padding: 4px 12px; font-size: var(--fs-12-5); color: var(--text-dim-2); font-family: var(--font-mono); }
.mode-switch-btn.active { background: var(--accent); color: var(--accent-text-on); }

.editor-toolbar {
  display: flex; align-items: center; gap: var(--sp-11); padding: var(--sp-8) var(--sp-18);
  font-family: var(--font-mono); font-size: var(--fs-14); color: var(--text-dim-2);
}
.tb-btn { background: transparent; border: none; color: var(--text-dim-2); font-family: var(--font-mono); font-size: var(--fs-14); padding: 2px 4px; }
.tb-btn:hover { color: var(--text-primary); }
.tb-attach { color: var(--text-secondary); margin-left: auto; font-size: var(--fs-13); }

.editor-content-ta {
  border: none; background: transparent; outline: none; resize: none;
  font-family: var(--font-ui); font-weight: 400; font-size: var(--fs-15-5); line-height: var(--lh-content);
  color: var(--text-content-start);
  max-width: var(--w-editor-content); width: 100%;
  padding: var(--sp-10) var(--sp-18); flex: 1; min-height: 200px;
}
.editor-content-ta.source-mode { font-family: var(--font-mono); font-size: var(--fs-14-5); }

.attachments-block { padding: var(--sp-10) var(--sp-18); display: flex; flex-direction: column; gap: var(--sp-8); }
.attachments-heading { font-size: var(--fs-13); color: var(--text-secondary); font-weight: 500; }
.attachment-row {
  display: flex; align-items: center; gap: var(--sp-10);
  border: 1px solid var(--border-main); border-radius: var(--r-card);
  padding: var(--sp-11) var(--sp-12);
}
.attachment-thumb { width: 34px; height: 34px; border-radius: 4px; background: var(--surface-code); flex-shrink: 0; background-size: cover; background-position: center; }
.attachment-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13-5); }
.attachment-size { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-meta); }
.attachment-remove { background: transparent; border: none; color: var(--text-dim-2); font-size: var(--fs-12); }
.attachment-remove:hover { color: var(--danger); }

.history-panel { border-top: 1px solid var(--border-row); padding: var(--sp-14) var(--sp-18); display: flex; flex-direction: column; gap: var(--sp-10); }
.history-panel-head { display: flex; align-items: center; gap: var(--sp-10); }
.history-list { display: flex; flex-direction: column; gap: var(--sp-8); max-height: 260px; overflow-y: auto; }
.history-item {
  border: 1px solid var(--border-main); border-radius: var(--r-card); padding: var(--sp-10) var(--sp-11);
  display: flex; align-items: center; gap: var(--sp-10); min-width: 0;
}
.history-item-meta { flex: 1; min-width: 0; }
.history-item-who { font-size: var(--fs-13); color: var(--text-secondary); }
.history-item-excerpt { font-size: var(--fs-12-5); color: var(--text-dim-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item-time { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-meta); flex-shrink: 0; }
.history-empty { font-size: var(--fs-12-5); color: var(--text-meta); }

.editor-footer {
  display: flex; align-items: center; gap: var(--sp-14); flex-wrap: wrap;
  padding: var(--sp-11) var(--sp-18); border-top: 1px solid var(--border-row);
  font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-meta);
}
.editor-footer-spacer { flex: 1; }

/* ─── TOAST ──────────────────────────────────────────────────────────────── */

#toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--accent); color: var(--accent-text-on);
  border-radius: var(--r-input); padding: var(--sp-9) var(--sp-16);
  font-size: var(--fs-13-5); z-index: 700; transition: transform .25s ease;
  box-shadow: var(--shadow-toast); max-width: 90vw;
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ─── MODAL ──────────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed; inset: 0; z-index: 800; display: none;
  align-items: center; justify-content: center; background: rgba(4,5,6,.72);
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: var(--surface-list); border: 1px solid var(--border-main);
  border-radius: var(--r-overlay); padding: var(--sp-22) var(--sp-24);
  width: min(420px, calc(100vw - 40px)); box-shadow: var(--shadow-card);
}
.modal-title { font-size: var(--fs-14-5); font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-12); }
.modal-msg { font-size: var(--fs-13-5); color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--sp-16); word-break: break-word; }
.modal-input {
  display: none; width: 100%; background: var(--surface-input); border: 1px solid var(--border-button);
  color: var(--text-primary); font-size: var(--fs-14-5); padding: var(--sp-9) var(--sp-11);
  border-radius: var(--r-input); outline: none; margin-bottom: var(--sp-16);
}
.modal-input:focus { border-color: var(--border-accent); }
.modal-bar { display: flex; gap: var(--sp-8); justify-content: flex-end; }
.modal-btn {
  font-size: var(--fs-13); font-weight: 600; padding: var(--sp-7) var(--sp-16);
  border-radius: var(--r-button); border: none;
}
.modal-btn.cancel { background: transparent; color: var(--text-dim-2); border: 1px solid var(--border-button); }
.modal-btn.cancel:hover { color: var(--text-secondary); }
.modal-btn.ok { background: var(--accent); color: var(--accent-text-on); }
.modal-btn.ok:hover { filter: brightness(1.08); }
.modal-btn.ok.danger { background: var(--danger); color: #2a0a16; }

/* ─── FILES SCREEN ───────────────────────────────────────────────────────── */

.files-screen { flex: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; background: var(--surface-frame); }

.files-header { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-16) var(--sp-18); flex-wrap: wrap; border-bottom: 1px solid var(--border-row); }
.files-title { font-size: var(--fs-22); font-weight: 700; flex-shrink: 0; }
.files-search {
  flex: 1 1 200px; min-width: 160px; background: var(--surface-input); border: 1px solid var(--border-button);
  border-radius: var(--r-input); padding: var(--sp-8) var(--sp-10); font-size: var(--fs-13-5);
  color: var(--text-primary); outline: none;
}
.files-search:focus { border-color: var(--border-accent); }

.files-filter-row { display: flex; align-items: center; gap: var(--sp-14); padding: var(--sp-12) var(--sp-18); flex-wrap: wrap; border-bottom: 1px solid var(--border-row); }
.file-owner-chip {
  border: 1px solid var(--border-button); border-radius: var(--r-pill);
  padding: 3px 11px; font-size: var(--fs-12-5); color: var(--text-secondary); background: transparent;
}
.file-owner-chip.active { background: var(--accent); color: var(--accent-text-on); border-color: var(--accent); }
.files-quota { display: flex; align-items: center; gap: var(--sp-10); margin-left: auto; }
.files-quota-line { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-dim-2); white-space: nowrap; }
.files-quota-track { width: 140px; height: 5px; border-radius: var(--r-pill); background: var(--border-row); overflow: hidden; }
.files-quota-fill { height: 100%; background: var(--accent); transition: width .3s; }
.files-quota-fill.high { background: var(--danger); }

.files-breadcrumb-row { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-10) var(--sp-18); font-family: var(--font-mono); font-size: var(--fs-13); color: var(--text-dim-2); }
.crumb {
  background: transparent; border: 0; padding: var(--sp-2) var(--sp-5); border-radius: var(--r-button);
  font-family: var(--font-mono); font-size: var(--fs-13); color: var(--text-dim-2); cursor: pointer;
}
.crumb:hover { color: var(--text-primary); background: var(--surface-selected); }
.crumb.current { color: var(--text-secondary); cursor: default; }
.crumb.drag-over { color: var(--accent); outline: 1px dashed var(--accent); }
.crumb-sep { color: var(--text-meta); }

.files-upload-row { padding: 0 var(--sp-18) var(--sp-12); display: flex; align-items: center; gap: var(--sp-10); }
.upload-progress-track { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--border-row); overflow: hidden; }
.upload-progress-fill { height: 100%; background: var(--accent); transition: width .15s linear; }
.upload-progress-label { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-dim-2); white-space: nowrap; }

.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-14); padding: var(--sp-18); }
.file-card {
  border: 1px solid var(--border-main); background: var(--surface-list); border-radius: var(--r-card);
  padding: var(--sp-12); min-width: 0; overflow: hidden; display: flex; flex-direction: column;
  gap: var(--sp-8); cursor: pointer; position: relative;
}
.file-card.selected { border-color: var(--border-accent); background: var(--surface-selected); }
.file-card[data-kind="folder"].drag-over { border-color: var(--accent); background: var(--surface-selected); outline: 1px dashed var(--accent); }
.file-check { position: absolute; top: var(--sp-8); left: var(--sp-8); width: 15px; height: 15px; z-index: 2; visibility: hidden; }
.file-card:hover .file-check, .file-card.selected .file-check { visibility: visible; }
.file-thumb {
  width: 62px; height: 62px; border-radius: var(--r-input); background: var(--surface-code);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);
  font-size: var(--fs-13); font-weight: 600; letter-spacing: .03em; color: var(--text-dim);
  background-size: cover; background-position: center;
}
.file-thumb.has-thumb { color: transparent; }
.file-thumb.folder-thumb { color: var(--accent); font-size: var(--fs-22); }
.file-name-row { display: flex; align-items: center; gap: var(--sp-7); min-width: 0; }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--fs-13-5); }
.file-meta { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.files-sort-select {
  background: var(--surface-code); border: 1px solid var(--border-button); border-radius: var(--r-button);
  color: var(--text-secondary); font-size: var(--fs-12); font-family: var(--font-mono);
  padding: var(--sp-5) var(--sp-8);
}
.files-view-toggle { display: flex; border: 1px solid var(--border-button); border-radius: var(--r-button); overflow: hidden; }
.view-btn { background: transparent; border: 0; color: var(--text-dim-2); padding: var(--sp-5) var(--sp-9); cursor: pointer; font-size: var(--fs-13); }
.view-btn.active { background: var(--surface-selected); color: var(--text-primary); }

/* list view: same cards, laid out as full-width rows */
.files-grid.list-view { display: flex; flex-direction: column; gap: var(--sp-5); }
.files-grid.list-view .file-card { flex-direction: row; align-items: center; padding: var(--sp-8) var(--sp-12); gap: var(--sp-10); }
.files-grid.list-view .file-check { position: static; visibility: hidden; }
.files-grid.list-view .file-card:hover .file-check, .files-grid.list-view .file-card.selected .file-check { visibility: visible; }
.files-grid.list-view .file-thumb { width: 32px; height: 32px; font-size: var(--fs-11-5); flex-shrink: 0; }
.files-grid.list-view .file-thumb.folder-thumb { font-size: var(--fs-16-5); }
.files-grid.list-view .file-info { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: var(--sp-10); }
.files-grid.list-view .file-name-row { flex: 1; min-width: 0; }
.files-grid.list-view .file-meta { flex-shrink: 0; }
.files-grid.list-view .file-dropzone { min-height: 64px; }

.file-dropzone {
  grid-column: span 2; border: 1px dashed var(--border-accent); border-radius: var(--r-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-6);
  color: var(--text-dim-2); cursor: pointer; min-height: 150px; text-align: center;
}
.file-dropzone.drag-over { border-color: var(--accent); color: var(--accent); background: rgba(70, 229, 213, .06); }
.file-dropzone-title { font-size: var(--fs-14-5); color: var(--text-secondary); }
.file-dropzone-sub { font-size: var(--fs-12); color: var(--text-meta); }

.file-selbar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(100px);
  display: flex; align-items: center; gap: var(--sp-14); background: var(--surface-ai-bar);
  border: 1px solid var(--border-accent); border-radius: var(--r-input); padding: var(--sp-9) var(--sp-16);
  box-shadow: var(--shadow-card); z-index: 120; transition: transform .2s ease;
}
.file-selbar.show { transform: translateX(-50%) translateY(0); }
.file-selbar-count { font-size: var(--fs-13-5); color: var(--text-primary); font-weight: 500; white-space: nowrap; }
.file-selbar-actions { display: flex; gap: var(--sp-8); flex-wrap: wrap; }

/* -- preview overlay -- */
.preview-overlay { position: fixed; inset: 0; z-index: 150; display: none; align-items: center; justify-content: center; background: rgba(4, 5, 6, .72); }
.preview-overlay.show { display: flex; }
.preview-card {
  width: min(520px, calc(100vw - 40px)); background: var(--surface-list); border: 1px solid var(--border-main);
  border-radius: var(--r-overlay); padding: var(--sp-22); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--sp-14);
}
.preview-head { display: flex; align-items: center; gap: var(--sp-10); }
.preview-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--fs-14-5); }
.preview-close {
  background: transparent; border: 1px solid var(--border-button); border-radius: var(--r-button);
  width: 26px; height: 26px; color: var(--text-dim-2); flex-shrink: 0; line-height: 1;
}
.preview-close:hover { color: var(--text-primary); border-color: var(--border-accent); }
.preview-frame { height: 240px; border-radius: var(--r-input); background: var(--surface-code); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.preview-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.preview-frame .file-thumb { width: 96px; height: 96px; font-size: var(--fs-18); }
.preview-meta { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-dim-2); }

/* File editor overlay — reuses .editor-head/.editor-breadcrumb/.editor-actions/
   .editor-toolbar/.tb-btn/.editor-content-ta/.editor-footer from the notes
   editor column (same visual language), just inside a modal card instead of
   a full column. */
.file-editor-overlay { position: fixed; inset: 0; z-index: 150; display: none; align-items: center; justify-content: center; background: rgba(4, 5, 6, .72); }
.file-editor-overlay.show { display: flex; }
.file-editor-card {
  width: min(720px, calc(100vw - 40px)); max-height: calc(100vh - 80px); background: var(--surface-list);
  border: 1px solid var(--border-main); border-radius: var(--r-overlay); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; overflow: hidden;
}
.file-editor-card .editor-content-ta { max-width: none; min-height: 320px; }
.fe-conflict-banner {
  display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-10) var(--sp-18);
  background: var(--danger-bg, rgba(220, 80, 80, .12)); color: var(--danger); font-size: var(--fs-13);
}

/* -- move picker overlay -- */
.move-overlay { position: fixed; inset: 0; z-index: 150; display: none; align-items: center; justify-content: center; background: rgba(4, 5, 6, .72); }
.move-overlay.show { display: flex; }
.move-card {
  width: min(360px, calc(100vw - 40px)); background: var(--surface-list); border: 1px solid var(--border-main);
  border-radius: var(--r-overlay); padding: var(--sp-22); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--sp-14); max-height: 70vh;
}
.move-title { font-weight: 600; font-size: var(--fs-14-5); }
.move-tree { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.move-node { padding: var(--sp-7) var(--sp-9); border-radius: var(--r-button); font-size: var(--fs-13-5); color: var(--text-secondary); cursor: pointer; }
.move-node:hover { background: rgba(255, 255, 255, .03); }
.move-node.sel { background: var(--surface-selected); color: var(--text-primary); }
.move-node.disabled { opacity: .4; cursor: not-allowed; }
.move-bar { display: flex; gap: var(--sp-8); justify-content: flex-end; }

/* -- context menu (right-click / ⋮) -- */
#ctx-menu {
  position: fixed; z-index: 200; display: none; flex-direction: column; min-width: 180px;
  background: var(--surface-list); border: 1px solid var(--border-main); border-radius: var(--r-input);
  box-shadow: var(--shadow-card); padding: var(--sp-5); user-select: none;
}
#ctx-menu.show { display: flex; }
.ctx-item {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  padding: var(--sp-7) var(--sp-10); border-radius: var(--r-button);
  font-size: var(--fs-13-5); color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.ctx-item:hover { background: var(--surface-selected); color: var(--text-primary); }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.ctx-item.disabled { opacity: .4; cursor: not-allowed; }
.ctx-sep { height: 1px; background: var(--border-row); margin: var(--sp-5) var(--sp-8); }
#ctx-menu.sheet {
  left: 0 !important; right: 0; top: auto !important; bottom: 0; min-width: 0;
  border-radius: var(--r-overlay) var(--r-overlay) 0 0; border-bottom: 0;
  padding: var(--sp-10) var(--sp-10) calc(var(--sp-10) + env(safe-area-inset-bottom));
}
#ctx-menu.sheet .ctx-item { padding: var(--sp-11) var(--sp-12); font-size: var(--fs-14-5); }
.file-menu-btn {
  background: transparent; border: 0; color: var(--text-dim-2); font-size: var(--fs-14-5);
  padding: 0 var(--sp-5); border-radius: var(--r-button); cursor: pointer; flex-shrink: 0;
  visibility: hidden; line-height: 1;
}
.file-card:hover .file-menu-btn, .file-card.selected .file-menu-btn { visibility: visible; }
.file-menu-btn:hover { color: var(--text-primary); background: var(--surface-selected); }

/* ─── TRASH SCREEN ───────────────────────────────────────────────────────── */

.trash-screen { flex: 1; min-width: 0; overflow-y: auto; padding: var(--sp-18); display: flex; flex-direction: column; gap: var(--sp-26); }
.trash-section-title { font-size: var(--fs-18); font-weight: 700; margin-bottom: var(--sp-12); }
.trash-list { display: flex; flex-direction: column; gap: var(--sp-8); }
.trash-row {
  display: flex; align-items: center; gap: var(--sp-12); border: 1px solid var(--border-main);
  border-radius: var(--r-card); padding: var(--sp-11) var(--sp-14); background: var(--surface-list); min-width: 0;
}
.trash-row-icon {
  width: 34px; height: 34px; border-radius: var(--r-input); background: var(--surface-code);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);
  font-size: 11px; color: var(--text-dim); flex-shrink: 0;
}
.trash-row-info { flex: 1; min-width: 0; }
.trash-row-name { font-size: var(--fs-13-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-row-meta { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-meta); }
.trash-row-actions { display: flex; gap: var(--sp-8); flex-shrink: 0; }
.trash-empty { border: 1px dashed var(--border-button); border-radius: var(--r-card); padding: var(--sp-22); text-align: center; color: var(--text-dim-2); font-size: var(--fs-13); }

/* ─── SHARED: right-column "side panel" (AI activity + Settings) ───────────── */

.side-panel-block { display: flex; flex-direction: column; gap: var(--sp-10); }
.side-panel-heading { font-size: var(--fs-14-5); font-weight: 600; color: var(--text-primary); }
.side-panel-desc { font-size: var(--fs-12-5); color: var(--text-dim-2); line-height: 1.6; }
.side-panel-note { font-size: var(--fs-12); color: var(--text-meta); }
.endpoint-box {
  font-family: var(--font-mono); font-size: var(--fs-12-5); background: var(--surface-code);
  padding: var(--sp-10); border-radius: var(--r-input); color: var(--text-secondary); word-break: break-all;
}

/* ─── SHARED: switch (rules / automation toggles) ───────────────────────────── */

.switch {
  width: var(--switch-w); height: var(--switch-h); border-radius: var(--r-pill);
  background: var(--border-main); position: relative; border: none; padding: 0; flex-shrink: 0;
}
.switch .switch-knob {
  position: absolute; top: 2px; left: 2px;
  width: calc(var(--switch-h) - 4px); height: calc(var(--switch-h) - 4px);
  border-radius: 50%; background: var(--text-dim-2);
  transition: transform .15s ease, background .15s ease;
}
.switch.on { background: var(--accent); }
.switch.on .switch-knob { background: var(--accent-text-on); transform: translateX(calc(var(--switch-w) - var(--switch-h))); }

button:disabled { opacity: .45; cursor: not-allowed; }

/* ─── SHARED: agent access / token panel ────────────────────────────────────── */

.token-list { display: flex; flex-direction: column; gap: var(--sp-12); }
.token-card {
  border: 1px solid var(--border-main); background: var(--surface-ai-bar); border-radius: var(--r-card);
  padding: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0;
}
.token-card-name { font-family: var(--font-mono); font-size: var(--fs-13-5); font-weight: 600; color: var(--text-primary); }
.token-card-meta { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-meta); }
.token-target-badge {
  align-self: flex-start; border: 1px solid var(--accent-border-dim); color: var(--accent);
  border-radius: var(--r-badge); padding: 1px 6px; font-family: var(--font-mono); font-size: 11px;
}
.token-config {
  background: var(--surface-code); font-family: var(--font-mono); font-size: var(--fs-11-5); line-height: 1.7;
  word-break: break-all; white-space: pre-wrap; padding: var(--sp-10); border-radius: var(--r-input); color: var(--text-dim);
}
.token-card-actions { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.token-create-card {
  border: 1px dashed var(--border-accent); border-radius: var(--r-card); padding: var(--sp-12);
  background: transparent; color: var(--text-dim-2); font-size: var(--fs-13-5); text-align: left;
}
.token-create-card:hover { color: var(--text-primary); border-color: var(--accent); }
.token-create-form {
  border: 1px solid var(--border-main); border-radius: var(--r-card); padding: var(--sp-12);
  display: flex; flex-direction: column; gap: var(--sp-8); background: var(--surface-ai-bar);
}
.token-create-input, .token-create-select {
  background: var(--surface-input); border: 1px solid var(--border-button); border-radius: var(--r-input);
  padding: var(--sp-8) var(--sp-10); font-size: var(--fs-13-5); color: var(--text-primary); outline: none;
}
.token-create-actions { display: flex; gap: var(--sp-8); justify-content: flex-end; }
.token-reveal-card {
  border: 1px solid var(--accent-border-dim); background: var(--surface-ai-bar); border-radius: var(--r-card);
  padding: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-8);
}
.token-reveal-title { font-family: var(--font-mono); font-size: var(--fs-13-5); font-weight: 600; }
.token-reveal-warn { font-size: var(--fs-12); color: var(--danger); }
.token-reveal-box {
  font-family: var(--font-mono); font-size: var(--fs-12); word-break: break-all; background: var(--surface-code);
  padding: var(--sp-10); border-radius: var(--r-input); color: var(--accent); user-select: all;
}

/* ─── AI ACTIVITY SCREEN ─────────────────────────────────────────────────────── */

.ai-screen { display: flex; width: 100%; min-width: 0; }
.ai-main-col { flex: 1; min-width: 0; overflow-y: auto; padding: var(--sp-18); display: flex; flex-direction: column; gap: var(--sp-22); }
.ai-side-col {
  width: var(--w-side-panel); flex-shrink: 0; border-left: 1px solid var(--border-main);
  padding: var(--sp-18); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-22);
  background: var(--surface-frame);
}
.ai-screen-header { display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; }
.ai-screen-title { font-size: var(--fs-22); font-weight: 700; }
.ai-screen-count {
  font-family: var(--font-mono); font-size: 11px; background: var(--accent); color: var(--accent-text-on);
  border-radius: var(--r-badge); padding: 1px 6px;
}
.queue-list { display: flex; flex-direction: column; gap: var(--sp-14); }
.queue-card {
  border: 1px solid var(--border-accent); background: var(--surface-ai-bar); border-radius: var(--r-card);
  padding: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-10); min-width: 0;
}
.queue-card-head { display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; }
.queue-card-desc { flex: 1 1 200px; min-width: 0; font-size: var(--fs-13-5); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-card-time { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-meta); flex-shrink: 0; }
.queue-card-actions { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.queue-token-badge { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-dim-2); }
.queue-empty { border: 1px dashed var(--border-button); border-radius: var(--r-card); padding: var(--sp-22); text-align: center; color: var(--text-dim-2); font-size: var(--fs-13); }
.activity-history-block { display: flex; flex-direction: column; gap: var(--sp-8); }
.activity-history-list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.activity-history-row { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-9) 0; border-top: 1px solid var(--border-row); min-width: 0; }
.activity-history-row:first-child { border-top: none; }
.activity-history-what { flex: 1; min-width: 0; font-size: var(--fs-13-5); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-history-time { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-meta); flex-shrink: 0; }
.activity-history-empty { font-size: var(--fs-12-5); color: var(--text-meta); }

/* ─── SEARCH SCREEN ──────────────────────────────────────────────────────────── */

.search-screen { flex: 1; min-width: 0; overflow-y: auto; padding: var(--sp-18); display: flex; flex-direction: column; gap: var(--sp-16); }
.search-title { font-size: var(--fs-22); font-weight: 700; }
.search-input-big {
  padding: var(--sp-12) var(--sp-14); font-size: var(--fs-16-5); max-width: 720px; width: 100%;
  background: var(--surface-input); border: 1px solid var(--border-button); border-radius: var(--r-input);
  color: var(--text-primary); outline: none;
}
.search-input-big:focus { border-color: var(--border-accent); }
.search-filters { display: flex; flex-direction: column; gap: var(--sp-10); }
/* search-owner-chip / search-tag-chip visually reuse owner-chip / tag-chip —
   distinct classes only so this screen's own click handler is the sole match
   (see search.js header comment); no separate declarations needed here. */
.search-summary-row { display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; }
.search-summary-line { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-dim-2); flex: 1 1 200px; min-width: 0; }
.search-results { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-22); align-items: start; }
.search-notes-col, .search-side-col { display: flex; flex-direction: column; gap: var(--sp-16); min-width: 0; }
.search-side-col > div { display: flex; flex-direction: column; gap: var(--sp-8); }
.search-section-heading { font-size: var(--fs-13); font-weight: 600; color: var(--text-secondary); }
.search-list { display: flex; flex-direction: column; gap: var(--sp-8); }
.search-note-card { border: 1px solid var(--border-main); border-radius: var(--r-card); background: var(--surface-list); }
.search-file-row {
  display: flex; align-items: center; gap: var(--sp-10); border: 1px solid var(--border-main); border-radius: var(--r-card);
  padding: var(--sp-9) var(--sp-11); background: var(--surface-list); min-width: 0;
}
.search-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.search-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13); }
.search-file-path { font-family: var(--font-mono); font-size: 11px; color: var(--text-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-file-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-meta); flex-shrink: 0; }
.saved-view-card {
  border: 1px solid var(--border-main); border-radius: var(--r-card); padding: var(--sp-11);
  background: var(--surface-list); display: flex; flex-direction: column; gap: var(--sp-5); cursor: pointer; min-width: 0;
}
.saved-view-card:hover { border-color: var(--border-accent); }
.saved-view-name-row { display: flex; align-items: center; gap: var(--sp-8); }
.saved-view-name { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-13-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-view-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-meta); }
.search-empty { color: var(--text-dim-2); font-size: var(--fs-12-5); padding: var(--sp-16); text-align: center; border: 1px dashed var(--border-button); border-radius: var(--r-card); }

/* ─── SETTINGS SCREEN ────────────────────────────────────────────────────────── */

.settings-screen { display: flex; width: 100%; min-width: 0; }
.settings-main-col { flex: 1; min-width: 0; overflow-y: auto; padding: var(--sp-18); display: flex; flex-direction: column; gap: var(--sp-16); }
.settings-side-col {
  width: var(--w-side-panel); flex-shrink: 0; border-left: 1px solid var(--border-main);
  padding: var(--sp-18); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-22);
  background: var(--surface-frame);
}
.settings-card {
  border: 1px solid var(--border-main); border-radius: var(--r-card); background: var(--surface-list);
  padding: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-12); min-width: 0;
}
.settings-card-title { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-14-5); font-weight: 600; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex-shrink: 0; }
.kv-table { display: flex; flex-direction: column; gap: var(--sp-7); }
.kv-row { display: flex; align-items: center; gap: var(--sp-10); font-size: var(--fs-13); }
.kv-key { color: var(--text-dim-2); width: 110px; flex-shrink: 0; }
.kv-val { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-12-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-quota-row { display: flex; flex-direction: column; gap: var(--sp-6); }
.automation-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); padding: var(--sp-7) 0; }
.automation-label { font-size: var(--fs-13-5); color: var(--text-secondary); }
.rule-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); padding: var(--sp-7) 0; }
.rule-label { font-size: var(--fs-13-5); color: var(--text-secondary); }
.settings-data-row { display: flex; gap: var(--sp-10); flex-wrap: wrap; }