/* ============================================
   rAi Builder — Clean Light
   Version 8.0
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ── Base surfaces ── */
  --bg-base:        #f0f2f5;
  --bg-elevated:    #f7f8fa;
  --bg-surface:     #ffffff;
  --bg-inset:       #e8eaed;
  --bg-hover:       #f3f4f6;
  --bg-active:      #eef0f3;

  /* ── Borders ── */
  --border-hairline: rgba(0, 0, 0, 0.04);
  --border-subtle:   rgba(0, 0, 0, 0.07);
  --border-default:  rgba(0, 0, 0, 0.11);
  --border-strong:   rgba(0, 0, 0, 0.18);

  /* ── Text ── */
  --text-primary:   #111827;
  --text-secondary: #374151;
  --text-muted:     #6b7280;
  --text-faint:     #9ca3af;

  /* ── Accent — single blue ── */
  --accent:         #2563eb;
  --accent-hover:   #1d4ed8;
  --accent-light:   #3b82f6;
  --accent-subtle:  rgba(37, 99, 235, 0.08);
  --accent-wash:    rgba(37, 99, 235, 0.04);

  /* ── Legacy aliases (referenced in panels.css / other files) ── */
  --gold:           #d97706;
  --gold-subtle:    rgba(217, 119, 6, 0.10);
  --gold-wash:      rgba(217, 119, 6, 0.05);
  --gold-light:     rgba(217, 119, 6, 0.25);
  --accent-hover-color: var(--accent-hover);

  /* ── Semantic ── */
  --success:        #16a34a;
  --success-subtle: rgba(22, 163, 74, 0.08);
  --warning:        #d97706;
  --warning-subtle: rgba(217, 119, 6, 0.08);
  --error:          #dc2626;
  --error-subtle:   rgba(220, 38, 38, 0.08);

  /* ── Typography ── */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', Consolas, monospace;

  /* ── Layout ── */
  --panel-width:      544px;
  --panel-min:        360px;
  --panel-max:        544px;
  --toolbar-height:   44px;
  --statusbar-height: 22px;
  --header-height:    49px;   /* = Samtals topbar-höjd: content 28 + padding 10×2 + kant 1px (border-box) — exakt */
  --resize-handle:    4px;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* ── Shadows ── */
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-panel: 1px 0 0 rgba(0,0,0,0.06);

  /* ── Transitions ── */
  --transition-fast: 0.10s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;
}

/* ============================================
   RESET & BASE
   ============================================ */

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

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--accent-subtle);
  color: var(--accent);
}

.view { height: 100%; }
[hidden] { display: none !important; }

/* ============================================
   LOGIN / REGISTER
   ============================================ */

#login-view, #register-view {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
  min-height: 100%;
}

.login-container {
  width: 100%;
  max-width: 360px;
  padding: 40px 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.login-header {
  margin-bottom: 28px;
  text-align: left;
}

.login-header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.login-header .subtitle {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
}

.form-group input,
.form-group textarea {
  padding: 9px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-faint);
}

.form-group input:hover,
.form-group textarea:hover {
  border-color: var(--border-strong);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.form-group textarea {
  resize: vertical;
  min-height: 60px;
}

.session-expired-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  background: var(--warning-subtle);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.session-expired-notice svg {
  flex-shrink: 0;
  color: var(--warning);
}

.login-success {
  font-size: 12px;
  text-align: center;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.08);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #16a34a;
}

.login-error {
  color: var(--error);
  font-size: 12px;
  text-align: center;
  padding: 8px 12px;
  background: var(--error-subtle);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(220, 38, 38, 0.15);
}

.login-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  font-size: 13px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
}

.login-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.login-footer a:hover { color: var(--accent-hover); }

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-icon {
  padding: 6px;
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}

.btn-icon:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-full { width: 100%; padding: 9px; }
.btn-sm { padding: 5px 10px; font-size: 11px; }
.btn-xs { padding: 3px 8px; font-size: 11px; }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-ghost:disabled { opacity: 0.35; }

.btn-loading { display: none; }
.btn[disabled] .btn-text { display: none; }
.btn[disabled] .btn-loading { display: inline; }

/* ============================================
   APP LAYOUT
   ============================================ */

#app-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* App-topbar — fullbredd ovanför drawer OCH innehåll (Samtals anatomi).
   Samma recept som f.d. panel-header, men spänner hela appen. */
.app-topbar {
  display: flex;
  align-items: center;
  gap: 16px;               /* harmoniserad med Samtal (.platform-chat-topbar) */
  padding: 10px 18px;      /* IDENTISK box-modell med Samtal: padding-baserad höjd (ingen fast height) → renderas exakt lika */
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-default);  /* Samtals kant (ej subtle) */
  background: var(--bg-surface);
}

/* Projektkluster i topbaren (flyttat från preview-baren). Vy-flikarna centreras över preview-arean
   och FÖLJER panelbredden via --preview-left (satt av en ResizeObserver på #left-panel: 0 vid kollaps,
   faktisk bredd öppen/resizad) — så mitten hamnar över previewen oavsett panelläge. Åtgärderna
   (projektnamn · ångra/gör om · status · Publicera) ligger in-flow till höger. */
.app-topbar { position: relative; }
.topbar-tabs {
  position: absolute; left: var(--preview-left, var(--panel-width)); right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; pointer-events: none;
}
/* Tre zoner: namn-zon (flex:1, projektnamnet HÖGERSTÄLLT med 48px till App) · flikarna (naturlig
   bredd, centrerade eftersom de två flex:1-zonerna balanserar → mitten = previewens mitt) · höger-zon
   (flex:1). Bara flikarna tar pointer-events; spacer-zonerna släpper igenom klick till åtgärder/konto. */
.tb-name-zone { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; }
.tb-name-zone .current-project { min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.tb-name-zone .project-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.tb-name-zone .project-label { flex-shrink: 0; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.topbar-tabs .preview-tabs { flex: 0 0 auto; margin: 0 calc(48px - 9px); }
.tb-right-zone { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; }
.topbar-tabs .preview-tab, .tb-right-zone .btn { pointer-events: auto; }
.topbar-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
#open-preview-tab-btn { margin-right: 12px; }  /* 12px space till Publicera */
/* Smal bredd: fliksatsen (namn + flikar) slutar vara absolut-centrerad och flyter in, så den inte
   krockar med åtgärderna/kontot. */
@media (max-width: 1180px) {
  .topbar-tabs { position: static; left: auto; right: auto; }
  .tb-name-zone { flex: 0 0 auto; }
  .tb-right-zone { flex: 0 0 auto; }
}

/* Floating-toggeln överflödig — panel-togglen bor nu alltid synlig i topbaren */
.sidebar-toggle.floating { display: none !important; }

.app-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ============================================
   LEFT PANEL
   ============================================ */

.left-panel {
  width: var(--panel-width);
  min-width: var(--panel-min);
  max-width: var(--panel-max);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  overflow: hidden;
  position: relative;
  transition: width 0.2s ease, min-width 0.2s ease;
  flex-shrink: 0;
}

.left-panel.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  border-right: none;
  overflow: hidden;
}

.resize-handle {
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background var(--transition-fast);
}

.resize-handle:hover,
.resize-handle.dragging {
  background: var(--accent-subtle);
}

/* ============================================
   PANEL HEADER — compressed, single 44px row
   ============================================ */

/* panel-header lyft till .app-topbar (fullbredd) */

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  color: var(--text-muted);       /* harmoniserad med Samtals .pc-sidebar-collapse (var --text-faint) */
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sidebar-toggle svg { width: 15px; height: 15px; transition: transform .2s ease; }
/* Kollapsad panel → spegla « till » (samma ikon, flippad pilriktning). */
.sidebar-toggle.collapsed svg { transform: scaleX(-1); }

/* Floating toggle when panel is collapsed */
.sidebar-toggle.floating {
  position: fixed;
  left: 10px;
  top: 8px;
  z-index: 100;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  width: 30px;
  height: 30px;
  color: var(--text-muted);
}

.sidebar-toggle.floating:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Logo */
.logo-container {
  display: flex;
  align-items: center;
  gap: 16px;               /* harmoniserad med Samtal — avstånd logga/läges-växlare/ny-knapp */
  flex: 1;
  min-width: 0;
}

.logo {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

/* Plan badge */
.plan-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-inset);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  transition: all var(--transition-base);
  white-space: nowrap;
}

.plan-badge[data-plan="starter"],
.plan-badge[data-plan="pro"] {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: rgba(37, 99, 235, 0.18);
}

.plan-badge[data-plan="enterprise"] {
  background: var(--bg-inset);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

/* New project button */
/* btn-new-project ersatt av .btn-new */



/* Samtal-knapp — top-bar entry till plattform-samtal */
/* btn-samtal ersatt av .mode-switch */

/* btn-samtal ersatt av .mode-switch */

/* btn-samtal ersatt av .mode-switch */

/* På smala vyer döljer vi label, behåller bara ikon */
@media (max-width: 640px) {
  
}

/* User menu */
.user-menu { position: relative; flex-shrink: 0; }

.user-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: var(--accent-subtle);
  border: 1px solid var(--border-default);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.user-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  padding: 4px 0;
  animation: menuFadeIn 0.12s ease-out;
}

.user-info { padding: 10px 14px 8px; }

.user-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.user-email {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.user-dropdown hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 4px 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px;
  background: none;
  border: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.dropdown-icon { flex-shrink: 0; opacity: 0.6; }

@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   PANEL TABS — hidden, using stacked layout
   ============================================ */

.panel-tabs { display: none !important; }

/* ============================================
   STACKED PANEL SECTIONS
   ============================================ */

.panel-section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.left-panel:has(.projects-section.maximized) .chat-section .chat-input-area,
.left-panel:has(.projects-section.maximized) .chat-section #chat-input-wrapper {
  display: none;
}

/* Section header */
.section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 32px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-hairline);
  user-select: none;
  background: var(--bg-elevated);
  cursor: default;
}

.section-header:hover { background: var(--bg-hover); }

.section-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.4;
}

.section-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  flex: 1;
}

.section-toggle,
.section-maximize {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity var(--transition-fast);
}

.section-toggle:hover,
.section-maximize:hover { opacity: 1; }

.section-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.section-content.collapsed { display: none; }

/* ============================================
   SECTION SIZING
   ============================================ */

.chat-section {
  flex: 1;
  min-height: 200px;
  min-width: 280px;            /* R23: hindrar chat-content från att klämmas till bokstäver-vertikalt vid smal panel */
}

.projects-section,
.portfolio-section {
  flex-shrink: 0;
  border-top: 1px solid var(--border-subtle);
  max-height: 280px;
  transition: max-height var(--transition-base), flex var(--transition-base);
}

.projects-section.collapsed,
.portfolio-section.collapsed,
.uploads-section.collapsed {
  max-height: 32px;
}

.projects-section.collapsed .section-content,
.portfolio-section.collapsed .section-content,
.uploads-section.collapsed .section-content {
  display: none;
}

.projects-section.maximized {
  flex: 1;
  max-height: none;
  min-height: 0;
}

.left-panel:has(.projects-section.maximized) .chat-section {
  flex: 0 0 auto;
}

/* ============================================
   CHAT SECTION
   ============================================ */

.chat-project-context {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 30px;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-elevated);
  flex-shrink: 0;
}

.chat-project-context.no-project { color: var(--text-faint); }

.context-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-default);
  flex-shrink: 0;
}

.chat-project-context:not(.no-project) .context-indicator {
  background: var(--success);
  box-shadow: 0 0 0 2px var(--success-subtle);
}

.context-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cost bar */
.project-cost-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 24px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-hairline);
  flex-shrink: 0;
}

#project-cost-label { color: var(--text-faint); }

.project-cost-total {
  font-weight: 500;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.project-cost-detail {
  color: var(--text-faint);
  font-size: 10px;
}

/* Chat messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 12px 12px;
  min-height: 0;
  scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 2px;
}

/* Welcome state */
.chat-welcome { padding: 20px 12px; }

.chat-welcome p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.chat-welcome .hint {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 0;
}

/* Messages */
.message {
  display: flex;
  flex-direction: column;
  padding: 2px 0;
  animation: messageFade 0.15s ease-out;
}

@keyframes messageFade {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.message-role {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-faint);
  margin: 0 12px 2px;
}

.message-bubble {
  margin: 0 12px 2px;
  padding: 9px 13px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.55;
}

.message.user .message-bubble {
  background: var(--accent-subtle);
  border: 1px solid rgba(37, 99, 235, 0.12);
  margin-left: 28px;
}

/* User message — right-aligned bubble with name */
.message.user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 16px;
}

.message.user .message-content {
  background: #ede9fb;
  color: #3b2f8a;
  border-radius: 18px 18px 4px 18px;
  padding: 10px 14px;
  max-width: 80%;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 0 1px 3px rgba(108, 95, 199, 0.12);
}

.message.user .message-content a { color: #5b45b0; }
.message.user .message-content.user-plain-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.message.user .message-content code {
  background: rgba(108, 95, 199, 0.12);
  color: #3b2f8a;
  border-radius: 3px;
  padding: 1px 5px;
}

.message-sender-row {
  margin-bottom: 3px;
  margin-right: 4px;
}

/* ── History marker (chat som history-list) ─────────────────────────────── */
/* Liten klickbar ikon vid AI-meddelandets timestamp som hoppar till versionen
   som denna AI-tur skapade. Visas dimmad som default, full opacity vid hover. */
.history-marker {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  cursor: pointer;
  opacity: 0.45;
  margin-left: 6px;
  font-size: 10px;
  user-select: none;
  transition: opacity 0.15s, transform 0.15s;
}
.history-marker:hover {
  opacity: 1;
  transform: scale(1.1);
}
.history-marker:active {
  transform: scale(0.95);
}
.history-marker-pin {
  font-size: 9px;
  filter: grayscale(0.3);
}
.history-marker-action {
  color: var(--accent, #6366f1);
  font-weight: bold;
  font-size: 11px;
  line-height: 1;
}

/* "Future" state: AI-bubblor som hör till SENARE snapshots än den aktiva.
   Dim:as ner för att signalera att de finns i redo-stack men inte är aktiva. */
.message.assistant.history-future {
  opacity: 0.45;
  transition: opacity 0.3s ease;
}
.message.assistant.history-future .message-content {
  filter: grayscale(0.3);
}
.message.assistant.history-future .history-marker {
  opacity: 0.3;
}

/* "Active" state: AI-bubblan som motsvarar nuvarande snapshot. Subtil markering. */
.message.assistant.history-active .history-marker-action {
  color: var(--success, #10b981);
}

.message-sender-name.user-sender {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

/* Assistant message — left-aligned, slightly elevated */
.message.assistant,
.message.ai {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}

/* Avatar placeholder in history view */
.message.assistant .message-avatar {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Content takes remaining width */
.message.assistant .message-content,
.message.ai .message-content {
  flex: 1;
  min-width: 0;
}

.message.assistant .message-bubble,
.message.ai .message-bubble {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
}

.message.tool .message-bubble {
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 6px 12px;
}

/* Markdown content */
.message-content p { margin-bottom: 8px; line-height: 1.6; }
.message-content p:last-child { margin-bottom: 0; }
.message-content strong { font-weight: 600; }

.message-content pre {
  margin: 10px 0;
  padding: 11px 13px;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
}

.message-content code {
  padding: 1px 5px;
  background: var(--bg-inset);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px solid var(--border-hairline);
}

.message-content pre code {
  padding: 0; background: none; border: none; color: inherit;
}

.message-content ul,
.message-content ol {
  padding-left: 18px;
  margin-bottom: 8px;
}

.message-content li { margin-bottom: 4px; line-height: 1.5; }

.message-content h1,
.message-content h2,
.message-content h3 {
  margin: 12px 0 5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.message-content h1 { font-size: 16px; }
.message-content h2 { font-size: 14px; }
.message-content h3 { font-size: 13px; }

.message-content blockquote {
  margin: 8px 0;
  padding: 7px 12px;
  border-left: 2px solid var(--border-default);
  color: var(--text-muted);
  background: var(--bg-elevated);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.message-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 8px 0;
}

.message-content th,
.message-content td {
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  text-align: left;
}

.message-content th {
  background: var(--bg-elevated);
  font-weight: 600;
}

.message-content a { color: var(--accent); text-decoration: none; }
.message-content a:hover { text-decoration: underline; }

/* Stream status */
.stream-status {
  color: var(--text-faint);
  font-size: 11px;
  margin: 4px 12px 8px;
}

.stream-phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 11px;
}

/* Thinking dots */
.thinking-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.thinking-dots span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: thinkingBounce 1.2s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinkingBounce {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40%           { transform: scale(1.1); opacity: 1; }
}

/* ============================================
   CHAT INPUT
   ============================================ */

.chat-input-container {
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.chat-input-container.prominent {
  padding: 12px 12px 14px;
  border-top: 1px solid var(--border-default);
}

/* Tydligt markerad prompt-yta: distinkt bakgrund + klar kant + subtil accent-ring,
   så användaren ser direkt VAR man skriver (ingen letande). */
.chat-input-container.prominent #chat-input {
  min-height: 68px;
  background: var(--bg-base);
  border: 1.5px solid var(--border-strong);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05),
              0 0 0 1.5px color-mix(in srgb, var(--accent) 20%, transparent);
}

.chat-input-container.prominent #chat-input::placeholder {
  color: var(--text-muted);
}

.chat-input-container.prominent #chat-input:hover {
  border-color: var(--accent);
}

#chat-input {
  width: 100%;
  padding: 8px 11px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  resize: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  line-height: 1.5;
  min-height: 64px;
  max-height: 200px;
}

#chat-input::placeholder { color: var(--text-faint); }
#chat-input:hover { border-color: var(--border-strong); }

#chat-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  background: var(--bg-surface);
}

