/* NOOS — shell do app + componentes do vault (Fase 0) */

.login-view { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.login-card { width: 320px; display: flex; flex-direction: column; gap: var(--sp-4); }
.input {
  background: var(--bg-sunken); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--sp-2-5) var(--sp-3-5);
  color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-sm);
  outline: none; transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); }

.app-shell {
  display: flex;
  height: 100dvh;
  overflow: hidden;
}

.sidebar {
  width: 260px;
  height: 100dvh;
  background: var(--bg-raised);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  min-height: 64px;
}
.sidebar-logo-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary), var(--violet-700));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px var(--color-primary-border), var(--shadow-glow);
  font-size: var(--text-lg);
}
.sidebar-logo-text { font-weight: var(--font-bold); font-size: var(--text-base); }

.sidebar-nav { flex: 1; padding: var(--sp-3) var(--sp-2); overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2-5) var(--sp-3);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-size: var(--text-sm); font-weight: var(--font-medium);
  cursor: pointer; text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.nav-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.nav-item.active { background: var(--color-primary-subtle); color: var(--color-primary); font-weight: var(--font-semibold); }

.note-list { flex: 1; padding: var(--sp-2); overflow-y: auto; }
.note-list-item {
  padding: var(--sp-2-5) var(--sp-3);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--duration-fast);
}
.note-list-item:hover, .note-list-item.active { background: var(--surface-hover); }
.note-list-item-title { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); }
.note-list-item-meta { font-size: var(--text-2xs); color: var(--text-tertiary); margin-top: 2px; }

.main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.topbar {
  height: 64px;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-6);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.topbar-search {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--bg-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-2) var(--sp-3);
  min-width: 280px;
}
.topbar-search input { border: none; background: transparent; color: var(--text-primary); outline: none; width: 100%; font-size: var(--text-sm); }

.editor-shell { flex: 1; display: flex; overflow: hidden; }
.editor-pane { flex: 1.4; display: flex; flex-direction: column; border-right: 1px solid var(--border-subtle); min-width: 0; }
.editor-toolbar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border-subtle); }
.editor-title-input {
  font-size: var(--text-xl); font-weight: var(--font-semibold);
  background: transparent; border: none; outline: none; color: var(--text-primary);
  width: 100%; padding: var(--sp-4) var(--sp-5) 0;
}
.editor-body { flex: 1; display: flex; overflow: hidden; }
.editor-source, .editor-preview {
  flex: 1; padding: var(--sp-5); overflow-y: auto;
  font-size: var(--text-sm); line-height: var(--leading-relaxed);
}
.editor-source {
  background: transparent; border: none; outline: none; resize: none;
  color: var(--text-primary); font-family: var(--font-mono);
}
.editor-preview { border-left: 1px solid var(--border-subtle); color: var(--text-primary); }
.editor-preview h1, .editor-preview h2, .editor-preview h3 { font-weight: var(--font-semibold); }
.editor-preview code { background: var(--surface-2); padding: 0 var(--sp-1); border-radius: var(--radius-sm); font-family: var(--font-mono); }
.editor-preview pre { background: var(--bg-sunken); padding: var(--sp-3); border-radius: var(--radius-md); overflow-x: auto; }
.editor-preview a.wikilink {
  color: var(--color-primary); text-decoration: none; border-bottom: 1px dashed var(--color-primary-border); cursor: pointer;
}
.editor-preview a.wikilink.ghost { color: var(--text-tertiary); border-bottom-style: dotted; }
.editor-preview .tag-pill {
  display: inline-block; background: var(--color-primary-subtle); color: var(--color-primary);
  padding: 0 var(--sp-2); border-radius: var(--radius-full); font-size: var(--text-xs);
}

.hidden { display: none !important; }

.graph-container { flex: 1; position: relative; overflow: hidden; background: var(--bg-base); }
.graph-svg { display: block; touch-action: none; cursor: grab; }
.graph-svg:active { cursor: grabbing; }
.graph-edge { stroke: var(--border-strong); stroke-width: 1; }
.graph-node circle { fill: var(--color-primary); stroke: var(--bg-base); stroke-width: 2; cursor: pointer; transition: fill var(--duration-fast); }
.graph-node:hover circle { fill: var(--color-primary-hover); }
.graph-node.ghost circle { fill: var(--surface-3); }
.graph-node text { fill: var(--text-secondary); font-size: 11px; text-anchor: middle; pointer-events: none; user-select: none; }

