/* === BUNDLED CSS - Generert 2026-04-19 22:40 === */

/* ===== cssindex.css ===== */
/* ==========================================================================
   AI MEDICAL NOTES - COMPLETE CSS v7
   Comprehensive styling for medical note-taking application
   CSP-compliant, responsive, modern design
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL RESET, VARIABLES & BASE
   ========================================================================== */

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

html, body {
  height: 100%;
  font-family: 'Roboto', sans-serif;
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
}

:root {
  /* Primary Colors */
  --primary: #1976d2;
  --primary-light: #e3f2fd;
  --primary-dark: #0d47a1;
  --secondary: #00897b;
  
  /* Text Colors */
  --text-primary: #212121;
  --text-secondary: #424242;
  --text-muted: #757575;
  --text-on-primary: #ffffff;
  
  /* Border Colors */
  --border-light: #e0e0e0;
  --border-medium: #bdbdbd;
  
  /* Background Colors */
  --bg-page: #f4f6f8;
  --bg-light: #fafafa;
  --bg-white: #ffffff;
  --bg-hover: #f0f0f0;
  --bg-overlay: rgba(33, 33, 33, 0.65);
  
  /* Accent Colors */
  --accent-error: #d32f2f;
  --accent-success: #2e7d32;
  --accent-warning: #ff8f00;
  
  /* Status Colors */
  --status-draft-bg: #fffde7;
  --status-draft-text: #5d4037;
  --status-recording-bg: #ffebee;
  --status-recording-text: #b71c1c;
  --status-processing-bg: #e0f7fa;
  --status-processing-text: #006064;
  --status-completed-bg: #e8f5e9;
  --status-completed-text: #1b5e20;
  
  /* Shadows */
  --shadow-soft: 0 2px 4px rgba(0,0,0,0.08);
  --shadow-medium: 0 4px 10px rgba(0,0,0,0.12);
  --shadow-strong: 0 8px 20px rgba(0,0,0,0.15);
  
  /* Border Radius */
  --main-border-radius: 6px;
  --modal-border-radius: 12px;
  
  /* Layout */
  --header-height: 68px;
  --sidebar-width: 340px;

  color-scheme: light;
}

/* ==========================================================================
   DARK MODE — TEMA SYSTEM
   Aktiveres når html[data-theme="dark"] settes av js/theme-service.js.
   Default er light (ingen attributt). Backend-innstilling kontrollerer.
   Overstyrer alle token-namespaces (main, agent, fritekst, js, video, lm).
   ========================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;

  /* === Main namespace === */
  --primary: #4a9eff;
  --primary-light: #1e3a5f;
  --primary-dark: #82b8ff;
  --secondary: #4db6ac;

  --text-primary: #e8eaed;
  --text-secondary: #c4c7cb;
  --text-muted: #9aa0a6;
  --text-on-primary: #ffffff;

  --border-light: #2d333b;
  --border-medium: #424a52;

  --bg-page: #0d1117;
  --bg-light: #161b22;
  --bg-white: #1c2128;
  --bg-hover: #262c36;
  --bg-overlay: rgba(0, 0, 0, 0.75);

  --accent-error: #f85149;
  --accent-success: #56d364;
  --accent-warning: #d29922;

  --status-draft-bg: #2a2410;
  --status-draft-text: #fcd34d;
  --status-recording-bg: #2d1818;
  --status-recording-text: #fca5a5;
  --status-processing-bg: #0e2730;
  --status-processing-text: #67e8f9;
  --status-completed-bg: #0f2c1a;
  --status-completed-text: #86efac;

  --shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-medium: 0 4px 10px rgba(0, 0, 0, 0.5);
  --shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.6);

  /* === Agent namespace (clinical-assistant) === */
  --agent-primary: #4a9eff;
  --agent-primary-light: #82b8ff;
  --agent-primary-dark: #1e3a5f;
  --agent-surface: #1c2128;
  --agent-surface-variant: #21262d;
  --agent-surface-dim: #161b22;
  --agent-border: #30363d;
  --agent-border-light: #21262d;
  --agent-text-primary: #e8eaed;
  --agent-text-secondary: #c4c7cb;
  --agent-text-tertiary: #9aa0a6;
  --agent-accent: #4a9eff;
  --agent-accent-light: #1e3a5f;

  /* Fritekst-tokens er definert på .fritekst-modal-container (ikke :root) i
     fritekst.css. De overstyres derfor i en separat blokk lenger ned i
     denne filen for å treffe riktig CSS-scope. */

  /* === Journal Summary (js-) namespace === */
  --js-primary: #94a3b8;
  --js-primary-light: #cbd5e1;
  --js-primary-dark: #64748b;
  --js-primary-darker: #475569;
  --js-accent: #60a5fa;
  --js-accent-light: #93c5fd;
  --js-accent-dark: #3b82f6;
  --js-success: #34d399;
  --js-success-light: #1f3d2f;
  --js-warning: #fbbf24;
  --js-warning-light: #3d2f0f;
  --js-error: #f87171;
  --js-error-light: #3d1818;
  --js-bg-page: #0d1117;
  --js-bg-card: #1c2128;
  --js-bg-elevated: #21262d;
  --js-border: #2d333b;
  --js-border-light: #21262d;
  --js-text-primary: #e8eaed;
  --js-text-secondary: #c4c7cb;
  --js-text-muted: #9aa0a6;
  --js-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --js-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);

  /* === Video namespace === */
  --video-primary: #4a9eff;
  --video-primary-dark: #82b8ff;
  --video-primary-darker: #b3d4ff;
  --video-success: #56d364;
  --video-success-dark: #34d399;
  --video-success-light: #86efac;
  --video-warning: #fbbf24;
  --video-warning-dark: #f59e0b;
  --video-danger: #f87171;
  --video-danger-dark: #f85149;
  --video-bg-gradient: linear-gradient(135deg, #0d1117 0%, #1c2128 100%);
  --video-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  --video-card-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.6);

  /* === Legemiddel (lm-) namespace === */
  --lm-identical: #0f2c1a;
  --lm-identical-border: #1f4d2e;
  --lm-identical-text: #86efac;
  --lm-identical-icon: #56d364;
  --lm-added: #0e1f3a;
  --lm-added-border: #1e3a5f;
  --lm-added-text: #93c5fd;
  --lm-added-icon: #4a9eff;
  --lm-removed: #2d1818;
  --lm-removed-border: #4d2828;
  --lm-removed-text: #fca5a5;
  --lm-removed-icon: #f87171;
  --lm-changed: #2d2410;
  --lm-changed-border: #4d3e1c;
  --lm-changed-text: #fbbf24;
  --lm-changed-icon: #fcd34d;
}

/* === Fritekst-tokens: scopet til .fritekst-modal-container ===
   Fritekst.css definerer alle --fritekst-*-tokens på selve container-elementet
   istedenfor :root. CSS-variabler er scopet, så :root-overstyringer treffer
   ikke. Vi må overstyre på samme element-nivå. */
html[data-theme="dark"] .fritekst-modal-container {
  --fritekst-primary: #4a9eff;
  --fritekst-primary-light: #1e3a5f;
  --fritekst-primary-dark: #82b8ff;
  --fritekst-secondary: #4db6ac;
  --fritekst-accent-success: #56d364;
  --fritekst-accent-warning: #fbbf24;
  --fritekst-accent-error: #f85149;
  --fritekst-accent-info: #94a3b8;
  --fritekst-text-primary: #e8eaed;
  --fritekst-text-secondary: #c4c7cb;
  --fritekst-text-muted: #9aa0a6;
  --fritekst-text-on-primary: #ffffff;
  --fritekst-border-light: #2d333b;
  --fritekst-border-medium: #424a52;
  --fritekst-bg-page: #0d1117;
  --fritekst-bg-light: #161b22;
  --fritekst-bg-white: #1c2128;
  --fritekst-bg-overlay: rgba(0, 0, 0, 0.75);
  --fritekst-chat-area-bg: #0d1117;
  --fritekst-user-bubble-bg: linear-gradient(135deg, #4a9eff, #1e40af);
  --fritekst-user-bubble-text: #ffffff;
  --fritekst-assistant-bubble-bg: #1c2128;
  --fritekst-assistant-bubble-text: #e8eaed;
  --fritekst-system-message-text: #9aa0a6;
  --fritekst-shadow-soft: 0 2px 4px rgba(0,0,0,0.4);
  --fritekst-shadow-medium: 0 4px 10px rgba(0,0,0,0.5);
  --fritekst-shadow-strong: 0 8px 25px rgba(0,0,0,0.6);
}

/* Mykt bytte mellom temaene — kun farge-egenskaper, ingen layout-egenskaper. */
html.theme-transition,
html.theme-transition body,
html.theme-transition *:not(.material-icons):not(svg):not(svg *) {
  transition: background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease,
              fill 0.25s ease, stroke 0.25s ease !important;
}

/* ==========================================================================
   2. UTILITY & STATE CLASSES
   ========================================================================== */

.is-hidden { display: none !important; }
.is-visible { display: block !important; }
.is-active { /* Base active state */ }

.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-danger { color: var(--accent-error) !important; }
.text-success { color: var(--accent-success) !important; }
.text-warning { color: var(--accent-warning) !important; }
.text-small { font-size: 0.875rem !important; }
.text-center { text-align: center !important; }

.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mt-1 { margin-top: 0.5rem !important; }
.full-width { width: 100% !important; }

/* ==========================================================================
   3. LAYOUT & STRUCTURE
   ========================================================================== */

/* Header */
header {
  background-color: var(--primary);
  color: var(--text-on-primary);
  padding: 0.8rem 1.5rem;
  box-shadow: var(--shadow-medium);
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--header-height);
}

.header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-logo {
  height: 36px;
  width: auto;
  flex-shrink: 0;
}

.header-left h1 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-button {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: inherit;
  border-radius: var(--main-border-radius);
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.header-button:hover {
  background-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.mobile-header-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: inherit;
  border-radius: var(--main-border-radius);
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mobile-header-btn:hover {
  background-color: rgba(255,255,255,0.25);
  transform: translateY(-1px);
}

.mobile-header-btn .material-icons {
  font-size: 1.1rem;
}

.icon-button {
  background: none;
  border: none;
  color: inherit;
  padding: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  width: 40px;
  height: 40px;
}

.icon-button:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.15);
}

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

.icon-button.status-active {
  background-color: rgba(255, 255, 255, 0.2);
}

/* User Info */
.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 1rem;
  flex-shrink: 0;
}

/* User menu dropdown */
.user-menu-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  transition: background 0.2s;
  font-size: 0.85rem;
}
.user-menu-trigger:hover {
  background: rgba(255,255,255,0.15);
}
.user-menu-arrow {
  font-size: 1.2rem !important;
  opacity: 0.7;
  transition: transform 0.2s;
}
.user-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--bg-white);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 9999;
  overflow: hidden;
  animation: userMenuSlide 0.15s ease-out;
}
.user-menu-dropdown.is-open {
  display: block;
}
@keyframes userMenuSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.user-menu-email {
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  word-break: break-all;
}
.user-menu-divider {
  margin: 0;
  border: none;
  border-top: 1px solid #e2e8f0;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: #334155;
  transition: background 0.15s;
}
.user-menu-item:hover {
  background: var(--bg-hover);
}
.user-menu-item .material-icons {
  font-size: 1.15rem;
  color: var(--text-muted);
}
.user-menu-logout {
  color: #dc2626;
}
.user-menu-logout .material-icons {
  color: #dc2626;
}
.user-menu-logout:hover {
  background: #fef2f2;
}
.user-menu-facebook {
  text-decoration: none;
  color: #334155;
}
.user-menu-facebook .material-icons {
  color: #1877f2;
}

/* Main Container */
.container {
  display: flex;
  height: calc(100vh - var(--header-height));
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-white);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  flex-shrink: 0;
  overflow-y: auto;
}

.sidebar-header {
  margin-bottom: 1rem;
}

.primary-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sidebar-btn {
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-weight: 500;
  transition: all 0.2s;
  box-shadow: var(--shadow-soft);
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--main-border-radius);
  border: 1px solid transparent;
  background: var(--bg-white);
  color: var(--text-primary);
}

.sidebar-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.sidebar-btn.new-consult {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary-dark);
}

.sidebar-btn.new-consult:hover:not(:disabled) {
  background: var(--primary-dark);
}

.sidebar-btn.browse-instructions {
  background: var(--secondary);
  color: var(--text-on-primary);
  border-color: #00695c;
}

.sidebar-btn.browse-instructions:hover:not(:disabled) {
  background: #00695c;
}

.sidebar-divider {
  height: 1px;
  background-color: var(--border-light);
  margin: 1rem 0;
}

/* Main Content Area */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--bg-light);
  overflow-y: auto;
}

/* ==========================================================================
   4. CONSULTATION LIST
   ========================================================================== */

.consultation-filter {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.filter-btn {
  flex: 1;
  padding: 0.5rem;
  border-radius: 20px;
  background: var(--bg-white);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  font-size: 0.85rem;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background-color: var(--primary-light);
}

.filter-btn.is-active {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: var(--primary);
  box-shadow: var(--shadow-soft);
  font-weight: 700;
}

.consultation-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.consultation-item {
  padding: 0.8rem 1rem;
  margin-bottom: 0.75rem;
  border-radius: var(--main-border-radius);
  background: var(--bg-white);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: all 0.2s;
  border-left: 5px solid transparent;
  position: relative;
}

.consultation-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-medium);
}

.consultation-item.is-active {
  background: var(--primary-light);
  border-left-color: var(--primary);
}

.consultation-item-content {
  padding-right: 2rem; /* Space for delete button */
}

.consultation-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.consultation-name {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.content-indicator {
  font-size: 1rem;
  color: var(--primary);
}

.consultation-status {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.status-draft {
  background: var(--status-draft-bg);
  color: var(--status-draft-text);
}

.status-recording {
  background: var(--status-recording-bg);
  color: var(--status-recording-text);
}

.status-processing {
  background: var(--status-processing-bg);
  color: var(--status-processing-text);
}

.status-completed {
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}

.patient-info {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0.25rem 0;
  font-style: italic;
}

.consultation-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.consultation-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.consultation-instruction {
  font-size: 0.75rem;
  color: var(--secondary);
  background: rgba(0, 137, 123, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
}

.delete-consultation-icon-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
  padding: 0.25rem;
  border-radius: 4px;
  z-index: 1;
}

.consultation-item:hover .delete-consultation-icon-btn {
  opacity: 1;
}

.delete-consultation-icon-btn:hover {
  color: var(--accent-error);
  background: rgba(211, 47, 47, 0.1);
}

/* Consultation List States */
.consultation-list-loading,
.consultation-list-empty-filter,
.consultation-list-locked,
.consultation-list-error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  min-height: 200px;
}

.loading-state-container,
.empty-filter-container,
.locked-state-container,
.error-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.locked-icon,
.empty-icon,
.error-icon {
  font-size: 3rem;
  color: var(--text-muted);
}

.locked-icon {
  color: var(--accent-warning);
}

.error-icon {
  color: var(--accent-error);
}

/* ==========================================================================
   5. MAIN SETTINGS PANEL
   ========================================================================== */

.settings-main {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  align-items: start;
}

.setting-group {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.setting-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  min-height: 24px;
}

.setting-header {
  margin: 0;
  font-weight: 500;
  font-size: 0.9rem;
}

.header-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  height: 24px;
}

.small-icon-btn {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--main-border-radius);
  padding: 0.4rem;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  width: 32px;
  height: 24px;
  flex-shrink: 0;
}

.small-icon-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.small-icon-btn .material-icons {
  font-size: 1rem;
}

/* Instruction Selector */
.instruction-selector {
  position: relative;
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  height: 45px;
}

.instruction-selector .input-like {
  flex: 1;
  margin: 0;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.instruction-selector .input-like:hover {
  border-color: var(--primary);
  background-color: var(--bg-light);
}

.dropdown-icon-btn {
  background: var(--bg-hover);
  border: 1px solid var(--border-medium);
  border-radius: var(--main-border-radius);
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 90px; /* OPPDATERT: Økt fra 45px til 90px for å gi plass til tekst */
  height: 45px;
  flex-shrink: 0;
}

.dropdown-icon-btn:hover:not(:disabled) {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
  transform: translateY(-1px);
}

.dropdown-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dropdown-icon-btn .material-icons {
  font-size: 1.1rem; /* OPPDATERT: Redusert fra 1.2rem for bedre balanse med tekst */
}

/* Input Fields */
.patient-info-input,
.additional-text-input {
  min-height: 80px;
  max-height: 120px;
  resize: vertical;
  flex: 1;
}

.input-like {
  min-height: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  padding: 0.75rem;
  flex: 1;
  background: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--main-border-radius);
  font-size: 0.95rem;
}

/* Styling når ingen notatmal er valgt */
#instructionNameDisplay.no-instruction-selected {
  background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
  border: 2px dashed #f59e0b;
  color: #92400e;
  font-weight: 500;
  position: relative;
}

#instructionNameDisplay.no-instruction-selected::before {
  content: '⚠';
  margin-right: 8px;
  font-size: 1rem;
}

#instructionNameDisplay.no-instruction-selected:hover {
  background: linear-gradient(135deg, #fde68a 0%, #fef08a 100%);
  border-color: #d97706;
  cursor: pointer;
}

/* Når mal ER valgt - grønn indikator */
#instructionNameDisplay.instruction-selected {
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
  border: 1px solid #10b981;
  color: #065f46;
  font-weight: 500;
}

#instructionNameDisplay.instruction-selected::before {
  content: '✓';
  margin-right: 8px;
  color: #10b981;
}

/* ==========================================================================
   6. CONTROLS & BUTTONS
   ========================================================================== */

.controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.controls .button {
  flex-shrink: 0;
}

.controls-spacer {
  flex-grow: 1;
}

.status-indicators {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Button Styles */
.button {
  background: var(--primary);
  color: var(--text-on-primary);
  border: 1px solid transparent;
  padding: 0.6rem 1rem;
  border-radius: var(--main-border-radius);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}

.button:hover:not(:disabled) {
  filter: brightness(110%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.button:disabled {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
  transform: none !important;
}

.button.secondary {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.button.secondary:hover:not(:disabled) {
  background-color: #e0e0e0;
}

.button.primary {
  background: var(--primary);
  color: var(--text-on-primary);
  font-weight: 600;
}

.button.danger {
  background-color: var(--accent-error);
  color: var(--text-on-primary);
}

.button.danger:hover:not(:disabled) {
  background-color: #c62828;
}

.button.small {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.button.record {
  background: var(--accent-error);
}

.button.pause {
  background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%);
  color: var(--text-primary);
  border: 1px solid #ff8f00;
}
.button.record:disabled {
  background: var(--accent-error) !important; /* Behold original rød */
  opacity: 0.4 !important; /* Matt men fortsatt rød */
  cursor: not-allowed !important;
  pointer-events: none;
}
.button.pause:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff8f00 0%, #f57c00 100%);
}

.button.pause:disabled {
  background: #ffd54f;
  opacity: 0.6;
}

.button.dictate-button {
  background-color: var(--accent-error);
  color: var(--text-on-primary);
}

.button.dictate-button:hover:not(:disabled) {
  background-color: #b71c1c;
}

.button.is-active,
.dictate-button.is-active {
  background-color: var(--accent-error) !important;
  animation: pulse-red 1.5s infinite;
}

/* Action Buttons in Response Header */
.response-header-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  overflow: visible;
  padding: 4px 0;
}

.response-header-actions .action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  height: 34px;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid #dce3ed;
  background: var(--bg-hover);
  color: #3a4a5c;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
  font-family: inherit;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.response-header-actions .action-btn:hover:not(:disabled) {
  background: #dfe8f3;
  border-color: #c5d1e0;
  color: #1d2d3f;
  box-shadow: 0 2px 6px rgba(25, 118, 210, 0.1);
  transform: translateY(-1px);
}

.response-header-actions .action-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  background: #d5dfed;
}

.response-header-actions .action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.response-header-actions .action-btn .material-icons {
  font-size: 1rem;
  margin-right: 0;
  opacity: 0.55;
  color: #5a7394;
  transition: opacity 0.15s ease;
}

.response-header-actions .action-btn:hover:not(:disabled) .material-icons {
  opacity: 1;
}

.response-header-actions .action-btn.primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
  font-weight: 600;
}

.response-header-actions .action-btn.primary .material-icons {
  opacity: 0.9;
  color: var(--text-on-primary);
}

.response-header-actions .action-btn.primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--text-on-primary);
  box-shadow: 0 3px 10px rgba(25, 118, 210, 0.3);
}

.response-header-actions .action-btn.primary:active:not(:disabled) {
  background: #1565c0;
}

/* ==========================================================================
   7. STATUS DISPLAYS
   ========================================================================== */

.status-display {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  background-color: var(--bg-hover);
  border: 1px solid var(--border-light);
}

.status-display .status-icon {
  font-size: 1rem;
}

#dictateStatusInline {
  background-color: var(--status-recording-bg);
  color: var(--status-recording-text);
  border-color: #d32f2f;
}

.recording-indicator {
  width: 10px;
  height: 10px;
  background: var(--accent-error);
  border-radius: 50%;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

@keyframes pulse-red {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* ==========================================================================
   8. LANGUAGE SELECTOR
   ========================================================================== */

.language-selector-container {
  display: flex;
  align-items: center;
}

.styled-select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.8rem;
  background-color: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--main-border-radius);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s;
  box-shadow: var(--shadow-soft);
}

.styled-select-wrapper:hover {
  border-color: var(--primary);
}

.styled-select-wrapper .select-prefix-icon {
  color: var(--text-secondary);
  margin-right: 0.5rem;
}

.styled-select-text-display {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0.25rem;
}

select.styled-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ==========================================================================
   9. FORM ELEMENTS
   ========================================================================== */

.input, textarea, select {
  width: 100%;
  border: 1px solid var(--border-medium);
  border-radius: var(--main-border-radius);
  padding: 0.75rem;
  font-size: 0.95rem;
  background-color: var(--bg-white);
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.input:disabled, textarea:disabled, select:disabled {
  background-color: var(--bg-light);
  color: var(--text-muted);
  cursor: not-allowed;
}

textarea {
  resize: vertical;
  min-height: 100px;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.form-help {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
  margin-top: 0.25rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* PIN Input */
.pin-input-wrapper {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
}

.pin-input {
  width: 150px;
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0.5em;
  font-family: monospace;
}

/* ==========================================================================
   10. DROPDOWNS
   ========================================================================== */

.instruction-dropdown-list,
.dictate-instructions-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--main-border-radius);
  box-shadow: var(--shadow-medium);
  max-height: 300px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  list-style: none;
  padding: 0;
  margin: 0;
}

.instruction-dropdown-list.is-visible,
.dictate-instructions-dropdown-list.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.instruction-dropdown-header,
.dictate-instructions-dropdown-header {
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: var(--bg-light);
}

.instruction-dropdown-item,
.dictate-instructions-dropdown-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.instruction-dropdown-item:hover,
.dictate-instructions-dropdown-item:hover {
  background-color: var(--primary-light);
  color: var(--primary-dark);
}

.dictate-instructions-dropdown-item .material-icons {
  font-size: 1rem;
  color: var(--text-secondary);
}

.dictate-instructions-dropdown-item:hover .material-icons {
  color: var(--primary-dark);
}

.instruction-dropdown-empty,
.dictate-instructions-dropdown-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Knapp for å åpne bibliotek fra tom dropdown */
.dropdown-open-library-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  margin-top: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropdown-open-library-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Dictate Instructions Display */
.dictate-instructions-selector {
  position: relative;
  display: flex;
  align-items: center;
}

.dictate-instructions-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background-color: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--main-border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow: var(--shadow-soft);
  min-width: 180px;
  height: 45px;
}

.dictate-instructions-display:hover {
  border-color: var(--primary);
  background-color: var(--bg-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.dictate-instructions-display .material-icons {
  font-size: 1.2rem;
  color: var(--text-secondary);
}

.dictate-instructions-display .dropdown-arrow {
  color: var(--text-muted);
  margin-left: auto;
  font-size: 1.4rem;
  transition: transform 0.2s ease;
}

.dictate-instructions-display:hover .dropdown-arrow {
  color: var(--primary);
  transform: translateY(1px);
}

/* ==========================================================================
   11. RESPONSE SECTION
   ========================================================================== */

.response-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border-radius: var(--main-border-radius);
  padding: 1.25rem;
  padding-top: 2.75rem;
  min-height: 0;
  overflow: visible;
}

.response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.response-title {
  font-weight: 500;
  font-size: 1.1rem;
}

#responseBox {
  flex: 1;
  border: 1px solid var(--border-light);
  border-radius: var(--main-border-radius);
  background: var(--bg-light);
  padding: 1rem;
  font-size: 0.95rem;
  resize: none;
  min-height: 200px;
}

/* ==========================================================================
   12. REFERRAL BUTTONS
   ========================================================================== */

.referral-actions-container {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%);
  border: 1px solid #d1e7f0;
  border-radius: var(--main-border-radius);
  box-shadow: var(--shadow-soft);
}

.referral-actions-container h4 {
  margin: 0 0 1rem 0;
  color: var(--primary-dark);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.referral-actions-container h4::before {
  content: "📋";
  font-size: 1.2rem;
}

.referral-buttons-wrapper {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.referral-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
  color: white !important;
  border: 1px solid #45a049 !important;
  padding: 0.7rem 1.2rem !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 3px 8px rgba(76, 175, 80, 0.3) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.referral-btn:hover {
  background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4) !important;
}

.referral-btn:active {
  transform: translateY(0px) !important;
  box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3) !important;
}

.referral-btn .material-icons {
  font-size: 1.1rem !important;
  margin-right: 0.5rem !important;
}

/* Category-specific colors */
.referral-btn[data-category="radiologi"] {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important;
  border-color: #1976D2 !important;
  box-shadow: 0 3px 8px rgba(33, 150, 243, 0.3) !important;
}

.referral-btn[data-category="radiologi"]:hover {
  background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%) !important;
  box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4) !important;
}

.referral-btn[data-category="ortopedi"] {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%) !important;
  border-color: #F57C00 !important;
  box-shadow: 0 3px 8px rgba(255, 152, 0, 0.3) !important;
}

.referral-btn[data-category="ortopedi"]:hover {
  background: linear-gradient(135deg, #F57C00 0%, #E65100 100%) !important;
  box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4) !important;
}

.referral-btn[data-category="kardiologi"] {
  background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%) !important;
  border-color: #C2185B !important;
  box-shadow: 0 3px 8px rgba(233, 30, 99, 0.3) !important;
}

.referral-btn[data-category="kardiologi"]:hover {
  background: linear-gradient(135deg, #C2185B 0%, #AD1457 100%) !important;
  box-shadow: 0 5px 15px rgba(233, 30, 99, 0.4) !important;
}

.referral-btn[data-category="psykiatri_dps"] {
  background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%) !important;
  border-color: #7B1FA2 !important;
  box-shadow: 0 3px 8px rgba(156, 39, 176, 0.3) !important;
}

.referral-btn[data-category="psykiatri_dps"]:hover {
  background: linear-gradient(135deg, #7B1FA2 0%, #6A1B9A 100%) !important;
  box-shadow: 0 5px 15px rgba(156, 39, 176, 0.4) !important;
}

.referral-btn[data-category="nevrologi"] {
  background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%) !important;
  border-color: #512DA8 !important;
  box-shadow: 0 3px 8px rgba(103, 58, 183, 0.3) !important;
}

.referral-btn[data-category="nevrologi"]:hover {
  background: linear-gradient(135deg, #512DA8 0%, #4527A0 100%) !important;
  box-shadow: 0 5px 15px rgba(103, 58, 183, 0.4) !important;
}

.referral-btn[data-category="annet"] {
  background: linear-gradient(135deg, #607D8B 0%, #455A64 100%) !important;
  border-color: #455A64 !important;
  box-shadow: 0 3px 8px rgba(96, 125, 139, 0.3) !important;
}

.referral-btn[data-category="annet"]:hover {
  background: linear-gradient(135deg, #455A64 0%, #37474F 100%) !important;
  box-shadow: 0 5px 15px rgba(96, 125, 139, 0.4) !important;
}

@keyframes referralPulse {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.referral-btn {
  animation: referralPulse 0.6s ease-out;
}

/* ==========================================================================
   13. EMPTY STATE
   ========================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 2rem;
}

.empty-state .material-icons {
  font-size: 4rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.empty-state h3 {
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.empty-state p {
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
  max-width: 400px;
}

/* ==========================================================================
   14. LOADING & SPINNER
   ========================================================================== */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
}

.spinner {
  border: 4px solid var(--bg-hover);
  border-top: 4px solid var(--primary);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  animation: spin 1s linear infinite;
}

.spinner.small {
  width: 22px;
  height: 22px;
  border-width: 3px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10;
}

/* ==========================================================================
   15. NOTIFICATIONS
   ========================================================================== */

.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #323232;
  color: white;
  padding: 12px 16px;
  border-radius: 4px;
  z-index: 1100;
  transform: translateY(120px);
  opacity: 0;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-strong);
  max-width: 400px;
}

.notification.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Notification over fullskjerms-modaler (f.eks. Fritekst KI) */
.notification.notification-top {
  bottom: auto;
  top: 20px;
  z-index: 100000;
  transform: translateY(-120px);
}

.notification.notification-top.is-visible {
  transform: translateY(0);
}

.notification.theme-info { background-color: #0288d1 !important; }
.notification.theme-success { background-color: #4caf50 !important; }
.notification.theme-error { background-color: #f44336 !important; }
.notification.theme-warning { background-color: #ff9800 !important; }

.notification .material-icons {
  font-size: 1.2rem;
}

.notification-message {
  flex: 1;
}

/* ==========================================================================
   16. MODALS
   ========================================================================== */

.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-overlay);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.modal.is-open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition-delay: 0s;
}

.modal-content {
  background-color: var(--bg-white);
  border-radius: var(--modal-border-radius);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-strong);
  transform: translateY(20px);
  transition: transform 0.25s ease-out;
}

.modal.is-open .modal-content {
  transform: translateY(0);
}

.modal-content.wide {
  max-width: 1100px;
}

.modal-content.narrow {
  max-width: 500px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.modal-title {
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0;
}

.modal-header .close {
  color: var(--text-muted);
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0.25rem;
  border-radius: 4px;
}

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

.modal-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-light);
  background-color: var(--bg-light);
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e8ecf1;
  background-color: #f8f9fb;
}

.modal-footer .button.secondary {
  background: var(--bg-hover);
  color: #3a4a5c;
  border: 1px solid #dce3ed;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.15s ease;
}

.modal-footer .button.secondary:hover:not(:disabled) {
  background: #dfe8f3;
  border-color: #c5d1e0;
  color: #1d2d3f;
  box-shadow: 0 2px 6px rgba(25, 118, 210, 0.1);
  transform: translateY(-1px);
}

.modal-footer .button.secondary .material-icons {
  color: #5a7394;
}

.modal-footer .button.primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border: 1px solid var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.modal-footer .button.primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 3px 10px rgba(25, 118, 210, 0.3);
  transform: translateY(-1px);
}

/* ==========================================================================
   17. SETTINGS MODAL
   ========================================================================== */

.settings-modal-body {
  display: flex;
  padding: 0;
  flex-direction: column;
}

.settings-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.5rem 0;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-page);
}

.settings-tab-btn {
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-tab-btn:hover {
  color: var(--primary);
  background: var(--primary-light);
}

.settings-tab-btn.is-active {
  background-color: var(--bg-white);
  color: var(--primary);
  border-color: var(--border-light);
  box-shadow: var(--shadow-soft);
}

.settings-content {
  padding: 2rem;
  overflow-y: auto;
  flex-grow: 1;
}

.settings-section {
  margin-bottom: 2.5rem;
}

.settings-section h3 {
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0.5rem;
}

.settings-section h4 {
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.settings-section .section-description {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: -0.25rem;
  margin-bottom: 1.5rem;
}

/* Data Status */
.unified-data-status {
  margin: 1rem 0;
}

.data-status-card {
  padding: 1.5rem;
  border-radius: var(--main-border-radius);
  border: 2px solid;
  transition: all 0.2s;
}

.data-status-card.status-locked {
  border-color: var(--accent-warning);
  background: linear-gradient(135deg, #fff9c4 0%, #ffecb3 100%);
}

.data-status-card.status-unlocked {
  border-color: var(--accent-success);
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.status-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.status-header .material-icons {
  font-size: 1.5rem;
}

.status-header h4 {
  margin: 0;
  font-size: 1.1rem;
}

.status-details p {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.data-summary {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.status-actions {
  margin-top: 1rem;
}

.data-locked-state {
  text-align: center;
  padding: 2rem;
  background: var(--primary-light);
  border-radius: var(--main-border-radius);
  margin-top: 1.5rem;
}

.locked-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.locked-message .material-icons {
  font-size: 3rem;
  color: var(--primary-dark);
}

.locked-message h4 {
  color: var(--primary-dark);
  margin: 0;
}

/* Azure Config Form */
.azure-config-form {
  background: var(--bg-white);
  padding: 1.5rem;
  border-radius: var(--main-border-radius);
  border: 1px solid var(--border-light);
}

.connection-status {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: var(--main-border-radius);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.connection-status.success {
  background: var(--status-completed-bg);
  color: var(--status-completed-text);
}

.connection-status.error {
  background: var(--status-recording-bg);
  color: var(--status-recording-text);
}

/* Security Section */
.security-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--bg-white);
  border-radius: var(--main-border-radius);
  border: 1px solid var(--border-light);
}

.pin-change-form {
  max-width: 300px;
}

.pin-change-form .input {
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.3em;
}

.security-actions,
.maintenance-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Danger Zone */
.danger-zone {
  border: 2px solid var(--accent-error);
  border-radius: var(--main-border-radius);
  padding: 1.5rem;
  background-color: #fff5f5;
}

.danger-zone h4 {
  color: var(--accent-error);
}

.danger-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Storage Stats */
.storage-info {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--bg-light);
  border-radius: var(--main-border-radius);
}

.storage-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.storage-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: var(--bg-white);
  border-radius: 4px;
}

.stat-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.stat-value {
  font-weight: 600;
  color: var(--primary);
}

/* ==========================================================================
   18. INSTRUCTION LIBRARY MODAL
   ========================================================================== */

#instructionsModal .modal-content {
  max-width: 1200px;
  height: 85vh;
  max-height: 85vh;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Profesjonell header for instruksjonsbibliotek */
#instructionsModal .modal-header {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  padding: 1rem 1.5rem;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#instructionsModal .modal-header .modal-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#instructionsModal .modal-header .close {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #ffffff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

#instructionsModal .modal-header .close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

#instructionsModal .instruction-modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-light);
}

.main-tabs {
  display: flex;
  background: var(--bg-white);
  padding: 0 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  gap: 0;
  flex-shrink: 0;
}

.main-tab-btn {
  padding: 1rem 1.5rem;
  border: none;
  background: transparent;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.9375rem;
  transition: all 0.2s;
  position: relative;
}

.main-tab-btn:hover {
  color: #2563eb;
  background: var(--bg-light);
}

.main-tab-btn.is-active {
  color: #2563eb;
  font-weight: 600;
  border-bottom-color: #2563eb;
  background: var(--bg-white);
}

.sub-tabs {
  display: flex;
  background: var(--bg-white);
  padding: 0 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  gap: 0.5rem;
  flex-shrink: 0;
}

.sub-tab-btn {
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.875rem;
  transition: all 0.2s;
  margin: 0.5rem 0;
}

.sub-tab-btn:hover {
  color: #2563eb;
  background: #eff6ff;
}

.sub-tab-btn.is-active {
  color: #ffffff !important;
  background: #2563eb !important;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

.instruction-view-container {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  min-height: 0;
}

.view-content {
  display: none;
}

.view-content.is-active {
  display: block !important;
}

/* Instruction List Grid */
#instructionListContent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
}

.instruction-item-card {
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  position: relative;
}

.instruction-item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #3b82f6;
}

.instruction-card-header {
  margin-bottom: 0.75rem;
}

.instruction-card-title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.instruction-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.instruction-badge {
  font-size: 0.6875rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.badge-published {
  background: #dcfce7;
  color: #166534;
}

.badge-draft {
  background: #fef3c7;
  color: #92400e;
}

.badge-category {
  background: #dbeafe;
  color: #1e40af;
}

.instruction-card-body {
  flex-grow: 1;
}

.instruction-description {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.instruction-content-preview {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.875rem;
  padding: 0.75rem;
  background: var(--bg-light);
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  white-space: pre-wrap;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  max-height: 80px;
  overflow: hidden;
  line-height: 1.5;
}

.instruction-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.instruction-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #f59e0b;
}

.instruction-rating .material-icons {
  font-size: 1rem;
}

/* Favoritt-stjerne - KUN inne i instruction cards */
.instruction-item-card .fav-toggle {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0;
  border-radius: 50%;
  transition: all 0.2s ease;
  z-index: 2;
  line-height: 1;
  opacity: 1;
}
.instruction-item-card .fav-toggle .material-icons {
  font-size: 1.3rem;
}
.instruction-item-card .fav-toggle:hover {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  transform: scale(1.15);
}
.instruction-item-card .fav-toggle.is-fav {
  color: #fbbf24;
  filter: drop-shadow(0 1px 2px rgba(251, 191, 36, 0.3));
}
.instruction-item-card .fav-toggle.is-fav:hover {
  color: #d97706;
}

/* Favoritt-toggle håndteres nå med .fav-toggle */

.instruction-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

.instruction-list-empty .material-icons {
  font-size: 4rem;
  margin-bottom: 1rem;
}

/* AI Collaboration */
.ai-collaborate-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 1.5rem;
}

.ai-collaborate-header {
  flex-shrink: 0;
  padding: 1.5rem 0 0 0;
}

.ai-collaborate-header h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ai-collaborate-header h4::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  border-radius: 2px;
}

.ai-collaborate-header p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin: 0;
}

.ai-collaborate-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  flex-grow: 1;
  min-height: 0;
}

.ai-chat-section,
.ai-preview-section {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ai-chat-header,
.ai-preview-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-light);
  flex-shrink: 0;
}

.ai-chat-header h5,
.ai-preview-header h5 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-chat-header h5::before {
  content: '💬';
  font-size: 1rem;
}

.ai-preview-header h5::before {
  content: '📄';
  font-size: 1rem;
}

.ai-chat-messages {
  flex-grow: 1;
  padding: 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #fafbfc;
}

.ai-message {
  display: flex;
  gap: 0.75rem;
  max-width: 85%;
  animation: messageSlideIn 0.3s ease-out;
}

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

.ai-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
  font-weight: 600;
}

.ai-message.ai-message-assistant .ai-message-avatar {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
}

.ai-message.ai-message-user .ai-message-avatar {
  background: #e2e8f0;
  color: var(--text-secondary);
}

.ai-message-content {
  padding: 0.875rem 1rem;
  border-radius: 12px;
  line-height: 1.5;
  word-break: break-word;
  font-size: 0.9375rem;
}

.ai-message.ai-message-assistant {
  align-self: flex-start;
}

.ai-message.ai-message-assistant .ai-message-content {
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  border-top-left-radius: 4px;
  color: #334155;
}

.ai-message.ai-message-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-message.ai-message-user .ai-message-content {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
  border-top-right-radius: 4px;
}

.ai-chat-input {
  padding: 1rem 1.25rem;
  border-top: 1px solid #e2e8f0;
  background: var(--bg-white);
  flex-shrink: 0;
}

.ai-input-group {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.ai-message-input {
  flex-grow: 1;
  resize: none;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  transition: all 0.2s;
  min-height: 44px;
  max-height: 120px;
}

.ai-message-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ai-message-input::placeholder {
  color: var(--text-muted);
}

.ai-send-btn {
  height: 44px;
  width: 44px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

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

.ai-send-btn .material-icons {
  font-size: 1.25rem;
}

.ai-suggestions {
  margin-top: 0.875rem;
}

.suggestions-label {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.suggestions-label::before {
  content: '💡';
  font-size: 0.875rem;
}

.suggestion-buttons-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.suggestion-btn {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
  transition: all 0.2s;
  font-weight: 500;
}

.suggestion-btn:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  transform: translateY(-1px);
}

/* Preview section */
.ai-preview-content {
  flex-grow: 1;
  padding: 1.25rem;
  overflow-y: auto;
  background: var(--bg-white);
}

.ai-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  text-align: center;
  padding: 2rem;
}

.ai-preview-empty .material-icons {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.ai-preview-empty p {
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 280px;
}

/* Clear button */
.ai-clear-btn {
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: all 0.2s;
}

.ai-clear-btn:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.ai-clear-btn .material-icons {
  font-size: 1rem;
}

/* =============================================================================
   CUSTOMIZE INSTRUCTION MODAL - "Lag din versjon"
   ============================================================================= */

.customize-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: customizeFadeIn 0.2s ease-out;
}

.customize-modal-overlay.closing {
  animation: customizeFadeOut 0.2s ease-out forwards;
}

@keyframes customizeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes customizeFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.customize-modal {
  background: var(--bg-white);
  border-radius: 16px;
  width: 95vw;
  max-width: 1200px;
  height: 85vh;
  max-height: 800px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: customizeSlideUp 0.3s ease-out;
}

@keyframes customizeSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.customize-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  border-radius: 16px 16px 0 0;
}

.customize-header-content h3 {
  color: #ffffff;
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 0.375rem 0;
}

.customize-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  margin: 0;
}

.customize-close-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #ffffff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.customize-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.customize-modal-tabs {
  display: flex;
  background: var(--bg-light);
  border-bottom: 1px solid #e2e8f0;
  padding: 0 1.75rem;
}

.customize-tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.customize-tab-btn:hover {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.customize-tab-btn.is-active {
  color: #2563eb !important;
  border-bottom-color: #2563eb !important;
  background: var(--bg-white) !important;
}

.customize-tab-btn .material-icons {
  font-size: 1.25rem;
}

.customize-modal-body {
  flex: 1;
  overflow: hidden;
  padding: 1.5rem 1.75rem;
  background: var(--bg-light);
}

.customize-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1.25rem 1.75rem;
  background: var(--bg-white);
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 16px 16px;
}

.customize-modal-footer .button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.customize-modal-footer .button.secondary {
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  color: var(--text-muted);
}

.customize-modal-footer .button.secondary:hover {
  background: var(--bg-hover);
  border-color: #cbd5e1;
}

.customize-modal-footer .button.primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: none;
  color: #ffffff;
}

.customize-modal-footer .button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Manual Edit Tab Layout */
.customize-manual-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  height: 100%;
}

.customize-form-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--bg-white);
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.customize-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.customize-form-group-grow {
  flex: 1;
  min-height: 0;
}

.customize-form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}

.customize-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.customize-content-header label {
  margin-bottom: 0;
}

.customize-ai-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff !important;
  border: none;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.customize-ai-edit-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.customize-ai-edit-btn .material-icons {
  font-size: 1rem;
  color: #ffffff !important;
}

.customize-input {
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9375rem;
  transition: all 0.2s;
}

.customize-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.customize-textarea-small {
  resize: none;
  min-height: 70px;
}

.customize-textarea-large {
  flex: 1;
  resize: none;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  min-height: 200px;
}

.customize-original-section {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.customize-original-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  background: var(--bg-hover);
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
}

.customize-original-header .material-icons {
  font-size: 1.125rem;
}

.customize-original-content {
  flex: 1;
  padding: 1.25rem;
  margin: 0;
  overflow-y: auto;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
  white-space: pre-wrap;
  background: #fafbfc;
}

/* AI Edit Tab Layout */
.customize-ai-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  height: 100%;
}

.customize-ai-chat-section {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.customize-ai-messages {
  flex: 1;
  padding: 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #fafbfc;
}

.customize-ai-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  height: 100%;
}

.customize-welcome-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.customize-welcome-icon .material-icons {
  font-size: 2rem;
  color: #2563eb;
}

.customize-ai-welcome h4 {
  color: var(--text-primary);
  font-size: 1.125rem;
  margin: 0 0 0.5rem 0;
}

.customize-ai-welcome p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin: 0 0 1.25rem 0;
  max-width: 320px;
}

.customize-welcome-examples {
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 1rem;
  text-align: left;
}

.customize-welcome-examples span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.customize-welcome-examples ul {
  margin: 0.5rem 0 0 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.customize-welcome-examples li {
  margin-bottom: 0.375rem;
}

.customize-chat-message {
  display: flex;
  gap: 0.75rem;
  max-width: 90%;
  animation: customizeMsgSlide 0.3s ease-out;
}

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

.customize-chat-message.customize-chat-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.customize-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.customize-chat-assistant .customize-chat-avatar {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
}

.customize-chat-user .customize-chat-avatar {
  background: #e2e8f0;
  color: var(--text-secondary);
}

.customize-chat-bubble {
  padding: 0.875rem 1rem;
  border-radius: 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.customize-chat-assistant .customize-chat-bubble {
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  border-top-left-radius: 4px;
  color: #334155;
}

.customize-chat-user .customize-chat-bubble {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
  border-top-right-radius: 4px;
}

.customize-update-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: #dcfce7;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}

.customize-update-badge .material-icons {
  font-size: 0.875rem;
}

.customize-ai-input-area {
  padding: 1rem 1.25rem;
  background: var(--bg-white);
  border-top: 1px solid #e2e8f0;
}

.customize-ai-input-group {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.customize-ai-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.9375rem;
  resize: none;
  transition: all 0.2s;
  min-height: 44px;
}

.customize-ai-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.customize-ai-send-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.customize-ai-send-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.customize-ai-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.customize-ai-suggestions {
  margin-top: 0.875rem;
}

.customize-suggestions-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  display: block;
}

.customize-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.customize-chip {
  background: var(--bg-hover);
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.customize-chip:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  transform: translateY(-1px);
}

/* AI Preview Section */
.customize-ai-preview-section {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.customize-preview-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  background: var(--bg-hover);
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}

.customize-preview-header .material-icons {
  font-size: 1.125rem;
  color: #2563eb;
}

.customize-preview-name {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
}

.customize-preview-name-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 0.2s;
}

.customize-preview-name-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.customize-preview-content {
  flex: 1;
  padding: 1.25rem;
  margin: 0;
  overflow-y: auto;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #334155;
  white-space: pre-wrap;
  background: var(--bg-white);
}

.customize-preview-body {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-white);
}

/* =============================================================================
   DIFF VIEW STYLING
   ============================================================================= */

.diff-controls {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--bg-light);
  border-bottom: 1px solid #e2e8f0;
}

.diff-control-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-white);
  color: var(--text-secondary);
}

.diff-control-btn:hover {
  border-color: #cbd5e1;
  background: var(--bg-hover);
}

.diff-control-btn.accept-all {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.diff-control-btn.accept-all:hover {
  background: #bbf7d0;
}

.diff-control-btn.reject-all {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.diff-control-btn.reject-all:hover {
  background: #fee2e2;
}

.diff-control-btn .material-icons {
  font-size: 1rem;
}

.diff-view {
  padding: 1rem;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.diff-same {
  color: var(--text-secondary);
  padding: 0.25rem 0;
  white-space: pre-wrap;
}

.diff-chunk {
  margin: 0.75rem 0;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  transition: all 0.2s;
}

.diff-chunk.accepted {
  border-color: #86efac;
  background: #f0fdf4;
}

.diff-chunk.rejected {
  border-color: #fecaca;
  background: #fef2f2;
}

.diff-chunk-controls {
  display: flex;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-light);
  border-bottom: 1px solid #e2e8f0;
}

.diff-chunk.accepted .diff-chunk-controls {
  background: #dcfce7;
  border-bottom-color: #86efac;
}

.diff-chunk.rejected .diff-chunk-controls {
  background: #fee2e2;
  border-bottom-color: #fecaca;
}

.diff-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: var(--bg-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  color: var(--text-muted);
}

.diff-btn .material-icons {
  font-size: 1rem;
}

.diff-btn.diff-accept:hover,
.diff-btn.diff-accept.active {
  background: #22c55e;
  border-color: #22c55e;
  color: #ffffff;
}

.diff-btn.diff-reject:hover,
.diff-btn.diff-reject.active {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

.diff-content {
  padding: 0.75rem 1rem;
}

.diff-removed {
  background: #fee2e2;
  color: #991b1b;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  text-decoration: line-through;
  white-space: pre-wrap;
}

.diff-added {
  background: #dcfce7;
  color: #166534;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  white-space: pre-wrap;
}

.diff-chunk.rejected .diff-removed {
  text-decoration: none;
  background: #f0fdf4;
  color: #166534;
}

.diff-chunk.rejected .diff-added {
  text-decoration: line-through;
  background: #fee2e2;
  color: #991b1b;
}

/* Small spinner for button */
.spinner-small {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Customize button in detail view */
.customize-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: none !important;
  color: #ffffff !important;
}

.customize-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.customize-btn .material-icons {
  color: #ffffff !important;
}

/* =====================================================================
   INSTRUKSJONSBIBLIOTEK — DETALJ-VISNING (knapper og action-rad)
   Outline-stil for sekundærknapper med fargede ikoner som signaliserer
   identitet. Primær-knappen ("Bruk denne") og customize-btn beholder
   solid fyll for tydelig hierarki.
   ===================================================================== */

/* Tilbake-knapp — egen rad over tittelen */
[data-action="back-to-list"].button.secondary.small {
  background: transparent !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
  font-weight: 500;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1rem;
}

[data-action="back-to-list"].button.secondary.small:hover:not(:disabled) {
  background: var(--bg-hover) !important;
  border-color: #6b7280 !important;
}

/* Action-rad layout — luftig topp-skille */
.instruction-actions {
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-medium);
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

/* Sekundærknapper i action-rad: ren outline med subtilt løft */
.instruction-actions .button.secondary:not(.customize-btn) {
  background: var(--bg-input, #ffffff) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.18s ease;
}

.instruction-actions .button.secondary:not(.customize-btn):hover:not(:disabled) {
  background: var(--bg-hover) !important;
  border-color: #6b7280 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Subtile ikon-aksenter — gir hver knapp identitet */
.instruction-actions [data-action="toggle-favorite"] .material-icons {
  color: #ec4899; /* rosa hjerte */
}

.instruction-actions [data-action="set-as-default"] .material-icons {
  color: #ea580c; /* oransje pin */
}

.instruction-actions [data-action="edit-instruction"] .material-icons {
  color: #4f46e5; /* indigo blyant */
}

/* Aktiv standardmal-knapp i detalj-visning. Pinnet-stil signaliserer at
   denne malen brukes automatisk i nye konsultasjoner. */
.instruction-actions .instruction-default-active {
  background: #fff7ed !important;
  border-color: #fb923c !important;
  color: #9a3412 !important;
}

.instruction-actions .instruction-default-active:hover:not(:disabled) {
  background: #ffedd5 !important;
  border-color: #ea580c !important;
}

.instruction-actions .instruction-default-active .material-icons {
  color: #ea580c !important;
}

/* Dark theme — outline-fargene må justere seg */
html[data-theme="dark"] [data-action="back-to-list"].button.secondary.small,
html[data-theme="dark"] .instruction-actions .button.secondary:not(.customize-btn) {
  background: var(--bg-input, #1f2937) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] [data-action="back-to-list"].button.secondary.small:hover:not(:disabled),
html[data-theme="dark"] .instruction-actions .button.secondary:not(.customize-btn):hover:not(:disabled) {
  background: var(--bg-hover) !important;
  border-color: #9ca3af !important;
}

html[data-theme="dark"] .instruction-actions .instruction-default-active {
  background: #431407 !important;
  border-color: #ea580c !important;
  color: #fed7aa !important;
}

html[data-theme="dark"] .instruction-actions .instruction-default-active:hover:not(:disabled) {
  background: #7c2d12 !important;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .customize-modal {
    width: 98vw;
    height: 95vh;
    max-height: none;
    border-radius: 12px;
  }
  
  .customize-manual-layout,
  .customize-ai-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .customize-original-section {
    max-height: 200px;
  }
  
  .customize-ai-preview-section {
    max-height: 250px;
  }
}

.ai-preview-content {
  flex-grow: 1;
  padding: 1rem;
  overflow-y: auto;
}

.ai-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text-muted);
}

.ai-preview-placeholder .material-icons {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.instruction-content-box {
  white-space: pre-wrap;
  background-color: var(--bg-light);
  padding: 1rem;
  border-radius: var(--main-border-radius);
  border: 1px solid var(--border-light);
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
}

/* Referral Dashboard */
.referral-dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.referral-dashboard-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.referral-category-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.referral-category-info .category-name {
  font-weight: 500;
  color: var(--text-primary);
}

.referral-category-info .active-template-name {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Template Choice Modal */
#choiceModalBody {
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px 0;
}

.template-choice-list {
  display: flex;
  flex-direction: column;
}

.template-choice-item {
  display: block;
  width: 100%;
  padding: 12px 24px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  font-size: 1rem;
  transition: background-color 0.2s;
}

.template-choice-item:last-child {
  border-bottom: none;
}

.template-choice-item:hover {
  background-color: var(--bg-light);
}

.template-choice-item.is-active {
  background-color: var(--primary-light);
  color: var(--primary);
  font-weight: 500;
}

.template-choice-item .material-icons {
  vertical-align: middle;
  margin-right: 8px;
  font-size: 1.25rem;
  color: var(--text-secondary);
}

.template-choice-item.is-active .material-icons {
  color: var(--primary);
}

/* ==========================================================================
   19. TESTING & DIAGNOSTICS
   ========================================================================== */

.test-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--bg-white);
  border-radius: var(--main-border-radius);
  border: 1px solid var(--border-light);
}

.permission-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
  border-radius: 4px;
}

.permission-granted {
  background-color: var(--status-completed-bg);
  color: var(--status-completed-text);
}

.permission-denied {
  background-color: var(--status-recording-bg);
  color: var(--status-recording-text);
}

.audio-visualizer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}

.audio-level-bar {
  flex-grow: 1;
  height: 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  overflow: hidden;
}

.audio-level-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  transition: width 0.1s linear;
}

.audio-test-controls,
.recording-test,
.service-tests {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.test-results {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-light);
  border-radius: 4px;
  min-height: 50px;
}

.test-result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.test-result.success {
  color: var(--accent-success);
}

.test-result.error {
  color: var(--accent-error);
}

.test-transcript,
.test-step {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--bg-white);
  border-radius: 4px;
  font-size: 0.9rem;
}

.system-info {
  margin-top: 1rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: var(--bg-light);
  border-radius: 4px;
}

.info-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.info-value {
  color: var(--text-primary);
}

/* ==========================================================================
   20. MOBILE QR MODAL
   ========================================================================== */

.mobile-qr-container {
  text-align: center;
}

.mobile-qr-header {
  margin-bottom: 1.5rem;
}

.mobile-qr-header h4 {
  margin-bottom: 0.5rem;
}

.qr-code-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0;
  min-height: 220px;
  border: 2px dashed var(--border-light);
  border-radius: var(--main-border-radius);
  background: var(--bg-light);
}

.qr-code-container.qr-generated {
  border-style: solid;
  border-color: var(--primary);
  background: var(--bg-white);
}

.qr-loading,
.qr-error,
.qr-expired {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}

.qr-loading .material-icons,
.qr-error .material-icons,
.qr-expired .material-icons {
  font-size: 3rem;
  color: var(--text-muted);
}

.qr-error .material-icons {
  color: var(--accent-error);
}

.mobile-url-section {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--bg-light);
  border-radius: var(--main-border-radius);
}

.mobile-url-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.mobile-instructions {
  text-align: left;
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--primary-light);
  border-radius: var(--main-border-radius);
}

.mobile-instructions h5 {
  margin-bottom: 1rem;
}

.mobile-instructions ol {
  margin-left: 1.5rem;
}

.mobile-instructions li {
  margin-bottom: 0.5rem;
}

.mobile-security-note {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--status-completed-bg);
  border-radius: var(--main-border-radius);
  border-left: 4px solid var(--accent-success);
}

.security-info {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.security-info .material-icons {
  color: var(--accent-success);
  margin-top: 0.25rem;
}

.mobile-pin-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   21. MIGRATION DIALOG
   ========================================================================== */

.migration-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-overlay);
  backdrop-filter: blur(5px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.migration-dialog {
  background: var(--bg-white);
  border-radius: var(--modal-border-radius);
  padding: 2.5rem;
  max-width: 550px;
  width: 90%;
  box-shadow: var(--shadow-strong);
  text-align: center;
}

.migration-header {
  margin-bottom: 1.5rem;
}

.migration-icon {
  font-size: 3.5rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.migration-body {
  text-align: left;
}

.migration-benefits {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}

.migration-benefits li {
  margin-bottom: 0.5rem;
}

.migration-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--primary-light);
  border-radius: var(--main-border-radius);
}

.migration-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* ==========================================================================
   22. AUTH MODAL (håndteres nå av auth-service.js inline CSS)
   ========================================================================== */

/* ==========================================================================
   23. TOOLTIPS
   ========================================================================== */

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  opacity: 0;
  background: var(--bg-white);
  color: #334155;
  text-align: center;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  position: absolute;
  z-index: 9999;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  pointer-events: none;
  white-space: nowrap;
  max-width: 260px;
  white-space: normal;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1.5px 6px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

/* Arrow pointing down (tooltip is above) */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.04));
}

/* Header tooltips: show BELOW (since header is at top of page) */
header .tooltip .tooltiptext {
  bottom: auto;
  top: calc(100% + 10px);
}

header .tooltip .tooltiptext::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent #ffffff transparent;
  filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.04));
}

/* Response toolbar: ensure overflow doesn't clip tooltips */
.response-header-actions {
  overflow: visible;
}

.response-header-actions .tooltip .tooltiptext {
  white-space: nowrap;
}

/* Edge-aware: first buttons align left */
.response-header-actions .tooltip:first-child .tooltiptext,
.response-header-actions .tooltip:nth-child(2) .tooltiptext {
  left: 0;
  transform: translateX(0) translateY(4px);
}
.response-header-actions .tooltip:first-child:hover .tooltiptext,
.response-header-actions .tooltip:nth-child(2):hover .tooltiptext {
  transform: translateX(0) translateY(0);
}
.response-header-actions .tooltip:first-child .tooltiptext::after,
.response-header-actions .tooltip:nth-child(2) .tooltiptext::after {
  left: 18px;
}

/* Edge-aware: last buttons align right */
.response-header-actions .tooltip:last-child .tooltiptext,
.response-header-actions .tooltip:nth-last-child(2) .tooltiptext {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(4px);
}
.response-header-actions .tooltip:last-child:hover .tooltiptext,
.response-header-actions .tooltip:nth-last-child(2):hover .tooltiptext {
  transform: translateX(0) translateY(0);
}
.response-header-actions .tooltip:last-child .tooltiptext::after,
.response-header-actions .tooltip:nth-last-child(2) .tooltiptext::after {
  left: auto;
  right: 18px;
}

/* ==========================================================================
   24. RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 1200px) {
  .ai-collaborate-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  #instructionListContent {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (max-width: 1024px) {
  .settings-main {
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 1rem;
  }
  
  .storage-stats {
    grid-template-columns: 1fr;
  }
  
  /* Begynn å komprimere action-buttons */
  .response-header-actions .action-btn {
    padding: 6px 11px;
    gap: 4px;
    font-size: 0.78rem;
    height: 32px;
  }
}

@media (max-width: 900px) {
  /* Forbered for kompakt modus */
  .response-header-actions {
    gap: 5px;
  }
  
  .response-header-actions .action-btn {
    padding: 6px 9px;
    font-size: 0.75rem;
    height: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 100%;
  }
  
  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .header-left h1 {
    font-size: 1.25rem;
  }
  
  .container {
    flex-direction: column;
    height: auto;
  }
  
  .sidebar {
    width: 100%;
    max-height: 50vh;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  
  .main {
    padding: 1rem;
  }
  
  .settings-main {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .controls-spacer {
    display: none;
  }
  
  .status-indicators {
    justify-content: center;
  }
  
  .modal-content.wide,
  .modal-content {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  
  .referral-buttons-wrapper {
    flex-direction: column;
  }
  
  .referral-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  
  .dictate-instructions-display {
    min-width: 140px;
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
  }
  
  #dictateInstructionsDisplayText {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .consultation-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .consultation-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  /* KRITISK: Skjul tekst i action-buttons, vis bare ikoner */
  .response-header-actions .action-btn .action-btn-label {
    display: none;
  }
  
  .response-header-actions .action-btn {
    padding: 7px;
    min-width: 34px;
    height: 34px;
    gap: 0;
    border-radius: 8px;
  }
  
  .response-header-actions .action-btn .material-icons {
    margin: 0;
    font-size: 1.1rem;
  }
  
  /* Kompakt modus med wrapping */
  .response-header-actions {
    overflow: visible;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 4px;
  }
}

@media (max-width: 480px) {
  .header-main {
    padding: 0.5rem 0;
  }
  
  .header-actions {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  
  .user-info {
    order: -1;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  
  .sidebar {
    padding: 0.75rem;
  }
  
  .main {
    padding: 0.75rem;
  }
  
  .consultation-item {
    padding: 0.6rem;
  }
  
  .modal-content {
    margin: 0;
  }
  
  .modal-header,
  .modal-body,
  .modal-actions {
    padding: 1rem;
  }
  
  /* Kompakt action-buttons på svært små skjermer */
  .response-header-actions {
    gap: 3px;
  }
  
  .response-header-actions .action-btn {
    padding: 6px;
    min-width: 30px;
    height: 30px;
  }
  
  .response-header-actions .action-btn .material-icons {
    font-size: 1rem;
  }
}

/* ==========================================================================
   25. PRINT STYLES
   ========================================================================== */

@media print {
  header,
  .sidebar,
  .controls,
  .modal,
  .notification {
    display: none !important;
  }
  
  .main {
    padding: 0;
    background: white;
  }
  
  .response-section {
    box-shadow: none;
    border: 1px solid #ccc;
  }
  
  #responseBox {
    border: none;
    background: white;
    color: black;
  }
}

/* ==========================================================================
   26. ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark mode tokens defineres øverst i filen under html[data-theme="dark"]. */

/* Focus styles for keyboard navigation */
.button:focus,
.input:focus,
.sidebar-btn:focus,
.filter-btn:focus,
.consultation-item:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border-light: #000000;
    --border-medium: #000000;
    --text-muted: #000000;
  }
}

/* ==========================================================================
   27. FINAL UTILITIES
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Smooth scrolling for containers */
.consultation-list,
.modal-body,
.settings-content,
.ai-chat-messages {
  scroll-behavior: smooth;
}

/* Prevent text selection on UI elements */
.button,
.sidebar-btn,
.filter-btn,
.consultation-status,
.status-display {
  user-select: none;
}

/* Ensure consistent box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* ==========================================================================
   LAYOUT-REPARASJON v8.3 - Målrettet Fiks
   - Legges til på slutten av eksisterende CSS-fil for å gjenopprette
     kritisk grid- og flexbox-layout.
   ========================================================================== */

/* FIKS 1: Gjenoppretter 3-kolonne grid for innstillinger øverst */
.settings-main {
  display: grid !important;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.setting-group {
  display: flex !important;
  flex-direction: column;
}

/* FIKS 2: Gjenoppretter flexbox-raden for hovedkontrollene */
.controls {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.controls-spacer {
  flex-grow: 1;
}

.status-indicators {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* FIKS 3: Gjenoppretter flexbox for resultat-headeren */
.response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* Duplikat fjernet - response-header-actions er allerede definert i seksjon 6 */
/* ==========================================================================
   FORBEDRING AV TAB-NAVIGASJON (Instruksjonsbibliotek)
   ========================================================================== */

/* Stil for containerne som holder på tab-radene */
.main-tabs,
.sub-tabs {
  padding-left: 0.5rem; /* Gir litt luft på venstre side */
  padding-right: 0.5rem;
  /* Fjerner den gamle border-bottom for å unngå doble linjer */
  border-bottom: none;
}

/* Felles stil for alle tab-knapper */
.main-tab-btn,
.sub-tab-btn {
  /* Gir mer pusterom inne i knappen */
  padding: 0.8rem 1rem;
  /* Setter en transparent border som standard for å unngå at layouten "hopper" */
  border-bottom: 3px solid transparent; 
  transition: all 0.2s ease-in-out;
  color: var(--text-muted); /* Gjør inaktive tabs tydelig grå */
  position: relative; /* Nødvendig for den animerte understreken */
  font-weight: 500;
}

/* Hover-effekt for å vise at de er klikkbare */
.main-tab-btn:hover:not(.is-active),
.sub-tab-btn:hover:not(.is-active) {
  color: var(--primary-dark);
  background-color: var(--bg-hover);
}

/* Forbedret stil for den aktive tab-en */
.main-tab-btn.is-active,
.sub-tab-btn.is-active {
  color: var(--primary);
  font-weight: 700; /* Tykkere tekst for aktiv fane */
  border-bottom-color: var(--primary); /* Viser den tykke understreken */
}

/* Separat styling for den øverste raden (Hoved-tabs) */
.main-tabs {
  gap: 1.5rem; /* Mer luft mellom hovedkategoriene */
  border-bottom: 1px solid var(--border-light); /* En tynn linje for å skille de to radene */
}

.main-tab-btn {
  font-size: 1.05rem; /* Litt større tekst for hoved-tabs */
}

/* Separat styling for den nederste raden (Sub-tabs) */
.sub-tabs {
  gap: 2rem; /* God avstand for under-navigasjon */
  background-color: var(--bg-white);
  box-shadow: var(--shadow-soft); /* Gir en liten 3D-effekt som løfter den fra innholdet */
  border-bottom: 1px solid var(--border-light);
}

.sub-tab-btn {
  font-size: 0.9rem; /* Litt mindre tekst for sub-tabs */
  padding: 0.7rem 0.25rem; /* Justert padding for mindre knapper */
}
/* ==========================================================================
   INSTRUCTION LIBRARY IMPROVEMENTS
   ========================================================================== */

/* Container for the entire instruction list - IKKE grid selv */
#instructionListContent {
    padding: 0;
    margin: 0;
    /* VIKTIG: Dette er IKKE en grid - det er en normal container */
}

/* Category headers - FULL BREDDE headers */
.instruction-category-header {
    /* VIKTIG: Tar full bredde som en vanlig block-element */
    width: 100%;
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.5rem;
    border-bottom: 2px solid var(--primary-light);
    background: linear-gradient(90deg, var(--primary-light), transparent);
    border-radius: 6px;
    position: relative;
    border-left: 4px solid var(--primary);
}

.instruction-category-header:first-of-type {
    margin-top: 0;
}

/* Grid container for instruction cards - MÅ være ETTER header */
.instruction-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    padding: 0 0.5rem;
    /* VIKTIG: Dette er en separat grid UNDER hver kategori-header */
}

/* Individual instruction cards - better styling */
.instruction-item-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-soft);
    position: relative;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.instruction-item-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: var(--primary-light);
}

.instruction-item-card.is-active {
    border-color: var(--primary);
    background: var(--primary-light);
}

/* Card header */
.instruction-card-header {
    margin-bottom: 1rem;
}

.instruction-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.instruction-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.instruction-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: 500;
}

.badge-published {
    background: var(--status-completed-bg);
    color: var(--status-completed-text);
}

.badge-draft {
    background: var(--status-draft-bg);
    color: var(--status-draft-text);
}

.badge-category {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* Card body */
.instruction-card-body {
    flex-grow: 1;
    margin-bottom: 1rem;
}

.instruction-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.instruction-content-preview {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    line-height: 1.3;
    border-left: 3px solid var(--border-medium);
}

/* Card footer */
.instruction-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-light);
    padding-top: 0.75rem;
    margin-top: auto;
}

.instruction-author {
    font-weight: 500;
}

.instruction-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.rating-stars {
    color: #ffa726;
}

/* Favorite star indicator */
/* .favorite-star erstattet med .fav-toggle — se seksjon 22 */

/* Wrapper for hver kategori-seksjon */
.instruction-category-section {
    width: 100%;
    margin-bottom: 2rem;
}

/* ==========================================================================
   REFERRAL TEMPLATES SPECIFIC STYLING
   ========================================================================== */

/* For referral templates, we want cleaner category separation */
.instruction-modal-body[data-type="referral"] .instruction-category-header {
    background: linear-gradient(90deg, #e8f5e9, transparent);
    border-left: 4px solid var(--secondary);
    padding-left: 1rem;
}

.instruction-modal-body[data-type="referral"] .instruction-list-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */

.instruction-list-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
}

.instruction-list-empty .material-icons {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.instruction-list-empty h3 {
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

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

@media (max-width: 1200px) {
    .instruction-list-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .instruction-list-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .instruction-category-header {
        font-size: 1.1rem;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .instruction-item-card {
        padding: 1rem;
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .instruction-view-container {
        padding: 1rem;
    }
    
    .instruction-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    
    
    /* ==========================================================================
   INSTRUKSJONSBIBLIOTEK GRID-FIKS - KRITISK
   ========================================================================== */

/* FORCE grid layout for instruction cards */
#instructionListContent .instruction-list-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
    width: 100% !important;
}

/* Ensure category headers span full width */
#instructionListContent .instruction-category-header {
    grid-column: 1 / -1 !important; /* Span all columns */
    width: 100% !important;
    margin: 2rem 0 1rem 0 !important;
    padding: 1rem !important;
    background: linear-gradient(90deg, var(--primary-light), transparent) !important;
    border-left: 4px solid var(--primary) !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
}

/* Fix card dimensions */
#instructionListContent .instruction-item-card {
    min-height: 200px !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Override any conflicting styles */
#instructionListContent {
    display: block !important;
    width: 100% !important;
}
/* ==========================================================================
   HENVISNINGSMALER - GRID LAYOUT FIKS
   ========================================================================== */

/* KRITISK: Force kategori-headers til å ta full bredde og bryte grid */
#instructionsModal .instruction-category-header {
    display: block !important;
    width: 100% !important;
    grid-column: 1 / -1 !important; /* Span alle kolonner */
    margin: 2rem 0 1.5rem 0 !important;
    padding: 1rem 1.5rem !important;
    
    /* Styling */
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: var(--primary-dark) !important;
    background: linear-gradient(90deg, var(--primary-light), transparent) !important;
    border-left: 4px solid var(--primary) !important;
    border-radius: 6px !important;
    
    /* Force den til å være en egen "rad" */
    clear: both !important;
    float: none !important;
}

/* Første kategori-header trenger ikke top margin */
#instructionsModal .instruction-category-header:first-child {
    margin-top: 0 !important;
}

/* Force grid-containere til å være under headers */
#instructionsModal .instruction-list-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-bottom: 2.5rem !important;
    width: 100% !important;
    clear: both !important;
}

/* Sørg for at referral-layouten ikke bruker den gamle strukturen */
#instructionsModal .instruction-view-container {
    display: block !important; /* Ikke flex eller grid */
}

/* Override eventuelle gamle referral-spesifikke stiler */
.instruction-modal-body[data-type="referral"] .instruction-category-header,
.referral-dashboard-item,
.referral-dashboard-container {
    display: block !important;
}

/* Spesifikk fix for henvisningsmaler når currentInstructionType === 'referral' */
#instructionsModal.referral-mode .instruction-list-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}
}

/* ==========================================================================
   HENVISNINGSMALER GRID-FIKS - FORCE CORRECT LAYOUT
   ========================================================================== */

/* Force category headers to be full-width block elements */
#instructionsModal .instruction-category-header {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin: 2rem 0 1rem 0 !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--primary-dark) !important;
    background: linear-gradient(90deg, var(--primary-light), transparent) !important;
    border-left: 4px solid var(--primary) !important;
    border-radius: 6px !important;
    /* Kill any flexbox/grid inheritance */
    flex: none !important;
    grid-column: unset !important;
    position: relative !important;
}

/* Force grid containers to display as proper grids */
#instructionsModal .instruction-list-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
    clear: both !important;
    /* Kill any old layout */
    flex-direction: unset !important;
    flex-wrap: unset !important;
}

/* Ensure instruction cards behave properly in grid */
#instructionsModal .instruction-item-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 200px !important;
    /* Kill any old sizing */
    width: auto !important;
    max-width: none !important;
}

/* Kill any old vertical layout styles that might interfere */
#instructionsModal .instruction-view-container {
    display: block !important;
    /* Not flex or grid - just normal block flow */
}

/* Override any inherited grid/flex from parent containers */
#instructionListContent {
    display: block !important;
    /* Normal block container, not grid itself */
}

/* ==========================================================================
   HENVISNINGSMALER - AGGRESSIV LAYOUT-FIKS
   ========================================================================== */

/* NUKE any old referral layout styles completely */
#instructionsModal .referral-dashboard-container,
#instructionsModal .referral-dashboard-item,
#instructionsModal .referral-category-info {
    display: none !important;
}

/* Force the content container to be normal block flow */
#instructionsModal .instruction-view-container {
    display: block !important;
    flex-direction: unset !important;
    grid-template-columns: unset !important;
    align-items: unset !important;
}

/* Kill any grid/flex on the main content area */
#instructionListContent {
    display: block !important;
    grid-template-columns: unset !important;
    flex-direction: unset !important;
    gap: unset !important;
}

/* Force category headers to be BLOCK and full-width */
.instruction-category-header {
    display: block !important;
    width: 100% !important;
    margin: 2rem 0 1rem 0 !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--primary-dark) !important;
    background: linear-gradient(90deg, var(--primary-light), transparent) !important;
    border-left: 4px solid var(--primary) !important;
    border-radius: 6px !important;
    clear: both !important;
    float: none !important;
    position: static !important;
    /* Nuclear option - kill ALL layout properties */
    flex: none !important;
    grid-column: unset !important;
    grid-row: unset !important;
    align-self: unset !important;
    justify-self: unset !important;
}

/* Force grid containers to be proper CSS Grid */
.instruction-list-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
    width: 100% !important;
    margin-bottom: 2rem !important;
    padding: 0 !important;
    clear: both !important;
    /* Nuclear option - kill inherited properties */
    flex-direction: unset !important;
    flex-wrap: unset !important;
    align-items: unset !important;
    justify-content: unset !important;
    position: static !important;
}

/* Ensure cards are flex columns */
.instruction-item-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 200px !important;
    width: auto !important;
    max-width: none !important;
    position: relative !important;
}

/* NUCLEAR: Override any parent container that might be causing side-by-side layout */
#instructionsModal .modal-body,
#instructionsModal .instruction-modal-body {
    display: flex !important;
    flex-direction: column !important;
}

/* Make sure the view container doesn't use any fancy layouts */
#instructionsModal .view-content.is-active {
    display: block !important;
    width: 100% !important;
}

/* Special override for when we're showing referral templates */
#instructionsModal[data-current-type="referral"] .instruction-view-container,
#instructionsModal[data-current-type="referral"] #instructionListContent {
    display: block !important;
    flex-direction: unset !important;
}
/* Add these classes to your cssindex.css file to replace inline styles */

/* QR Scanner Modal Styles */
.qr-modal-content {
    text-align: center;
}

.qr-modal-body {
    padding: 0;
}

.qr-video {
    width: 100%;
    border-radius: 0.75rem 0.75rem 0 0;
}

.qr-scan-status {
    padding: 1rem;
    color: var(--text-muted);
}

/* Emergency UI Styles (for the showEmergencyUI function in main.js) */
.emergency-container {
    padding: 2rem;
    text-align: center;
    background: var(--bg-white);
    border-radius: 8px;
    margin: 2rem;
    box-shadow: var(--shadow-medium);
}

.emergency-icon {
    font-size: 4rem;
    color: var(--accent-error);
    margin-bottom: 1rem;
}

.emergency-title {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.emergency-text {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.emergency-error-box {
    background: var(--bg-light);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 2rem;
    font-family: monospace;
    text-align: left;
}

.emergency-button-primary {
    margin-right: 1rem;
}
.qr-video {
    width: 100%;
    height: 400px; /* KRITISK: Html5Qrcode trenger høyde */
    border-radius: 0.75rem 0.75rem 0 0;
    background: #000; /* Viser at elementet eksisterer */
}

/* Add this CSS to make the scanner modal larger */
#scanQrModal {
    max-width: 90vw !important;
    max-height: 95vh !important;
    width: auto !important;
}

#scanQrModal .modal-content {
    width: 100% !important;
    max-width: none !important;
    padding: 20px !important;
}

/* Make sure the video container takes full space */
#qrVideo {
    width: 100% !important;
    height: 70vh !important;
    min-height: 500px !important;
    max-height: 800px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 3px solid #ccc !important;
}

/* Status text styling */
#qrScanStatus {
    text-align: center;
    font-size: 1.2rem;
    margin: 15px 0;
    padding: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}
.styled-select-wrapper {
  min-height: 40px;  /* Fixed height */
}

.button {
  padding: 0.6rem 1rem;  /* Variable height based on content */
}
/* Main QR container - UPDATE THIS */
#qrCodeContainer {
    width: auto !important;
    height: auto !important;
    min-height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* QR code elements - ADD THIS */
#qrCodeContainer svg,
#qrCodeContainer canvas,
#qrCodeContainer img {
    width: 300px !important;
    height: 300px !important;
    max-width: none !important;
    max-height: none !important;
}

/* Modal content sizing - UPDATE IF EXISTS */
.modal-content.qr-modal-content,
.mobile-qr-container {
    min-width: 400px;
    width: auto;
}

/* Override any existing QR specific rules */
.qr-code-container,
.qr-generated {
    width: auto !important;
    height: auto !important;
}
/* ============================================= */
/* ==       NEW POPOVER MENU STYLES           == */
/* ============================================= */
.popover-menu {
    position: fixed;
    z-index: 1050; /* Ensure it's on top of other content */
    
    /* Dynamic positioning via CSS Custom Properties (CSP-Compliant) */
    left: var(--popover-left, 0);
    top: var(--popover-top, 0);
    transform: translateX(-50%);
    
    background-color: var(--bg-white);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    padding: 8px 0;
    min-width: 250px;
    
    transform-origin: bottom center;
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

/* Visibility classes */
.popover-menu.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.95);
    pointer-events: none; /* Can't be clicked when hidden */
}

/* The little arrow pointing down */
.popover-menu::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px; /* Position it just below the popover */
    transform: translateX(-50%);
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: var(--bg-white) transparent transparent transparent;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
}

.popover-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 280px; /* Allow for some scrolling */
    overflow-y: auto;
}

.popover-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: background-color 0.1s ease-in-out;
    white-space: nowrap;
}

.popover-menu-item:hover {
    background-color: var(--bg-light-hover);
}

.popover-menu-item .material-icons {
    font-size: 20px;
    color: var(--text-secondary);
}
/* ADD these styles to cssindex.css */

/* Welcome Modal Styles */
.welcome-modal .modal-content {
    max-width: 720px;
    width: 95%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
    background: var(--bg-white);
}

.welcome-hero {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: white;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.welcome-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    pointer-events: none;
}

.welcome-logo {
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.welcome-logo-img {
    height: 80px;
    width: auto;
    filter: brightness(0) invert(1);
    drop-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.welcome-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.3;
}

.welcome-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
    position: relative;
    z-index: 2;
    font-weight: 400;
}

.welcome-content {
    padding: 2rem 2.5rem;
}

.welcome-intro {
    text-align: center;
    margin-bottom: 2rem;
}

.welcome-intro h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.welcome-intro p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}

.welcome-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.welcome-step.welcome-mode-option {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--bg-light);
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}

.welcome-step.welcome-mode-option:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.15);
}

.welcome-step .step-number {
    position: static;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.welcome-step .step-number .material-icons {
    font-size: 1.5rem;
}

.welcome-step .step-content h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.1rem;
}

.welcome-step .step-content p {
    margin: 0 0 0.75rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 500;
}

.welcome-step .step-content ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.welcome-step .step-content ul li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.welcome-step .step-content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: bold;
}

.welcome-step .step-content ul li em {
    color: var(--text-muted);
}

.welcome-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #f0f9ff;
    color: #0369a1;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    border: 1px solid #bae6fd;
}

.welcome-note .material-icons {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.welcome-footer {
    background: var(--bg-light);
    border-top: 1px solid #e2e8f0;
    padding: 1.25rem 2rem;
}

.welcome-footer .modal-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.welcome-footer .button.secondary {
    background: var(--bg-white);
    border: 1px solid #d1d5db;
    color: var(--text-muted);
    padding: 0.625rem 1.25rem;
    font-size: 0.9rem;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.welcome-footer .button.secondary:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.welcome-start-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    color: white;
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    font-size: 0.9rem;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.welcome-start-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.welcome-start-btn .material-icons {
    font-size: 1.1rem;
}

/* Mobile responsiveness for welcome modal */
@media (max-width: 640px) {
    .welcome-modal .modal-content {
        max-width: 95%;
        margin: 1rem;
    }
    
    .welcome-steps {
        grid-template-columns: 1fr;
    }
    
    .welcome-hero {
        padding: 2rem 1.5rem;
    }
    
    .welcome-title {
        font-size: 1.5rem;
    }
    
    .welcome-content {
        padding: 1.5rem;
    }
    
    .welcome-footer .modal-actions {
        flex-direction: column;
    }
    
    .welcome-start-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Settings Guidance Styles */
.setup-guidance {
    margin-bottom: 2rem;
}

.guidance-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--bg-info);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--accent-info);
}

.guidance-card .material-icons {
    color: var(--accent-info);
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

.guidance-card h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.guidance-card p {
    margin: 0;
    color: var(--text-secondary);
}

.required-indicator {
    color: var(--accent-error);
    font-weight: bold;
    margin-left: 0.25rem;
}

/* Mobile responsiveness for welcome modal */
@media (max-width: 768px) {
    .welcome-steps {
        gap: 1rem;
    }
    
    .welcome-step {
        padding: 0.75rem;
    }
    
    .step-icon {
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }
}

/* cssindex.css */

/* === Auth Modal Improvements === */

/* Legacy auth-modal CSS fjernet — auth-service.js håndterer alt */

.version-badge {
    font-size: 0.6em;
    font-weight: 400;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    vertical-align: middle;
}
.secure-text {
    -webkit-text-security: disc;
}
/* Add these to your CSS file */
.warning-color { color: var(--accent-warning); }
.large-icon { font-size: 4rem; }
.small-text { font-size: 0.9rem; }

/* Popover positioning (adjust as needed) */
#referralTemplatePopover.popover-top { 
    /* Position above button using data attributes */ 
}
#referralTemplatePopover.popover-bottom { 
    /* Position below button using data attributes */ 
}
/* CSP-Compliant styles for migration dialog */
.migration-icon-large {
    font-size: 3.5rem !important;
    color: var(--primary) !important;
}

.migration-benefit-icon {
    color: var(--accent-success) !important;
    vertical-align: bottom !important;
}

.migration-actions-center {
    justify-content: center !important;
}

/* CSP-Compliant styles for form groups */
.form-group-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.form-group-disabled .input {
    background-color: var(--bg-light);
    color: var(--text-muted);
}

.form-group-disabled .form-help {
    color: var(--text-muted);
}
.sidebar-btn.danger-btn {
  background: var(--accent-error);
  color: var(--text-on-primary);
  border-color: #c62828;
}

.sidebar-btn.danger-btn:hover:not(:disabled) {
  background: #c62828;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 1rem;
}


/* Add this to cssindex.css for better popover positioning */
.popover-menu.popover-above {
    transform: translateX(-50%) translateY(-100%);
}

.popover-menu.popover-above::after {
    top: 100%;
    bottom: auto;
    border-width: 0 8px 8px;
    border-color: transparent transparent var(--bg-white) transparent;
}
/* ===== HURTIGTASTER MODAL STYLING (CSP-KOMPATIBEL) ===== */

.shortcuts-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.shortcuts-section {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--border-light);
}

.shortcuts-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
}

.shortcuts-section-title .material-icons {
    font-size: 1.2rem;
    color: var(--accent-primary);
}

.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.shortcut-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
}

.shortcut-keys {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    min-width: 140px;
}

.shortcut-keys kbd {
    background: var(--bg-white);
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.shortcut-description {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    flex: 1;
}

.shortcut-description .material-icons {
    font-size: 1rem;
    color: var(--text-muted);
}

.shortcuts-footer {
    border-top: 1px solid var(--border-light);
    padding-top: 1rem;
    margin-top: 1rem;
}

.shortcuts-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.shortcuts-note .material-icons {
    font-size: 1rem;
    color: var(--accent-info);
    margin-top: 0.1rem;
}

/* Responsiv layout for mindre skjermer */
@media (max-width: 768px) {
    .shortcut-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .shortcut-keys {
        min-width: auto;
    }
}
/* Server Settings Specific Styles */
.server-config-form {
    background: var(--bg-white);
    padding: 1.5rem;
    border-radius: var(--main-border-radius);
    border: 1px solid var(--border-light);
    margin-bottom: 1rem;
}

.server-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.connection-status {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--main-border-radius);
    border-left: 4px solid var(--border-medium);
    background: var(--bg-light);
}

.connection-status.success {
    border-left-color: var(--accent-success);
    background: var(--status-completed-bg);
    color: var(--status-completed-text);
}

.connection-status.error {
    border-left-color: var(--accent-error);
    background: var(--status-recording-bg);
    color: var(--status-recording-text);
}

.server-status-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    padding: 1rem;
}

.server-status-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.server-status-item .material-icons {
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

.server-status-item.success .material-icons {
    color: var(--accent-success);
}

.server-status-item.error .material-icons {
    color: var(--accent-error);
}

.microphone-test-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.audio-level-bar {
    width: 100%;
    height: 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: 5px;
    overflow: hidden;
}

.audio-level-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-success), var(--accent-warning), var(--accent-error));
    transition: width 0.1s linear;
}

.required-indicator {
    color: var(--accent-error);
    font-weight: bold;
}

.about-content {
    text-align: center;
}

.app-info {
    margin-bottom: 2rem;
}

.feature-list, .tech-info, .support-info {
    text-align: left;
    margin-bottom: 1.5rem;
}

.feature-list ul, .tech-info ul {
    margin-left: 1rem;
}

.maintenance-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
/* Audio Settings Styles */
.audio-tips {
    background: var(--bg-light);
    padding: 1rem;
    border-radius: var(--main-border-radius);
    border-left: 4px solid var(--primary);
}

.audio-tips ul {
    margin: 0;
    padding-left: 1rem;
}

.audio-tips li {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.audio-tips strong {
    color: var(--primary);
}








/* CONSULTATION CARD - NEW DESIGN (NO CONFLICTS) */
.consult-card-wrapper {
    padding-right: 2rem;
}

.consult-card-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0.25rem;
    gap: 0.5rem;
}

.consult-card-title {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-primary);
    flex-shrink: 0;
}

.consult-card-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.7rem;
    max-width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.consult-card-badge.status-status-draft {
    background: #fffde7;
    color: #5d4037;
}

.consult-card-badge.status-status-recording {
    background: #ffebee;
    color: #b71c1c;
}

.consult-card-badge.status-status-completed {
    background: #e8f5e9;
    color: #1b5e20;
}

.consult-icon {
    font-family: "Material Icons" !important;
    font-size: 0.8rem;
    line-height: 1;
    font-feature-settings: "liga" 1;
    -webkit-font-feature-settings: "liga" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.consult-badge-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.consult-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.consult-card-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.consult-card-instruction {
    font-size: 0.75rem;
    color: #00897b;
    background: rgba(0, 137, 123, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
}

.consult-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    padding: 0.25rem;
    border-radius: 4px;
}

.consultation-item:hover .consult-delete-btn {
    opacity: 1;
}

.consult-delete-btn:hover {
    color: #d32f2f;
    background: rgba(211, 47, 47, 0.1);
}




/* ============================================================================
   CHAT KONSULTASJON — Sentrert card-overlay
   Markup: index.html #consultationChatModal
   JS: js/consultation-chat.js
   ============================================================================ */

/* Overlay (full-viewport backdrop) */
.consultation-chat-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 1rem;
    animation: ccFadeIn 0.2s ease-out;
}

.consultation-chat-overlay.is-hidden {
    display: none;
}

@keyframes ccFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Card */
.consultation-chat-card {
    width: min(96vw, 1500px);
    height: min(94vh, 950px);
    background: var(--bg-white, #fff);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ccSlideIn 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes ccSlideIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header med gradient + shimmer */
.consultation-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.consultation-chat-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: ccHeaderShimmer 5s infinite;
    pointer-events: none;
}

@keyframes ccHeaderShimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}

.consultation-chat-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    position: relative;
    z-index: 1;
}

.consultation-chat-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
}

.consultation-chat-title-icon {
    background: rgba(255, 255, 255, 0.18);
    padding: 0.35rem;
    border-radius: 8px;
    font-size: 1.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.consultation-chat-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 400;
}

.consultation-chat-close-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 8px;
    padding: 0.45rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    position: relative;
    z-index: 1;
}

.consultation-chat-close-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.06);
}

.consultation-chat-close-btn .material-icons {
    font-size: 1.2rem;
}

/* Body (kontekst-info + meldinger) */
.consultation-chat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-white, #fff);
    padding: 0;
    height: auto;
}

/* Kontekst-info-boks */
.consultation-chat-context-info {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(90deg, #eff6ff 0%, #e0f2fe 100%);
    border-bottom: 1px solid rgba(30, 64, 175, 0.12);
    flex-shrink: 0;
}

.consultation-chat-context-info-icon {
    flex-shrink: 0;
}

.consultation-chat-context-info-icon .material-icons {
    color: #1d4ed8;
    background: #fff;
    padding: 0.45rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.18);
    font-size: 1.1rem;
}

.consultation-chat-context-info-text {
    flex: 1;
    min-width: 0;
}

.consultation-chat-context-info-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 0.3rem;
}

.consultation-chat-context-bullets {
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
}

.consultation-chat-context-bullets li {
    font-size: 0.8rem;
    color: #1e3a8a;
    background: rgba(255, 255, 255, 0.6);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(30, 64, 175, 0.15);
}

.consultation-chat-context-info-help {
    margin: 0;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.45;
}

/* Meldingsområde */
.consultation-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #1e40af transparent;
}

.consultation-chat-messages::-webkit-scrollbar {
    width: 8px;
}

.consultation-chat-messages::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1e40af, #1d4ed8);
    border-radius: 4px;
}

.consultation-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

/* Melding-wrapper */
.consultation-chat-message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: ccMessageIn 0.3s ease-out;
}

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

.consultation-chat-message-user {
    align-self: flex-end;
    align-items: flex-end;
}

.consultation-chat-message-ai,
.consultation-chat-message-error,
.consultation-chat-message-retry-error {
    align-self: stretch;
    align-items: stretch;
    max-width: 100%;
    width: 100%;
}

/* Bubble */
.consultation-chat-bubble {
    padding: 0.85rem 1.1rem;
    border-radius: 14px;
    line-height: 1.55;
    font-size: 0.95rem;
    word-wrap: break-word;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.consultation-chat-bubble-user {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.consultation-chat-bubble-ai {
    background: #fff;
    color: var(--text-primary, #1e293b);
    border: 1px solid rgba(30, 64, 175, 0.14);
    border-bottom-left-radius: 4px;
    width: 100%;
    padding: 0.75rem 1rem;
}

.consultation-chat-bubble-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-bottom-left-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.consultation-chat-bubble-error .material-icons {
    font-size: 1.2rem;
}

/* Mal-tag i bruker-bubble (når shortcut er aktiv) */
.consultation-chat-message-shortcut-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    margin-bottom: 0.5rem;
    color: #fff;
    font-weight: 500;
}

.consultation-chat-message-shortcut-tag .material-icons {
    font-size: 0.95rem;
}

.consultation-chat-message-text {
    white-space: pre-wrap;
}

/* AI-header (label + "Kopier alt"-knapp) */
.consultation-chat-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(30, 64, 175, 0.12);
}

.consultation-chat-ai-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1d4ed8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.consultation-chat-ai-label .material-icons {
    font-size: 1rem;
}

/* Section (når svaret er delt opp i flere rubrikker) */
.consultation-chat-section {
    margin-top: 0.5rem;
    border: 1px solid rgba(30, 64, 175, 0.12);
    border-radius: 10px;
    background: #f8fafc;
    overflow: hidden;
}

.consultation-chat-section + .consultation-chat-section {
    margin-top: 0.6rem;
}

.consultation-chat-section-single {
    border: none;
    background: transparent;
}

.consultation-chat-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(30, 64, 175, 0.06);
    border-bottom: 1px solid rgba(30, 64, 175, 0.1);
}

.consultation-chat-section-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e3a8a;
}

.consultation-chat-section-textarea {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0.6rem 0.85rem;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-primary, #1e293b);
    resize: none;
    outline: none;
    overflow: hidden;
    box-sizing: border-box;
}

.consultation-chat-section-textarea:focus {
    background: #fff;
    box-shadow: inset 0 0 0 2px rgba(30, 64, 175, 0.15);
}

.consultation-chat-section-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.4rem 0.6rem 0;
}

/* Kopier-knapper */
.consultation-chat-copy-btn,
.consultation-chat-copy-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    background: #fff;
    border: 1px solid rgba(30, 64, 175, 0.2);
    border-radius: 6px;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.consultation-chat-copy-btn:hover,
.consultation-chat-copy-all-btn:hover {
    background: #eff6ff;
    border-color: #1d4ed8;
}

.consultation-chat-copy-btn .material-icons,
.consultation-chat-copy-all-btn .material-icons {
    font-size: 0.95rem;
}

.consultation-chat-copy-btn.is-copied,
.consultation-chat-copy-all-btn.is-copied {
    background: #dcfce7;
    border-color: #16a34a;
    color: #15803d;
}

.consultation-chat-copy-btn-label {
    line-height: 1;
}

/* Footer (snarveier + input) */
.consultation-chat-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(30, 64, 175, 0.12);
    background: #f8fafc;
    padding: 0.75rem 1.25rem 1rem;
}

/* Snarvei-rad */
.consultation-chat-shortcuts-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}

.consultation-chat-shortcuts-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.consultation-chat-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.consultation-chat-shortcut-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

.consultation-chat-shortcut-btn:hover {
    background: #eff6ff;
    border-color: #1d4ed8;
    color: #1d4ed8;
}

.consultation-chat-shortcut-btn:active {
    transform: scale(0.97);
}

.consultation-chat-shortcut-btn.is-active {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    border-color: #1e3a8a;
    color: #fff;
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.3);
}

.consultation-chat-shortcut-btn .material-icons {
    font-size: 1rem;
}

.consultation-chat-shortcut-btn-label {
    line-height: 1;
}

/* Mal-badge (vises når shortcut er aktiv) */
.consultation-chat-badge-container {
    margin-bottom: 0.6rem;
}

.consultation-chat-badge-container.is-hidden {
    display: none;
}

.consultation-chat-shortcut-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.4rem 0.35rem 0.7rem;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #93c5fd;
    border-radius: 999px;
    color: #1e3a8a;
    font-size: 0.82rem;
    font-weight: 500;
}

.consultation-chat-shortcut-badge .material-icons {
    font-size: 0.95rem;
}

.consultation-chat-shortcut-badge-label {
    line-height: 1;
}

.consultation-chat-shortcut-badge-close {
    background: rgba(30, 64, 175, 0.12);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1e3a8a;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.consultation-chat-shortcut-badge-close:hover {
    background: #1e40af;
    color: #fff;
}

.consultation-chat-shortcut-badge-close .material-icons {
    font-size: 0.85rem;
}

/* Input-rad */
.consultation-chat-input-row {
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.consultation-chat-input-row:focus-within {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}

.consultation-chat-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    resize: none;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary, #1e293b);
    padding: 0.35rem 0.25rem;
    min-height: 1.5em;
    max-height: 180px;
    overflow-y: auto;
}

.consultation-chat-input::placeholder {
    color: #94a3b8;
}

.consultation-chat-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    border: none;
    border-radius: 9px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    align-self: flex-end;
}

.consultation-chat-send-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
    box-shadow: 0 3px 10px rgba(30, 64, 175, 0.3);
    transform: translateY(-1px);
}

.consultation-chat-send-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.consultation-chat-send-btn.is-processing {
    opacity: 0.7;
    cursor: wait;
}

.consultation-chat-send-btn .material-icons {
    font-size: 1.1rem;
}

.consultation-chat-send-btn-label {
    line-height: 1;
}

/* Typing indicator (3 prikker) */
.consultation-chat-typing-wrapper {
    align-self: flex-start;
}

.consultation-chat-typing-indicator {
    background: #fff;
    border: 1px solid rgba(30, 64, 175, 0.14);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    padding: 0.85rem 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.consultation-chat-typing-indicator span {
    width: 7px;
    height: 7px;
    background: #1d4ed8;
    border-radius: 50%;
    animation: ccTypingDot 1.2s infinite ease-in-out;
}

.consultation-chat-typing-indicator span:nth-child(2) {
    animation-delay: 0.18s;
}

.consultation-chat-typing-indicator span:nth-child(3) {
    animation-delay: 0.36s;
}

@keyframes ccTypingDot {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-4px); }
}

.consultation-chat-typing-status {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    color: #475569;
    font-style: italic;
}

/* Retry-error (skytjeneste sviktet etter retries) */
.retry-error-box {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    color: #78350f;
    max-width: 100%;
}

.retry-error-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.retry-error-icon {
    color: #b45309;
    font-size: 1.3rem !important;
}

.retry-error-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #78350f;
}

.retry-error-desc {
    margin: 0 0 0.7rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #92400e;
}

.retry-error-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.retry-error-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, transform 0.1s;
}

.retry-error-btn:active {
    transform: scale(0.97);
}

.retry-error-btn-primary {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    color: #fff;
}

.retry-error-btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
}

.retry-error-btn-secondary {
    background: #fff;
    border-color: #d1d5db;
    color: #475569;
}

.retry-error-btn-secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.retry-error-btn .material-icons {
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .consultation-chat-overlay {
        padding: 0;
    }
    .consultation-chat-card {
        width: 100%;
        height: 100vh;
        max-width: none;
        border-radius: 0;
    }
    .consultation-chat-message {
        max-width: 92%;
    }
    .consultation-chat-context-info {
        padding: 0.85rem 1rem;
    }
    .consultation-chat-messages {
        padding: 1rem;
    }
    .consultation-chat-footer {
        padding: 0.65rem 0.85rem 0.85rem;
    }
}




/* Fritekst KI - Cyan/teal (komplementær til grønn) */
.sidebar-btn.fritekst-ki {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.sidebar-btn.fritekst-ki:hover {
    background: linear-gradient(135deg, #0e7490, #155e75);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.sidebar-btn.fritekst-ki:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.2);
}

/* KI Journaloppsummering - Slate gray (nøytral, profesjonell) */
.sidebar-btn.journal-summary {
    background: linear-gradient(135deg, #475569, #334155);
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.sidebar-btn.journal-summary:hover {
    background: linear-gradient(135deg, #334155, #1e293b);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.3);
}

.sidebar-btn.journal-summary:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(71, 85, 105, 0.2);
}



.factory-reset-btn {
  background: #d32f2f !important;
  color: white !important;
  border: 2px solid #b71c1c !important;
  font-weight: bold !important;
}

.factory-reset-btn:hover {
  background: #b71c1c !important;
  transform: scale(1.02);
}
/* Factory Reset Section Styling */
.new-settings-warning-box {
    background: linear-gradient(135deg, #ffebee, #fce4ec);
    border: 1px solid #f8bbd9;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.new-settings-warning-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.new-settings-warning-header .material-icons {
    color: #d32f2f;
    font-size: 1.5rem;
}

.new-settings-warning-header h4 {
    color: #d32f2f;
    margin: 0;
    font-weight: 600;
}

.new-settings-warning-list {
    margin: 1rem 0;
    padding-left: 1.5rem;
    color: var(--text-secondary);
}

.new-settings-warning-list li {
    margin-bottom: 0.5rem;
}

.new-settings-button-danger {
    background: linear-gradient(135deg, #d32f2f, #c62828);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 200px;
    justify-content: center;
}

.new-settings-button-danger:hover {
    background: linear-gradient(135deg, #c62828, #b71c1c);
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3);
    transform: translateY(-1px);
}

.new-settings-button-danger:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(211, 47, 47, 0.3);
}

.new-settings-button-danger:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}













/* CONNECTION TEST MODAL CSS - FULL UPDATED VERSION WITH SCROLLING FIX */

/* ============================================================================
   CONNECTION TEST MODAL STYLES - All prefixed with connection-test-
   ============================================================================ */

.connection-test-modal-content {
  max-width: 800px;
  max-height: 85vh; /* OPPDATERT: Redusert høyde for bedre tilpasning */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* NYTT: Forhindre overflow på modal-content */
}

.connection-test-modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px; /* OPPDATERT: Redusert gap */
  flex: 1;
  overflow-y: auto; /* NYTT: Gjør body scrollbar */
  min-height: 0; /* NYTT: Tillat flex shrinking */
  padding: 20px; /* NYTT: Legg til padding her i stedet */
}

/* ============================================================================
   CURRENT CONFIGURATION SECTION
   ============================================================================ */

.connection-test-current-config {
  background: var(--bg-light, #f8f9fa);
  border-radius: 8px;
  padding: 16px; /* OPPDATERT: Redusert padding */
  border-left: 4px solid var(--accent-primary, #007bff);
  flex-shrink: 0; /* NYTT: Ikke krymp denne seksjonen */
}

.connection-test-current-config h3 {
  margin: 0 0 12px 0; /* OPPDATERT: Redusert margin */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem; /* OPPDATERT: Litt mindre font */
  color: var(--text-primary, #333);
}

.connection-test-config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px; /* OPPDATERT: Redusert gap */
}

.connection-test-config-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0; /* OPPDATERT: Redusert padding */
  border-bottom: 1px solid var(--border-light, #e0e0e0);
}

.connection-test-config-item:last-child {
  border-bottom: none;
}

.connection-test-config-label {
  font-weight: 500;
  color: var(--text-secondary, #666);
  font-size: 0.9rem; /* NYTT: Litt mindre font */
}

.connection-test-config-value {
  font-family: 'Courier New', monospace;
  background: var(--bg-white, #fff);
  padding: 3px 6px; /* OPPDATERT: Redusert padding */
  border-radius: 4px;
  border: 1px solid var(--border-light, #e0e0e0);
  color: var(--text-primary, #333);
  font-size: 0.85rem; /* NYTT: Mindre font */
}

/* ============================================================================
   TEST RESULTS SECTION - SCROLLABLE
   ============================================================================ */

.connection-test-results-section {
  background: var(--bg-white, #fff);
  border-radius: 8px;
  border: 1px solid var(--border-light, #e0e0e0);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 350px; /* NYTT: Begrens høyde på test-resultater */
  flex-shrink: 0; /* NYTT: Ikke krymp denne seksjonen */
}

.connection-test-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px; /* OPPDATERT: Redusert padding */
  background: var(--bg-light, #f8f9fa);
  border-bottom: 1px solid var(--border-light, #e0e0e0);
  flex-shrink: 0; /* NYTT: Ikke krymp header */
}

.connection-test-section-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem; /* OPPDATERT: Litt mindre font */
}

.connection-test-run-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px; /* OPPDATERT: Litt mindre padding */
  background: var(--accent-primary, #007bff);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem; /* OPPDATERT: Mindre font */
  transition: all 0.2s ease;
}

.connection-test-run-btn:hover {
  background: var(--accent-primary-dark, #0056b3);
  transform: translateY(-1px);
}

.connection-test-run-btn:disabled {
  background: var(--text-muted, #999);
  cursor: not-allowed;
  transform: none;
}

/* ============================================================================
   TEST ITEMS - SCROLLABLE CONTAINER
   ============================================================================ */

.connection-test-items-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* NYTT: Gjør test-items scrollbar */
  flex: 1; /* NYTT: Ta opp tilgjengelig plass */
  min-height: 0; /* NYTT: Tillat flex shrinking */
}

.connection-test-item {
  border-bottom: 1px solid var(--border-light, #e0e0e0);
  transition: background-color 0.2s ease;
  flex-shrink: 0; /* NYTT: Ikke krymp individuelle items */
}

.connection-test-item:last-child {
  border-bottom: none;
}

.connection-test-item:hover {
  background: var(--bg-light, #f8f9fa);
}

.connection-test-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px; /* OPPDATERT: Redusert padding */
}

.connection-test-item-title {
  display: flex;
  align-items: center;
  gap: 10px; /* OPPDATERT: Redusert gap */
  font-weight: 500;
  color: var(--text-primary, #333);
  font-size: 0.95rem; /* NYTT: Litt mindre font */
}

.connection-test-item-icon {
  color: var(--text-secondary, #666);
  font-size: 1.1rem; /* NYTT: Litt mindre ikon */
}

.connection-test-item-actions {
  display: flex;
  align-items: center;
  gap: 10px; /* OPPDATERT: Redusert gap */
}

.connection-test-single-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; /* OPPDATERT: Mindre knapp */
  height: 32px;
  background: var(--bg-light, #f8f9fa);
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.connection-test-single-btn:hover:not(:disabled) {
  background: var(--accent-primary, #007bff);
  color: white;
  transform: scale(1.05);
}

.connection-test-single-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.connection-test-single-btn .material-icons {
  font-size: 1rem; /* NYTT: Mindre ikon i knapp */
}

.connection-test-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; /* OPPDATERT: Mindre status ikon */
  height: 28px;
  border-radius: 50%;
  font-size: 1.1rem; /* OPPDATERT: Mindre font */
}

/* Status icon states */
.connection-test-status-icon.connection-test-status-unknown {
  background: var(--bg-light, #f8f9fa);
  color: var(--text-muted, #999);
}

.connection-test-status-icon.connection-test-status-loading {
  background: var(--accent-warning, #ffc107);
  color: white;
  animation: connection-test-pulse 1.5s infinite;
}

.connection-test-status-icon.connection-test-status-success {
  background: var(--accent-success, #28a745);
  color: white;
}

.connection-test-status-icon.connection-test-status-error {
  background: var(--accent-error, #dc3545);
  color: white;
}

@keyframes connection-test-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.connection-test-item-details {
  padding: 0 16px 12px 16px; /* OPPDATERT: Redusert padding */
}

.connection-test-item-description {
  color: var(--text-secondary, #666);
  font-size: 0.85rem; /* OPPDATERT: Mindre font */
  margin-bottom: 8px; /* OPPDATERT: Redusert margin */
}

.connection-test-item-result {
  background: var(--bg-light, #f8f9fa);
  border-radius: 4px;
  padding: 8px 10px; /* OPPDATERT: Redusert padding */
  border-left: 4px solid var(--border-light, #e0e0e0);
  font-family: 'Courier New', monospace;
  font-size: 0.8rem; /* OPPDATERT: Mindre font */
  line-height: 1.3; /* OPPDATERT: Redusert line-height */
}

.connection-test-result-placeholder {
  color: var(--text-muted, #999);
  font-style: italic;
}

.connection-test-result-success {
  border-left-color: var(--accent-success, #28a745);
  background: #f8fff9;
  color: var(--accent-success-dark, #155724);
}

.connection-test-result-error {
  border-left-color: var(--accent-error, #dc3545);
  background: #fff5f5;
  color: var(--accent-error-dark, #721c24);
}

.connection-test-result-info {
  border-left-color: var(--accent-primary, #007bff);
  background: #f8f9ff;
  color: var(--accent-primary-dark, #0056b3);
}

/* ============================================================================
   SUMMARY SECTION
   ============================================================================ */

.connection-test-summary-section {
  background: var(--bg-light, #f8f9fa);
  border-radius: 8px;
  padding: 16px; /* OPPDATERT: Redusert padding */
  border: 1px solid var(--border-light, #e0e0e0);
  flex-shrink: 0; /* NYTT: Ikke krymp summary */
}

.connection-test-summary-section h3 {
  margin: 0 0 12px 0; /* OPPDATERT: Redusert margin */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem; /* OPPDATERT: Mindre font */
}

.connection-test-summary-content {
  line-height: 1.5; /* OPPDATERT: Redusert line-height */
  font-size: 0.9rem; /* NYTT: Mindre font */
}

.connection-test-summary-placeholder {
  color: var(--text-muted, #999);
  font-style: italic;
}

.connection-test-summary-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px; /* OPPDATERT: Redusert margin */
  font-weight: 500;
}

.connection-test-summary-status.connection-test-status-all-good {
  color: var(--accent-success, #28a745);
}

.connection-test-summary-status.connection-test-status-partial {
  color: var(--accent-warning, #ffc107);
}

.connection-test-summary-status.connection-test-status-issues {
  color: var(--accent-error, #dc3545);
}

/* ============================================================================
   TECHNICAL DETAILS SECTION
   ============================================================================ */

.connection-test-technical-section {
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0; /* NYTT: Ikke krymp technical section */
}

.connection-test-technical-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px; /* OPPDATERT: Redusert padding */
  background: var(--bg-light, #f8f9fa);
  border: none;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-primary, #333);
  transition: background-color 0.2s ease;
  font-size: 0.9rem; /* NYTT: Mindre font */
}

.connection-test-technical-toggle:hover {
  background: var(--bg-secondary, #e9ecef);
}

.connection-test-technical-toggle .material-icons {
  transition: transform 0.2s ease;
}

.connection-test-technical-toggle.connection-test-expanded .material-icons {
  transform: rotate(180deg);
}

.connection-test-technical-content {
  padding: 16px; /* OPPDATERT: Redusert padding */
  background: var(--bg-white, #fff);
  border-top: 1px solid var(--border-light, #e0e0e0);
  display: none;
}

.connection-test-technical-content.connection-test-expanded {
  display: block;
}

.connection-test-technical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* OPPDATERT: Mindre min-width */
  gap: 12px; /* OPPDATERT: Redusert gap */
  margin-bottom: 16px; /* OPPDATERT: Redusert margin */
}

.connection-test-technical-item {
  display: flex;
  flex-direction: column;
  gap: 3px; /* OPPDATERT: Redusert gap */
}

.connection-test-technical-label {
  font-size: 0.8rem; /* OPPDATERT: Mindre font */
  color: var(--text-secondary, #666);
  font-weight: 500;
}

.connection-test-technical-value {
  font-family: 'Courier New', monospace;
  background: var(--bg-light, #f8f9fa);
  padding: 4px 6px; /* OPPDATERT: Redusert padding */
  border-radius: 4px;
  border: 1px solid var(--border-light, #e0e0e0);
  font-size: 0.8rem; /* OPPDATERT: Mindre font */
}

.connection-test-debug-section {
  margin-top: 16px; /* OPPDATERT: Redusert margin */
}

.connection-test-debug-label {
  display: block;
  font-size: 0.8rem; /* OPPDATERT: Mindre font */
  color: var(--text-secondary, #666);
  font-weight: 500;
  margin-bottom: 6px; /* OPPDATERT: Redusert margin */
}

.connection-test-debug-output {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 12px; /* OPPDATERT: Redusert padding */
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem; /* OPPDATERT: Mindre font */
  line-height: 1.3; /* OPPDATERT: Redusert line-height */
  max-height: 150px; /* OPPDATERT: Redusert max-height */
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.connection-test-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px; /* OPPDATERT: Redusert padding */
  background: var(--bg-light, #f8f9fa);
  border-top: 1px solid var(--border-light, #e0e0e0);
  flex-shrink: 0; /* NYTT: Ikke krymp footer */
}

.connection-test-footer-info {
  display: flex;
  align-items: center;
  gap: 6px; /* OPPDATERT: Redusert gap */
  color: var(--text-secondary, #666);
  font-size: 0.8rem; /* OPPDATERT: Mindre font */
}

.connection-test-footer-info .material-icons {
  font-size: 0.9rem; /* OPPDATERT: Mindre ikon */
}

/* ============================================================================
   RESPONSIVE DESIGN - FORBEDRET
   ============================================================================ */

@media (max-height: 700px) {
  .connection-test-modal-content {
    max-height: 90vh; /* Bruk mer plass på små skjermer */
  }
  
  .connection-test-results-section {
    max-height: 250px; /* Mindre plass til test-resultater */
  }
  
  .connection-test-current-config {
    padding: 12px; /* Mindre padding */
  }
  
  .connection-test-summary-section {
    padding: 12px; /* Mindre padding */
  }
}

@media (max-height: 600px) {
  .connection-test-modal-content {
    max-height: 95vh; /* Nesten full høyde på veldig små skjermer */
  }
  
  .connection-test-results-section {
    max-height: 200px; /* Enda mindre plass til test-resultater */
  }
  
  .connection-test-modal-body {
    gap: 12px; /* Mindre gap */
    padding: 15px; /* Mindre padding */
  }
}

@media (max-width: 768px) {
  .connection-test-modal-content {
    max-width: 95vw;
    margin: 10px auto; /* OPPDATERT: Mindre margin */
    max-height: 90vh; /* NYTT: Begrens høyde på mobil */
  }
  
  .connection-test-section-header {
    flex-direction: column;
    gap: 8px; /* OPPDATERT: Redusert gap */
    align-items: stretch;
    padding: 12px 16px; /* OPPDATERT: Redusert padding */
  }
  
  .connection-test-item-header {
    flex-direction: column;
    gap: 8px; /* OPPDATERT: Redusert gap */
    align-items: stretch;
    padding: 10px 12px; /* OPPDATERT: Redusert padding */
  }
  
  .connection-test-item-actions {
    justify-content: space-between;
  }
  
  .connection-test-config-item {
    flex-direction: column;
    align-items: stretch;
    gap: 3px; /* OPPDATERT: Redusert gap */
  }
  
  .connection-test-technical-grid {
    grid-template-columns: 1fr;
  }
  
  .connection-test-modal-footer {
    flex-direction: column;
    gap: 8px; /* OPPDATERT: Redusert gap */
    align-items: stretch;
    padding: 12px 16px; /* OPPDATERT: Redusert padding */
  }
  
  .connection-test-footer-info {
    text-align: center;
  }
  
  .connection-test-results-section {
    max-height: 300px; /* NYTT: Mer plass på mobil */
  }
}

/* ============================================================================
   ANIMATION CLASSES
   ============================================================================ */

.connection-test-loading {
  position: relative;
  overflow: hidden;
}

.connection-test-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: connection-test-shimmer 1.5s infinite;
}

@keyframes connection-test-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.connection-test-text-success {
  color: var(--accent-success, #28a745);
}

.connection-test-text-error {
  color: var(--accent-error, #dc3545);
}

.connection-test-text-warning {
  color: var(--accent-warning, #ffc107);
}

.connection-test-text-info {
  color: var(--accent-primary, #007bff);
}

.connection-test-hidden {
  display: none !important;
}

.connection-test-visible {
  display: block !important;
}

/* ============================================================================
   SCROLLBAR STYLING (WEBKIT BROWSERS)
   ============================================================================ */

.connection-test-modal-body::-webkit-scrollbar,
.connection-test-items-container::-webkit-scrollbar,
.connection-test-debug-output::-webkit-scrollbar {
  width: 6px;
}

.connection-test-modal-body::-webkit-scrollbar-track,
.connection-test-items-container::-webkit-scrollbar-track,
.connection-test-debug-output::-webkit-scrollbar-track {
  background: var(--bg-light, #f8f9fa);
  border-radius: 3px;
}

.connection-test-modal-body::-webkit-scrollbar-thumb,
.connection-test-items-container::-webkit-scrollbar-thumb,
.connection-test-debug-output::-webkit-scrollbar-thumb {
  background: var(--text-muted, #999);
  border-radius: 3px;
}

.connection-test-modal-body::-webkit-scrollbar-thumb:hover,
.connection-test-items-container::-webkit-scrollbar-thumb:hover,
.connection-test-debug-output::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary, #666);
}







/* ============================================================================
   HENVISNINGSMODAL – REDESIGNET CSS
   Prefix: refm-
   Matcher dashboardets designsystem: variabler, border-radius, shadows, etc.
   
   Erstatter ALT med gammel refmodal- prefix i cssindex.css
   (ca. linje 7228–8120 + duplikat rundt 9358–9540)
   ============================================================================ */

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

.refmodal-fullscreen {
  max-width: 1200px;
  width: 95vw;
  height: 88vh;
  max-height: 820px;
  border-radius: var(--modal-border-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  box-shadow: var(--shadow-strong);
}

/* Use standard .modal-header — no custom header needed */

/* ==========================================================================
   STEPPER (progress indicator)
   ========================================================================== */

.refm-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.75rem 2rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
  flex-shrink: 0;
}

.refm-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.refm-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-hover);
  color: var(--text-muted);
  border: 2px solid var(--border-light);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.refm-step-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.25s ease;
}

.refm-step.is-active .refm-step-num {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
}

.refm-step.is-active .refm-step-label {
  color: var(--primary);
  font-weight: 600;
}

.refm-step.is-completed .refm-step-num {
  background: var(--accent-success);
  color: var(--text-on-primary);
  border-color: var(--accent-success);
}

.refm-step.is-completed .refm-step-label {
  color: var(--accent-success);
}

.refm-step-line {
  width: 40px;
  height: 2px;
  background: var(--border-light);
  margin: 0 0.5rem;
  transition: background 0.25s ease;
}

.refm-step.is-completed + .refm-step-line,
.refm-step-line.is-completed {
  background: var(--accent-success);
}


/* ==========================================================================
   THREE-COLUMN BODY
   ========================================================================== */

.refm-body {
  display: grid;
  grid-template-columns: 280px 1fr 1.3fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}


/* ==========================================================================
   PANELS (shared)
   ========================================================================== */

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

.refm-panel-header {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.refm-panel-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}


/* ==========================================================================
   LEFT PANEL – SPESIALITETER
   ========================================================================== */

.refm-panel-left {
  background: var(--bg-white);
  border-right: 1px solid var(--border-light);
}

/* Search */
.refm-search {
  position: relative;
  padding: 0.75rem 1rem 0;
}

.refm-search-icon {
  position: absolute;
  left: 1.625rem;
  top: 50%;
  transform: translateY(-25%);
  font-size: 18px;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.2s;
}

.refm-search-input {
  padding-left: 2.25rem !important;
  padding-right: 2.25rem !important;
  font-size: 0.875rem !important;
  border-radius: var(--main-border-radius) !important;
}

.refm-search-input:focus + .refm-search-icon,
.refm-search:focus-within .refm-search-icon {
  color: var(--primary);
}

.refm-search-clear {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-25%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s;
}

.refm-search-clear:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.refm-search-clear.visible {
  display: flex;
}

.refm-search-clear .material-icons {
  font-size: 15px;
}

.refm-search-count {
  padding: 0.25rem 1rem 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  min-height: 1.25rem;
}

.refm-search-count.no-results {
  color: var(--accent-error);
}

/* Specialties list */
.refm-specialties-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

/* Category */
.refm-category {
  margin-bottom: 0.25rem;
}

.refm-category-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.refm-category-header .material-icons {
  font-size: 14px;
  opacity: 0.6;
}

/* Specialty item — flat list style like consultation-item */
.refm-specialty-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 1.25rem;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.refm-specialty-btn:hover {
  background: var(--bg-hover);
}

.refm-specialty-btn.is-selected {
  background: var(--primary-light);
  border-left-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 500;
}

.refm-specialty-btn .material-icons {
  font-size: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  transition: color 0.15s;
}

.refm-specialty-btn.is-selected .material-icons {
  color: var(--primary);
}

.refm-specialty-name {
  flex: 1;
  line-height: 1.3;
}

/* Search highlighting */
.refm-specialty-btn .search-highlight {
  background: #fff3cd;
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 600;
}

.refm-specialty-btn.hidden-by-search {
  display: none !important;
}

.refm-category.hidden-by-search {
  display: none !important;
}


/* ==========================================================================
   MIDDLE PANEL – KONFIGURASJON
   ========================================================================== */

.refm-panel-mid {
  background: var(--bg-light);
  border-right: 1px solid var(--border-light);
  overflow-y: auto;
}

.refm-section {
  padding: 1rem 1.5rem 0;
}

.refm-section:last-of-type {
  padding-bottom: 0;
}

.refm-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Templates — chip/pill style */
.refm-templates {
  min-height: 48px;
}

.refm-empty-state {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-style: italic;
  padding: 0.75rem 0;
  margin: 0;
}

.refm-template-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.refm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.875rem;
  background: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  line-height: 1.4;
}

.refm-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.refm-chip.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(25, 118, 210, 0.25);
}

.refm-chip .material-icons {
  font-size: 14px;
}

.refm-chip-auto {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 500;
  cursor: default;
}

.refm-chip-auto .material-icons {
  font-size: 13px;
  color: var(--primary);
}

/* No templates message */
.refm-no-templates {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--main-border-radius);
  font-size: 0.825rem;
  color: var(--text-muted);
}

.refm-no-templates .material-icons {
  font-size: 16px;
  color: var(--accent-warning);
}

/* Reason textarea */
.refm-reason-input {
  font-size: 0.9rem !important;
  border-radius: var(--main-border-radius) !important;
  resize: vertical;
  min-height: 70px;
}

.refm-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Action buttons */
.refm-actions {
  padding: 1rem 1.5rem 1.25rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.refm-generate-btn {
  flex: 1;
  min-width: 160px;
}

.refm-standard-btn {
  flex: 0 1 auto;
}


/* ==========================================================================
   RIGHT PANEL – RESULTAT
   ========================================================================== */

.refm-panel-right {
  background: var(--bg-white);
  display: flex;
  flex-direction: column;
}

/* Empty state */
.refm-result-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-align: center;
  padding: 2rem;
}

.refm-result-empty .material-icons {
  font-size: 2.5rem;
  opacity: 0.25;
  margin-bottom: 0.75rem;
}

.refm-result-empty p {
  font-size: 0.875rem;
  font-style: italic;
  margin: 0;
}

/* Result content */
.refm-result {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Toolbar — matches response-header-actions style */
.refm-result-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
  flex-shrink: 0;
}

.refm-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  height: 32px;
  white-space: nowrap;
  border-radius: var(--main-border-radius);
  border: 1px solid #dce3ed;
  background: var(--bg-hover);
  color: #3a4a5c;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.refm-toolbar-btn:hover {
  background: #dfe8f3;
  border-color: #c5d1e0;
  color: #1d2d3f;
  box-shadow: 0 2px 6px rgba(25, 118, 210, 0.1);
  transform: translateY(-1px);
}

.refm-toolbar-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.refm-toolbar-btn .material-icons {
  font-size: 15px;
  opacity: 0.6;
}

.refm-toolbar-btn:hover .material-icons {
  opacity: 1;
}

.refm-toolbar-btn-primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border-color: var(--primary);
  font-weight: 600;
  margin-left: auto;
}

.refm-toolbar-btn-primary .material-icons {
  opacity: 0.9;
  color: var(--text-on-primary);
}

.refm-toolbar-btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--text-on-primary);
  box-shadow: 0 3px 10px rgba(25, 118, 210, 0.3);
}

/* Result textarea */
.refm-result-textarea {
  flex: 1;
  resize: none;
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  padding: 1.25rem;
  border: none;
  border-radius: 0;
  background: var(--bg-white);
  color: var(--text-primary);
  outline: none;
}

.refm-result-textarea:focus {
  box-shadow: inset 0 0 0 2px rgba(25, 118, 210, 0.1);
}


/* ==========================================================================
   TEMPLATE PREVIEW
   ========================================================================== */

.refm-template-preview {
  background: var(--bg-light);
  padding: 1.5rem;
  border-radius: var(--main-border-radius);
  border: 1px solid var(--border-light);
  font-family: 'Roboto Mono', 'SF Mono', 'Monaco', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  max-height: 500px;
  overflow-y: auto;
  white-space: pre-wrap;
}


/* ==========================================================================
   SCROLLBAR (subtle, matching dashboard)
   ========================================================================== */

.refm-specialties-list::-webkit-scrollbar,
.refm-panel-mid::-webkit-scrollbar,
.refm-result-textarea::-webkit-scrollbar,
.refm-template-preview::-webkit-scrollbar {
  width: 5px;
}

.refm-specialties-list::-webkit-scrollbar-track,
.refm-panel-mid::-webkit-scrollbar-track,
.refm-result-textarea::-webkit-scrollbar-track,
.refm-template-preview::-webkit-scrollbar-track {
  background: transparent;
}

.refm-specialties-list::-webkit-scrollbar-thumb,
.refm-panel-mid::-webkit-scrollbar-thumb,
.refm-result-textarea::-webkit-scrollbar-thumb,
.refm-template-preview::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 3px;
}

.refm-specialties-list::-webkit-scrollbar-thumb:hover,
.refm-panel-mid::-webkit-scrollbar-thumb:hover,
.refm-result-textarea::-webkit-scrollbar-thumb:hover,
.refm-template-preview::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}


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

@media (max-width: 1024px) {
  .refm-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }

  .refm-panel-left {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    max-height: 200px;
  }

  .refm-panel-mid {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  .refm-specialties-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem;
  }

  .refm-category {
    width: 100%;
  }

  .refm-specialty-btn {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.875rem;
    font-size: 0.85rem;
  }

  .refm-specialty-btn.is-selected {
    border-left: none;
    border-bottom-color: var(--primary);
  }
}

@media (max-width: 768px) {
  .refmodal-fullscreen {
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
  }

  .refm-stepper {
    padding: 0.5rem 1rem;
  }

  .refm-step-label {
    display: none;
  }

  .refm-actions {
    flex-direction: column;
  }

  .refm-result-toolbar {
    flex-wrap: wrap;
  }
}

/* Sørger for at selve "kortet" ikke kan bli for bredt */
.consultation-item {
  width: 100%;
  box-sizing: border-box; /* Veldig viktig! */
}

/* Sikrer at lang tekst inni kortet brytes korrekt */
.consultation-item .consult-card-title,
.consultation-item .patient-info {
  word-break: break-word; /* Tvinger bryting av lange ord */
  overflow-wrap: break-word; /* Alternativ for bedre bryting */
  white-space: normal;
}




/* =================================================================== */
/* START: NY STYLING FOR CONNECTION TEST MODAL (PROFESJONELL DASHBOARD) */
/* Prefix: conntest-                                                   */
/* =================================================================== */

/* --- Hoved-layout for modalen --- */
.conntest-modal-content {
  max-width: 800px; /* Bredere modal for bedre oversikt */
}

.conntest-modal-body {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Luft mellom seksjonene */
  background-color: var(--bg-light); /* En litt mørkere bakgrunn for kontrast */
  padding: 24px;
}

.conntest-section {
  background-color: var(--bg-white);
  border-radius: 8px;
  padding: 16px 20px;
  border: 1px solid var(--border-color-light);
}

.conntest-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: 1.1rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color-light);
  padding-bottom: 12px;
}

.conntest-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- Konfigurasjons-seksjon (øverst) --- */
.conntest-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.conntest-config-item {
  font-size: 0.9rem;
}

.conntest-config-label {
  font-weight: 500;
  color: var(--text-secondary);
  margin-right: 8px;
}

.conntest-config-value {
  color: var(--text-primary);
  font-family: var(--font-mono);
}

/* --- Testresultater-seksjon --- */
.conntest-items-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.conntest-item {
  border: 1px solid var(--border-color-light);
  border-radius: 6px;
  overflow: hidden; /* For å holde alt pent inne i kortet */
}

.conntest-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--bg-very-light);
}

.conntest-item-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--text-primary);
}

.conntest-item-icon {
  color: var(--text-muted);
}

.conntest-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.conntest-status-icon .material-icons {
  font-size: 20px;
}

/* Farger for status-ikoner */
.conntest-status-icon.conntest-status-unknown { color: var(--text-muted); }
.conntest-status-icon.conntest-status-loading { color: var(--accent-primary); animation: conntest-spin 1.5s linear infinite; }
.conntest-status-icon.conntest-status-success { background-color: #d4edda; color: #155724; }
.conntest-status-icon.conntest-status-error   { background-color: #f8d7da; color: #721c24; }
.conntest-status-icon.conntest-status-warning { background-color: #fff3cd; color: #856404; }

@keyframes conntest-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* --- Detaljert Server Test Kort --- */
.conntest-item-details {
  padding: 8px 16px 12px 16px;
}

.conntest-components-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.conntest-components-list li {
  display: grid;
  grid-template-columns: 24px 120px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border-color-light);
  font-size: 0.9rem;
}
.conntest-components-list li:first-child {
  border-top: none;
}

.conntest-component-icon {
  font-size: 20px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.conntest-component-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.conntest-component-message {
  color: var(--text-muted);
  font-family: var(--font-mono);
  word-break: break-word; /* Bryt lange feilmeldinger */
}

/* Status-farger for komponent-rader */
li.conntest-component-status-success .conntest-component-icon,
li.conntest-component-status-success .conntest-component-message {
  color: var(--accent-success);
}
li.conntest-component-status-error .conntest-component-icon,
li.conntest-component-status-error .conntest-component-message {
  color: var(--accent-error);
  font-weight: 500;
}
li.conntest-component-status-warning .conntest-component-icon,
li.conntest-component-status-warning .conntest-component-message {
  color: var(--accent-warning);
}
li.conntest-component-status-success .conntest-component-icon {
  font-weight: bold;
}

/* --- Enkle Test Kort (Claude Server/Bedrock) --- */
.conntest-item-result {
  padding: 12px 16px;
  font-size: 0.9rem;
}

.conntest-result-placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.conntest-result-message {
  padding: 10px;
  border-radius: 4px;
  border-left: 4px solid;
  word-break: break-word;
}

.conntest-result-message.conntest-success {
  background-color: #f4f9f4;
  border-color: var(--accent-success);
  color: var(--text-primary);
}

.conntest-result-message.conntest-error {
  background-color: #fef6f6;
  border-color: var(--accent-error);
  color: var(--text-primary);
}

/* --- Sammendrag-seksjon --- */
.conntest-summary-content {
  padding: 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}
.conntest-summary-placeholder {
  color: var(--text-muted);
}
/* Flere stiler for selve sammendraget kan legges til her */


/* --- Tekniske detaljer-seksjon --- */
.conntest-technical-section {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

.conntest-technical-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  color: var(--text-secondary);
  padding: 4px;
}
.conntest-technical-toggle .material-icons {
  transition: transform 0.3s ease;
}
.conntest-technical-toggle.conntest-expanded .material-icons {
  transform: rotate(180deg);
}

.conntest-technical-content {
  display: none; /* Vises av JS */
  padding: 16px;
  margin-top: 8px;
  background-color: var(--bg-very-light);
  border-radius: 6px;
}
.conntest-technical-toggle.conntest-expanded + .conntest-technical-content {
  display: block;
}
.conntest-technical-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.conntest-debug-label {
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}
.conntest-debug-output {
  background-color: #2d2d2d;
  color: #f0f0f0;
  padding: 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* --- Footer --- */
.conntest-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.conntest-footer-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* =================================================================== */
/* SLUTT: NY STYLING FOR CONNECTION TEST MODAL                         */
/* =================================================================== */













/* Audio File Drop Zone */
.audio-file-drop-container {
    position: relative;
    margin: 0 0.5rem;
}

.audio-file-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-white);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.audio-file-drop-zone:hover {
    border-color: var(--accent-primary);
    background: var(--bg-light);
    transform: translateY(-2px);
}

.audio-file-drop-zone.drag-over {
    border-color: var(--accent-primary);
    background: var(--accent-primary-light);
    transform: scale(1.05);
}

.audio-file-drop-zone .material-icons {
    font-size: 2rem;
    color: var(--accent-primary);
}

.audio-file-drop-zone .drop-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.audio-file-drop-zone .drop-subtext {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.audio-file-drop-zone.processing {
    border-color: var(--accent-warning);
    pointer-events: none;
}





/* ==============================================
   USER SWITCHER STYLES - Multi-user support
   ============================================== */

.user-switcher {
    position: relative;
    margin-left: 8px;
    display: inline-block;
}

.user-switcher-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 320px;
    z-index: 1000;
    overflow: hidden;
}

.user-switcher-header {
    padding: 12px 16px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.user-switcher-list {
    max-height: 300px;
    overflow-y: auto;
}

.user-switcher-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid #f0f0f0;
}

.user-switcher-item:hover:not(.current-user) {
    background-color: var(--bg-light);
}

.user-switcher-item.current-user {
    background-color: #e3f2fd;
    cursor: default;
}

.user-switcher-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    margin-right: 12px;
    flex-shrink: 0;
}

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

.user-switcher-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-switcher-email {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-switcher-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.user-switcher-badge {
    background: #4caf50;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

.user-switcher-arrow {
    color: var(--text-muted);
    font-size: 20px;
    margin-left: 8px;
}

.user-switcher-footer {
    padding: 8px;
    background: #f9f9f9;
    border-top: 1px solid #e0e0e0;
}

.user-switcher-add-btn {
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-white);
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.user-switcher-add-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.user-switcher-add-btn .material-icons {
    font-size: 18px;
}

.user-switcher-empty,
.user-switcher-error {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.user-switcher-error {
    color: #f44336;
}


















/* ============================================
   CONTEXT MODAL - BILDE-STØTTE
   Legg til denne CSS-en i styles.css
   ============================================ */

/* Context Modal Bilde-støtte */
.context-bilde-upload-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: #f6f8fb;
    border-radius: 10px;
    border: 2px dashed #d0d8e4;
    position: relative;
    transition: all 0.3s ease;
}

.context-bilde-upload-section.drag-active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.context-bilde-upload-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #3a4a5c;
}

.context-bilde-upload-header h3 .material-icons {
    font-size: 1.2rem;
    color: #5a7394;
}

.context-bilde-upload-header p {
    margin: 0 0 1rem 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.context-image-thumbnails {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    min-height: 0;
}

.context-bilde-thumbnail {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #d0d8e4;
    background: var(--bg-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.context-bilde-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.context-bilde-thumbnail-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}

.context-bilde-thumbnail-remove:hover {
    background: rgba(220, 38, 38, 0.9);
}

.context-bilde-thumbnail-remove .material-icons {
    font-size: 16px;
}

.context-bilde-thumbnail-size {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.68rem;
}

.context-bilde-upload-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.context-bilde-upload-button .button.secondary {
    background: var(--bg-hover);
    color: #3a4a5c;
    border: 1px solid #dce3ed;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease;
}

.context-bilde-upload-button .button.secondary:hover:not(:disabled) {
    background: #dfe8f3;
    border-color: #c5d1e0;
    color: #1d2d3f;
    box-shadow: 0 2px 6px rgba(25, 118, 210, 0.1);
    transform: translateY(-1px);
}

.context-bilde-upload-button .button.secondary .material-icons {
    font-size: 1rem;
    color: #5a7394;
}

.context-bilde-upload-button .text-muted {
    font-size: 0.8rem;
}

.context-image-drop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(25, 118, 210, 0.06);
    border: 3px dashed var(--primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.context-image-drop-content {
    text-align: center;
    color: var(--primary);
}

.context-image-drop-content .material-icons {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

.context-image-drop-content p {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

/* CSS-TILLEGG FOR FLERE FILER - Legg til i journal-summary.css */

/* Container for filliste */
.journal-files-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e0e0e0;
  max-height: 300px;
  overflow-y: auto;
}

/* Enkelt fil-item */
.journal-file-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--bg-light);
  border-radius: 6px;
  transition: background 0.2s;
}

.journal-file-item:hover {
  background: #e9ecef;
}

/* Ikon for fil */
.file-item-icon {
  color: #1976d2;
  margin-right: 12px;
  font-size: 24px;
}

/* Fil-detaljer */
.file-item-details {
  flex: 1;
  min-width: 0; /* For å få text-overflow til å fungere */
}

.file-item-name {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.file-item-stats {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Fjern-knapp for hver fil */
.file-item-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--text-muted);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-item-remove:hover {
  background: #dc3545;
  color: white;
}

.file-item-remove .material-icons {
  font-size: 20px;
}

/* Scrollbar styling for filliste */
.journal-files-list::-webkit-scrollbar {
  width: 8px;
}

.journal-files-list::-webkit-scrollbar-track {
  background: var(--bg-hover);
  border-radius: 4px;
}

.journal-files-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.journal-files-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Responsiv design for mindre skjermer */
@media (max-width: 768px) {
  .journal-file-item {
    padding: 6px 10px;
  }
  
  .file-item-icon {
    font-size: 20px;
    margin-right: 8px;
  }
  
  .file-item-name {
    font-size: 14px;
  }
  
  .file-item-stats {
    font-size: 11px;
  }
}









/* voice-insert.css */
/* Styling for Voice Insert-funksjonalitet */

/* Voice Insert-knapp i header */
#voiceInsertBtn {
    position: relative;
    transition: all 0.3s ease;
}

#voiceInsertBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#voiceInsertBtn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Recording state - rød pulserende */
#voiceInsertBtn.voiceinsert-recording {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border-color: #dc2626;
    animation: voiceinsert-pulse 1.5s ease-in-out infinite;
}

#voiceInsertBtn.voiceinsert-recording .material-icons {
    animation: voiceinsert-icon-pulse 1.5s ease-in-out infinite;
}

/* Processing state */
#voiceInsertBtn.voiceinsert-processing {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-color: #f59e0b;
    pointer-events: none;
}

#voiceInsertBtn.voiceinsert-processing .material-icons {
    animation: voiceinsert-spin 1s linear infinite;
}

/* Pulse animation for recording button */
@keyframes voiceinsert-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
        transform: scale(1.05);
    }
}

/* Icon pulse animation */
@keyframes voiceinsert-icon-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Spin animation for processing */
@keyframes voiceinsert-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #voiceInsertBtn span:not(.material-icons) {
        display: none;
    }
    
    #voiceInsertBtn {
        min-width: 40px;
        padding: 8px;
    }
}

/* Tolkemodus - Indigo (kommunikasjon/språk) */
.sidebar-btn.interpreter-mode {
    background: linear-gradient(135deg, #3f51b5 0%, #303f9f 100%);
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.sidebar-btn.interpreter-mode:hover {
    background: linear-gradient(135deg, #5c6bc0 0%, #283593 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(63, 81, 181, 0.3);
}

.sidebar-btn.interpreter-mode:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(63, 81, 181, 0.2);
}

/* Videokonsultasjon - Teal/Cyan (telemedisin/video) */
.sidebar-btn.video-consult {
    background: linear-gradient(135deg, #0097a7 0%, #00838f 100%);
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.sidebar-btn.video-consult:hover {
    background: linear-gradient(135deg, #00acc1 0%, #006064 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 151, 167, 0.3);
}

.sidebar-btn.video-consult:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 151, 167, 0.2);
}

/* Badge for ventende pasienter */
.video-waiting-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #f44336;
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.video-waiting-badge.hidden {
    display: none;
}


/* Submeny styling for fritekst-ki - matcher eksisterende fritekst.css */

/* Sørg for at parent-containere ikke klipper submeny */
.fritekst-instruction-dropdown-container,
#fritekstInstructionDropdown,
.fritekst-dropdown-content {
    overflow: visible !important;
}

/* Container for items som har submeny */
/* ==========================================================================
   SMART SUBMENU POSISJONERING
   Unngår overflow ved å vise subitems oppover, nedover eller begge veier
   ========================================================================== */

/* Hovedmeny-item med submenu */
.fritekst-dropdown-item.fritekst-has-submenu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Submenu container - standard posisjonering (nedover) */
.fritekst-dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    max-width: 280px;
    width: max-content;
    background: var(--bg-white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 1000;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: 4px;
}

/* Scrollbar styling for submenu */
.fritekst-dropdown-submenu::-webkit-scrollbar {
    width: 6px;
}

.fritekst-dropdown-submenu::-webkit-scrollbar-track {
    background: var(--bg-hover);
    border-radius: 3px;
}

.fritekst-dropdown-submenu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.fritekst-dropdown-submenu::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Åpne til venstre hvis ikke plass til høyre */
.fritekst-dropdown-submenu.position-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 4px;
}

/* Vis submeny ved hover */
.fritekst-dropdown-item.fritekst-has-submenu:hover > .fritekst-dropdown-submenu {
    display: block;
}

/* POSISJONERING OPPOVER - når ikke plass nedover */
.fritekst-dropdown-submenu.position-upward {
    top: auto;
    bottom: 0;
}

/* POSISJONERING BEGGE VEIER - når ikke nok plass hverken opp eller ned */
.fritekst-dropdown-submenu.position-split {
    top: 50%;
    transform: translateY(-50%);
}

/* Inner scroll container for lang submenu */
.fritekst-dropdown-submenu-scroll {
    max-height: inherit;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Subitem styling */
.fritekst-dropdown-subitem {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
    white-space: nowrap;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fritekst-dropdown-subitem:last-child {
    border-bottom: none;
}

.fritekst-dropdown-subitem:hover {
    background: var(--bg-light);
}

/* SUB-SUBMENU styling (nivå 3) */
.fritekst-dropdown-subitem.fritekst-has-subsubmenu {
    display: flex;
    align-items: center;
}

/* Sub-submenu container - standard posisjonering */
.fritekst-dropdown-subsubmenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    max-width: 280px;
    width: max-content;
    background: var(--bg-white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 1001;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: 4px;
}

/* Åpne til venstre hvis ikke plass */
.fritekst-dropdown-subsubmenu.position-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 4px;
}

/* Scrollbar for sub-submenu */
.fritekst-dropdown-subsubmenu::-webkit-scrollbar {
    width: 6px;
}

.fritekst-dropdown-subsubmenu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

/* Vis sub-submeny ved hover */
.fritekst-dropdown-subitem.fritekst-has-subsubmenu:hover > .fritekst-dropdown-subsubmenu {
    display: block;
}

/* POSISJONERING OPPOVER - når ikke plass nedover */
.fritekst-dropdown-subsubmenu.position-upward {
    top: auto;
    bottom: 0;
}

/* POSISJONERING BEGGE VEIER - når ikke nok plass hverken opp eller ned */
.fritekst-dropdown-subsubmenu.position-split {
    top: 50%;
    transform: translateY(-50%);
}

/* Sub-subitem styling */
.fritekst-dropdown-subsubitem {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
    border-bottom: 1px solid #f0f0f0;
}

.fritekst-dropdown-subsubitem:last-child {
    border-bottom: none;
}

.fritekst-dropdown-subsubitem:hover {
    background: var(--bg-light);
}

/* Responsive design */
@media (max-width: 768px) {
    .fritekst-dropdown-submenu,
    .fritekst-dropdown-subsubmenu {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        max-width: 90vw;
        max-height: 70vh;
    }
    
    /* Reset position classes on mobile */
    .fritekst-dropdown-submenu.position-upward,
    .fritekst-dropdown-submenu.position-split,
    .fritekst-dropdown-subsubmenu.position-upward,
    .fritekst-dropdown-subsubmenu.position-split {
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
    }
}
/* ============================================
   SUBMENU SCROLLBAR STYLING
   For Fritekst KI dropdown submenu
   ============================================ */

/* VIKTIG: Ikke sett overflow på submenu direkte - det klipper sub-submenus!
   Bruk inner scroll container i stedet */

.fritekst-dropdown-submenu-scroll {
  max-height: 400px !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
}

/* Scrollbar styling for inner scroll container */
.fritekst-dropdown-submenu-scroll::-webkit-scrollbar {
  width: 8px;
}

.fritekst-dropdown-submenu-scroll::-webkit-scrollbar-track {
  background: var(--bg-hover);
  border-radius: 10px;
}

.fritekst-dropdown-submenu-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-radius: 10px;
}

.fritekst-dropdown-submenu-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
}

.fritekst-dropdown-submenu-scroll {
  scrollbar-width: thin;
  scrollbar-color: #2563eb #f1f1f1;
}

/* Sub-submenu scrollbar (hvis nødvendig) */
.fritekst-dropdown-subsubmenu::-webkit-scrollbar {
  width: 8px;
}

.fritekst-dropdown-subsubmenu::-webkit-scrollbar-track {
  background: var(--bg-hover);
  border-radius: 10px;
}

.fritekst-dropdown-subsubmenu::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-radius: 10px;
}

.fritekst-dropdown-subsubmenu {
  scrollbar-width: thin;
  scrollbar-color: #2563eb #f1f1f1;
}

/* Skjul subitems som ikke matcher søk */
.fritekst-dropdown-subitem.hidden-by-search,
.fritekst-dropdown-subsubitem.hidden-by-search {
  display: none !important;
}

/* ============================================
   FORBEDRET INSTRUKSJONSBIBLIOTEK-KNAPP
   Gjør knappen større og mer synlig (IKKE lilla)
   ============================================ */

#openLibraryBtn {
  min-width: 120px !important;
  padding: 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  background: var(--bg-white) !important;
  color: var(--text-primary) !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

#openLibraryBtn:hover {
  border-color: #4a90e2 !important;
  background: #f0f7ff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(74, 144, 226, 0.2) !important;
}

#openLibraryBtn .material-icons {
  font-size: 26px !important;
  margin: 0 !important;
  color: #4a90e2 !important;
}

#openLibraryBtn .library-btn-text {
  font-size: 10px !important;
  font-weight: 500 !important;
  text-align: center !important;
  line-height: 1.1 !important;
  color: var(--text-primary) !important;
  white-space: nowrap !important; /* OPPDATERT: Forhindrer tekstoverlapping */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 80px !important; /* OPPDATERT: Maksimal bredde for å unngå overflow */
}
/* ==========================================================================
   FAVORITTER-KNAPP SPESIALSTYLING
   ========================================================================== */

/* Spesialstyling for favorittknappen */
#openLibraryBtn.favorites-btn .material-icons {
  color: #f5a623; /* Gul/gull farge for stjerneikon */
}

#openLibraryBtn.favorites-btn:hover:not(:disabled) {
  background: #fff9e6; /* Lys gul bakgrunn ved hover */
  border-color: #f5a623;
}

#openLibraryBtn.favorites-btn:hover:not(:disabled) .material-icons {
  color: #d68910; /* Mørkere gull ved hover */
}

/* ==========================================================================
   SUPPORT CHAT WIDGET
   Prefix: support-
   Matcher appens designspråk: blå/hvit, Roboto, myke skygger
   ========================================================================== */

/* --- Widget container --- */
.support-widget {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9500;
    font-family: 'Roboto', sans-serif;
}

/* ==========================================================================
   FAB — Flytende knapp
   ========================================================================== */

.support-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.4), 0 2px 6px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s ease,
                background 0.25s ease;
    z-index: 9501;
}

.support-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(25, 118, 210, 0.5), 0 3px 8px rgba(0, 0, 0, 0.15);
}

.support-fab:active {
    transform: scale(0.95);
}

.support-fab--open {
    background: linear-gradient(135deg, #455a64 0%, #37474f 100%);
    box-shadow: 0 4px 12px rgba(69, 90, 100, 0.35);
}

.support-fab-icon {
    font-size: 1.5rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.support-fab--open .support-fab-icon {
    transform: rotate(90deg);
}

/* --- Badge --- */
.support-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #d32f2f;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(211, 47, 47, 0.4);
    animation: support-badge-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.support-badge--visible {
    display: flex;
}

@keyframes support-badge-pop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   CHATVINDU
   ========================================================================== */

.support-window {
    position: fixed;
    bottom: 92px;
    right: 24px;
    width: 370px;
    height: 520px;
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9500;

    /* Skjult som standard */
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s,
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.support-window--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.support-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
    color: #fff;
    flex-shrink: 0;
}

.support-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.support-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.support-header-avatar .material-icons {
    font-size: 1.4rem;
}

.support-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.support-header-name {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.support-header-status {
    font-size: 0.75rem;
    opacity: 0.85;
    font-weight: 400;
}

.support-header-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    opacity: 0.8;
}

.support-header-close:hover {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

.support-header-close .material-icons {
    font-size: 1.25rem;
}

/* ==========================================================================
   MELDINGSOMRÅDE
   ========================================================================== */

.support-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-page);
}

/* Scrollbar */
.support-messages::-webkit-scrollbar {
    width: 5px;
}

.support-messages::-webkit-scrollbar-track {
    background: transparent;
}

.support-messages::-webkit-scrollbar-thumb {
    background: #c5cad0;
    border-radius: 3px;
}

.support-messages::-webkit-scrollbar-thumb:hover {
    background: #a0a7af;
}

/* --- Velkomstmelding --- */
.support-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    gap: 12px;
}

.support-welcome-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-welcome-icon .material-icons {
    font-size: 1.6rem;
    color: #1976d2;
}

.support-welcome-text {
    font-size: 0.88rem;
    color: #546e7a;
    line-height: 1.55;
    max-width: 260px;
}

/* ==========================================================================
   MELDINGSBOBLER
   ========================================================================== */

.support-msg {
    display: flex;
    max-width: 82%;
    animation: support-msg-in 0.2s ease-out;
}

@keyframes support-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.support-msg--user {
    align-self: flex-end;
    justify-content: flex-end;
}

.support-msg--support {
    align-self: flex-start;
}

.support-msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.88rem;
    line-height: 1.5;
    word-break: break-word;
    position: relative;
}

.support-msg--user .support-msg-bubble {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.support-msg--support .support-msg-bubble {
    background: var(--bg-white);
    color: var(--text-primary);
    border: 1px solid #e0e0e0;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.support-msg-text {
    white-space: pre-wrap;
}

.support-msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
    white-space: nowrap;
    line-height: 1;
}

.support-msg-time {
    font-size: 0.68rem;
    opacity: 0.65;
}

.support-msg--user .support-msg-time {
    color: rgba(255, 255, 255, 0.75);
}

.support-msg--support .support-msg-time {
    color: #90a4ae;
}

.support-msg-receipt {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: -1px;
}

/* ==========================================================================
   TYPING INDICATOR
   ========================================================================== */

.support-typing {
    align-self: flex-start;
    animation: support-msg-in 0.2s ease-out;
}

.support-typing-bubble {
    background: var(--bg-white);
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.support-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #90a4ae;
    animation: support-typing-bounce 1.4s ease-in-out infinite;
}

.support-typing-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.support-typing-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes support-typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* ==========================================================================
   INPUT-OMRÅDE
   ========================================================================== */

.support-input-area {
    padding: 12px 14px;
    background: var(--bg-white);
    border-top: 1px solid #e8eaed;
    flex-shrink: 0;
}

.support-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--bg-page);
    border: 1px solid #e0e0e0;
    border-radius: 22px;
    padding: 6px 6px 6px 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.support-input-wrap:focus-within {
    border-color: #1976d2;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
}

.support-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Roboto', sans-serif;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-primary);
    resize: none;
    outline: none;
    padding: 6px 0;
    max-height: 120px;
    overflow-y: auto;
}

.support-input::placeholder {
    color: #90a4ae;
}

.support-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}

.support-send:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

.support-send:not(:disabled):hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.35);
}

.support-send:not(:disabled):active {
    transform: scale(0.93);
}

.support-send .material-icons {
    font-size: 1.15rem;
    margin-left: 1px;
}

/* ==========================================================================
   RESPONSIV
   ========================================================================== */

@media (max-width: 480px) {
    .support-window {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        transform-origin: bottom center;
    }

    .support-window--open {
        transform: translateY(0) scale(1);
    }

    .support-fab {
        bottom: 16px;
        right: 16px;
        width: 50px;
        height: 50px;
    }

    .support-fab-icon {
        font-size: 1.35rem;
    }
}

@media (max-width: 420px) {
    .support-header {
        padding: 12px 14px;
    }

    .support-messages {
        padding: 12px;
    }

    .support-msg {
        max-width: 88%;
    }
}

/* ==========================================================================
   PRINT — Skjul chat-widget
   ========================================================================== */

@media print {
    .support-widget {
        display: none !important;
    }
}

/* ==========================================================================
   DARK MODE — OVERRIDES FOR HARDKODEDE FARGER
   --------------------------------------------------------------------------
   Token-overstyringene øverst i filen dekker alt som bruker var(--*).
   Denne seksjonen overstyrer hardkodede farger som ellers ville brutt
   mørk modus. Alle regler gjelder kun når html[data-theme="dark"] er satt.
   Print-stiler er ikke inkludert (alltid lys for utskrift).
   ========================================================================== */

@media not print {

/* Generelle flater som ofte hardkoder hvit bakgrunn.
   .modal-header og .modal-body har INGEN egen bakgrunn i base — de arver
   fra .modal-content. Vi unngår å overstyre dem her, fordi mange modaler
   (fritekst, video, consultation-chat) har branded headers vi ønsker å
   beholde. Disse skal selv bruke namespace-tokens som flippes med temaet. */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-content.wide,
html[data-theme="dark"] .modal-content.narrow,
html[data-theme="dark"] .modal-content.qr-modal-content,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .modal-actions,
html[data-theme="dark"] .new-settings-modal-content,
html[data-theme="dark"] .new-settings-header,
html[data-theme="dark"] .new-settings-body,
html[data-theme="dark"] .new-settings-section,
html[data-theme="dark"] .new-settings-tabs,
html[data-theme="dark"] .new-settings-form-input,
html[data-theme="dark"] .new-settings-form-select,
html[data-theme="dark"] .new-settings-form-textarea,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .dropdown-content,
html[data-theme="dark"] .menu,
html[data-theme="dark"] .popup,
html[data-theme="dark"] .tooltip,
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .container,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .surface {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* Modal footer har hardkodet border-top: #e8ecf1 i base — overstyr i mørk modus. */
html[data-theme="dark"] .modal-footer {
    background-color: var(--bg-light);
    border-top-color: var(--border-light);
}

/* Side- og hovedflater */
html[data-theme="dark"] .header,
html[data-theme="dark"] .header-main,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .sidebar-content,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .app-container,
html[data-theme="dark"] .page,
html[data-theme="dark"] .footer {
    background-color: var(--bg-light);
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* Skjema-elementer */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .input,
html[data-theme="dark"] .input-like {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border-color: var(--border-light);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
}
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] select:disabled {
    background-color: var(--bg-light);
    color: var(--text-muted);
    opacity: 0.7;
}

/* Knapper — sekundær/standard variant */
html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .button:not(.primary):not(.danger):not(.record):not(.pause):not(.dictate-button):not(.is-active),
html[data-theme="dark"] .header-button,
html[data-theme="dark"] .sidebar-btn,
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .new-settings-tab-btn,
html[data-theme="dark"] .stab,
html[data-theme="dark"] .dropdown-icon-btn {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border-color: var(--border-light);
}
html[data-theme="dark"] .button.secondary:hover:not(:disabled),
html[data-theme="dark"] .header-button:hover,
html[data-theme="dark"] .sidebar-btn:hover,
html[data-theme="dark"] .filter-btn:hover,
html[data-theme="dark"] .stab:hover,
html[data-theme="dark"] .dropdown-icon-btn:hover {
    background-color: var(--bg-hover);
}

/* Notifikasjon */
html[data-theme="dark"] #notification,
html[data-theme="dark"] .notification {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border-color: var(--border-light);
    box-shadow: var(--shadow-strong);
}

/* Lister og rader */
html[data-theme="dark"] .consultation-item,
html[data-theme="dark"] .list-item,
html[data-theme="dark"] .row,
html[data-theme="dark"] tr,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-light);
}
html[data-theme="dark"] .consultation-item:hover,
html[data-theme="dark"] .list-item:hover {
    background-color: var(--bg-hover);
}

/* Settings spesifikt — settings.css bruker mange hardkodede farger */
html[data-theme="dark"] .new-settings-modal-content { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .new-settings-section:hover { background-color: var(--bg-hover); }
html[data-theme="dark"] .new-settings-section-title h3 { color: var(--text-primary); }
html[data-theme="dark"] .new-settings-section-title p,
html[data-theme="dark"] .new-settings-form-label,
html[data-theme="dark"] .new-settings-form-help { color: var(--text-muted); }
html[data-theme="dark"] .new-settings-tab-btn.new-settings-tab-active { background-color: var(--bg-hover); color: var(--primary); }

/* Modal overlay backdrops — Sørg for at backdrop er tilstrekkelig mørk. */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .lm-modal-overlay,
html[data-theme="dark"] .video-modal-backdrop {
    background-color: var(--bg-overlay);
}

/* Material Icons arver color, men sikre at de som hardkoder er synlige */
html[data-theme="dark"] .material-icons {
    color: inherit;
}

/* Splash-skjerm i mørk modus (hvis den fortsatt vises etter applyTheme) */
html[data-theme="dark"] .splash,
html[data-theme="dark"] #splashScreen {
    background-color: var(--bg-page);
    color: var(--text-primary);
}

/* Settings checkbox/radio kort i privacy-tab */
html[data-theme="dark"] .privacy-option,
html[data-theme="dark"] .fk-takst-toggle-row {
    background-color: var(--bg-white);
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* Beta-merker, hint-bokser */
html[data-theme="dark"] .fk-takst-beta-notice {
    background-color: var(--bg-light);
    border-color: var(--border-light);
    color: var(--text-secondary);
}

/* Scrollbar i mørk modus (Webkit) */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-page);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 6px;
    border: 3px solid var(--bg-page);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Scrollbar i mørk modus (Firefox) */
html[data-theme="dark"] {
    scrollbar-color: var(--border-medium) var(--bg-page);
}

/* Mode-badges (helsenettBadge etc.) */
html[data-theme="dark"] .mode-badge {
    background-color: var(--bg-hover);
    color: var(--text-secondary);
    border-color: var(--border-light);
}

/* Onboarding/intro-skjermer */
html[data-theme="dark"] .onboarding,
html[data-theme="dark"] .intro-screen,
html[data-theme="dark"] .welcome-screen {
    background-color: var(--bg-page);
    color: var(--text-primary);
}

/* SVG-ikoner som hardkoder fyll med mørke farger — la dem arve */
html[data-theme="dark"] svg:not([fill]) { fill: currentColor; }

/* Code/pre i mørk modus */
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
    background-color: var(--bg-light);
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* Selection */
html[data-theme="dark"] ::selection {
    background-color: var(--primary);
    color: var(--text-on-primary);
}

/* User menu / switcher / instruction dropdown — bruker tokens men har
   hardkodede border-shorthands i sub-elementer. */
html[data-theme="dark"] .user-menu-divider,
html[data-theme="dark"] .user-switcher-list-divider,
html[data-theme="dark"] .user-menu-item,
html[data-theme="dark"] .user-switcher-item,
html[data-theme="dark"] .instruction-dropdown-list,
html[data-theme="dark"] .instruction-dropdown-list li,
html[data-theme="dark"] .user-switcher-dropdown {
    border-color: var(--border-light);
}
html[data-theme="dark"] .user-menu-item,
html[data-theme="dark"] .user-switcher-item,
html[data-theme="dark"] .instruction-dropdown-list li {
    color: var(--text-primary);
    background-color: transparent;
}
html[data-theme="dark"] .user-menu-item:hover,
html[data-theme="dark"] .user-switcher-item:hover,
html[data-theme="dark"] .instruction-dropdown-list li:hover {
    background-color: var(--bg-hover);
}

/* Tooltip — sirklen som dukker opp på hover av icon-button */
html[data-theme="dark"] .tooltiptext {
    background-color: #2d333b;
    color: var(--text-primary);
}

/* Spinner / loading-tekst */
html[data-theme="dark"] .loading,
html[data-theme="dark"] .consultation-list-loading,
html[data-theme="dark"] .consultation-list-empty-filter,
html[data-theme="dark"] .consultation-list-locked,
html[data-theme="dark"] .consultation-list-error {
    color: var(--text-muted);
    background-color: transparent;
}

/* Setting-grupper på hovedskjermen */
html[data-theme="dark"] .setting-group,
html[data-theme="dark"] .settings-main {
    background-color: transparent;
}
html[data-theme="dark"] .setting-header {
    color: var(--text-secondary);
}

/* Notice banner (informasjonslapp) */
html[data-theme="dark"] .lappen-anchor,
html[data-theme="dark"] .lappen-banner {
    background-color: var(--bg-light);
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* Lukk-knapper i modal-headers — de fleste er små x-er som arver. */
html[data-theme="dark"] .modal-header .close,
html[data-theme="dark"] .new-settings-close {
    color: inherit;
    background-color: transparent;
}
html[data-theme="dark"] .modal-header .close:hover,
html[data-theme="dark"] .new-settings-close:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Header-tag (selve top-headeren) bruker --primary, så den følger temaet
   automatisk via token-flippen. Versjonsbadge inni har hardkodet farge. */
html[data-theme="dark"] header .version-badge {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-on-primary);
}

/* Bilder/logoer som er PNG med farget bakgrunn beholdes som de er.
   Hvis de skal "inverteres" må SVG benyttes. */

/* Hardkodede lyse gradienter i fritekst som ellers ville sett rart ut i mørk modus. */
html[data-theme="dark"] .fritekst-modal-container .fritekst-dropdown-item:hover:not(.fritekst-disabled),
html[data-theme="dark"] .fritekst-modal-container .fritekst-accordion-leaf:hover,
html[data-theme="dark"] .fritekst-modal-container .fritekst-favorite-item:hover,
html[data-theme="dark"] .fritekst-modal-container .fritekst-popular-item:hover,
html[data-theme="dark"] .fritekst-modal-container .fritekst-recent-item:hover {
    background: var(--bg-hover);
    color: var(--fritekst-text-primary);
}
html[data-theme="dark"] .fritekst-modal-container .fritekst-dropdown-item.fritekst-error,
html[data-theme="dark"] .fritekst-modal-container [class*="fritekst-error-banner"] {
    background-color: rgba(248, 81, 73, 0.15);
    color: var(--fritekst-accent-error);
    border-color: rgba(248, 81, 73, 0.3);
}
html[data-theme="dark"] .fritekst-modal-container [class*="fritekst-success"],
html[data-theme="dark"] .fritekst-modal-container [class*="fritekst-warning"] {
    color: var(--fritekst-text-primary);
}

} /* slutt @media not print */
/* ===== clinical-assistant.css ===== */
/* clinical-assistant.css - VERSJON 3.8 */
/* Klinisk Innspill - MDR/EU AI Act-kompatibel */
/* Strukturert observasjonsstøtte - Ikke prioritert - Ikke anbefaling */
/* All classes prefixed with "agent" to avoid conflicts */

/* === DESIGN PHILOSOPHY ===
 * - Nøytral, profesjonell fargepalett (blå/grå toner)
 * - Ingen røde/gule/grønne signalfarger
 * - Ingen prioritering, rangering eller hastegrad
 * - Flat informasjonsstruktur
 * - Rolig, lavmælt autoritet
 */

/* === CSS CUSTOM PROPERTIES === */
:root {
    --agent-primary: #1976d2;
    --agent-primary-light: #42a5f5;
    --agent-primary-dark: #1565c0;
    --agent-surface: #ffffff;
    --agent-surface-variant: #f8f9fa;
    --agent-surface-dim: #f1f3f4;
    --agent-border: #e0e3e7;
    --agent-border-light: #eef0f2;
    --agent-text-primary: #202124;
    --agent-text-secondary: #5f6368;
    --agent-text-tertiary: #80868b;
    --agent-accent: #1a73e8;
    --agent-accent-light: #e8f0fe;
}

/* === MAIN PANEL === */
.agent-clinical-panel {
    position: fixed;
    top: 80px;
    right: 0;
    width: 400px;
    max-width: 95vw;
    height: calc(100vh - 100px);
    background: var(--agent-surface);
    border: 1px solid var(--agent-border);
    border-radius: 16px 0 0 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

.agent-clinical-panel.agent-panel-hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* === PANEL HEADER === */
.agent-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--agent-primary) 0%, var(--agent-primary-light) 100%);
    color: white;
    flex-shrink: 0;
}

.agent-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 15px;
}

.agent-title-icon {
    font-size: 22px;
    opacity: 0.9;
}

.agent-title-text {
    color: white;
    letter-spacing: 0.2px;
}

/* Notification badge - FJERNET RØD FARGE, nå nøytral */
.agent-notification-badge {
    display: none; /* Skjult - ingen telling av "viktige" ting */
}

.agent-panel-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* === PANEL CONTROLS === */
.agent-icon-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0;
}

.agent-icon-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

.agent-icon-btn:active {
    transform: scale(0.96);
}

.agent-icon-btn .material-icons {
    font-size: 18px;
    color: white;
}

.agent-icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === INTENDED USE DISCLAIMER === */
.agent-intended-use {
    padding: 12px 20px;
    background: var(--agent-surface-variant);
    border-bottom: 1px solid var(--agent-border-light);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}

.agent-intended-use .material-icons {
    font-size: 16px;
    color: var(--agent-text-tertiary);
    margin-top: 1px;
    flex-shrink: 0;
}

.agent-intended-use-text {
    font-size: 11px;
    color: var(--agent-text-tertiary);
    line-height: 1.5;
    letter-spacing: 0.1px;
}

.agent-intended-use-text strong {
    color: var(--agent-text-secondary);
    font-weight: 500;
}

/* === PANEL CONTENT === */
.agent-panel-content {
    flex: 1;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.agent-panel-content.agent-content-collapsed {
    max-height: 0;
    opacity: 0;
}

.agent-panel-content.agent-content-expanded {
    max-height: 100vh;
    opacity: 1;
}

/* === ANALYSIS STATUS === */
.agent-analysis-status {
    padding: 10px 20px;
    background: var(--agent-surface-dim);
    color: var(--agent-text-secondary);
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid var(--agent-border-light);
    flex-shrink: 0;
}

.agent-analysis-status.agent-status-analyzing {
    background: var(--agent-accent-light);
    color: var(--agent-accent);
}

.agent-analysis-status.agent-status-completed {
    background: var(--agent-surface-dim);
    color: var(--agent-text-secondary);
}

.agent-analysis-status.agent-status-error {
    background: #fce8e6;
    color: #c5221f;
}

/* === INSIGHTS CONTAINER === */
.agent-insights-container {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.agent-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--agent-text-secondary);
    height: 100%;
    min-height: 200px;
}

.agent-empty-state .material-icons {
    font-size: 48px;
    color: var(--agent-border);
    margin-bottom: 16px;
}

.agent-empty-state p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    max-width: 260px;
}

/* === INSIGHTS CONTENT === */
.agent-insights-content {
    padding: 20px;
}

/* FJERNET: Urgency header - ingen hastegrad */
.agent-insights-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--agent-border-light);
}

.agent-timestamp {
    font-size: 12px;
    color: var(--agent-text-tertiary);
    font-weight: 400;
}

/* === INSIGHT SECTIONS - UNIFIED NEUTRAL STYLING === */
.agent-insight-section {
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1px solid var(--agent-border);
    overflow: hidden;
    background: var(--agent-surface);
}

.agent-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--agent-surface-variant);
    border-bottom: 1px solid var(--agent-border-light);
}

.agent-section-header .material-icons {
    font-size: 18px;
    color: var(--agent-primary);
}

.agent-section-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--agent-text-primary);
    letter-spacing: 0.1px;
}

/* === OPPMERKSOMHETSPUNKTER (tidligere "Røde flagg") === */
.agent-attention-points .agent-section-header {
    background: var(--agent-surface-variant);
}

.agent-attention-points .agent-section-header .material-icons {
    color: var(--agent-primary);
}

/* === MULIGE FORENLIGE TILSTANDER (tidligere "Differensialdiagnoser") === */
.agent-conditions .agent-section-header .material-icons {
    color: var(--agent-primary-dark);
}

/* === LEGEMIDDELFAKTA (tidligere "Behandlingsforslag") === */
.agent-medications .agent-section-header {
    background: var(--agent-surface-variant);
}

.agent-medications .agent-section-header .material-icons {
    color: var(--agent-primary);
}

.agent-medication-list {
    padding: 0;
}

.agent-medication-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--agent-border-light);
    background: var(--agent-surface);
    transition: background-color 0.15s ease;
}

.agent-medication-item:last-child {
    border-bottom: none;
}

.agent-medication-item:hover {
    background: var(--agent-surface-variant);
}

.agent-medication-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.agent-medication-header strong {
    color: var(--agent-text-primary);
    font-size: 14px;
    font-weight: 600;
}

/* === COPY DOSAGE BUTTON - NØYTRAL STYLING === */
.agent-copy-btn {
    background: var(--agent-surface-dim);
    color: var(--agent-text-secondary);
    border: 1px solid var(--agent-border);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.agent-copy-btn:hover {
    background: var(--agent-accent-light);
    color: var(--agent-accent);
    border-color: var(--agent-accent);
}

.agent-copy-btn .material-icons {
    font-size: 14px;
}

.agent-medication-details {
    font-size: 13px;
    line-height: 1.6;
    color: var(--agent-text-secondary);
}

.agent-medication-details > div {
    margin-bottom: 4px;
}

.agent-medication-details > div:last-child {
    margin-bottom: 0;
}

.agent-medication-details strong {
    color: var(--agent-text-primary);
    font-weight: 500;
}

/* === PÅGÅENDE MEDIKAMENTER === */
.agent-current-meds .agent-section-header .material-icons {
    color: var(--agent-primary);
}

.agent-current-med-item {
    background-color: var(--agent-surface-variant);
    padding: 10px 14px;
    border-radius: 8px;
    margin: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.15s ease;
}

.agent-current-med-item:hover {
    background-color: var(--agent-surface-dim);
}

.agent-current-med-item:last-child {
    margin-bottom: 12px;
}

.agent-current-med-item .material-icons {
    color: var(--agent-primary);
    font-size: 16px;
}

/* === INTERAKSJONER - UTEN ALVORLIGHETSGRAD === */
.agent-interactions .agent-section-header .material-icons {
    color: var(--agent-primary);
}

.agent-interaction-list {
    padding: 0;
}

.agent-interaction-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--agent-border-light);
    background: var(--agent-surface);
}

.agent-interaction-item:last-child {
    border-bottom: none;
}

/* FJERNET: Severity-farger og badges */
.agent-interaction-header {
    margin-bottom: 8px;
}

.agent-interaction-header strong {
    color: var(--agent-text-primary);
    font-weight: 600;
    font-size: 13px;
}

.agent-interaction-description {
    font-size: 13px;
    color: var(--agent-text-secondary);
    margin-bottom: 6px;
    line-height: 1.5;
}

.agent-interaction-note {
    font-size: 12px;
    color: var(--agent-text-tertiary);
    line-height: 1.5;
}

.agent-interaction-note strong {
    color: var(--agent-text-secondary);
    font-weight: 500;
}

/* === STANDARD LISTS === */
.agent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.agent-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--agent-border-light);
    transition: background-color 0.15s ease;
    font-size: 13px;
    line-height: 1.5;
    color: var(--agent-text-secondary);
}

.agent-list li:last-child {
    border-bottom: none;
}

.agent-list li:hover {
    background: var(--agent-surface-variant);
}

.agent-list .material-icons {
    font-size: 16px;
    color: var(--agent-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Alle liste-items har samme nøytrale styling */
.agent-attention-item .material-icons,
.agent-condition-item .material-icons,
.agent-finding-item .material-icons,
.agent-investigation-item .material-icons,
.agent-missing-item .material-icons {
    color: var(--agent-primary);
}

/* FJERNET: Blinkende animasjoner */

/* === DATA LIMITATIONS NOTICE === */
.agent-data-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--agent-surface-variant);
    border-radius: 8px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--agent-text-tertiary);
    line-height: 1.5;
}

.agent-data-notice .material-icons {
    font-size: 16px;
    color: var(--agent-text-tertiary);
    flex-shrink: 0;
    margin-top: 1px;
}

/* FJERNET: Confidence indicator */

/* === PANEL FOOTER === */
.agent-panel-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    background: var(--agent-surface-variant);
    border-top: 1px solid var(--agent-border-light);
    flex-shrink: 0;
}

.agent-footer-info {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--agent-text-tertiary);
    font-size: 11px;
}

.agent-footer-info .material-icons {
    font-size: 14px;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .agent-clinical-panel {
        width: 100vw;
        top: 60px;
        height: calc(100vh - 60px);
        border-radius: 0;
    }
    
    .agent-panel-controls {
        gap: 4px;
    }
    
    .agent-icon-btn {
        width: 32px;
        height: 32px;
    }
    
    .agent-copy-btn {
        padding: 5px 10px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .agent-insights-content {
        padding: 16px;
    }
    
    .agent-medication-item {
        padding: 12px;
    }
    
    .agent-medication-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .agent-copy-btn {
        width: 100%;
        justify-content: center;
    }
    
    .agent-panel-header {
        padding: 12px 16px;
    }
    
    .agent-panel-title {
        font-size: 14px;
    }
    
    .agent-intended-use {
        padding: 10px 16px;
    }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    .agent-clinical-panel,
    .agent-panel-content,
    .agent-icon-btn,
    .agent-copy-btn,
    .agent-medication-item,
    .agent-list li {
        transition: none;
    }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    .agent-clinical-panel {
        border: 2px solid var(--agent-text-primary);
    }
    
    .agent-icon-btn {
        border: 2px solid rgba(255, 255, 255, 0.8);
    }
    
    .agent-insight-section {
        border: 2px solid var(--agent-border);
    }
}

/* === PRINT STYLES === */
@media print {
    .agent-clinical-panel {
        display: none;
    }
}

/* Dark mode-tokens for agent-namespace flyttet til cssindex.css under
   html[data-theme="dark"] for sentralisert temahåndtering. */
/* ===== settings.css ===== */
/* Modern Professional Settings Interface - new-settings prefix */

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

.new-settings-modal-content {
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    width: 90vw;
    max-width: 900px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ================================
   HEADER
   ================================ */

.new-settings-header {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.new-settings-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="80" cy="40" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.4;
}

.new-settings-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    position: relative;
    z-index: 1;
}

.new-settings-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.new-settings-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.new-settings-icon .material-icons {
    font-size: 24px;
    color: white;
}

.new-settings-title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.new-settings-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.new-settings-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.new-settings-close .material-icons {
    color: white;
    font-size: 20px;
}

/* ================================
   BODY
   ================================ */

.new-settings-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ================================
   TABS
   ================================ */

.new-settings-tabs {
    background: var(--bg-light);
    border-right: 1px solid #e2e8f0;
    width: 240px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 4px;
    overflow-y: auto;
}

.new-settings-tab-btn {
    background: transparent;
    border: none;
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    min-height: 56px;
}

.new-settings-tab-btn:hover {
    background: #e2e8f0;
    color: var(--text-secondary);
    transform: translateX(2px);
}

.new-settings-tab-btn.new-settings-tab-active {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.new-settings-tab-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.new-settings-tab-icon .material-icons {
    font-size: 20px;
}

.new-settings-tab-text {
    flex: 1;
}

/* ================================
   CONTENT AREA
   ================================ */

.new-settings-content {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
    background: var(--bg-white);
}

/* ================================
   SECTIONS
   ================================ */

.new-settings-section {
    background: var(--bg-white);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 24px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.new-settings-section:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.new-settings-section-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.new-settings-section-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.new-settings-section-icon .material-icons {
    font-size: 24px;
    color: white;
}

.new-settings-section-title h3 {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.new-settings-section-title p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}

.new-settings-section-content {
    padding: 24px;
}

/* ================================
   FORMS
   ================================ */

.new-settings-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.new-settings-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.new-settings-form-group-full {
    grid-column: 1 / -1;
}

.new-settings-label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.new-settings-label-text {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.new-settings-required {
    color: #ef4444;
    font-size: 12px;
}

.new-settings-optional {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}

.new-settings-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.new-settings-input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--bg-white);
    color: var(--text-primary);
}

.new-settings-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.new-settings-input-icon {
    position: absolute;
    left: 16px;
    color: var(--text-muted);
    font-size: 20px;
    z-index: 1;
}

.new-settings-input-action {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.new-settings-input-action:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* ================================
   SELECT INPUTS
   ================================ */

.new-settings-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.new-settings-select {
    width: 100%;
    padding: 12px 48px 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    background: var(--bg-white);
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    transition: all 0.2s ease;
}

.new-settings-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.new-settings-select-icon {
    position: absolute;
    right: 16px;
    color: var(--text-muted);
    font-size: 20px;
    pointer-events: none;
}

/* ================================
   CHECKBOXES
   ================================ */

.new-settings-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.new-settings-checkbox {
    display: none;
}

.new-settings-checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.new-settings-checkbox-check {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: var(--bg-white);
}

.new-settings-checkbox:checked + .new-settings-checkbox-label .new-settings-checkbox-check {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-color: #2563eb;
}

.new-settings-checkbox-check .material-icons {
    font-size: 14px;
    color: transparent;
    transition: all 0.2s ease;
}

.new-settings-checkbox:checked + .new-settings-checkbox-label .new-settings-checkbox-check .material-icons {
    color: white;
}

/* ================================
   FORM HELP TEXT
   ================================ */

.new-settings-form-help {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 4px;
}

.new-settings-form-help .material-icons {
    font-size: 16px;
    color: var(--text-muted);
    margin-top: 1px;
    flex-shrink: 0;
}

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

.new-settings-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    min-height: 44px;
    position: relative;
    overflow: hidden;
}

.new-settings-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.new-settings-button:hover:before {
    left: 100%;
}

.new-settings-button-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.new-settings-button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.new-settings-button-primary:active {
    transform: translateY(0);
}

.new-settings-button-secondary {
    background: var(--bg-white);
    color: var(--text-secondary);
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.new-settings-button-secondary:hover {
    background: var(--bg-light);
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.new-settings-button-large {
    padding: 16px 32px;
    font-size: 16px;
    min-height: 56px;
}

.new-settings-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.new-settings-button .material-icons {
    font-size: 18px;
}

/* ================================
   ACTIONS
   ================================ */

.new-settings-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

/* ================================
   TEST RESULTS
   ================================ */

.new-settings-test-result {
    margin-top: 16px;
    padding: 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
}

.new-settings-test-success {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid #86efac;
}

.new-settings-test-error {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.new-settings-test-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
}

.new-settings-test-icon .material-icons {
    font-size: 20px;
}

/* ================================
   STATUS CARDS
   ================================ */

.new-settings-status-card {
    background: var(--bg-light);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}

.new-settings-status-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
}

.new-settings-status-success {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border: 1px solid #86efac;
}

.new-settings-status-error {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
}

.new-settings-status-warning {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    border: 1px solid #fde047;
}

.new-settings-status-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.new-settings-status-success .new-settings-status-icon {
    background: #16a34a;
    color: white;
}

.new-settings-status-error .new-settings-status-icon {
    background: #dc2626;
    color: white;
}

.new-settings-status-warning .new-settings-status-icon {
    background: #ca8a04;
    color: white;
}

.new-settings-status-content h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

.new-settings-status-content p {
    margin: 0 0 4px 0;
    font-size: 14px;
    opacity: 0.9;
}

.new-settings-status-content small {
    font-size: 12px;
    opacity: 0.7;
}

/* ================================
   LOADING STATES
   ================================ */

.new-settings-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14px;
}

.new-settings-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top: 2px solid #2563eb;
    border-radius: 50%;
    animation: new-settings-spin 1s linear infinite;
}

@keyframes new-settings-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ================================
   MICROPHONE TEST
   ================================ */

.new-settings-microphone-test {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.new-settings-mic-test-result {
    background: var(--bg-light);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.new-settings-audio-level-bar {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.new-settings-audio-level-fill {
    height: 100%;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transition: width 0.1s ease;
    border-radius: 4px;
}

/* ================================
   STORAGE INFO
   ================================ */

.new-settings-storage-info {
    background: var(--bg-light);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
}

.new-settings-storage-info h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.new-settings-storage-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.new-settings-storage-stat {
    background: var(--bg-white);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.new-settings-stat-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-settings-stat-icon .material-icons {
    font-size: 18px;
    color: white;
}

.new-settings-stat-content {
    flex: 1;
}

.new-settings-stat-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.new-settings-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2px;
}

/* ================================
   ONBOARDING
   ================================ */

.new-settings-onboarding {
    max-width: 600px;
    margin: 0 auto;
}

.new-settings-onboarding-header {
    text-align: center;
    margin-bottom: 32px;
    margin-top: 16px;
    padding: 24px 24px 32px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.new-settings-onboarding-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

/* Når logoen brukes som bilde */
.new-settings-onboarding-icon img {
    height: 80px;
    width: auto;
    background: var(--bg-white);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.new-settings-onboarding-icon .material-icons {
    font-size: 40px;
    color: white;
}

.new-settings-onboarding-header h3 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.new-settings-onboarding-header p {
    margin: 0;
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.5;
}

.new-settings-onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.new-settings-step {
    background: var(--bg-white);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.new-settings-step:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.new-settings-step-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.new-settings-step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.new-settings-step-title h4 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.new-settings-step-title p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.4;
}

.new-settings-step-content {
    padding: 24px;
}

.new-settings-onboarding-footer {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

/* ================================
   ABOUT PAGE
   ================================ */

.new-settings-about-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    padding: 32px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.new-settings-about-logo {
    flex-shrink: 0;
}

.new-settings-logo-image {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.new-settings-about-info h3 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.new-settings-version-badge {
    display: inline-block;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

.new-settings-about-info p {
    margin: 0;
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.5;
}

.new-settings-about-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.new-settings-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.new-settings-feature-card {
    background: var(--bg-white);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
}

.new-settings-feature-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.new-settings-feature-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.new-settings-feature-icon .material-icons {
    font-size: 24px;
    color: white;
}

.new-settings-feature-card h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.new-settings-feature-card p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.4;
}

.new-settings-tech-info {
    background: var(--bg-light);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
}

.new-settings-tech-info h4 {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.new-settings-tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.new-settings-tech-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}

.new-settings-tech-item:last-child {
    border-bottom: none;
}

.new-settings-tech-label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.new-settings-tech-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}

.new-settings-support-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.new-settings-support-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.new-settings-support-icon .material-icons {
    font-size: 24px;
    color: white;
}

.new-settings-support-content h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #0c4a6e;
}

.new-settings-support-content p {
    margin: 0;
    font-size: 14px;
    color: #075985;
    line-height: 1.5;
}

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

@media (max-width: 768px) {
    .new-settings-modal-content {
        width: 95vw;
        max-height: 90vh;
    }
    
    .new-settings-body {
        flex-direction: column;
    }
    
    .new-settings-tabs {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 16px;
    }
    
    .new-settings-tab-btn {
        flex-shrink: 0;
        min-width: 120px;
    }
    
    .new-settings-content {
        padding: 16px;
    }
    
    .new-settings-form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .new-settings-header-content {
        padding: 16px 20px;
    }
    
    .new-settings-title {
        font-size: 20px;
    }
    
    .new-settings-storage-stats {
        grid-template-columns: 1fr;
    }
    
    .new-settings-feature-grid {
        grid-template-columns: 1fr;
    }
    
    .new-settings-tech-grid {
        grid-template-columns: 1fr;
    }
    
    .new-settings-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .new-settings-button {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .new-settings-about-header {
        flex-direction: column;
        text-align: center;
    }
    
    .new-settings-support-card {
        flex-direction: column;
        text-align: center;
    }
    
    .new-settings-step-header {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}
/* ================================
   MODE SELECTION CARDS
   ================================ */

.new-settings-mode-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.new-settings-mode-card {
    position: relative;
    cursor: pointer;
}

.new-settings-mode-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.new-settings-mode-card-content {
    background: var(--bg-white);
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.new-settings-mode-card:hover .new-settings-mode-card-content {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
}

.new-settings-mode-card input[type="radio"]:checked + .new-settings-mode-card-content {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
}

.new-settings-mode-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.new-settings-mode-icon .material-icons {
    font-size: 28px;
    color: white;
}

.new-settings-mode-info h4 {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.new-settings-mode-info > p {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: var(--text-muted);
}

.new-settings-mode-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.new-settings-mode-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 6px 0;
}

.new-settings-mode-features li .material-icons {
    font-size: 16px;
    color: #22c55e;
}

.new-settings-mode-features li.disabled {
    color: var(--text-muted);
}

.new-settings-mode-features li.disabled .material-icons {
    color: #cbd5e1;
}

.new-settings-mode-requirement {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-light);
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: auto;
}

.new-settings-mode-requirement .material-icons {
    font-size: 14px;
    color: var(--text-muted);
}

.new-settings-mode-check {
    position: absolute;
    top: 16px;
    right: 16px;
    opacity: 0;
    transition: all 0.3s ease;
}

.new-settings-mode-check .material-icons {
    font-size: 28px;
    color: #2563eb;
}

.new-settings-mode-card input[type="radio"]:checked + .new-settings-mode-card-content .new-settings-mode-check {
    opacity: 1;
}

.new-settings-mode-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fef3c7;
    color: #92400e;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 20px;
    border: 1px solid #fcd34d;
}

.new-settings-mode-warning .material-icons {
    font-size: 20px;
    color: #d97706;
}

/* ================================
   DATA / DANGER SECTION
   ================================ */

.new-settings-section-danger {
    border-color: #fecaca;
}

.new-settings-section-danger:hover {
    border-color: #fca5a5;
}

.new-settings-danger-box {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.new-settings-danger-box h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #991b1b;
}

.new-settings-danger-box h4 .material-icons {
    font-size: 20px;
    color: #dc2626;
}

.new-settings-danger-box p {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #7f1d1d;
}

.new-settings-danger-box ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.new-settings-danger-box ul li {
    font-size: 13px;
    color: #991b1b;
    padding: 4px 0;
}

.new-settings-danger-warning {
    color: #dc2626 !important;
    font-weight: 600;
}

/* ================================
   SUPPORT LINK
   ================================ */

.new-settings-support-link {
    display: inline-block;
    margin-top: 8px;
    color: #0284c7;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.new-settings-support-link:hover {
    color: #0369a1;
    text-decoration: underline;
}

/* ================================
   RESPONSIVE MODE CARDS
   ================================ */

@media (max-width: 640px) {
    .new-settings-mode-cards {
        grid-template-columns: 1fr;
    }
}

/* ================================
   FACTORY RESET MODAL
   ================================ */

.factory-reset-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.factory-reset-modal-overlay.factory-reset-modal-visible {
    opacity: 1;
}

.factory-reset-modal-overlay.factory-reset-modal-closing {
    opacity: 0;
}

.factory-reset-modal {
    background: var(--bg-white);
    border-radius: 20px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.factory-reset-modal-visible .factory-reset-modal {
    transform: scale(1) translateY(0);
}

.factory-reset-modal-closing .factory-reset-modal {
    transform: scale(0.9) translateY(20px);
}

.factory-reset-modal-header {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    padding: 32px;
    text-align: center;
    position: relative;
}

.factory-reset-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
    opacity: 0.5;
}

.factory-reset-icon-container {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    position: relative;
    animation: factory-reset-pulse 2s infinite;
}

@keyframes factory-reset-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}

.factory-reset-icon-container .material-icons {
    font-size: 36px;
    color: white;
}

.factory-reset-modal-header h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
    position: relative;
}

.factory-reset-modal-header p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
}

.factory-reset-modal-body {
    padding: 24px;
}

.factory-reset-warning-box {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.factory-reset-warning-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #991b1b;
    margin-bottom: 16px;
}

.factory-reset-warning-title .material-icons {
    font-size: 20px;
    color: #dc2626;
}

.factory-reset-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.factory-reset-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: #7f1d1d;
    border-bottom: 1px solid rgba(220, 38, 38, 0.1);
}

.factory-reset-list li:last-child {
    border-bottom: none;
}

.factory-reset-list li .material-icons {
    font-size: 18px;
    color: #dc2626;
    opacity: 0.7;
}

.factory-reset-confirm-section {
    margin-top: 20px;
}

.factory-reset-confirm-section label {
    display: block;
    font-size: 14px;
    color: #374151;
    margin-bottom: 10px;
}

.factory-reset-confirm-section label strong {
    color: #dc2626;
    font-family: monospace;
    background: #fef2f2;
    padding: 2px 8px;
    border-radius: 4px;
}

.factory-reset-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 16px;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.factory-reset-input:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.factory-reset-input::placeholder {
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-muted);
}

.factory-reset-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px 24px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.factory-reset-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.factory-reset-btn-cancel {
    background: var(--bg-white);
    color: #374151;
    border: 2px solid #e5e7eb;
}

.factory-reset-btn-cancel:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.factory-reset-btn-danger {
    background: #e5e7eb;
    color: var(--text-muted);
    cursor: not-allowed;
}

.factory-reset-btn-danger:disabled {
    background: #e5e7eb;
    color: var(--text-muted);
}

.factory-reset-btn-danger.factory-reset-btn-ready {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.factory-reset-btn-danger.factory-reset-btn-ready:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
}

/* Success state */
.factory-reset-success {
    padding: 48px 32px;
    text-align: center;
}

.factory-reset-success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: factory-reset-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes factory-reset-success-pop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.factory-reset-success-icon .material-icons {
    font-size: 40px;
    color: white;
}

.factory-reset-success h2 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.factory-reset-success p {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--text-muted);
}

.factory-reset-progress {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.factory-reset-progress-bar {
    height: 100%;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 3px;
    animation: factory-reset-progress 2s ease-out forwards;
}

@keyframes factory-reset-progress {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* ================================
   AUTO-HENT TOKEN SECTION
   Prefix: auto-hent-
   ================================ */

.auto-hent-section {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    border: 1px solid #7dd3fc;
}

.auto-hent-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(125, 211, 252, 0.5);
}

.auto-hent-header .material-icons {
    font-size: 28px;
    color: #0284c7;
}

.auto-hent-title {
    font-size: 1rem;
    font-weight: 600;
    color: #0c4a6e;
}

.auto-hent-subtitle {
    font-size: 0.8rem;
    color: #0369a1;
}

.auto-hent-token-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.auto-hent-token-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--bg-white);
    border: 2px solid #e0f2fe;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auto-hent-token-item:hover {
    border-color: #38bdf8;
    background: #f0f9ff;
    transform: translateX(4px);
}

.auto-hent-token-item.auto-hent-token-selected {
    border-color: #0284c7;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
}

.auto-hent-token-radio {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.auto-hent-token-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.auto-hent-token-radio-check {
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
    background: var(--bg-white);
    transition: all 0.2s ease;
}

.auto-hent-token-item.auto-hent-token-selected .auto-hent-token-radio-check {
    border-color: #0284c7;
    background: #0284c7;
    box-shadow: inset 0 0 0 4px #ffffff;
}

.auto-hent-token-info {
    flex: 1;
    min-width: 0;
}

.auto-hent-token-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.auto-hent-token-scope {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.auto-hent-token-icon {
    font-size: 24px;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.auto-hent-token-item.auto-hent-token-selected .auto-hent-token-icon {
    color: #0284c7;
}

.auto-hent-fingerprint {
    margin-top: 1rem;
    padding: 0.875rem;
    background: var(--bg-white);
    border-radius: 8px;
    border: 1px solid #e0f2fe;
}

.auto-hent-fingerprint-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #0369a1;
    margin-bottom: 0.5rem;
}

.auto-hent-fingerprint-label .material-icons {
    font-size: 16px;
}

.auto-hent-fingerprint-value {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.7rem;
    color: var(--text-secondary);
    word-break: break-all;
    padding: 0.5rem;
    background: var(--bg-light);
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    user-select: all;
}

.auto-hent-status {
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auto-hent-status .material-icons {
    font-size: 18px;
}

.auto-hent-status-success {
    background: #dcfce7;
    color: #166534;
}

.auto-hent-status-warning {
    background: #fef3c7;
    color: #92400e;
}

.auto-hent-status-error {
    background: #fee2e2;
    color: #991b1b;
}

/* Loading state for token list */
.auto-hent-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: #0369a1;
}

.auto-hent-loading .new-settings-spinner {
    width: 24px;
    height: 24px;
    border-width: 3px;
    border-color: #0284c7;
    border-top-color: transparent;
}

/* Empty state */
.auto-hent-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
}

.auto-hent-empty .material-icons {
    font-size: 48px;
    color: #cbd5e1;
    margin-bottom: 0.5rem;
}

.auto-hent-empty-text {
    font-size: 0.9rem;
}

/* Scrollbar styling for token list */
.auto-hent-token-list::-webkit-scrollbar {
    width: 6px;
}

.auto-hent-token-list::-webkit-scrollbar-track {
    background: var(--bg-hover);
    border-radius: 3px;
}

.auto-hent-token-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.auto-hent-token-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}





/* ===========================================
   ONBOARDING - TRANSKRIPSJONSVALG KORT
   =========================================== */

.new-settings-transcription-choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.new-settings-transcription-card {
    position: relative;
    cursor: pointer;
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    padding: 20px;
    background: var(--card-bg, #ffffff);
    transition: all 0.2s ease;
}

.new-settings-transcription-card:hover {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.new-settings-transcription-card.selected {
    border-color: var(--primary-color, #2563eb);
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}

/* Checkmark for valgt transcription-card */
.new-settings-transcription-card::after {
    content: 'check_circle';
    font-family: 'Material Icons';
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 24px;
    color: #2563eb;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.new-settings-transcription-card.selected::after {
    opacity: 1;
    transform: scale(1);
}

.new-settings-transcription-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.new-settings-transcription-card-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.new-settings-transcription-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary-color, #2563eb);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-settings-transcription-card-icon .material-icons {
    font-size: 24px;
}

.new-settings-transcription-card.selected .new-settings-transcription-card-icon {
    background: var(--primary-dark, #1d4ed8);
}

.new-settings-transcription-card-info h5 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.new-settings-transcription-card-info p {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--text-secondary, #666);
    line-height: 1.4;
}

.new-settings-transcription-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.new-settings-transcription-features li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary, #666);
}

.new-settings-transcription-features li .material-icons {
    font-size: 14px;
    color: var(--success-color, #22c55e);
}


/* ===========================================
   ONBOARDING - PIN-STEG (FREMHEVET)
   =========================================== */

.new-settings-step-highlight {
    background: linear-gradient(135deg, var(--primary-light, #eff6ff) 0%, #f8fafc 100%);
    border: 2px solid var(--primary-color, #2563eb);
    border-radius: 16px;
    padding: 24px;
}

.new-settings-pin-explanation {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--bg-white);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color, #e0e0e0);
}

.new-settings-pin-explanation-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-color, #2563eb);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-settings-pin-explanation-icon .material-icons {
    font-size: 24px;
}

.new-settings-pin-explanation-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 4px;
}

.new-settings-pin-explanation-text p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, #666);
    line-height: 1.5;
}

.new-settings-pin-form-large {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 400px;
    margin: 0 auto;
}

.new-settings-input-large {
    background: var(--bg-white);
}

.new-settings-input-large .new-settings-input {
    font-size: 24px;
    letter-spacing: 8px;
    text-align: center;
    padding: 16px 20px 16px 48px;
    height: auto;
}

.new-settings-input-pin {
    font-family: monospace;
}

.new-settings-pin-tips {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--warning-light, #fefce8);
    border: 1px solid var(--warning-color, #eab308);
    border-radius: 8px;
    font-size: 12px;
    color: var(--warning-dark, #a16207);
}

.new-settings-pin-tips .material-icons {
    font-size: 18px;
    color: var(--warning-color, #eab308);
}


/* ===========================================
   ONBOARDING - NAVIGASJONSKNAPPER
   =========================================== */

.new-settings-onboarding-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.new-settings-onboarding-footer .new-settings-button {
    min-width: 140px;
}


/* ===========================================
   RESPONSIV TILPASNING
   =========================================== */

@media (max-width: 600px) {
    .new-settings-transcription-choice {
        grid-template-columns: 1fr;
    }
    
    .new-settings-transcription-card-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .new-settings-transcription-features {
        align-items: center;
    }
    
    .new-settings-pin-form-large {
        grid-template-columns: 1fr;
        max-width: 200px;
    }
    
    .new-settings-pin-explanation {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .new-settings-onboarding-footer {
        flex-direction: column;
    }
    
    .new-settings-onboarding-footer .new-settings-button {
        width: 100%;
    }
}
/* =============================================================================
   AUTO-SAVE API KEY STATUS INDICATORS
   Legg til dette i settings.css eller cssindex.css
   ============================================================================= */

/* Wrapper for input med status */
.new-settings-input-with-status {
    position: relative;
    display: flex;
    align-items: center;
}

.new-settings-input-with-status .new-settings-input {
    flex: 1;
    padding-right: 120px; /* Plass til status-indikator */
}

/* Status-indikator ved API-nøkkel felt */
.api-key-status {
    position: absolute;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    pointer-events: none;
}

.api-key-status .material-icons {
    font-size: 18px;
}

/* Suksess - grønn */
.api-key-status.status-success {
    color: #2e7d32;
    background: rgba(46, 125, 50, 0.1);
}

.api-key-status.status-success .material-icons {
    color: #4caf50;
}

/* Feil - rød */
.api-key-status.status-error {
    color: #c62828;
    background: rgba(198, 40, 40, 0.1);
}

.api-key-status.status-error .material-icons {
    color: #f44336;
}

/* Lagrer - blå/grå */
.api-key-status.status-saving {
    color: #1565c0;
    background: rgba(21, 101, 192, 0.1);
}

.api-key-status.status-saving .material-icons {
    color: #2196f3;
    animation: spin 1s linear infinite;
}

/* Klar til lagring - oransje */
.api-key-status.status-ready {
    color: #e65100;
    background: rgba(230, 81, 0, 0.1);
}

.api-key-status.status-ready .material-icons {
    color: #ff9800;
}

/* Skjult */
.api-key-status.status-hidden {
    display: none;
}

/* Spinner animasjon */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Input-felt styling ved ulike statuser */
.new-settings-input-with-status:has(.status-success) .new-settings-input {
    border-color: #4caf50;
}

.new-settings-input-with-status:has(.status-error) .new-settings-input {
    border-color: #f44336;
}

.new-settings-input-with-status:has(.status-saving) .new-settings-input {
    border-color: #2196f3;
}

/* Fallback for browsers that don't support :has() */
.new-settings-input.input-success {
    border-color: #4caf50 !important;
}

.new-settings-input.input-error {
    border-color: #f44336 !important;
}

.new-settings-input.input-saving {
    border-color: #2196f3 !important;
}


/* ===========================================
   TOGGLE SWITCH - HELSENETT
   =========================================== */

.new-settings-toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.new-settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.new-settings-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cbd5e1;
    border-radius: 28px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.new-settings-toggle-slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: var(--bg-white);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Checked state */
.new-settings-toggle input:checked + .new-settings-toggle-slider {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(37, 99, 235, 0.3);
}

.new-settings-toggle input:checked + .new-settings-toggle-slider::before {
    transform: translateX(24px);
}

/* Focus state for accessibility */
.new-settings-toggle input:focus-visible + .new-settings-toggle-slider {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Hover state */
.new-settings-toggle:hover .new-settings-toggle-slider {
    background: #94a3b8;
}

.new-settings-toggle:hover input:checked + .new-settings-toggle-slider {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
}

/* Toggle row container */
.new-settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.new-settings-toggle-row:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.new-settings-toggle-row:has(input:checked) {
    border-color: #2563eb;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.new-settings-toggle-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.new-settings-toggle-label .material-icons {
    font-size: 22px;
    color: #2563eb;
}

.new-settings-toggle-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
    padding-left: 2px;
}

/* Active/enabled indicator dot */
.new-settings-toggle-row:has(input:checked)::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.new-settings-toggle-row {
    position: relative;
}

/* ===========================================
   TOGGLE SWITCH - HELSENETT
   =========================================== */

.new-settings-toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.new-settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.new-settings-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cbd5e1;
    border-radius: 28px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.new-settings-toggle-slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: var(--bg-white);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.new-settings-toggle input:checked + .new-settings-toggle-slider {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(37, 99, 235, 0.3);
}

.new-settings-toggle input:checked + .new-settings-toggle-slider::before {
    transform: translateX(24px);
}

.new-settings-toggle input:focus-visible + .new-settings-toggle-slider {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.new-settings-toggle:hover .new-settings-toggle-slider {
    background: #94a3b8;
}

.new-settings-toggle:hover input:checked + .new-settings-toggle-slider {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
}

.new-settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.new-settings-toggle-row:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.new-settings-toggle-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.new-settings-toggle-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
    padding-left: 2px;
}

/* ===========================================
   ONBOARDING AI PROVIDER CHOICE CARDS
   Steg 4: Valg mellom server og egen Bedrock-nøkkel
   =========================================== */

.new-settings-onboarding-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.new-settings-onboarding-choice-card {
    position: relative;
    cursor: pointer;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 20px;
    background: var(--bg-white);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.new-settings-onboarding-choice-card:hover {
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    transform: translateY(-2px);
}

.new-settings-onboarding-choice-card.selected {
    border-color: #2563eb;
    border-width: 3px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25);
    transform: translateY(-2px);
}

.new-settings-onboarding-choice-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.new-settings-onboarding-choice-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.new-settings-onboarding-choice-icon {
    font-size: 40px;
    color: #2563eb;
    margin-bottom: 8px;
}

.new-settings-onboarding-choice-card.selected .new-settings-onboarding-choice-icon {
    color: #1d4ed8;
}

.new-settings-onboarding-choice-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.new-settings-onboarding-choice-description {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 200px;
}

.new-settings-onboarding-choice-card.selected .new-settings-onboarding-choice-description {
    color: var(--text-secondary);
}

/* Sjekkmerke i hjørnet */
.new-settings-onboarding-choice-check {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 24px;
    color: #2563eb;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.new-settings-onboarding-choice-card.selected .new-settings-onboarding-choice-check {
    opacity: 1;
    transform: scale(1);
}

/* Focus state for tastaturnavigasjon */
.new-settings-onboarding-choice-card:focus-within {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Responsiv - stack på mobil */
@media (max-width: 600px) {
    .new-settings-onboarding-choice-grid {
        grid-template-columns: 1fr;
    }
    
    .new-settings-onboarding-choice-card {
        padding: 20px 16px;
    }
    
    .new-settings-onboarding-choice-description {
        max-width: none;
    }
}
/* ===== fritekst.css ===== */
/* ==========================================================================
   FRITEKST KI MODAL CSS - Komplett isolert versjon 
   ALLE selektorer er prefikset med .fritekst- eller inne i .fritekst-modal-container
   ========================================================================== */

/* === FRITEKST ISOLERTE THEME VARIABLES === */
.fritekst-modal-container {
  --fritekst-primary: #1976d2; 
  --fritekst-primary-light: #e3f2fd; 
  --fritekst-primary-dark: #0d47a1; 
  --fritekst-secondary: #00897b;
  --fritekst-accent-success: #2e7d32; 
  --fritekst-accent-warning: #ffc107; 
  --fritekst-accent-error: #d32f2f; 
  --fritekst-accent-info: #546e7a;
  --fritekst-text-primary: #212121; 
  --fritekst-text-secondary: #424242; 
  --fritekst-text-muted: #757575; 
  --fritekst-text-on-primary: #ffffff;
  --fritekst-border-light: #e0e0e0; 
  --fritekst-border-medium: #bdbdbd;
  --fritekst-bg-page: #f4f6f8; 
  --fritekst-bg-light: #f8f9fa; 
  --fritekst-bg-white: #ffffff; 
  --fritekst-bg-overlay: rgba(33, 33, 33, 0.65);
  --fritekst-chat-area-bg: #f4f6f8; 
  --fritekst-user-bubble-bg: linear-gradient(135deg, #1976d2, #0d47a1); 
  --fritekst-user-bubble-text: #ffffff;
  --fritekst-assistant-bubble-bg: #ffffff; 
  --fritekst-assistant-bubble-text: #212121; 
  --fritekst-system-message-text: #757575;
  --fritekst-shadow-soft: 0 2px 4px rgba(0,0,0,0.06); 
  --fritekst-shadow-medium: 0 4px 10px rgba(0,0,0,0.1);
  --fritekst-shadow-strong: 0 8px 25px rgba(0,0,0,0.15);
  --fritekst-main-border-radius: 8px; 
  --fritekst-modal-border-radius: 12px; 
  --fritekst-bubble-border-radius: 20px;
}

/* === FULLSKJERM MODAL SETUP === */
.fritekst-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.fritekst-modal-body {
  padding: 0 !important;
  height: calc(100vh - 60px);
  overflow: hidden;
  font-family: 'Roboto', 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* === FRITEKST LIBRARY OVERLAY (separat bibliotek-modal) === */
.fritekst-library-overlay {
  z-index: 10001 !important; /* Over hovedmodalen */
}

.fritekst-library-overlay .modal-content {
  width: 90vw;
  height: 85vh;
  max-width: 1200px;
  max-height: 800px;
}

/* === FRITEKST UTILITY CLASSES === */
.fritekst-modal-container .fritekst-hidden { display: none !important; }
.fritekst-modal-container .fritekst-flex-visible { display: flex !important; }
.fritekst-modal-container .fritekst-disabled-label { opacity: 0.5; cursor: not-allowed; }
.fritekst-modal-container .fritekst-mb-2 { margin-bottom: 1rem; }
.fritekst-modal-container .fritekst-mt-2 { margin-top: 1rem; }
.fritekst-modal-container .fritekst-text-muted { color: var(--fritekst-text-muted); }
.fritekst-modal-container .fritekst-text-danger { color: var(--fritekst-accent-error); }
.fritekst-modal-container .fritekst-is-hidden { display: none !important; }
.fritekst-modal-container .fritekst-is-active { display: block !important; }

/* === MODAL HEADER MED BIBLIOTEK-KNAPP === */
.fritekst-modal-container .fritekst-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1.5rem;
  background: var(--fritekst-primary);
  border-bottom: none;
  box-shadow: var(--fritekst-shadow-medium);
}

.fritekst-modal-container .fritekst-header .modal-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.fritekst-modal-container .fritekst-header .modal-title .material-icons {
  font-size: 1.375rem;
  color: #ffffff;
  opacity: 0.9;
}

.fritekst-modal-container .fritekst-header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.fritekst-modal-container .fritekst-header-btn {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
  transition: all 0.2s ease;
}

.fritekst-modal-container .fritekst-header-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fritekst-modal-container .fritekst-header-btn .material-icons {
  font-size: 18px;
  color: #ffffff;
}

.fritekst-modal-container .fritekst-header-btn:hover .material-icons {
  color: #ffffff;
}

/* Vis tekst-label på knappen */
.fritekst-modal-container .fritekst-header-btn::after {
  content: 'Bibliotek';
  font-size: 0.8125rem;
}

/* Close-knapp i header */
.fritekst-modal-container .fritekst-header .close {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #ffffff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.fritekst-modal-container .fritekst-header .close:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.fritekst-modal-container .fritekst-header-btn .fritekst-btn-text {
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  color: inherit;
}

/* === MAIN LAYOUT === */
.fritekst-modal-container .fritekst-main-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 1.25rem;
  padding: 1.25rem;
  height: 100%;
  overflow: hidden;
  background: var(--fritekst-bg-page);
}

.fritekst-modal-container .fritekst-context-area,
.fritekst-modal-container .fritekst-chat-area-wrapper {
  display: flex;
  flex-direction: column;
  background-color: var(--fritekst-bg-white);
  padding: 1.25rem;
  border-radius: var(--fritekst-main-border-radius);
  box-shadow: var(--fritekst-shadow-soft);
  overflow: hidden;
}

/* Venstre kolonne: blå identitet som matcher chat-området */
.fritekst-modal-container .fritekst-context-area {
  background-color: var(--fritekst-bg-white);
  border: 1px solid var(--fritekst-border-light);
}

.fritekst-modal-container .fritekst-context-area h3 {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--fritekst-primary-light);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fritekst-primary-dark);
  letter-spacing: -0.01em;
}

.fritekst-context-title-icon {
  font-size: 20px;
  color: var(--fritekst-primary);
}

/* Samlet upload-toolbar: alle knapper på én rad */
.fritekst-modal-container .fritekst-upload-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

/* === CONTEXT & FILE UPLOAD === */
.fritekst-modal-container .fritekst-context-input {
  flex-grow: 1;
  resize: none;
  border: 1px solid var(--fritekst-border-light);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  background-color: var(--fritekst-chat-area-bg);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.fritekst-modal-container .fritekst-context-input:focus {
  border-color: var(--fritekst-primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.fritekst-modal-container .fritekst-file-upload-area {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.fritekst-modal-container .fritekst-upload-button-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--fritekst-bg-white);
  border: 1.5px solid var(--fritekst-primary);
  border-radius: 20px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fritekst-primary);
}

.fritekst-modal-container .fritekst-upload-button-label .material-icons {
  font-size: 18px;
}

.fritekst-modal-container .fritekst-upload-button-label:hover:not(.fritekst-disabled-label) {
  background: var(--fritekst-primary-light);
  border-color: var(--fritekst-primary-dark);
  color: var(--fritekst-primary-dark);
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.12);
  transform: translateY(-1px);
}

.fritekst-modal-container .fritekst-file-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  background-color: var(--fritekst-primary-light);
  padding: 0.3rem 0.6rem;
  border-radius: var(--fritekst-main-border-radius);
  border: 1px solid var(--fritekst-primary);
  color: var(--fritekst-primary-dark);
}

.fritekst-modal-container .fritekst-file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.fritekst-modal-container .fritekst-upload-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--fritekst-text-muted);
}

.fritekst-modal-container .fritekst-drop-zone {
  border: 2px dashed var(--fritekst-border-medium);
  border-radius: var(--fritekst-main-border-radius);
  padding: 2rem;
  text-align: center;
  background-color: var(--fritekst-bg-light);
  transition: all 0.3s;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fritekst-bg-overlay);
}

.fritekst-modal-container .fritekst-drop-zone.fritekst-active {
  border-color: var(--fritekst-primary);
}

.fritekst-modal-container .fritekst-drop-zone-text {
  color: var(--fritekst-text-on-primary);
  font-size: 1.5rem;
  font-weight: 500;
  pointer-events: none;
}

/* === CHAT AREA === */
.fritekst-modal-container .fritekst-chat-area-wrapper {
  position: relative;
}

/* Active Instruction Bar */
.fritekst-modal-container .fritekst-active-instruction-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: var(--fritekst-primary-light);
  border-bottom: 1px solid var(--fritekst-border-light);
  color: var(--fritekst-primary-dark);
  font-size: 0.9rem;
  border-radius: var(--fritekst-main-border-radius) var(--fritekst-main-border-radius) 0 0;
}

.fritekst-modal-container .fritekst-instruction-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fritekst-modal-container .fritekst-clear-instruction-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fritekst-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.fritekst-modal-container .fritekst-clear-instruction-btn:hover {
  background-color: rgba(25, 118, 210, 0.1);
}

.fritekst-modal-container .fritekst-clear-instruction-btn .material-icons {
  font-size: 1.25rem;
}

.fritekst-modal-container .fritekst-chat-output-area {
  flex-grow: 1;
  overflow-y: auto;
  background-color: var(--fritekst-chat-area-bg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 300px;
}

.fritekst-modal-container .fritekst-chat-message {
  padding: 12px 18px;
  max-width: 85%;
  line-height: 1.6;
  word-wrap: break-word;
  box-shadow: var(--fritekst-shadow-soft);
  position: relative;
  animation: fritekst-bubbleFadeIn 0.4s ease-out forwards;
}

@keyframes fritekst-bubbleFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fritekst-modal-container .fritekst-user {
  background: var(--fritekst-user-bubble-bg);
  color: var(--fritekst-user-bubble-text);
  align-self: flex-end;
  border-radius: var(--fritekst-bubble-border-radius) var(--fritekst-bubble-border-radius) 0 var(--fritekst-bubble-border-radius);
}

.fritekst-modal-container .fritekst-assistant {
  background-color: var(--fritekst-assistant-bubble-bg);
  color: var(--fritekst-assistant-bubble-text);
  border: 1px solid var(--fritekst-border-light);
  align-self: flex-start;
  border-radius: var(--fritekst-bubble-border-radius) var(--fritekst-bubble-border-radius) var(--fritekst-bubble-border-radius) 0;
}

/* === AI-RESPONSE EDITABLE TEXTAREA === */
.fritekst-modal-container .fritekst-ai-response-editable {
  background-color: var(--fritekst-assistant-bubble-bg);
  color: var(--fritekst-assistant-bubble-text);
  border: 1px solid var(--fritekst-border-light);
  align-self: flex-start;
  border-radius: 0 16px 16px 4px;
  padding: 16px 18px;
  max-width: 85%;
  width: 85%;
  line-height: 1.65;
  word-wrap: break-word;
  font-family: inherit;
  font-size: inherit;
  resize: none;
  outline: none;
  overflow: hidden;
  box-shadow: var(--fritekst-shadow-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fritekst-modal-container .fritekst-ai-response-editable:focus {
  border-color: #90caf9;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--fritekst-shadow-soft);
}

.fritekst-modal-container .fritekst-ai-response-editable:hover:not(:focus) {
  border-color: #cbd5e0;
}

.fritekst-modal-container .fritekst-system-info,
.fritekst-modal-container .fritekst-system-error {
  font-style: italic;
  color: var(--fritekst-system-message-text);
  font-size: 0.9rem;
  text-align: center;
  margin: 0.5rem auto;
  padding: 8px 12px;
  max-width: 90%;
  border-radius: var(--fritekst-main-border-radius);
}

.fritekst-modal-container .fritekst-system-error {
  color: var(--fritekst-accent-error);
  background-color: rgba(211, 47, 47, 0.07);
}

/* Chat Loading Overlay */
.fritekst-modal-container .fritekst-chat-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
}

.fritekst-modal-container .fritekst-chat-loading-overlay.fritekst-hidden {
  display: none;
}

.fritekst-modal-container .fritekst-chat-loading-spinner {
  width: 80px;
  height: 80px;
  border: 8px solid var(--fritekst-primary-light);
  border-top: 8px solid var(--fritekst-primary);
  border-radius: 50%;
  animation: fritekst-chatLoadingSpin 1.2s linear infinite;
  margin-bottom: 1rem;
}

.fritekst-modal-container .fritekst-chat-loading-text {
  color: var(--fritekst-primary);
  font-size: 1.1rem;
  font-weight: 500;
}

@keyframes fritekst-chatLoadingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === BOTTOM CONTROLS === */
.fritekst-modal-container .fritekst-chat-bottom-controls {
  border-top: 1px solid var(--fritekst-border-light);
  background: var(--fritekst-bg-white);
  flex-shrink: 0;
}

.fritekst-modal-container .fritekst-control-bar {
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--fritekst-border-light);
  background: var(--fritekst-bg-light);
}

.fritekst-modal-container .fritekst-mode-group {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.fritekst-modal-container .fritekst-mode-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fritekst-border-medium);
  background: var(--fritekst-bg-white);
  border-radius: var(--fritekst-main-border-radius);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fritekst-text-secondary);
  white-space: nowrap;
}

.fritekst-modal-container .fritekst-mode-btn:hover:not([disabled]) {
  background: var(--fritekst-primary-light);
  border-color: var(--fritekst-primary);
  color: var(--fritekst-primary);
}

.fritekst-modal-container .fritekst-mode-btn.fritekst-active {
  background: var(--fritekst-primary);
  color: var(--fritekst-text-on-primary);
  border-color: var(--fritekst-primary);
}

.fritekst-modal-container .fritekst-mode-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* === DROPDOWN SYSTEM === */
.fritekst-modal-container .fritekst-instruction-dropdown-container {
  position: relative;
  z-index: 100;
}

.fritekst-modal-container .fritekst-dropdown-content {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  background: var(--fritekst-bg-white);
  border: 1px solid var(--fritekst-border-medium);
  border-radius: var(--fritekst-main-border-radius);
  box-shadow: var(--fritekst-shadow-medium);
  min-width: 320px;
  max-width: 450px;
  max-height: min(500px, 60vh);
  overflow-y: auto;
  z-index: 200;
  display: flex;
  flex-direction: column;
}

/* SØKEFELT for dropdown */
.fritekst-modal-container .fritekst-dropdown-search-container {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-white);
  padding: 12px;
  border-bottom: 2px solid var(--fritekst-border-light);
}

.fritekst-modal-container .fritekst-dropdown-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.fritekst-modal-container .fritekst-dropdown-search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-secondary);
  font-size: 18px;
  pointer-events: none;
}

.fritekst-modal-container .fritekst-dropdown-search-input {
  width: 100%;
  padding: 8px 36px 8px 36px;
  border: 2px solid var(--fritekst-border-light);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.3s ease;
  background: var(--bg-light);
}

.fritekst-modal-container .fritekst-dropdown-search-input:focus {
  outline: none;
  border-color: #1976d2;
  background: var(--bg-white);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.fritekst-modal-container .fritekst-dropdown-search-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.fritekst-modal-container .fritekst-dropdown-search-clear {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dc3545;
  color: white;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.fritekst-modal-container .fritekst-dropdown-search-clear:hover {
  background: #c82333;
  transform: scale(1.1);
}

.fritekst-modal-container .fritekst-dropdown-search-clear.visible {
  display: flex;
}

.fritekst-modal-container .fritekst-dropdown-search-clear .material-icons {
  font-size: 14px;
}

/* Scrollbar styling for dropdown */
.fritekst-modal-container .fritekst-dropdown-content::-webkit-scrollbar {
  width: 8px;
}

.fritekst-modal-container .fritekst-dropdown-content::-webkit-scrollbar-track {
  background: var(--bg-hover);
  border-radius: 10px;
}

.fritekst-modal-container .fritekst-dropdown-content::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
  border-radius: 10px;
}

.fritekst-modal-container .fritekst-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
}

/* For Firefox */
.fritekst-modal-container .fritekst-dropdown-content {
  scrollbar-width: thin;
  scrollbar-color: #1976d2 #f1f1f1;
}

.fritekst-modal-container .fritekst-favorites-header {
  padding: 0.75rem 1rem;
  background: var(--fritekst-primary-light);
  color: var(--fritekst-primary-dark);
  font-weight: 500;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--fritekst-border-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fritekst-modal-container .fritekst-favorites-list {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Scrollbar for favorites-list */
.fritekst-modal-container .fritekst-favorites-list::-webkit-scrollbar {
  width: 8px;
}

.fritekst-modal-container .fritekst-favorites-list::-webkit-scrollbar-track {
  background: var(--bg-hover);
  border-radius: 10px;
}

.fritekst-modal-container .fritekst-favorites-list::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
  border-radius: 10px;
}

.fritekst-modal-container .fritekst-favorites-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
}

.fritekst-modal-container .fritekst-dropdown-item {
  padding: 0.85rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--fritekst-border-light);
  transition: all 0.2s ease;
  white-space: normal;
  line-height: 1.5;
  font-size: 15px;
  font-weight: 450;
  color: var(--text-primary);
}

.fritekst-modal-container .fritekst-dropdown-item:hover:not(.fritekst-disabled) {
  background: linear-gradient(to right, #f7fafc, #edf2f7);
  transform: translateX(4px);
  border-left: 3px solid #1976d2;
}

.fritekst-modal-container .fritekst-dropdown-item:last-child {
  border-bottom: none;
}

.fritekst-modal-container .fritekst-dropdown-item.fritekst-disabled {
  cursor: default;
  opacity: 0.6;
}

.fritekst-modal-container .fritekst-dropdown-item.fritekst-disabled:hover {
  background: transparent;
}

/* Skjul elementer som ikke matcher søk */
.fritekst-modal-container .fritekst-dropdown-item.hidden-by-search {
  display: none !important;
}

/* Søkeresultat teller */
.fritekst-modal-container .fritekst-dropdown-results-count {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  border-bottom: 1px solid var(--fritekst-border-light);
}

.fritekst-modal-container .fritekst-dropdown-results-count.no-results {
  color: #dc3545;
  font-weight: 500;
}

/* "Ingen resultater" melding */
.fritekst-modal-container .fritekst-dropdown-no-results {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-muted);
  display: none;
}

.fritekst-modal-container .fritekst-dropdown-no-results.visible {
  display: block;
}

.fritekst-modal-container .fritekst-dropdown-no-results .material-icons {
  font-size: 48px;
  color: #ddd;
  margin-bottom: 12px;
}

.fritekst-modal-container .fritekst-dropdown-no-results h4 {
  color: var(--text-secondary);
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 500;
}

.fritekst-modal-container .fritekst-dropdown-no-results p {
  margin: 0;
  font-size: 13px;
}

.fritekst-modal-container .fritekst-dropdown-divider {
  height: 1px;
  background: var(--fritekst-border-medium);
  margin: 0.5rem 0;
}

.fritekst-modal-container .fritekst-dropdown-action {
  padding: 0.75rem 1rem;
  background: var(--fritekst-bg-light);
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--fritekst-primary);
  font-weight: 500;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.fritekst-modal-container .fritekst-dropdown-action:hover {
  background: var(--fritekst-primary-light);
}

/* =========================================
   ACCORDION MENY (inline ekspandering)
   ========================================= */

/* Accordion container */
.fritekst-modal-container .fritekst-accordion-item {
  border-bottom: 1px solid var(--fritekst-border-light);
}

.fritekst-modal-container .fritekst-accordion-item:last-child {
  border-bottom: none;
}

/* Accordion header (klikkbar) */
.fritekst-modal-container .fritekst-accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.fritekst-modal-container .fritekst-accordion-header:hover {
  background: #e3f2fd;
}

.fritekst-modal-container .fritekst-accordion-header:active {
  background: #e0eaff;
}

/* Ikon til venstre */
.fritekst-modal-container .fritekst-accordion-icon {
  font-size: 20px;
  color: #1976d2;
  flex-shrink: 0;
}

/* Chevron til høyre – roterer ved åpning */
.fritekst-modal-container .fritekst-accordion-chevron {
  margin-left: auto;
  font-size: 20px;
  color: #9e9e9e;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s;
  flex-shrink: 0;
}

.fritekst-modal-container .fritekst-accordion-open > .fritekst-accordion-header .fritekst-accordion-chevron {
  transform: rotate(180deg);
  color: #1976d2;
}

/* Accordion body – skjult, animert med max-height */
.fritekst-modal-container .fritekst-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fritekst-modal-container .fritekst-accordion-open > .fritekst-accordion-body {
  max-height: 2000px;
  overflow-y: auto;
}

/* Nested accordion header (spesialitet med 2+ maler) */
.fritekst-modal-container .fritekst-accordion-header--nested {
  padding: 9px 14px 9px 24px;
  font-size: 14px;
  font-weight: 450;
  color: var(--text-secondary);
}

.fritekst-modal-container .fritekst-accordion-header--nested:hover {
  background: var(--bg-light);
}

/* Teller-badge */
.fritekst-modal-container .fritekst-accordion-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Leaf-item (klikkbar spesialitet uten sub-items) */
.fritekst-modal-container .fritekst-accordion-leaf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 24px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}

.fritekst-modal-container .fritekst-accordion-leaf:hover {
  background: linear-gradient(to right, #e3f2fd, #fafafa);
  border-left-color: #1976d2;
  color: #0d47a1;
}

.fritekst-modal-container .fritekst-accordion-leaf:active {
  background: #dbeafe;
}

/* Dot indicator for leaf items */
.fritekst-modal-container .fritekst-accordion-leaf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.fritekst-modal-container .fritekst-accordion-leaf:hover .fritekst-accordion-leaf-dot {
  background: #1976d2;
  transform: scale(1.3);
}

/* Deep leaf (inne i nested accordion – Standardmal, favoritter) */
.fritekst-modal-container .fritekst-accordion-leaf--deep {
  padding-left: 42px;
  font-size: 13.5px;
  gap: 8px;
}

.fritekst-modal-container .fritekst-accordion-leaf--deep:hover {
  background: linear-gradient(to right, #e3f2fd, #fafafa);
  border-left-color: #64b5f6;
}

/* Nested accordion indent */
.fritekst-modal-container .fritekst-accordion-nested {
  border-bottom: none;
}

.fritekst-modal-container .fritekst-accordion-nested .fritekst-accordion-body {
  border-left: 2px solid #e0e0e0;
  margin-left: 30px;
  border-radius: 0 0 0 8px;
}

/* Scrollbar for accordion body */
.fritekst-modal-container .fritekst-accordion-body::-webkit-scrollbar {
  width: 6px;
}

.fritekst-modal-container .fritekst-accordion-body::-webkit-scrollbar-track {
  background: transparent;
}

.fritekst-modal-container .fritekst-accordion-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.fritekst-modal-container .fritekst-accordion-body::-webkit-scrollbar-thumb:hover {
  background: #9e9e9e;
}

.fritekst-modal-container .fritekst-action-group {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* --- Control-bar action buttons (Lim kontekst, Tøm alt) --- */
.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid #e0e0e0;
  background: var(--bg-light);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn .material-icons {
  font-size: 16px;
  transition: color 0.2s ease;
}

/* Lim kontekst - blåtone */
.fritekst-modal-container .fritekst-control-bar .fritekst-context-paste-btn {
  background: #e3f2fd;
  border-color: #bfdbfe;
  color: #0d47a1;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-context-paste-btn .material-icons {
  color: #1976d2;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-context-paste-btn:hover:not([disabled]) {
  background: #dbeafe;
  border-color: #90caf9;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
  transform: translateY(-1px);
}

.fritekst-modal-container .fritekst-control-bar .fritekst-context-paste-btn:active:not([disabled]) {
  transform: scale(0.97);
  box-shadow: none;
}

/* Lim & Analyser (instruction mode) - grønntone */
.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-instruction-mode {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-instruction-mode .material-icons {
  color: #10b981;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-instruction-mode:hover:not(:disabled) {
  background: #d1fae5;
  border-color: #6ee7b7;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
  transform: translateY(-1px);
}

/* Tøm alt - rødtone */
.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-danger .material-icons {
  color: #ef4444;
}

.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-danger:hover:not([disabled]) {
  background: #fee2e2;
  border-color: #fca5a5;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15);
  transform: translateY(-1px);
}

.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn.fritekst-danger:active:not([disabled]) {
  transform: scale(0.97);
  box-shadow: none;
}

/* Disabled state */
.fritekst-modal-container .fritekst-control-bar .fritekst-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.fritekst-modal-container .fritekst-input-line {
  padding: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.fritekst-modal-container .fritekst-chat-input {
  flex: 1;
  min-height: 48px;
  max-height: 120px;
  padding: 12px 16px;
  border: 1px solid var(--fritekst-border-medium);
  border-radius: 24px;
  resize: none;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s;
  background: var(--fritekst-bg-white);
  outline: none;
}

.fritekst-modal-container .fritekst-chat-input:focus {
  border-color: var(--fritekst-primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

/* === BUTTONS === */
.fritekst-modal-container .fritekst-button,
.fritekst-modal-container button.fritekst-button {
  background: var(--fritekst-primary);
  color: var(--fritekst-text-on-primary);
  border: none;
  padding: 0.7rem 1.2rem;
  border-radius: var(--fritekst-main-border-radius);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.fritekst-modal-container .fritekst-button:hover:not(:disabled) {
  background: var(--fritekst-primary-dark);
  box-shadow: var(--fritekst-shadow-medium);
}

.fritekst-modal-container .fritekst-button:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  cursor: not-allowed;
  opacity: 0.7;
}

.fritekst-modal-container .fritekst-button.fritekst-secondary {
  background-color: var(--fritekst-bg-light);
  color: var(--fritekst-text-secondary);
  border: 1px solid var(--fritekst-border-medium);
}

.fritekst-modal-container .fritekst-button.fritekst-secondary:hover:not([disabled]) {
  background-color: #e9ecef;
}

.fritekst-modal-container .fritekst-button.fritekst-danger {
  background-color: transparent;
  color: var(--fritekst-accent-error);
  border: 1px solid var(--fritekst-accent-error);
}

.fritekst-modal-container .fritekst-button.fritekst-danger:hover:not(:disabled) {
  background-color: var(--fritekst-accent-error);
  color: white;
}

.fritekst-modal-container .fritekst-button.fritekst-small {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

/* Send button som circle */
.fritekst-modal-container .fritekst-input-line .fritekst-button {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  padding: 0;
}

.fritekst-modal-container .fritekst-icon-button {
  background: none;
  border: none;
  color: inherit;
  padding: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.fritekst-modal-container .fritekst-icon-button:hover:not([disabled]) {
  background-color: rgba(0, 0, 0, 0.05);
}

/* === SPINNER === */
.fritekst-modal-container .fritekst-spinner {
  border: 4px solid rgba(0,0,0,0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: var(--fritekst-primary);
  animation: fritekst-spin 1s linear infinite;
  margin: 0 auto 12px;
}

.fritekst-modal-container .fritekst-spinner.fritekst-small {
  width: 20px;
  height: 20px;
  border-width: 3px;
}

@keyframes fritekst-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === TYPING INDICATOR === */
.fritekst-modal-container .fritekst-typing-indicator {
  display: flex;
  align-items: center;
  padding: 18px !important;
}

.fritekst-modal-container .fritekst-typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: var(--fritekst-text-muted);
  border-radius: 50%;
  margin: 0 3px;
  animation: fritekst-typing-dot-bounce 1.4s infinite ease-in-out both;
}

.fritekst-modal-container .fritekst-typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.fritekst-modal-container .fritekst-typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes fritekst-typing-dot-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

/* === EMPTY STATE === */
.fritekst-modal-container .fritekst-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: var(--fritekst-text-muted);
  text-align: center;
}

.fritekst-modal-container .fritekst-empty-state-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.fritekst-modal-container .fritekst-empty-state-title {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--fritekst-text-secondary);
}

.fritekst-modal-container .fritekst-empty-state-desc {
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 400px;
  line-height: 1.5;
}

/* === LOADING OVERLAY === */
.fritekst-modal-container .fritekst-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.fritekst-modal-container .fritekst-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--fritekst-border-light);
  border-top: 4px solid var(--fritekst-primary);
  border-radius: 50%;
  animation: fritekst-spin 1s linear infinite;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 1200px) {
  .fritekst-modal-container .fritekst-prompt-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 900px) {
  .fritekst-modal-container .fritekst-main-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    overflow-y: auto;
  }
  
  .fritekst-modal-container .fritekst-context-area {
    order: 1;
    min-height: 250px;
  }
  
  .fritekst-modal-container .fritekst-chat-area-wrapper {
    order: 2;
    min-height: 400px;
  }

  .fritekst-modal-container .fritekst-prompt-grid {
    grid-template-columns: 1fr;
  }

  .fritekst-modal-container .fritekst-action-group {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .fritekst-modal-container .fritekst-main-content {
    padding: 1rem;
    gap: 1rem;
  }
  
  .fritekst-modal-container .fritekst-context-area,
  .fritekst-modal-container .fritekst-chat-area-wrapper {
    padding: 1rem;
  }

  .fritekst-modal-container .fritekst-library-controls-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .fritekst-modal-container .fritekst-form-actions {
    flex-direction: column;
    gap: 1rem;
  }

  .fritekst-modal-container .fritekst-form-actions-left,
  .fritekst-modal-container .fritekst-form-actions-right {
    width: 100%;
    justify-content: center;
  }

  .fritekst-library-overlay .modal-content {
    width: 95vw;
    height: 90vh;
  }

  /* Skjul tekst på mode- og action-knapper, vis kun ikoner */
  .fritekst-modal-container .fritekst-mode-btn > span:not(.material-icons) {
    display: none;
  }
  
  .fritekst-modal-container .fritekst-control-bar .fritekst-action-btn > span:not(.material-icons) {
    display: none;
  }

  .fritekst-modal-container .fritekst-mode-btn,
  .fritekst-modal-container .fritekst-control-bar .fritekst-action-btn {
    padding: 0.45rem;
    gap: 0;
  }
}

/* === TOOLTIP SUPPORT === */
.fritekst-modal-container .fritekst-tooltip {
  position: relative;
}

.fritekst-modal-container .fritekst-tooltiptext {
  visibility: hidden;
  width: max-content;
  max-width: 180px;
  background-color: #1f2937;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  position: absolute;
  z-index: 9999;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

/* Tooltip-pil */
.fritekst-modal-container .fritekst-tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}

.fritekst-modal-container .fritekst-tooltip:hover .fritekst-tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* === HIGH CONTRAST & ACCESSIBILITY === */
@media (prefers-contrast: high) {
  .fritekst-modal-container {
    --fritekst-border-light: #999;
    --fritekst-border-medium: #666;
    --fritekst-shadow-soft: 0 2px 4px rgba(0,0,0,0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fritekst-modal-container *,
  .fritekst-modal-container *::before,
  .fritekst-modal-container *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* === MESSAGE WRAPPER & RESPONSE TOOLBAR === */
.fritekst-modal-container .fritekst-message-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Toolbar over AI-svar: sticky øverst i chat-scroll */
/* --- Message toolbar container --- */
.fritekst-modal-container .fritekst-message-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  align-self: flex-start;
  max-width: 85%;
  background: var(--bg-light);
  border: 1px solid #e0e0e0;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* --- Message toolbar buttons (Kopier, Dikter inn) --- */
.fritekst-modal-container .fritekst-message-actions .fritekst-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-light);
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-action-btn .material-icons {
  font-size: 14px;
  color: #1976d2;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-action-btn:hover {
  background: #e0ecff;
  border-color: #90caf9;
  color: #0d47a1;
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.12);
  transform: translateY(-0.5px);
}

.fritekst-modal-container .fritekst-message-actions .fritekst-action-btn:active {
  transform: scale(0.97);
  box-shadow: none;
}

/* Kopiert-state */
.fritekst-modal-container .fritekst-message-actions .fritekst-action-btn.fritekst-copied {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-action-btn.fritekst-copied .material-icons {
  color: #10b981;
}

/* Separator mellom knapper */
.fritekst-modal-container .fritekst-action-separator {
  width: 1px;
  height: 14px;
  background: #e0e0e0;
  margin: 0 2px;
}

/* --- Dikter inn (voiceedit) i message-actions toolbar --- */
.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn {
  margin: 0;
  padding: 4px 10px;
  background: #f0fdf4;
  background-image: none;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  color: #166534;
  font-size: 12px;
  font-weight: 500;
  gap: 4px;
  transition: all 0.15s ease;
  box-shadow: none;
  transform: none;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn .material-icons {
  font-size: 14px;
  color: #22c55e;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn:hover:not(:disabled) {
  background: #dcfce7;
  background-image: none;
  border-color: #86efac;
  box-shadow: 0 1px 4px rgba(34, 197, 94, 0.12);
  transform: translateY(-0.5px);
}

.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn:active:not(:disabled) {
  transform: scale(0.97);
  box-shadow: none;
}

/* Dikter inn - recording state i toolbar */
.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn.fritekst-voiceedit-recording {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  border-color: #dc2626;
  animation: fritekst-voiceedit-pulse 1.5s ease-in-out infinite;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn.fritekst-voiceedit-recording .material-icons {
  color: white;
}

/* Dikter inn - processing state i toolbar */
.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn.fritekst-voiceedit-processing {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border-color: #f59e0b;
  pointer-events: none;
}

.fritekst-modal-container .fritekst-message-actions .fritekst-voiceedit-btn.fritekst-voiceedit-processing .material-icons {
  color: white;
  animation: fritekst-voiceedit-spin 1s linear infinite;
}

/* GAMMEL STIL - bakoverkompatibilitet (skjult) */
.fritekst-modal-container .fritekst-copy-message-btn {
  display: none;
}
/* ===========================================
   FRITEKST VOICE INPUT - CSS
   Mic-knapp inne i chat input (ChatGPT-stil)
   =========================================== */

/* Wrapper for textarea + mic-knapp */
.fritekst-chat-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
}

/* Juster textarea for å gi plass til mic-knapp */
.fritekst-chat-input-wrapper .fritekst-chat-input {
    width: 100%;
    padding-right: 48px; /* Plass til mic-knapp */
}

/* Mic-knapp inne i textarea */
.fritekst-voice-input-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--fritekst-text-secondary, #666);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
}

.fritekst-voice-input-btn:hover {
    background: var(--fritekst-bg-hover, rgba(0, 0, 0, 0.05));
    color: var(--fritekst-primary, #1976d2);
}

.fritekst-voice-input-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.3);
}

.fritekst-voice-input-btn .material-icons {
    font-size: 20px;
}

/* Recording state - rød pulserende */
.fritekst-voice-input-btn.fritekst-voice-input-recording {
    background: #ef4444;
    color: white;
    animation: fritekst-voice-pulse 1.5s ease-in-out infinite;
}

.fritekst-voice-input-btn.fritekst-voice-input-recording:hover {
    background: #dc2626;
    color: white;
}

@keyframes fritekst-voice-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

/* Processing state - spinner */
.fritekst-voice-input-btn.fritekst-voice-input-processing {
    background: var(--fritekst-primary, #1976d2);
    color: white;
    cursor: wait;
}

.fritekst-voice-input-btn.fritekst-voice-input-processing:hover {
    background: var(--fritekst-primary, #1976d2);
}

/* Spin animation for processing icon */
.fritekst-spin {
    animation: fritekst-spin 1s linear infinite;
}

@keyframes fritekst-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Live preview overlay (vises under Soniox streaming) */
.fritekst-voice-input-preview {
    position: absolute;
    left: 12px;
    right: 48px;
    bottom: calc(100% + 4px);
    padding: 8px 12px;
    background: var(--fritekst-bg-dark, #1e293b);
    color: white;
    border-radius: 8px;
    font-size: 0.85rem;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    opacity: 0.95;
}

.fritekst-voice-input-preview::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--fritekst-bg-dark, #1e293b);
}

/* Textarea styling når recording er aktiv */
.fritekst-chat-input-wrapper:has(.fritekst-voice-input-recording) .fritekst-chat-input {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Dark mode — eksplisitt toggle via html[data-theme="dark"]. */
html[data-theme="dark"] .fritekst-voice-input-btn {
    color: var(--fritekst-text-secondary, #9ca3af);
}

html[data-theme="dark"] .fritekst-voice-input-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .fritekst-voice-input-preview {
    background: #374151;
}

html[data-theme="dark"] .fritekst-voice-input-preview::after {
    border-top-color: #374151;
}

/* Responsive - mindre skjermer */
@media (max-width: 640px) {
    .fritekst-voice-input-btn {
        width: 36px;
        height: 36px;
        right: 6px;
        bottom: 6px;
    }
    
    .fritekst-chat-input-wrapper .fritekst-chat-input {
        padding-right: 44px;
    }
    
    .fritekst-voice-input-preview {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
}

/* =====================================================
   MALER-VELGER MODAL (slide-up panel)
   Erstatter den gamle dropdown-en som ble klippet av
   tre nestede overflow:hidden containere.
   ===================================================== */

/* Fullskjerm-overlay */
.fritekst-maler-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10010;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fritekst-maler-modal.fritekst-maler-visible {
  pointer-events: auto;
  opacity: 1;
}

.fritekst-maler-modal.fritekst-hidden {
  display: none !important;
}

/* Backdrop */
.fritekst-maler-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
}

/* Panel (slide-up card) */
.fritekst-maler-panel {
  position: relative;
  width: 94%;
  max-width: 520px;
  max-height: 70vh;
  background: var(--bg-white);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.fritekst-maler-modal.fritekst-maler-visible .fritekst-maler-panel {
  transform: translateY(0);
}

/* Header */
.fritekst-maler-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.fritekst-maler-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fritekst-maler-title .material-icons {
  font-size: 22px;
  color: #1976d2;
}

.fritekst-maler-title h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.fritekst-maler-close {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-light);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.fritekst-maler-close:hover {
  background: #e0e0e0;
  color: var(--text-secondary);
}

.fritekst-maler-close .material-icons {
  font-size: 20px;
}

/* Søkefelt */
.fritekst-maler-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid #e0e0e0;
  background: var(--bg-light);
  flex-shrink: 0;
}

.fritekst-maler-search .material-icons {
  font-size: 20px;
  color: #9e9e9e;
  flex-shrink: 0;
}

.fritekst-maler-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
}

.fritekst-maler-search input::placeholder {
  color: #9e9e9e;
}

/* Scrollbart innhold */
.fritekst-maler-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  min-height: 0;
}

/* Scrollbar */
.fritekst-maler-content::-webkit-scrollbar {
  width: 6px;
}

.fritekst-maler-content::-webkit-scrollbar-track {
  background: transparent;
}

.fritekst-maler-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.fritekst-maler-content::-webkit-scrollbar-thumb:hover {
  background: #9e9e9e;
}

/* Seksjon-header (Henvisning / Favoritter) */
.fritekst-maler-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fritekst-maler-section-header .material-icons {
  font-size: 16px;
}

/* Accordion: kategori-header (f.eks. "Henvisning") */
.fritekst-maler-accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  transition: background 0.12s ease;
  user-select: none;
}

.fritekst-maler-accordion-header:hover {
  background: #e3f2fd;
}

.fritekst-maler-accordion-header:active {
  background: #e0eaff;
}

.fritekst-maler-accordion-header .material-icons.maler-icon {
  font-size: 20px;
  color: #1976d2;
  flex-shrink: 0;
}

.fritekst-maler-accordion-header .maler-chevron {
  margin-left: auto;
  font-size: 20px;
  color: #9e9e9e;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.fritekst-maler-accordion-open > .fritekst-maler-accordion-header .maler-chevron {
  transform: rotate(180deg);
  color: #1976d2;
}

/* Accordion: body */
.fritekst-maler-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fritekst-maler-accordion-open > .fritekst-maler-accordion-body {
  max-height: 2000px;
}

/* Spesialitet-item (leaf / klikkbar rad) */
.fritekst-maler-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px 11px 32px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.12s ease;
  border-left: 3px solid transparent;
}

.fritekst-maler-item:hover {
  background: linear-gradient(to right, #e3f2fd, #fafafa);
  border-left-color: #1976d2;
  color: #0d47a1;
}

.fritekst-maler-item:active {
  background: #dbeafe;
}

.fritekst-maler-item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.fritekst-maler-item:hover .fritekst-maler-item-dot {
  background: #1976d2;
  transform: scale(1.3);
}

/* Deep leaf (inne i nested accordion) */
.fritekst-maler-item--deep {
  padding-left: 48px;
  font-size: 13.5px;
}

.fritekst-maler-item--deep:hover {
  border-left-color: #64b5f6;
}

/* Nested accordion (spesialitet med 2+ maler) */
.fritekst-maler-nested-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 32px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 450;
  color: var(--text-secondary);
  transition: background 0.12s ease;
  user-select: none;
}

.fritekst-maler-nested-header:hover {
  background: var(--bg-light);
}

.fritekst-maler-nested-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.fritekst-maler-nested-header .maler-chevron {
  margin-left: auto;
  font-size: 18px;
  color: #9e9e9e;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.fritekst-maler-accordion-open > .fritekst-maler-nested-header .maler-chevron {
  transform: rotate(180deg);
  color: #1976d2;
}

/* Nested accordion indentation */
.fritekst-maler-nested .fritekst-maler-accordion-body {
  border-left: 2px solid #e0e0e0;
  margin-left: 40px;
  border-radius: 0 0 0 8px;
}

/* Prompt-favoritt item */
.fritekst-maler-prompt-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 20px;
  cursor: pointer;
  transition: all 0.12s ease;
  border-left: 3px solid transparent;
}

.fritekst-maler-prompt-item:hover {
  background: linear-gradient(to right, #e3f2fd, #fafafa);
  border-left-color: #1976d2;
}

.fritekst-maler-prompt-item:active {
  background: #dbeafe;
}

.fritekst-maler-prompt-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}

.fritekst-maler-prompt-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
}

/* Divider */
.fritekst-maler-divider {
  height: 1px;
  background: #e0e0e0;
  margin: 6px 0;
}

/* Tom-tilstand */
.fritekst-maler-empty {
  padding: 24px 20px;
  text-align: center;
  color: #9e9e9e;
  font-size: 13px;
}

.fritekst-maler-empty .material-icons {
  font-size: 32px;
  display: block;
  margin: 0 auto 8px;
  color: #cbd5e1;
}

/* Ingen søkeresultater */
.fritekst-maler-no-results {
  display: none;
  text-align: center;
  padding: 32px 20px;
  color: #9e9e9e;
}

.fritekst-maler-no-results.visible {
  display: block;
}

.fritekst-maler-no-results .material-icons {
  font-size: 40px;
  color: #e0e0e0;
  margin-bottom: 8px;
}

.fritekst-maler-no-results h4 {
  color: var(--text-muted);
  margin: 0 0 4px;
  font-size: 15px;
}

.fritekst-maler-no-results p {
  margin: 0;
  font-size: 13px;
}

/* Skjult av søk */
.fritekst-maler-hidden-by-search {
  display: none !important;
}

/* Footer */
.fritekst-maler-footer {
  padding: 12px 20px;
  border-top: 1px solid #e0e0e0;
  background: var(--bg-light);
  flex-shrink: 0;
}

.fritekst-maler-library-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #1976d2;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.fritekst-maler-library-btn:hover {
  background: #e3f2fd;
  border-color: #bfdbfe;
}

.fritekst-maler-library-btn .material-icons {
  font-size: 18px;
}

/* =====================================================
   MALER-KNAPP: AKTIV TILSTAND
   Viser valgt malnavn direkte på knappen
   ===================================================== */

.fritekst-modal-container .fritekst-mode-btn.fritekst-active.fritekst-has-mal {
  background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
  color: #ffffff;
  border-color: #0d47a1;
  gap: 6px;
  max-width: 280px;
}

.fritekst-mode-btn .fritekst-mal-name {
  display: none;
  font-weight: 400;
  font-size: 0.82rem;
  opacity: 0.92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.fritekst-mode-btn.fritekst-active.fritekst-has-mal .fritekst-mal-name {
  display: inline;
}

/* Liten pil-knapp for å åpne maler-modal */
.fritekst-mode-btn.fritekst-active.fritekst-has-mal .material-icons:last-child {
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
  .fritekst-maler-panel {
    width: 100%;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
  }

  .fritekst-mode-btn .fritekst-mal-name {
    max-width: 100px;
  }
}














/* ==========================================================================
   FRITEKST PROMPT-BIBLIOTEK — DESIGN POLISH
   ========================================================================== */

/* --- MODAL OVERLAY — bedre backdrop + avrunding --- */
.fritekst-library-overlay .modal-content {
  width: 92vw;
  height: 88vh;
  max-width: 780px;
  max-height: 860px;
  border-radius: 16px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fritekst-library-overlay .modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid #e0e0e0;
  background: var(--bg-white);
  flex-shrink: 0;
}

.fritekst-library-overlay .modal-header .modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.fritekst-library-overlay .modal-header .modal-title .material-icons {
  font-size: 22px;
  color: #1976d2;
}

.fritekst-library-overlay .modal-header .close {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: var(--bg-light);
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s;
}

.fritekst-library-overlay .modal-header .close:hover {
  background: #e0e0e0;
  color: var(--text-primary);
}

/* --- TABS — renere, mer profesjonell look --- */
.fritekst-library-overlay .fritekst-modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e0e0e0;
  background: #fafbfc;
  padding: 0 8px;
  flex-shrink: 0;
}

.fritekst-library-overlay .fritekst-tab-btn {
  flex: unset;
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: 0;
}

.fritekst-library-overlay .fritekst-tab-btn .material-icons {
  font-size: 18px;
}

.fritekst-library-overlay .fritekst-tab-btn:hover {
  color: #1976d2;
  background: rgba(37, 99, 235, 0.04);
}

.fritekst-library-overlay .fritekst-tab-btn.fritekst-is-active {
  color: #1976d2;
  background: none;
  border-bottom-color: #1976d2;
  font-weight: 600;
}

/* "Lag ny" tab — subtilt uthevet */
.fritekst-library-overlay .fritekst-tab-btn[data-tab="create"] {
  margin-left: auto;
  color: #1976d2;
  font-weight: 600;
}

.fritekst-library-overlay .fritekst-tab-btn[data-tab="create"]:hover {
  background: rgba(37, 99, 235, 0.06);
}

.fritekst-library-overlay .fritekst-tab-btn[data-tab="create"].fritekst-is-active {
  color: #fff;
  background: #1976d2;
  border-radius: 8px;
  border-bottom-color: transparent;
  margin-bottom: 0;
  padding: 8px 18px;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* --- MODAL BODY --- */
.fritekst-library-overlay .modal-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* --- SEARCH & CONTROLS --- */
.fritekst-library-overlay .fritekst-library-controls {
  padding: 14px 20px;
  border-bottom: 1px solid #fafafa;
  background: var(--bg-white);
  flex-shrink: 0;
}

.fritekst-library-overlay .fritekst-library-controls-inner {
  display: flex;
  gap: 10px;
  align-items: center;
}

.fritekst-library-overlay .fritekst-search-box-wrapper {
  position: relative;
  flex: 1;
}

.fritekst-library-overlay .fritekst-library-search {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  font-size: 0.9rem;
  background: var(--bg-light);
  outline: none;
  transition: all 0.2s;
}

.fritekst-library-overlay .fritekst-library-search:focus {
  border-color: #90caf9;
  background: var(--bg-white);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.fritekst-library-overlay .fritekst-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #9e9e9e;
  pointer-events: none;
}

/* Oppdater-knapp — fjernet fra HTML */
.fritekst-library-overlay #fritekstLibraryRefresh {
  display: none;
}

/* Search clear button */
.fritekst-library-overlay .fritekst-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e0e0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
  padding: 0;
}

.fritekst-library-overlay .fritekst-search-clear:hover {
  background: #cbd5e1;
  color: var(--text-secondary);
}

.fritekst-library-overlay .fritekst-search-clear .material-icons {
  font-size: 16px;
}

/* Adjust search input padding for clear button */
.fritekst-library-overlay .fritekst-library-search {
  padding-right: 42px !important;
}

/* --- LIST VIEW --- */
.fritekst-library-overlay .fritekst-library-view {
  display: none;
  padding: 0;
  height: auto;
  flex: 1;
  overflow-y: auto;
}

.fritekst-library-overlay .fritekst-library-view.fritekst-active {
  display: flex;
  flex-direction: column;
}

.fritekst-library-overlay .fritekst-library-list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- PROMPT CARDS — polished redesign --- */
.fritekst-library-overlay .fritekst-prompt-card {
  background: var(--bg-white);
  border: 1.5px solid #e8ecf1;
  border-radius: 12px;
  padding: 18px 20px;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.fritekst-library-overlay .fritekst-prompt-card:hover {
  border-color: #bfdbfe;
  box-shadow:
    0 4px 16px rgba(37, 99, 235, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.03);
  transform: translateY(-1px);
}

/* Card header */
.fritekst-library-overlay .fritekst-prompt-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.fritekst-library-overlay .fritekst-prompt-card-header h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.35;
}

/* Card actions */
.fritekst-library-overlay .fritekst-prompt-card-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.fritekst-library-overlay .fritekst-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #9e9e9e;
  transition: all 0.15s ease;
  padding: 0;
}

.fritekst-library-overlay .fritekst-icon-btn:hover {
  background: var(--bg-light);
}

.fritekst-library-overlay .fritekst-icon-btn .material-icons {
  font-size: 20px;
}

/* ======== FAVORITT-STJERNE — GUL NÅR AKTIV ======== */
.fritekst-prompt-card .fritekst-icon-btn[data-action="toggle-favorite"] .material-icons {
  transition: color 0.2s, transform 0.2s;
}

/* Favoritt fyllt — gul (matcher via title-attributt og .is-favorite klasse) */
.fritekst-library-overlay .fritekst-icon-btn[data-action="toggle-favorite"][title*="Fjern"] .material-icons,
.fritekst-library-overlay .fritekst-icon-btn[data-action="toggle-favorite"].is-favorite .material-icons,
.fritekst-prompt-card .fritekst-icon-btn[data-action="toggle-favorite"][title*="Fjern"] .material-icons,
.fritekst-prompt-card .fritekst-icon-btn[data-action="toggle-favorite"].is-favorite .material-icons {
  color: #f59e0b !important;
}

/* Hover: alltid gul */
.fritekst-library-overlay .fritekst-icon-btn[data-action="toggle-favorite"]:hover .material-icons,
.fritekst-prompt-card .fritekst-icon-btn[data-action="toggle-favorite"]:hover .material-icons {
  color: #f59e0b;
  transform: scale(1.15);
}

/* Edit hover */
.fritekst-library-overlay .fritekst-icon-btn[data-action="edit-prompt"]:hover {
  color: #1976d2;
  background: #e3f2fd;
}

/* Delete hover */
.fritekst-library-overlay .fritekst-icon-btn[data-action="delete-prompt"]:hover {
  color: #ef4444;
  background: #fef2f2;
}

/* Card description */
.fritekst-library-overlay .fritekst-prompt-card-description {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.fritekst-library-overlay .fritekst-prompt-card-description:empty {
  display: none;
}

/* Card preview (italic content snippet) */
.fritekst-library-overlay .fritekst-prompt-card-preview {
  margin: 0;
  font-size: 0.8rem;
  color: #9e9e9e;
  line-height: 1.45;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  background: var(--bg-light);
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid #e0e0e0;
}

/* Card meta */
.fritekst-library-overlay .fritekst-prompt-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: #9e9e9e;
}

.fritekst-library-overlay .fritekst-published-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #dcfce7;
  color: #15803d;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
}

/* Card footer */
.fritekst-library-overlay .fritekst-prompt-card-footer {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #fafafa;
}

/* --- BUTTONS i library --- */
.fritekst-library-overlay .fritekst-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #1976d2;
  color: #fff;
}

.fritekst-library-overlay .fritekst-button:hover {
  background: #0d47a1;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.2);
}

.fritekst-library-overlay .fritekst-button .material-icons {
  font-size: 16px;
}

.fritekst-library-overlay .fritekst-button.fritekst-small {
  padding: 6px 12px;
  font-size: 0.78rem;
}

.fritekst-library-overlay .fritekst-button.fritekst-secondary {
  background: var(--bg-light);
  color: var(--text-secondary);
  border: 1.5px solid #e0e0e0;
}

.fritekst-library-overlay .fritekst-button.fritekst-secondary:hover {
  background: #e0e0e0;
  border-color: #cbd5e1;
  box-shadow: none;
  transform: none;
}

.fritekst-library-overlay .fritekst-button.fritekst-danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1.5px solid #fecaca;
}

.fritekst-library-overlay .fritekst-button.fritekst-danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  box-shadow: none;
}

/* ==========================================================================
   LAG NY / REDIGER — FORM REDESIGN
   ========================================================================== */

.fritekst-library-overlay .fritekst-prompt-form {
  padding: 28px 32px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.fritekst-library-overlay .fritekst-prompt-form h3 {
  margin: 0 0 24px 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.fritekst-library-overlay .fritekst-prompt-form h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 22px;
  background: #1976d2;
  border-radius: 2px;
}

/* Form groups */
.fritekst-library-overlay .fritekst-form-group {
  margin-bottom: 20px;
}

.fritekst-library-overlay .fritekst-form-label {
  display: block;
  margin-bottom: 7px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.fritekst-library-overlay .fritekst-form-label .fritekst-required {
  color: #ef4444;
  margin-left: 2px;
  font-weight: 700;
}

/* Inputs */
.fritekst-library-overlay .fritekst-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--bg-white);
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.fritekst-library-overlay .fritekst-input::placeholder {
  color: var(--text-muted);
}

.fritekst-library-overlay .fritekst-input:focus {
  border-color: #64b5f6;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  background: var(--bg-white);
}

/* Textarea */
.fritekst-library-overlay .fritekst-content-textarea {
  resize: vertical;
  min-height: 180px;
  max-height: 400px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.88rem;
  line-height: 1.6;
  padding: 14px 16px;
}

/* Char counter */
.fritekst-library-overlay .fritekst-char-counter {
  text-align: right;
  font-size: 0.76rem;
  color: #9e9e9e;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* Checkbox group */
.fritekst-library-overlay .fritekst-checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-light);
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.15s;
}

.fritekst-library-overlay .fritekst-checkbox-group:hover {
  border-color: #cbd5e1;
  background: var(--bg-light);
}

.fritekst-library-overlay .fritekst-checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #1976d2;
  cursor: pointer;
  flex-shrink: 0;
}

.fritekst-library-overlay .fritekst-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  margin: 0;
}

.fritekst-library-overlay .fritekst-checkbox-label .material-icons {
  font-size: 18px;
  color: var(--text-muted);
}

/* Form actions (Avbryt + Lagre) */
.fritekst-library-overlay .fritekst-form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1.5px solid #fafafa;
  gap: 12px;
}

.fritekst-library-overlay .fritekst-form-actions-left,
.fritekst-library-overlay .fritekst-form-actions-right {
  display: flex;
  gap: 10px;
}

/* Lagre-knapp i form — litt større og grønnere */
.fritekst-library-overlay #fritekstPromptSave {
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 10px;
  background: #1976d2;
  color: #fff;
}

.fritekst-library-overlay #fritekstPromptSave:hover {
  background: #0d47a1;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

/* Avbryt-knapp */
.fritekst-library-overlay #fritekstPromptCancel {
  padding: 10px 20px;
  font-size: 0.9rem;
  border-radius: 10px;
}

/* Slett-knapp (kun synlig ved redigering) */
.fritekst-library-overlay #fritekstPromptDelete {
  padding: 10px 18px;
  font-size: 0.9rem;
  border-radius: 10px;
}

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */

.fritekst-library-overlay .fritekst-maler-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  color: #9e9e9e;
  gap: 8px;
}

.fritekst-library-overlay .fritekst-maler-empty .material-icons {
  font-size: 48px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

/* ==========================================================================
   VIEW DETAILS (Se detaljer)
   ========================================================================== */

.fritekst-library-overlay .fritekst-prompt-view-only {
  padding: 28px 32px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.fritekst-library-overlay .fritekst-view-header {
  margin-bottom: 20px;
}

.fritekst-library-overlay .fritekst-view-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.fritekst-library-overlay .fritekst-view-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding-bottom: 16px;
  border-bottom: 1px solid #fafafa;
  margin-bottom: 20px;
}

.fritekst-library-overlay .fritekst-view-section {
  margin-bottom: 20px;
}

.fritekst-library-overlay .fritekst-view-section label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.fritekst-library-overlay .fritekst-view-content {
  background: var(--bg-light);
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px 18px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
  color: var(--text-secondary);
}

.fritekst-library-overlay .fritekst-view-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1.5px solid #fafafa;
}

/* ==========================================================================
   LOADING SPINNER
   ========================================================================== */

.fritekst-library-overlay .fritekst-loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.fritekst-library-overlay .fritekst-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e0e0e0;
  border-top-color: #1976d2;
  border-radius: 50%;
  animation: fritekst-lib-spin 0.7s linear infinite;
}

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

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

@media (max-width: 768px) {
  .fritekst-library-overlay .modal-content {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }

  .fritekst-library-overlay .fritekst-modal-tabs {
    overflow-x: auto;
    padding: 0 4px;
    -webkit-overflow-scrolling: touch;
  }

  .fritekst-library-overlay .fritekst-tab-btn {
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .fritekst-library-overlay .fritekst-prompt-form {
    padding: 20px 18px;
  }

  .fritekst-library-overlay .fritekst-library-list {
    padding: 12px 14px;
  }

  .fritekst-library-overlay .fritekst-form-actions {
    flex-wrap: wrap;
  }

  .fritekst-library-overlay .fritekst-prompt-view-only {
    padding: 20px 18px;
  }
}

@media (max-width: 480px) {
  .fritekst-library-overlay .fritekst-tab-btn .material-icons {
    display: none;
  }

  .fritekst-library-overlay .fritekst-library-controls-inner {
    flex-direction: column;
    gap: 8px;
  }

  .fritekst-library-overlay .fritekst-search-clear {
    width: 24px;
    height: 24px;
  }
}
/* =============================================================================
   SLASH COMMANDS — Snarvei-system for Fritekst KI
   Prefix: shortc-
   Lyst tema, blek gul popup
   ============================================================================= */

/* --- Popup Container --- */
.shortc-popup {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 6px;
    background: #fffef5;
    border: 1px solid #e8e3c8;
    border-radius: 10px;
    box-shadow:
        0 -4px 20px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(202, 191, 142, 0.12);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    max-height: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.shortc-popup-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- Popup Header --- */
.shortc-popup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #8a7e52;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #ede8d0;
    background: #fdfbf0;
    flex-shrink: 0;
}

.shortc-popup-header-icon {
    font-size: 14px;
    color: #c9a32a;
}

.shortc-popup-header .shortc-kbd {
    margin-left: auto;
}

/* --- Popup List --- */
.shortc-popup-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: #ddd8be transparent;
}

.shortc-popup-list::-webkit-scrollbar {
    width: 4px;
}

.shortc-popup-list::-webkit-scrollbar-thumb {
    background: #ddd8be;
    border-radius: 4px;
}

/* --- Popup Item --- */
.shortc-popup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s ease;
    user-select: none;
}

.shortc-popup-item:hover,
.shortc-popup-item-selected {
    background: rgba(202, 163, 42, 0.08);
}

.shortc-popup-item-selected {
    background: rgba(202, 163, 42, 0.13);
}

.shortc-popup-item-code {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 600;
    color: #8a6d14;
    background: rgba(202, 163, 42, 0.1);
    border: 1px solid rgba(202, 163, 42, 0.2);
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    min-width: 48px;
    text-align: center;
    flex-shrink: 0;
}

.shortc-popup-item-name {
    font-size: 13px;
    color: #3d3a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Empty / No Results State --- */
.shortc-popup-empty {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    color: #a39d80;
    font-size: 12px;
}

.shortc-popup-empty .material-icons {
    font-size: 18px;
    opacity: 0.5;
}

.shortc-popup-no-results .shortc-popup-empty {
    display: flex;
}

.shortc-popup-no-results .shortc-popup-list {
    display: none;
}

/* --- Popup Footer --- */
.shortc-popup-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    font-size: 10px;
    color: #a39d80;
    border-top: 1px solid #ede8d0;
    background: #fdfbf0;
    flex-shrink: 0;
}

.shortc-popup-footer span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Kbd Tag (reusable) --- */
.shortc-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 9px;
    font-weight: 500;
    color: #8a7e52;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    padding: 1px 5px;
    line-height: 1.4;
    min-width: 18px;
}

/* --- Input Flash Animation (når snarvei aktiveres) --- */
.shortc-input-flash {
    animation: shortc-flash-anim 0.4s ease-out;
}

@keyframes shortc-flash-anim {
    0% {
        box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.35);
        border-color: var(--fritekst-primary, #1976d2);
    }
    50% {
        box-shadow: 0 0 10px 2px rgba(25, 118, 210, 0.15);
        border-color: var(--fritekst-primary, #1976d2);
    }
    100% {
        box-shadow: none;
        border-color: var(--fritekst-border-medium, #cbd5e0);
    }
}

/* --- Confetti Animation (når snarvei aktiveres) --- */
/* CSP-kompatibel: Ingen inline styles, kun forhåndsdefinerte klasser */

/* Usynlig speil-element for å måle caret-posisjon i textarea */
.shortc-caret-mirror {
    position: absolute;
    visibility: hidden;
    top: 0;
    left: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    pointer-events: none;
    /* Matcher .fritekst-chat-input styling */
    font-family: inherit;
    font-size: 1rem;
    padding: 12px 16px;
    border: 1px solid transparent;
    box-sizing: border-box;
    width: 100%;
}

.shortc-confetti-container {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 99999;
    overflow: visible;
}

/* 20 horisontale posisjoner (0% til 95% i 5%-steg) */
.shortc-confetti-x-0  { left: 0%; }
.shortc-confetti-x-1  { left: 5%; }
.shortc-confetti-x-2  { left: 10%; }
.shortc-confetti-x-3  { left: 15%; }
.shortc-confetti-x-4  { left: 20%; }
.shortc-confetti-x-5  { left: 25%; }
.shortc-confetti-x-6  { left: 30%; }
.shortc-confetti-x-7  { left: 35%; }
.shortc-confetti-x-8  { left: 40%; }
.shortc-confetti-x-9  { left: 45%; }
.shortc-confetti-x-10 { left: 50%; }
.shortc-confetti-x-11 { left: 55%; }
.shortc-confetti-x-12 { left: 60%; }
.shortc-confetti-x-13 { left: 65%; }
.shortc-confetti-x-14 { left: 70%; }
.shortc-confetti-x-15 { left: 75%; }
.shortc-confetti-x-16 { left: 80%; }
.shortc-confetti-x-17 { left: 85%; }
.shortc-confetti-x-18 { left: 90%; }
.shortc-confetti-x-19 { left: 95%; }

.shortc-confetti-particle {
    position: absolute;
    width: 7px;
    height: 7px;
    opacity: 0;
    will-change: transform, opacity;
}

/* --- Farger --- */
.shortc-confetti-c-blue    { background: #1976d2; }
.shortc-confetti-c-green   { background: #2e7d32; }
.shortc-confetti-c-amber   { background: #f59e0b; }
.shortc-confetti-c-red     { background: #ef4444; }
.shortc-confetti-c-purple  { background: #8b5cf6; }
.shortc-confetti-c-pink    { background: #ec4899; }
.shortc-confetti-c-cyan    { background: #06b6d4; }
.shortc-confetti-c-orange  { background: #f97316; }

/* --- Former --- */
.shortc-confetti-s-square  { width: 7px; height: 7px; border-radius: 2px; }
.shortc-confetti-s-circle  { width: 7px; height: 7px; border-radius: 50%; }
.shortc-confetti-s-rect    { width: 4px; height: 10px; border-radius: 1px; }

/* --- Delays --- */
.shortc-confetti-del-0 { animation-delay: 0s; }
.shortc-confetti-del-1 { animation-delay: 0.07s; }
.shortc-confetti-del-2 { animation-delay: 0.14s; }

/* --- 12 retninger i en vifte oppover (200°–340° med ~12° mellomrom) --- */
.shortc-confetti-d-0  { animation: shortc-cb-0  0.7s ease-out forwards; }
.shortc-confetti-d-1  { animation: shortc-cb-1  0.7s ease-out forwards; }
.shortc-confetti-d-2  { animation: shortc-cb-2  0.7s ease-out forwards; }
.shortc-confetti-d-3  { animation: shortc-cb-3  0.7s ease-out forwards; }
.shortc-confetti-d-4  { animation: shortc-cb-4  0.7s ease-out forwards; }
.shortc-confetti-d-5  { animation: shortc-cb-5  0.7s ease-out forwards; }
.shortc-confetti-d-6  { animation: shortc-cb-6  0.7s ease-out forwards; }
.shortc-confetti-d-7  { animation: shortc-cb-7  0.7s ease-out forwards; }
.shortc-confetti-d-8  { animation: shortc-cb-8  0.7s ease-out forwards; }
.shortc-confetti-d-9  { animation: shortc-cb-9  0.7s ease-out forwards; }
.shortc-confetti-d-10 { animation: shortc-cb-10 0.7s ease-out forwards; }
.shortc-confetti-d-11 { animation: shortc-cb-11 0.7s ease-out forwards; }

/* Pre-beregnet: angle = 200 + i*12.7 grader, velocity ~90px */
@keyframes shortc-cb-0 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-85px, -31px) rotate(320deg) scale(0.3); }
}
@keyframes shortc-cb-1 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-76px, -52px) rotate(-280deg) scale(0.3); }
}
@keyframes shortc-cb-2 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-62px, -68px) rotate(400deg) scale(0.3); }
}
@keyframes shortc-cb-3 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-44px, -80px) rotate(-350deg) scale(0.3); }
}
@keyframes shortc-cb-4 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-23px, -87px) rotate(290deg) scale(0.3); }
}
@keyframes shortc-cb-5 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(0px, -90px) rotate(-420deg) scale(0.3); }
}
@keyframes shortc-cb-6 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(23px, -87px) rotate(360deg) scale(0.3); }
}
@keyframes shortc-cb-7 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(44px, -80px) rotate(-300deg) scale(0.3); }
}
@keyframes shortc-cb-8 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(62px, -68px) rotate(440deg) scale(0.3); }
}
@keyframes shortc-cb-9 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(76px, -52px) rotate(-260deg) scale(0.3); }
}
@keyframes shortc-cb-10 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(85px, -31px) rotate(380deg) scale(0.3); }
}
@keyframes shortc-cb-11 {
    0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(90px, -8px) rotate(-340deg) scale(0.3); }
}

/* --- Snarvei-felt i Maler-modal prompt-items --- */
.shortc-prompt-item-body {
    flex: 1;
    min-width: 0;
}

.shortc-shortcut-field {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

.shortc-shortcut-input-wrapper {
    display: flex;
    align-items: center;
    background: #fdfbf0;
    border: 1px solid #e0dbc4;
    border-radius: 5px;
    padding: 0 2px 0 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.shortc-shortcut-input-wrapper:focus-within {
    border-color: #c9a32a;
    box-shadow: 0 0 0 2px rgba(201, 163, 42, 0.1);
}

.shortc-shortcut-prefix {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 600;
    color: #8a6d14;
    user-select: none;
    pointer-events: none;
}

.shortc-shortcut-input {
    width: 60px;
    background: transparent;
    border: none;
    outline: none;
    color: #3d3a2e;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    padding: 4px 4px;
}

.shortc-shortcut-input::placeholder {
    color: #c4bfa5;
}

.shortc-shortcut-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #b0a882;
    cursor: pointer;
    padding: 3px;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}

.shortc-shortcut-save-btn:hover {
    color: #8a6d14;
    background: rgba(202, 163, 42, 0.1);
}

.shortc-shortcut-save-btn .material-icons {
    font-size: 16px;
}

.shortc-shortcut-save-btn.shortc-saved {
    color: #2e7d32;
}

/* --- Snarvei-badge i maler-modal prompt-items --- */
.shortc-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 10px;
    font-weight: 600;
    color: #8a6d14;
    background: rgba(202, 163, 42, 0.1);
    border: 1px solid rgba(202, 163, 42, 0.22);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .shortc-popup {
        max-height: 220px;
        left: -8px;
        right: -8px;
    }

    .shortc-popup-footer {
        display: none;
    }

    .shortc-popup-item {
        padding: 10px 10px;
    }

    .shortc-popup-item-name {
        font-size: 14px;
    }

    .shortc-shortcut-input {
        width: 50px;
    }
}

@media (max-width: 400px) {
    .shortc-popup {
        max-height: 200px;
    }

    .shortc-popup-header {
        padding: 6px 10px;
        font-size: 10px;
    }

    .shortc-popup-item {
        padding: 8px 8px;
        gap: 8px;
    }

    .shortc-popup-item-code {
        font-size: 11px;
        min-width: 40px;
        padding: 2px 5px;
    }
}
/* ============================================
   SHORT2- PREFIX: CSP-kompatible utility-klasser
   Erstatter inline style="" attributter
   ============================================ */

/* Ikon: 14px, halvt gjennomsiktig (article/star i maler) */
.short2-icon-sm-muted {
    font-size: 14px;
    opacity: 0.5;
}

/* Ikon: 18px, gul stjerne (favoritt-markør i maler) */
.short2-icon-star-fav {
    font-size: 18px;
    color: #f59e0b;
    margin-top: 1px;
    flex-shrink: 0;
}

/* Ikon med margin-right 8px (description/error i dropdown) */
.short2-icon-mr {
    margin-right: 8px;
}

/* Small-tag: høyrestilt, litt mindre tekst (dropdown badge) */
.short2-small-badge {
    margin-left: auto;
    font-size: 0.85em;
}

/* Accordion body: åpen tilstand med max-height */
.short2-accordion-body-open {
    max-height: 2000px;
}

/* Empty state: stort ikon */
.short2-icon-empty {
    font-size: 32px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* Empty state: tekstavsnitt */
.short2-empty-text {
    margin: 0 0 8px 0;
    color: var(--text-muted);
}

/* Lite ikon 16px (menu_book i knapp) */
.short2-icon-btn-sm {
    font-size: 16px;
}
/* ===== journal-summary.css ===== */
/* ==========================================================================
   JOURNAL SUMMARY CSS - HARMONISERT MED APP-DESIGNSYSTEM
   Matcher Fritekst KI og Dashboard-styling
   Versjon 2.0 - Fullstendig redesign
   ========================================================================== */

/* ==========================================================================
   CSS VARIABLER - Konsistent med app-tema
   ========================================================================== */
:root {
  /* Journal Summary spesifikke farger (slate/blå tema) */
  --js-primary: #475569;
  --js-primary-light: #64748b;
  --js-primary-dark: #334155;
  --js-primary-darker: #1e293b;
  
  /* Accent farger */
  --js-accent: #3b82f6;
  --js-accent-light: #60a5fa;
  --js-accent-dark: #2563eb;
  
  /* Status farger */
  --js-success: #10b981;
  --js-success-light: #d1fae5;
  --js-warning: #f59e0b;
  --js-warning-light: #fef3c7;
  --js-error: #ef4444;
  --js-error-light: #fee2e2;
  
  /* Nøytrale farger */
  --js-bg-page: #f8fafc;
  --js-bg-card: #ffffff;
  --js-bg-elevated: #f1f5f9;
  --js-border: #e2e8f0;
  --js-border-light: #f1f5f9;
  --js-text-primary: #1e293b;
  --js-text-secondary: #475569;
  --js-text-muted: #94a3b8;
  
  /* Shadows */
  --js-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --js-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --js-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --js-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Border radius */
  --js-radius-sm: 6px;
  --js-radius-md: 8px;
  --js-radius-lg: 12px;
  --js-radius-xl: 16px;
  
  /* Transitions */
  --js-transition-fast: 150ms ease;
  --js-transition-normal: 250ms ease;
  --js-transition-slow: 350ms ease;
}

/* ==========================================================================
   MODAL CONTAINER - Fullscreen layout
   ========================================================================== */
.journaloppsummering-summary-modal {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none !important;
}

/* ==========================================================================
   HEADER - Gradient stil som Fritekst KI
   ========================================================================== */
.journaloppsummering-header {
  background: linear-gradient(135deg, var(--js-primary) 0%, var(--js-primary-dark) 50%, var(--js-primary-darker) 100%) !important;
  color: white !important;
  padding: 1rem 1.5rem !important;
  border-bottom: none !important;
  position: relative;
  overflow: hidden;
}

/* Subtle pattern overlay */
.journaloppsummering-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(255,255,255,0.03) 0%, transparent 50%);
  pointer-events: none;
}

.journaloppsummering-header .modal-title {
  color: white !important;
  font-weight: 600;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

.journaloppsummering-header .modal-title .material-icons {
  font-size: 1.5rem;
  opacity: 0.9;
}

.journaloppsummering-header .close {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 1.75rem !important;
  transition: var(--js-transition-fast);
  position: relative;
  z-index: 1;
}

.journaloppsummering-header .close:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--js-radius-sm);
}

/* ==========================================================================
   BODY - To-kolonne layout
   ========================================================================== */
.journaloppsummering-summary-body {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  flex: 1;
  overflow: hidden;
  background: var(--js-bg-page);
}

/* ==========================================================================
   VENSTRE PANEL - Opplasting og innstillinger
   ========================================================================== */
.journaloppsummering-left-panel {
  background: var(--js-bg-card);
  border-right: 1px solid var(--js-border);
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Scrollbar styling */
.journaloppsummering-left-panel::-webkit-scrollbar {
  width: 6px;
}

.journaloppsummering-left-panel::-webkit-scrollbar-track {
  background: transparent;
}

.journaloppsummering-left-panel::-webkit-scrollbar-thumb {
  background: var(--js-border);
  border-radius: 3px;
}

.journaloppsummering-left-panel::-webkit-scrollbar-thumb:hover {
  background: var(--js-text-muted);
}

/* ==========================================================================
   SEKSJONER - Kort-basert design
   ========================================================================== */
.journaloppsummering-section {
  background: var(--js-bg-card);
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-lg);
  padding: 1.25rem;
  box-shadow: var(--js-shadow-sm);
  transition: var(--js-transition-normal);
}

.journaloppsummering-section:hover {
  box-shadow: var(--js-shadow-md);
}

.journaloppsummering-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--js-text-primary);
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--js-border-light);
}

.journaloppsummering-section h3 .material-icons {
  font-size: 1.25rem;
  color: var(--js-accent);
}

/* ==========================================================================
   UPLOAD SECTION
   ========================================================================== */
.journaloppsummering-upload-help {
  font-size: 0.8rem;
  color: var(--js-text-muted);
  margin: -0.5rem 0 1rem 0;
}

/* ==========================================================================
   DROP ZONE - Modernisert
   ========================================================================== */
.journaloppsummering-drop-zone {
  border: 2px dashed var(--js-border);
  border-radius: var(--js-radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--js-bg-elevated);
  transition: var(--js-transition-normal);
  cursor: pointer;
}

.journaloppsummering-drop-zone:hover {
  border-color: var(--js-accent);
  background: rgba(59, 130, 246, 0.05);
}

.journaloppsummering-drop-zone.journaloppsummering-drag-over {
  border-color: var(--js-accent);
  background: rgba(59, 130, 246, 0.1);
  transform: scale(1.01);
}

.journaloppsummering-drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.journaloppsummering-drop-zone-icon {
  font-size: 3rem !important;
  color: var(--js-accent);
  opacity: 0.7;
}

.journaloppsummering-drop-zone h4 {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--js-text-secondary);
  margin: 0;
}

.journaloppsummering-drop-zone p {
  font-size: 0.8rem;
  color: var(--js-text-muted);
  margin: 0;
}

/* Upload Button */
.journaloppsummering-upload-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, var(--js-accent) 0%, var(--js-accent-dark) 100%);
  color: white;
  border: none;
  border-radius: var(--js-radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--js-transition-fast);
  box-shadow: var(--js-shadow-sm);
}

.journaloppsummering-upload-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--js-shadow-md);
  background: linear-gradient(135deg, var(--js-accent-light) 0%, var(--js-accent) 100%);
}

.journaloppsummering-upload-button .material-icons {
  font-size: 1.125rem;
}

/* ==========================================================================
   FILE INFO - Fil valgt visning
   ========================================================================== */
.journaloppsummering-file-info {
  background: var(--js-bg-elevated);
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-md);
  padding: 1rem;
  margin-top: 1rem;
}

.journaloppsummering-file-info-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.journaloppsummering-file-icon {
  font-size: 2rem !important;
  color: var(--js-accent);
}

.journaloppsummering-file-details {
  flex: 1;
  min-width: 0;
}

.journaloppsummering-file-name {
  font-weight: 500;
  color: var(--js-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.journaloppsummering-file-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--js-text-muted);
}

.journaloppsummering-token-count {
  color: var(--js-accent);
  font-weight: 500;
}

/* Remove file button */
.journaloppsummering-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-sm);
  color: var(--js-text-muted);
  cursor: pointer;
  transition: var(--js-transition-fast);
}

.journaloppsummering-icon-button:hover {
  background: var(--js-error-light);
  border-color: var(--js-error);
  color: var(--js-error);
}

/* Token Progress */
.journaloppsummering-token-progress-container {
  margin-top: 0.75rem;
}

.journaloppsummering-token-progress-bar {
  height: 4px;
  background: var(--js-border);
  border-radius: 2px;
  overflow: hidden;
}

.journaloppsummering-token-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--js-accent) 0%, var(--js-accent-light) 100%);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.journaloppsummering-token-progress-text {
  font-size: 0.75rem;
  color: var(--js-text-muted);
  margin-top: 0.5rem;
  text-align: center;
}

/* Token Warning */
.journaloppsummering-token-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--js-error-light);
  border: 1px solid var(--js-error);
  border-radius: var(--js-radius-md);
  margin-top: 1rem;
}

.journaloppsummering-token-warning .material-icons {
  color: var(--js-error);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.journaloppsummering-token-warning strong {
  display: block;
  color: var(--js-error);
  margin-bottom: 0.25rem;
}

.journaloppsummering-token-warning p {
  font-size: 0.8rem;
  color: var(--js-text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================================
   INSTRUCTIONS SECTION
   ========================================================================== */
.journaloppsummering-instructions-examples {
  background: var(--js-bg-elevated);
  border-radius: var(--js-radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
}

.journaloppsummering-instructions-examples h4 {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--js-text-secondary);
  margin: 0 0 0.75rem 0;
}

.journaloppsummering-examples-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.journaloppsummering-examples-list li {
  font-size: 0.8rem;
  color: var(--js-text-muted);
  padding-left: 1rem;
  position: relative;
}

.journaloppsummering-examples-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--js-accent);
}

.journaloppsummering-examples-list li strong {
  color: var(--js-text-secondary);
  font-weight: 500;
}

/* Instructions Textarea */
.journaloppsummering-instructions-input {
  width: 100%;
  padding: 0.875rem;
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-md);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--js-text-primary);
  background: var(--js-bg-card);
  resize: vertical;
  min-height: 100px;
  transition: var(--js-transition-fast);
}

.journaloppsummering-instructions-input:focus {
  outline: none;
  border-color: var(--js-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.journaloppsummering-instructions-input::placeholder {
  color: var(--js-text-muted);
}

/* ==========================================================================
   FORMAT INFO SECTION
   ========================================================================== */
.journaloppsummering-format-info {
  background: linear-gradient(135deg, var(--js-bg-elevated) 0%, var(--js-bg-card) 100%);
}

.journaloppsummering-format-description {
  font-size: 0.85rem;
  color: var(--js-text-secondary);
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

.journaloppsummering-format-preview {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.journaloppsummering-format-section {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 0.875rem;
  background: var(--js-bg-card);
  border-left: 3px solid var(--js-accent);
  border-radius: 0 var(--js-radius-sm) var(--js-radius-sm) 0;
}

.journaloppsummering-format-section strong {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--js-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.journaloppsummering-format-section small {
  font-size: 0.75rem;
  color: var(--js-text-muted);
}

/* ==========================================================================
   HØYRE PANEL - Editor og resultater
   ========================================================================== */
.journaloppsummering-right-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--js-bg-page);
  padding: 1.5rem;
}

/* ==========================================================================
   TEXT EDITOR SECTION
   ========================================================================== */
.journaloppsummering-text-editor-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--js-bg-card);
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-lg);
  overflow: hidden;
  box-shadow: var(--js-shadow-sm);
}

.journaloppsummering-text-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1rem;
  background: var(--js-bg-elevated);
  border-bottom: 1px solid var(--js-border);
}

.journaloppsummering-text-editor-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--js-text-primary);
}

.journaloppsummering-text-editor-title .material-icons {
  font-size: 1.125rem;
  color: var(--js-accent);
}

.journaloppsummering-text-editor-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Token Display Badge */
.journaloppsummering-token-display {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--js-bg-card);
  border: 1px solid var(--js-border);
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--js-text-muted);
  transition: var(--js-transition-fast);
}

.journaloppsummering-token-display.success {
  background: var(--js-success-light);
  border-color: var(--js-success);
  color: var(--js-success);
}

.journaloppsummering-token-display.warning {
  background: var(--js-warning-light);
  border-color: var(--js-warning);
  color: var(--js-warning);
}

.journaloppsummering-token-display.error {
  background: var(--js-error-light);
  border-color: var(--js-error);
  color: var(--js-error);
}

.journaloppsummering-token-icon {
  font-size: 1rem !important;
}

/* Action Buttons */
.journaloppsummering-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-md);
  background: var(--js-bg-card);
  color: var(--js-text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--js-transition-fast);
}

.journaloppsummering-action-btn:hover {
  background: var(--js-bg-elevated);
  border-color: var(--js-text-muted);
}

.journaloppsummering-action-btn .material-icons {
  font-size: 1rem;
}

.journaloppsummering-action-btn.journaloppsummering-primary {
  background: linear-gradient(135deg, var(--js-accent) 0%, var(--js-accent-dark) 100%);
  border-color: var(--js-accent-dark);
  color: white;
}

.journaloppsummering-action-btn.journaloppsummering-primary:hover {
  background: linear-gradient(135deg, var(--js-accent-light) 0%, var(--js-accent) 100%);
}

.journaloppsummering-action-btn.journaloppsummering-secondary {
  background: var(--js-bg-card);
  border-color: var(--js-border);
  color: var(--js-text-secondary);
}

.journaloppsummering-action-btn.journaloppsummering-secondary:hover {
  background: var(--js-bg-elevated);
}

/* Text Editor Textarea */
.journaloppsummering-text-editor {
  flex: 1;
  width: 100%;
  padding: 1rem;
  border: none;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--js-text-primary);
  background: var(--js-bg-card);
  resize: none;
}

.journaloppsummering-text-editor:focus {
  outline: none;
}

.journaloppsummering-text-editor::placeholder {
  color: var(--js-text-muted);
  font-family: inherit;
}

/* ==========================================================================
   RESULTS SECTION
   ========================================================================== */
.journaloppsummering-results-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--js-bg-card);
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-lg);
  overflow: hidden;
  box-shadow: var(--js-shadow-sm);
}

.journaloppsummering-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1rem;
  background: linear-gradient(135deg, var(--js-success) 0%, #059669 100%);
  border-bottom: none;
}

.journaloppsummering-results-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  margin: 0;
  padding: 0;
  border: none;
}

.journaloppsummering-results-header h3 .material-icons {
  font-size: 1.25rem;
  color: white;
}

.journaloppsummering-results-actions {
  display: flex;
  gap: 0.5rem;
}

.journaloppsummering-results-actions .journaloppsummering-action-btn {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.journaloppsummering-results-actions .journaloppsummering-action-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Result Textarea */
.journaloppsummering-result-textarea {
  flex: 1;
  width: 100%;
  padding: 1rem;
  border: none;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--js-text-primary);
  background: var(--js-bg-card);
  resize: none;
}

.journaloppsummering-result-textarea:focus {
  outline: none;
}

/* Processing Stats */
.journaloppsummering-processing-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: var(--js-bg-elevated);
  border-top: 1px solid var(--js-border);
}

.journaloppsummering-stat-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  color: var(--js-text-secondary);
}

.journaloppsummering-stat-item .material-icons {
  font-size: 1rem;
  color: var(--js-text-muted);
}

.journaloppsummering-epj-ready-indicator {
  color: var(--js-success);
}

.journaloppsummering-epj-ready-indicator .material-icons {
  color: var(--js-success);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.journaloppsummering-summary-footer {
  background: var(--js-bg-card) !important;
  border-top: 1px solid var(--js-border) !important;
  padding: 1rem 1.5rem !important;
  position: relative;
}

.journaloppsummering-summary-footer .modal-actions {
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0;
  border: none;
  background: transparent;
}

/* Footer Buttons */
.journaloppsummering-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--js-radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--js-transition-fast);
}

.journaloppsummering-footer-btn.journaloppsummering-secondary {
  background: var(--js-bg-card);
  border: 1px solid var(--js-border);
  color: var(--js-text-secondary);
}

.journaloppsummering-footer-btn.journaloppsummering-secondary:hover {
  background: var(--js-bg-elevated);
  border-color: var(--js-text-muted);
}

.journaloppsummering-generate-btn {
  background: linear-gradient(135deg, var(--js-primary) 0%, var(--js-primary-dark) 100%);
  border: none;
  color: white;
  box-shadow: var(--js-shadow-md);
}

.journaloppsummering-generate-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--js-primary-light) 0%, var(--js-primary) 100%);
  transform: translateY(-1px);
  box-shadow: var(--js-shadow-lg);
}

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

.journaloppsummering-generate-btn .material-icons {
  font-size: 1.125rem;
}

/* ==========================================================================
   PROCESSING OVERLAY
   ========================================================================== */
.journaloppsummering-processing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.journaloppsummering-processing-content {
  text-align: center;
  max-width: 320px;
}

/* Spinner - tre sirkler som Fritekst KI */
.journaloppsummering-processing-spinner {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.journaloppsummering-spinner-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--js-accent);
  animation: journaloppsummering-bounce 1.4s ease-in-out infinite;
}

.journaloppsummering-spinner-circle:nth-child(1) {
  animation-delay: -0.32s;
}

.journaloppsummering-spinner-circle:nth-child(2) {
  animation-delay: -0.16s;
}

.journaloppsummering-spinner-circle:nth-child(3) {
  animation-delay: 0s;
}

@keyframes journaloppsummering-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.journaloppsummering-processing-content h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--js-text-primary);
  margin: 0 0 0.5rem 0;
}

.journaloppsummering-processing-content p {
  font-size: 0.9rem;
  color: var(--js-text-muted);
  margin: 0 0 1.25rem 0;
}

/* Progress Bar */
.journaloppsummering-processing-progress {
  margin-bottom: 1rem;
}

.journaloppsummering-progress-bar {
  height: 6px;
  background: var(--js-border);
  border-radius: 3px;
  overflow: hidden;
}

.journaloppsummering-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--js-accent) 0%, var(--js-accent-light) 50%, var(--js-accent) 100%);
  background-size: 200% 100%;
  border-radius: 3px;
  animation: journaloppsummering-shimmer 1.5s ease-in-out infinite;
}

@keyframes journaloppsummering-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.journaloppsummering-processing-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  color: var(--js-text-muted);
}

.journaloppsummering-processing-note .material-icons {
  font-size: 1rem;
  color: var(--js-accent);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1024px) {

  .journaloppsummering-summary-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .journaloppsummering-left-panel {
    border-right: none;
    border-bottom: 1px solid var(--js-border);
    max-height: 40vh;
  }

  .journaloppsummering-right-panel {
    min-height: 50vh;
  }
}

@media (max-width: 640px) {
  .journaloppsummering-header {
    padding: 0.875rem 1rem !important;
  }

  .journaloppsummering-left-panel,
  .journaloppsummering-right-panel {
    padding: 1rem;
  }

  .journaloppsummering-section {
    padding: 1rem;
  }

  .journaloppsummering-drop-zone {
    padding: 1.5rem 1rem;
  }

  .journaloppsummering-footer-btn {
    padding: 0.625rem 1rem;
    font-size: 0.85rem;
  }

  .journaloppsummering-processing-stats {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ==========================================================================
   FLERFILSTØTTE (fra eksisterende CSS)
   ========================================================================== */
.journal-files-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--js-border);
  max-height: 200px;
  overflow-y: auto;
}

.journal-file-item {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.5rem;
  background: var(--js-bg-elevated);
  border: 1px solid var(--js-border);
  border-radius: var(--js-radius-md);
  transition: var(--js-transition-fast);
}

.journal-file-item:hover {
  background: var(--js-bg-page);
  border-color: var(--js-text-muted);
}

.file-item-icon {
  color: var(--js-accent);
  margin-right: 0.75rem;
  font-size: 1.5rem;
}

.file-item-details {
  flex: 1;
  min-width: 0;
}

.file-item-name {
  font-weight: 500;
  color: var(--js-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.125rem;
  font-size: 0.875rem;
}

.file-item-stats {
  font-size: 0.75rem;
  color: var(--js-text-muted);
}

.file-item-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--js-radius-sm);
  color: var(--js-text-muted);
  transition: var(--js-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-item-remove:hover {
  background: var(--js-error-light);
  color: var(--js-error);
}

.file-item-remove .material-icons {
  font-size: 1.25rem;
}

/* Scrollbar styling for filliste */
.journal-files-list::-webkit-scrollbar {
  width: 6px;
}

.journal-files-list::-webkit-scrollbar-track {
  background: transparent;
}

.journal-files-list::-webkit-scrollbar-thumb {
  background: var(--js-border);
  border-radius: 3px;
}

.journal-files-list::-webkit-scrollbar-thumb:hover {
  background: var(--js-text-muted);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */
.journaloppsummering-hidden {
  display: none !important;
}

/* Smooth transitions for show/hide */
.journaloppsummering-fade-enter {
  opacity: 0;
  transform: translateY(10px);
}

.journaloppsummering-fade-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.journaloppsummering-fade-exit {
  opacity: 1;
}

.journaloppsummering-fade-exit-active {
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* ===== fritekst-bilde.css ===== */
/* ============================================
   FRITEKST BILDE-UPLOAD STYLING
   Prefiks: fritekst-bilde-
   ============================================ */

/* Upload Section Container */
.fritekst-bilde-upload-section {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  border: none;
  position: relative;
}

/* Upload Header */
.fritekst-bilde-upload-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

/* Upload Button Label */
.fritekst-bilde-upload-button-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--bg-white);
  color: #1976d2;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1.5px solid #1976d2;
}

.fritekst-bilde-upload-button-label:hover {
  background: #e3f2fd;
  border-color: #0d47a1;
  color: #0d47a1;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.12);
}

.fritekst-bilde-upload-button-label:active {
  transform: translateY(0);
}

.fritekst-bilde-upload-button-label .material-icons {
  font-size: 18px;
}

/* Info Notice */
.fritekst-bilde-info-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  font-size: 12px;
  color: #856404;
  flex: 1;
  min-width: 200px;
}

.fritekst-bilde-info-notice .material-icons {
  font-size: 16px;
  color: #ffc107;
}

/* Thumbnails Container */
.fritekst-bilde-thumbnails-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  min-height: 0;
}

.fritekst-bilde-thumbnails-container:empty {
  display: none;
}

/* Individual Thumbnail */
.fritekst-bilde-thumbnail {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e0e0e0;
  background: var(--bg-white);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fritekst-bilde-thumbnail:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
  transform: translateY(-2px);
}

.fritekst-bilde-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Thumbnail Remove Button */
.fritekst-bilde-thumbnail-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.95);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.8);
  padding: 0;
}

.fritekst-bilde-thumbnail:hover .fritekst-bilde-thumbnail-remove {
  opacity: 1;
  transform: scale(1);
}

.fritekst-bilde-thumbnail-remove:hover {
  background: #dc3545;
  transform: scale(1.1);
}

.fritekst-bilde-thumbnail-remove .material-icons {
  font-size: 16px;
}

/* Image size indicator */
.fritekst-bilde-thumbnail-size {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  font-size: 10px;
  padding: 4px 6px;
  text-align: center;
}

/* Drop Overlay */
.fritekst-bilde-drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(102, 126, 234, 0.95);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.fritekst-bilde-drop-overlay.fritekst-hidden {
  opacity: 0;
  pointer-events: none;
}

.fritekst-bilde-drop-content {
  text-align: center;
  color: white;
}

.fritekst-bilde-drop-content .material-icons {
  font-size: 48px;
  margin-bottom: 8px;
  animation: fritekst-bilde-bounce 1s ease-in-out infinite;
}

.fritekst-bilde-drop-content p {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.fritekst-bilde-drop-content small {
  font-size: 13px;
  opacity: 0.9;
}

/* Bounce animation */
@keyframes fritekst-bilde-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Loading State */
.fritekst-bilde-thumbnail.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
}

.fritekst-bilde-thumbnail.loading::after {
  content: '';
  width: 30px;
  height: 30px;
  border: 3px solid #e0e0e0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: fritekst-bilde-spin 0.8s linear infinite;
}

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

/* Error State */
.fritekst-bilde-thumbnail.error {
  border-color: #dc3545;
  background: #f8d7da;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 8px;
}

.fritekst-bilde-thumbnail.error .material-icons {
  font-size: 32px;
  color: #dc3545;
  margin-bottom: 4px;
}

.fritekst-bilde-thumbnail.error .fritekst-bilde-error-text {
  font-size: 10px;
  color: #721c24;
  text-align: center;
  line-height: 1.2;
}

/* Responsive */
@media (max-width: 768px) {
  .fritekst-bilde-upload-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .fritekst-bilde-info-notice {
    min-width: auto;
  }
  
  .fritekst-bilde-thumbnail {
    width: 80px;
    height: 80px;
  }
}

/* Drag Active State */
.fritekst-bilde-upload-section.drag-active {
  border-color: #2563eb;
  background: rgba(102, 126, 234, 0.05);
}

.fritekst-bilde-upload-section.drag-active .fritekst-bilde-drop-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================
   FRITEKST KAMERA STYLING
   ============================================ */

/* Kamera-knapp i upload-header */
.fritekst-bilde-camera-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--bg-white);
  color: #1976d2;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1.5px solid #1976d2;
}

.fritekst-bilde-camera-button:hover {
  background: #e3f2fd;
  border-color: #0d47a1;
  color: #0d47a1;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.12);
}

.fritekst-bilde-camera-button:active {
  transform: translateY(0);
}

.fritekst-bilde-camera-button .material-icons {
  font-size: 18px;
}

/* Kamera Modal */
.fritekst-camera-modal {
  z-index: 10001;
}

.fritekst-camera-modal-content {
  max-width: 600px;
  width: 95%;
  padding: 20px;
  background: #1a1a2e;
  border-radius: 16px;
  position: relative;
}

.fritekst-camera-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  margin: 0 0 16px 0;
  font-size: 1.3rem;
}

.fritekst-camera-title .material-icons {
  color: #10b981;
}

.fritekst-camera-preview-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.fritekst-camera-preview-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Countdown overlay */
.fritekst-camera-countdown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.fritekst-camera-countdown-number {
  font-size: 120px;
  font-weight: bold;
  color: white;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  animation: fritekst-camera-pulse 1s ease-in-out infinite;
}

.fritekst-camera-countdown-number.fritekst-camera-countdown-warning {
  color: #ef4444;
  animation: fritekst-camera-pulse-warning 0.5s ease-in-out infinite;
}

@keyframes fritekst-camera-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

@keyframes fritekst-camera-pulse-warning {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Flash effect */
.fritekst-camera-flash-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-white);
  z-index: 20;
  animation: fritekst-camera-flash 0.15s ease-out;
}

@keyframes fritekst-camera-flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Kamera-knapper */
.fritekst-camera-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.fritekst-camera-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fritekst-camera-btn .material-icons {
  font-size: 20px;
}

.fritekst-camera-btn-now {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.fritekst-camera-btn-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.fritekst-camera-btn-timer {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.fritekst-camera-btn-timer:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.fritekst-camera-cancel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fritekst-camera-cancel-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.fritekst-camera-modal .close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.fritekst-camera-modal .close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* View-only styling for prompt library */
.fritekst-prompt-view-only {
  padding: 20px;
}

.fritekst-view-header {
  margin-bottom: 20px;
}

.fritekst-view-title {
  font-size: 1.4rem;
  margin: 0 0 12px 0;
  color: var(--text-primary);
}

.fritekst-view-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.fritekst-view-section {
  margin-bottom: 20px;
}

.fritekst-view-section label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #444;
}

.fritekst-view-content {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  font-family: monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

.fritekst-view-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

@media (max-width: 480px) {
  .fritekst-camera-modal-content { padding: 16px; }
  .fritekst-camera-countdown-number { font-size: 80px; }
  .fritekst-camera-btn { padding: 10px 16px; font-size: 13px; }
  .fritekst-camera-buttons { gap: 8px; }
}
/* ===== aap-legeerklaring.css ===== */
/* ==========================================================================
   AAP LEGEERKLÆRING VED ARBEIDSUFØRHET — SKJEMA-VIEW
   Prefiks: aap-
   NAV-lignende design med mørkeblå seksjonsheadere
   CSP-kompatibel: ingen inline styles i JS
   
   VIKTIG: Alle selektorer har høy spesifisitet via
   .fritekst-modal-container for å unngå at fritekst.css overkjører.
   ========================================================================== */

/* ===================== CONTAINER ===================== */

.fritekst-modal-container .aap-form-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #e8eef5;
    border-radius: 8px;
}

/* ===================== HEADER MED TILBAKE-KNAPP ===================== */

.fritekst-modal-container .aap-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #0b2e5e;
    color: #ffffff;
    flex-shrink: 0;
    border-radius: 8px 8px 0 0;
    min-height: 48px;
    box-sizing: border-box;
}

.fritekst-modal-container .aap-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1.4;
}

.fritekst-modal-container .aap-back-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.fritekst-modal-container .aap-back-btn .material-icons {
    font-size: 18px;
}

.fritekst-modal-container .aap-form-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    background: none;
}

.fritekst-modal-container .aap-form-title .material-icons {
    font-size: 20px;
    opacity: 0.9;
}

/* ===================== SCROLLBART SKJEMA ===================== */

.fritekst-modal-container .aap-form-scroll {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

/* Scrollbar-styling */
.fritekst-modal-container .aap-form-scroll::-webkit-scrollbar {
    width: 6px;
}
.fritekst-modal-container .aap-form-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.fritekst-modal-container .aap-form-scroll::-webkit-scrollbar-thumb {
    background: #b0bec5;
    border-radius: 3px;
}
.fritekst-modal-container .aap-form-scroll::-webkit-scrollbar-thumb:hover {
    background: #90a4ae;
}

/* ===================== SEKSJONER ===================== */

.fritekst-modal-container .aap-section {
    background: var(--bg-white);
    border: 1px solid #c5d3e0;
    border-radius: 8px;
    overflow: visible;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* NAV-lignende mørkeblå seksjonheader */
.fritekst-modal-container .aap-section-header {
    background: #194d80;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 10px 16px;
    text-transform: none;
    letter-spacing: 0.02em;
    border-radius: 7px 7px 0 0;
    line-height: 1.4;
}

.fritekst-modal-container .aap-section-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ===================== FELT-WRAPPER ===================== */

.fritekst-modal-container .aap-field {
    position: relative;
}

.fritekst-modal-container .aap-field-insufficient .aap-textarea {
    border-color: #ffc107;
    background: #fffde7;
}

.fritekst-modal-container .aap-field-insufficient .aap-textarea-label::after {
    content: ' \26A0  Utilstrekkelig info';
    font-size: 0.7rem;
    color: #f57f17;
    font-weight: 500;
}

/* ===================== CHECKBOX-FELT ===================== */

.fritekst-modal-container .aap-field-checkbox {
    padding: 2px 0;
}

.fritekst-modal-container .aap-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.87rem;
    color: var(--text-primary);
    padding: 5px 0;
    user-select: none;
    line-height: 1.4;
}

.fritekst-modal-container .aap-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #1976d2;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.fritekst-modal-container .aap-checkbox:disabled {
    opacity: 0.6;
    cursor: default;
}

.fritekst-modal-container .aap-checkbox-text {
    line-height: 1.4;
}

/* ===================== JA/NEI-FELT ===================== */

.fritekst-modal-container .aap-yesno-label {
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}

.fritekst-modal-container .aap-yesno-group {
    display: flex;
    gap: 6px;
}

.fritekst-modal-container .aap-yesno-btn {
    padding: 5px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1.5px solid #c5d3e0;
    background: var(--bg-light);
    color: #546e7a;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    min-width: 52px;
    text-align: center;
    line-height: 1.4;
}

.fritekst-modal-container .aap-yesno-btn:hover {
    background: #e3f2fd;
    border-color: #90caf9;
}

.fritekst-modal-container .aap-yesno-btn.aap-yesno-active {
    background: #1976d2;
    color: #ffffff;
    border-color: #1565c0;
}

/* ===================== TEXTAREA-FELT ===================== */

.fritekst-modal-container .aap-textarea-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #37474f;
    margin-bottom: 6px;
    line-height: 1.4;
}

.fritekst-modal-container .aap-field-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.fritekst-modal-container .aap-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: #f0f4f8;
    border: 1px solid #d0dae4;
    border-radius: 14px;
    color: #546e7a;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.4;
}

.fritekst-modal-container .aap-copy-btn .material-icons {
    font-size: 14px;
}

.fritekst-modal-container .aap-copy-btn:hover {
    background: #e3f2fd;
    border-color: #90caf9;
    color: #1976d2;
}

.fritekst-modal-container .aap-copy-btn.aap-copied {
    background: #e8f5e9;
    border-color: #a5d6a7;
    color: #2e7d32;
}

/* Voice edit-knapp i aap-toolbar matcher pill-design */
.fritekst-modal-container .aap-field-toolbar .fritekst-voiceedit-btn {
    margin: 0;
    padding: 4px 12px;
    background: #f0fdf4;
    background-image: none;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    color: #166534;
    font-size: 12px;
    font-weight: 500;
    gap: 4px;
    transition: all 0.15s ease;
    box-shadow: none;
    transform: none;
}

.fritekst-modal-container .aap-field-toolbar .fritekst-voiceedit-btn .material-icons {
    font-size: 14px;
    color: #22c55e;
}

.fritekst-modal-container .aap-field-toolbar .fritekst-voiceedit-btn:hover:not(:disabled) {
    background: #dcfce7;
    background-image: none;
    border-color: #86efac;
}

/* Recording state i aap-toolbar */
.fritekst-modal-container .aap-field-toolbar .fritekst-voiceedit-btn.fritekst-voiceedit-recording {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border-color: #dc2626;
    animation: fritekst-voiceedit-pulse 1.5s ease-in-out infinite;
}

/* Processing state i aap-toolbar */
.fritekst-modal-container .aap-field-toolbar .fritekst-voiceedit-btn.fritekst-voiceedit-processing {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-color: #f59e0b;
    pointer-events: none;
}

/* TEXTAREA — eksplisitt reset av alle fritekst-stiler som kan overkjøre */
.fritekst-modal-container .aap-textarea {
    display: block;
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    border: 1px solid #c5d3e0;
    border-radius: 6px;
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    font-size: 0.87rem;
    line-height: 1.6;
    color: var(--text-primary);
    background: #fafcfe;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    overflow: hidden;
    /* Reset: nullstill fritekst-chat-message og ai-response-editable overrides */
    max-width: 100%;
    align-self: stretch;
    box-shadow: none;
    animation: none;
    margin: 0;
    float: none;
}

.fritekst-modal-container .aap-textarea:focus {
    outline: none;
    border-color: #1976d2;
    background: var(--bg-white);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
}

.fritekst-modal-container .aap-textarea::placeholder {
    color: #b0bec5;
}

/* ===================== LOADING ===================== */

.fritekst-modal-container .aap-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    padding: 40px;
}

.fritekst-modal-container .aap-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #1976d2;
    border-radius: 50%;
    animation: aap-spin 0.8s linear infinite;
}

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

.fritekst-modal-container .aap-loading-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.fritekst-modal-container .aap-loading-subtext {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

/* ===================== SKJEMA-KNAPP I MODE-GROUP ===================== */

.fritekst-modal-container .aap-skjema-btn {
    position: relative;
}

.fritekst-modal-container .aap-skjema-btn .material-icons {
    font-size: 18px;
}

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

@media (max-width: 768px) {
    .fritekst-modal-container .aap-form-header {
        padding: 10px 12px;
        gap: 10px;
    }

    .fritekst-modal-container .aap-back-btn span:not(.material-icons) {
        display: none;
    }

    .fritekst-modal-container .aap-form-title {
        font-size: 0.9rem;
    }

    .fritekst-modal-container .aap-section-header {
        font-size: 0.75rem;
        padding: 8px 12px;
    }

    .fritekst-modal-container .aap-section-body {
        padding: 12px;
    }

    .fritekst-modal-container .aap-textarea {
        font-size: 0.84rem;
    }

    .fritekst-modal-container .aap-form-scroll {
        padding: 10px;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .fritekst-modal-container .aap-form-header {
        flex-wrap: wrap;
    }

    .fritekst-modal-container .aap-yesno-btn {
        padding: 4px 12px;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   KI-HJELP PER FELT — mini-panel for re-generering av enkeltfelt
   ========================================================================== */

/* ── KI-hjelp knapp i toolbar ── */

.fritekst-modal-container .aap-ki-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: linear-gradient(135deg, #e0f2fe 0%, #e0f2fe 100%);
    border: 1px solid #7dd3fc;
    border-radius: 14px;
    color: #0369a1;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.fritekst-modal-container .aap-ki-help-btn .material-icons {
    font-size: 14px;
}

.fritekst-modal-container .aap-ki-help-btn:hover {
    background: linear-gradient(135deg, #bae6fd 0%, #bae6fd 100%);
    border-color: #38bdf8;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(3, 105, 161, 0.15);
}

.fritekst-modal-container .aap-ki-help-btn.aap-ki-help-active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border-color: #0369a1;
    box-shadow: 0 2px 8px rgba(3, 105, 161, 0.25);
}

.fritekst-modal-container .aap-ki-help-btn.aap-ki-help-active .material-icons {
    color: #ffffff;
}

/* ── KI-hjelp panel (kollapset default) ── */

.fritekst-modal-container .aap-ki-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                margin 0.35s ease;
    margin-top: 0;
}

.fritekst-modal-container .aap-ki-panel.aap-ki-panel-open {
    max-height: 600px;
    opacity: 1;
    margin-top: 10px;
}

.fritekst-modal-container .aap-ki-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border-radius: 10px 10px 0 0;
    color: #ffffff;
}

.fritekst-modal-container .aap-ki-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
}

.fritekst-modal-container .aap-ki-panel-title .material-icons {
    font-size: 18px;
    opacity: 0.9;
}

.fritekst-modal-container .aap-ki-panel-close {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    color: #ffffff;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.fritekst-modal-container .aap-ki-panel-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.fritekst-modal-container .aap-ki-panel-close .material-icons {
    font-size: 16px;
}

/* ── Panel body ── */

.fritekst-modal-container .aap-ki-panel-body {
    padding: 14px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-top: none;
    border-radius: 0 0 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Input-rad ── */

.fritekst-modal-container .aap-ki-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fritekst-modal-container .aap-ki-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid #7dd3fc;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.87rem;
    color: #0c4a6e;
    background: var(--bg-white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-sizing: border-box;
    line-height: 1.4;
}

.fritekst-modal-container .aap-ki-input:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.fritekst-modal-container .aap-ki-input::placeholder {
    color: #38bdf8;
    font-size: 0.82rem;
}

.fritekst-modal-container .aap-ki-input:disabled {
    opacity: 0.6;
    background: #f0f9ff;
}

.fritekst-modal-container .aap-ki-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.fritekst-modal-container .aap-ki-send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.fritekst-modal-container .aap-ki-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fritekst-modal-container .aap-ki-send-btn .material-icons {
    font-size: 18px;
}

/* ── Loading ── */

.fritekst-modal-container .aap-ki-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #e0f2fe;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #0369a1;
    font-weight: 500;
}

.fritekst-modal-container .aap-ki-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid #bae6fd;
    border-top-color: #0284c7;
    border-radius: 50%;
    animation: aap-spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* ── Forslag ── */

.fritekst-modal-container .aap-ki-suggestion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: aap-ki-suggest-in 0.3s ease-out;
}

@keyframes aap-ki-suggest-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fritekst-modal-container .aap-ki-suggestion-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0284c7;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fritekst-modal-container .aap-ki-suggestion-label .material-icons {
    font-size: 16px;
}

.fritekst-modal-container .aap-ki-suggestion-text {
    padding: 14px 16px;
    background: var(--bg-white);
    border: 1.5px solid #7dd3fc;
    border-radius: 8px;
    font-size: 0.87rem;
    line-height: 1.65;
    color: #0c4a6e;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.06);
}

.fritekst-modal-container .aap-ki-suggestion-actions {
    display: flex;
    gap: 8px;
}

.fritekst-modal-container .aap-ki-accept-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fritekst-modal-container .aap-ki-accept-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.fritekst-modal-container .aap-ki-accept-btn .material-icons {
    font-size: 18px;
}

.fritekst-modal-container .aap-ki-reject-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #f0f9ff;
    color: var(--text-muted);
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fritekst-modal-container .aap-ki-reject-btn:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

.fritekst-modal-container .aap-ki-reject-btn .material-icons {
    font-size: 18px;
}

/* ── Hidden utility ── */

.fritekst-modal-container .aap-ki-hidden {
    display: none !important;
}

/* ── Responsive KI-hjelp ── */

@media (max-width: 768px) {
    .fritekst-modal-container .aap-ki-panel-body {
        padding: 10px;
    }

    .fritekst-modal-container .aap-ki-input {
        font-size: 0.84rem;
        padding: 8px 12px;
    }

    .fritekst-modal-container .aap-ki-suggestion-text {
        font-size: 0.84rem;
        padding: 10px 12px;
    }

    .fritekst-modal-container .aap-ki-suggestion-actions {
        flex-direction: column;
    }
}
/* ===== aap-drafts.css ===== */
/* ============================================
   AAP UTKAST — Lagrede legeerklæringer
   Prefiks: aap-draft-
   Nestede under .fritekst-modal-container for scope
   CSP: Ingen inline styles — alt via klasser
   ============================================ */

/* Badge på AAP-knappen (antall utkast) */
.fritekst-modal-container .aap-draft-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    pointer-events: none;
}

/* Utkast-liste container */
.fritekst-modal-container .aap-draft-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Header med tittel og "Generer ny"-knapp */
.fritekst-modal-container .aap-draft-list-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #0b2e5e;
    color: #fff;
    flex-shrink: 0;
    border-radius: 8px 8px 0 0;
    min-height: 48px;
    box-sizing: border-box;
}

.fritekst-modal-container .aap-draft-list-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
}

.fritekst-modal-container .aap-draft-list-title .material-icons {
    font-size: 20px;
    opacity: 0.85;
}

.fritekst-modal-container .aap-draft-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.fritekst-modal-container .aap-draft-new-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.fritekst-modal-container .aap-draft-new-btn .material-icons {
    font-size: 16px;
}

/* Scrollbar for utkast-listen */
.fritekst-modal-container .aap-draft-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f7f8fa;
}

.fritekst-modal-container .aap-draft-list-scroll::-webkit-scrollbar {
    width: 6px;
}

.fritekst-modal-container .aap-draft-list-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.fritekst-modal-container .aap-draft-list-scroll::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 3px;
}

/* Individuelt utkast-kort */
.fritekst-modal-container .aap-draft-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-white);
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.fritekst-modal-container .aap-draft-card:hover {
    border-color: #1976d2;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
}

/* Ikon til venstre */
.fritekst-modal-container .aap-draft-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #e8eef6;
    color: #194d80;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fritekst-modal-container .aap-draft-card-icon .material-icons {
    font-size: 20px;
}

/* Tekstinnhold */
.fritekst-modal-container .aap-draft-card-body {
    flex: 1;
    min-width: 0;
}

.fritekst-modal-container .aap-draft-card-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fritekst-modal-container .aap-draft-card-meta {
    font-size: 0.76rem;
    color: #8893a4;
    margin-top: 2px;
    display: flex;
    gap: 10px;
}

/* Slett-knapp */
.fritekst-modal-container .aap-draft-card-delete {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #a0a8b4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.fritekst-modal-container .aap-draft-card-delete:hover {
    background: #fef2f2;
    color: #dc2626;
}

.fritekst-modal-container .aap-draft-card-delete .material-icons {
    font-size: 16px;
}

/* Tom-tilstand */
.fritekst-modal-container .aap-draft-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: #8893a4;
    text-align: center;
}

.fritekst-modal-container .aap-draft-empty .material-icons {
    font-size: 36px;
    opacity: 0.5;
}

.fritekst-modal-container .aap-draft-empty-text {
    font-size: 0.88rem;
}

.fritekst-modal-container .aap-draft-empty-sub {
    font-size: 0.78rem;
    opacity: 0.7;
}

/* Autosave-indikator i skjema-header */
.fritekst-modal-container .aap-autosave {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin-left: auto;
    white-space: nowrap;
}

.fritekst-modal-container .aap-autosave .material-icons {
    font-size: 13px;
}

.fritekst-modal-container .aap-autosave-saved {
    color: rgba(255, 255, 255, 0.85);
}

/* Tilbake-til-utkast knapp (i skjema-header, ved siden av tilbake-til-chat) */
.fritekst-modal-container .aap-drafts-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}

.fritekst-modal-container .aap-drafts-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.fritekst-modal-container .aap-drafts-btn .material-icons {
    font-size: 14px;
}

/* Responsiv — tablet */
@media (max-width: 900px) {
    .fritekst-modal-container .aap-draft-list-header {
        padding: 10px 12px;
        gap: 10px;
    }

    .fritekst-modal-container .aap-draft-new-btn span:not(.material-icons) {
        display: none;
    }

    .fritekst-modal-container .aap-draft-list-scroll {
        padding: 12px;
    }
}

/* Responsiv — mobil */
@media (max-width: 600px) {
    .fritekst-modal-container .aap-draft-card {
        padding: 10px;
        gap: 8px;
    }

    .fritekst-modal-container .aap-draft-card-icon {
        width: 30px;
        height: 30px;
    }

    .fritekst-modal-container .aap-draft-card-icon .material-icons {
        font-size: 16px;
    }

    .fritekst-modal-container .aap-draft-card-meta {
        flex-direction: column;
        gap: 2px;
    }
}

/* ===== confirm-dialog.css ===== */
/* ============================================
   CUSTOM CONFIRM DIALOG
   Erstatter native confirm/alert/prompt
   Prefiks: cd-
   ============================================ */

/* Overlay */
.cd-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 20px;
}

.cd-overlay.cd-hidden {
    display: none;
}

.cd-overlay.cd-visible {
    opacity: 1;
}

.cd-overlay.cd-hiding {
    opacity: 0;
}

/* Dialog box */
.cd-dialog {
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    max-width: 420px;
    width: 100%;
    padding: 28px;
    text-align: center;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cd-visible .cd-dialog {
    transform: scale(1) translateY(0);
}

.cd-hiding .cd-dialog {
    transform: scale(0.95) translateY(10px);
}

/* Icon area */
.cd-icon-area {
    margin-bottom: 16px;
}

.cd-icon {
    font-size: 44px;
    width: 68px;
    height: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
}

/* Type-baserte farger */
.cd-type-info .cd-icon {
    background: #e0f2fe;
    color: #0284c7;
}

.cd-type-warning .cd-icon {
    background: #fef3c7;
    color: #d97706;
}

.cd-type-danger .cd-icon {
    background: #fee2e2;
    color: #dc2626;
}

/* Title */
.cd-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    line-height: 1.3;
}

/* Message */
.cd-message {
    font-size: 0.925rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 24px 0;
    text-align: left;
    word-break: break-word;
}

/* Sentrert melding når kort */
.cd-message br ~ br {
    display: block;
    margin-top: 4px;
    content: '';
}

.cd-bullet {
    color: var(--text-muted);
    margin-right: 4px;
}

/* Input area */
.cd-input-area {
    margin-bottom: 24px;
}

.cd-input-area.cd-hidden {
    display: none;
}

.cd-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-light);
    transition: all 0.2s ease;
    box-sizing: border-box;
    text-align: center;
    font-weight: 600;
    letter-spacing: 2px;
}

.cd-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: var(--bg-white);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.cd-type-danger .cd-input:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Buttons */
.cd-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.cd-btn {
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    min-width: 100px;
    line-height: 1.4;
}

.cd-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Cancel button */
.cd-btn-cancel {
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid #e2e8f0;
}

.cd-btn-cancel:hover {
    background: #e2e8f0;
    color: #334155;
}

/* Confirm button - info */
.cd-btn-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
}

.cd-btn-info:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}

.cd-btn-info:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Confirm button - warning */
.cd-btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
}

.cd-btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
    transform: translateY(-1px);
}

.cd-btn-warning:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Confirm button - danger */
.cd-btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
}

.cd-btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
    transform: translateY(-1px);
}

.cd-btn-danger:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Responsive */
@media (max-width: 480px) {
    .cd-dialog {
        padding: 24px 20px;
        border-radius: 14px;
    }
    
    .cd-icon {
        font-size: 36px;
        width: 56px;
        height: 56px;
    }
    
    .cd-title {
        font-size: 1.05rem;
    }
    
    .cd-buttons {
        flex-direction: column-reverse;
    }
    
    .cd-btn {
        width: 100%;
    }
}
/* ===== interpreter.css ===== */
/* ============================================================================
   INTERPRETER — FULLSCREEN DUAL-PANEL (v2)
   Speaker-markering, mobil-optimert, portrait + landscape
   ============================================================================ */

/* --- Language Selector --- */
.interpreter-lang-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.interpreter-lang-modal {
    background: #fff; border-radius: 16px;
    width: min(600px, 92vw); max-height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3); overflow: hidden;
}
.interpreter-lang-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 12px;
}
.interpreter-lang-header h2 { margin: 0; font-size: 1.4rem; font-weight: 700; color: #1a1a2e; }
.interpreter-lang-close {
    background: none; border: none; cursor: pointer;
    padding: 6px; border-radius: 8px; color: #6b7280;
}
.interpreter-lang-close:hover { background: #f3f4f6; }
.interpreter-lang-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px; padding: 0 24px 24px; overflow-y: auto; max-height: 55vh;
}
.interpreter-lang-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 10px;
    background: #fff; cursor: pointer; transition: all 0.15s; text-align: left; font-family: inherit;
}
.interpreter-lang-btn:hover { background: #eff6ff; border-color: #3b82f6; transform: translateY(-1px); }
.interpreter-lang-flag { font-size: 1.5rem; }
.interpreter-lang-name { font-size: 0.95rem; font-weight: 500; color: #1a1a2e; }


/* ============================================================================
   FULLSCREEN OVERLAY
   ============================================================================ */
.interpreter-overlay {
    position: fixed; inset: 0; z-index: 10001;
    background: #0f1724; display: flex; flex-direction: column;
    color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* ============================================================================
   TOOLBAR
   ============================================================================ */
.interpreter-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0; gap: 8px;
}
.interpreter-toolbar-left {
    display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 1;
}
.interpreter-toolbar-right {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.interpreter-toolbar-center {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

.interpreter-status-dot {
    width: 10px; height: 10px; border-radius: 50%; background: #6b7280; flex-shrink: 0;
}
.interpreter-status-recording { background: #ef4444; animation: i-pulse 1.2s ease-in-out infinite; }
.interpreter-status-processing { background: #f59e0b; animation: i-pulse 0.6s ease-in-out infinite; }
@keyframes i-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}
.interpreter-status-text { font-size: 0.85rem; color: #9ca3af; white-space: nowrap; }

/* Buttons */
.interpreter-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 20px; border: 2px solid rgba(255,255,255,0.2); border-radius: 50px;
    background: rgba(255,255,255,0.08); color: #fff;
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s; white-space: nowrap; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.interpreter-btn:hover:not(:disabled) { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.interpreter-btn:active:not(:disabled) { transform: scale(0.96); }
.interpreter-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.interpreter-btn .material-icons { font-size: 20px; }

.interpreter-btn-start { border-color: #22c55e; background: rgba(34,197,94,0.15); }
.interpreter-btn-start:hover:not(:disabled) { background: rgba(34,197,94,0.3); border-color: #4ade80; }
.interpreter-btn-pause { border-color: #f59e0b; background: rgba(245,158,11,0.15); }
.interpreter-btn-pause:hover:not(:disabled) { background: rgba(245,158,11,0.3); border-color: #fbbf24; }
.interpreter-btn-stop { border-color: #ef4444; background: rgba(239,68,68,0.15); }
.interpreter-btn-stop:hover:not(:disabled) { background: rgba(239,68,68,0.3); border-color: #f87171; }

.interpreter-close-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
    background: rgba(255,255,255,0.06); color: #9ca3af; font-size: 0.85rem;
    cursor: pointer; transition: all 0.15s; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.interpreter-close-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.interpreter-close-btn .material-icons { font-size: 18px; }


/* ============================================================================
   PANELS
   ============================================================================ */
.interpreter-panels { flex: 1; display: flex; overflow: hidden; min-height: 0; }
.interpreter-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.interpreter-panel-left { background: #111b2e; }
.interpreter-panel-right { background: #0f1724; }
.interpreter-divider { width: 2px; background: rgba(255,255,255,0.08); flex-shrink: 0; }

.interpreter-panel-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 24px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.interpreter-panel-flag { font-size: 1.4rem; }
.interpreter-panel-title {
    font-size: 1rem; font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase; letter-spacing: 0.05em;
}

.interpreter-panel-content {
    flex: 1; overflow-y: auto;
    padding: 20px 24px;
    display: flex; flex-direction: column; gap: 4px;
    scroll-behavior: smooth;
}
.interpreter-panel-content::-webkit-scrollbar { width: 6px; }
.interpreter-panel-content::-webkit-scrollbar-track { background: transparent; }
.interpreter-panel-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.interpreter-placeholder {
    color: rgba(255,255,255,0.25); font-size: 1.3rem;
    text-align: center; margin: auto; font-weight: 300; line-height: 1.8;
}


/* ============================================================================
   LINES — med speaker-ikon + etikett
   ============================================================================ */
.interpreter-line {
    display: flex; gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    align-items: flex-start;
}

/* Speaker-ikon badge */
.interpreter-line-icon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: 6px;
}
.interpreter-line-icon .material-icons { font-size: 16px; }

/* Lege: blå */
.interpreter-line-doctor .interpreter-line-icon {
    background: rgba(59, 130, 246, 0.2); color: #60a5fa;
}
/* Pasient: grønn */
.interpreter-line-patient .interpreter-line-icon {
    background: rgba(34, 197, 94, 0.2); color: #4ade80;
}

/* Tekst-wrapper */
.interpreter-line-body {
    flex: 1; min-width: 0;
}

/* Etikett over tekst */
.interpreter-line-label {
    font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 2px; display: block;
}
.interpreter-line-doctor .interpreter-line-label { color: #60a5fa; }
.interpreter-line-patient .interpreter-line-label { color: #4ade80; }

/* Tekst */
.interpreter-line-text {
    font-size: 1.8rem; line-height: 1.5;
    color: rgba(255,255,255,0.9);
}
.interpreter-line-doctor .interpreter-line-text { color: rgba(255,255,255,0.95); }
.interpreter-line-patient .interpreter-line-text { color: rgba(255,255,255,0.82); }

/* Nyeste */
.interpreter-line-new .interpreter-line-text {
    color: #fff; animation: i-fadein 0.5s ease-out;
}

/* Partial (live) */
.interpreter-line-partial .interpreter-line-text {
    color: rgba(255,255,255,0.35); font-style: italic;
}
.interpreter-line-partial { border-bottom: none; }

/* Venter */
.interpreter-line-translating .interpreter-line-text {
    color: rgba(255,255,255,0.3); animation: i-pulse-text 1.2s ease-in-out infinite;
}

@keyframes i-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes i-pulse-text {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.55; }
}

/* RTL */
.interpreter-rtl .interpreter-panel-content { direction: rtl; text-align: right; }
.interpreter-rtl .interpreter-line { flex-direction: row-reverse; }


/* ============================================================================
   FONT SIZE (CSP-safe klasser)
   ============================================================================ */
.interpreter-font-controls {
    display: flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; padding: 2px;
}
.interpreter-font-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: none; border-radius: 6px;
    background: transparent; color: rgba(255,255,255,0.7);
    cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent;
}
.interpreter-font-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.interpreter-font-btn:active { transform: scale(0.92); }
.interpreter-font-btn .material-icons { font-size: 20px; }
.interpreter-font-size-label {
    font-size: 0.75rem; color: rgba(255,255,255,0.5);
    min-width: 36px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums;
}

.interpreter-font-70  .interpreter-line-text { font-size: 1.26rem; }
.interpreter-font-85  .interpreter-line-text { font-size: 1.53rem; }
.interpreter-font-100 .interpreter-line-text { font-size: 1.8rem; }
.interpreter-font-120 .interpreter-line-text { font-size: 2.16rem; }
.interpreter-font-150 .interpreter-line-text { font-size: 2.7rem; }
.interpreter-font-180 .interpreter-line-text { font-size: 3.24rem; }
.interpreter-font-220 .interpreter-line-text { font-size: 3.96rem; }
.interpreter-font-280 .interpreter-line-text { font-size: 5.04rem; }


/* ============================================================================
   RESPONSIVE — TABLET
   ============================================================================ */
@media (max-width: 900px) {
    .interpreter-panels { flex-direction: column; }
    .interpreter-divider { width: 100%; height: 2px; }
    .interpreter-line-text { font-size: 1.3rem; }
    .interpreter-panel-content { padding: 14px 16px; }
    .interpreter-toolbar { padding: 8px 12px; }
    .interpreter-btn { padding: 8px 16px; font-size: 0.85rem; }
    .interpreter-btn .material-icons { font-size: 18px; }
    .interpreter-line-icon { width: 26px; height: 26px; margin-top: 2px; }
    .interpreter-line-icon .material-icons { font-size: 14px; }
    .interpreter-line { gap: 10px; }
}


/* ============================================================================
   RESPONSIVE — MOBIL
   ============================================================================ */
@media (max-width: 600px) {
    .interpreter-toolbar { padding: 6px 10px; gap: 4px; flex-wrap: nowrap; }
    .interpreter-toolbar-left .interpreter-status-text { display: none; }

    /* Icon-only knapper */
    .interpreter-btn span:not(.material-icons) { display: none; }
    .interpreter-btn { padding: 10px 12px; min-width: 44px; min-height: 44px; justify-content: center; }
    .interpreter-close-btn span:not(.material-icons) { display: none; }
    .interpreter-close-btn { padding: 8px; min-width: 40px; min-height: 40px; justify-content: center; }

    .interpreter-font-size-label { display: none; }
    .interpreter-font-controls { gap: 2px; }
    .interpreter-font-btn { width: 40px; height: 40px; }

    .interpreter-panel-header { padding: 8px 14px; }
    .interpreter-panel-flag { font-size: 1.1rem; }
    .interpreter-panel-title { font-size: 0.8rem; }
    .interpreter-panel-content { padding: 10px 12px; gap: 2px; }

    .interpreter-line-text { font-size: 1.1rem; line-height: 1.4; }
    .interpreter-line { gap: 8px; padding: 6px 0; }
    .interpreter-line-icon { width: 24px; height: 24px; margin-top: 1px; }
    .interpreter-line-icon .material-icons { font-size: 13px; }
    .interpreter-line-label { font-size: 0.55rem; }
}

@media (max-width: 380px) {
    .interpreter-line-text { font-size: 1rem; }
    .interpreter-line-icon { width: 20px; height: 20px; }
    .interpreter-line-icon .material-icons { font-size: 12px; }
    .interpreter-line-label { display: none; }
}


/* ============================================================================
   LANDSCAPE MOBIL — side-by-side
   ============================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .interpreter-panels { flex-direction: row !important; }
    .interpreter-divider { width: 2px !important; height: auto !important; }

    .interpreter-toolbar { padding: 4px 10px; }
    .interpreter-btn { padding: 6px 10px; min-height: 36px; }
    .interpreter-btn .material-icons { font-size: 18px; }
    .interpreter-close-btn { padding: 6px 8px; }
    .interpreter-font-btn { width: 32px; height: 32px; }

    .interpreter-panel-header { padding: 4px 12px; }
    .interpreter-panel-flag { font-size: 1rem; }
    .interpreter-panel-title { font-size: 0.7rem; }
    .interpreter-panel-content { padding: 6px 10px; gap: 2px; }

    .interpreter-line-text { font-size: 1rem; line-height: 1.3; }
    .interpreter-line { gap: 6px; padding: 3px 0; }
    .interpreter-line-icon { width: 18px; height: 18px; margin-top: 1px; }
    .interpreter-line-icon .material-icons { font-size: 11px; }
    .interpreter-line-label { display: none; }
}


/* ============================================================================
   SAFE AREA (iPhone notch/dynamic island)
   ============================================================================ */
@supports (padding: env(safe-area-inset-top)) {
    .interpreter-overlay {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

@media print {
    .interpreter-overlay, .interpreter-lang-overlay { display: none !important; }
}
/* ===== camera-ocr.css ===== */
/* camera-ocr.css */
/* Styling for kamera og OCR-funksjonalitet */
/* Alle klasser har kamera- prefix */

/* =============================================================================
   OCR MODAL - FULLSKJERM LAYOUT
   ============================================================================= */

#ocrCameraModal .modal-content {
    width: 95vw;
    max-width: 1400px;
    height: 90vh;
    max-height: 900px;
    display: flex;
    flex-direction: column;
}

#ocrCameraModal .modal-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* =============================================================================
   CAMERA VIEW
   ============================================================================= */

.kamera-camera-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    padding: 20px;
    min-height: 400px;
}

.kamera-video-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background: #000;
}

.kamera-video {
    width: 100%;
    height: auto;
    min-height: 300px;
    max-height: 60vh;
    display: block;
    background: #000;
    object-fit: contain;
}

.kamera-capture-btn {
    margin-top: 20px;
    padding: 16px 48px;
    font-size: 18px;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.kamera-capture-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5);
}

.kamera-capture-btn .material-icons {
    font-size: 28px;
}

/* =============================================================================
   EDIT VIEW - BILDE MED REKTANGEL-VERKTØY
   ============================================================================= */

.kamera-edit-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    overflow: hidden;
}

.kamera-edit-main {
    flex: 1;
    display: flex;
    gap: 20px;
    padding: 20px;
    overflow: hidden;
}

.kamera-canvas-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kamera-canvas-container {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
}

.kamera-canvas-wrapper {
    position: relative;
    max-width: 100%;
    max-height: 100%;
}

.kamera-image-canvas,
.kamera-overlay-canvas {
    max-width: 100%;
    max-height: 55vh;
    display: block;
}

.kamera-overlay-canvas {
    position: absolute;
    top: 0;
    left: 0;
    cursor: crosshair;
}

/* Preview section */
.kamera-preview-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 250px;
    max-width: 400px;
}

.kamera-preview-container {
    flex: 1;
    background: #222;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.kamera-preview-container.is-hidden {
    display: none;
}

.kamera-preview-title {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kamera-preview-title .material-icons {
    font-size: 18px;
    color: #4CAF50;
}

.kamera-preview-canvas-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    border-radius: 4px;
    overflow: hidden;
}

.kamera-preview-canvas {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.kamera-preview-placeholder {
    color: var(--text-secondary);
    text-align: center;
    padding: 40px;
}

.kamera-preview-placeholder .material-icons {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

/* Toolbar */
.kamera-edit-toolbar {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: #222;
    border-top: 1px solid #333;
    flex-wrap: wrap;
    justify-content: center;
}

.kamera-toolbar-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.kamera-toolbar-divider {
    width: 1px;
    height: 32px;
    background: #444;
    margin: 0 8px;
}

.kamera-tool-btn {
    padding: 10px 16px;
    background: #333;
    color: #fff;
    border: 1px solid #444;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.kamera-tool-btn:hover {
    background: #444;
    border-color: #555;
}

.kamera-tool-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.kamera-tool-btn.primary {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    border-color: #1976D2;
}

.kamera-tool-btn.primary:hover {
    background: linear-gradient(135deg, #1E88E5, #1565C0);
}

.kamera-tool-btn.success {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    border-color: #388E3C;
}

.kamera-tool-btn.success:hover {
    background: linear-gradient(135deg, #43A047, #2E7D32);
}

.kamera-tool-btn .material-icons {
    font-size: 20px;
}

/* =============================================================================
   RESULT VIEW
   ============================================================================= */

.kamera-result-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    overflow: hidden;
}

.kamera-result-main {
    flex: 1;
    display: flex;
    gap: 20px;
    padding: 20px;
    overflow: hidden;
}

.kamera-result-image-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kamera-result-image-container {
    flex: 1;
    background: #111;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kamera-result-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kamera-result-text-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kamera-result-text-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #fff;
}

.kamera-result-text-header .material-icons {
    color: #4CAF50;
}

.kamera-result-textarea {
    flex: 1;
    background: #222;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 16px;
    color: #fff;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
}

.kamera-result-textarea:focus {
    outline: none;
    border-color: #4CAF50;
}

.kamera-result-actions {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: #222;
    border-top: 1px solid #333;
    justify-content: center;
    flex-wrap: wrap;
}

/* =============================================================================
   CONTEXT CAMERA MODAL - Med timer
   ============================================================================= */

#contextCameraModal .modal-content {
    width: 700px;
    max-width: 95vw;
}

.kamera-context-camera-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: #1a1a1a;
    border-radius: 8px;
}

.kamera-context-video-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.kamera-context-video {
    width: 100%;
    height: auto;
    min-height: 300px;
    max-height: 50vh;
    display: block;
    background: #000;
    object-fit: contain;
}

/* Countdown overlay */
.kamera-countdown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.kamera-countdown-overlay.is-hidden {
    display: none;
}

.kamera-countdown-number {
    font-size: 120px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.kamera-countdown-number.kamera-countdown-warning {
    color: #ff5722;
    transform: scale(1.2);
    text-shadow: 0 0 40px rgba(255, 87, 34, 0.8);
}

/* Flash effect */
.kamera-flash-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-white);
    z-index: 20;
    animation: kamera-flash 0.15s ease-out;
}

.kamera-flash-effect.is-hidden {
    display: none;
}

@keyframes kamera-flash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Capture buttons */
.kamera-context-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.kamera-context-buttons.is-hidden {
    display: none;
}

.kamera-context-btn {
    padding: 14px 24px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.kamera-context-btn .material-icons {
    font-size: 22px;
}

.kamera-capture-now {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.kamera-capture-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5);
}

.kamera-capture-timer {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
}

.kamera-capture-timer:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.5);
}

/* Cancel timer button */
.kamera-cancel-timer-btn {
    margin-top: 16px;
    padding: 12px 24px;
    font-size: 15px;
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.kamera-cancel-timer-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4);
}

.kamera-cancel-timer-btn.is-hidden {
    display: none;
}

/* =============================================================================
   TOOLBAR OCR BUTTON - bruker standard knapp-styling
   ============================================================================= */

/* OCR-knappen arver styling fra .button.secondary.small.action-btn */

/* =============================================================================
   SPINNER
   ============================================================================= */

.kamera-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: kamera-spin 0.8s linear infinite;
    display: inline-block;
}

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

/* =============================================================================
   INSTRUCTIONS OVERLAY
   ============================================================================= */

.kamera-instructions {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    pointer-events: none;
    z-index: 10;
}

.kamera-instructions-list {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.kamera-instruction-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kamera-instruction-item .material-icons {
    font-size: 18px;
    color: #4CAF50;
}

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

@media (max-width: 900px) {
    .kamera-edit-main,
    .kamera-result-main {
        flex-direction: column;
    }
    
    .kamera-preview-section,
    .kamera-result-image-section {
        max-width: 100%;
        max-height: 40vh;
    }
    
    .kamera-canvas-container,
    .kamera-result-image-container {
        max-height: 35vh;
    }
}

@media (max-width: 600px) {
    #ocrCameraModal .modal-content {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .kamera-edit-toolbar,
    .kamera-result-actions {
        padding: 12px;
        gap: 8px;
    }
    
    .kamera-tool-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .kamera-tool-btn span:not(.material-icons) {
        display: none;
    }
}

/* =============================================================================
   DARK MODE ENHANCEMENTS
   ============================================================================= */

.kamera-edit-view,
.kamera-result-view,
.kamera-camera-view {
    color: #fff;
}

/* Handle visibility */
.kamera-edit-view.is-hidden,
.kamera-result-view.is-hidden,
.kamera-camera-view.is-hidden {
    display: none !important;
}
/* ===== video.css ===== */
/* =============================================================================
   VIDEO MODULE STYLES - Identisk design som VideoLege webapp
   ============================================================================= */

/* =============================================================================
   FONTS
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* =============================================================================
   VARIABLER
   ============================================================================= */
:root {
    --video-primary: #1976D2;
    --video-primary-dark: #1565C0;
    --video-primary-darker: #0D47A1;
    --video-success: #43A047;
    --video-success-dark: #2E7D32;
    --video-success-light: #66BB6A;
    --video-warning: #FFA726;
    --video-warning-dark: #FF9800;
    --video-danger: #f44336;
    --video-danger-dark: #d32f2f;
    --video-bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --video-card-shadow: 0 4px 16px rgba(0,0,0,0.08);
    --video-card-shadow-hover: 0 12px 32px rgba(0,0,0,0.15);
    --video-font: 'Roboto', sans-serif;
}

/* =============================================================================
   VIDEO MODAL - Fullskjerm app-lignende
   ============================================================================= */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    font-family: var(--video-font);
}

.video-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.video-modal.hidden {
    display: none;
}

.video-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.video-modal-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--video-bg-gradient);
    z-index: 1;
}

/* =============================================================================
   MODAL HEADER
   ============================================================================= */
.video-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--bg-white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
    flex-shrink: 0;
}

.video-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-modal-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.video-modal-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-modal-title h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.video-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.video-modal-close:hover {
    background: #e0e0e0;
    transform: scale(1.05);
}

.video-modal-close .material-icons {
    font-size: 20px;
    color: var(--text-secondary);
}

/* Header actions container */
.video-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Test utstyr knapp i header */
.video-header-settings-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--video-primary) 0%, var(--video-primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--video-font);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.25);
}

.video-header-settings-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);
}

.video-header-settings-btn:active {
    transform: translateY(0);
}

.video-header-settings-btn .material-icons {
    font-size: 20px;
}

/* Lukk VideoLege knapp i header */
.video-header-close-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #f5f5f5;
    color: var(--text-secondary);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--video-font);
    cursor: pointer;
    transition: all 0.2s;
}

.video-header-close-btn:hover {
    background: #e0e0e0;
    color: var(--text-primary);
}

.video-header-close-btn .material-icons {
    font-size: 20px;
}

/* =============================================================================
   MODAL CONTENT - Starter øverst!
   ============================================================================= */
.video-modal-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.video-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

.video-view.hidden {
    display: none !important;
}

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

/* =============================================================================
   LOGIN VIEW - Split screen design (identisk med webapp)
   ============================================================================= */
.video-login-wrapper {
    display: flex;
    flex: 1;
    min-height: 100%;
}

.video-login-left {
    flex: 1;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-white);
    max-width: 520px;
}

.video-login-right {
    flex: 1;
    background: linear-gradient(135deg, var(--video-primary-darker), var(--video-primary-dark), var(--video-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    position: relative;
    overflow: hidden;
}

.video-login-right::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 60%);
}

.video-login-illustration {
    text-align: center;
    color: white;
    position: relative;
    z-index: 1;
}

.video-login-illustration-icon {
    font-size: 80px;
    margin-bottom: 24px;
}

.video-login-illustration h3 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 12px;
}

.video-login-illustration p {
    font-size: 15px;
    opacity: 0.9;
    max-width: 300px;
    line-height: 1.6;
    margin: 0 auto;
}

.video-login-features {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.video-login-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    opacity: 0.95;
}

.video-login-feature span:first-child {
    font-size: 20px;
}

/* Login form */
.video-login-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 36px;
}

.video-login-logo-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.video-login-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-login-logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.video-login-logo-text span {
    color: var(--video-primary);
}

.video-login-header {
    margin-bottom: 28px;
}

.video-login-header h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.video-login-header p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

/* =============================================================================
   FORM ELEMENTS
   ============================================================================= */
.video-form-group {
    margin-bottom: 20px;
}

.video-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.video-form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #E0E0E0;
    border-radius: 10px;
    font-size: 15px;
    font-family: var(--video-font);
    transition: all 0.2s;
    background: var(--bg-white);
}

.video-form-group input:focus {
    outline: none;
    border-color: var(--video-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.video-form-group input::placeholder {
    color: #BDBDBD;
}

.video-form-hint {
    font-size: 12px;
    color: #9E9E9E;
    margin-top: 6px;
}

/* =============================================================================
   BUTTONS (identisk med webapp)
   ============================================================================= */
.video-btn {
    padding: 14px 24px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--video-font);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

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

.video-btn-primary {
    background: var(--video-primary);
    color: white;
    width: 100%;
}

.video-btn-primary:hover:not(:disabled) {
    background: var(--video-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.video-btn-success {
    background: linear-gradient(135deg, var(--video-success), var(--video-success-dark));
    color: white;
    box-shadow: 0 4px 14px rgba(67, 160, 71, 0.35);
}

.video-btn-success:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 160, 71, 0.45);
}

.video-btn-secondary {
    background: #f5f5f5;
    color: var(--text-secondary);
}

.video-btn-secondary:hover:not(:disabled) {
    background: #e0e0e0;
}

.video-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: #f5f5f5;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.video-btn-icon:hover {
    background: #e0e0e0;
    transform: scale(1.05);
}

.video-btn-small {
    padding: 10px 16px;
    font-size: 13px;
}

.video-btn-lg {
    padding: 16px 24px;
    font-size: 16px;
    border-radius: 12px;
}

/* =============================================================================
   LOGIN FOOTER & ADMIN CTA
   ============================================================================= */
.video-login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #E0E0E0;
}

.video-login-footer a {
    color: var(--video-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.video-login-footer a:hover {
    text-decoration: underline;
}

/* Register CTA */
.video-register-cta {
    margin-top: 28px;
    padding: 20px;
    background: #F5F5F5;
    border-radius: 12px;
    text-align: center;
}

.video-register-cta-label {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.video-register-cta-link {
    color: var(--video-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.video-register-cta-link:hover {
    text-decoration: underline;
}

.video-register-cta-subtext {
    font-size: 12px;
    color: #9E9E9E;
    margin-top: 6px;
}

/* Admin CTA */
.video-admin-cta {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    border-radius: 12px;
    text-align: center;
    border: 1px solid #90CAF9;
}

.video-admin-cta-label {
    font-size: 14px;
    color: #1565C0;
    margin-bottom: 8px;
    font-weight: 500;
}

.video-admin-cta-link {
    color: var(--video-primary-dark);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.video-admin-cta-link:hover {
    text-decoration: underline;
}

.video-admin-cta-subtext {
    font-size: 12px;
    color: #1976D2;
    margin-top: 6px;
}

/* =============================================================================
   DASHBOARD VIEW (identisk med webapp)
   ============================================================================= */
.video-dashboard {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}

/* Stats Row */
.video-stats-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.video-stat-card {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--video-card-shadow);
    min-width: 160px;
}

.video-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.video-stat-icon.blue {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
}

.video-stat-icon.orange {
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
}

.video-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.video-stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* =============================================================================
   GUL LAPP / STICKY NOTE (identisk med webapp!)
   ============================================================================= */
.video-sticky-note {
    position: relative;
    background: linear-gradient(135deg, #fff9c4 0%, #fff59d 50%, #ffee58 100%);
    border-radius: 2px 2px 12px 2px;
    padding: 16px 20px 20px 20px;
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.08),
        inset 0 -2px 5px rgba(0, 0, 0, 0.05);
    transform: rotate(-0.5deg);
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    animation: stickyNoteAppear 0.4s ease-out;
    display: none;
}

.video-sticky-note.show {
    display: block;
}

.video-sticky-note::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, transparent 100%);
    border-radius: 2px 2px 0 0;
}

.video-sticky-note::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 2px;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.06) 50%);
    border-radius: 0 0 8px 0;
}

@keyframes stickyNoteAppear {
    from {
        opacity: 0;
        transform: rotate(-0.5deg) translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: rotate(-0.5deg) translateY(0) scale(1);
    }
}

@keyframes stickyNoteDisappear {
    from {
        opacity: 1;
        transform: rotate(-0.5deg) translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: rotate(-0.5deg) translateY(-10px) scale(0.9);
    }
}

.video-sticky-note-pin {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
    z-index: 1;
}

.video-sticky-note-close {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    font-size: 14px;
    color: #a68a00;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.2s;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 2;
}

.video-sticky-note-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

.video-sticky-note-title {
    font-size: 15px;
    font-weight: 600;
    color: #5d4e00;
    margin-bottom: 6px;
    padding-right: 20px;
    line-height: 1.3;
}

.video-sticky-note-message {
    font-size: 13px;
    color: #6b5c00;
    line-height: 1.5;
}

.video-sticky-note:hover {
    transform: rotate(-0.5deg) translateY(-2px);
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.12),
        0 15px 30px rgba(0, 0, 0, 0.1),
        inset 0 -2px 5px rgba(0, 0, 0, 0.05);
}

/* =============================================================================
   DASHBOARD HEADER
   ============================================================================= */
.video-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-white);
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: var(--video-card-shadow);
}

.video-user-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.video-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--video-primary);
}

.video-user-avatar .material-icons {
    font-size: 28px;
}

.video-user-details {
    display: flex;
    flex-direction: column;
}

.video-user-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.video-user-clinic {
    font-size: 13px;
    color: var(--text-muted);
}

.video-user-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.video-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* View Toggle */
.video-view-toggle {
    display: flex;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 4px;
}

.video-view-toggle-btn {
    padding: 8px 14px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s;
}

.video-view-toggle-btn.active {
    background: var(--bg-white);
    color: var(--text-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.video-view-toggle-btn:hover:not(.active) {
    color: var(--text-secondary);
}

/* Create Room Button */
.video-create-room-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--video-success), var(--video-success-dark));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(67, 160, 71, 0.35);
    font-family: var(--video-font);
}

.video-create-room-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 160, 71, 0.45);
}

/* =============================================================================
   ROOMS SECTION
   ============================================================================= */
.video-rooms-section {
    flex: 1;
}

.video-rooms-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* =============================================================================
   ROOM CARDS - Grid visning
   ============================================================================= */
.video-rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.video-room-card {
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: var(--video-card-shadow);
    overflow: hidden;
    transition: all 0.3s;
    border: 3px solid transparent;
}

.video-room-card:hover {
    box-shadow: var(--video-card-shadow-hover);
    transform: translateY(-4px);
}

.video-room-card.waiting {
    border-color: var(--video-warning);
    animation: cardPulseBorder 2s ease-in-out infinite;
}

@keyframes cardPulseBorder {
    0%, 100% {
        border-color: var(--video-warning);
        box-shadow: var(--video-card-shadow), 0 0 0 0 rgba(255, 167, 38, 0.7);
    }
    50% {
        border-color: var(--video-warning-dark);
        box-shadow: var(--video-card-shadow), 0 0 0 10px rgba(255, 167, 38, 0);
    }
}

.video-room-card-header {
    background: linear-gradient(135deg, var(--video-primary) 0%, var(--video-primary-dark) 100%);
    padding: 20px 24px;
    color: white;
    position: relative;
}

.video-room-card.waiting .video-room-card-header {
    background: linear-gradient(135deg, var(--video-warning) 0%, var(--video-warning-dark) 100%);
}

.video-room-card-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding-right: 80px;
}

.video-room-card-status {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.video-room-card-body {
    padding: 20px 24px;
}

.video-room-card-info {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.video-room-card-actions {
    display: flex;
    gap: 10px;
}

.video-room-card-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    font-family: var(--video-font);
}

.video-room-card-btn.start {
    background: linear-gradient(135deg, var(--video-primary), var(--video-primary-dark));
    color: white;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.25);
}

.video-room-card-btn.start:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(25, 118, 210, 0.35);
}

.video-room-card.waiting .video-room-card-btn.start {
    background: linear-gradient(135deg, var(--video-warning), var(--video-warning-dark));
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.35);
    animation: btnPulse 1.5s ease-in-out infinite;
}

@keyframes btnPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.video-room-card-btn.copy {
    background: #f5f5f5;
    color: var(--text-secondary);
}

.video-room-card-btn.copy:hover {
    background: #e8e8e8;
    color: var(--video-primary);
}

.video-room-card-btn.delete {
    background: #FFF5F5;
    color: #E53935;
    flex: 0;
    padding: 12px;
}

.video-room-card-btn.delete:hover {
    background: #FFEBEE;
}

/* =============================================================================
   ROOM LIST - Liste visning
   ============================================================================= */
.video-rooms-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.video-room-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-white);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.25s;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.video-room-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #E0E0E0;
    transition: all 0.25s;
}

.video-room-row:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.video-room-row:hover::before {
    background: var(--video-primary);
}

.video-room-row.waiting {
    border-color: var(--video-warning);
    background: linear-gradient(90deg, #FFF8E1 0%, white 40%);
    animation: rowPulse 2s ease-in-out infinite;
}

.video-room-row.waiting::before {
    background: linear-gradient(180deg, var(--video-warning), var(--video-warning-dark));
    width: 5px;
}

@keyframes rowPulse {
    0%, 100% { border-color: var(--video-warning); }
    50% { border-color: var(--video-warning-dark); box-shadow: 0 6px 24px rgba(255, 152, 0, 0.2); }
}

.video-room-row-status {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #F5F5F5, #EEEEEE);
}

.video-room-row.waiting .video-room-row-status {
    background: linear-gradient(135deg, var(--video-warning), var(--video-warning-dark));
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
    animation: iconPulse 1.5s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.video-room-row.active .video-room-row-status {
    background: linear-gradient(135deg, var(--video-success-light), var(--video-success));
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.video-room-row-info {
    flex: 1;
    min-width: 0;
}

.video-room-row-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
}

.video-room-row-meta {
    font-size: 13px;
    color: #9E9E9E;
    margin-top: 2px;
}

.video-room-row-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.video-room-row-btn {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.video-room-row-btn.start {
    background: linear-gradient(135deg, var(--video-primary), var(--video-primary-dark));
    color: white;
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.25);
}

.video-room-row-btn.start:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(21, 101, 192, 0.35);
}

.video-room-row.waiting .video-room-row-btn.start {
    background: linear-gradient(135deg, var(--video-warning), var(--video-warning-dark));
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.35);
    animation: btnPulseSmall 1s ease-in-out infinite;
}

@keyframes btnPulseSmall {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(255, 152, 0, 0.35); }
    50% { transform: scale(1.15); box-shadow: 0 6px 20px rgba(255, 152, 0, 0.5); }
}

.video-room-row-btn.copy {
    background: #F5F5F5;
    color: var(--text-secondary);
}

.video-room-row-btn.copy:hover {
    background: #E8E8E8;
    color: var(--video-primary);
    transform: scale(1.05);
}

.video-room-row-btn.delete {
    background: #FFF5F5;
    color: #E53935;
}

.video-room-row-btn.delete:hover {
    background: #FFEBEE;
    transform: scale(1.05);
}

/* Disabled state - når ingen pasient venter */
.video-room-row-btn.start:disabled,
.video-room-row-btn.start.disabled {
    background: #E0E0E0;
    color: #9E9E9E;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
}

.video-room-row-btn.start:disabled:hover,
.video-room-row-btn.start.disabled:hover {
    transform: none;
}

.video-room-card-btn.start:disabled,
.video-room-card-btn.start.disabled {
    background: #E0E0E0;
    color: #9E9E9E;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
    animation: none;
}

.video-room-card-btn.start:disabled:hover,
.video-room-card-btn.start.disabled:hover {
    transform: none;
}

/* =============================================================================
   EMPTY STATE
   ============================================================================= */
.video-rooms-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: var(--video-card-shadow);
}

.video-rooms-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.video-rooms-empty p {
    font-size: 16px;
    color: #9E9E9E;
    margin: 0;
}

.video-rooms-empty-hint {
    font-size: 14px !important;
    margin-top: 8px !important;
}

/* =============================================================================
   VIDEO CALL VIEW - Fullskjerm (beholdes fra forrige)
   ============================================================================= */
.video-call-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 10001;
}

.video-call-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-remote-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.video-remote-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
}

.video-placeholder.hidden {
    display: none;
}

.video-placeholder .material-icons {
    font-size: 80px;
    margin-bottom: 16px;
}

.video-placeholder p {
    font-size: 18px;
}

.video-local-container {
    position: absolute;
    bottom: 120px;
    right: 24px;
    width: 180px;
    aspect-ratio: 3/4;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    border: 3px solid rgba(255,255,255,0.3);
    z-index: 100;
    transition: aspect-ratio 0.3s ease;
}

/* Webcam sender landscape → PiP i landscape-format */
.video-local-container.landscape {
    width: 240px;
    aspect-ratio: 16/9;
}

.video-local-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

/* Kamera av overlay */
.video-camera-off-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--video-primary) 0%, var(--video-primary-darker) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 10;
    padding: 16px;
    text-align: center;
}

.video-camera-off-overlay.hidden {
    display: none;
}

.video-camera-off-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.video-camera-off-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.video-camera-off-text {
    font-size: 10px;
    opacity: 0.9;
    line-height: 1.4;
}

/* Camera tooltip */
.video-camera-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-white);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    white-space: nowrap;
    z-index: 200;
    animation: tooltipBounce 1s ease-in-out infinite;
}

.video-camera-tooltip.hidden {
    display: none;
}

.video-camera-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: white;
}

@keyframes tooltipBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}

/* Call info */
.video-call-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 24px;
    background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 50;
}

.video-call-room-name {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.video-call-duration {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    font-family: 'Roboto Mono', monospace;
}

.video-call-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.video-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9E9E9E;
}

.video-status-dot.connecting {
    background: var(--video-warning);
    animation: pulse 1s infinite;
}

.video-status-dot.connected {
    background: #4CAF50;
}

.video-status-dot.disconnected,
.video-status-dot.failed {
    background: var(--video-danger);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.video-call-status span:last-child {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
}

/* Call controls */
.video-call-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px;
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
    display: flex;
    justify-content: center;
    gap: 16px;
    z-index: 50;
}

.video-control-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
    background: rgba(255,255,255,0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.video-control-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
}

.video-control-btn.active {
    background: rgba(255,255,255,0.3);
}

.video-control-btn.muted,
.video-control-btn.off {
    background: rgba(244, 67, 54, 0.8);
}

.video-control-btn.video-end-call {
    background: var(--video-danger);
    width: 64px;
    height: 64px;
}

.video-control-btn.video-end-call:hover {
    background: var(--video-danger-dark);
}

/* =============================================================================
   RATING VIEW
   ============================================================================= */
.video-rating-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
}

.video-rating-card {
    background: var(--bg-white);
    border-radius: 24px;
    padding: 48px;
    text-align: center;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.video-rating-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.video-rating-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.video-rating-subtitle {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 0 32px 0;
}

.video-rating-section {
    margin-bottom: 32px;
}

.video-rating-label {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.video-rating-stars {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.video-rating-star {
    font-size: 36px;
    color: #E0E0E0;
    cursor: pointer;
    transition: all 0.2s;
}

.video-rating-star:hover {
    transform: scale(1.2);
}

.video-rating-star.filled {
    color: #FFB400;
}

.video-rating-description {
    font-size: 14px;
    color: var(--text-muted);
    min-height: 20px;
}

/* =============================================================================
   TRANSCRIPTION PANEL
   ============================================================================= */
.video-transcription-panel {
    position: absolute;
    left: 24px;
    bottom: 120px;
    width: 360px;
    max-height: 300px;
    background: rgba(0,0,0,0.85);
    border-radius: 16px;
    overflow: hidden;
    z-index: 50;
    backdrop-filter: blur(10px);
}

.video-transcription-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.video-transcription-content {
    padding: 16px;
    max-height: 220px;
    overflow-y: auto;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    line-height: 1.5;
}

.video-transcription-placeholder {
    color: rgba(255,255,255,0.5);
    font-style: italic;
}

/* =============================================================================
   PATIENT TOAST
   ============================================================================= */
.video-patient-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-white);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 9999;
    max-width: 380px;
    animation: slideIn 0.3s ease;
    border-left: 5px solid var(--video-warning);
}

.video-patient-toast.hidden {
    display: none;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.video-toast-content {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.video-toast-icon {
    font-size: 32px;
    animation: bellRing 0.5s ease infinite;
}

@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
}

.video-toast-text strong {
    display: block;
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.video-toast-text span {
    font-size: 14px;
    color: var(--text-muted);
}

.video-toast-actions {
    display: flex;
    gap: 10px;
}

/* =============================================================================
   ERROR MESSAGES
   ============================================================================= */
.video-error {
    background: #FFEBEE;
    border: 1px solid #FFCDD2;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    color: #C62828;
    font-size: 14px;
}

.video-error.hidden {
    display: none;
}

/* =============================================================================
   WAITING BADGE
   ============================================================================= */
.video-waiting-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--video-warning);
    color: white;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badgePulse 1.5s ease-in-out infinite;
}

.video-waiting-badge.hidden {
    display: none;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 900px) {
    .video-login-wrapper {
        flex-direction: column;
    }
    
    .video-login-left {
        max-width: none;
        padding: 32px 24px;
    }
    
    .video-login-right {
        display: none;
    }
    
    .video-dashboard {
        padding: 16px;
    }
    
    .video-stats-row {
        flex-direction: column;
    }
    
    .video-stat-card {
        min-width: 100%;
    }
    
    .video-sticky-note {
        min-width: 100%;
        max-width: 100%;
        transform: none;
    }
    
    .video-dashboard-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .video-dashboard-actions {
        justify-content: space-between;
    }
    
    .video-rooms-grid {
        grid-template-columns: 1fr;
    }
    
    .video-local-container {
        width: 120px;
        bottom: 100px;
        right: 16px;
    }
    
    .video-local-container.landscape {
        width: 160px;
    }
}

/* =============================================================================
   SIDEBAR BUTTON
   ============================================================================= */
.sidebar-btn.video-consult {
    position: relative;
    background: linear-gradient(135deg, #0097a7 0%, #00838f 100%);
    color: white;
    border: none;
}

.sidebar-btn.video-consult .material-icons {
    color: white;
}

.sidebar-btn.video-consult:hover {
    background: linear-gradient(135deg, #00acc1 0%, #006064 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 151, 167, 0.3);
}

.sidebar-btn.video-consult:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 151, 167, 0.2);
}

/* =============================================================================
   CUSTOM DIALOG MODAL (erstatter alert, confirm, prompt)
   ============================================================================= */
.video-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    animation: dialogFadeIn 0.2s ease;
}

.video-dialog-overlay.hidden {
    display: none;
}

@keyframes dialogFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.video-dialog-card {
    background: var(--bg-white);
    border-radius: 20px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: dialogSlideIn 0.3s ease;
}

@keyframes dialogSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.video-dialog-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.video-dialog-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.video-dialog-message {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.video-dialog-input-wrapper {
    margin-bottom: 24px;
}

.video-dialog-input-wrapper.hidden {
    display: none;
}

.video-dialog-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #E0E0E0;
    border-radius: 12px;
    font-size: 16px;
    font-family: var(--video-font);
    text-align: center;
    transition: all 0.2s;
}

.video-dialog-input:focus {
    outline: none;
    border-color: var(--video-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.video-dialog-input.error {
    border-color: var(--video-danger);
    animation: dialogShake 0.3s ease;
}

@keyframes dialogShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.video-dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.video-dialog-buttons .video-btn {
    min-width: 120px;
    padding: 14px 24px;
}

.video-btn-danger {
    background: linear-gradient(135deg, var(--video-danger), var(--video-danger-dark));
    color: white;
    box-shadow: 0 4px 14px rgba(244, 67, 54, 0.35);
}

.video-btn-danger:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 67, 54, 0.45);
}

/* =============================================================================
   GENERIC VIDEO TOAST
   ============================================================================= */

.video-generic-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-white);
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10002;
    max-width: 400px;
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-generic-toast-visible {
    transform: translateX(0);
    opacity: 1;
}

.video-generic-toast-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.video-generic-toast-content {
    flex: 1;
    min-width: 0;
}

.video-generic-toast-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.video-generic-toast-message {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.video-generic-toast-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 6px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.video-generic-toast-close:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.video-generic-toast-close .material-icons {
    font-size: 18px;
}

/* =============================================================================
   VIDEO SETTINGS VIEW - Kamera/Mikrofon innstillinger
   ============================================================================= */

/* Settings View Layout */
.video-settings-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 32px;
    gap: 24px;
}

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

.video-settings-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-settings-header h3 .material-icons {
    font-size: 28px;
    color: var(--video-primary);
}

/* Settings Grid - To kolonner */
.video-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    flex: 1;
}

@media (max-width: 900px) {
    .video-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* Settings Card */
.video-settings-card {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--video-card-shadow);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.video-settings-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.video-settings-card-title .material-icons {
    font-size: 22px;
    color: var(--video-primary);
}

/* Camera Preview */
.video-settings-preview-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #1a1a2e;
    border-radius: 12px;
    overflow: hidden;
}

.video-settings-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}

.video-settings-preview-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    gap: 12px;
}

.video-settings-preview-placeholder .material-icons {
    font-size: 48px;
    color: #444;
}

.video-settings-preview-placeholder span {
    font-size: 14px;
}

/* Microphone Level Meter */
.video-settings-mic-meter {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.video-settings-mic-meter-label {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.video-settings-mic-meter-label .material-icons {
    font-size: 16px;
}

.video-settings-mic-meter-bar-bg {
    width: 100%;
    height: 12px;
    background: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.video-settings-mic-meter-bar {
    height: 100%;
    width: 0%;
    background: var(--video-primary);
    border-radius: 6px;
    transition: width 0.05s ease-out, background 0.2s;
}

/* Device Select */
.video-settings-select-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.video-settings-select-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.video-settings-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #E0E0E0;
    border-radius: 10px;
    font-size: 15px;
    font-family: var(--video-font);
    background: var(--bg-white);
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.video-settings-select:focus {
    outline: none;
    border-color: var(--video-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.video-settings-select:hover {
    border-color: var(--border-medium);
}

/* Speaker Test Button */
.video-settings-speaker-test {
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-settings-speaker-test .video-btn {
    flex-shrink: 0;
}

.video-settings-speaker-test-hint {
    font-size: 13px;
    color: #9e9e9e;
}

/* Status & Error */
.video-settings-status {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-settings-status.loading {
    background: #E3F2FD;
    color: #1565C0;
}

.video-settings-status.success {
    background: #E8F5E9;
    color: #2E7D32;
}

.video-settings-status.error {
    background: #FFEBEE;
    color: #C62828;
}

.video-settings-error {
    background: #FFEBEE;
    border: 1px solid #FFCDD2;
    border-radius: 10px;
    padding: 14px 16px;
    color: #C62828;
    font-size: 14px;
    line-height: 1.5;
}

.video-settings-error.hidden {
    display: none;
}

.video-settings-error strong {
    display: block;
    margin-bottom: 4px;
}

.video-settings-error small {
    color: #E57373;
}

/* Settings Footer */
.video-settings-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.video-settings-footer-hint {
    font-size: 13px;
    color: #9e9e9e;
    display: flex;
    align-items: center;
    gap: 6px;
}

.video-settings-footer-hint .material-icons {
    font-size: 16px;
}

/* Settings Section */
.video-settings-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .video-settings-view {
        padding: 16px;
    }
    
    .video-settings-card {
        padding: 16px;
    }
    
    .video-settings-footer {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .video-settings-footer .video-btn {
        width: 100%;
    }
}

.video-login-info-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: #3b82f6;
    text-decoration: none;
}

.video-login-info-link:hover {
    text-decoration: underline;
}
/* ===== usage-dashboard.css ===== */
/* ============================================================================
   USAGE DASHBOARD — Wallet header badge + Modal
   Matcher cssindex.css: Roboto, --primary: #1976d2, lyst tema, Material Design
   ============================================================================ */

/* --- Header Wallet Badge ---
   Sitter i header (blå bg, hvit tekst). Matcher .header-button mønsteret. */

.wallet-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px 5px 10px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--main-border-radius, 6px);
    background: rgba(255,255,255,0.12);
    color: inherit;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
}
.wallet-header-btn .material-icons {
    font-size: 18px;
    opacity: 0.9;
}
.wallet-header-btn:hover {
    background: rgba(255,255,255,0.22);
    transform: translateY(-1px);
}
.wallet-header-amount {
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Lav saldo — gul puls */
.wallet-header-btn.wallet-low {
    border-color: rgba(255,193,7,0.6);
    background: rgba(255,193,7,0.2);
    animation: wallet-pulse 2s ease-in-out infinite;
}
@keyframes wallet-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,193,7,0.3); }
    50% { box-shadow: 0 0 0 6px rgba(255,193,7,0); }
}

/* --- Modal Sizing --- */
.usage-modal-content {
    width: 95% !important;
    max-width: 1100px !important;
    max-height: 92vh;
}
.usage-modal-body {
    padding: 0 !important;
    overflow-y: auto;
    max-height: calc(92vh - 58px);
}

/* --- Loading --- */
.usage-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 20px;
    color: var(--text-muted);
    font-size: 0.95rem;
}
.usage-spinner {
    width: 22px; height: 22px;
    border: 3px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: usage-spin 0.7s linear infinite;
}
@keyframes usage-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   DASHBOARD LAYOUT (inne i modal-body)
   ============================================================================ */

.udb {
    padding: 24px;
    background: var(--bg-page, #f4f6f8);
    min-height: 400px;
    font-family: 'Roboto', sans-serif;
}

/* --- Period Selector --- */
.udb-periods {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.udb-period-btn {
    padding: 6px 16px;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    background: var(--bg-white);
    color: var(--text-muted);
    font-family: 'Roboto', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.udb-period-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-medium);
    background: var(--bg-hover);
}
.udb-period-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(25,118,210,0.25);
}
.udb-date-range {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
}
.udb-date-range input[type="date"] {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    padding: 5px 8px;
    color: var(--text-primary);
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
}
.udb-date-range input[type="date"]:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(25,118,210,0.15);
}
.udb-date-range span { color: var(--text-muted); font-size: 0.82rem; }

/* --- Summary Cards --- */
.udb-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.udb-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.2s, transform 0.2s;
}
.udb-card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-1px);
}
.udb-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
}
.udb-card-blue::before   { background: linear-gradient(90deg, #1976d2, #42a5f5); }
.udb-card-emerald::before { background: linear-gradient(90deg, #2e7d32, #66bb6a); }
.udb-card-amber::before  { background: linear-gradient(90deg, #ff8f00, #ffb300); }
.udb-card-violet::before { background: linear-gradient(90deg, #7b1fa2, #ba68c8); }
.udb-card-rose::before   { background: linear-gradient(90deg, #c62828, #ef5350); }

.udb-card-icon { font-size: 18px; margin-bottom: 8px; }
.udb-card-blue .udb-card-icon   { color: var(--primary); }
.udb-card-emerald .udb-card-icon { color: #2e7d32; }
.udb-card-amber .udb-card-icon  { color: #ff8f00; }
.udb-card-violet .udb-card-icon { color: #7b1fa2; }
.udb-card-rose .udb-card-icon   { color: #c62828; }

.udb-card-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 2px;
}
.udb-card-value {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
}
.udb-card-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* --- Charts --- */
.udb-charts {
    display: grid;
    grid-template-columns: 5fr 2fr;
    gap: 12px;
    margin-bottom: 20px;
}
.udb-chart-box {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
}
.udb-chart-box h4 {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.udb-chart-box h4 .material-icons { font-size: 18px; color: var(--primary); }
.udb-chart-wrap { position: relative; height: 220px; }

/* --- Log / Table --- */
.udb-log {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.udb-log-header {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-light);
}
.udb-log-header h4 {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.udb-log-header h4 .material-icons { font-size: 18px; color: #2e7d32; }

/* Tabs */
.udb-tabs { display: flex; gap: 4px; }
.udb-tab {
    padding: 5px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    background: var(--bg-white);
    color: var(--text-muted);
    font-family: 'Roboto', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.udb-tab:hover { color: var(--text-secondary); border-color: var(--border-medium); }
.udb-tab.active {
    background: var(--primary-light);
    color: var(--primary);
    border-color: rgba(25,118,210,0.3);
}

/* Table scroll */
.udb-log-scroll {
    max-height: 340px;
    overflow-y: auto;
}
.udb-log-scroll::-webkit-scrollbar { width: 5px; }
.udb-log-scroll::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 3px; }

/* Table */
.udb-table { width: 100%; border-collapse: collapse; }
.udb-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-light);
    position: sticky;
    top: 0;
    z-index: 1;
}
.udb-table thead th:last-child { text-align: right; }
.udb-table tbody td {
    padding: 9px 14px;
    font-size: 0.82rem;
    border-bottom: 1px solid #f0f0f0;
    color: var(--text-secondary);
}
.udb-table tbody td:first-child { font-weight: 500; color: var(--text-primary); }
.udb-table tbody td:last-child { text-align: right; }
.udb-table tbody tr:hover { background: var(--primary-light); }

/* Cell colors */
.udb-cost    { color: #e65100; font-weight: 500; }
.udb-bedrock { color: var(--primary); }
.udb-soniox  { color: #2e7d32; }

/* Empty */
.udb-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
}
.udb-empty .material-icons { font-size: 40px; opacity: 0.25; margin-bottom: 10px; display: block; }
.udb-empty p { font-size: 0.92rem; }

/* PDF export button */
.udb-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    background: var(--bg-white);
    color: var(--accent-error, #c62828);
    font-family: 'Roboto', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.udb-pdf-btn:hover {
    background: #ffebee;
    border-color: #ef9a9a;
}

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

@media (max-width: 1000px) {
    .udb-cards { grid-template-columns: repeat(3, 1fr); }
    .udb-charts { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .udb-cards { grid-template-columns: repeat(2, 1fr); }
    .udb { padding: 16px; }
    .udb-periods { gap: 4px; }
    .udb-period-btn { padding: 5px 10px; font-size: 0.75rem; }
    .usage-modal-content { width: 100% !important; max-height: 100vh; border-radius: 0; }
}
@media (max-width: 500px) {
    .udb-cards { grid-template-columns: 1fr; }
}
/* ============================================================================
   TOPUP PANEL
   ============================================================================ */
.udb-card-wallet { position: relative; }
.udb-topup-trigger {
    display: flex; align-items: center; gap: 0.35rem;
    margin-top: 0.5rem; padding: 0.4rem 0.85rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff; border: none; border-radius: 8px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s;
}
.udb-topup-trigger:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.35); }
.udb-topup-trigger .material-icons { font-size: 1rem; }

.udb-topup-panel {
    grid-column: 1 / -1;
    animation: topupSlide 0.25s ease-out;
}
@keyframes topupSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.udb-topup-inner {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%);
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    padding: 1.5rem;
}
.udb-topup-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.5rem;
}
.udb-topup-title {
    display: flex; align-items: center; gap: 0.5rem;
}
.udb-topup-title .material-icons { color: #2563eb; font-size: 1.3rem; }
.udb-topup-title h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #1e3a5f; }
.udb-topup-close {
    background: none; border: none; cursor: pointer;
    color: #94a3b8; padding: 0.25rem; border-radius: 6px;
    transition: all 0.15s;
}
.udb-topup-close:hover { background: #e2e8f0; color: #475569; }
.udb-topup-desc {
    font-size: 0.85rem; color: #64748b; margin: 0 0 1rem;
}
.udb-topup-amounts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
    margin-bottom: 1rem;
}
.udb-topup-amount {
    padding: 0.7rem 0.5rem;
    background: #fff; border: 2px solid #e2e8f0;
    border-radius: 10px; font-size: 0.95rem; font-weight: 600;
    color: #334155; cursor: pointer; transition: all 0.15s;
}
.udb-topup-amount:hover { border-color: #93c5fd; background: #f0f7ff; }
.udb-topup-amount.selected {
    border-color: #2563eb; background: #eff6ff;
    color: #1d4ed8; box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.udb-topup-custom {
    margin-bottom: 1.25rem;
}
.udb-topup-custom label {
    display: block; font-size: 0.82rem; color: #64748b; margin-bottom: 0.35rem;
}
.udb-topup-input-row {
    display: flex; align-items: center; gap: 0.5rem;
}
.udb-topup-input {
    flex: 1; padding: 0.6rem 0.85rem;
    border: 2px solid #e2e8f0; border-radius: 8px;
    font-size: 0.95rem; font-weight: 500;
    transition: border-color 0.15s;
}
.udb-topup-input:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.udb-topup-currency { font-size: 0.9rem; font-weight: 600; color: #64748b; }

.udb-topup-confirm {
    width: 100%; padding: 0.85rem;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff; border: none; border-radius: 12px;
    font-size: 1rem; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(37,99,235,0.3);
}
.udb-topup-confirm:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,0.4); }
.udb-topup-confirm:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.udb-topup-confirm .material-icons { font-size: 1.2rem; }
.udb-topup-note {
    font-size: 0.78rem; color: #94a3b8; text-align: center;
    margin: 0.75rem 0 0; line-height: 1.4;
}

@media (max-width: 600px) {
    .udb-topup-amounts { grid-template-columns: repeat(2, 1fr); }
}
/* ===== main-csp.css ===== */
/* main-csp.css — Stiler eid av main.js, flyttet fra inline
   Prefix: main-
*/

.is-hidden { display: none !important; }

/* =============================================================================
   HELSENETT BADGES (header)
   ============================================================================= */
.main-badge-restart {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
  color: #b45309;
}
.main-badge-restart-icon {
  font-size: 14px;
  vertical-align: middle;
  margin-right: 4px;
}

/* Logo i modal-headers */
.main-modal-logo {
  height: 24px;
  width: auto;
}

/* =============================================================================
   BALANCE MODAL (main-bm-)
   ============================================================================= */
@keyframes main-bm-fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes main-bm-slideUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }

.main-bm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  animation: main-bm-fadeIn 0.2s ease;
}
.main-bm-card {
  background: var(--bg-white);
  border-radius: 16px;
  padding: 0;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: main-bm-slideUp 0.25s ease;
}
.main-bm-header {
  background: linear-gradient(135deg, #ff9800 0%, #f44336 100%);
  padding: 28px 28px 22px;
  text-align: center;
  color: #fff;
}
.main-bm-header-icon {
  font-size: 48px;
  margin-bottom: 8px;
  opacity: 0.9;
}
.main-bm-header-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}
.main-bm-header-balance {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 6px;
}
.main-bm-body {
  padding: 24px 28px;
}
.main-bm-desc {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}
.main-bm-topup-section {
  margin-bottom: 16px;
}
.main-bm-topup-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #757575);
  margin-bottom: 8px;
}
.main-bm-topup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.main-bm-topup-btn {
  padding: 10px 0;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  background: var(--bg-white);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.main-bm-topup-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.main-bm-topup-btn-primary {
  border-color: var(--primary, #1976d2);
  background: rgba(25, 118, 210, 0.06);
  color: var(--primary, #1976d2);
}
.main-bm-info-box {
  background: #fff3e0;
  border: 1px solid #ffe0b2;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.main-bm-info-icon {
  color: #e65100;
  font-size: 18px;
  margin-top: 1px;
}
.main-bm-info-text {
  font-size: 0.78rem;
  color: #e65100;
  line-height: 1.4;
}
.main-bm-close-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: var(--bg-white);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.main-bm-close-btn:hover {
  background: #f5f5f5;
}

/* =============================================================================
   EMERGENCY UI (main-emergency-)
   ============================================================================= */
.main-emergency-box {
  padding: 2rem;
  text-align: center;
  background: var(--bg-white);
  border-radius: 8px;
  margin: 2rem;
  box-shadow: var(--shadow-medium);
}
.main-emergency-icon {
  font-size: 4rem;
  color: var(--accent-error);
  margin-bottom: 1rem;
}
.main-emergency-title {
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.main-emergency-desc {
  color: var(--text-secondary);
  margin-bottom: 2rem;
}
.main-emergency-detail {
  background: var(--bg-light);
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 2rem;
  font-family: monospace;
  text-align: left;
}
.main-emergency-btn-reload {
  margin-right: 1rem;
}

/* =============================================================================
   CHAT COPY FEEDBACK
   ============================================================================= */
.main-chat-copy-success {
  background: #4CAF50 !important;
}

/* =============================================================================
   LIVE TRANSCRIPTION (fra <style> blokk i HTML)
   ============================================================================= */
.live-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 12px; padding: 4px 10px;
  background: #fee2e2; border-radius: 12px;
  font-size: 12px; font-weight: 600; color: #dc2626;
  vertical-align: middle;
}
.live-indicator.is-hidden { display: none; }
.live-dot {
  width: 8px; height: 8px; background: #dc2626; border-radius: 50%;
  animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
.live-text { letter-spacing: 0.5px; }
.transcript-partial {
  margin-top: 8px; padding: 8px 12px;
  background: #f3f4f6; border-radius: 6px;
  color: #6b7280; font-style: italic; font-size: 14px; min-height: 20px;
}
.transcript-partial.is-hidden { display: none; }
.transcript-partial::before { content: "▸ "; color: #9ca3af; }
#transcriptContent.live-mode {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

/* =============================================================================
   FACEBOOK WELCOME MODAL (fbw-)
   ============================================================================= */
.fbw-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  animation: fbw-fadeIn 0.25s ease;
}
.fbw-overlay.is-hidden { display: none !important; }

@keyframes fbw-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fbw-slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.fbw-card {
  background: var(--bg-white);
  border-radius: 20px;
  max-width: 460px;
  width: 92%;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: fbw-slideUp 0.3s ease;
}

.fbw-header {
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  padding: 2rem 2rem 1.5rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.fbw-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.fbw-logo {
  height: 52px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.fbw-title {
  margin: 0 0 0.3rem;
  font-size: 1.3rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.fbw-subtitle {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}

.fbw-body {
  padding: 1.75rem 2rem 1rem;
  text-align: center;
}

.fbw-icon-row {
  margin-bottom: 0.75rem;
}

.fbw-community-icon {
  font-size: 2.5rem;
  color: #1877f2;
  background: #e7f0ff;
  border-radius: 16px;
  padding: 14px;
  display: inline-block;
}

.fbw-body-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.fbw-body-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 1.25rem;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.fbw-fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1877f2;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 12px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(24, 119, 242, 0.35);
  transition: all 0.2s ease;
}
.fbw-fb-btn:hover {
  background: #1565d8;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(24, 119, 242, 0.4);
}
.fbw-fb-btn .material-icons {
  font-size: 1.2rem;
}

.fbw-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 1rem 0 0;
}

.fbw-footer {
  padding: 1rem 2rem 1.5rem;
  text-align: center;
}

.fbw-ok-btn {
  background: var(--bg-white);
  border: 1.5px solid #e2e8f0;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 11px 40px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.fbw-ok-btn:hover {
  background: var(--bg-light);
  border-color: #cbd5e1;
}

@media (max-width: 480px) {
  .fbw-card { width: 96%; border-radius: 16px; }
  .fbw-header { padding: 1.5rem 1.25rem 1.25rem; }
  .fbw-title { font-size: 1.15rem; }
  .fbw-body { padding: 1.5rem 1.25rem 0.75rem; }
  .fbw-fb-btn { font-size: 0.85rem; padding: 11px 18px; }
  .fbw-footer { padding: 0.75rem 1.25rem 1.25rem; }
}

/* =============================================================================
   TIL PASIENT MODAL (tp-)
   ============================================================================= */
.tp-modal-content {
  max-width: 580px;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
}

/* --- Header --- */
.tp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  color: #fff;
}

.tp-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tp-header-icon {
  font-size: 1.75rem;
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 10px;
}

.tp-header-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.tp-header-sub {
  margin: 2px 0 0;
  font-size: 0.78rem;
  opacity: 0.75;
}

.tp-close-btn {
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 10px;
  padding: 8px;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-close-btn:hover {
  background: rgba(255,255,255,0.25);
}
.tp-close-btn .material-icons {
  font-size: 1.2rem;
}

/* --- Body --- */
.tp-body {
  padding: 20px 24px;
}

.tp-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.tp-language-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 6px 10px 6px 12px;
  flex-shrink: 0;
}

.tp-language-icon {
  font-size: 1.1rem;
  color: #2563eb;
}

.tp-language-select {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: #1e3a5f;
  cursor: pointer;
  padding: 2px 0;
  appearance: auto;
}
.tp-language-select:focus {
  outline: none;
}

.tp-lang-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* --- Text Area --- */
.tp-text-area {
  position: relative;
  min-height: 220px;
}

.tp-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg-light);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  color: var(--text-muted);
  font-size: 0.88rem;
  z-index: 2;
}
.tp-loading.is-hidden { display: none; }

.tp-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: tp-spin 0.8s linear infinite;
}
@keyframes tp-spin {
  to { transform: rotate(360deg); }
}

.tp-text-field {
  width: 100%;
  min-height: 220px;
  max-height: 50vh;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: #fafcff;
  resize: vertical;
  transition: border-color 0.15s;
}
.tp-text-field:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.tp-text-field::placeholder {
  color: var(--text-muted);
}

/* --- Footer --- */
.tp-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  background: var(--bg-light);
  border-top: 1px solid #e2e8f0;
}

.tp-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.tp-btn-secondary {
  background: var(--bg-white);
  border: 1px solid #d1d5db;
  color: var(--text-muted);
}
.tp-btn-secondary:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.tp-btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.tp-btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.tp-btn-primary:active {
  transform: translateY(0);
}
.tp-btn-primary .material-icons {
  font-size: 1rem;
}

/* Copied state */
.tp-btn-primary.tp-copied {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}

/* --- Responsive --- */
@media (max-width: 480px) {
  .tp-modal-content { width: 98%; border-radius: 12px; }
  .tp-header { padding: 16px 18px; }
  .tp-body { padding: 16px 18px; }
  .tp-footer { padding: 14px 18px; }
  .tp-header-title { font-size: 1rem; }
  .tp-text-field { min-height: 180px; }
}
/* ===== section-copy.css ===== */
/* section-copy.css — Seksjonskopier-panel for journalnotater
   Viser seksjoner (ANAMNESE:, FUNN:, etc.) med individuelle kopier-knapper
   og multi-select for å kopiere flere seksjoner samlet.
*/

/* =============================================================================
   CONTAINER: Overlay over responseBox
   ============================================================================= */
#sectionCopyPanel {
    display: none;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-light, #e0e0e0);
    border-radius: var(--main-border-radius, 8px);
    background: var(--bg-light, #fafafa);
    overflow-y: auto;
    min-height: 200px;
    flex: 1;
    font-size: 0.95rem;
    position: relative;
}

#sectionCopyPanel.is-active {
    display: flex;
}

/* Skjul textarea når panelet er aktivt */
.response-section.section-copy-active #responseBox {
    display: none;
}

/* =============================================================================
   TOOLBAR: Øverst i panelet
   ============================================================================= */
.sc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--bg-white, #fff);
    border-bottom: 1px solid var(--border-light, #e0e0e0);
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 36px;
}

.sc-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-toolbar-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #757575);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    user-select: none;
}

.sc-toolbar-count {
    font-size: 0.72rem;
    color: var(--text-muted, #999);
    font-weight: 400;
}

.sc-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Kopier valgte-knapp — vises kun når ≥1 er valgt */
.sc-copy-selected-btn {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--primary, #1976d2);
    border-radius: 6px;
    background: rgba(25, 118, 210, 0.08);
    color: var(--primary, #1976d2);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.sc-copy-selected-btn:hover {
    background: rgba(25, 118, 210, 0.15);
}

.sc-copy-selected-btn.is-visible {
    display: inline-flex;
}

.sc-copy-selected-btn .material-icons {
    font-size: 15px;
}

/* Feedback etter multi-kopiering */
.sc-copy-selected-btn.is-copied {
    background: rgba(76, 175, 80, 0.12);
    border-color: #4caf50;
    color: #4caf50;
}

/* Tilbake til redigering-knapp */
.sc-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border: 1px solid var(--border-light, #e0e0e0);
    border-radius: 6px;
    background: var(--bg-white, #fff);
    color: var(--text-muted, #757575);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}

.sc-edit-btn:hover {
    background: var(--bg-light, #f5f5f5);
    color: var(--text-primary, #333);
}

.sc-edit-btn .material-icons {
    font-size: 15px;
}

/* =============================================================================
   SEKSJON-BLOKK
   ============================================================================= */
.sc-section {
    position: relative;
    padding: 10px 14px 10px 38px;
    border-bottom: 1px solid var(--border-light, #e0e0e0);
    background: var(--bg-white, #fff);
    transition: background 0.15s;
    cursor: default;
}

.sc-section:last-child {
    border-bottom: none;
}

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

.sc-section.is-selected {
    background: rgba(25, 118, 210, 0.04);
    border-left: 3px solid var(--primary, #1976d2);
    padding-left: 35px;
}

/* Checkbox */
.sc-checkbox {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 18px;
    height: 18px;
    border: 2px solid #c0c0c0;
    border-radius: 4px;
    background: var(--bg-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.sc-checkbox:hover {
    border-color: var(--primary, #1976d2);
}

.sc-checkbox.is-checked {
    background: var(--primary, #1976d2);
    border-color: var(--primary, #1976d2);
}

.sc-checkbox.is-checked::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Seksjon-header (overskrift + kopier-ikon) */
.sc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.sc-section-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary, #212121);
    letter-spacing: 0.02em;
}

/* Kopier denne seksjonen-ikon */
.sc-copy-one-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #aaa);
    cursor: pointer;
    transition: all 0.15s;
    opacity: 0;
    flex-shrink: 0;
}

.sc-section:hover .sc-copy-one-btn {
    opacity: 1;
}

.sc-copy-one-btn:hover {
    background: rgba(25, 118, 210, 0.1);
    color: var(--primary, #1976d2);
}

.sc-copy-one-btn .material-icons {
    font-size: 17px;
}

/* Feedback etter kopiering */
.sc-copy-one-btn.is-copied {
    opacity: 1;
    color: #4caf50;
}

/* Seksjon body-tekst */
.sc-section-body {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary, #555);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* =============================================================================
   TOGGLE-KNAPP (i action-bar, ved siden av Kopier)
   ============================================================================= */
#sectionViewBtn {
    display: none;
}

#sectionViewBtn.is-visible {
    display: inline-flex;
}

#sectionViewBtn.is-active {
    background: rgba(25, 118, 210, 0.1);
    border-color: var(--primary, #1976d2);
    color: var(--primary, #1976d2);
}

/* =============================================================================
   RESPONSIV (mobil)
   ============================================================================= */
@media (max-width: 768px) {
    .sc-section {
        padding: 8px 10px 8px 34px;
    }

    .sc-checkbox {
        left: 8px;
        width: 16px;
        height: 16px;
    }

    .sc-copy-one-btn {
        opacity: 1; /* Alltid synlig på mobil */
    }

    .sc-toolbar {
        padding: 5px 8px;
    }
}
/* ===== auth-csp.css ===== */
/* auth-csp.css — Stiler eid av auth-service.js, flyttet fra inline
   Prefix: auth-
   Inneholder:
     1. Profil-modal stiler (fra HTML inline styles)
     2. Login-overlay stiler (fra <style> blokk i getLoginHTML())
     3. Utility-klasser for auth-service
*/

/* =============================================================================
   UTILITY
   ============================================================================= */
.auth-fade-out {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

/* Skjuler login-overlay visuelt, men IKKE med display:none.
   Chrome password manager ignorerer display:none-elementer.
   visibility:hidden + height:0 skjuler for brukeren mens Chrome fortsatt ser <form>. */
.al-overlay-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  position: fixed !important;
}
.auth-msg-error {
  display: block;
  background: #fef2f2;
  color: #dc2626;
}
.auth-msg-success {
  display: block;
  background: #f0fdf4;
  color: #166534;
}
.auth-qr-img {
  border-radius: 8px;
}

/* =============================================================================
   PROFIL-MODAL (auth-)
   Fra inline styles i index-beta44.html
   ============================================================================= */
.auth-modal-content {
  max-width: 480px;
  margin: 5vh auto;
  border-radius: 14px;
  overflow: hidden;
}
.auth-modal-header {
  background: linear-gradient(135deg, #1e3a5f, #2563eb);
  color: #fff;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.auth-modal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}
.auth-modal-close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 6px;
  display: flex;
}
.auth-modal-body {
  padding: 1.5rem;
}
.auth-modal-msg {
  display: none;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}
.auth-label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
  font-size: 0.85rem;
  color: #334155;
}
.auth-required {
  color: #dc2626;
}
.auth-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.95rem;
  margin-bottom: 1rem;
  box-sizing: border-box;
}
.auth-input-last {
  margin-bottom: 0;
}
.auth-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.auth-col-narrow {
  flex: 0 0 100px;
}
.auth-col-wide {
  flex: 1;
}
.auth-save-btn {
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.auth-save-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* =============================================================================
   LOGIN OVERLAY (al-)
   Fra <style> blokk i getLoginHTML()
   ============================================================================= */
    .al-overlay {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        z-index: 999999;
        display: flex; align-items: center; justify-content: center;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
        overflow-y: auto; padding: 1rem;
    }
    .al-overlay * { box-sizing: border-box; }

    .al-modal {
        width: 100%; max-width: 480px;
        background: var(--bg-white);
        border-radius: 16px;
        box-shadow: 0 25px 80px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.04);
        overflow: hidden;
        animation: alSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        transition: max-width 0.3s ease;
    }
    .al-modal.al-modal-wide { max-width: 560px; }
    @keyframes alSlideUp {
        from { opacity: 0; transform: translateY(24px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .al-modal-top {
        background: var(--bg-white);
        padding: 1.75rem 2rem 1.25rem; text-align: center;
        position: relative;
        border-bottom: 1px solid #e2e8f0;
    }
    .al-modal-top::after {
        content: ''; position: absolute;
        bottom: -1px; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, #2563eb, #60a5fa);
    }

    .al-brand-logo {
        width: 56px; height: 56px; border-radius: 14px;
        margin: 0 auto 0.75rem; display: block;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    .al-brand-title { color: #1e3a5f; font-size: 1.25rem; font-weight: 600; margin: 0 0 0.2rem; }
    .al-brand-sub { color: #64748b; font-size: 0.85rem; margin: 0; }

    .al-stepper {
        display: flex; align-items: center; justify-content: center;
        gap: 0; margin-top: 1rem;
    }
    .al-dot {
        width: 10px; height: 10px; border-radius: 50%;
        background: #d1d5db; border: 2px solid #d1d5db;
        transition: all 0.3s ease;
    }
    .al-dot.on { background: #2563eb; border-color: #2563eb; box-shadow: 0 0 8px rgba(37,99,235,0.3); }
    .al-dot.done { background: #93c5fd; border-color: #93c5fd; }
    .al-dot-line { width: 24px; height: 2px; background: #d1d5db; }

    .al-tabs {
        display: flex; gap: 0; margin: 1.25rem 1.75rem 0;
        background: #f1f5f9; border-radius: 10px; padding: 3px;
    }
    .al-tab {
        flex: 1; padding: 0.6rem 1rem; background: transparent; border: none;
        color: #64748b; font-size: 0.88rem; font-weight: 500;
        cursor: pointer; border-radius: 8px; transition: all 0.2s ease; font-family: inherit;
    }
    .al-tab:hover { color: #334155; }
    .al-tab.active { background: #fff; color: #1e293b; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

    /* --- Mobil: Skjul registrering, vis info --- */
    .al-mobile-register-info { display: none; }

    @media (max-width: 768px) {
        #alTabRegister { display: none; }
        .al-tabs { border-radius: 8px; }
        #alTabLogin {
            border-radius: 8px;
            background: var(--bg-white);
            color: var(--text-primary);
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            cursor: default;
        }
        .al-mobile-register-info {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-top: 1rem;
            padding: 12px 14px;
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: 10px;
            font-size: 0.82rem;
            line-height: 1.45;
            color: #1e40af;
        }
        .al-mobile-register-info .material-icons {
            font-size: 20px;
            flex-shrink: 0;
            margin-top: 1px;
            color: #3b82f6;
        }
    }

    .al-body { padding: 1.25rem 1.75rem 1.5rem; }
    .al-section { display: none; }
    .al-section.active { display: block; animation: alFadeIn 0.25s ease; }
    @keyframes alFadeIn { from { opacity: 0; } to { opacity: 1; } }

    .al-section-icon {
        width: 52px; height: 52px; border-radius: 14px; background: #eff6ff;
        display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
    }
    .al-section-icon .material-icons { font-size: 1.5rem; }
    .al-section-title { font-size: 1.2rem; font-weight: 600; color: #1e293b; text-align: center; margin: 0 0 0.4rem; }
    .al-section-desc {
        font-size: 0.9rem; color: #64748b; text-align: center; line-height: 1.5;
        margin: 0 auto 1.25rem; max-width: 360px;
    }

    .al-field { margin-bottom: 1rem; }
    .al-field label { display: block; color: #475569; font-size: 0.82rem; font-weight: 500; margin-bottom: 0.35rem; }
    .al-req { color: #ef4444; }
    .al-field input {
        width: 100%; padding: 0.7rem 0.9rem; background: #fff;
        border: 1px solid #d1d5db; border-radius: 8px; color: #1e293b;
        font-size: 0.92rem; font-family: inherit; transition: all 0.2s ease; outline: none;
    }
    .al-field input::placeholder { color: #9ca3af; }
    .al-field input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
    .al-field small { display: block; color: #94a3b8; font-size: 0.78rem; margin-top: 0.3rem; }
    .al-field-row { display: flex; gap: 0.75rem; }

    .al-btn {
        width: 100%; padding: 0.75rem 1.5rem;
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        border: none; border-radius: 10px; color: #fff;
        font-size: 0.95rem; font-weight: 600; cursor: pointer;
        transition: all 0.2s ease; font-family: inherit; margin-top: 0.5rem;
        display: flex; align-items: center; justify-content: center;
    }
    .al-btn:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af); box-shadow: 0 4px 16px rgba(37,99,235,0.3); transform: translateY(-1px); }
    .al-btn:active { transform: translateY(0); }
    .al-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

    .al-btn-secondary {
        width: 100%; padding: 0.65rem 1rem; background: #fff; border: 1px solid #d1d5db;
        border-radius: 10px; color: #475569; font-size: 0.88rem; font-weight: 500;
        cursor: pointer; transition: all 0.2s ease; font-family: inherit; margin-top: 0.5rem;
    }
    .al-btn-secondary:hover { background: #f8fafc; border-color: #9ca3af; }

    .al-link-btn { background: transparent; border: none; color: #6b7280; cursor: pointer; font-size: 0.85rem; font-family: inherit; padding: 0.5rem; }
    .al-link-btn:hover { color: #2563eb; }

    .al-error, .al-success { padding: 0.65rem 1rem; border-radius: 8px; font-size: 0.85rem; margin-bottom: 1rem; display: none; }
    .al-error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
    .al-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
    .al-error.visible, .al-success.visible { display: block; }
    .al-error.visible { animation: alShake 0.4s ease; }
    @keyframes alShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

    .al-totp-input {
        width: 200px !important; text-align: center; font-size: 1.8rem !important; font-weight: 700;
        letter-spacing: 8px; padding: 0.75rem 1rem !important; margin: 0 auto 1rem; display: block !important;
    }
    .al-qr-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem; display: inline-block; margin: 0.75rem 0; }
    .al-secret {
        font-family: 'Courier New', monospace; font-size: 0.95rem; color: #2563eb; letter-spacing: 2px;
        background: #eff6ff; padding: 0.5rem 1rem; border-radius: 8px; display: inline-block;
        margin: 0.5rem 0 1rem; cursor: pointer; border: 1px solid #bfdbfe;
    }
    .al-secret:hover { background: #dbeafe; }

    .al-center { text-align: center; }
    .al-center p { color: #64748b; font-size: 0.9rem; margin-bottom: 1rem; }
    .al-center h3 { color: #1e293b; font-size: 1.05rem; margin-bottom: 0.4rem; }
    .al-dl-link { color: #2563eb; text-decoration: none; font-size: 0.85rem; }
    .al-dl-link:hover { text-decoration: underline; }

    .al-footer { text-align: center; padding: 0.75rem 1.75rem 1.25rem; border-top: 1px solid #f1f5f9; }
    .al-footer p { color: #94a3b8; font-size: 0.75rem; margin: 0; }

    .al-spinner {
        display: inline-block; width: 18px; height: 18px;
        border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
        border-radius: 50%; animation: alSpin 0.6s linear infinite;
        vertical-align: middle; margin-right: 6px;
    }
    @keyframes alSpin { to { transform: rotate(360deg); } }

    .al-auth-info-box {
        background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px;
        padding: 1.25rem; text-align: center; margin-bottom: 1rem;
    }
    .al-auth-info-box .material-icons { font-size: 2.5rem; color: #2563eb; margin-bottom: 0.5rem; display: block; }
    .al-auth-info-box p { color: #334155; font-size: 0.88rem; line-height: 1.5; margin: 0; }
    .al-auth-qr-label { font-size: 0.82rem; color: #64748b; margin: 1rem 0 0.5rem; text-align: center; }
    .al-auth-qr-wrap { display: flex; justify-content: center; margin-bottom: 0.75rem; }

    .al-info-cards { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
    .al-info-card {
        display: flex; align-items: flex-start; gap: 0.875rem;
        background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.875rem 1rem; text-align: left;
    }
    .al-info-card .material-icons { font-size: 1.3rem; color: #2563eb; flex-shrink: 0; margin-top: 2px; }
    .al-info-card strong { display: block; color: #1e293b; font-size: 0.88rem; margin-bottom: 0.15rem; }
    .al-info-card p { margin: 0; font-size: 0.82rem; color: #64748b; line-height: 1.4; }

    .al-step-bar { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; color: #64748b; font-size: 0.8rem; }
    .al-step-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; }
    .al-step-dot.on { background: #2563eb; box-shadow: 0 0 6px rgba(37,99,235,0.3); }

    @media (max-width: 500px) {
        .al-modal { max-width: 100%; border-radius: 12px; margin: 0.5rem; }
        .al-modal-top { padding: 1.5rem 1.25rem 1rem; }
        .al-body { padding: 1rem 1.25rem 1.25rem; }
        .al-tabs { margin: 1rem 1.25rem 0; }
        .al-brand-title { font-size: 1.1rem; }
        .al-field-row { flex-direction: column; gap: 0; }
        .al-field-half { flex: none; width: 100%; }
    }

/* auth-sms.css — Tilleggsstiler for SMS-verifisering ved registrering */

/* DPA checkbox */
.al-field-checkbox {
    margin: 16px 0 8px;
}
.al-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.al-checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    flex-shrink: 0;
}
.al-checkbox-label .al-link {
    color: #2563eb;
    text-decoration: underline;
}
.al-checkbox-label .al-link:hover {
    color: #1d4ed8;
}

/* SMS verifisering */
.al-sms-resend {
    margin-top: 16px;
    text-align: center;
}
.al-section-desc-small {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0 0 4px;
}

/* 4-sifret SMS-kode input (litt bredere bokstaver) */
#alSmsCode {
    letter-spacing: 0.3em;
    font-size: 1.5rem;
    text-align: center;
    max-width: 160px;
    margin: 0 auto;
}

    /* auth1- prefix classes — erstatter inline styles i auth-service.js */

/* Modal */
.auth1-modal-narrow { max-width: 500px; }

/* Icon colors */
.auth1-icon-blue { color: #1976d2; }
.auth1-icon-blue2 { color: #2563eb; }
.auth1-icon-green { color: #2e7d32; }

/* Field layout */
.auth1-field-postcode { flex: 0 0 100px; }
.auth1-field-flex { flex: 1; }

/* Two-column field layout */
.al-field-half { flex: 1; min-width: 0; }

/* Button icons */
.auth1-btn-icon { font-size: 18px; vertical-align: middle; margin-right: 6px; }

/* Divider */
.auth1-divider { border: none; border-top: 1px solid #e2e8f0; margin: 0.75rem 0 1rem; }

/* Details/summary */
.auth1-details { margin: 0.75rem 0; }
.auth1-summary { color: #64748b; cursor: pointer; font-size: 0.85rem; }

/* Step bar */
.auth1-step-bar-mt { margin-top: 1.25rem; }

/* QR fallback */
.auth1-qr-fallback { font-size: 0.85rem; color: #475569; padding: 1rem; }
.auth1-link-blue { color: #2563eb; }

/* =============================================================================
   COUNTRY CODE DROPDOWN (al-country-)
   ============================================================================= */
.al-phone-row {
    display: flex;
    gap: 0;
    align-items: stretch;
    position: relative;
}
.al-country-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 0.7rem;
    background: var(--bg-light);
    border: 1px solid #d1d5db;
    border-right: none;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--text-primary);
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    min-height: 42px;
}
.al-country-btn:hover {
    background: var(--bg-hover);
}
.al-country-btn:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.al-country-flag {
    font-size: 1.2rem;
    line-height: 1;
}
.al-country-code {
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.al-country-arrow {
    font-size: 18px !important;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.al-phone-input {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    background: var(--bg-white);
    border: 1px solid #d1d5db;
    border-radius: 0 8px 8px 0;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.al-phone-input::placeholder { color: #9ca3af; }
.al-phone-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.al-country-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background: var(--bg-white);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow: hidden;
    margin-top: 4px;
    min-width: 200px;
    animation: alFadeIn 0.15s ease;
}
.al-country-dropdown.al-country-dropdown-open {
    display: block;
}
.al-country-option {
    padding: 0.65rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #334155;
    transition: background 0.12s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.al-country-option:hover {
    background: #eff6ff;
    color: #1e40af;
}
.al-country-option:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
}

.al-country-select {
    position: relative;
    flex-shrink: 0;
}
.al-country-option .al-country-flag {
    font-size: 1.3rem;
}
.al-country-name {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}
.al-country-dial {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: auto;
}

/* TWO-COLUMN PASSWORD ROW — handled by .al-field-half + .al-field-row mobile override above */

/* =============================================================================
   FORGOT PASSWORD (al-forgot-)
   ============================================================================= */
.al-forgot-link-wrap {
    text-align: center;
    margin-top: 0.5rem;
}
.al-forgot-logo-wrap {
    text-align: center;
    margin-bottom: 0.75rem;
}
.al-forgot-logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.al-forgot-2fa-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin-top: 1.25rem;
}
.al-forgot-2fa-icon {
    color: #d97706;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.al-forgot-2fa-notice p {
    margin: 0;
    font-size: 0.82rem;
    color: #78350f;
    line-height: 1.5;
}
.al-forgot-2fa-notice strong {
    color: #451a03;
}
.al-forgot-mail-link {
    color: #2563eb;
    text-decoration: underline;
}
.al-forgot-mail-link:hover {
    color: #1d4ed8;
}
.al-forgot-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: 1rem;
}
.al-forgot-back-icon {
    font-size: 18px !important;
    vertical-align: middle;
}
/* Twemoji flagg-ikoner i interpreter */
.interpreter-lang-flag img.emoji,
.interpreter-panel-flag img.emoji {
    width: 1.4em;
    height: 1.4em;
    vertical-align: -0.2em;
}

/* ==========================================================================
   HJELP-MODAL — Authenticator wizard
   Alle klasser prefixet med hjelp-
   ========================================================================== */

/* --- Overlay --- */
.hjelp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.hjelp-overlay.hjelp-overlay--open {
    display: flex;
}

/* --- Modal --- */
.hjelp-modal {
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem 2rem 1.25rem;
    position: relative;
    animation: hjelp-slide-up 0.25s ease-out;
}
@keyframes hjelp-slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Lukkeknapp --- */
.hjelp-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.hjelp-close:hover {
    color: #334155;
    background: var(--bg-hover);
}

/* --- Steg-indikator --- */
.hjelp-steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
}
.hjelp-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s;
    flex-shrink: 0;
}
.hjelp-step-dot--active {
    background: #2563eb;
    color: #fff;
}
.hjelp-step-dot--done {
    background: #16a34a;
    color: #fff;
}
.hjelp-step-line {
    height: 2px;
    width: 40px;
    background: #e2e8f0;
    flex-shrink: 0;
}

/* --- Sider --- */
.hjelp-page {
    display: none;
}
.hjelp-page--active {
    display: block;
}

/* --- Side-ikon --- */
.hjelp-page-icon {
    text-align: center;
    margin-bottom: 0.5rem;
}
.hjelp-page-icon .material-icons {
    font-size: 2.5rem;
    color: #2563eb;
}

/* --- Tittel og tekst --- */
.hjelp-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}
.hjelp-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 0.75rem;
    text-align: center;
}

/* --- QR-wrap --- */
.hjelp-qr-wrap {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

/* --- App-lenker --- */
.hjelp-app-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0 0.5rem;
}
.hjelp-app-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #334155;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}
.hjelp-app-link:hover {
    background: var(--bg-hover);
    border-color: #cbd5e1;
}
.hjelp-app-link .material-icons {
    font-size: 1.25rem;
    color: #2563eb;
}

/* --- Screenshot --- */
.hjelp-screenshot-wrap {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}
.hjelp-screenshot {
    max-width: 260px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* --- Kode-eksempel (steg 3) --- */
.hjelp-code-example {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 1rem 0;
}
.hjelp-code-digit {
    width: 40px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    border: 2px solid #bfdbfe;
    border-radius: 8px;
    font-family: 'Roboto Mono', monospace;
}

/* --- Navigasjon --- */
.hjelp-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    gap: 0.75rem;
}
.hjelp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.hjelp-btn:active {
    transform: scale(0.97);
}
.hjelp-btn .material-icons {
    font-size: 1.1rem;
}
.hjelp-btn--next {
    background: #2563eb;
    color: #fff;
    margin-left: auto;
}
.hjelp-btn--next:hover {
    background: #1d4ed8;
}
.hjelp-btn--prev {
    background: var(--bg-hover);
    color: var(--text-secondary);
}
.hjelp-btn--prev:hover {
    background: #e2e8f0;
}
.hjelp-btn--finish {
    background: #16a34a;
}
.hjelp-btn--finish:hover {
    background: #15803d;
}

/* --- Support-stripe --- */
.hjelp-support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.hjelp-support-icon {
    font-size: 1rem;
    color: var(--text-muted);
}
.hjelp-support-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}
.hjelp-support-link:hover {
    text-decoration: underline;
}

/* --- Trigger-knapp på TOTP-setup-siden --- */
.hjelp-trigger-wrap {
    text-align: center;
    margin-top: 1rem;
}
.hjelp-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: #2563eb;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    transition: background 0.15s;
}
.hjelp-trigger-btn:hover {
    background: #eff6ff;
}
.hjelp-trigger-icon {
    font-size: 1.2rem;
}

/* --- Responsiv --- */
@media (max-width: 520px) {
    .hjelp-modal {
        padding: 1.5rem 1.25rem 1rem;
        border-radius: 12px;
    }
    .hjelp-screenshot {
        max-width: 200px;
    }
    .hjelp-code-digit {
        width: 34px;
        height: 42px;
        font-size: 1.2rem;
    }
    .hjelp-step-line {
        width: 24px;
    }
}
/* ===== ui-csp.css ===== */
/* ui-csp.css — Stiler eid av ui-handler.js
   Prefix: ui-
*/

.ui-hero-gradient {
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 50%, #2196F3 100%) !important;
}
.ui-option-note { margin-top: 0.75rem; font-size: 0.8rem; }
.ui-pin-hint { margin-top: 12px; }

/* =============================================================================
   RECORD BUTTON STATE STYLES — Desktop primærknapp
   Klasser satt av updateRecordButtonAppearance()
   ============================================================================= */

/* idle: "Start ny konsultasjon" — teal primary, inviterende */
.button.record.rec-state-idle {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  border-color: #0d9488;
  color: #fff;
  box-shadow: 0 2px 8px rgba(13,148,136,0.2);
}
.button.record.rec-state-idle:hover:not(:disabled) {
  background: linear-gradient(135deg, #0f766e, #115e59);
  box-shadow: 0 4px 12px rgba(13,148,136,0.3);
}

/* finished: "Start neste" — teal primary med subtle avslutnings-indikator */
.button.record.rec-state-finished {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  border-color: #0d9488;
  color: #fff;
  box-shadow: 0 2px 8px rgba(13,148,136,0.2);
}
.button.record.rec-state-finished:hover:not(:disabled) {
  background: linear-gradient(135deg, #0f766e, #115e59);
  box-shadow: 0 4px 12px rgba(13,148,136,0.3);
}

/* recording: pulsing red */
.button.record.rec-state-recording {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border-color: #dc2626;
  color: #fff;
  animation: rec-btn-pulse 2s ease-in-out infinite;
}
@keyframes rec-btn-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(220,38,38,0.2); }
  50% { box-shadow: 0 4px 20px rgba(220,38,38,0.4); }
}

/* paused: green resume */
.button.record.rec-state-paused {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-color: #16a34a;
  color: #fff;
}
.button.record.rec-state-paused:hover:not(:disabled) {
  background: linear-gradient(135deg, #15803d, #166534);
}

/* processing: muted, disabled-feel */
.button.record.rec-state-processing {
  background: var(--bg-hover);
  border-color: var(--border-light);
  color: var(--text-muted);
}
/* ===== interpreter-csp.css ===== */
/* interpreter-csp.css — Stiler eid av interpreter-manager.js, flyttet fra inline i HTML
   Prefix: interpreter-
*/

.interpreter-welcome-icon {
  font-size: 64px;
  opacity: 0.5;
  margin-bottom: 16px;
}
.interpreter-welcome-title {
  font-size: 1.1em;
  font-weight: 500;
}
.interpreter-welcome-subtitle {
  font-size: 0.9em;
  opacity: 0.7;
  margin-top: 12px;
}
/* ===== ocr-csp.css ===== */
/* ocr-csp.css — Stiler eid av camera-ocr.js, flyttet fra inline i HTML
   Prefix: ocr-
*/

.ocr-preview-hint {
  font-size: 12px;
  margin-top: 8px;
  opacity: 0.7;
}
/* ===== ud-csp.css ===== */
/* ud-csp.css — Stiler eid av usage-dashboard.js
   Prefix: ud-
*/

.ud-wallet-icon { width: 28px !important; height: 28px !important; object-fit: contain; }
.ud-modal-icon { vertical-align: middle; margin-right: 6px; color: #3b82f6; }

.ud-wallet-badge {
  position: absolute; top: -4px; right: -6px;
  color: #fff; font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 8px; line-height: 1.3;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ud-wallet-badge-danger {
  background: #ef4444;
}
.ud-wallet-badge-warn {
  background: #f59e0b;
}
.ud-wallet-btn-relative { position: relative; }

.ud-period-footer { text-align: center; padding: 12px 0 4px; font-size: 0.75rem; color: var(--text-muted); }

.ud-cell-details { max-width: 180px; font-size: 0.72rem; color: var(--text-muted); }
.ud-cell-debit { color: var(--text-secondary); font-weight: 500; }
.ud-cell-credit { color: #2e7d32; font-weight: 500; }
.ud-cell-muted { color: var(--text-muted); }

.ud-payments-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--bg-light); border-bottom: 1px solid var(--border-light);
}
.ud-payments-total { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); }
.ud-payments-period { font-size: 0.75rem; color: var(--text-muted); margin-left: 10px; }
.ud-icon-small { font-size: 16px; }

.ud-tfoot-row { background: var(--bg-light); font-weight: 500; }
.ud-tfoot-label { text-align: right; color: var(--text-primary); }
.ud-tfoot-total { color: #2e7d32; font-weight: 600; }
/* ===== settings-csp.css ===== */
/* settings-csp.css — Stiler eid av settings-service.js
   Prefix: settings- (+ eksisterende stab/sg/sfield/mic-*)
   Flyttet fra <style>-blokk og inline style= i settings-service.js
*/

/* --- Layout classes replacing inline styles --- */
.settings-modal-content { max-width: 680px; }
.settings-modal-title { display: flex; align-items: center; gap: 8px; }
.settings-icon-primary { color: var(--primary); }
.settings-tabs-container {
  display: flex; gap: 4px; padding: 8px 16px 0;
  border-bottom: 1px solid var(--border-light);
}
.settings-content { padding: 20px 24px; min-height: 340px; }
.settings-shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* --- Tabs (stab) --- */
.stab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 18px; border: none; background: none;
  color: var(--text-muted); font-family: inherit; font-size: 0.85rem;
  font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent;
  transition: all 0.15s; border-radius: 0;
}
.stab:hover { color: var(--text-primary); }
.stab.active { color: var(--primary); border-bottom-color: var(--primary); }
.stab .material-icons { font-size: 18px; }

/* --- Setting groups --- */
.sg { margin-bottom: 20px; }
.sg-title {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.sg-title .material-icons { font-size: 15px; color: var(--primary); }

/* --- Setting fields --- */
.sfield { margin-bottom: 14px; }
.sfield label {
  display: block; font-size: 0.82rem; font-weight: 500;
  color: var(--text-secondary); margin-bottom: 5px;
}
.sfield select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-light);
  border-radius: var(--main-border-radius); background: var(--bg-white);
  color: var(--text-primary); font-family: inherit; font-size: 0.88rem;
  transition: border-color 0.15s; appearance: auto;
}
.sfield select:focus {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.12);
}
.sfield-hint {
  font-size: 0.72rem; color: var(--text-muted); margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
}
.sfield-hint .material-icons { font-size: 13px; }

/* --- Microphone test --- */
.mic-test-area {
  background: var(--bg-light); border: 1px solid var(--border-light);
  border-radius: 10px; padding: 16px; text-align: center;
}
.mic-test-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border: none; border-radius: 24px;
  font-family: inherit; font-size: 0.88rem; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.mic-test-btn.idle {
  background: var(--primary); color: #fff;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}
.mic-test-btn.idle:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);
}
.mic-test-btn.recording {
  background: var(--accent-error); color: #fff;
  animation: mic-pulse 1.5s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(211, 47, 47, 0); }
}
.mic-test-btn .material-icons { font-size: 20px; }

.mic-level-bar {
  height: 6px; background: var(--border-light); border-radius: 3px;
  margin-top: 14px; overflow: hidden;
}
.mic-level-fill {
  height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-success), var(--accent-warning), var(--accent-error));
  transition: width 0.08s ease-out;
}
.mic-level-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; }
.mic-device-name { font-size: 0.75rem; color: var(--text-muted); margin-top: 10px; font-style: italic; }

/* --- Tema-tab (lys / mørk) --- */
.theme-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
.theme-option {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 2px solid var(--border-light);
  border-radius: var(--main-border-radius);
  background: var(--bg-white);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.theme-option:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-soft);
}
.theme-option.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.18);
}
.theme-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.theme-option-preview {
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
}
.theme-option-preview-bar {
  height: 18px;
  flex-shrink: 0;
}
.theme-option-preview-body {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.theme-option-preview-line {
  height: 8px;
  border-radius: 4px;
  width: 80%;
}
.theme-option-preview-line.short { width: 50%; }

.theme-option-preview-light { background: #f4f6f8; }
.theme-option-preview-light .theme-option-preview-bar { background: #ffffff; border-bottom: 1px solid #e0e0e0; }
.theme-option-preview-light .theme-option-preview-line { background: #c4c8cc; }

.theme-option-preview-dark { background: #0d1117; }
.theme-option-preview-dark .theme-option-preview-bar { background: #1c2128; border-bottom: 1px solid #2d333b; }
.theme-option-preview-dark .theme-option-preview-line { background: #424a52; }

.theme-option-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.theme-option-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}
.theme-option-title .material-icons { font-size: 18px; color: var(--primary); }
.theme-option-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

@media (max-width: 540px) {
  .theme-options { grid-template-columns: 1fr; }
}
/* ===== video-csp.css ===== */
/* video-csp.css — Stiler eid av video-ui.js
   Prefix: video-
   Flyttet fra <style>-blokk og inline style= i video-ui.js
*/

/* =============================================================================
   PROCESSING VIEW (fra <style> blokk)
   ============================================================================= */
.video-processing-view {
  display: flex; align-items: center; justify-content: center;
  min-height: 400px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.video-processing-card { text-align: center; padding: 48px; max-width: 400px; }
.video-processing-animation { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }
.video-processing-circle {
  width: 16px; height: 16px; background: #4CAF50; border-radius: 50%;
  animation: video-pulse 1.4s ease-in-out infinite;
}
.video-processing-circle:nth-child(1) { animation-delay: 0s; }
.video-processing-circle:nth-child(2) { animation-delay: 0.2s; }
.video-processing-circle:nth-child(3) { animation-delay: 0.4s; }
@keyframes video-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}
.video-processing-icon { font-size: 64px; margin-bottom: 24px; animation: video-float 2s ease-in-out infinite; }
@keyframes video-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.video-processing-title { color: #ffffff; font-size: 28px; font-weight: 600; margin: 0 0 12px 0; }
.video-processing-subtitle { color: #a0a0a0; font-size: 16px; margin: 0 0 32px 0; line-height: 1.5; }
.video-processing-status {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(76, 175, 80, 0.15); border: 1px solid rgba(76, 175, 80, 0.3);
  padding: 12px 24px; border-radius: 30px; color: #4CAF50; font-size: 14px; font-weight: 500;
}
.video-processing-dot {
  width: 8px; height: 8px; background: #4CAF50; border-radius: 50%;
  animation: video-blink 1s ease-in-out infinite;
}
@keyframes video-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* =============================================================================
   TOAST TYPE COLORS
   ============================================================================= */
.video-toast-success { color: #10b981; }
.video-toast-error { color: #ef4444; }
.video-toast-warning { color: #f59e0b; }
.video-toast-info { color: #3b82f6; }

/* =============================================================================
   2FA SETUP VIEWS
   ============================================================================= */
.video-2fa-wrapper { max-width: 600px; margin: 0 auto; }
.video-2fa-wrapper-narrow { max-width: 500px; }
.video-2fa-full { max-width: none; }
.video-2fa-center { text-align: center; }
.video-2fa-emoji { font-size: 48px; display: block; margin-bottom: 16px; }
.video-2fa-infobox {
  background: #f0f7ff; border: 1px solid #c5dff8; border-radius: 12px;
  padding: 20px; margin-bottom: 24px;
}
.video-2fa-infobox-title { margin: 0 0 12px 0; color: #1565c0; font-size: 16px; }
.video-2fa-infobox-text { margin: 0 0 12px 0; color: #333; font-size: 14px; line-height: 1.6; }
.video-2fa-infobox-text-last { margin-bottom: 0; }
.video-2fa-qr-section { text-align: center; margin: 24px 0; }
.video-2fa-step-label { margin-bottom: 16px; font-weight: 600; color: #333; }
.video-2fa-qr-container {
  display: inline-block; padding: 16px; background: white;
  border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.video-2fa-qr-hint { margin-top: 16px; font-size: 14px; color: #555; }
.video-2fa-qr-subhint { margin-top: 8px; font-size: 13px; color: #888; }
.video-2fa-link { color: #1976d2; }
.video-2fa-btn-full { width: 100%; }
.video-2fa-warnbox {
  background: #fff8e1; border: 1px solid #ffe082; border-radius: 8px;
  padding: 16px; margin-bottom: 24px;
}
.video-2fa-warnbox-text { margin: 0; font-size: 14px; color: #5d4037; }

/* =============================================================================
   TOTP CODE DISPLAY
   ============================================================================= */
.video-totp-hint { margin-top: 16px; font-size: 13px; color: #757575; }
.video-totp-code { background: #f5f5f5; padding: 4px 8px; border-radius: 4px; user-select: all; }

/* =============================================================================
   LICENSE ERROR
   ============================================================================= */
.video-license-error-title { margin-bottom: 16px; color: #c62828; }
.video-license-error-msg { color: #555; font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.video-license-help-box {
  background: #f5f5f5; border-radius: 12px; padding: 20px;
  text-align: left; margin-bottom: 24px;
}
.video-license-help-title { margin: 0 0 12px 0; color: #333; font-size: 15px; }
.video-license-help-list { margin: 0; padding-left: 20px; color: #555; font-size: 14px; line-height: 1.8; }

/* =============================================================================
   SUMMARY VIEW
   ============================================================================= */
.video-summary-wrapper { max-width: 700px; margin: 40px auto; }
.video-summary-textarea {
  width: 100%; height: 200px; padding: 16px;
  border: 2px solid #E0E0E0; border-radius: 10px;
  font-family: inherit; font-size: 14px; resize: vertical;
}
.video-summary-actions { display: flex; flex-direction: column; gap: 12px; }

/* =============================================================================
   MISC
   ============================================================================= */
.video-relative { position: relative; }
.video-settings-separator { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0; }

/* =============================================================================
   VIDEO SUBSCRIPTION - Header Badge (vsub-)
   ============================================================================= */

.vsub-header-badge {
    position: relative;
    background: none;
    border: none;
    color: inherit;
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    width: 40px;
    height: 40px;
}

.vsub-header-badge:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.vsub-header-badge.vsub-visible {
    display: flex;
}

.vsub-header-badge-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    background: #4CAF50;
    border-radius: 50%;
    border: 2px solid var(--primary, #1976d2);
    display: none;
}

.vsub-header-badge-dot.vsub-active {
    display: block;
}

/* =============================================================================
   VIDEO SUBSCRIPTION - Upsell / Subscribe View
   ============================================================================= */

.vsub-upsell-content {
    flex: 1;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-white);
    max-width: 520px;
}

.vsub-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.vsub-logo-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.vsub-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vsub-logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.vsub-logo-text-accent {
    color: var(--video-primary, #1976D2);
}

.vsub-heading {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.vsub-subheading {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 0 24px 0;
    line-height: 1.6;
}

/* Features liste — kompakt */
.vsub-features {
    margin: 0;
}

.vsub-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 15px;
    color: var(--text-secondary);
}

.vsub-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.vsub-feature-icon-blue { background: #E3F2FD; }
.vsub-feature-icon-green { background: #E8F5E9; }
.vsub-feature-icon-orange { background: #FFF3E0; }
.vsub-feature-icon-purple { background: #F3E5F5; }

/* =============================================================================
   CTA Panel — Høyre kolonne
   ============================================================================= */

.vsub-cta-panel {
    text-align: center;
    color: white;
    position: relative;
    z-index: 1;
    max-width: 360px;
    width: 100%;
}

.vsub-cta-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.vsub-cta-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 24px 0;
}

/* Priskort — i høyre kolonne */
.vsub-price-card {
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.vsub-trial-badge {
    display: inline-block;
    background: rgba(255,255,255,0.95);
    color: #2E7D32;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.vsub-price-amount {
    font-size: 40px;
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.2;
}

.vsub-price-period {
    font-size: 18px;
    font-weight: 400;
    opacity: 0.9;
}

.vsub-price-detail {
    font-size: 14px;
    opacity: 0.8;
    margin-top: 4px;
}

/* CTA-knapp — stor og tydelig */
.vsub-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px 32px;
    background: linear-gradient(135deg, #43A047, #2E7D32);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--video-font, 'Roboto', sans-serif);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.vsub-cta-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    background: linear-gradient(135deg, #4CAF50, #388E3C);
}

.vsub-cta-btn:active {
    transform: translateY(0);
}

.vsub-cta-btn .material-icons {
    font-size: 22px;
}

.vsub-cta-note {
    text-align: center;
    font-size: 13px;
    opacity: 0.8;
    margin-top: 12px;
    color: rgba(255,255,255,0.9);
}

/* =============================================================================
   VIDEO SUBSCRIPTION - Pending View
   ============================================================================= */

.vsub-pending-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 400px;
    background: var(--video-bg-gradient, linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%));
}

.vsub-pending-card {
    text-align: center;
    padding: 48px;
    max-width: 400px;
    background: var(--bg-white);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.vsub-pending-icon {
    font-size: 56px;
    margin-bottom: 20px;
    animation: video-float 2s ease-in-out infinite;
}

.vsub-pending-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.vsub-pending-text {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.vsub-pending-spinner {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.vsub-pending-dot {
    width: 12px;
    height: 12px;
    background: var(--video-primary, #1976D2);
    border-radius: 50%;
    animation: video-pulse 1.4s ease-in-out infinite;
}

.vsub-pending-dot:nth-child(2) { animation-delay: 0.2s; }
.vsub-pending-dot:nth-child(3) { animation-delay: 0.4s; }

/* =============================================================================
   VIDEO SUBSCRIPTION - Manage Card (i rooms dashboard)
   ============================================================================= */

.vsub-manage-card {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.vsub-manage-card[hidden] {
    display: none !important;
}

.vsub-manage-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.vsub-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.vsub-status-pill-active {
    background: #E8F5E9;
    color: #2E7D32;
}

.vsub-status-pill-trial {
    background: #E3F2FD;
    color: #1565C0;
}

.vsub-status-pill-canceled {
    background: #FFF3E0;
    color: #E65100;
}

.vsub-status-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.vsub-status-pill-active .vsub-status-pill-dot { background: #4CAF50; }
.vsub-status-pill-trial .vsub-status-pill-dot { background: #2196F3; }
.vsub-status-pill-canceled .vsub-status-pill-dot { background: #FF9800; }

.vsub-period-info {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.vsub-cancel-btn {
    background: none;
    border: 1px solid #E0E0E0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: var(--video-font, 'Roboto', sans-serif);
}

.vsub-cancel-btn:hover {
    background: #FFEBEE;
    border-color: #FFCDD2;
    color: #C62828;
}

/* Loading state for upsell button */
.vsub-loading {
    opacity: 0.7;
    pointer-events: none;
}

.vsub-cta-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Error message in subscription view */
.vsub-error {
    background: #FFEBEE;
    border: 1px solid #FFCDD2;
    border-radius: 10px;
    padding: 12px 16px;
    color: #C62828;
    font-size: 14px;
    margin-bottom: 16px;
    display: none;
}

.vsub-error.vsub-visible {
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .vsub-upsell-content {
        padding: 24px;
        max-width: none;
    }
    
    .vsub-cta-panel {
        max-width: none;
        padding: 0 16px;
    }

    .vsub-price-amount {
        font-size: 32px;
    }

    .vsub-manage-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .vsub-manage-info {
        flex-wrap: wrap;
    }
}
/* ===== shortcuts-csp.css ===== */
/* shortcuts-csp.css — Stiler eid av keyboard-shortcuts-service.js
   Flyttet fra dynamisk <style>-injeksjon i injectShortcutsCSS()
*/

.shortcuts-settings-intro {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem; padding: 1rem;
  background: linear-gradient(135deg, #e8f4fd 0%, #f0f7ff 100%);
  border-radius: 12px; border: 1px solid #cce4f7;
  flex-wrap: wrap; gap: 1rem;
}
.shortcuts-settings-info {
  display: flex; align-items: center; gap: 0.5rem;
  color: #1a73e8; font-size: 0.9rem;
}
.shortcuts-settings-info .material-icons { font-size: 20px; }

.shortcuts-settings-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.5rem;
}
@media (max-width: 900px) {
  .shortcuts-settings-grid { grid-template-columns: 1fr; }
}

.shortcuts-category {
  background: var(--settings-card-bg, #fff);
  border: 1px solid var(--settings-border, #e0e0e0);
  border-radius: 12px; overflow: hidden;
}
.shortcuts-category-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--settings-border, #e0e0e0);
  font-weight: 600; color: #334155;
}
.shortcuts-category-header .material-icons { font-size: 20px; color: #1976d2; }
.shortcuts-category-list { padding: 0.5rem; }

.shortcut-setting-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.875rem 1rem; border-radius: 8px; transition: background-color 0.15s;
}
.shortcut-setting-item:hover { background: #f8fafc; }
.shortcut-setting-info { flex: 1; min-width: 0; }
.shortcut-setting-name { font-weight: 500; color: #1e293b; margin-bottom: 0.125rem; }
.shortcut-setting-description { font-size: 0.8rem; color: #64748b; }

.shortcut-setting-keys { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.shortcut-key-btn {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.5rem 0.75rem; background: #f1f5f9;
  border: 1px solid #e2e8f0; border-radius: 8px;
  cursor: pointer; transition: all 0.2s; font-family: inherit;
  min-width: 120px; justify-content: center;
}
.shortcut-key-btn:hover { background: #e2e8f0; border-color: #cbd5e1; }
.shortcut-key-btn.capturing {
  background: #1976d2; border-color: #1565c0; color: white;
  animation: pulse-capture 1s ease-in-out infinite;
}
@keyframes pulse-capture {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(25, 118, 210, 0); }
}
.shortcut-key-btn kbd {
  display: inline-block; padding: 0.2rem 0.4rem;
  font-size: 0.75rem; font-family: ui-monospace, monospace;
  background: white; border: 1px solid #d1d5db;
  border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.shortcut-key-btn.capturing kbd {
  background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); color: white;
}
.capturing-text { font-size: 0.85rem; font-weight: 500; }

.shortcut-reset-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; border-radius: 6px;
  background: transparent; color: #94a3b8; cursor: pointer; transition: all 0.2s;
}
.shortcut-reset-btn:hover { background: #fee2e2; color: #dc2626; }
.shortcut-reset-btn .material-icons { font-size: 18px; }
/* ===== mobile.css ===== */
/* =============================================================================
   MOBILE.CSS — Fastlegenes KI-verktøy
   100% CSP-safe

   Redesigned: State-based action bar with refined medical-grade palette
   Layout:  Header → Action Bar → Notatmal-stripe [Mer] → ResponseBox → Sticky Kopier
   Hamburger: Konsultasjonsliste
   ============================================================================= */

/* === UTILITY === */
.mobile-hidden { display: none !important; }
body.mobile-sidebar-open { overflow: hidden; }


/* =============================================================================
   1. SIDEBAR DRAWER
   ============================================================================= */

.mobile-sidebar-logout {
    display: none;
}

.mobile-hamburger {
    display: none;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    transition: color 0.15s;
}
.mobile-hamburger:active { color: white; background: rgba(255,255,255,0.08); }
.mobile-hamburger .material-icons { font-size: 26px; }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 949;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sidebar-overlay.is-visible { display: block; opacity: 1; }

@media (max-width: 768px) {

    .mobile-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }

    /* KRITISK: Forhindre at fullSyncUI skjuler main */
    #mainContent.is-hidden {
        display: flex !important;
    }

    .container {
        flex-direction: row !important;
        height: calc(100vh - 52px) !important;
        overflow: visible;
    }

    /* Sidebar off-canvas */
    .sidebar {
        position: fixed !important;
        top: 52px;
        left: 0;
        bottom: 0;
        width: 300px !important;
        max-width: 82vw !important;
        max-height: none !important;
        height: auto !important;
        z-index: 950;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-right: 1px solid rgba(0,0,0,0.06) !important;
        border-bottom: none !important;
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .sidebar.is-open {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(0,0,0,0.12);
    }

    .sidebar-btn { min-height: 46px; font-size: 0.88rem; }
    .sidebar-btn.new-consult { font-weight: 600; }
    .consultation-item { padding: 11px 12px; min-height: 48px; border-radius: 10px; }
    .patient-info { font-size: 0.84rem; font-weight: 600; }
    .consultation-date { font-size: 0.7rem; }

    /* Logg ut i sidebar */
    .mobile-sidebar-logout {
        display: block;
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid var(--border-light);
    }
    .mobile-logout-btn {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
        border: none;
        border-radius: 10px;
        background: none;
        color: var(--accent-error, #d32f2f);
        font-size: 0.88rem;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.15s;
    }
    .mobile-logout-btn:active { background: rgba(211,47,47,0.08); }
    .mobile-logout-btn .material-icons { font-size: 20px; }

    .main {
        width: 100% !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        height: 100%;
        padding: 10px 12px 80px !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}


/* =============================================================================
   2. HEADER
   ============================================================================= */

@media (max-width: 768px) {
    header {
        height: 52px; min-height: 52px; max-height: 52px;
        padding: 0 10px; overflow: hidden;
    }
    .header-main { gap: 0.4rem; }
    .header-left {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }
    .header-left h1, .header-left .version-badge,
    .header-left .mode-badge { display: none !important; }
    .header-logo { height: 26px; opacity: 0.9; }
    .header-actions { gap: 0.15rem; flex-wrap: nowrap !important; }
    .header-actions .icon-button { width: 38px; height: 38px; }
    #userDisplay, .user-menu-arrow { display: none !important; }
    .wallet-header-btn .wallet-header-amount { display: none; }
}

@media (max-width: 480px) {
    header { height: 48px; min-height: 48px; max-height: 48px; padding: 0 8px; }
    .container { height: calc(100vh - 48px) !important; }
    .sidebar { top: 48px !important; }
    .header-actions .icon-button { width: 36px; height: 36px; }
    #keyboardShortcutsBtn, .user-switcher { display: none !important; }
}


/* =============================================================================
   3. NOTATMAL-STRIPE + MER-PANEL
   ============================================================================= */

.mobile-top-stripe {
    display: none;
}
.mobile-more-panel {
    display: none;
}

@media (max-width: 768px) {
    .mobile-top-stripe {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .mobile-mal-wrap {
        flex: 1;
        min-width: 0;
    }
    /* Kompakt instruction-selector i stripe */
    .mobile-mal-wrap .instruction-selector {
        gap: 4px;
    }
    .mobile-mal-wrap .input-like {
        font-size: 0.84rem;
        padding: 7px 8px;
        border-radius: 8px;
    }
    .mobile-mal-wrap .favorite-toggle {
        padding: 6px 8px;
        border-radius: 8px;
    }
    .mobile-mal-wrap .setting-header {
        display: none;
    }

    /* Mer-knapp */
    .mobile-more-btn {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 7px 10px;
        border: 1px solid var(--border-medium);
        border-radius: 8px;
        background: var(--bg-white);
        color: var(--text-secondary);
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        font-family: inherit;
        flex-shrink: 0;
        transition: all 0.15s;
    }
    .mobile-more-btn .material-icons { font-size: 18px; }
    .mobile-more-btn.is-active {
        background: var(--primary);
        color: var(--text-on-primary);
        border-color: var(--primary);
    }

    /* Ekspanderbart panel */
    .mobile-more-panel {
        display: none;
        flex-direction: column;
        gap: 8px;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.2s ease;
    }
    .mobile-more-panel.is-expanded {
        display: flex;
        max-height: 300px;
        opacity: 1;
    }
    .mobile-more-panel .setting-group {
        margin: 0;
    }
    .mobile-more-panel .setting-header {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 2px;
    }
    .mobile-more-panel textarea,
    .mobile-more-panel input {
        font-size: 16px !important;
        padding: 8px 10px;
        border-radius: 8px;
    }
}


/* =============================================================================
   4. ACTION BAR — State-based single row (data-state attribute)
   ============================================================================= */

.mobile-action-bar {
    display: none;
}

@media (max-width: 768px) {
    .mobile-action-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        min-height: 52px;
    }
}

/* ---- All buttons hidden by default — state shows them ---- */
.mobile-action-bar .mab-btn,
.mobile-action-bar .mab-timer {
    display: none;
}

/* ---- Shared button base ---- */
.mab-btn {
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.mab-btn:active:not(:disabled) { transform: scale(0.97); }
.mab-btn:disabled { cursor: default; opacity: 0.4; pointer-events: none; }
.mab-btn .material-icons { font-size: 22px; position: relative; z-index: 1; }
.mab-label {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

/* ---- Primary CTA (teal gradient) ---- */
.mab-primary {
    flex: 1;
    min-height: 52px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: white;
    box-shadow:
        0 2px 8px rgba(13,148,136,0.18),
        0 1px 2px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.1);
}
.mab-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,0.08);
    pointer-events: none;
}
.mab-primary:active:not(:disabled) {
    background: linear-gradient(135deg, #0f766e, #115e59);
}
.mab-primary .material-icons { font-size: 24px; }
.mab-primary .mab-label { font-size: 0.95rem; }

/* ---- Start opptak variant: red ---- */
.mab-start-rec {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow:
        0 2px 8px rgba(220,38,38,0.18),
        0 1px 2px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.1);
}
.mab-start-rec:active:not(:disabled) {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
}

/* ---- Pause: amber outlined ---- */
.mab-pause {
    flex: 1;
    min-height: 48px;
    padding: 10px 16px;
    background: var(--bg-white);
    color: #92400e;
    border: 1.5px solid #fbbf24;
    box-shadow: 0 1px 3px rgba(251,191,36,0.1);
}
.mab-pause .material-icons { font-size: 20px; color: #d97706; }
.mab-pause:active:not(:disabled) { background: #fffbeb; }

/* ---- Stopp: blue outlined ---- */
.mab-stop {
    min-height: 48px;
    padding: 10px 16px;
    background: var(--bg-white);
    color: #1e40af;
    border: 1.5px solid #60a5fa;
    box-shadow: 0 1px 3px rgba(96,165,250,0.1);
}
.mab-stop .material-icons { font-size: 20px; color: #2563eb; }
.mab-stop:active:not(:disabled) { background: #eff6ff; }

/* ---- Ny (small, paused state) ---- */
.mab-secondary {
    min-height: 48px;
    padding: 10px 12px;
    background: var(--bg-light);
    color: var(--text-secondary);
    border: 1.5px solid #cbd5e1;
}
.mab-secondary .material-icons { font-size: 20px; color: #64748b; }
.mab-secondary:active:not(:disabled) { background: #f1f5f9; }

/* ---- Resume: teal ---- */
.mab-resume {
    background: linear-gradient(135deg, #0d9488, #0f766e);
}

/* ---- Processing: disabled spinner ---- */
.mab-processing {
    flex: 1;
    min-height: 52px;
    padding: 12px 20px;
    background: var(--bg-hover);
    color: var(--text-muted);
    border: 1px solid #e2e8f0;
}
@keyframes mab-spin-anim {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.mab-spin { animation: mab-spin-anim 1.5s linear infinite; }

/* ---- Icon-only buttons (Video, Tolk) ---- */
.mab-icon-btn {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--bg-white);
    border: 1.5px solid #e2e8f0;
}
.mab-icon-btn .material-icons { font-size: 22px; color: #475569; }
.mab-icon-btn:active:not(:disabled) { background: #f8fafc; }

/* Video icon color */
.mab-video .material-icons { color: #6366f1; }
.mab-video { border-color: #a5b4fc; }

/* Tolk icon color */
.mab-tolk .material-icons { color: #0891b2; }
.mab-tolk { border-color: #67e8f9; }

/* ---- Timer badge ---- */
.mab-timer {
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #dc2626;
    flex-shrink: 0;
}
.mab-timer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc2626;
    animation: mab-dot-pulse 1.5s ease-in-out infinite;
}
.mab-timer-dot.mab-timer-paused {
    background: #94a3b8;
    animation: none;
}
@keyframes mab-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ==== STATE VISIBILITY ====
   data-state on .mobile-action-bar controls which buttons appear */

/* --- idle: Start konsultasjon + Video + Tolk --- */
.mobile-action-bar[data-state="idle"] .mab-start-consult,
.mobile-action-bar[data-state="idle"] .mab-video,
.mobile-action-bar[data-state="idle"] .mab-tolk {
    display: flex;
}

/* --- utkast: Start opptak + Video + Tolk --- */
.mobile-action-bar[data-state="utkast"] .mab-start-rec,
.mobile-action-bar[data-state="utkast"] .mab-video,
.mobile-action-bar[data-state="utkast"] .mab-tolk {
    display: flex;
}

/* --- recording: Pause + Stopp + Timer --- */
.mobile-action-bar[data-state="recording"] .mab-pause,
.mobile-action-bar[data-state="recording"] .mab-stop,
.mobile-action-bar[data-state="recording"] .mab-timer {
    display: flex;
}

/* --- paused: Resume + Stopp + Timer + Ny --- */
.mobile-action-bar[data-state="paused"] .mab-resume,
.mobile-action-bar[data-state="paused"] .mab-stop,
.mobile-action-bar[data-state="paused"] .mab-timer,
.mobile-action-bar[data-state="paused"] .mab-new-small {
    display: flex;
}

/* --- processing: Processing spinner --- */
.mobile-action-bar[data-state="processing"] .mab-processing {
    display: flex;
}

/* --- finished: Start neste + Video + Tolk --- */
.mobile-action-bar[data-state="finished"] .mab-start-next,
.mobile-action-bar[data-state="finished"] .mab-video,
.mobile-action-bar[data-state="finished"] .mab-tolk {
    display: flex;
}

/* ==== SMALL SCREEN ADJUSTMENTS ==== */
@media (max-width: 380px) {
    .mab-primary { min-height: 48px; padding: 10px 16px; }
    .mab-primary .mab-label { font-size: 0.88rem; }
    .mab-pause, .mab-stop, .mab-secondary { min-height: 42px; padding: 8px 12px; }
    .mab-label { font-size: 0.8rem; }
    .mab-icon-btn { width: 42px; min-width: 42px; height: 42px; }
    .mab-timer { font-size: 0.78rem; padding: 4px 8px; }
}


/* =============================================================================
   5. RESPONSE SECTION
   ============================================================================= */

@media (max-width: 768px) {
    .response-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    #responseBox {
        min-height: 120px;
        font-size: 0.9rem;
        line-height: 1.6;
        flex: 1;
        border-radius: 12px;
        padding: 12px 14px;
    }

    /* Action bar: icon-only, kompakt */
    .response-header-actions {
        gap: 6px; flex-wrap: nowrap;
        overflow-x: auto; scrollbar-width: none;
        padding: 2px 0;
    }
    .response-header-actions::-webkit-scrollbar { display: none; }
    .response-header-actions .action-btn span:not(.material-icons):not(.tooltiptext) {
        display: none;
    }
    .response-header-actions .action-btn {
        padding: 8px; min-width: 42px; min-height: 42px;
        gap: 0; border-radius: 10px;
    }
}


/* =============================================================================
   6. STICKY KOPIER-KNAPP
   ============================================================================= */

.mobile-copy-bar {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-copy-bar {
        display: none !important;  /* skjult til det er innhold */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 12px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(0,0,0,0.06);
        z-index: 100;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    }
    .mobile-copy-bar.is-visible {
        display: block !important;
    }
    .mobile-copy-btn {
        width: 100%;
        padding: 14px 20px;
        border: none;
        border-radius: 12px;
        background: linear-gradient(135deg, #0d9488, #0f766e);
        color: white;
        font-size: 1rem;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 2px 10px rgba(13,148,136,0.18);
        transition: transform 0.1s;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-copy-btn:active { transform: scale(0.98); }
    .mobile-copy-btn .material-icons { font-size: 22px; }
    .mobile-copy-btn.copied {
        background: linear-gradient(135deg, #059669, #047857);
        box-shadow: 0 2px 10px rgba(5,150,105,0.18);
    }
}


/* =============================================================================
   7. MODALER
   ============================================================================= */

@media (max-width: 768px) {
    .modal-content.wide, .modal-content {
        max-width: 100% !important; width: 100% !important;
        height: 100% !important; max-height: 100% !important;
        border-radius: 0 !important; margin: 0 !important;
    }
    .modal-content.narrow {
        width: 92vw !important; max-width: 400px !important;
        height: auto !important; max-height: 90vh !important;
        border-radius: 16px !important;
    }
    .modal-header { padding: 0.7rem 1rem; min-height: 48px; }
    .modal-title { font-size: 1rem; }
    .modal-body { padding: 0.75rem 1rem; }
    .modal-footer, .modal-actions { padding: 0.6rem 1rem; }
    .modal-header .close {
        min-width: 44px; min-height: 44px;
        display: flex; align-items: center; justify-content: center;
    }
    .journaloppsummering-summary-modal,
    .consultation-chat-modal,
    .refmodal-fullscreen {
        width: 100vw !important; height: 100vh !important;
        border-radius: 0 !important;
    }
    .fritekst-library-overlay .modal-content {
        width: 100vw !important; height: 100vh !important;
        max-width: none !important; border-radius: 0 !important;
    }
    #ocrCameraModal .modal-content,
    #contextCameraModal .modal-content {
        width: 100vw !important; height: 100vh !important;
        border-radius: 0 !important;
    }
    #profileModal .modal-content {
        width: 92vw !important; max-width: 450px !important;
        height: auto !important; max-height: 85vh !important;
        border-radius: 16px !important;
    }
    .welcome-footer { flex-direction: column; gap: 0.6rem; }
    .welcome-footer .button { width: 100%; }
}


/* =============================================================================
   8. TOUCH, INPUTS, NOTIFICATIONS
   ============================================================================= */

@media (max-width: 768px) {
    .tooltiptext { display: none !important; }
    .user-menu-item { min-height: 44px; padding: 0.7rem 1rem; }

    textarea, input[type="text"], input[type="email"],
    input[type="password"], input[type="number"],
    input[type="search"], input[type="tel"], select {
        font-size: 16px !important;
    }

    .notification {
        left: 12px; right: 12px; bottom: 80px;
        max-width: none; border-radius: 12px; padding: 14px 16px;
    }
    .notification.notification-top {
        left: 12px; right: 12px; top: 60px;
        max-width: none; border-radius: 12px;
    }

    .user-menu-dropdown { right: 0; left: auto; max-width: 90vw; }
    .instruction-dropdown-list { max-width: 90vw; max-height: 50vh; }
    .empty-state { padding: 2rem 1rem; }
    .empty-state .material-icons { font-size: 3rem; }
    #emptyStateNewConsultBtn { width: 100%; max-width: 260px; min-height: 48px; }
}


/* =============================================================================
   9. MODUL-FIXES
   ============================================================================= */

@media (max-width: 768px) {
    .settings-shortcut-grid { grid-template-columns: 1fr !important; }
    .settings-tabs-container { overflow-x: auto; scrollbar-width: none; }
    .settings-tabs-container::-webkit-scrollbar { display: none; }
    .video-room-list { gap: 8px; }
    .video-room-card { padding: 12px; }
    .referral-buttons-wrapper { flex-direction: column; gap: 0.5rem; }
    .referral-btn { width: 100% !important; min-height: 44px; }
    .instruction-grid { grid-template-columns: 1fr !important; }
    .category-tabs { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
    .category-tabs::-webkit-scrollbar { display: none; }
    .context-image-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .chat-message { max-width: 88%; }
}

@media (max-width: 600px) {
    .new-settings-mode-cards { grid-template-columns: 1fr !important; }
    .video-call-toolbar .video-btn span:not(.material-icons) { display: none; }
}

@media (max-width: 480px) {
    .main-bm-topup-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 700px) {
    .usage-modal-content { border-radius: 0 !important; max-height: 100vh !important; }
}


/* =============================================================================
   10. INTERPRETER FONT-SIZE (CSP-safe klasser)
   ============================================================================= */

.interpreter-font-controls {
    display: flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; padding: 2px;
}
.interpreter-font-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: none; border-radius: 6px;
    background: transparent; color: rgba(255,255,255,0.7);
    cursor: pointer; transition: all 0.15s;
}
.interpreter-font-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.interpreter-font-btn:active { transform: scale(0.92); }
.interpreter-font-btn .material-icons { font-size: 20px; }
.interpreter-font-size-label {
    font-size: 0.75rem; color: rgba(255,255,255,0.5);
    min-width: 36px; text-align: center;
    font-weight: 600; font-variant-numeric: tabular-nums;
}

.interpreter-font-70  .interpreter-line { font-size: 1.26rem; }
.interpreter-font-85  .interpreter-line { font-size: 1.53rem; }
.interpreter-font-100 .interpreter-line { font-size: 1.8rem; }
.interpreter-font-120 .interpreter-line { font-size: 2.16rem; }
.interpreter-font-150 .interpreter-line { font-size: 2.7rem; }
.interpreter-font-180 .interpreter-line { font-size: 3.24rem; }
.interpreter-font-220 .interpreter-line { font-size: 3.96rem; }
.interpreter-font-280 .interpreter-line { font-size: 5.04rem; }

@media (max-width: 500px) {
    .interpreter-font-size-label { display: none; }
    .interpreter-font-btn { width: 40px; height: 40px; }
}


/* =============================================================================
   11. SAFE AREA + PRINT
   ============================================================================= */

@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        header {
            padding-top: env(safe-area-inset-top);
            padding-left: max(0.75rem, env(safe-area-inset-left));
            padding-right: max(0.75rem, env(safe-area-inset-right));
        }
        .sidebar.is-open { padding-bottom: env(safe-area-inset-bottom); }
    }
}

@media print {
    .mobile-hamburger, .sidebar-overlay, .mobile-action-bar,
    .mobile-copy-bar, .mobile-top-stripe, .mobile-more-panel { display: none !important; }
}
/* ===== notice-banner.css ===== */
/* =============================================================================
   Informasjonslapp — post-it som henger fra headeren
   .lappen-anchor er 0-høyde mellom header og container
   .lappen flyter absolutt, sentrert, bredde etter innhold
   ============================================================================= */

.lappen-anchor {
    position: relative;
    height: 0;
    z-index: 899;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.lappen {
    position: absolute;
    top: 0;
    pointer-events: auto;

    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    max-width: min(540px, 75vw);
    padding: 8px 14px 9px 11px;

    background: linear-gradient(168deg, #fff9d6 0%, #fef0a0 50%, #fce975 100%);
    border-radius: 0 0 5px 5px;
    box-shadow:
        0 3px 10px rgba(100, 80, 0, 0.13),
        0 1px 3px rgba(100, 80, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);

    font-family: 'Roboto', system-ui, sans-serif;
    font-size: 11px;
    line-height: 1.5;
    color: #5c4a00;

    animation: lappen-drop 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Liten "tape"-stripe */
.lappen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0 0 2px 2px;
}

@keyframes lappen-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lappen.is-hidden {
    display: none !important;
}

.lappen-icon {
    font-size: 14px;
    color: #b8960c;
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.55;
}

.lappen-text {
    flex: 1;
    min-width: 0;
}

.lappen-date {
    display: inline;
    font-size: 10px;
    color: #8a7200;
    font-weight: 600;
    margin-right: 4px;
    opacity: 0.6;
}

.lappen-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #b8960c;
    padding: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.3;
    transition: opacity 0.15s, background 0.15s;
    margin-left: 2px;
}

.lappen-close:hover {
    opacity: 1;
    background: rgba(160, 130, 10, 0.1);
}

.lappen-close .material-icons {
    font-size: 14px;
}

@media print {
    .lappen-anchor { display: none !important; }
}

@media (max-width: 768px) {
    .lappen {
        max-width: 88vw;
        font-size: 10.5px;
        padding: 6px 10px 7px 9px;
    }
}

@media (max-width: 480px) {
    .lappen {
        max-width: 94vw;
        font-size: 10px;
    }
}
/* ===== legemiddel-sammenligning.css ===== */
/* ============================================
   LEGEMIDDELSAMMENLIGNING MODAL
   Prefix: lm-
   Matcher app design system (--primary: #1976d2)
   ============================================ */

/* --- Legemiddel-specific CSS variables --- */
:root {
  --lm-identical: #e8f5e9;
  --lm-identical-border: #a5d6a7;
  --lm-identical-text: #2e7d32;
  --lm-identical-icon: #43a047;

  --lm-added: #e3f2fd;
  --lm-added-border: #90caf9;
  --lm-added-text: #1565c0;
  --lm-added-icon: #1976d2;

  --lm-removed: #ffebee;
  --lm-removed-border: #ef9a9a;
  --lm-removed-text: #c62828;
  --lm-removed-icon: #e53935;

  --lm-changed: #fff8e1;
  --lm-changed-border: #ffe082;
  --lm-changed-text: #e65100;
  --lm-changed-icon: #ff8f00;
}

/* ============================================
   MODAL OVERLAY & CONTENT
   ============================================ */
.lm-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.lm-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.lm-modal {
  background: var(--bg-white);
  border-radius: var(--modal-border-radius);
  width: 95%;
  max-width: 1400px;
  max-height: 96vh;
  width: 98%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-strong);
  transform: translateY(20px);
  transition: transform 0.25s ease-out;
  overflow: hidden;
}

.lm-modal-overlay.is-open .lm-modal {
  transform: translateY(0);
}

/* ============================================
   HEADER
   ============================================ */
.lm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 50%, #2196F3 100%);
  color: white;
  flex-shrink: 0;
}

.lm-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lm-header-left .material-icons { font-size: 24px; opacity: 0.9; }

.lm-header-title {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
}

.lm-close-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.lm-close-btn:hover { background: rgba(255,255,255,0.25); }

/* ============================================
   BODY
   ============================================ */
.lm-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* ============================================
   INPUT PHASE
   ============================================ */
.lm-input-phase {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lm-input-phase.is-hidden {
  display: none;
}

.lm-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.lm-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lm-panel-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.lm-panel-label .material-icons { font-size: 20px; color: var(--primary); }

.lm-label-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.lm-label-tag.mine { background: #e8f5e9; color: #2e7d32; }
.lm-label-tag.epikrise { background: #fff3e0; color: #e65100; }

.lm-textarea {
  width: 100%;
  min-height: 200px;
  padding: 14px;
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  font-family: 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
  color: var(--text-primary);
  background: var(--bg-white);
}

.lm-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.lm-textarea::placeholder { color: #bdbdbd; font-style: italic; }
.lm-textarea.lm-epikrise-textarea { min-height: 280px; }

.lm-panel-hint {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.lm-panel-hint .material-icons { font-size: 14px; }

/* Compare button */
.lm-compare-row {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

.lm-compare-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

.lm-compare-btn:hover {
  background: linear-gradient(135deg, #1565C0 0%, #0d47a1 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.4);
}

.lm-compare-btn:active { transform: translateY(0); }
.lm-compare-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.lm-compare-btn .material-icons { font-size: 20px; }

/* ============================================
   LOADING STATE
   ============================================ */
.lm-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
}

.lm-loading.visible { display: flex; }

.lm-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: lm-spin 0.8s linear infinite;
}

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

.lm-loading-text { font-size: 15px; color: var(--text-muted); }

/* ============================================
   RESULTS PHASE
   ============================================ */
.lm-results-phase {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.lm-results-phase.visible { display: flex; }

/* Top bar */
.lm-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Stats */
.lm-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lm-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
  animation: lm-badge-pop 0.4s ease-out forwards;
  opacity: 0;
}

.lm-stat-identical { background: var(--lm-identical); color: var(--lm-identical-text); border-color: var(--lm-identical-border); }
.lm-stat-added { background: var(--lm-added); color: var(--lm-added-text); border-color: var(--lm-added-border); }
.lm-stat-removed { background: var(--lm-removed); color: var(--lm-removed-text); border-color: var(--lm-removed-border); }
.lm-stat-changed { background: var(--lm-changed); color: var(--lm-changed-text); border-color: var(--lm-changed-border); }
.lm-stat-badge .material-icons { font-size: 15px; }

.lm-stat-badge:nth-child(1) { animation-delay: 0.1s; }
.lm-stat-badge:nth-child(2) { animation-delay: 0.2s; }
.lm-stat-badge:nth-child(3) { animation-delay: 0.3s; }
.lm-stat-badge:nth-child(4) { animation-delay: 0.4s; }

@keyframes lm-badge-pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================
   RESULTS TABLE
   ============================================ */
.lm-table-wrapper {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.lm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.lm-table thead { background: var(--bg-light); }

.lm-table th {
  padding: 10px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-light);
}

.lm-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}

.lm-table tbody tr {
  transition: background 0.15s ease;
  animation: lm-row-appear 0.3s ease-out forwards;
  opacity: 0;
  transform: translateY(8px);
}

.lm-table tbody tr:last-child td { border-bottom: none; }
.lm-table tbody tr:hover { filter: brightness(0.97); }

/* Staggered row animations */
.lm-table tbody tr:nth-child(1) { animation-delay: 0.05s; }
.lm-table tbody tr:nth-child(2) { animation-delay: 0.1s; }
.lm-table tbody tr:nth-child(3) { animation-delay: 0.15s; }
.lm-table tbody tr:nth-child(4) { animation-delay: 0.2s; }
.lm-table tbody tr:nth-child(5) { animation-delay: 0.25s; }
.lm-table tbody tr:nth-child(6) { animation-delay: 0.3s; }
.lm-table tbody tr:nth-child(7) { animation-delay: 0.35s; }
.lm-table tbody tr:nth-child(8) { animation-delay: 0.4s; }
.lm-table tbody tr:nth-child(9) { animation-delay: 0.45s; }
.lm-table tbody tr:nth-child(10) { animation-delay: 0.5s; }
.lm-table tbody tr:nth-child(11) { animation-delay: 0.55s; }
.lm-table tbody tr:nth-child(12) { animation-delay: 0.6s; }

@keyframes lm-row-appear {
  to { opacity: 1; transform: translateY(0); }
}

/* Row types */
.lm-row-identical { background: var(--lm-identical); }
.lm-row-added { background: var(--lm-added); }
.lm-row-removed { background: var(--lm-removed); }
.lm-row-changed { background: var(--lm-changed); }

/* Status cell */
.lm-status-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}

.lm-status-cell .material-icons { font-size: 18px; }

.lm-status-identical .material-icons { color: var(--lm-identical-icon); }
.lm-status-added .material-icons { color: var(--lm-added-icon); }
.lm-status-removed .material-icons { color: var(--lm-removed-icon); }
.lm-status-changed .material-icons { color: var(--lm-changed-icon); }

.lm-status-identical { color: var(--lm-identical-text); }
.lm-status-added { color: var(--lm-added-text); }
.lm-status-removed { color: var(--lm-removed-text); }
.lm-status-changed { color: var(--lm-changed-text); }

/* Drug name */
.lm-drug-name { font-weight: 500; color: var(--text-primary); }

/* Table column widths (CSP: no inline styles) */
.lm-col-drug { width: 22%; }
.lm-col-dose { width: 14%; }
.lm-col-status { width: 12%; }
.lm-col-reason { width: 38%; }

/* Dose change */
.lm-dose-change {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 4px;
}

.lm-dose-old { text-decoration: line-through; color: var(--accent-error); opacity: 0.7; }
.lm-dose-arrow { color: var(--text-muted); font-size: 16px; }
.lm-dose-new { font-weight: 600; color: var(--primary-dark); }

/* Comment cell */
.lm-comment {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.lm-comment-source {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
}

.lm-comment-no-reason {
  color: var(--accent-error);
  font-weight: 500;
}

/* ============================================
   KI SUMMARY SECTION
   ============================================ */
.lm-summary-section {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%);
  border: 1px solid #bbdefb;
  border-radius: 10px;
  padding: 16px 20px;
}

.lm-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-dark);
}

.lm-summary-header .material-icons { font-size: 20px; color: var(--primary); }

.lm-summary-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.lm-summary-text strong { color: var(--text-primary); }

/* Warning box */
.lm-warning-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 16px;
  background: #fff3e0;
  border: 1px solid #ffcc80;
  border-radius: 8px;
}

.lm-warning-box .material-icons { font-size: 20px; color: #e65100; flex-shrink: 0; margin-top: 1px; }

.lm-warning-text {
  font-size: 13px;
  line-height: 1.5;
  color: #bf360c;
}

/* ============================================
   KI DISCLAIMER
   ============================================ */
.lm-disclaimer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.lm-disclaimer .material-icons {
  font-size: 18px;
  color: #90a4ae;
  flex-shrink: 0;
}

/* ============================================
   COPY PREVIEW MODAL
   ============================================ */
.lm-copy-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.lm-copy-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.lm-copy-modal {
  background: var(--bg-white);
  border-radius: var(--modal-border-radius);
  width: 90%;
  max-width: 750px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-strong);
  transform: translateY(20px);
  transition: transform 0.25s ease-out;
}

.lm-copy-overlay.is-open .lm-copy-modal { transform: translateY(0); }

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

.lm-copy-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.lm-copy-header-left .material-icons { color: var(--primary); font-size: 22px; }

.lm-copy-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

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

.lm-copy-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.lm-copy-preview {
  width: 100%;
  min-height: 300px;
  padding: 16px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-family: 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  background: #fafbfc;
  resize: vertical;
}

.lm-copy-preview:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.lm-copy-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.lm-copy-hint .material-icons { font-size: 14px; }

.lm-copy-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-light);
}

/* ============================================
   FOOTER
   ============================================ */
.lm-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-light);
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: wrap;
}

.lm-footer-left, .lm-footer-right {
  display: flex;
  gap: 8px;
}

.lm-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-white);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

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

.lm-btn-secondary .material-icons { font-size: 18px; }

.lm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.lm-btn-primary:hover {
  background: linear-gradient(135deg, #1565C0 0%, #0d47a1 100%);
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

.lm-btn-primary .material-icons { font-size: 18px; }

/* Copy success */
.lm-btn-copied {
  background: linear-gradient(135deg, #2e7d32, #1b5e20) !important;
  color: white !important;
}

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

/* --- Section headers (fast / behov) --- */
.lm-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 16px 0 4px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: #e3f2fd;
  border-radius: 8px;
  border: 1px solid #bbdefb;
}

.lm-section-header .material-icons { font-size: 20px; color: #1565c0; }

.lm-section-behov {
  background: #fff8e1;
  border-color: #ffe082;
}

.lm-section-behov .material-icons { color: #e65100; }

.lm-table-wrapper .lm-section-header:first-child { margin-top: 0; }

/* --- Stat badges for type --- */
.lm-stat-type {
  background: #e3f2fd;
  color: #1565c0;
  border-color: #bbdefb;
}

.lm-stat-type .material-icons { color: #1976d2; }

.lm-stat-type-behov {
  background: #fff8e1;
  color: #e65100;
  border-color: #ffe082;
}

.lm-stat-type-behov .material-icons { color: #ff8f00; }

/* --- Badge animation delays (6 badges nå) --- */
.lm-stat-badge:nth-child(5) { animation-delay: 0.5s; }
.lm-stat-badge:nth-child(6) { animation-delay: 0.6s; }

/* --- Sort buttons --- */
.lm-sort-group {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.lm-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-white);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.lm-sort-btn .material-icons { font-size: 16px; }

.lm-sort-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(25, 118, 210, 0.04);
}

.lm-sort-btn-active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.lm-sort-btn-active:hover {
  background: #1565c0;
  color: white;
}

/* --- Error state i loading-fasen --- */
.lm-error-state {
  text-align: center;
  padding: 24px;
}

.lm-error-icon {
  font-size: 48px;
  color: #ef4444;
}

.lm-error-title {
  margin: 12px 0 4px;
  font-weight: 600;
  color: var(--text-primary);
}

.lm-error-msg {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.lm-error-retry {
  margin-top: 16px;
}

@media (max-width: 768px) {
  .lm-panels { grid-template-columns: 1fr; }
  .lm-body { padding: 16px; }
  .lm-header { padding: 12px 16px; }
  .lm-footer { padding: 12px 16px; }
  .lm-results-bar { flex-direction: column; align-items: flex-start; }
  .lm-table { font-size: 13px; }
  .lm-table th, .lm-table td { padding: 8px 10px; }
  .lm-footer-left, .lm-footer-right { width: 100%; justify-content: center; }
}
/* ===== idle-lock.css ===== */
/* Visuell skjerming av pasientdata ved inaktivitet.
   Aktiveres av body.idlk-active satt av js/idle-lock.js.
   Alt prefikset idlk- for å unngå kollisjon med eksisterende stiler. */

:root {
  --idlk-blur-amount: 16px;
  --idlk-fade-in: 500ms;
  --idlk-overlay-z: 99999;
}

/* Blur-tilstand på alt app-innhold unntatt selve overlay */
body.idlk-active > *:not(#idlkOverlay) {
  filter: blur(var(--idlk-blur-amount));
  -webkit-filter: blur(var(--idlk-blur-amount));
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: filter var(--idlk-fade-in) ease-out,
              -webkit-filter var(--idlk-fade-in) ease-out;
}

/* Overlay — skjult som default */
#idlkOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--idlk-overlay-z);
  align-items: center;
  justify-content: center;
  background: var(--bg-overlay);
  cursor: pointer;
  pointer-events: auto;
}

/* Synlig når lock er aktiv */
body.idlk-active #idlkOverlay {
  display: flex;
  animation: idlk-overlay-in var(--idlk-fade-in) ease-out;
}

/* Meldingsboks inni overlay */
.idlk-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 48px;
  background: var(--bg-white);
  color: var(--text-primary);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--shadow-strong);
  max-width: 400px;
  text-align: center;
  animation: idlk-message-in var(--idlk-fade-in) ease-out;
}

.idlk-icon {
  font-size: 48px !important;
  color: var(--primary);
  line-height: 1;
}

.idlk-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.idlk-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

@keyframes idlk-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes idlk-message-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Respekter redusert bevegelse */
@media (prefers-reduced-motion: reduce) {
  body.idlk-active > *:not(#idlkOverlay) {
    transition: none;
  }
  body.idlk-active #idlkOverlay {
    animation: none;
  }
  .idlk-message {
    animation: none;
  }
}

/* Høykontrast-forsterkning */
@media (prefers-contrast: more) {
  .idlk-message {
    border: 2px solid var(--text-primary);
  }
  .idlk-icon {
    color: var(--text-primary);
  }
}

/* Ikke print blurret innhold */
@media print {
  body.idlk-active > *:not(#idlkOverlay) {
    display: none !important;
  }
  body.idlk-active #idlkOverlay {
    display: none !important;
  }
}

/* ===== privacy-tab.css ===== */
/* Stiler for Personvern-tab i settings-modalen.
   Prefiks sfield- matcher øvrige settings-stiler. */

.sfield-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 8px 0;
}

.sfield-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--main-border-radius);
  cursor: pointer;
  background: var(--bg-white);
  transition: background 150ms ease, border-color 150ms ease;
}

.sfield-radio:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
}

.sfield-radio input[type="radio"] {
  accent-color: var(--primary);
  cursor: pointer;
}

.sfield-radio input[type="radio"]:checked + span {
  font-weight: 600;
  color: var(--primary);
}

.sfield-radio span {
  font-size: 14px;
  color: var(--text-primary);
}

.sfield-hint-text {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 6px 0 10px 0;
  line-height: 1.5;
}

/* =============================================================================
   AI COLLABORATION — Forbedret UX
   Empty state, redigerbar preview, regulatorisk banner, picker-modal.
   Alle klasser prefixet med ai- for å unngå lekkasje.
   Gjenbruker eksisterende ai-message / ai-chat / ai-preview-section fra
   blokken ved linje 2822.
   ============================================================================= */

/* --- Empty-state med to startvalg ----------------------------------------- */
.ai-welcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  height: 100%;
  min-height: 340px;
}

.ai-welcome-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.ai-welcome-icon .material-icons {
  font-size: 2rem;
  color: #2563eb;
}

.ai-welcome-card h4 {
  color: var(--text-primary);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.ai-welcome-card > p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin: 0 0 1.5rem 0;
  max-width: 320px;
}

.ai-empty-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 340px;
}

.ai-empty-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 0.9375rem;
  color: #334155;
  font-weight: 500;
  transition: all 0.15s ease;
}

.ai-empty-option:hover {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1e40af;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1);
}

.ai-empty-option .material-icons {
  font-size: 1.375rem;
  color: #2563eb;
  flex-shrink: 0;
}

.ai-empty-option-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}

.ai-empty-option-title {
  font-weight: 600;
  color: var(--text-primary);
}

.ai-empty-option-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 400;
}

.ai-empty-examples {
  margin-top: 1.5rem;
  width: 100%;
  max-width: 340px;
}

.ai-empty-examples-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  display: block;
}

.ai-empty-examples-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
}

/* --- Preview: redigerbare felt -------------------------------------------- */
.ai-preview-meta {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  background: var(--bg-white);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex-shrink: 0;
}

.ai-preview-name-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-white);
  transition: all 0.15s ease;
  font-family: inherit;
}

.ai-preview-name-input:hover {
  border-color: var(--border-light);
  background: var(--bg-light);
}

.ai-preview-name-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: var(--bg-white);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ai-preview-name-input::placeholder {
  color: #cbd5e1;
  font-weight: 500;
}

.ai-preview-description-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--bg-white);
  transition: all 0.15s ease;
  font-family: inherit;
  resize: none;
  min-height: 38px;
  line-height: 1.4;
}

.ai-preview-description-input:hover {
  border-color: var(--border-light);
  background: var(--bg-light);
}

.ai-preview-description-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: var(--bg-white);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ai-preview-description-input::placeholder {
  color: #cbd5e1;
}

.ai-preview-category-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
}

.ai-preview-category-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 500;
}

.ai-preview-category-select {
  padding: 0.375rem 0.625rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--text-primary);
  background: var(--bg-white);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.ai-preview-category-select:hover {
  border-color: #cbd5e1;
}

.ai-preview-category-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ai-preview-content-editable {
  flex: 1;
  width: 100%;
  padding: 1rem 1.25rem;
  border: none;
  background: var(--bg-white);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #334155;
  resize: none;
  white-space: pre-wrap;
  overflow-y: auto;
  transition: background 0.15s ease;
}

.ai-preview-content-editable:hover {
  background: #fafbfc;
}

.ai-preview-content-editable:focus {
  outline: none;
  background: var(--bg-white);
}

.ai-preview-content-editable::placeholder {
  color: #cbd5e1;
  font-style: italic;
}

.ai-preview-content-editable:disabled {
  background: var(--bg-light);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Vi må nullstille flex på .ai-preview-content slik at textarea får vokse —
   men kun i den nye strukturen. Bruker :has() som fallback til flex-column. */
.ai-preview-content:has(.ai-preview-content-editable) {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Regulatorisk banner -------------------------------------------------- */
.ai-regulatory-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  border-radius: 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  flex-shrink: 0;
  margin-bottom: 0.5rem;
  animation: aiBannerSlide 0.25s ease-out;
}

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

.ai-regulatory-banner.is-checking {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.ai-regulatory-banner.is-approved {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  animation: aiBannerSlide 0.25s ease-out, aiBannerFade 0.4s ease-in 2.5s forwards;
}

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

.ai-regulatory-banner.is-violation {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

.ai-regulatory-banner .material-icons {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.ai-regulatory-banner.is-checking .material-icons {
  animation: aiBannerSpin 1.2s linear infinite;
}

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

.ai-regulatory-banner-body {
  flex: 1;
  min-width: 0;
}

.ai-regulatory-banner-title {
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.ai-regulatory-banner-detail {
  font-weight: 400;
  color: inherit;
  opacity: 0.9;
}

/* --- Error-bobler med retry ----------------------------------------------- */
.ai-error-bubble {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}

.ai-error-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.ai-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--bg-white);
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.ai-retry-btn:hover {
  background: #991b1b;
  color: #ffffff;
  border-color: #991b1b;
}

.ai-retry-btn .material-icons {
  font-size: 0.9375rem;
}

/* --- Picker-modal for "Start fra eksisterende" ---------------------------- */
.ai-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10050;
  animation: aiPickerFadeIn 0.18s ease-out;
}

@keyframes aiPickerFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ai-picker-modal {
  background: var(--bg-white);
  border-radius: 14px;
  width: 92vw;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.3);
  animation: aiPickerSlideUp 0.22s ease-out;
  overflow: hidden;
}

@keyframes aiPickerSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ai-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  color: #ffffff;
  flex-shrink: 0;
}

.ai-picker-header h4 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.ai-picker-close {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  color: #ffffff;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.ai-picker-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.ai-picker-close .material-icons {
  font-size: 1.125rem;
}

.ai-picker-tabs {
  display: flex;
  background: var(--bg-light);
  border-bottom: 1px solid #e2e8f0;
  padding: 0 1.25rem;
  flex-shrink: 0;
}

.ai-picker-tab {
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.ai-picker-tab:hover {
  color: #3b82f6;
}

.ai-picker-tab.is-active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.ai-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  background: #fafbfc;
}

.ai-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ai-picker-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  background: var(--bg-white);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: inherit;
}

.ai-picker-item:hover {
  border-color: #2563eb;
  background: #eff6ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}

.ai-picker-item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ai-picker-item-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.ai-picker-item-meta {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.ai-picker-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.ai-picker-loading {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* --- Liten "oppdatert"-puls på preview ved ny AI-generering --------------- */
@keyframes aiPreviewPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3); }
  70% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.ai-preview-section.is-updated {
  animation: aiPreviewPulse 1.2s ease-out;
}

/* --- Responsive: picker på mobil ------------------------------------------ */
@media (max-width: 640px) {
  .ai-picker-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .ai-empty-options {
    max-width: 100%;
  }
}

/* =============================================================================
   END AI COLLABORATION
   ============================================================================= */

/* ==========================================================================
   DARK MODE FIXES — 2026-04-20
   Rettelser basert på visuell gjennomgang. Alle regler additive; denne
   blokken kan slettes samlet for rollback uten å røre eksisterende dark-tokens.
   ========================================================================== */

/* 1. Header: <header>-element mangler dark override (eksisterende regel
   bruker .header-klasse som ikke finnes i DOM). Dette er kilden til den
   blå stripen — hele header hadde var(--primary). */
html[data-theme="dark"] header {
    background-color: var(--bg-light);
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* 2. Notatmal-felt: demp grønt fyll.
   Eksisterende regel (linje ~977) bruker `background: linear-gradient(...)` og
   mørk-grønn tekst (#065f46) — derfor MÅ vi overstyre `background` (ikke bare
   background-color) og sette en lys-grønn tekst som er lesbar på mørk bg. */
html[data-theme="dark"] #instructionNameDisplay.instruction-selected {
    background: rgba(86, 211, 100, 0.12);
    border: 1px solid rgba(86, 211, 100, 0.45);
    color: #86efac;
    font-weight: 500;
}
html[data-theme="dark"] #instructionNameDisplay.instruction-selected::before {
    color: #86efac;
}

/* 3. Sidebar primær-knapper (tidligere lyseblå) — samme nivå som sekundære. */
html[data-theme="dark"] .sidebar-btn.fritekst-ki,
html[data-theme="dark"] .sidebar-btn.video-consult,
html[data-theme="dark"] .sidebar-btn.new-consult {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
html[data-theme="dark"] .sidebar-btn.fritekst-ki:hover,
html[data-theme="dark"] .sidebar-btn.video-consult:hover,
html[data-theme="dark"] .sidebar-btn.new-consult:hover {
    background-color: var(--bg-hover);
    border-color: rgba(74, 158, 255, 0.4);
}

/* 4. Kopier-knappen — demp fra mettet primær-blå. */
html[data-theme="dark"] #copyBtn.button.primary {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    box-shadow: none;
}
html[data-theme="dark"] #copyBtn.button.primary:hover {
    background-color: var(--bg-hover);
    border-color: rgba(74, 158, 255, 0.4);
}

/* 5. Placeholder — heve fra knapt-synlig til lesbar. */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* 6. Video post-it — dempet oker/varm mørk, beholder "notis"-personlighet. */
html[data-theme="dark"] .video-sticky-note {
    background: linear-gradient(135deg, #3a3020 0%, #433725 50%, #4a3d2a 100%);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.4),
        0 10px 20px rgba(0, 0, 0, 0.3),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .video-sticky-note::before {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
}
html[data-theme="dark"] .video-sticky-note-title { color: #d6b870; }
html[data-theme="dark"] .video-sticky-note-message { color: #b39a5a; }
html[data-theme="dark"] .video-sticky-note-close { color: #d6b870; }
html[data-theme="dark"] .video-sticky-note:hover {
    background: linear-gradient(135deg, #403426 0%, #493d29 50%, #514430 100%);
}

/* 7. Video stat-kort + pastell-ikoner — dempet. */
html[data-theme="dark"] .video-stat-card {
    background-color: var(--bg-white);
    border: 1px solid var(--border-light);
}
html[data-theme="dark"] .video-stat-icon.blue {
    background: rgba(74, 158, 255, 0.15);
    color: #82b8ff;
}
html[data-theme="dark"] .video-stat-icon.orange {
    background: rgba(251, 146, 60, 0.15);
    color: #fdba74;
}

/* 8. Test utstyr-knappen (VideoLege header) — samme stil som Lukk VideoLege. */
html[data-theme="dark"] .video-header-settings-btn {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
html[data-theme="dark"] .video-header-settings-btn:hover {
    background-color: var(--bg-hover);
    border-color: rgba(74, 158, 255, 0.4);
}

/* 9. Video rom-rad — løfte kontrast på navn og meta. */
html[data-theme="dark"] .video-room-row {
    background-color: var(--bg-white);
    border: 1px solid var(--border-light);
}
html[data-theme="dark"] .video-room-row-name { color: var(--text-primary); }
html[data-theme="dark"] .video-room-row-meta { color: var(--text-muted); }

/* 11. Fritekst KI-modal header: eksisterende regel bruker
   var(--fritekst-primary) som bg (blå). Demp til dark-panel for å matche
   resten av dark-estetikken. */
html[data-theme="dark"] .fritekst-modal-container .fritekst-header {
    background: var(--bg-light);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .fritekst-modal-container .fritekst-header .modal-title,
html[data-theme="dark"] .fritekst-modal-container .fritekst-header .close {
    color: var(--text-primary);
}

/* 10. Print — tvinge lys bakgrunn uansett tema.
   Beskytter mot pasient-utskrift i dark mode (legeerklæring, notat). */
@media print {
    html[data-theme="dark"],
    html[data-theme="dark"] body {
        background: #ffffff !important;
        color: #000000 !important;
    }
}

/* ==========================================================================
   12. LEGEERKLÆRING MODAL — "Type dokument" seksjon
   Knappevalg for Enkel / Utvidet. Bruker tema-variabler fra :root slik at
   dark mode følger automatisk.
   ========================================================================== */
#legeerklaringModal .le-type-section {
    margin-top: 16px;
    margin-bottom: 8px;
}
#legeerklaringModal .le-type-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
#legeerklaringModal .le-type-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
#legeerklaringModal .le-type-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    background: var(--bg-white);
    border: 1.5px solid var(--border-light);
    border-radius: var(--main-border-radius);
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.1s;
}
#legeerklaringModal .le-type-btn:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
}
#legeerklaringModal .le-type-btn:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.25);
}
#legeerklaringModal .le-type-btn .material-icons {
    font-size: 22px;
    color: var(--primary);
    margin-bottom: 2px;
}
#legeerklaringModal .le-type-btn-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
#legeerklaringModal .le-type-btn-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}
#legeerklaringModal .le-type-btn.le-type-selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 1px var(--primary) inset;
}
#legeerklaringModal .le-type-btn.le-type-selected .le-type-btn-label {
    color: var(--primary-dark);
}
html[data-theme="dark"] #legeerklaringModal .le-type-btn.le-type-selected .le-type-btn-label {
    color: var(--text-primary);
}
html[data-theme="dark"] #legeerklaringModal .le-type-btn.le-type-selected .le-type-btn-desc {
    color: var(--text-secondary);
}

/* Signatur-hint i samme modal — kosmetisk polish så seksjonen under
   type-knappene ikke ser naken ut. */
#legeerklaringModal .le-signature-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    font-size: 0.8rem;
    color: var(--text-muted);
}
#legeerklaringModal .le-signature-hint .material-icons {
    font-size: 18px;
    color: var(--primary);
    flex-shrink: 0;
}

/* ==========================================================================
   13. DIAGNOSTIKK-TAB I SETTINGS — "Send til utvikler"
   Klassene diag-* genereres i js/settings-service.js og hadde ingen CSS.
   ========================================================================== */
.diag-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.diag-header-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.diag-header-title .material-icons {
    font-size: 15px;
    color: var(--primary);
}
.diag-btn-row {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}
.diag-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--bg-white);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.diag-btn .material-icons { font-size: 16px; }
.diag-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--border-medium);
}
.diag-btn:disabled { opacity: 0.6; cursor: default; }
.diag-btn--send {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
}
.diag-btn--send:hover:not(:disabled) {
    filter: brightness(1.05);
    background: var(--primary);
    border-color: var(--primary);
}
.diag-btn--clear:hover:not(:disabled) {
    background: var(--status-recording-bg);
    border-color: var(--accent-error);
    color: var(--accent-error);
}

.diag-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
}
.diag-summary > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.diag-summary > span .material-icons { font-size: 16px; }
.diag-summary-errors--active {
    background: var(--status-recording-bg) !important;
    border-color: var(--accent-error) !important;
    color: var(--status-recording-text) !important;
}
.diag-summary-warns--active {
    background: var(--status-draft-bg) !important;
    border-color: var(--accent-warning) !important;
    color: var(--status-draft-text) !important;
}

.diag-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 14px 0 8px;
}

.diag-timeline-wrap { margin-bottom: 14px; }
.diag-timeline-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    max-height: 180px;
    overflow-y: auto;
}
.diag-tl-row {
    display: grid;
    grid-template-columns: 10px 70px 1fr;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.diag-tl-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-muted);
}
.diag-tl-dot--ok   { background: var(--accent-success); }
.diag-tl-dot--warn { background: var(--accent-warning); }
.diag-tl-dot--err  { background: var(--accent-error); }
.diag-tl-time {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.diag-tl-label { color: var(--text-primary); }

.diag-log-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    max-height: 260px;
    overflow-y: auto;
}
.diag-empty {
    padding: 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
}
.diag-log-row {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 0.8rem;
}
.diag-log-row .material-icons { font-size: 16px; color: var(--text-muted); margin-top: 1px; }
.diag-log-row--warn    { border-left: 3px solid var(--accent-warning); }
.diag-log-row--warning { border-left: 3px solid var(--accent-warning); }
.diag-log-row--error,
.diag-log-row--critical { border-left: 3px solid var(--accent-error); }
.diag-log-row--warn .material-icons,
.diag-log-row--warning .material-icons { color: var(--accent-warning); }
.diag-log-row--error .material-icons,
.diag-log-row--critical .material-icons { color: var(--accent-error); }

.diag-log-body { min-width: 0; }
.diag-log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
}
.diag-log-time {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 0.72rem;
    flex-shrink: 0;
}
.diag-log-source {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary);
    font-weight: 600;
    flex-shrink: 0;
}
.diag-log-message {
    color: var(--text-primary);
    word-break: break-word;
}
.diag-log-ctx {
    margin-top: 4px;
    padding: 4px 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 0.72rem;
    color: var(--text-secondary);
    word-break: break-all;
    white-space: pre-wrap;
}

.diag-footer {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}
/* =============================================================================
   QR-RECEIVE — mottak av rullerende QR-kode fra mobil via webkamera
   Alle klasser har qrrx- prefix for å unngå kollisjon.
   ============================================================================= */

/* BADGE i konsultasjonsliste — hentet-fra-mobil markør */
.consult-card-title .qrrx-source-icon {
    font-size: 16px;
    color: var(--primary);
    margin-right: 2px;
    vertical-align: text-bottom;
}

html[data-theme="dark"] .consult-card-title .qrrx-source-icon {
    color: var(--primary);
}

/* Modal-layout */
#mobileReceiveModal .modal-content {
    width: 92%;
    max-width: 760px;
    max-height: 92vh;
}

#mobileReceiveModal .modal-body {
    padding: 1.25rem 1.5rem;
}

.qrrx-stage {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.qrrx-stage.is-hidden {
    display: none;
}

/* Video + skanne-stadium */
.qrrx-video-wrap {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    aspect-ratio: 4 / 3;
    max-height: 52vh;
}

.qrrx-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qrrx-video-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qrrx-reticle {
    width: 62%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    border: 2px dashed rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    transition: border-color 0.2s ease;
}

.qrrx-reticle.is-active {
    border-color: rgba(76, 175, 80, 0.9);
    border-style: solid;
}

.qrrx-status-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.qrrx-status-row .material-icons {
    font-size: 20px;
    color: var(--primary);
}

.qrrx-status-text {
    flex: 1;
    min-width: 0;
}

.qrrx-progress {
    height: 8px;
    width: 100%;
    background: var(--bg-hover);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.qrrx-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: 999px;
    transition: width 0.15s ease-out;
}

.qrrx-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.qrrx-meta-hash {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 0.12em;
    color: var(--text-primary);
    background: var(--bg-hover);
    padding: 2px 8px;
    border-radius: 6px;
}

.qrrx-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 143, 0, 0.35);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.qrrx-hint.is-hidden {
    display: none;
}

.qrrx-hint .material-icons {
    font-size: 20px;
    color: #ff8f00;
    flex-shrink: 0;
}

.qrrx-error {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: rgba(244, 67, 54, 0.08);
    border: 1px solid rgba(211, 47, 47, 0.35);
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--accent-error);
}

.qrrx-error.is-hidden {
    display: none;
}

.qrrx-error .material-icons {
    color: var(--accent-error);
    flex-shrink: 0;
}

/* Suksess-stadium — stor hash + liste over mottatte notater */
.qrrx-success-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem 1rem;
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.06), rgba(13, 71, 161, 0.04));
    border: 1px solid var(--border-light);
    border-radius: 12px;
}

.qrrx-success-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.qrrx-hash-display {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: clamp(3rem, 10vw, 5.5rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1;
    color: var(--primary);
    user-select: all;
}

html[data-theme="dark"] .qrrx-hash-display {
    color: var(--primary);
}

.qrrx-match-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.9rem;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.qrrx-match-row:hover {
    background: var(--bg-hover);
}

.qrrx-match-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
    margin: 0;
}

.qrrx-match-row label {
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-primary);
    margin: 0;
}

/* Liste med mottatte notater */
.qrrx-notes-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0.5rem 0 0.25rem;
}

.qrrx-notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 32vh;
    overflow-y: auto;
    padding-right: 2px;
}

.qrrx-note-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    transition: border-color 0.15s ease;
}

.qrrx-note-item:hover {
    border-color: var(--primary);
}

.qrrx-note-icon {
    font-size: 22px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.qrrx-note-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qrrx-note-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qrrx-note-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qrrx-note-preview {
    font-size: 0.85rem;
    color: var(--text-primary);
    opacity: 0.8;
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* Footer / knapper */
#mobileReceiveModal .modal-footer {
    gap: 0.75rem;
}

#mobileReceiveModal .modal-footer .qrrx-footer-left {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Utility */
.qrrx-hidden {
    display: none !important;
}

/* =============================================================================
   FYLT INN — manglende klasser identifisert i CSS-audit 2026-05-03
   Legges til så lenge eldre dev-mappe ikke er blitt re-bundlet med kildefilene.
   Følger samme design-tokens som resten av bundle.css.
   ============================================================================= */


/* =============================================================================
   LEGEERKLÆRING-MODAL (le-*)
   Markup: index.html #legeerklaringModal
   JS: js/standalone-legeerklaring.js
   ============================================================================= */

#legeerklaringModal .modal-content {
    width: 92%;
    max-width: 760px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

#legeerklaringModal .modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
}

.le-header-icon {
    font-size: 22px !important;
    margin-right: 0.5rem;
    color: var(--primary);
    vertical-align: text-bottom;
}

/* Steg-indikator */
.le-step-indicator {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 0 0.5rem;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-light);
}

.le-step-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border-medium);
    transition: background 0.2s ease, transform 0.2s ease;
}

.le-step-dot.le-step-active {
    background: var(--primary);
    transform: scale(1.3);
}

.le-step-dot.le-step-done {
    background: var(--accent-success);
}

/* Steg-containere */
.le-step-1,
.le-step-2,
.le-step-3,
.le-step-4 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.le-step-1.is-hidden,
.le-step-2.is-hidden,
.le-step-3.is-hidden,
.le-step-4.is-hidden {
    display: none;
}

/* Steg 1 — input */
.le-label-icon {
    font-size: 18px !important;
    vertical-align: text-bottom;
    margin-right: 0.25rem;
    color: var(--primary);
}

.le-instruction-textarea {
    width: 100%;
    min-height: 90px;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    resize: vertical;
    background: var(--bg-white);
    color: var(--text-primary);
}

.le-instruction-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.12);
}

/* Paste-area */
.le-paste-area {
    border: 2px dashed var(--border-medium);
    border-radius: var(--main-border-radius);
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    background: var(--bg-light);
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.le-paste-area:hover,
.le-paste-area:focus {
    border-color: var(--primary);
    background: var(--primary-light);
    outline: none;
}

.le-paste-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
}

.le-paste-icon {
    font-size: 32px !important;
    color: var(--primary);
}

.le-paste-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}

.le-paste-subtext {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.le-paste-preview {
    position: relative;
    display: inline-block;
}

.le-paste-preview.is-hidden {
    display: none;
}

.le-paste-thumbnail {
    max-width: 100%;
    max-height: 220px;
    border-radius: var(--main-border-radius);
    box-shadow: var(--shadow-soft);
}

.le-paste-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: var(--accent-error);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-medium);
}

.le-paste-remove:hover {
    transform: scale(1.08);
}

.le-paste-remove .material-icons {
    font-size: 18px !important;
}

/* Steg 2 — loading */
.le-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
}

.le-loading-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.le-loading-subtext {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* Steg 3 — dokumentpreview (speiler PDF-layout) */
.le-doc {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    padding: 1.5rem 1.75rem;
    box-shadow: var(--shadow-soft);
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    line-height: 1.5;
}

.le-doc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.le-doc-office {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.le-doc-office-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.le-doc-office-addr {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.le-doc-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.le-doc-hr {
    border: none;
    border-top: 1px solid var(--border-medium);
    margin: 0.5rem 0 1rem;
}

.le-doc-title {
    width: 100%;
    border: none;
    border-bottom: 1px dashed transparent;
    background: transparent;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    margin: 0.5rem 0 1rem;
    padding: 0.25rem;
}

.le-doc-title:focus {
    outline: none;
    border-bottom-color: var(--primary);
}

.le-doc-patient {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.le-doc-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.le-doc-row.le-doc-gjelder {
    margin-bottom: 1rem;
}

.le-doc-label {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 90px;
    flex-shrink: 0;
}

.le-doc-value {
    flex: 1;
    border: none;
    border-bottom: 1px dashed transparent;
    background: transparent;
    font: inherit;
    color: var(--text-primary);
    padding: 0.15rem 0.25rem;
}

.le-doc-value:focus,
.le-doc-value:hover {
    outline: none;
    border-bottom-color: var(--border-medium);
    background: var(--bg-light);
}

.le-doc-value-short {
    flex: 0 0 130px;
    text-align: center;
}

.le-doc-til-sep {
    color: var(--text-muted);
    padding: 0 0.25rem;
}

.le-doc-body {
    width: 100%;
    min-height: 140px;
    border: 1px dashed var(--border-light);
    border-radius: var(--main-border-radius);
    padding: 0.75rem;
    font: inherit;
    line-height: 1.55;
    resize: vertical;
    margin-bottom: 1.5rem;
    background: var(--bg-white);
    color: var(--text-primary);
}

.le-doc-body:focus {
    outline: none;
    border-color: var(--primary);
    border-style: solid;
}

.le-doc-signature {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 2rem;
    max-width: 280px;
}

.le-doc-sig-line {
    height: 0;
    border-top: 1px solid var(--text-secondary);
    margin-bottom: 0.4rem;
}

.le-doc-sig-name {
    font-weight: 700;
    color: var(--text-primary);
}

.le-doc-sig-title,
.le-doc-sig-office {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Steg 4 — resultat */
.le-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
}

.le-result-icon {
    font-size: 56px !important;
    color: var(--accent-success);
}

.le-result-title {
    margin: 0.25rem 0;
    color: var(--text-primary);
}

.le-pdf-filename {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    color: var(--text-secondary);
    background: var(--bg-light);
    padding: 0.4rem 0.75rem;
    border-radius: var(--main-border-radius);
    margin: 0.25rem 0;
}

.le-result-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* Footer-rader (en per steg) */
.le-footer-step-1,
.le-footer-step-3,
.le-footer-step-4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
}

.le-footer-step-1.is-hidden,
.le-footer-step-3.is-hidden,
.le-footer-step-4.is-hidden {
    display: none;
}

.le-footer-step-3-right {
    display: flex;
    gap: 0.5rem;
}

/* Knapper — disse arver fra .button .primary/.secondary; trenger kun småjusteringer */
.le-generate-btn,
.le-back-btn,
.le-copy-btn,
.le-pdf-btn,
.le-new-btn,
.le-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.le-close-btn {
    cursor: pointer;
}

/* Mobil-tilpasning */
@media (max-width: 600px) {
    #legeerklaringModal .modal-content {
        width: 96%;
        max-height: 96vh;
    }
    .le-doc {
        padding: 1rem;
    }
    .le-doc-row {
        flex-wrap: wrap;
    }
    .le-doc-label {
        min-width: auto;
        flex-basis: 100%;
        font-size: 0.85rem;
    }
}


/* =============================================================================
   FORTSETT OPPTAK-LENKE (under responsbox)
   Markup: #continueRecordingBtn
   ============================================================================= */

.continue-recording-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    padding: 0.4rem 0.65rem;
    background: transparent;
    border: 1px dashed var(--primary);
    border-radius: var(--main-border-radius);
    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-style 0.15s ease;
    text-decoration: none;
    align-self: flex-start;
}

.continue-recording-link:hover {
    background: var(--primary-light);
    border-style: solid;
}

.continue-recording-link.is-hidden {
    display: none;
}

.continue-recording-link .material-icons {
    font-size: 18px !important;
}


/* =============================================================================
   OM-VERKTØYET-MODAL (about-*)
   Markup: index.html #aboutModal — MDR-konform produktidentifikasjon
   ============================================================================= */

.about-modal-content {
    width: 92%;
    max-width: 720px;
    max-height: 92vh;
}

.about-modal-body {
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
}

.about-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
}

/* Produktheader med CE-merke */
.about-product-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--primary-light), rgba(25, 118, 210, 0.04));
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    margin-bottom: 1.5rem;
}

.about-ce-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--primary-dark);
    flex-shrink: 0;
}

.about-ce-mark svg {
    width: 64px;
    height: 38px;
}

.about-ce-class {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin-top: 2px;
}

.about-product-name h3 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.about-product-name p {
    margin: 0;
}

.about-version {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.about-classification {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.25rem !important;
}

/* Section-overskrifter */
.about-section-heading {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.35rem;
}

/* Produktinfo-grid (definition list) */
.about-info-grid {
    display: grid;
    grid-template-columns: minmax(180px, max-content) 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
    padding: 0;
}

.about-info-grid dt {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.about-info-grid dd {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.88rem;
    word-break: break-word;
}

.about-info-grid dd code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    background: var(--bg-light);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Vigilance- og sikkerhets-bokser */
.about-vigilance-box,
.about-security-box {
    margin: 1.25rem 0;
    padding: 0.85rem 1rem;
    border-radius: var(--main-border-radius);
    border: 1px solid var(--border-light);
}

.about-vigilance-box {
    background: rgba(255, 143, 0, 0.06);
    border-color: rgba(255, 143, 0, 0.3);
}

.about-security-box {
    background: rgba(211, 47, 47, 0.05);
    border-color: rgba(211, 47, 47, 0.3);
}

.about-vigilance-box h4,
.about-security-box h4 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.about-vigilance-box p,
.about-security-box p {
    margin: 0.4rem 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.about-vigilance-note {
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    font-style: italic;
}

/* Dokumentlenker */
.about-doc-links {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.about-doc-links li a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.about-doc-links li a:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}

.about-doc-links .material-icons {
    font-size: 18px !important;
}

.about-footer-note {
    margin-top: 1.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-light);
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}


/* =============================================================================
   AGREEMENT-MODAL (agreement-*)
   Markup: index.html #agreementOverlay — vilkår/avtaler-godkjenning
   ============================================================================= */

/* Default: skjult. Vises kun når JS legger til .agreement-active.
   (agreement-service.js bruker classList.add/remove('agreement-active')) */
.agreement-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

.agreement-overlay.agreement-active {
    display: flex;
}

.agreement-card {
    width: min(96vw, 600px);
    max-height: 92vh;
    background: var(--bg-white);
    border-radius: var(--modal-border-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.agreement-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    flex-shrink: 0;
}

.agreement-header-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px;
    flex-shrink: 0;
}

.agreement-header-text h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
}

.agreement-header-text p {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.agreement-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.55;
}

.agreement-body h3,
.agreement-body h4 {
    margin: 1rem 0 0.5rem;
    color: var(--text-primary);
}

.agreement-body p {
    margin: 0.5rem 0;
}

.agreement-body ul {
    padding-left: 1.25rem;
}

.agreement-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg-light);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.agreement-footer-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.agreement-footer-info .material-icons {
    font-size: 16px !important;
}

.agreement-accept-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--main-border-radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.agreement-accept-btn:hover:not(:disabled) {
    background: var(--primary-dark);
}

.agreement-accept-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.agreement-accept-btn .material-icons {
    font-size: 18px !important;
}


/* =============================================================================
   AUTH-LOGIN TOTP-OPPSETT (al-totp-intro-*, al-mobile-warning, al-spinner-large, al-auto-setup-spinner, al-setup-login-help)
   Markup: index.html — to-faktor-setup-flyt
   ============================================================================= */

.al-totp-intro-step {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--main-border-radius);
    margin: 0.75rem 0;
    text-align: left;
}

.al-totp-intro-step.al-totp-intro-step-muted {
    background: transparent;
    border-style: dashed;
    opacity: 0.85;
}

.al-totp-intro-step-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.al-totp-intro-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.al-totp-intro-step-desc {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.al-totp-intro-app-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.al-totp-intro-app-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    background: var(--bg-white);
    border: 1px solid var(--border-medium);
    border-radius: var(--main-border-radius);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.al-totp-intro-app-link:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.al-totp-intro-app-link .material-icons {
    font-size: 18px !important;
}

.al-mobile-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 143, 0, 0.08);
    border: 1px solid rgba(255, 143, 0, 0.4);
    border-radius: var(--main-border-radius);
    margin: 0.75rem 0;
    text-align: left;
}

.al-mobile-warning.is-hidden {
    display: none;
}

.al-mobile-warning .material-icons {
    color: #ff8f00;
    font-size: 22px !important;
    flex-shrink: 0;
}

.al-mobile-warning strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}

.al-mobile-warning p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.al-auto-setup-spinner {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

.al-spinner-large {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: al-spin 0.8s linear infinite;
}

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

.al-setup-login-help {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
}


/* =============================================================================
   INTERPRETER-CONTAINER (interpreter-*) + tilhørende mini-klasser
   Markup: index.html #interpreterModal
   ============================================================================= */

.interpreter-container {
    width: 96vw;
    height: 90vh;
    max-width: 1400px;
    background: var(--bg-white);
    border-radius: var(--modal-border-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-strong);
}

.interpreter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    flex-shrink: 0;
}

.interpreter-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
}

.interpreter-icon {
    font-size: 26px !important;
    color: #fff;
}

.interpreter-controls-left,
.interpreter-controls-center,
.interpreter-controls-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.interpreter-controls-center {
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
}

.interpreter-lang-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--main-border-radius);
    color: #fff;
    font-size: 0.9rem;
}

.interpreter-mode-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.85rem;
}

.interpreter-mode-wrapper label {
    color: inherit;
}

.interpreter-chat-area {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.interpreter-welcome-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: auto;
    color: var(--text-muted);
    text-align: center;
}

.interpreter-welcome-icon,
.interpreter-welcome-msg .material-icons {
    font-size: 56px !important;
    color: var(--primary);
}

.interpreter-welcome-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.5rem 0 0;
}

.interpreter-welcome-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.interpreter-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: var(--bg-light);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
    align-items: center;
}

/* Tilhørende mikro-klasser brukt inni interpreter-footer */
.close-interpreter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: var(--main-border-radius);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.close-interpreter-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.fullscreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: var(--main-border-radius);
    cursor: pointer;
    transition: background 0.15s ease;
}

.fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.change-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: var(--main-border-radius);
    font-size: 0.82rem;
    cursor: pointer;
}

.change-lang-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.lang-flag {
    font-size: 1.1rem;
}

.lang-text {
    color: inherit;
}

.control-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border-radius: var(--main-border-radius);
}

.control-zone.left {
    align-items: flex-start;
}

.control-zone.right {
    align-items: flex-end;
}

.indicator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.key-badge {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    padding: 2px 8px;
    border-radius: 4px;
}

.role-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.status-center {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.wave-visualizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
    margin-top: 0.25rem;
}

.wave-visualizer.hidden {
    visibility: hidden;
}

.wave-visualizer span {
    display: block;
    width: 4px;
    background: var(--primary);
    border-radius: 2px;
    animation: wave-bounce 0.9s ease-in-out infinite;
}

.wave-visualizer span:nth-child(1) { height: 30%; animation-delay: 0s; }
.wave-visualizer span:nth-child(2) { height: 60%; animation-delay: 0.1s; }
.wave-visualizer span:nth-child(3) { height: 90%; animation-delay: 0.2s; }
.wave-visualizer span:nth-child(4) { height: 60%; animation-delay: 0.3s; }
.wave-visualizer span:nth-child(5) { height: 30%; animation-delay: 0.4s; }

@keyframes wave-bounce {
    0%, 100% { transform: scaleY(0.5); }
    50%      { transform: scaleY(1); }
}


/* =============================================================================
   FRITEKST COMPLIANCE-RESULT (fritekst-compliance-*)
   Markup: index.html — vises etter prompt-validering
   ============================================================================= */

.fritekst-compliance-result {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--main-border-radius);
    background: rgba(46, 125, 50, 0.06);
    border: 1px solid rgba(46, 125, 50, 0.3);
    margin: 0.75rem 0;
}

.fritekst-compliance-result.fritekst-compliance-rejected {
    background: rgba(211, 47, 47, 0.06);
    border-color: rgba(211, 47, 47, 0.3);
}

.fritekst-compliance-hidden {
    display: none !important;
}

.fritekst-compliance-icon {
    flex-shrink: 0;
}

.fritekst-compliance-icon .material-icons {
    font-size: 24px !important;
    color: var(--accent-success);
}

.fritekst-compliance-result.fritekst-compliance-rejected .fritekst-compliance-icon .material-icons {
    color: var(--accent-error);
}

.fritekst-compliance-body {
    flex: 1;
    min-width: 0;
}

.fritekst-compliance-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.fritekst-compliance-violations {
    font-size: 0.85rem;
    color: var(--accent-error);
    margin-top: 0.25rem;
    line-height: 1.4;
}

.fritekst-compliance-violations ul {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

.fritekst-compliance-suggestion {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border-light);
    line-height: 1.45;
}


/* =============================================================================
   TIL PASIENT-MODAL — wrapper-klasse (tp-modal)
   ============================================================================= */

.tp-modal .modal-content {
    width: 92%;
    max-width: 700px;
    max-height: 92vh;
}


/* =============================================================================
   SMÅ KOMPONENTER — wallet, welcome, journal-upload, header-logo
   ============================================================================= */

/* Wallet-status-ikon i header */
.wallet-status-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 6px;
}

.wallet-status-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Velkomstmodal (Facebook-velkomst etc.) */
.welcome-modal-content {
    width: 92%;
    max-width: 520px;
}

/* Journaloppsummering-upload-section */
.journaloppsummering-upload-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
    border: 2px dashed var(--border-medium);
    border-radius: var(--main-border-radius);
    background: var(--bg-light);
}

/* Header-logo-link */
.header-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}


/* =============================================================================
   FORMGRUPPER (additional-text-group, patient-group, instruction-group, instruction-actions)
   Layout-containere — definert eksplisitt for å unngå browser-default
   ============================================================================= */

.additional-text-group,
.patient-group,
.instruction-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.instruction-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.icon-small {
    font-size: 16px !important;
}


/* =============================================================================
   TOGGLE-SWITCH (switch-label + slider round) — interpreter modus-bryter etc.
   Standard iOS-stil checkbox-bryter.
   ============================================================================= */

.switch-label {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch-label input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--border-medium);
    transition: background-color 0.25s ease;
}

.slider.round {
    border-radius: 24px;
}

.slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.switch-label input[type="checkbox"]:checked + .slider {
    background-color: var(--primary);
}

.switch-label input[type="checkbox"]:checked + .slider::before {
    transform: translateX(20px);
}

.switch-label input[type="checkbox"]:focus-visible + .slider {
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.25);
}


/* =============================================================================
   KONSULTASJONSTIMER (fk-takst-timer) — pill i header som viser konsultasjonstid
   ============================================================================= */

.fk-takst-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    background: var(--status-recording-bg);
    color: var(--status-recording-text);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(183, 28, 28, 0.25);
    transition: opacity 0.2s ease;
}

.fk-takst-timer.is-hidden {
    display: none;
}

.fk-takst-timer .material-icons {
    font-size: 16px !important;
    color: inherit;
}

.fk-takst-timer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-error);
    animation: fk-takst-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes fk-takst-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.15); }
}

.fk-takst-timer-value {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    color: inherit;
}


/* =============================================================================
   NOTIFICATION-IKON — ikon-container i toast-melding (bundle.css har .notification men ikke .notification-icon)
   ============================================================================= */

.notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.notification-icon .material-icons {
    font-size: 20px !important;
}


/* =============================================================================
   FRITEKST PASTE-BTN TEKST — span inni "Lim kontekst"-knappen
   ============================================================================= */

.fritekst-paste-btn-text {
    display: inline-block;
}

/* =============================================================================
 * VIDEO INCIDENT FEIL-MODAL (kifm- = KI-verktøy Feil-Modal)
 * Lege-vennlig forklaring etter mislykket videosamtale.
 * Brukt av video-incident-modal.js og video-service.js (reopen-knapp).
 * Klasse-prefiks `kifm-` valgt fordi det ikke kolliderer med eksisterende
 * klasser i bundle.css (verifisert med grep ved oppretting).
 * ============================================================================= */

.kifm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Må ligge OVER .video-rating-view (z-index 10002) ellers er modal-en usynlig
       bak rating-skjermens fullskjerm-gradient. Bruker 100001 — én over
       confirm-dialog (100000) slik at incident-modal alltid kommer øverst. */
    z-index: 100001;
    padding: 20px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.kifm-overlay.kifm-hidden {
    display: none;
}

.kifm-modal-open {
    overflow: hidden;
}

.kifm-dialog {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-width: 520px;
    width: 100%;
    padding: 28px 28px 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1f2937;
    outline: none;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .kifm-dialog {
        padding: 20px 18px 18px;
        border-radius: 10px;
    }
}

.kifm-dialog.kifm-severity-warning {
    border-top: 4px solid #f59e0b;
}

.kifm-dialog.kifm-severity-error {
    border-top: 4px solid #dc2626;
}

.kifm-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #ffffff;
    line-height: 1;
}

.kifm-severity-warning .kifm-icon {
    background: #f59e0b;
}

.kifm-severity-error .kifm-icon {
    background: #dc2626;
}

.kifm-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.3;
    color: #0f172a;
}

.kifm-body {
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 18px;
    color: #334155;
}

.kifm-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.kifm-section.kifm-hidden {
    display: none;
}

.kifm-section-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin: 0 0 6px;
}

.kifm-section-text {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: #1f2937;
}

.kifm-message-box {
    background: #eff6ff;
    border-color: #bfdbfe;
    position: relative;
}

.kifm-message-text {
    color: #1e3a8a;
    white-space: pre-wrap;
}

.kifm-copy-btn {
    margin-top: 10px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.kifm-copy-btn:hover {
    background: #1d4ed8;
}

.kifm-copy-btn.kifm-copy-btn-done {
    background: #16a34a;
}

.kifm-copy-confirm {
    margin-left: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #16a34a;
}

.kifm-copy-confirm.kifm-hidden {
    display: none;
}

.kifm-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.kifm-dismiss-btn {
    background: #1f2937;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.kifm-dismiss-btn:hover {
    background: #0f172a;
}

/* Send-rapport-knapp i incident-modal. Sender enriched diagnostic-report
 * via Firebase support-chat — wrapper rundt sendDiagnosticReport. */
.kifm-send-report-btn {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin-right: auto;
}

.kifm-send-report-btn:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.kifm-send-report-btn:disabled {
    cursor: default;
    opacity: 0.85;
}

.kifm-send-status {
    font-size: 13px;
    color: #475569;
    flex-basis: 100%;
    margin-top: 4px;
    line-height: 1.4;
}

.kifm-send-status.kifm-send-status-success {
    color: #15803d;
}

.kifm-send-status.kifm-send-status-error {
    color: #b91c1c;
}

/* "Hva gikk galt?"-knapp på rating-skjermen — kalles inn av video-service.js
 * når en samtale endte i feil, slik at legen kan re-åpne feil-modalen.
 */
.kifm-reopen-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.kifm-reopen-btn:hover {
    background: #fde68a;
    border-color: #f59e0b;
}

.kifm-reopen-btn.kifm-severity-error {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

.kifm-reopen-btn.kifm-severity-error:hover {
    background: #fecaca;
    border-color: #dc2626;
}

@media (prefers-color-scheme: dark) {
    .kifm-dialog {
        background: #1e293b;
        color: #e2e8f0;
    }
    .kifm-title {
        color: #f1f5f9;
    }
    .kifm-body {
        color: #cbd5e1;
    }
    .kifm-section {
        background: #0f172a;
        border-color: #334155;
    }
    .kifm-section-label {
        color: #94a3b8;
    }
    .kifm-section-text {
        color: #e2e8f0;
    }
    .kifm-message-box {
        background: #1e3a5f;
        border-color: #1e40af;
    }
    .kifm-message-text {
        color: #bfdbfe;
    }
    .kifm-dismiss-btn {
        background: #475569;
    }
    .kifm-dismiss-btn:hover {
        background: #334155;
    }
    .kifm-reopen-btn {
        background: #422006;
        color: #fbbf24;
        border-color: #92400e;
    }
    .kifm-reopen-btn:hover {
        background: #5a2c08;
    }
}

/* ==========================================================================
   FAVORITT-LASTER (pk-fav-*) — Spinner i notatmal-dropdown
   Vises mens getFavoriteInstructions() henter fra Hetzner (~1-2 s round-trip).
   Erstatter tidligere atferd der hele dropdown var usynlig under API-kallet.
   ========================================================================== */

.pk-fav-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
  user-select: none;
  cursor: default;
}

.pk-fav-loading-spinner {
  font-size: 18px;
  color: var(--primary);
  animation: pk-fav-spin 1s linear infinite;
}

.pk-fav-loading-failed {
  color: var(--danger, #c0392b);
  font-style: normal;
}

.pk-fav-loading-error {
  animation: none;
  color: var(--danger, #c0392b);
}

@keyframes pk-fav-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================================ */
/* TIL MOTTAKER — hover-dropdown (action-bar split-button)      */
/* KommuneKI: pasient + hjemmesykepleier                         */
/* ============================================================ */
.action-btn-dropdown {
  position: relative;
  display: inline-block;
}
.action-btn-dropdown .action-btn-caret {
  font-size: 18px;
  margin-left: -2px;
  opacity: 0.7;
}
.action-btn-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 280px;
  background: var(--bg-white, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
  padding: 6px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.18s, opacity 0.18s ease, transform 0.18s ease;
  z-index: 1000;
}
.action-btn-dropdown:hover .action-btn-menu,
.action-btn-dropdown:focus-within .action-btn-menu,
.action-btn-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.action-btn-menu::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 10px;
}
.action-btn-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary, #1f2937);
  font: inherit;
}
.action-btn-menu-item:hover,
.action-btn-menu-item:focus {
  background: rgba(0, 122, 255, 0.08);
  outline: none;
}
.action-btn-menu-item .material-icons {
  color: var(--accent-color, #007aff);
  font-size: 22px;
}
.action-btn-menu-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.3;
}
.action-btn-menu-text strong {
  font-size: 0.95em;
  font-weight: 600;
}
.action-btn-menu-text small {
  font-size: 0.8em;
  opacity: 0.65;
  margin-top: 2px;
}
.action-btn-dropdown .action-btn:disabled + .action-btn-menu,
.action-btn-dropdown:has(.action-btn:disabled) .action-btn-menu {
  display: none;
}

/* Skjul språkvalg når mottaker ikke er pasient */
#tpLanguageWrap.is-hidden {
  display: none;
}

/* ============================================================ */
/* KOMMUNE-STANDARDMALER i favoritt-dropdown — subtil markør    */
/* ============================================================ */
.instruction-dropdown-item-bundled {
  position: relative;
  padding-left: 26px;
}
.instruction-dropdown-item-bundled::before {
  content: 'verified';
  font-family: 'Material Icons';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--accent-color, #007aff);
  opacity: 0.75;
}

/* =============================================================================
   V3 COMPLIANCE-UI: spinner-animasjon + violation-cards (portert fra pdfprod 27.05)
   ============================================================================= */

/* Spinner-animasjon for sync-ikonet i checking-state — uten dette står ikonet stille */
@keyframes fritekst-compliance-spin {
    to { transform: rotate(360deg); }
}
.fritekst-compliance-checking .fritekst-compliance-icon .material-icons {
    color: var(--text-secondary);
    animation: fritekst-compliance-spin 1s linear infinite;
}
.ai-regulatory-banner.is-checking .material-icons {
    animation: fritekst-compliance-spin 1s linear infinite;
}

/* Strukturerte violation-kort (v3-format) — kategori-badge + sitat + forklaring + rewrite */
.fritekst-compliance-violation-item {
    margin: 0 0 0.75rem 0;
    padding: 0.7rem 0.85rem;
    background: rgba(211, 47, 47, 0.05);
    border-left: 3px solid var(--accent-error, #d32f2f);
    border-radius: 4px;
    color: var(--text-primary);
}
.fritekst-compliance-violation-item:last-child {
    margin-bottom: 0;
}
.fritekst-compliance-violation-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.45rem;
    border-radius: 3px;
    background: var(--border-light, #d0d0d0);
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.fritekst-compliance-violation-category.severity-high {
    background: var(--accent-error, #d32f2f);
    color: #fff;
}
.fritekst-compliance-violation-category.severity-medium {
    background: #f59e0b;
    color: #fff;
}
.fritekst-compliance-violation-category strong {
    font-weight: 700;
    font-size: 0.8rem;
}
.fritekst-compliance-violation-severity {
    font-weight: 700;
    letter-spacing: 0.04em;
}
.fritekst-compliance-violation-quote {
    font-style: italic;
    background: rgba(0, 0, 0, 0.04);
    padding: 0.4rem 0.6rem;
    margin: 0.35rem 0;
    border-radius: 3px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-secondary);
    overflow-wrap: break-word;
    word-break: break-word;
}
.fritekst-compliance-violation-explanation {
    margin: 0.4rem 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-primary);
}
.fritekst-compliance-violation-rewrite {
    background: rgba(76, 175, 80, 0.09);
    border-left: 2px solid #4caf50;
    padding: 0.45rem 0.6rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.5;
    border-radius: 0 3px 3px 0;
    color: var(--text-primary);
}
.fritekst-compliance-violation-rewrite strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #2e7d32;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Anvend-knapp per brudd og "Anvend alle"-batch-knapp på toppen */
.fritekst-compliance-apply-btn {
    margin-top: 0.55rem;
    padding: 0.35rem 0.85rem;
    background: #2e7d32;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
.fritekst-compliance-apply-btn:hover:not(:disabled) {
    background: #1b5e20;
}
.fritekst-compliance-apply-btn:disabled {
    background: var(--border-light, #d0d0d0);
    color: var(--text-secondary);
    cursor: default;
}
.fritekst-compliance-apply-btn.is-applied {
    background: rgba(76, 175, 80, 0.15);
    color: #2e7d32;
}

.fritekst-compliance-apply-warn {
    margin-top: 0.4rem;
    padding: 0.45rem 0.6rem;
    background: rgba(245, 158, 11, 0.1);
    border-left: 2px solid #f59e0b;
    border-radius: 0 3px 3px 0;
    color: #b45309;
    font-size: 0.78rem;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}
.fritekst-compliance-apply-warn-reason {
    color: inherit;
}
.fritekst-compliance-jump-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    background: #fff;
    color: #92400e;
    border: 1px solid #f59e0b;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.fritekst-compliance-jump-btn:hover {
    background: #f59e0b;
    color: #fff;
}
.fritekst-compliance-jump-btn .material-icons {
    font-size: 1rem;
}

.fritekst-compliance-violation-applied {
    opacity: 0.55;
}
.fritekst-compliance-violation-applied .fritekst-compliance-violation-quote,
.fritekst-compliance-violation-applied .fritekst-compliance-violation-rewrite {
    background: rgba(0, 0, 0, 0.025);
}

.fritekst-compliance-apply-all-btn {
    padding: 0.4rem 1rem;
    background: #2e7d32;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.fritekst-compliance-apply-all-btn:hover:not(:disabled) {
    background: #1b5e20;
}
.fritekst-compliance-apply-all-btn:disabled {
    background: var(--border-light, #d0d0d0);
    color: var(--text-secondary);
    cursor: default;
}
.fritekst-compliance-apply-all-btn.is-applied {
    background: rgba(76, 175, 80, 0.15);
    color: #2e7d32;
}

/* Actions-rad: «Anvend alle» til venstre, «Valider på nytt» til høyre */
.fritekst-compliance-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0 0 0.85rem 0;
    padding: 0.55rem 0.7rem;
    background: rgba(76, 175, 80, 0.06);
    border: 1px dashed #4caf50;
    border-radius: 4px;
    flex-wrap: wrap;
}
.fritekst-compliance-actions-spacer {
    flex: 1;
}

.fritekst-compliance-revalidate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    background: #1565c0;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.fritekst-compliance-revalidate-btn:hover:not(:disabled) {
    background: #0d47a1;
}
.fritekst-compliance-revalidate-btn:disabled {
    background: var(--border-light, #d0d0d0);
    color: var(--text-secondary);
    cursor: default;
}
.fritekst-compliance-revalidate-btn .material-icons {
    font-size: 1.05rem;
    line-height: 1;
}
.fritekst-compliance-result.is-stale .fritekst-compliance-revalidate-btn {
    animation: fritekst-compliance-revalidate-pulse 2s ease-in-out infinite;
}
@keyframes fritekst-compliance-revalidate-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(21, 101, 192, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(21, 101, 192, 0); }
}

.fritekst-compliance-result.is-stale .fritekst-compliance-violation-item {
    opacity: 0.7;
}

/* Pinnet standardmal i favoritt-dropdown */
.instruction-dropdown-pinned {
    background-color: rgba(11, 46, 94, 0.04);
    border-left: 3px solid #0b2e5e;
    font-weight: 500;
}
.instruction-dropdown-pinned:hover {
    background-color: rgba(11, 46, 94, 0.08);
}

/* === WAIT-NOTIS (vises sammen med typing-indicator, v3) === */
/* NB: duplisert fra js/fritekst.css for å overleve bundle.css-konkatenering */
.fritekst-modal-container .fritekst-wait-notice {
    margin: 6px 18px 14px;
    padding: 12px 14px;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    border-radius: 8px;
    font-size: 13px;
    color: #6d3b00;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}
.fritekst-modal-container .fritekst-wait-notice .material-icons {
    color: #b88c00;
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}
.fritekst-modal-container .fritekst-wait-notice strong {
    font-weight: 600;
}
.fritekst-modal-container .fritekst-wait-notice-text {
    flex: 1;
}
.fritekst-modal-container .fritekst-wait-notice-tip {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #ffcc80;
    font-size: 12px;
    color: #5a4500;
}