.chat-input-container.prominent #chat-input {
  min-height: 68px;
}

.chat-input-container.prominent #chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.chat-input-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 7px;
  gap: 6px;
}

.btn-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-faint);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.btn-upload:hover {
  color: var(--text-muted);
  background: var(--bg-hover);
}

.btn-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: #fff;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.btn-send:hover:not(:disabled) { background: var(--accent-hover); }

.btn-send:disabled {
  background: var(--bg-inset);
  color: var(--text-faint);
  cursor: not-allowed;
}

.btn-send .icon-send { display: block; }
.btn-send .icon-stop { display: none; }
.btn-send.loading .icon-send { display: none; }
.btn-send.loading .icon-stop { display: block; }

/* Upload progress */
.upload-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-hairline);
}

.upload-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--bg-inset);
  border-radius: 2px;
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.2s ease;
}

.upload-progress-text {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Mention dropdown */
#mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 100;
  max-height: 180px;
  overflow-y: auto;
}

/* ============================================
   PROJECTS SECTION
   ============================================ */

.projects-section .section-header {
  padding: 0 12px;
}

.projects-section .projects-list {
  flex: 1;
  overflow-y: auto;
}

.section-search-wrapper {
  flex: 1;
  min-width: 0;
}

.section-search {
  font-size: 12px;
  color: var(--text-primary);
  outline: none;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  transition: background var(--transition-fast);
}

.section-search:focus { background: var(--bg-surface); border-color: var(--accent); }

.section-search:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
  pointer-events: none;
}

/* Filters bar */
.projects-filters {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-elevated);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.filter-tab:hover { background: var(--bg-hover); color: var(--text-primary); }

.filter-tab.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.filter-spacer { flex: 1; }

.view-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.view-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }

.bulk-delete-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-faint);
  transition: all var(--transition-fast);
}

.bulk-delete-btn:hover {
  background: var(--error-subtle);
  color: var(--error);
}

/* Projects list */
.projects-list {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-surface);
}

.projects-list::-webkit-scrollbar { width: 4px; }
.projects-list::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 2px;
}

.loading-state,
.empty-state {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
}

/* Project card */
.project-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
  border-bottom: 1px solid var(--border-hairline);
}

.project-card:last-child { border-bottom: none; }
.project-card:hover { background: var(--bg-hover); }

.project-card.active {
  background: var(--accent-subtle);
}

.project-card.active:hover {
  background: rgba(37, 99, 235, 0.10);
}

.project-card.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.project-card.active .project-title {
  color: var(--accent);
  font-weight: 600;
}

.project-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
}

.project-card.active .project-icon {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.18);
}

.project-info {
  flex: 1;
  min-width: 0;
}

.project-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.project-meta {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.deploy-indicator {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-default);
  flex-shrink: 0;
}

.deploy-indicator.live { background: var(--success); }
.deploy-indicator.pending { background: var(--warning); }

.project-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-faint);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.project-card:hover .project-menu-btn { display: flex; }

.project-menu-btn:hover {
  background: var(--bg-inset);
  color: var(--text-primary);
}

/* Context menu */
.project-context-menu {
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  padding: 4px 0;
  min-width: 160px;
  animation: menuFadeIn 0.12s ease-out;
}

.project-context-menu .menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  background: none;
  border: none;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.project-context-menu .menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.project-context-menu .menu-item .menu-icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  opacity: 0.65;
}

.project-context-menu .menu-item-danger { color: var(--error); }

.project-context-menu .menu-item-danger:hover {
  background: var(--error-subtle);
  color: var(--error);
}

.project-context-menu .menu-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
  border: none;
}

/* ── Flyout-submenu för menyalternativ med children ────────────────────── */
/* Mönster: wrappa <button.has-submenu> + <div.submenu> i en wrapper.
   Submenun positioneras absolute till höger om wrappern. Hover på wrappern
   visar submenun; klick togglar .open-klass för touch-enheter. */
.project-context-menu .menu-submenu-wrapper {
  position: relative;
}

.project-context-menu .menu-item.has-submenu {
  justify-content: space-between;
  padding-right: 8px;
}

.project-context-menu .menu-item .menu-arrow {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}

.project-context-menu .submenu {
  position: absolute;
  left: 100%;
  top: -4px;            /* matcha förälder-padding */
  margin-left: 2px;     /* litet gap för visuell separation */
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
  min-width: 200px;
  z-index: 1001;
  display: none;
}

.project-context-menu .menu-submenu-wrapper:hover > .submenu,
.project-context-menu .menu-submenu-wrapper.open > .submenu {
  display: block;
}

/* Submenuns menu-items får samma styling som föräldra-menyn */
.project-context-menu .submenu .menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.project-context-menu .submenu .menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.project-context-menu .submenu .menu-item .menu-icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  opacity: 0.65;
}

.project-context-menu .submenu .menu-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
  border: none;
}

.projects-group-header {
  padding: 7px 12px 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-elevated);
}

/* ============================================
   PORTFOLIO SECTION
   ============================================ */

.portfolio-section .section-content { overflow-y: auto; }

.portfolio-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-hairline);
}

.portfolio-breadcrumb {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
}

.portfolio-stats {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-subtle);
}

.portfolio-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  border-right: 1px solid var(--border-hairline);
}

.portfolio-stat:last-child { border-right: none; }

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-label {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.portfolio-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

/* ============================================
   RIGHT PANEL — PREVIEW
   ============================================ */

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  overflow: hidden;
  min-width: 0;
}

/* Breadcrumb (hidden, kept for JS compat) */
#linked-breadcrumb,
#bc-app-icon,
#bc-app-link,
#bc-icon,
#bc-current-name,
#bc-type-badge,
#bc-stale-msg {
  display: none !important;
}

/* ── Preview Toolbar ── */

.preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--toolbar-height);
  padding: 0 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  gap: 8px;
  transition: padding-left 0.2s ease;
}

.preview-toolbar.panel-collapsed { padding-left: 50px; }

.current-project {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}

/* project-label hidden in clean layout */
.project-label { display: none; }

.project-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* Toolbar status — inline in toolbar row */
.toolbar-status {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-faint);
}

.status-item .status-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--success);
}

/* Preview tabs — centred */
.toolbar-center {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

/* Preview-tab-reglerna (.preview-tabs/.preview-tab/.tab-badge/.preview-tab-divider) är
   konsoliderade längre ned (den kanoniska uppsättningen). Den tidigare dubbletten här var
   död kod — den senare vann alltid i kaskaden och gav två motstridiga sanningar om flikens
   utseende. Borttagen. .toolbar-center behålls ovan (bär flex/centreringen). */


/* History controls */
.history-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.history-position {
  font-size: 10px;
  color: var(--text-faint);
  padding: 0 3px;
  font-family: var(--font-mono);
}

/* Right-side toolbar controls */
.preview-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Publish button */
.btn-publish {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-publish:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.btn-publish:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Preview container ── */

.preview-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#preview-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #fff;
}

.preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-faint);
  background: var(--bg-elevated);
}

.preview-empty svg { opacity: 0.18; }

.preview-empty h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}

.preview-empty p {
  font-size: 12px;
  color: var(--text-faint);
  max-width: 220px;
  text-align: center;
  line-height: 1.6;
}

/* ── Status bar — minimal 22px ── */

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--statusbar-height);
  padding: 0 12px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-hairline);
  flex-shrink: 0;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-faint);
  font-size: 11px;
}

.status-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

.status-indicator.loading .status-dot {
  background: var(--warning);
  animation: pulse 1s ease infinite;
}

.status-indicator.error .status-dot { background: var(--error); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

.status-text { font-size: 11px; color: var(--text-faint); }
.status-info { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }

.spinner {
  width: 11px; height: 11px;
  border: 1.5px solid var(--border-default);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

/* Team presence */
.team-presence {
  display: flex;
  align-items: center;
  gap: 3px;
}

.presence-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg-inset);
  border: 2px solid var(--bg-surface);
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  margin-left: -4px;
}

.presence-avatar:first-child { margin-left: 0; }

/* ============================================
   MODAL
   ============================================ */

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 400px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  animation: modalFadeIn 0.16s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-header h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.btn-close {
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  cursor: pointer;
  font-size: 16px;
  transition: all var(--transition-fast);
}

.btn-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

/* Share modal */
.share-modal-content { max-width: 480px; }

.share-project-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.share-invite-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

.share-invite-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.share-invite-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.share-input,
.share-select {
  flex: 1;
  padding: 7px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.share-input:focus,
.share-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.share-select { flex: 0 0 90px; }
.share-invite-btn { width: 100%; }

.share-invite-status {
  font-size: 11px;
  margin-top: 6px;
  color: var(--text-muted);
}

/* ============================================
   SETTINGS PANEL
   ============================================ */

.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

.settings-panel { display: none; }
.settings-panel.active { display: block; }

.settings-container {
  position: relative;
  width: 480px;
  max-width: 100%;
  height: 100%;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--toolbar-height);
  padding: 0 20px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.settings-header h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-tabs {
  display: flex;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 0;
  flex-shrink: 0;
  background: var(--bg-elevated);
}

.settings-tab {
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: all var(--transition-base);
  margin-bottom: -1px;
}

.settings-tab:hover { color: var(--text-primary); }

.settings-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
}

.settings-section { margin-bottom: 28px; }
.settings-section:last-child { margin-bottom: 0; }

.settings-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-faint);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