.command-palette-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.command-palette {
  width: 100%; max-width: 480px; background: var(--bg-overlay);
  border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl); overflow: hidden;
}
.command-palette-input {
  width: 100%; padding: var(--sp-4); background: transparent; border: none;
  border-bottom: 1px solid var(--border-subtle); color: var(--text-primary);
  font-size: var(--text-base); outline: none;
}
.command-palette-list { max-height: 320px; overflow-y: auto; padding: var(--sp-2); }
.command-palette-item { padding: var(--sp-2-5) var(--sp-3); border-radius: var(--radius-lg); font-size: var(--text-sm); cursor: pointer; }
.command-palette-item:hover, .command-palette-item.active { background: var(--surface-hover); }

.properties-panel {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-subtle);
}
.properties-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.properties-field label { font-size: var(--text-2xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-tertiary); }
.properties-field .input, .properties-field select.input { padding: var(--sp-1-5) var(--sp-2-5); font-size: var(--text-sm); }
.properties-readonly { font-size: var(--text-sm); color: var(--text-secondary); padding-top: var(--sp-1); }
@media (max-width: 640px) { .properties-panel { grid-template-columns: 1fr; } }

.ask-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
}
.ask-modal { width: 100%; max-width: 640px; max-height: 80vh; display: flex; flex-direction: column;
  background: var(--bg-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); }
.ask-header { padding: var(--sp-5) var(--sp-5) 0; }
.ask-body { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.ask-answer { font-size: var(--text-sm); line-height: var(--leading-relaxed); white-space: pre-wrap; }
.ask-sources { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ask-source-pill { font-size: var(--text-xs); padding: var(--sp-1) var(--sp-2-5); background: var(--color-primary-subtle); color: var(--color-primary); border-radius: var(--radius-full); cursor: pointer; }
.ask-footer { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border-subtle); }
.ask-footer input { flex: 1; }

.autocomplete-popup {
  position: absolute; bottom: var(--sp-4); left: var(--sp-5); right: var(--sp-5);
  background: var(--bg-overlay); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown); max-height: 200px; overflow-y: auto;
}
.autocomplete-item { padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); cursor: pointer; }
.autocomplete-item:hover { background: var(--surface-hover); }

.backlinks-panel { width: 280px; flex-shrink: 0; padding: var(--sp-5); overflow-y: auto; }
.backlinks-panel .text-label { margin-bottom: var(--sp-3); display: block; }
.backlink-item {
  padding: var(--sp-2-5) var(--sp-3); border-radius: var(--radius-lg);
  background: var(--surface-1); margin-bottom: var(--sp-2); cursor: pointer;
  font-size: var(--text-sm); transition: background var(--duration-fast);
}
.backlink-item:hover { background: var(--surface-hover); }
.empty-state { color: var(--text-tertiary); font-size: var(--text-sm); padding: var(--sp-4) 0; }

.source-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-2xs); font-weight: var(--font-semibold);
  padding: 2px var(--sp-2); border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
}
.source-badge.whatsapp { background: var(--color-success-subtle); color: var(--color-success-text); }
.source-badge.integration { background: var(--color-info-subtle); color: var(--color-info-text); }
.source-badge.daily { background: var(--color-primary-subtle); color: var(--color-primary); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-weight: var(--font-semibold);
  border-radius: var(--radius-lg); border: 1px solid transparent; cursor: pointer;
  padding: var(--sp-2-5) var(--sp-4); font-size: var(--text-sm); min-height: 40px;
  transition: all var(--duration-fast) var(--ease-out);
}
.btn-primary { background: linear-gradient(135deg, var(--color-primary), var(--violet-700)); color: white; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--color-primary-subtle); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.btn-icon { padding: 0; width: 40px; }

.toast-container { position: fixed; bottom: var(--sp-6); right: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); z-index: var(--z-toast); }
.toast {
  padding: var(--sp-3) var(--sp-4); background: var(--bg-overlay); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); font-size: var(--text-sm); min-width: 260px;
}
.toast.error { border-color: var(--color-danger-border); color: var(--color-danger-text); }
.toast.success { border-color: var(--color-success-border); color: var(--color-success-text); }

@media (max-width: 767px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); width: 280px !important; z-index: var(--z-modal); transition: transform var(--duration-normal); }
  .sidebar.open { transform: translateX(0); }
  .editor-shell { flex-direction: column; }
  .backlinks-panel { width: 100%; border-top: 1px solid var(--border-subtle); }
  .editor-body { flex-direction: column; }
  .editor-preview { border-left: none; border-top: 1px solid var(--border-subtle); }
}