/* Info grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.info-label {
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.info-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Input with badge */
.input-with-badge {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-badge input {
  flex: 1;
  padding: 8px 12px;
  padding-right: 90px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
}

.input-with-badge input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.badge {
  position: absolute;
  right: 10px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-radius: 3px;
}

.badge-success { background: var(--success-subtle); color: var(--success); }
.badge-pro { background: var(--accent-subtle); color: var(--accent); }

/* ============================================
   DEPLOY MODAL
   ============================================ */

.deploy-modal .modal-content { max-width: 440px; }

.deploy-project-info {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.deploy-project-info .project-name {
  font-size: 14px;
  font-weight: 600;
  max-width: none;
}

.deploy-project-info .project-id {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.deploy-section { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 7px;
}

.deploy-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.deploy-option { cursor: pointer; }
.deploy-option input[type="radio"] { display: none; }

.option-card {
  padding: 10px 13px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.deploy-option input[type="radio"]:checked + .option-card {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.deploy-option:hover .option-card { border-color: var(--border-strong); }

.option-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.option-icon { font-size: 14px; }

.option-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.option-url {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-inset);
  padding: 3px 7px;
  border-radius: 3px;
  font-family: var(--font-mono);
}

.option-desc {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-faint);
}

.input-group { display: flex; gap: 8px; }

.form-input {
  flex: 1;
  padding: 7px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* Deploy progress */
.deploy-progress { text-align: center; padding: 20px 10px; }

.deploy-progress h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.deploy-progress p {
  color: var(--text-muted);
  margin: 0 0 14px;
  font-size: 12px;
}

.progress-bar {
  width: 100%;
  height: 3px;
  background: var(--bg-inset);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
  width: 0;
}

/* Deploy result */
.deploy-result { text-align: center; padding: 20px 10px; }

.result-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 20px;
  font-weight: bold;
}

.result-icon.success { background: var(--success-subtle); color: var(--success); }
.result-icon.error   { background: var(--error-subtle);   color: var(--error); }

.deploy-result h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.deploy-result p {
  color: var(--text-muted);
  margin: 0 0 12px;
  font-size: 12px;
}

.deploy-url {
  display: inline-block;
  padding: 7px 12px;
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
  margin-bottom: 14px;
  word-break: break-all;
  border: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}

.deploy-url:hover { background: var(--bg-hover); }

/* ============================================
   MISC / COMPAT
   ============================================ */

.btn.btn-icon.btn-xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 3px 5px;
  border-radius: var(--radius-sm);
}

.btn.btn-icon.btn-xs:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Wysiwyg stub */
#wysiwyg-btn { display: none !important; }

/* ============================================
   PANELS.CSS TOKEN COMPAT
   (panels.css uses var(--bg-base, #f5f3ee) etc. — override defaults)
   ============================================ */

/* panels.css references these; our :root already defines them */

/* ============================================
   SCROLLBARS
   ============================================ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .app-layout { flex-direction: column; }

  .left-panel {
    width: 100% !important;
    min-width: 100%;
    max-width: 100%;
    height: 45%;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .right-panel { height: 55%; }

  .preview-toolbar { padding: 0 10px; }
}

/* ============================================
   SETTINGS MODAL — size & layout overrides
   ============================================ */

.settings-modal-content {
  width: 92%;
  max-width: 720px;
  height: 92vh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--radius-lg);
}

.settings-modal-content .modal-header {
  padding: 18px 24px 14px;
  margin: 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-modal-content .settings-tabs {
  padding: 0 24px;
  background: var(--bg-elevated);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.settings-modal-content .settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* ── Select inputs ── */
.settings-modal-content select {
  width: 100%;
  padding: 8px 32px 8px 11px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.settings-modal-content select:hover { border-color: var(--border-strong); }
.settings-modal-content select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* ── Range inputs ── */
.settings-modal-content input[type="range"] {
  width: 100%;
  height: 4px;
  background: var(--bg-inset);
  border-radius: 2px;
  appearance: none;
  cursor: pointer;
  margin-top: 6px;
}

.settings-modal-content input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 15px; height: 15px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.settings-modal-content input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.settings-modal-content input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* ── Label with inline value ── */
.label-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.form-group label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* ── Checkbox group ── */
.checkbox-group {
  margin-bottom: 12px;
}

.checkbox-group:last-child { margin-bottom: 0; }

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 15px; height: 15px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.checkbox-label span {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.4;
}

.checkbox-label small {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 400;
  line-height: 1.4;
}

/* ── Usage bar ── */
.usage-bar-container { margin-bottom: 8px; }

.usage-bar {
  height: 6px;
  background: var(--bg-inset);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.usage-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.usage-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}

.usage-details {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* ── Beta badge ── */
.badge-beta {
  display: inline-block;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 3px;
  background: #6366f1;
  color: #fff;
  margin-left: 5px;
  vertical-align: middle;
}

/* ── Form message ── */
.form-message {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 12px;
}

.form-message.success {
  background: var(--success-subtle);
  color: var(--success);
  border: 1px solid rgba(22, 163, 74, 0.2);
}

.form-message.error {
  background: var(--error-subtle);
  color: var(--error);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

/* ── System tab buttons ── */
.system-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.system-buttons .btn {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  text-align: left;
}

.system-buttons .btn-icon { font-size: 18px; flex-shrink: 0; }

.system-buttons .btn-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.system-buttons .btn-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}

.system-buttons .btn-desc {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Status grid (system tab) ── */
.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.status-grid-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.status-grid-label {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.status-grid-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

/* ── Settings description text ── */
.settings-description {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 12px;
}

/* ── Team members list ── */
.team-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-hairline);
}

.team-member-row:last-child { border-bottom: none; }

.team-member-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.team-member-info { flex: 1; min-width: 0; }

.team-member-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.team-member-email {
  font-size: 11px;
  color: var(--text-faint);
}

.team-member-role {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Payments / plan info ── */
.plan-info-card {
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.plan-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.plan-detail {
  font-size: 12px;
  color: var(--text-muted);
}

/* ============================================
   STREAMING + HISTORY RENDERING
   ============================================ */

/* Wrapper for all streaming sections in one AI response */
.stream-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

/* Collapsible section (tools, text, thinking) */
.collapsible {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  overflow: hidden;
  transition: background 0.15s;
}

.collapsible.tools {
  background: var(--bg-inset);
  border-color: var(--border-hairline);
}

.collapsible.thinking {
  background: var(--bg-inset);
  border-left: 2px solid var(--accent);
}

.collapsible.prompt-info {
  background: var(--bg-inset);
  border-left: 2px solid var(--border-default);
}

.collapsible-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  color: var(--text-muted);
  min-height: 30px;
}

.collapsible-header:hover {
  background: var(--bg-hover);
}

.collapsible-arrow {
  font-size: 8px;
  color: var(--text-faint);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.collapsible.expanded .collapsible-arrow {
  transform: rotate(90deg);
}

.collapsible-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.collapsible-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
}

.collapsible-badge {
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

.stream-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stream-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: streamPulse 1s ease-in-out infinite;
}

@keyframes streamPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1.1); }
}

/* Content area — always visible (history is always expanded) */
.collapsible-content {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border-hairline);
}

/* During live streaming, non-expanded tool sections are hidden */
.collapsible.tools:not(.expanded) .collapsible-content {
  display: none;
}

.live-content {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Tool call blocks inside collapsible */
.tool-call {
  display: block;
  padding: 4px 0;
  font-size: 11px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 4px;
}

.tool-call:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.tool-call strong {
  color: var(--text-primary);
  font-weight: 600;
  margin-right: 6px;
}

.tool-call code {
  display: block;
  margin-top: 2px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  border: none;
  padding: 0;
}
.stream-text .md-h1,
.stream-text .md-h2,
.stream-text .md-h3,
.stream-text-live .md-h1,
.stream-text-live .md-h2,
.stream-text-live .md-h3 { display: block; }

.stream-text .md-ul,
.stream-text .md-ol,
.stream-text-live .md-ul,
.stream-text-live .md-ol { display: block; margin: 4px 0; }

/* Fix for streaming horizontal-stacking bug: paragraphs inside streaming
   containers must explicitly assert block display. Without this, fast
   innerHTML rewrites during text_delta events can leave <p> elements
   in a flow state where they render side-by-side until stream completes
   and final layout pass corrects them. Assert block + margin reset on
   the streaming wrappers. */
.stream-text .md-p,
.stream-text-live .md-p,
.ex-text .md-p {
  display: block;
  margin: 0 0 8px;
}
.stream-text .md-p:last-child,
.stream-text-live .md-p:last-child,
.ex-text .md-p:last-child {
  margin-bottom: 0;
}

/* Suppress stray <br> immediately after block-level elements */
.stream-text .md-ul + br,
.stream-text .md-ol + br,
.stream-text .md-h1 + br,
.stream-text .md-h2 + br,
.stream-text .md-h3 + br,
.stream-text .md-table-wrap + br,
.stream-text-live .md-ul + br,
.stream-text-live .md-ol + br { display: none; }

/* Text sections */
.stream-text,
.stream-text-live {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.65;
  word-break: break-word;
}

/* formatContent() emits <span>line</span><br> — collapse the join-newlines */
.stream-text span,
.stream-text-live span {
  display: inline;
}

/* Markdown classes generated by formatContent() */
.md-h1 { font-size: 16px; font-weight: 700; margin: 14px 0 6px; color: var(--text-primary); line-height: 1.3; }
.md-h2 { font-size: 14px; font-weight: 600; margin: 12px 0 5px; color: var(--text-primary); line-height: 1.3; }
.md-h3 { font-size: 13px; font-weight: 600; margin: 10px 0 4px; color: var(--text-primary); line-height: 1.3; }
.md-ul, .md-ol { padding-left: 20px; margin: 6px 0; }
.md-ul li, .md-ol li { margin-bottom: 4px; font-size: 13px; line-height: 1.55; }
.md-hr { border: none; border-top: 1px solid var(--border-subtle); margin: 12px 0; }
.md-table-wrap { 
  overflow-x: auto; 
  margin: 8px 0;
  contain: layout style;       /* R22: isolera layout-effekter från resten av sidan */
}
/* R22 — definitiv fix för tabell-layout-frys under streaming.
   
   Tidigare problem: R21 hade table-layout:auto + min-width:60px. Vid tabeller
   med många kolumner (jämförelsetabeller, feature-matrix etc) tvingas browser
   räkna om hela tabell-layouten vid VARJE text_delta. Med 60+ deltas/sek och 
   8+ kolumner blir det layout-thrash som tar 100% CPU och fryser UI:n hårt
   nog att devtools inte öppnas.
   
   R22 byter till table-layout:fixed. Browser räknar kolumn-bredder en gång
   från första raden och behåller dem. Ingen re-layout vid text-tillväxt.
   Plus contain:layout för att isolera tabellens layout-arbete från resten. */
.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;          /* R22: en-gång-bredd, ingen reflow vid streaming */
  contain: layout style;        /* R22: isolera layout-pass */
}
.md-table th,
.md-table td {
  padding: 6px 10px;
  vertical-align: top;
  min-width: 80px;              /* R22: höjt från 60px för läsbarhet */
  word-break: normal;            /* bryt INTE mid-ord */
  overflow-wrap: break-word;     /* men bryt långa ord-utan-mellanslag om nödvändigt */
}
.md-table th { background: var(--bg-elevated); font-weight: 600; border: 1px solid var(--border-subtle); text-align: left; }
.md-table td { border: 1px solid var(--border-hairline); }

/* AI cost badge */
.ai-cost-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 3px 8px;
  background: var(--bg-inset);
  border: 1px solid var(--border-hairline);
  border-radius: 20px;
  font-size: 10px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

/* Suggestion chips */
.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.suggestion-chip {
  padding: 4px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.suggestion-chip:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  color: var(--text-primary);
}

.suggestion-chip.used {
  opacity: 0.5;
  pointer-events: none;
}

/* History-injected rendered HTML — matches live stream layout */
.message.assistant.rendered-history .message-content {
  flex: 1;
  min-width: 0;
}

/* Pause message */
.ai-pause-message {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
  font-style: italic;
}

/* Step indicators */
.stream-step {
  font-size: 11px;
  color: var(--text-faint);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}


/* ============================================================================
   EXCHANGE RENDERER — .ex-* classes
   Used by Exchange.render() for both streaming and history.
   ============================================================================ */

/* Tool rows */
.ex-tools {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.ex-tool {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 0;
  color: var(--text-muted);
}

.ex-tool-icon {
  width: 14px;
  flex-shrink: 0;
  font-size: 10px;
  text-align: center;
}

.ex-tool-ok   .ex-tool-icon { color: var(--success, #22c55e); }
.ex-tool-err  .ex-tool-icon { color: var(--error,   #ef4444); }
.ex-tool-active .ex-tool-icon { color: var(--accent); }

.ex-tool-name {
  font-weight: 500;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
}

.ex-tool-detail {
  color: var(--text-faint);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

/* Spinner for active tool */
.spinning {
  display: inline-block;
  animation: exSpin 0.8s linear infinite;
}

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

/* Text block */
.ex-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.65;
  word-break: break-word;
  /* R23: bunden minimum-bredd hindrar layout-bryt vid smal split-screen-panel.
     Tidigare kunde markdown-element (tabeller, kodblock med min-width) klämma 
     .ex-text till sin egen min-content-width → text staplas bokstav-vertikalt 
     → layout-thrash vid varje text_delta → 100% CPU + hård frys. */
  min-width: 240px;
  max-width: 100%;
  overflow-x: auto;            /* horisontell scroll vid breda element istället för layout-bryt */
}

/* Suppress extra newlines from formatContent join */
.ex-text span { display: inline; }
.ex-text .md-ul + br,
.ex-text .md-ol + br,
.ex-text .md-h1 + br,
.ex-text .md-h2 + br,
.ex-text .md-h3 + br { display: none; }

/* Thinking indicator while waiting */
.ex-thinking {
  padding: 4px 0;
}

/* Cost badge */
.ex-cost {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 2px 8px;
  background: var(--bg-inset);
  border: 1px solid var(--border-hairline);
  border-radius: 20px;
  font-size: 10px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

.ex-watchdog-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg-warning, #fef3cd);
  border: 1px solid var(--border-warning, #ffc107);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-warning, #856404);
}
.ex-watchdog-warning button {
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline);
  background: var(--bg-elevated);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.ex-watchdog-warning button:last-child {
  color: var(--error, #ef4444);
}


/* Exchange typing indicator during streaming */
.ex-text-streaming {
  min-height: 20px;
  display: flex;
  align-items: center;
}

.ex-typing {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  padding: 4px 0;
}

.ex-typing span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-faint, #999);
  animation: exTypingBounce 1.2s ease-in-out infinite;
}
.ex-typing span:nth-child(2) { animation-delay: 0.2s; }
.ex-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes exTypingBounce {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.4; }
  40%           { transform: scale(1.1); opacity: 1; }
}

/* Exchange live status line */
.ex-status {
  font-size: 12px;
  color: var(--text-muted);
  padding: 2px 0 6px;
  min-height: 20px;
  transition: opacity 0.2s;
}
.ex-status:empty { display: none; }

/* Thinking phases — collapsible */
.ex-thinking-block {
  margin-bottom: 4px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  overflow: hidden;
}

.ex-thinking-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-muted);
  user-select: none;
}
.ex-thinking-header:hover { background: var(--bg-hover); }

.ex-thinking-icon { font-size: 12px; }
.ex-thinking-label { flex: 1; font-weight: 500; }
.ex-thinking-time  { color: var(--text-faint); font-size: 10px; }
.ex-thinking-arrow {
  font-size: 8px;
  color: var(--text-faint);
  transition: transform 0.2s;
}

.ex-thinking-block.open .ex-thinking-arrow { transform: rotate(90deg); }
.ex-thinking-content { display: none; padding: 6px 10px; font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.ex-thinking-block.open .ex-thinking-content { display: block; }
.ex-thinking-block.no-content .ex-thinking-header { cursor: default; }
.ex-thinking-block.no-content .ex-thinking-header:hover { background: transparent; }

/* Markdown extended */
.md-h4 { font-size: 12px; font-weight: 600; margin: 8px 0 3px; color: var(--text-primary); }
.md-p  { margin: 0 0 8px; line-height: 1.65; font-size: 13px; color: var(--text-primary); }
.md-p:last-child { margin-bottom: 0; }

.md-blockquote {
  border-left: 3px solid var(--accent);
  margin: 8px 0;
  padding: 6px 12px;
  background: var(--bg-inset);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

/* Task list checkboxes */
.md-ul input[type="checkbox"],
.md-ol input[type="checkbox"] {
  margin-right: 6px;
  cursor: default;
  accent-color: var(--accent);
}

/* Nested lists */
.md-ul .md-ul, .md-ul .md-ol,
.md-ol .md-ol, .md-ol .md-ul {
  margin: 4px 0 4px 16px;
}

/* Ex-text paragraphs */
.ex-text .md-p { font-size: 13px; }
.ex-text .md-blockquote { font-size: 13px; }

/* Exchange iteration block */
.ex-iter {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-hairline);
}
.ex-iter:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.ex-iter .ex-tools { margin-bottom: 4px; }
.ex-iter .ex-text  { margin-top: 4px; }

/* Intent label per iteration */
.ex-intent {
  font-size: 11px;
  color: var(--accent);
  padding: 2px 0 4px;
  font-weight: 500;
}

/* Token info per iteration */
/* Spinning thinking icon */
.ex-thinking-spin {
  display: inline-block;
  animation: exSpin 1s linear infinite;
}

/* User bubble — lighter */
.message-sender-name.user-sender {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}

/* System status message */
.ex-status-msg {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 8px;
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  margin: 4px 0;
  border-left: 2px solid var(--border-default);
}

/* Error message in iteration */
.ex-error {
  font-size: 11px;
  color: #c0392b;
  background: #fdf0ee;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  margin: 4px 0;
  border-left: 2px solid #e74c3c;
}

/* Suggestion chips */
.ex-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ex-suggestion-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  line-height: 1.4;
}

.ex-suggestion-chip:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

/* Fix suggestion chip layout — ensure proper flex wrapping */
.ex-suggestions {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  align-items: flex-start;
}

.ex-suggestion-chip {
  display: inline-block !important;
  width: auto;
  max-width: 100%;
}

/* Separator between iteration text blocks */
.ex-iter + .ex-iter { border-top: 1px solid var(--border-hairline, #eee); padding-top: 8px; }

/* Scroll-to-bottom button */
.chat-scroll-btn {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  z-index: 10;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.15s;
  animation: scrollBtnIn 0.2s ease;
}
.chat-scroll-btn:hover {
  filter: brightness(1.1);
  transform: translateX(-50%) translateY(-1px);
}
@keyframes scrollBtnIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Scroll-to-bottom button — override previous */
#chat-scroll-btn.chat-scroll-btn {
  position: absolute;
  bottom: 140px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
  opacity: 0.68;
  z-index: 50;
  animation: scrollBtnIn 0.2s ease;
  white-space: nowrap;
}
#chat-scroll-btn.chat-scroll-btn:hover {
  background: var(--accent);
  opacity: 1;
  transform: translateX(-50%) translateY(-1px);
}

/* Text selection — amber, high contrast */
::selection { background: #fef08a; color: #713f12; }
::-moz-selection { background: #fef08a; color: #713f12; }

/* ═══════════════════════════════════════════════════════════════════════
   Insights Panel — rAi Builder-stil (ljus, design-tokens från :root)
   ═══════════════════════════════════════════════════════════════════════ */

.insights-panel {
  position: absolute;
  inset: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
}

.insights-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  gap: 12px;
}

.ip-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.ip-filters {
  display: flex;
  gap: 8px;
  flex: 1;
}

.ip-filter-type,
.ip-search {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast);
}

.ip-filter-type:hover,
.ip-search:hover {
  border-color: var(--border-strong);
}

.ip-filter-type:focus,
.ip-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.ip-search {
  flex: 1;
  max-width: 300px;
}

.ip-meta {
  color: var(--text-muted);
  font-size: 12px;
}

.ip-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.ip-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.ip-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.ip-empty p {
  margin: 4px 0;
}

.ip-empty-hint {
  font-size: 12px;
  color: var(--text-faint);
  max-width: 340px;
  margin: 4px auto;
}

.ip-no-match {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 13px;
}

.ip-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.ip-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
  box-shadow: var(--shadow-md);
}

.ip-card.active {
  border-color: var(--accent);
  background: var(--accent-wash);
  box-shadow: 0 0 0 1px var(--accent);
}

.ip-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.ip-card-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.3;
  flex: 1;
  letter-spacing: -0.1px;
}

.ip-card-content {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ip-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}

.ip-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.ip-card-date {
  color: var(--text-faint);
}

/* ─── Type-badges (semantiska färger, subtila i ljus-tema) ───────────── */
.ip-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ip-type-faktum   { background: rgba(37, 99, 235, 0.10);  color: #1d4ed8; }
.ip-type-beslut   { background: rgba(217, 119, 6, 0.10);  color: #b45309; }
.ip-type-fraga    { background: rgba(147, 51, 234, 0.10); color: #7e22ce; }
.ip-type-hypotes  { background: rgba(22, 163, 74, 0.10);  color: #15803d; }
.ip-type-slutsats { background: rgba(219, 39, 119, 0.10); color: #be185d; }

.ip-tag {
  background: var(--bg-inset);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
}

/* ─── Detail view ──────────────────────────────────────────────────────── */
.ip-detail {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--bg-base);
  padding: 20px;
  overflow-y: auto;
  z-index: 5;
}

.ip-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ip-back {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.ip-back:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.ip-detail-actions {
  display: flex;
  gap: 8px;
}

.ip-detail-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  letter-spacing: -0.3px;
}

.ip-detail-meta {
  display: flex;
  gap: 14px;
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.ip-source-link {
  background: transparent;
  color: var(--accent);
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
  font-family: inherit;
}

.ip-source-link:hover { color: var(--accent-hover); }

.ip-detail-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ip-detail-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-sm);
}

.ip-detail-section {
  margin-bottom: 18px;
}

.ip-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ip-section-header h4 {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.ip-section-empty {
  font-size: 12px;
  color: var(--text-faint);
  padding: 6px 0;
}

.ip-section-sub {
  font-size: 11px;
  color: var(--text-faint);
  margin: 8px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ip-refs, .ip-rels, .ip-rels-incoming {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ip-ref, .ip-rel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ip-ref a, .ip-rel-link {
  color: var(--accent);
  text-decoration: none;
  flex: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  padding: 0;
}

.ip-ref a:hover, .ip-rel-link:hover {
  text-decoration: underline;
  color: var(--accent-hover);
}

.ip-ref-note {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 2px;
}

.ip-rel-type {
  background: var(--bg-inset);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.ip-rel-remove {
  background: transparent;
  color: var(--text-faint);
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.ip-rel-remove:hover {
  color: var(--error);
  background: var(--error-subtle);
}

.ip-rel-incoming {
  background: var(--bg-elevated);
}

/* ─── Buttons ──────────────────────────────────────────────────────────── */
.ip-btn {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.ip-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.ip-btn-secondary {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

.ip-btn-secondary:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.ip-btn-danger {
  background: var(--error);
  border-color: var(--error);
  color: white;
}

.ip-btn-danger:hover {
  filter: brightness(0.92);
}

.ip-btn-small { padding: 5px 10px; font-size: 12px; }
.ip-btn-tiny  { padding: 3px 8px;  font-size: 11px; }

.ip-loading, .ip-error {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
}

.ip-error { color: var(--error); }

/* ─── Modal ────────────────────────────────────────────────────────────── */
.ip-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: modalFadeIn 0.16s ease-out;
}

.ip-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: modalFadeIn 0.16s ease-out;
}

.ip-modal-small { max-width: 440px; }

.ip-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.ip-modal-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.ip-modal-close {
  background: transparent;
  color: var(--text-faint);
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.ip-modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.ip-modal-body {
  padding: 18px;
  overflow-y: auto;
}

.ip-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-subtle);
}

/* ─── Form fields ──────────────────────────────────────────────────────── */
.ip-field {
  display: block;
  margin-bottom: 12px;
}

.ip-field-row {
  display: flex;
  gap: 10px;
}

.ip-field-half {
  flex: 1;
  margin-bottom: 0;
}

.ip-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-weight: 500;
}

.ip-input, .ip-textarea, .ip-select {
  width: 100%;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ip-textarea { resize: vertical; min-height: 80px; }

.ip-input:hover, .ip-textarea:hover, .ip-select:hover {
  border-color: var(--border-strong);
}

.ip-input:focus, .ip-textarea:focus, .ip-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* ─── Floating Lift-button (visas vid text-selection) ──────────────────── */
.il-floating-btn {
  position: absolute;
  background: var(--accent);
  color: white;
  border: none;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.30);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
}

.il-floating-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.40);
  transform: translateY(-1px);
}

/* ─── Source highlight när användaren går från insikt till källa ──────── */
.ip-source-highlight {
  background: var(--accent-subtle) !important;
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  transition: outline 0.3s ease, background 0.3s ease;
}

/* ─── Message badge (visar antal insikter per AI-bubbla) ───────────────── */
.ip-msg-badge {
  display: inline-block;
  background: var(--accent-subtle);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  margin-left: 8px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.ip-msg-badge:hover {
  background: rgba(37, 99, 235, 0.15);
}

/* ─── Creator badges (Position C — visuell skillnad mellan AI och människa) ── */
.ip-creator-badge {
  display: inline-block;
  margin-right: 6px;
  font-size: 14px;
  line-height: 1;
  vertical-align: middle;
}

.ip-creator-ai { opacity: 0.85; }
.ip-creator-both { opacity: 0.9; }

/* Subtilt annorlunda kant på AI-skapade cards så det syns i listan */
.ip-card:has(.ip-creator-ai) {
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}

.ip-card:has(.ip-creator-both) {
  border-left: 3px solid var(--gold);
  padding-left: 11px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KONSOLIDERAT: f.d. ui-fixes.css (inbakad — laddades direkt efter app.css,
   så käll-ordningen och därmed kaskaden är oförändrad). Nya regler hör
   hemma i sina sektioner ovan, inte här.
   ═══════════════════════════════════════════════════════════════════════════ */
/*
 * ui-fixes.css - rAi Builder UI polish
 * Replaces all inline styles + adds consistency fixes
 */

/* ─── Critical: ensure [hidden] always wins ──────────────── */
[hidden] { display: none !important; }

/* ─── Dropdown icons ─────────────────────────────────────── */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ─── Panel tabs: SVG icon alignment ─────────────────────── */
.tab,
.panel-tabs .tab {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ─── Preview tabs: SVG icon alignment ───────────────────── */
/* ─── Section header icons ───────────────────────────────── */
.section-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
}

.section-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.section-toggle:hover { opacity: 1; }

/* ─── New project button (header) ────────────────────────── */
.btn-new-project {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  opacity: 1;
}
.btn-new-project:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  opacity: 1;
}

/* ─── Import handover button ─────────────────────────────── */
.btn.btn-icon.btn-xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle, var(--border));
  color: var(--text-muted);
  padding: 3px 5px;
  border-radius: 4px;
}
.btn.btn-icon.btn-xs:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* ─── View toggle (list/grid) ─────────────────────────────── */
.view-toggle {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 3px 5px;
  background: var(--bg-surface, #faf9f5);
  border: 1px solid var(--border-subtle, rgba(100,85,70,0.1));
  border-radius: var(--radius-sm, 3px);
  cursor: pointer;
  color: var(--text-muted, #78736a);
  transition: all 0.15s;
  flex-shrink: 0;
}
.view-toggle:hover {
  background: var(--bg-hover, #edeae3);
  color: var(--text-primary, #2a2520);
}
.view-icon-list,
.view-icon-grid {
  display: inline-flex;
  align-items: center;
}

/* ─── Projects filter row ────────────────────────────────── */
.projects-filters {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  border-bottom: 1px solid var(--border-hairline, rgba(100,85,70,0.06));
}

.filter-spacer { flex: 1; }

/* ─── Filter tabs ─────────────────────────────────────────── */
.filter-tab {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted, #78736a);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 3px);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}
.filter-tab:hover {
  color: var(--text-primary, #2a2520);
  background: var(--bg-hover, #edeae3);
}
.filter-tab.active {
  color: var(--accent, #6b2d3c);
  background: var(--accent-subtle, rgba(107,45,60,0.07));
  border-color: var(--border-accent, rgba(107,45,60,0.2));
  font-weight: 600;
}

/* ─── Bulk delete button ─────────────────────────────────── */
.bulk-delete-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 3px);
  cursor: pointer;
  color: var(--text-muted, #78736a);
  transition: all 0.15s;
  flex-shrink: 0;
}
.bulk-delete-btn:hover {
  color: #c0392b;
  background: rgba(192,57,43,0.08);
  border-color: rgba(192,57,43,0.2);
}

/* ─── Publicera / publish button ─────────────────────────── */
.btn.btn-publish {
  background: linear-gradient(135deg, var(--success, #4a7c59), #3a5632);
  border-color: var(--success, #4a7c59);
  color: white;
  margin-right: 6px;
}
.btn.btn-publish:hover:not(:disabled) {
  background: linear-gradient(135deg, #5a8c69, #4a6642);
  border-color: #5a8c69;
}
.btn.btn-publish:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Presence bar ───────────────────────────────────────── */
.presence-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
}

/* ─── Team Chat Section ───────────────────────────────────── */
.team-chat-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.team-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-chat-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 20px 0;
}

.team-chat-input-row {
  border-top: 1px solid var(--border);
  padding: 8px;
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.team-chat-textarea {
  flex: 1;
  resize: none;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--input-bg, var(--surface));
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  max-height: 120px;
  overflow-y: auto;
}

.team-chat-send {
  padding: 7px 10px;
  flex-shrink: 0;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─── Share modal ─────────────────────────────────────────── */
.share-modal-content {
  max-width: 420px;
}

.share-modal-body {
  padding: 16px;
}

.share-project-name {
  margin: 0 0 14px;
  font-weight: 600;
  color: var(--text);
}

.share-members-list {
  margin-bottom: 16px;
}

.share-invite-section {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.share-invite-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

.share-invite-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.share-input {
  flex: 1;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--input-bg, var(--surface));
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.share-input:focus {
  outline: none;
  border-color: var(--primary);
}

.share-select {
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--input-bg, var(--surface));
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.share-select:focus {
  outline: none;
  border-color: var(--primary);
}

.share-invite-btn {
  width: 100%;
}

.share-invite-status {
  font-size: 12px;
  margin: 8px 0 0;
  text-align: center;
  min-height: 16px;
  color: var(--text-muted);
}

/* ─── Removed: "Projekt:" prefix / project-label ─────────── */
.project-label {
  display: none;
}

/* ─── Status bar: no bug button ──────────────────────────── */
.status-bug-btn {
  display: none;
}

/* ─── New project modal: removed form tag, fix button ─────── */
#create-project-btn {
  /* matches submit button behavior via JS */
}

/* ─── Modal title icon ──────────────────────────────────── */
.modal-title-icon {
  vertical-align: -2px;
  margin-right: 6px;
}

/* ─── Preview tabs (toolbar) ─────────────────────────────── */
.toolbar-center {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  background: linear-gradient(180deg, var(--bg-elevated, #f5f0e8) 0%, var(--bg-surface, #ede8df) 100%);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.1));
  border-radius: var(--radius-sm, 3px);
  padding: 2px;
  box-shadow: var(--shadow-inset, inset 0 1px 2px rgba(0,0,0,0.06));
}

.preview-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 9px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted, #888);
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.preview-tab:hover {
  color: var(--text-primary, #2a2a2a);
  background: rgba(255,255,255,0.5);
}

.preview-tab.active {
  background: linear-gradient(165deg,
    var(--accent-light, #8a4254) 0%,
    var(--accent, #6b2d3c) 40%,
    #5d2835 100%
  );
  color: #fffdf8;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.15)),
              inset 0 1px 0 rgba(255,255,255,0.12);
}

.preview-tab .tab-badge {
  margin-inline-start: 2px;
  min-width: 15px;
  box-sizing: border-box;
  text-align: center;
  background: rgba(255,255,255,0.25);
  border-radius: 9px;
  padding: 1px 5px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.preview-tab:not(.active) .tab-badge {
  background: var(--accent-subtle, rgba(107,45,60,0.1));
  color: var(--accent, #6b2d3c);
}

/* Divider between content tabs and edit tab */
.preview-tab-divider {
  width: 1px;
  height: 16px;
  background: var(--border-subtle);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Edit (WYSIWYG) tab — distinct green active state */
#wysiwyg-tab {
  gap: 5px;
}

#wysiwyg-tab:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#wysiwyg-tab.active {
  background: linear-gradient(165deg, #2d7a4f 0%, #1f5c3a 60%, #194d30 100%) !important;
  color: #e6f7ee !important;
  box-shadow: 0 1px 4px rgba(31,92,58,0.35),
              inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

#wysiwyg-tab.active::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6ee7a0;
  box-shadow: 0 0 6px rgba(110,231,160,0.8);
  margin-left: 2px;
  animation: editPulse 2s ease-in-out infinite;
}

@keyframes editPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; box-shadow: 0 0 10px rgba(110,231,160,0.9); }
}

/* ─── Publish button — rAi-style ─────────────────────────── */
.btn.btn-publish {
  background: linear-gradient(165deg,
    var(--accent-light, #8a4254) 0%,
    var(--accent, #6b2d3c) 40%,
    #5d2835 100%
  );
  border: none;
  color: #fffdf8;
  letter-spacing: 1.2px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.15)),
              inset 0 1px 0 rgba(255,255,255,0.12);
  margin-right: 0;
}

.btn.btn-publish:hover:not(:disabled) {
  background: linear-gradient(165deg,
    var(--accent-hover, #7d3547) 0%,
    var(--accent, #6b2d3c) 40%,
    #5d2835 100%
  );
  box-shadow: var(--shadow-md, 0 4px 8px rgba(0,0,0,0.2)),
              inset 0 1px 0 rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

.btn.btn-publish:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}


/* ─── Project card layout ───────────────────────────────── */
.project-main {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  overflow: visible;
}

/* Actions always flush right on both card and linked-item */
/* Type/status icons — always visible in card, not hidden on hover */
.project-type-icons {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.project-status-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

/* Meta time — show normally, hide when actions appear */
.project-card .meta-time {
  font-size: 10px;
  color: var(--text-muted, #78736a);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.project-card:hover .meta-time {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.project-card > .project-actions-row {
  margin-left: auto;
  flex-shrink: 0;
}

/* ─── Project card action buttons ───────────────────────── */
.project-actions-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 8px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.project-card:hover .project-actions-row,
.project-card.active .project-actions-row,
.linked-item:hover .project-actions-row,
.linked-item.active .project-actions-row {
  opacity: 1;
}

/* project-menu-btn is display:none by default in app.css — show on linked-item hover too */
.linked-item:hover .project-menu-btn,
.linked-item.active .project-menu-btn {
  display: flex;
}

/* On hover: hide time, show buttons only */
.linked-item .linked-actions .linked-time { display: inline; opacity: 1; }
.linked-item:hover .linked-actions .linked-time,
.linked-item.active .linked-actions .linked-time { display: none; }

/* Button reset + sizing for linked rows — identical behavior to project-card buttons */
.linked-item .action-btn,
.linked-item .favorite-btn-inline,
.linked-item .share-btn-inline,
.linked-item .project-menu-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-muted, #78736a);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
  box-shadow: none;
  outline: none;
  line-height: 1;
}

.linked-item .action-btn:hover,
.linked-item .favorite-btn-inline:hover,
.linked-item .share-btn-inline:hover,
.linked-item .project-menu-btn:hover {
  background: var(--bg-hover, #edeae3);
  color: var(--text-primary, #2a2520);
}

.linked-item .favorite-btn-inline.is-favorite {
  color: var(--accent, #6b2d3c);
}

/* Right-align actions in linked rows */
.linked-item .linked-actions {
  margin-left: auto;
  flex-shrink: 0;
}

.project-card .action-btn,
.project-card .favorite-btn-inline,
.project-card .share-btn-inline {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm, 3px);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--text-muted, #78736a);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  box-shadow: none;
  outline: none;
}

.project-card .action-btn:hover,
.project-card .favorite-btn-inline:hover,
.project-card .share-btn-inline:hover {
  background: var(--bg-hover, #edeae3);
  color: var(--text-primary, #2a2520);
}

.project-card .favorite-btn-inline.is-favorite {
  color: var(--accent, #6b2d3c);
}

/* Expand linked group button */
.project-card .expand-group-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 9px;
  color: var(--text-muted, #78736a);
  transition: color 0.15s;
  flex-shrink: 0;
  box-shadow: none;
}
.project-card .expand-group-btn:hover { color: var(--text-primary, #2a2520); }

/* ─── Send / Stop button toggle ─────────────────────────── */
.btn-send .icon-stop { display: none; }
.btn-send .icon-send { display: block; }

.btn-send.is-stop .icon-send { display: none; }
.btn-send.is-stop .icon-stop { display: block; }

.btn-send.is-stop {
  background: var(--accent, #6b2d3c) !important;
  opacity: 1 !important;
  animation: stopPulse 1.8s ease-in-out infinite;
}

@keyframes stopPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107,45,60,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(107,45,60,0); }
}

/* ─── AI busy state: lock project list ───────────────────── */
.app-layout.ai-busy .projects-section {
  pointer-events: none;
}

.app-layout.ai-busy .projects-list {
  opacity: 0.4;
  transition: opacity 0.3s;
}

.app-layout.ai-busy .projects-filters {
  opacity: 0.4;
  transition: opacity 0.3s;
}

/* ─── AI working banner in chat input area ───────────────── */
.app-layout.ai-busy .chat-input-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent, #6b2d3c) 30%,
    var(--accent-light, #8a4254) 50%,
    var(--accent, #6b2d3c) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: aiSweep 1.5s linear infinite;
  border-radius: 2px 2px 0 0;
}

@keyframes aiSweep {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.chat-input-container { position: relative; }

/* ─── Status bar: loading animation ─────────────────────── */
.status-indicator.loading .status-dot {
  background: var(--accent, #6b2d3c);
  animation: statusPulse 1s ease-in-out infinite;
}

.status-indicator.loading .status-text {
  color: var(--accent, #6b2d3c);
  font-weight: 500;
}

/* ─── Status icons (replacing text pills) ─────────────── */
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.status-live-icon   { color: var(--success, #4a7c59); }
.status-draft-icon  { color: var(--text-muted, #78736a); }
.status-unsynced    { color: var(--warning, #c07a2b); }

/* ─── Compact meta-time ────────────────────────────────── */
.meta-time {
  font-size: 10px;
  color: var(--text-muted, #78736a);
  letter-spacing: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Remove any old pill styles that might conflict */
.status-pill { display: none; }

/* ═══════════════════════════════════════════════════════════
   PROJEKTGRUPPER — recursive linked project tree
   ═══════════════════════════════════════════════════════════ */

/* ── Group header card ───────────────────────────────── */
.group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  cursor: pointer;
  background: var(--bg-surface, #faf9f5);
  border-top: 1px solid var(--border-subtle, rgba(100,85,70,0.1));
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.12s;
  user-select: none;
}
.group-header:hover {
  background: var(--bg-elevated, #edeae3);
}

.group-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent-subtle, rgba(107,45,60,0.1)), var(--bg-elevated, #edeae3));
  color: var(--accent, #6b2d3c);
  flex-shrink: 0;
}

.group-header-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #2a2520);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-header-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.group-status-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.group-member-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted, #78736a);
  letter-spacing: 0.3px;
}

.group-expand-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  flex-shrink: 0;
  transition: color 0.12s;
}
.group-expand-btn svg {
  transition: transform 0.2s;
}
.group-expand-btn.open svg {
  transform: rotate(180deg);
}
.group-expand-btn:hover { color: var(--text-primary); }

/* Group body (collapsible) */
.group-body {
  display: none;
}
.group-body.open {
  display: flex;
  flex-direction: column;
}

/* Root group wrapper */
.project-group {
  display: flex;
  flex-direction: column;
}

/* Children container — collapsed by default, open class shows it */
.linked-children {
  display: none;
  flex-direction: column;
}
.linked-children.open {
  display: flex;
}

/* Vertical connector line */
.linked-connector {
  display: flex;
  flex-direction: column;
  padding-left: 18px;
  margin-left: 28px;
  border-left: 1.5px solid var(--border-subtle, rgba(100,85,70,0.15));
  padding-bottom: 3px;
  gap: 0;
}

/* Deeper nesting indent */
.linked-connector-deep {
  margin-left: 18px;
  padding-left: 14px;
}

/* Individual linked project row */
.linked-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 0;
  border-radius: var(--radius-sm, 3px);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary, #6b6560);
  position: relative;
  transition: background 0.1s;
  margin-right: 4px;
}

/* Horizontal branch line */
.linked-item::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--border-subtle, rgba(100,85,70,0.15));
}

.linked-item:hover {
  background: var(--bg-hover, #edeae3);
  color: var(--text-primary, #2a2520);
}

.linked-item.active {
  background: var(--accent-subtle, rgba(107,45,60,0.07));
  color: var(--accent, #6b2d3c);
}

.linked-item.stale { opacity: 0.6; }

/* Grandchild row — slightly muted */
.linked-item.gc-item {
  font-size: 11px;
  color: var(--text-muted);
}

/* Status dot inside linked row */
.linked-item .project-dot {
  flex-shrink: 0;
}

.linked-icon {
  font-size: 11px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.75;
}

.linked-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  overflow: hidden;
}

.linked-name {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linked-item .linked-type-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.8;
}

.linked-time {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.linked-stale-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--warning, #c07a2b);
  background: rgba(192,122,43,0.12);
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
}

/* Type-specific badge colours */
.linked-admin   .linked-type-badge { color: var(--accent, #6b2d3c); }
.linked-landing .linked-type-badge { color: #2d6a8a; }
.linked-api     .linked-type-badge { color: #2d6a45; }
.linked-pwa     .linked-type-badge { color: #6b4a2d; }
.linked-report  .linked-type-badge { color: #555; }

/* Child expand button */
.expand-group-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 8px;
  color: var(--text-muted);
  transition: transform 0.18s, color 0.12s;
  flex-shrink: 0;
  padding: 0;
}
.expand-group-btn:hover  { color: var(--text-primary); }
.expand-group-btn.open   { transform: rotate(90deg); }

/* Collapsed group summary line */
.group-collapsed-summary {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 12px 4px 46px;
  font-size: 10px;
  color: var(--text-muted);
}

.group-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.group-status-dot.dot-live    { background: var(--success, #4a7c59); }
.group-status-dot.dot-pending { background: var(--warning, #c07a2b); }
.group-status-dot.dot-draft   { background: var(--border-subtle); border: 1px solid var(--text-muted); }

.group-member-count {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════
   STATUSIKONER på projektkort
   ═══════════════════════════════════════════════════════════ */
.project-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.project-meta-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.85;
}
.status-icon:hover { opacity: 1; }

.status-live-icon   { color: var(--success, #4a7c59); }
.status-draft-icon  { color: var(--text-muted, #78736a); }
.status-unsynced    { color: var(--warning, #c07a2b); }
.status-shared-icon { color: #2d6a8a; }
.status-linked-icon { color: var(--accent, #6b2d3c); opacity: 0.6; }
.status-single-icon { color: var(--text-muted, #78736a); }
.status-type-icon   { font-size: 11px; line-height: 1; }

/* ═══════════════════════════════════════════════════════════
   PROJEKTLISTA MAXIMERA-KNAPP
   ═══════════════════════════════════════════════════════════ */

.section-maximize {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 5px;
  border-radius: var(--radius-sm, 3px);
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.12s, background 0.12s;
  flex-shrink: 0;
}
.section-maximize:hover {
  color: var(--accent, #6b2d3c);
  background: var(--bg-hover, #edeae3);
}

/* Default: show expand icon, hide minimize icon */
.section-maximize .icon-minimize { display: none; }
.section-maximize .icon-maximize { display: block; }

/* When maximized: swap icons */
.section-maximize.is-maximized .icon-minimize { display: block; }
.section-maximize.is-maximized .icon-maximize { display: none; }

/* Subtle accent ring when active */
.section-maximize.is-maximized {
  color: var(--accent, #6b2d3c);
  background: var(--accent-subtle, rgba(107,45,60,0.07));
}

/* Group header menu button */
.group-menu-btn {
  opacity: 0;
  transition: opacity 0.15s;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-left: 2px;
}
.group-header:hover .group-menu-btn {
  opacity: 1;
}
.group-menu-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tillgänglighet — fokusringar via tokens
   :focus-visible träffar bara tangentbordsfokus; musklick får ingen ring.
   ═══════════════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Sökfältet som riktigt <input> (ersätter contenteditable-diven) */
input.section-search {
  border: 1px solid var(--border-default);
  width: 100%;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
input.section-search::placeholder { color: var(--text-faint); }
input.section-search::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Inställningar-modalen: modellsök + katalog-refresh */
.settings-model-tools { display: flex; gap: 8px; margin-bottom: 6px; }
.settings-model-tools input[type="search"] {
  flex: 1; padding: 7px 10px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px);
  font-family: inherit; font-size: 13px; outline: none;
  background: var(--bg-surface); color: var(--text-primary);
  -webkit-appearance: none; appearance: none;
}
.settings-model-tools input[type="search"]:focus { border-color: var(--accent); }
.settings-model-refresh-btn {
  padding: 7px 12px; white-space: nowrap;
  border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated); color: var(--text-secondary);
  font-size: 12.5px; cursor: pointer;
}
.settings-model-refresh-btn:hover { background: var(--bg-hover); color: var(--accent); }
.settings-model-refresh-btn:disabled { opacity: 0.6; cursor: wait; }


/* ═══════════════════════════════════════════════════════════════════════════
   Lägesväxlare — segmenterad kontroll, samma komponent i Samtal och Bygg.
   Båda lägena alltid synliga; det aktiva ifyllt. Placeras direkt efter
   rAi-märket i båda topbarerna (identitet → kontext).
   ═══════════════════════════════════════════════════════════════════════════ */
.mode-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; margin-left: 8px; flex-shrink: 0;
  background: var(--bg-inset); border: 1px solid var(--border-default);
  border-radius: 999px;
}
.mode-switch-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 10px; border: none; border-radius: 999px;
  background: transparent; color: var(--text-muted);
  font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background .12s, color .12s;
}
.mode-switch-btn:hover { color: var(--text-primary); }
.mode-switch-btn.active {
  background: var(--accent); color: #fff; cursor: default;
}
@media (max-width: 720px) {
  /* Ikon-fri växlare: behåll text-etiketterna (Samtal/Bygg/Design är korta) — krymp bara padding/font på smalt. Tidigare doldes etiketten och ikonen bar knappen; utan ikon hade knappen blivit tom. */
  .mode-switch-btn { padding: 0 8px; font-size: 11px; }
}


/* Delad "+ Ny"-knapp — samma handling, samma form, samma plats (höger,
   före användarmenyn) i både Samtal och Bygg. */
.btn-new {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; margin-left: 8px; margin-right: 6px;   /* +8px avstånd mellan lägesswitch och ny-knapp (båda lägena) */
  border: 1px solid var(--border-default); border-radius: 999px;
  background: var(--bg-surface); color: var(--text-secondary);
  cursor: pointer; flex-shrink: 0;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn-new:hover {
  background: var(--bg-hover); color: var(--accent); border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px color-mix(in oklab, var(--accent) 20%, transparent);
}
.btn-new:active { transform: translateY(0); box-shadow: none; }
.btn-new-label { display: none; }   /* ikon-only: sofistikerad + (både Nytt samtal & Nytt projekt) */


/* ═══════════════════════════════════════════════════════════════════════════
   UI REFINEMENTS  —  topbar-polish, mikrointeraktioner, dark mode
   Additivt lager. Överrider tidigare regler via källordning. Säkert att ta bort.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Lägesväxlare: glidande tumme ─────────────────────────────────────── */
.mode-switch { position: relative; gap: 0; padding: 3px; }
/* Lika breda lägen: inline-flex + flex:1 1 0 ger EJ lika bredd (shrink-to-fit har inget fritt
   utrymme att fördela). Grid med 4 lika kolumner gör knapparna verkligt lika → pillen (25%) matchar. */
.mode-switch { display: inline-grid; grid-template-columns: repeat(4, 1fr); }
.mode-switch::after {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(25% - 1.5px); border-radius: 999px;   /* 4 lägen: Chat/Bygg/Design/Projekt */
  background: var(--accent); z-index: 0; pointer-events: none;
  transition: transform .22s cubic-bezier(.34, .8, .25, 1);
}
.mode-switch:has(.mode-switch-btn:nth-child(2).active)::after { transform: translateX(100%); }
.mode-switch:has(.mode-switch-btn:nth-child(3).active)::after { transform: translateX(200%); }
.mode-switch:has(.mode-switch-btn:nth-child(4).active)::after { transform: translateX(300%); }
.mode-switch-btn { position: relative; z-index: 1; flex: 1 1 0; justify-content: center; }
.mode-switch-btn { text-align: center; gap: 0; }
.mode-switch-label { flex: 1 1 auto; text-align: center; }
.mode-switch-btn.active { background: transparent; color: #fff; cursor: default; }

/* ── Design-läge: design-panelen ersätter vänsterpanelens innehåll ───────── */
.app-layout.mode-design #left-panel > *:not(#design-left-mount):not(.resize-handle) { display: none; }
.app-layout.mode-design #design-left-mount {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.app-layout.mode-design #design-left-mount .design-drawer-inner { padding: 11px 13px 13px; }
/* Drawer-triggern i preview-verktygsfältet är överflödig i Design-läge (panelen ligger i vänsterpanelen). */
.app-layout.mode-design #design-toggle { display: none; }

/* ── 2. Focus-visible-ringar (a11y + polish) ─────────────────────────────── */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── 3. Taktil press ─────────────────────────────────────────────────────── */
.btn-new, .user-btn, .mode-switch-btn, .btn, .dropdown-item {
  transition-property: background, color, border-color, box-shadow, transform;
  transition-duration: .12s;
  transition-timing-function: ease;
}
.btn-new:active, .user-btn:active, .mode-switch-btn:active, .btn:active { transform: scale(.96); }

/* ── 4. Zon-avdelare i topbaren ──────────────────────────────────────────── */
.topbar-sep {
  width: 1px; height: 20px; align-self: center; flex-shrink: 0;
  margin: 0 4px; background: var(--border-subtle);
}
/* Konto-chip: plan-badge + avatar som EN sammanhängande enhet. Ingen avdelare inuti; topbar-sep före
   chippet skiljer det från Publicera. Plan-badgens egen bg/kant neutraliseras (ej pill-i-pill) —
   färgen (t.ex. guld för Pro) sitter kvar på texten. */
.account-chip {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 0;
  border: none; border-radius: 0;
  background: none;          /* harmoniserad med Samtal — ingen pill, ren konto-yta */
}
.account-chip .plan-badge { background: none; border: none; padding: 0; }

/* ── 5. Plan-badge: statuspunkt + premium-tint för betalplaner ────────────── */
.plan-badge { display: inline-flex; align-items: center; gap: 5px; }
.plan-badge::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .55; flex-shrink: 0;
}
.plan-badge[data-plan="pro"]::before,
.plan-badge[data-plan="starter"]::before,
.plan-badge[data-plan="enterprise"]::before { opacity: 1; }

/* ── 7. Topbar-elevation (vilo-djup + lyft vid scroll) ───────────────────── */
.app-topbar {
  position: relative; z-index: 50;
  box-shadow: none;                 /* harmoniserad med Samtal — ingen extra 1px-hårlinje under baren (bara border-bottom) */
  transition: box-shadow .2s ease;
}
.app-topbar.scrolled { box-shadow: var(--shadow-sm); }

/* Samtal-baren delar samma vilo-djup + scroll-lyft (harmoniserad med Bygg) */
.platform-chat-topbar {
  position: relative; z-index: 50;
  box-shadow: 0 1px 0 var(--border-hairline);
  transition: box-shadow .2s ease;
}
.platform-chat-topbar.scrolled { box-shadow: var(--shadow-sm); }

/* ── 6. Dark mode — token-override, semantiskt (styr hela systemet) ───────── */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark;

  --bg-base:     #0e1013;
  --bg-elevated: #15181c;
  --bg-surface:  #1a1e23;
  --bg-inset:    #23282e;
  --bg-hover:    #23282e;
  --bg-active:   #2b3138;

  --border-hairline: rgba(255,255,255,0.05);
  --border-subtle:   rgba(255,255,255,0.09);
  --border-default:  rgba(255,255,255,0.14);
  --border-strong:   rgba(255,255,255,0.22);

  --text-primary:   #eef1f5;
  --text-secondary: #c4cad3;
  --text-muted:     #8b93a1;
  --text-faint:     #5c6470;

  --accent:        #4d8bf5;
  --accent-hover:  #6ba1f7;
  --accent-light:  #6ba1f7;
  --accent-subtle: rgba(77,139,245,0.16);
  --accent-wash:   rgba(77,139,245,0.08);

  --gold:        #e0972b;
  --gold-subtle: rgba(224,151,43,0.14);
  --gold-wash:   rgba(224,151,43,0.07);
  --gold-light:  rgba(224,151,43,0.30);

  --success: #34d17d; --success-subtle: rgba(52,209,125,0.14);
  --warning: #e0972b; --warning-subtle: rgba(224,151,43,0.14);
  --error:   #f2555a; --error-subtle:   rgba(242,85,90,0.14);

  --shadow-inset: inset 0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.50), 0 1px 3px rgba(0,0,0,0.40);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.60), 0 2px 6px rgba(0,0,0,0.45);
  --shadow-panel: 1px 0 0 rgba(255,255,255,0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME OVERRIDES  (append-only; light mode untouched)
   Converts neutral surfaces/text/borders + status-alert tints for dark.
   Saturated brand fills are intentionally left as-is (they read fine on dark).
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .login-success { color: #7ee2a8; }
[data-theme="dark"] .message.user .message-content { background: color-mix(in srgb, var(--accent) 24%, #12284a); color: #dbe8ff; }
[data-theme="dark"] .message.user .message-content a { color: #9dc0fb; }
[data-theme="dark"] .message.user .message-content code { color: #9dc0fb; }
[data-theme="dark"] .ex-error { color: #f4a3a6; background: rgba(242,85,90,0.15); border-left-color: #f4a3a6; }
[data-theme="dark"] ::selection { color: #f0c073; }
[data-theme="dark"] ::-moz-selection { color: #f0c073; }
[data-theme="dark"] .ip-type-faktum { color: #9dc0fb; }
[data-theme="dark"] .ip-type-beslut { color: #f0c073; }
[data-theme="dark"] .ip-type-fraga { color: #c4b1f7; }
[data-theme="dark"] .ip-type-hypotes { color: #7ee2a8; }
[data-theme="dark"] .ip-type-slutsats { color: #f4a3a6; }
[data-theme="dark"] .bulk-delete-btn:hover { color: #f4a3a6; }
[data-theme="dark"] .btn.btn-publish:hover:not(:disabled) { border-color: #7ee2a8; }
[data-theme="dark"] .linked-landing .linked-type-badge { color: #9dc0fb; }
[data-theme="dark"] .linked-api     .linked-type-badge { color: #7ee2a8; }
[data-theme="dark"] .linked-pwa     .linked-type-badge { color: #f0c073; }
[data-theme="dark"] .linked-report  .linked-type-badge { color: var(--text-primary); }
[data-theme="dark"] .status-shared-icon { color: #9dc0fb; }
[data-theme="dark"] .pc-diff-add { background: rgba(52,209,125,0.14); }
[data-theme="dark"] .pc-prompt-header { background: rgba(224,151,43,0.15); color: #f0c073; }
[data-theme="dark"] .pc-prompt-body { color: #f0c073; }
[data-theme="dark"] .org-category-card { background: var(--bg-surface); }
[data-theme="dark"] .org-category-card:hover { border-color: #7ee2a8; }
[data-theme="dark"] .org-category-card.mature { border-left-color: #7ee2a8; }
[data-theme="dark"] .org-category-card.developing { border-left-color: #f0c073; }
[data-theme="dark"] .org-category-card.planned { border-left-color: var(--border-default); }
[data-theme="dark"] .org-maturity-dot.planned { background: var(--bg-inset); }
[data-theme="dark"] .org-back-btn { color: #7ee2a8; }
[data-theme="dark"] .org-coming-list li::before { color: var(--text-secondary); }
[data-theme="dark"] .org-subtab.active { color: #7ee2a8; border-bottom-color: #7ee2a8; }
[data-theme="dark"] .org-content input[type="text"],
[data-theme="dark"] .org-content input[type="email"],
[data-theme="dark"] .org-content textarea,
[data-theme="dark"] .org-content select { background: var(--bg-surface); }
[data-theme="dark"] .org-content input:focus,
[data-theme="dark"] .org-content textarea:focus,
[data-theme="dark"] .org-content select:focus { border-color: #7ee2a8; }
[data-theme="dark"] .org-feature-list { border-left-color: #7ee2a8; }
[data-theme="dark"] .org-feature-list li::before { color: #7ee2a8; }
[data-theme="dark"] .org-upload-zone:hover { border-color: #7ee2a8; }
[data-theme="dark"] .org-doc-status { background: rgba(224,151,43,0.15); color: #f0c073; }
[data-theme="dark"] .org-doc-status.analyzed { background: rgba(52,209,125,0.14); color: #7ee2a8; }
[data-theme="dark"] .org-doc-status.failed { background: rgba(242,85,90,0.15); color: #f4a3a6; }
[data-theme="dark"] .org-btn-link { color: #f4a3a6; }
[data-theme="dark"] .org-service-card.active { border-color: #7ee2a8; }
[data-theme="dark"] .org-status-active { background: rgba(52,209,125,0.14); color: #7ee2a8; }
[data-theme="dark"] .org-status-inactive { background: var(--bg-surface); color: var(--text-secondary); }
[data-theme="dark"] .org-status-coming { background: rgba(77,139,245,0.16); color: #9dc0fb; }
[data-theme="dark"] .org-philosophy-note { border-left-color: #7ee2a8; }
[data-theme="dark"] .org-test-result.success { background: rgba(52,209,125,0.14); color: #7ee2a8; }
[data-theme="dark"] .org-test-result.error { background: rgba(242,85,90,0.15); color: #f4a3a6; }
[data-theme="dark"] .org-error-msg { background: rgba(242,85,90,0.15); color: #f4a3a6; }
[data-theme="dark"] .org-btn-approve { border-color: #7ee2a8; color: #7ee2a8; }
[data-theme="dark"] .org-btn-reject:hover:not(:disabled) { background: rgba(224,151,43,0.15); }
[data-theme="dark"] .org-rules-badge.proposed { background: rgba(224,151,43,0.15); color: #f0c073; }
[data-theme="dark"] .org-rules-badge.active { background: rgba(52,209,125,0.14); color: #7fe3d5; }
[data-theme="dark"] .org-rules-badge.rejected { background: rgba(242,85,90,0.15); color: #f4a3a6; }
[data-theme="dark"] .org-rule-card.status-proposed { border-left-color: #f0c073; }
[data-theme="dark"] .org-rule-card.status-approved,
[data-theme="dark"] .org-rule-card.status-modified { border-left-color: #7ee2a8; }
[data-theme="dark"] .org-rule-card.status-rejected,
[data-theme="dark"] .org-rule-card.status-archived { border-left-color: var(--border-default); }
[data-theme="dark"] .org-rule-type-badge { background: rgba(77,139,245,0.16); color: #9dc0fb; }
[data-theme="dark"] .org-rule-type-badge.type-block { background: rgba(242,85,90,0.15); color: #f4a3a6; }
[data-theme="dark"] .org-rule-type-badge.type-mask { background: rgba(224,151,43,0.15); color: #f0c073; }
[data-theme="dark"] .org-rule-type-badge.type-require_consent { background: rgba(77,139,245,0.16); color: #c4b1f7; }
[data-theme="dark"] .org-rule-type-badge.type-log_only { background: var(--bg-surface); color: var(--text-primary); }
[data-theme="dark"] .org-rule-type-badge.type-rate_limit { background: rgba(77,139,245,0.16); color: #9dc0fb; }
[data-theme="dark"] .org-rule-type-badge.type-route { background: rgba(45,212,191,0.14); color: #7fe3d5; }
[data-theme="dark"] .org-rule-dim-tag { background: var(--bg-surface); color: var(--text-secondary); }
[data-theme="dark"] .org-rule-confidence.high { background: rgba(52,209,125,0.14); color: #7fe3d5; }
[data-theme="dark"] .org-rule-confidence.medium { background: rgba(224,151,43,0.15); color: #f0c073; }
[data-theme="dark"] .org-rule-confidence.low { background: rgba(242,85,90,0.15); color: #f4a3a6; }
[data-theme="dark"] .dp-btn-danger { color: #f4a3a6; }
[data-theme="dark"] .dp-sql-error { color: #f4a3a6; }
[data-theme="dark"] .fp-action-danger { color: #f4a3a6; }
[data-theme="dark"] .aicfg-error { color: #f4a3a6; }

/* ═══════════════════════════════════════════════════════════════════════════
   SOVEREIGNTY BRANDING (prototype)  —  blue leads, gold means something
   Gold gets a narrow, loaded role (EU / trust), never a second UI accent.
   Leans on the existing ochre --gold; append-only, token-based.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --sovereign:       var(--gold);              /* #d97706 ochre in light */
  --sovereign-line:  rgba(217,119,6,0.55);     /* topbar signature hairline */
}
:root[data-theme="dark"] {
  --sovereign-line:  rgba(224,151,43,0.60);    /* gold reads richer on near-black */
}

/* Guld-signaturlinje högst upp i topbaren (båda lägena) */
.app-topbar::before,
.platform-chat-topbar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--sovereign-line); pointer-events: none; z-index: 51;
}

/* Guld = premium: PRO-planen bär suveränitets-guldet (blått leder resten av UI) */
.plan-badge[data-plan="pro"] {
  background: var(--gold-subtle);
  color: var(--gold);
  border-color: var(--sovereign-line);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBARS — thin at rest, widen on hover (no layout shift)
   Constant reserved track (8px); the thumb is a padding-box fill inside a
   transparent border. On hover the border shrinks so the visible thumb grows
   without reflowing content. Webkit gets hover-widen; Firefox gets themed-thin.
   ═══════════════════════════════════════════════════════════════════════════ */
html { scrollbar-width: thin; scrollbar-color: var(--border-default) transparent; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 999px;
  border: 2px solid transparent;              /* visible thumb ~= 4px at rest */
  background-clip: padding-box;
  transition: background-color .12s ease;
}
:hover::-webkit-scrollbar-thumb { border-width: 1px; }                              /* area hover ~= 6px */
::-webkit-scrollbar-thumb:hover { border-width: 0; background: var(--border-strong); }  /* on thumb ~= 8px */

/* Normalize the few custom-width scrollbars to the same widen-on-hover behavior */
.chat-messages::-webkit-scrollbar,
.projects-list::-webkit-scrollbar { width: 8px; }
.fp-tabs::-webkit-scrollbar { height: 8px; }
.chat-messages::-webkit-scrollbar-thumb,
.projects-list::-webkit-scrollbar-thumb,
.fp-tabs::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.chat-messages:hover::-webkit-scrollbar-thumb,
.projects-list:hover::-webkit-scrollbar-thumb,
.fp-tabs:hover::-webkit-scrollbar-thumb { border-width: 1px; }
.chat-messages::-webkit-scrollbar-thumb:hover,
.projects-list::-webkit-scrollbar-thumb:hover,
.fp-tabs::-webkit-scrollbar-thumb:hover { border-width: 0; background: var(--border-strong); }


/* ═══════════════════════════════════════════════════════════════════════════
   BRAND — rAi logotype tokens + inline logomark styling
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --brand-blue:#1f5cff; --brand-gold:#ffb020; }
:root[data-theme="dark"] { --brand-blue:#5aa0ff; --brand-gold:#ffc233; }
.logo svg.logo-mark, .pc-brand svg.logo-mark { height:26px; width:auto; display:block; }
.pc-brand { display:inline-flex; align-items:center; }
.logo-mark .lm-ink { fill: var(--brand-blue); }
.logo-mark .lm-acc { fill: var(--brand-gold); }

.login-logo { display:flex; justify-content:center; margin-bottom:16px; }
.login-logo svg.logo-mark { height:36px; width:auto; }


/* ── Inställningsmodal: formulärrader ────────────────────────────────────────
   .form-group label är flex med space-between. Rader med TVA barn (etikett +
   värde) hamnar da rätt, men Max tokens har TRE (etikett, värde, knapp) och
   space-between spred dem som vänster/mitten/höger. margin-left:auto på värdet
   sväljer allt fritt utrymme där, sa värde och knapp star ihop till höger
   oavsett hur många element raden har. */
.form-group label .label-value { margin-left: auto; }

/* Knappen i etikettraden — ärver temats färger i stället för hårdkodade
   mörka fallbacks (#444/#999) som lyste igenom i det ljusa gränssnittet. */
.form-group label .label-action {
  margin-left: 8px;
  font-size: 11px;
  line-height: 1.4;
  padding: 3px 9px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.form-group label .label-action:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.form-group label .label-action:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* Vertikal rytm: .form-group hade ingen bottenmarginal, sa nästa etikett landade
   direkt pa foregaende reglage. Reglagen far ocksa luft over och under. */
.settings-section .form-group + .form-group,
.settings-section .form-group + .checkbox-group,
.settings-section .checkbox-group + .form-group { margin-top: 18px; }
.settings-section .form-group input[type="range"] { margin-top: 10px; margin-bottom: 2px; }
.settings-section .form-group .form-hint { margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BUILDER CHROME-BRANDING — särskilj arbetsytorna (topbar + sidopanel) från
   preview-ytan. Ramen bär rai-identiteten; previewen förblir neutral (appens
   eget tema äger innehållet). Guld hålls SVAGT och lever bara i chrome, aldrig
   i preview. Alla guld-toner via --gold-*-variabler → adapterar ljus/mörk.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Härledda chrome-atmosfär-färger — motorns (__eontraDeriveCss) KALIBRERADE analoga triad
   kring en FAST blå+guld rai-brand-koordinat (seed #1E3A8A, accent #EAB308, atmosphere 0.5),
   bakade för ljus/mörk. Låst brand-koordinat (ej i design-panelen); re-derivera för att kalibrera. */
:root {
  --chrome-atm-core: #183696;   /* djupblå (frö) */
  --chrome-atm-cool: #264754;   /* blå-teal (analog) */
  --chrome-gold:     #eab308;   /* guld/gul accent */
}
:root[data-theme="dark"] {
  --chrome-atm-core: #4f74cd;
  --chrome-atm-cool: #498197;
  --chrome-gold:     #eab308;
}
/* ── SOVEREIGN NAVY CHROME ──────────────────────────────────────────────────
   Chrome-rötterna bär ALLTID data-theme="dark" (satt i app.js) → de beprövade dark-reglerna gäller
   kontrollerna. Här tonas surface-tokens till en DJUP MARINBLÅ skala (medveten sovereign-palett) med
   motorns kalibrerade readable-on-navy text/accent. SCOPAT till chrome → previewen (utanför dessa
   subträd) behåller :root-temat och förblir neutral. Alltid marinblått (base_lightness låst); byt
   till "följer växlaren" genom att villkora blocket på :root-temat. */
.app-topbar[data-theme="dark"],
.left-panel[data-theme="dark"] {
  --bg-base:      #0a1a44;
  --bg-surface:   #102a5e;
  --bg-elevated:  #173a86;
  --bg-inset:     #0c2050;
  --bg-hover:     #1b3f8f;
  --bg-active:    #16357a;
  --text-primary:   #eaf0fb;
  --text-secondary: #c2d0ec;
  --text-muted:     #93a6cf;
  --text-faint:     #6f83ac;
  --border-hairline: rgba(255,255,255,.05);
  --border-subtle:   rgba(255,255,255,.10);
  --border-default:  rgba(255,255,255,.16);
  --border-strong:   rgba(255,255,255,.26);
  --accent:        #6691fc;   /* motorns readable-on-navy primary */
  --accent-hover:  #7ba0fd;
  --accent-light:  #8fb0fe;
  --accent-subtle: rgba(102,145,252,.16);
  --accent-wash:   rgba(102,145,252,.08);
  --gold:          #e0972b;   /* ljusare guld → Pro-badge läsbar på navy */
  --gold-light:    rgba(234,179,8,.5);   /* guldtråd tydligare på navy */
  --chrome-atm-core: #5c86e6;  /* ljusare aurora-toner → glöder PÅ navy */
  --chrome-atm-cool: #4f97b8;
  /* Fallback-aurora (motorn frånvarande): fast intensitet. app.js överskriver med atmosphere-styrd. */
  --chrome-atmosphere:
    radial-gradient(130% 150% at 10% 25%, color-mix(in srgb, var(--chrome-atm-core) 24%, transparent), transparent 68%),
    radial-gradient(120% 145% at 90% 72%, color-mix(in srgb, var(--chrome-atm-cool) 20%, transparent), transparent 70%),
    radial-gradient(90% 120% at 97% 6%, color-mix(in srgb, var(--chrome-gold) 15%, transparent), transparent 58%);
  --brand-blue:  #5aa0ff;   /* ljusare logo-toner → poppar på navy */
  --brand-gold:  #ffc233;
}
/* Skyddsnät: ärvd text i chromet blir ljus (fångar element utan egen token-färg på navy) + chromet
   återapplicerar font-family så ett coord-valt --font-sans slår igenom (annars ärvs body:s Plus Jakarta). */
.app-topbar[data-theme="dark"],
.left-panel[data-theme="dark"] { color: var(--text-primary); font-family: var(--font-sans); }
/* Nivå 2 — ÄKTA atmosfär i chromet, INTENSITET styrd av atmosphere-primitiven (--chrome-atmosphere
   byggs i app.js ur coord.atmosphere; navy-blocket ger en fast fallback när motorn är frånvarande).
   Målad som BAKGRUND (bakom innehållet). Bara chrome; previewen orörd. */
.app-topbar,
.left-panel {
  background-image: var(--chrome-atmosphere);
}
/* Guldtråd i sömmarna där chrome möter preview (den gula sömmen) */
.app-topbar { border-bottom-color: var(--border-default); }  /* harmoniserad med Samtal — ingen guld-söm på topbaren (left-panel behåller sömmen tills vidare) */
.left-panel { border-right-color: var(--gold-light); }
/* Nivå 1 — söm/inramning: chrome kastar mjuk skugga in på previewen (inramad skärm) */
.app-topbar { box-shadow: 0 1px 0 var(--border-hairline), 0 2px 6px -2px rgba(0,0,0,.06); }
.left-panel { box-shadow: 1px 0 5px -2px rgba(0,0,0,.05); position: relative; z-index: 5; }
/* Nivå 3 — rikare blå+guld-atmosfär BARA i tom-läget (inget projekt). Bakom live-preview: inget. */
#preview-empty {
  background:
    radial-gradient(90% 70% at 30% 32%, color-mix(in srgb, var(--chrome-atm-core) 20%, transparent), transparent 62%),
    radial-gradient(80% 65% at 78% 70%, color-mix(in srgb, var(--chrome-gold) 16%, transparent), transparent 60%),
    var(--bg-elevated);
}
#preview-empty svg { color: var(--chrome-gold); }

/* Clickwrap-samtycke i registreringsformuläret */
.form-consent { margin: 4px 0 14px; }
.consent-label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--text-secondary, #555); cursor: pointer; }
.consent-label input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.consent-label a { color: var(--accent, #2563eb); text-decoration: underline; }

/* Om-godkännande-grind vid versionsändring */
.legal-gate { position: fixed; inset: 0; z-index: 9999; background: rgba(15,18,25,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.legal-gate-box { background: var(--bg-surface, #fff); max-width: 460px; width: 100%; border-radius: 12px; padding: 28px 30px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.legal-gate-box h2 { margin: 0 0 10px; font-size: 1.2rem; }
.legal-gate-box p { font-size: .92rem; line-height: 1.5; color: var(--text-secondary, #555); margin: 0 0 14px; }
.legal-gate-check { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; margin: 12px 0; cursor: pointer; }
.legal-gate-check input { margin-top: 3px; }
.legal-gate-error { color: #dc2626; font-size: .85rem; }
.legal-gate-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Koppla egen domän (BYO) — DomainConnect */
.dc-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(15,18,25,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.dc-box { background: var(--bg-surface, #fff); max-width: 520px; width: 100%; max-height: 90vh; overflow: auto; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.dc-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); font-weight: 600; font-size: 15px; }
.dc-close { background: transparent; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); line-height: 1; }
.dc-body { padding: 20px; }
.dc-lead { font-size: 13px; line-height: 1.5; color: var(--text-secondary, #555); margin: 0 0 16px; }
.dc-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); display: block; margin-bottom: 6px; }
.dc-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm, 6px); font-family: var(--font-mono, monospace); font-size: 13px; box-sizing: border-box; }
.dc-hint { font-size: 11px; color: var(--text-muted); margin: 8px 0 0; }
.dc-hint code, .dc-kv code { font-family: var(--font-mono, monospace); background: var(--bg-inset, #f5f5f5); padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.dc-error { font-size: 12px; color: var(--error, #dc2626); margin: 12px 0 0; }
.dc-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.dc-record { border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.dc-record-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dc-tag { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; background: var(--bg-hover, #eef); color: var(--text-primary); padding: 2px 7px; border-radius: 4px; }
.dc-purpose { font-size: 11px; color: var(--text-muted); }
.dc-kv { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; }
.dc-kv .dc-k { width: 48px; color: var(--text-muted); flex-shrink: 0; }
.dc-kv code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; }
.dc-copy { background: transparent; border: 1px solid var(--border-subtle); border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; color: var(--text-secondary); flex-shrink: 0; }
.dc-copy:hover { background: var(--bg-hover, #f5f5f5); }
.dc-note { font-size: 11px; color: var(--text-muted); margin: 8px 0 0; line-height: 1.4; }

/* DomainConnect — list-vy */
.dc-domain-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; margin-bottom: 8px; }
.dc-domain-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.dc-domain-info code { font-family: var(--font-mono, monospace); font-size: 12px; }
.dc-status { font-size: 10px; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.dc-status-active { background: rgba(22,163,74,.12); color: #16a34a; }
.dc-status-pending { background: rgba(217,119,6,.12); color: #d97706; }
.dc-disconnect { background: transparent; border: 1px solid var(--border-subtle); border-radius: 5px; padding: 4px 10px; font-size: 11px; cursor: pointer; color: var(--text-secondary); flex-shrink: 0; }
.dc-disconnect:hover { background: rgba(220,38,38,.08); color: #dc2626; border-color: #dc2626; }

/* DomainConnect — wildcard "sätt upp en gång" */
.dc-wildcard-cta { font-size: 12px; color: var(--text-muted); margin: 10px 0 0; line-height: 1.5; }
.dc-wildcard-cta a { color: var(--accent, #2563eb); text-decoration: underline; cursor: pointer; }
.dc-sub-h { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin: 14px 0 6px; }
.dc-sub-h:first-child { margin-top: 0; }

/* DomainConnect — rad-actions (verifiera + koppla bort) */
.dc-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.dc-verify-row { background: transparent; border: 1px solid var(--accent, #2563eb); color: var(--accent, #2563eb); border-radius: 5px; padding: 4px 10px; font-size: 11px; cursor: pointer; }
.dc-verify-row:hover { background: rgba(37,99,235,.08); }

/* ── Konto-modal (AccountModal) — samlad kontmeny, båda ytorna ────────── */
.acct-modal {
  max-width: 440px;
  width: 100%;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
}
.acct-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.acct-avatar {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px;
  letter-spacing: 0.3px;
}
.acct-id { flex: 1; min-width: 0; }
.acct-name {
  font-size: 15px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-email {
  font-size: 12px; color: var(--text-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-close {
  flex-shrink: 0; align-self: flex-start;
  background: none; border: none;
  color: var(--text-muted); font-size: 20px; line-height: 1;
  cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm);
  transition: background 0.12s, color 0.12s;
}
.acct-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.acct-body { overflow-y: auto; padding: 8px 12px 4px; }
.acct-section { margin-bottom: 12px; }
.acct-section-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted);
  padding: 6px 8px 6px;
}
.acct-group {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  background: var(--bg-elevated, var(--bg-surface));
}
.acct-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 14px; border: none; background: none;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary); font-size: 13.5px; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: background 0.12s;
}
.acct-group .acct-row:last-child { border-bottom: none; }
.acct-row:hover { background: var(--bg-hover); }
.acct-row-static { cursor: default; }
.acct-row-static:hover { background: none; }
.acct-row-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-hover); color: var(--text-secondary, var(--text-primary));
}
.acct-row:hover .acct-row-icon { color: var(--accent); }
.acct-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acct-row-label { font-weight: 500; line-height: 1.3; }
.acct-row-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.acct-row-trailing { flex-shrink: 0; display: flex; align-items: center; color: var(--text-muted); }
.acct-row-chevron { opacity: 0.5; transition: transform 0.12s, opacity 0.12s; }
.acct-row:hover .acct-row-chevron { opacity: 0.9; transform: translateX(2px); }
.acct-toggle-hint { font-size: 11.5px; color: var(--text-muted); }
.acct-row-danger .acct-row-label { color: var(--danger, #ef4444); }

.acct-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--border-subtle);
}
.acct-logout {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-default);
  background: none; color: var(--text-primary);
  font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.acct-logout:hover { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.4); color: var(--danger, #ef4444); }
.acct-version {
  background: none; border: none; cursor: pointer;
  font-size: 10px; color: var(--text-muted); font-family: var(--font-mono, monospace);
  letter-spacing: 0.3px; padding: 4px 6px; border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
}
.acct-version:hover { color: var(--text-secondary, var(--text-primary)); background: var(--bg-hover); }

/* Språk-switchern inuti raden: kompakt, högerställd */
.acct-row-trailing .lang-switch-host { display: inline-flex; }

/* ── Version-modal (harmoniserad till delade .modal-skalet) ──────────── */
.version-modal-content {
  max-width: 460px; width: 100%;
  max-height: 82vh;
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.version-modal-content .modal-header { margin: 0; padding: 16px 20px; }
.version-modal-content .modal-header h2 { display: flex; align-items: baseline; gap: 8px; }
.vm-ver { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); font-weight: 400; }
.vm-body { overflow-y: auto; flex: 1; padding: 16px 20px; }
.vm-section-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 8px;
}
.vm-history { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.vm-empty { font-size: 12px; color: var(--text-faint); padding: 6px 0; }
.vm-history-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.vm-history-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; margin-top: 4px; }
.vm-history-dot-latest { background: #10b981; }
.vm-history-main { flex: 1; min-width: 0; }
.vm-history-ver { font-size: 11px; font-weight: 600; font-family: var(--font-mono); color: var(--text-primary); }
.vm-history-log { font-size: 11px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-history-ts { font-size: 10px; color: var(--text-faint); flex-shrink: 0; margin-top: 1px; }
.vm-practices { display: flex; flex-direction: column; gap: 4px; }
.vm-practice {
  padding: 8px 12px; border-left: 2px solid var(--accent);
  background: var(--bg-elevated);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-top: 1px solid var(--border-hairline);
  border-right: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.vm-practice-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.vm-practice-body { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.version-modal-content .modal-footer {
  padding: 10px 20px; border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: flex-end; background: var(--bg-elevated);
}

/* ── Rapportera bugg-modal ───────────────────────────────────────────── */
.bug-modal { max-width: 460px; width: 100%; }
.bug-hint { font-size: 12.5px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.5; }
.bug-textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px;
  padding: 10px 12px; border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 8px); background: var(--bg-elevated);
  color: var(--text-primary); font-family: inherit; font-size: 13.5px; line-height: 1.5;
}
.bug-textarea:focus { outline: none; border-color: var(--accent); }
.bug-msg { margin-top: 10px; font-size: 12.5px; padding: 8px 10px; border-radius: var(--radius-sm); }
.bug-msg-err { background: rgba(239,68,68,0.08); color: var(--danger, #ef4444); border: 1px solid rgba(239,68,68,0.3); }
.bug-msg-ok { background: rgba(16,185,129,0.08); color: #059669; border: 1px solid rgba(16,185,129,0.3); }
.bug-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ── Publiceringsgranskning (harmoniserad, tema-medveten) ────────────── */
.pub-review-content { max-width: 520px; width: 90%; max-height: 80vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pub-review-body { overflow-y: auto; padding: 22px 24px 8px; }
.pub-review-title { font-weight: 700; font-size: 16px; color: var(--text-primary); margin-bottom: 4px; }
.pub-review-lead { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.5; }
.pub-review-list { padding: 0; margin: 12px 0; }
.pub-review-item { margin: 10px 0; list-style: none; }
.pub-review-item-title { font-weight: 600; color: var(--text-primary); }
.pub-review-item-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.pub-review-warnbox {
  margin-top: 16px; padding: 12px; border-radius: var(--radius-md, 10px);
  background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.28);
}
.pub-review-warnbox-title { font-weight: 700; font-size: 14px; color: var(--danger, #dc2626); margin-bottom: 4px; }
.pub-review-warnbox-lead { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.5; }
.pub-review-warn-title { font-weight: 600; color: var(--danger, #dc2626); }
.pub-review-warn-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.pub-review-und { margin-top: 12px; }
.pub-review-und > summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
.pub-review-und-item { margin: 6px 0; list-style: none; font-size: 12px; color: var(--text-muted); }
.pub-review-actions {
  display: flex; gap: 8px; padding: 14px 24px;
  border-top: 1px solid var(--border-subtle); background: var(--bg-elevated);
}
.pub-review-actions #__r12pub_confirm { flex: 1; }

/* ── Buggrapporter (admin-lista/triage) ──────────────────────────────── */
.buglist-modal { max-width: 620px; width: 92%; max-height: 84vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.buglist-modal .modal-header { margin: 0; padding: 16px 20px; }
.buglist-count { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.buglist-filters { display: flex; flex-direction: column; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--border-subtle); }
.buglist-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.buglist-filter-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); width: 52px; flex-shrink: 0; }
.buglist-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border-default); background: none; color: var(--text-secondary, var(--text-muted));
  cursor: pointer; font-family: inherit; transition: all 0.12s;
}
.buglist-chip:hover { background: var(--bg-hover); }
.buglist-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.buglist-body { overflow-y: auto; flex: 1; padding: 8px 12px 12px; }
.buglist-empty { padding: 28px; text-align: center; color: var(--text-muted); font-size: 13px; }
.buglist-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 8px); margin: 6px 0; overflow: hidden; background: var(--bg-elevated, var(--bg-surface)); }
.buglist-item.open { border-color: var(--border-default); }
.buglist-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; transition: background 0.12s; }
.buglist-row:hover { background: var(--bg-hover); }
.buglist-sev { flex-shrink: 0; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 7px; border-radius: 4px; }
.sev-critical { background: rgba(220,38,38,0.14); color: #dc2626; }
.sev-annoying { background: rgba(217,119,6,0.14); color: #d97706; }
.sev-cosmetic { background: rgba(100,116,139,0.14); color: var(--text-muted); }
.sev-none { background: var(--bg-hover); color: var(--text-muted); }
.buglist-main { flex: 1; min-width: 0; }
.buglist-title { font-size: 13.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buglist-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.buglist-caret { flex-shrink: 0; color: var(--text-muted); transition: transform 0.15s; }
.buglist-item.open .buglist-caret { transform: rotate(180deg); }
.buglist-detail { padding: 4px 14px 14px; border-top: 1px solid var(--border-subtle); }
.buglist-detail-sum { font-size: 13px; color: var(--text-secondary, var(--text-primary)); line-height: 1.5; margin: 10px 0; }
.buglist-detail-block { font-size: 12.5px; color: var(--text-secondary, var(--text-primary)); margin: 8px 0; line-height: 1.5; }
.buglist-detail-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 2px; }
.buglist-triage { display: flex; gap: 16px; margin-top: 12px; }
.buglist-triage label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.buglist-triage select {
  padding: 6px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text-primary); font-family: inherit; font-size: 13px; text-transform: none; letter-spacing: 0;
}

/* ============================================================================
 * FAS 3 — Projekt-vyn (fullskärms-rutnät av levande projekt-kort)
 * ============================================================================ */
.projects-view { display: none; }
/* Projekt-läge: dölj build/design-layouten, låt vyn fylla app-layouten. */
.app-layout.mode-projects > *:not(#projects-view) { display: none !important; }
.app-layout.mode-projects .projects-view {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
  overflow: auto; padding: 28px 36px; background: var(--bg-base, #0e0f13);
}
.projects-view-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.projects-view-title { font-size: 20px; font-weight: 650; margin: 0; color: var(--text-primary, #f3f4f6); }
.projects-search {
  background: var(--bg-surface, #1a1c22); border: 1px solid var(--border-subtle, #2a2d35);
  border-radius: 9px; padding: 8px 12px; color: var(--text-primary, #f3f4f6);
  font: inherit; font-size: 13px; min-width: 240px; outline: none;
}
.projects-search:focus { border-color: var(--accent, #5b8fb0); }

.projects-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px; align-content: start;
}
.projects-empty { color: var(--text-faint, #8b8f98); padding: 40px 0; text-align: center; }

.proj-card {
  border: 1px solid var(--border-subtle, #2a2d35); border-radius: 13px; overflow: hidden;
  background: var(--bg-surface, #16181d); cursor: pointer; display: flex; flex-direction: column;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.proj-card:hover, .proj-card:focus-visible {
  transform: translateY(-2px); border-color: var(--border-default, #3a3d47);
  box-shadow: 0 8px 26px rgba(0,0,0,.28); outline: none;
}
.proj-preview {
  aspect-ratio: 16 / 10; position: relative; overflow: hidden;
  background: var(--bg-inset, #0d0e12); border-bottom: 1px solid var(--border-subtle, #2a2d35);
}
.proj-fp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: transparent; }
.proj-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-preview-plain {
  background: linear-gradient(135deg, var(--bg-elevated, #22252c), var(--bg-inset, #0d0e12));
}

.proj-meta { padding: 12px 14px 14px; }
.proj-title-row { display: flex; align-items: center; gap: 8px; }
.proj-name {
  font-weight: 600; font-size: 14px; color: var(--text-primary, #f3f4f6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.proj-badge-published {
  flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px; color: var(--accent, #5b8fb0);
  background: var(--accent-wash, rgba(91,143,176,.12)); border: 1px solid var(--accent-subtle, rgba(91,143,176,.25));
}
.proj-sub { font-size: 12px; color: var(--text-faint, #8b8f98); margin-top: 3px; }

/* Spår C — hover-live: den riktiga appen nedskalad, ovanpå fingeravtrycket. */
.proj-live {
  position: absolute; inset: 0; overflow: hidden; z-index: 2;
  background: var(--bg-inset, #0d0e12);
  animation: projLiveIn .18s ease;
}
.proj-live-frame { position: absolute; top: 0; left: 0; border: 0; pointer-events: none; }
@keyframes projLiveIn { from { opacity: 0; } to { opacity: 1; } }

/* Oändlig skroll: sentinel-/laddnings-rad efter rutnätet. */
.projects-sentinel {
  text-align: center; color: var(--text-faint, #8b8f98);
  font-size: 12px; padding: 18px 0 6px;
}

/* Projekt-kortets meny (⋮) — återanvänder Projects.showProjectMenu. Syns vid hover (Lovable-stil). */
.proj-name { flex: 1 1 auto; }
.proj-menu-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; margin: -2px -4px -2px 0;
  border: none; border-radius: 7px; background: transparent;
  color: var(--text-faint, #8b8f98); cursor: pointer;
  opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.proj-card:hover .proj-menu-btn,
.proj-menu-btn:focus-visible { opacity: 1; }
.proj-menu-btn:hover { background: var(--bg-hover, rgba(255,255,255,.06)); color: var(--text-primary, #f3f4f6); }

/* "Öppna preview i ny flik" — överst till höger på previewen, syns vid hover. */
.proj-open-tab {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: color-mix(in oklab, var(--bg-base, #0e0f13) 82%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border-subtle, #2a2d35);
  color: var(--text-primary, #f3f4f6); cursor: pointer;
  opacity: 0; transform: translateY(-2px);
  transition: opacity .14s ease, transform .14s ease, background .12s ease;
  text-decoration: none;
}
.proj-card:hover .proj-open-tab,
.proj-open-tab:focus-visible { opacity: 1; transform: translateY(0); }
.proj-open-tab:hover { background: var(--accent, #5b8fb0); color: #fff; border-color: var(--accent, #5b8fb0); }

/* Öppna-preview-i-ny-flik-knappen är en Build-åtgärd — dölj den i Projekt-läget (inget aktivt
   projekt att förhandsvisa där). Knappen ligger i topbaren (utanför .app-layout), så :has() på
   en gemensam förfader. */
body:has(.app-layout.mode-projects) #open-preview-tab-btn { display: none !important; }

/* Projekt-vyn: kontroller (filter-flikar + sortering) + stjärnmärkning */
.projects-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.projects-tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg-surface, #16181d); border: 1px solid var(--border-subtle, #2a2d35); border-radius: 9px;
}
.projects-tab {
  border: none; background: transparent; color: var(--text-faint, #8b8f98);
  font: inherit; font-size: 12.5px; font-weight: 500; white-space: nowrap;
  padding: 5px 11px; border-radius: 6px; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.projects-tab:hover { color: var(--text-primary, #f3f4f6); }
.projects-tab.active { background: var(--accent, #5b8fb0); color: #fff; }
.projects-sort {
  background: var(--bg-surface, #16181d); border: 1px solid var(--border-subtle, #2a2d35);
  border-radius: 8px; color: var(--text-primary, #f3f4f6); font: inherit; font-size: 12.5px;
  padding: 6px 10px; cursor: pointer;
}
.projects-sort:focus { outline: none; border-color: var(--accent, #5b8fb0); }

/* Stjärna på kortet (top-left) — hover-visad, alltid synlig när favorit. */
.proj-star {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: color-mix(in oklab, var(--bg-base, #0e0f13) 82%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border-subtle, #2a2d35); color: var(--text-primary, #f3f4f6);
  cursor: pointer; opacity: 0; transform: translateY(-2px);
  transition: opacity .14s ease, transform .14s ease, color .12s ease;
}
.proj-star svg { fill: none; stroke: currentColor; stroke-width: 2; }
.proj-card:hover .proj-star,
.proj-star:focus-visible,
.proj-star.is-fav { opacity: 1; transform: translateY(0); }
.proj-star.is-fav { color: #f5b301; border-color: color-mix(in srgb, #f5b301 40%, var(--border-subtle, #2a2d35)); }
.proj-star.is-fav svg { fill: #f5b301; stroke: #f5b301; }

/* FAS 1: Personlighet-ingången i Design-panelen (led med leran, inte fernissan). */
.dp-personalities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 8px; }
.dp-personality {
  padding: 9px 6px; border: 1px solid var(--border-subtle, #2a2d35); border-radius: 8px;
  background: var(--bg-surface, #1a1c22); color: var(--text-primary, #e8ebf0);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; text-align: center;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.dp-personality:hover { border-color: var(--border-strong, #3a3d47); }
.dp-personality.active { background: var(--accent, #5b8fb0); color: #fff; border-color: var(--accent, #5b8fb0); }
.dp-themes-fold { margin: 2px 0 8px; }
.dp-themes-fold > summary { cursor: pointer; font-size: 12px; color: var(--text-faint, #8b8f98); padding: 6px 0; list-style: none; user-select: none; }
.dp-themes-fold > summary:hover { color: var(--text-primary, #e8ebf0); }

/* ══════════════════════════════════════════════════════════════════════════
   INLOGGNING OCH REGISTRERING — bekräftelse före lösenord
   Säkerheten ska inte kännas som en vägg: varje steg säger varför det finns,
   vad som händer härnäst, och vad man gör om något inte kommer fram.
   ══════════════════════════════════════════════════════════════════════════ */
.auth-container{max-width:400px}
.auth-icon{inline-size:52px;block-size:52px;margin:0 auto 14px;display:grid;place-items:center;
  border-radius:50%;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.field-hint{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--text-muted)}
.field-hint .is-met,#verify-pw-rule.is-met{color:var(--success)}
.auth-text{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--text-secondary)}
.auth-status{min-block-size:1.4em;margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--text-secondary)}
.auth-tips{margin:16px 0 0;padding:12px 14px 12px 30px;border-radius:var(--radius-md,8px);
  background:var(--bg-elevated,var(--bg-surface));font-size:12.5px;line-height:1.55;color:var(--text-muted)}
.auth-tips li+li{margin-top:4px}
.login-footer-quiet{font-size:12.5px}
.login-footer-quiet a{color:var(--text-muted)}
.login-error.is-positive{color:var(--success);
  background:color-mix(in srgb,var(--success) 10%,transparent);border-color:color-mix(in srgb,var(--success) 30%,transparent)}

/* Lösenord med visa/dölj — knappen ligger i fältet men är en egen träffyta */
.password-field{position:relative;display:flex}
.password-field input{flex:1;padding-inline-end:64px}
.password-toggle{position:absolute;inset-block:4px;inset-inline-end:4px;padding:0 10px;
  font:inherit;font-size:12px;font-weight:500;border:0;border-radius:6px;cursor:pointer;
  background:transparent;color:var(--text-secondary)}
.password-toggle:hover{background:var(--bg-hover);color:var(--text-primary)}
.password-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* "Hur fungerar det?" — hjälp som finns när man vill ha den, ur vägen annars */
.auth-help{margin:18px 0 4px;border-top:1px solid var(--border-subtle,var(--border-default));padding-top:14px}
.auth-help summary{cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary);
  list-style:none;display:flex;align-items:center;gap:6px}
.auth-help summary::-webkit-details-marker{display:none}
.auth-help summary::before{content:"";inline-size:6px;block-size:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.auth-help[open] summary::before{transform:rotate(45deg)}
.auth-help summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.auth-steps{margin:12px 0 0;padding-inline-start:20px;font-size:13px;line-height:1.55;color:var(--text-secondary)}
.auth-steps li+li{margin-top:6px}
.auth-steps strong{color:var(--text-primary);font-weight:500}
.auth-faq{margin:14px 0 0;font-size:12.5px;line-height:1.55}
.auth-faq dt{font-weight:500;color:var(--text-primary);margin-top:10px}
.auth-faq dd{margin:2px 0 0;color:var(--text-muted)}

@media (prefers-reduced-motion:reduce){.auth-help summary::before{transition:none}}
@media (max-width:480px){.auth-container{padding:28px 20px;border-radius:0;border-inline:0;box-shadow:none}}

/* ── Adress i organisationen vid inbjudan ─────────────────────────────────── */
.invite-address-row{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.invite-address-row[hidden]{display:none}
.invite-address-row label{font-size:13px;color:var(--text-primary)}
.invite-address-row .form-optional{color:var(--text-muted);font-weight:400}
.invite-address{display:flex;align-items:center;gap:6px;max-width:420px}
.invite-address input{flex:1;min-width:0}
.invite-address-at{color:var(--text-muted)}
.invite-address-row .form-hint{margin:0;font-size:12px;color:var(--text-muted);line-height:1.45}
.member-login{font-size:11.5px;color:var(--text-muted)}

/* ── Telefoni ─────────────────────────────────────────────────────────────── */
.phone-connect{display:grid;gap:6px;max-width:380px}
.phone-connect label{font-size:13px;color:var(--text-primary)}
.phone-account{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.phone-h{margin:16px 0 6px;font-size:13px;font-weight:600;color:var(--text-primary)}
.phone-number-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border-subtle,var(--border-default))}
.phone-number-main{flex:1;min-width:180px}
.phone-badge{margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.phone-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.phone-own{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.phone-own input{min-width:0}
.phone-settings{display:grid;gap:8px;max-width:420px}
.phone-settings label{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13px}
.phone-settings input{max-width:160px}
.phone-msg{margin-bottom:10px;padding:8px 10px;border-radius:8px;font-size:13px;background:color-mix(in srgb,var(--success,#16a34a) 12%,transparent)}
.phone-msg.is-error{background:color-mix(in srgb,var(--error) 12%,transparent);color:var(--error)}
.phone-voice{flex-basis:100%;margin-top:6px;font-size:13px}
.phone-voice summary{cursor:pointer;color:var(--text-secondary)}
.phone-voice label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0;max-width:460px}
.phone-voice .pv-hours-toggle{justify-content:flex-start}
.pv-hours-box{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:4px 0 4px 22px}
.pv-hours-box[hidden]{display:none}
.pv-hours-box .pv-day{margin:0;gap:4px}
.pv-actions{display:flex;gap:8px;margin-top:6px}
.pv-menu,.pv-record-box{padding:4px 0 4px 22px}
.pv-menu[hidden],.pv-record-box[hidden]{display:none}
.pv-digits{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.pv-digit{display:flex;align-items:center;gap:6px;margin:0!important;font-weight:600}
.pv-digit select{flex:1;min-width:0;font-weight:400}
.pv-ok{font-size:11px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--success,#16a34a) 14%,transparent);color:var(--success,#16a34a)}
.pv-missing{font-size:11px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--warning,#b7791f) 16%,transparent);color:var(--warning,#b7791f)}
.pv-muted{font-size:11px;color:var(--text-muted)}
.phone-ai{display:grid;gap:6px;max-width:560px}
.phone-ai textarea{font:inherit;font-size:13px;padding:8px;border-radius:8px;border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-primary);resize:vertical}
.phone-ai label{font-size:13px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.pv-ai{padding:4px 0 4px 22px}
.pv-ai[hidden]{display:none}
.phone-assign-app{flex-basis:100%;max-width:420px;font:inherit;font-size:13px;padding:6px 8px;border-radius:8px;border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-primary)}
.phone-assign-app[hidden]{display:none}


/* App-körning (AppRun): problem från körningen i tre bredder, med knapp — inte automatiskt. */
.app-run-result{padding:10px 12px;border-radius:10px;border:1px solid var(--border-default,#e5e7eb);background:var(--bg-elevated,#fafafa);font-size:13px;line-height:1.5}
.app-run-title{font-weight:600;margin-bottom:4px}
.app-run-list{margin:4px 0 8px;padding-left:18px}
.app-run-w{color:var(--text-muted,#6b7280);font-size:12px}
.app-run-actions{display:flex;gap:8px}
.app-run-fix{font:inherit;font-size:12.5px;padding:5px 12px;border-radius:7px;cursor:pointer;border:1px solid var(--accent,#2563eb);background:var(--accent,#2563eb);color:#fff}
.app-run-dismiss{font:inherit;font-size:12.5px;padding:5px 10px;border-radius:7px;cursor:pointer;border:1px solid var(--border-default,#e5e7eb);background:transparent;color:inherit}

/* ── Granskarens kontroller (app-run.js: openChecks) ─────────────────────── */
.apprun-checks-link { display: flex; justify-content: flex-start; margin: 4px 0 12px 44px; }
.apprun-chk-modal { max-width: 720px; width: 94vw; }
.apprun-chk-body { padding: 0 var(--space-lg, 20px); max-height: 62vh; overflow-y: auto; }
.apprun-chk-intro { color: var(--text-secondary, #666); font-size: 0.875rem; line-height: 1.5; margin: 0 0 14px; }
.apprun-chk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.apprun-chk { border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-md, 10px); padding: 12px 14px; background: var(--surface, #fff); }
.apprun-chk.is-off { opacity: 0.6; }
.apprun-chk-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.apprun-chk-badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; background: var(--surface-2, #f3f4f6); color: var(--text-secondary, #555); white-space: nowrap; }
.apprun-chk-badge.ok { background: color-mix(in srgb, var(--success, #16a34a) 14%, transparent); color: var(--success, #16a34a); }
.apprun-chk-badge.fail { background: color-mix(in srgb, var(--danger, #dc2626) 14%, transparent); color: var(--danger, #dc2626); }
.apprun-chk-steps { margin: 8px 0 0; padding-left: 20px; font-size: 0.8125rem; color: var(--text-secondary, #555); line-height: 1.55; }
.apprun-chk-why { margin: 8px 0 0; font-size: 0.8125rem; color: var(--danger, #dc2626); }
.apprun-chk-actions { display: flex; gap: 8px; margin-top: 10px; }
.apprun-chk-msg { margin: 12px 0 4px; font-size: 0.8125rem; color: var(--text-secondary, #555); }
.apprun-chk-msg.is-err { color: var(--danger, #dc2626); }
.apprun-chk-role { font-weight: 400; font-size: 0.8125rem; color: var(--text-secondary, #555); }
.app-run-time { margin-top: 6px; font-size: 0.75rem; color: var(--text-secondary, #666); }

/* ── Organisationsfunktioner: det organisationen inte har påslaget syns inte ──────────
   Klassen feat-<nyckel> sätts på <html> av Auth.applyFeatures (källa: /auth/me → features,
   styrs per organisation i Admin → Organisationer). Fail-closed: utan klassen är det gömt. */
html:not(.feat-design_mode) [data-feature="design_mode"] { display: none !important; }
/* Lägesväxlaren utan Design: tre lika kolumner, och tummen följer den synliga ordningen
   (Projekt är fortfarande nth-child(4) i DOM:en men står på plats tre). */
html:not(.feat-design_mode) .mode-switch:has([data-feature="design_mode"]) { grid-template-columns: repeat(3, 1fr); }
html:not(.feat-design_mode) .mode-switch:has([data-feature="design_mode"])::after { width: calc(33.3333% - 2px); }
html:not(.feat-design_mode) .mode-switch:has([data-feature="design_mode"]):has(.mode-switch-btn:nth-child(4).active)::after { transform: translateX(200%); }
html:not(.feat-mail) [data-feature="mail"] { display: none !important; }
html:not(.feat-sms) [data-feature="sms"] { display: none !important; }

/* ── Publicera: egen domän — åtgärdsrader + köp en domän (sep 2026) ── */
.pub-action-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; margin-bottom:6px; border-radius:var(--radius-sm); border:1px solid var(--border-subtle); background:var(--bg-inset); cursor:pointer; color:var(--text-primary); font-size:12px; font-family:inherit; transition:background .12s, border-color .12s; }
.pub-action-row:hover { background:var(--bg-hover, #eef1f6); border-color:var(--border-default, var(--border-subtle)); }
.pub-action-icon { display:inline-flex; color:var(--accent, #2563eb); flex-shrink:0; }
.pub-action-chev { display:inline-flex; color:var(--text-muted); flex-shrink:0; }
#pub-main[hidden], #pub-buy[hidden] { display:none !important; }
.pub-buy-head { display:flex; align-items:center; gap:10px; margin:-4px 0 12px; }
.pub-buy-back { display:inline-flex; align-items:center; gap:3px; background:none; border:none; padding:4px 6px 4px 0; color:var(--text-muted); cursor:pointer; font-size:12px; font-family:inherit; }
.pub-buy-back:hover { color:var(--text-primary); }
.pub-buy-title { font-size:13px; font-weight:600; color:var(--text-primary); }
.pub-buy-body { display:flex; flex-direction:column; }
.pub-buy-text { font-size:13px; line-height:1.5; color:var(--text-secondary, var(--text-primary)); margin:0 0 14px; }
.pub-buy-muted { font-size:12px; color:var(--text-muted); margin:0; }
.pub-buy-err { font-size:12px; line-height:1.45; color:var(--error); margin:8px 0 10px; }
.pub-buy-wide { width:100%; padding:10px; font-weight:600; font-size:13px; }
.pub-buy-search { display:flex; gap:6px; }
.pub-buy-search .form-input { flex:1; min-width:0; font-family:var(--font-mono); font-size:13px; }
.pub-buy-search .btn { display:inline-flex; align-items:center; justify-content:center; min-width:42px; }
.pub-buy-results { display:flex; flex-direction:column; gap:5px; margin-top:10px; max-height:260px; overflow-y:auto; }
.pub-buy-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 12px; border-radius:var(--radius-sm); border:1px solid var(--border-subtle); background:var(--bg-inset); cursor:pointer; font-family:inherit; color:var(--text-primary); transition:border-color .12s, background .12s; }
.pub-buy-row:hover { border-color:var(--accent, #2563eb); }
.pub-buy-row code { font-family:var(--font-mono); font-size:13px; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.pub-buy-row.is-taken { cursor:default; opacity:.6; background:transparent; }
.pub-buy-row.is-taken:hover { border-color:var(--border-subtle); }
.pub-buy-row.is-taken code { font-weight:500; }
.pub-buy-price { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.pub-buy-confirm { padding:14px; border-radius:var(--radius-sm); border:1px solid var(--border-subtle); background:var(--bg-inset); margin-bottom:12px; }
.pub-buy-domain { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--text-primary); }
.pub-buy-cost { font-size:18px; font-weight:600; margin-top:6px; color:var(--text-primary); }
.pub-buy-cost span { font-size:12px; font-weight:400; color:var(--text-muted); }
.pub-buy-check { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-primary); margin:0 0 10px; cursor:pointer; }
.pub-buy-list { margin:0 0 14px; padding-left:18px; font-size:12px; line-height:1.55; color:var(--text-muted); }

/* Mobil: projektnamnet i sidhuvudet hamnade under loggan ("rAinget"). Namnet syns
   redan i raden under sidhuvudet — i sidhuvudet får loggan och lägesväxlaren plats. */
@media (max-width: 720px) { .tb-name-zone { display: none !important; } }

/* ── Ikoner (js/icons.js) — ersätter emojis. 1em som standard, följer texten. ── */
.ui-icon { display: inline-block; flex: none; vertical-align: -0.14em; overflow: visible; }
.ui-icon-alert { color: var(--warning, #d97706); }
.ui-icon-check-circle { color: var(--success, #16a34a); }
.ui-icon-x-circle, .ui-icon-ban { color: var(--error, #dc2626); }
.ui-icon-dot-green { color: var(--success, #16a34a); }
.ui-icon-dot-red { color: var(--error, #dc2626); }
.ui-icon-dot-yellow { color: var(--warning, #d97706); }
.ui-icon-dot-blue { color: #3b82f6; }
.ui-icon-dot-purple { color: #8b5cf6; }
.ui-icon-dot-grey { color: var(--text-muted, #9ca3af); }
/* Tomlägen: ikonen var en stor emoji — samma storlek och dämpning som förut. */
.data-empty-icon, .fp-empty-icon, .ip-empty-icon, .empty-state-icon { color: var(--text-muted); }
.data-empty-icon .ui-icon, .fp-empty-icon .ui-icon, .ip-empty-icon .ui-icon, .empty-state-icon .ui-icon { width: 36px; height: 36px; }

/* ── myceon: ordmärke i gemener (ersätter rAi-symbolen tills vidare) ── */
.logo-wordmark {
  display: inline-block; font-family: inherit; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1; color: var(--brand-blue, var(--accent, #1F5CFF)); white-space: nowrap;
  text-transform: lowercase; user-select: none;
}
.logo .logo-wordmark, .pc-brand .logo-wordmark { font-size: 20px; height: auto; }
.login-logo .logo-wordmark { font-size: 34px; }
/* Publicera: miljöknapparna färgas helt av sitt läge — pricken följer textfärgen. */
#pub-env-prod .ui-icon, #pub-env-dev .ui-icon { color: currentColor; }

/* ── Organisationer (js/orgs.js) ─────────────────────────────────────────── */
.orgs-muted { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 0 0 10px; }
.orgs-list { display: flex; flex-direction: column; gap: 6px; max-width: 620px; }
.orgs-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface, transparent); }
.orgs-row.is-current { border-color: var(--accent, #2563eb); }
.orgs-row-main { flex: 1; min-width: 0; }
.orgs-row-name { font-size: 14px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgs-row-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.orgs-row-current { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--accent, #2563eb); }
.orgs-create { max-width: 620px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.orgs-create h4 { margin: 0 0 4px; font-size: 14px; }
.orgs-create-row { display: flex; gap: 8px; }
.orgs-create-row .form-input { flex: 1; min-width: 0; }
.orgs-error { color: var(--error); font-size: 12.5px; margin: 8px 0 0; }
.join-request-actions { display: flex; gap: 6px; flex: none; }
/* Väntevyn: ny användare utan organisation (förfrågan att gå med väntar) */
.join-wait-view { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg-base, #f4f5f7); }
.join-wait-card { width: 100%; max-width: 440px; background: var(--bg-surface, #fff); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 32px 28px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.join-wait-brand { text-align: center; margin-bottom: 18px; }
.join-wait-brand .logo-wordmark { font-size: 28px; }
.join-wait-card h2 { margin: 0 0 8px; font-size: 19px; color: var(--text-primary); }
.join-wait-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--text-secondary, var(--text-primary)); }
.join-wait-actions { display: flex; flex-direction: column; gap: 8px; }
.join-wait-actions .btn { width: 100%; justify-content: center; }
.join-wait-msg { margin: 12px 0 0 !important; font-size: 12.5px !important; color: var(--text-muted) !important; text-align: center; min-height: 1em; }
.join-request-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; margin-bottom: 6px; }
.join-request-item .invite-email { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.join-request-item .invite-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }