/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.14_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/assistant/nora-theme.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   NORA — Premium Clinical Workspace Design System
   ============================================================
   Dark, precise, confident, sophisticated.
   Cockpit clinique intelligent.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

.nora-workspace {
  /* ---- A. Color Palette ---- */

  /* Backgrounds */
  --nora-bg-app: #08111F;
  --nora-bg-panel: #0D1728;
  --nora-bg-surface: #111E32;
  --nora-bg-elevated: #15243A;
  --nora-bg-hover: #192C45;
  --nora-bg-active: #1E3550;
  --nora-bg-input: #0B1424;

  /* Borders */
  --nora-border-subtle: #1C2E47;
  --nora-border-default: #24364F;
  --nora-border-strong: #2E4563;
  --nora-border-accent: rgba(52, 213, 229, 0.25);
  --nora-border-focus: rgba(52, 213, 229, 0.5);

  /* Text */
  --nora-text-primary: #EAF1F8;
  --nora-text-secondary: #AFC0D4;
  --nora-text-muted: #7F95AE;
  --nora-text-disabled: #4A5F78;

  /* Accent — Cyan Premium */
  --nora-accent: #34D5E5;
  --nora-accent-hover: #51E0EE;
  --nora-accent-soft: rgba(52, 213, 229, 0.12);
  --nora-accent-glow: rgba(52, 213, 229, 0.20);

  /* Semantic */
  --nora-success: #3DDC97;
  --nora-success-soft: rgba(61, 220, 151, 0.12);
  --nora-warning: #F4B860;
  --nora-warning-soft: rgba(244, 184, 96, 0.12);
  --nora-danger: #F26A6A;
  --nora-danger-soft: rgba(242, 106, 106, 0.12);
  --nora-info: #5BA8FF;
  --nora-info-soft: rgba(91, 168, 255, 0.12);

  /* ---- B. Radius ---- */
  --nora-radius-sm: 10px;
  --nora-radius-md: 14px;
  --nora-radius-lg: 18px;
  --nora-radius-xl: 24px;
  --nora-radius-full: 9999px;

  /* ---- C. Shadows ---- */
  --nora-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --nora-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --nora-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --nora-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --nora-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
  --nora-shadow-glow: 0 0 24px rgba(52, 213, 229, 0.12);
  --nora-shadow-glow-strong: 0 0 40px rgba(52, 213, 229, 0.20);
  --nora-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3);

  /* ---- D. Spacing Scale ---- */
  --nora-space-1: 4px;
  --nora-space-2: 8px;
  --nora-space-3: 12px;
  --nora-space-4: 16px;
  --nora-space-5: 20px;
  --nora-space-6: 24px;
  --nora-space-8: 32px;
  --nora-space-10: 40px;
  --nora-space-12: 48px;
  --nora-space-16: 64px;

  /* ---- E. Typography ---- */
  --nora-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nora-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* Font sizes */
  --nora-text-display: 2rem;        /* 32px */
  --nora-text-heading-xl: 1.5rem;   /* 24px */
  --nora-text-heading-lg: 1.25rem;  /* 20px */
  --nora-text-heading-md: 1.125rem; /* 18px */
  --nora-text-title: 1rem;          /* 16px */
  --nora-text-body: 0.9375rem;      /* 15px */
  --nora-text-body-sm: 0.8125rem;   /* 13px */
  --nora-text-label: 0.75rem;       /* 12px */
  --nora-text-caption: 0.6875rem;   /* 11px */
  --nora-text-mono: 0.8125rem;      /* 13px */

  /* Line heights */
  --nora-leading-tight: 1.2;
  --nora-leading-snug: 1.35;
  --nora-leading-normal: 1.5;
  --nora-leading-relaxed: 1.65;

  /* Font weights */
  --nora-weight-normal: 400;
  --nora-weight-medium: 500;
  --nora-weight-semibold: 600;
  --nora-weight-bold: 700;

  /* Letter spacing */
  --nora-tracking-tight: -0.02em;
  --nora-tracking-normal: 0;
  --nora-tracking-wide: 0.04em;
  --nora-tracking-caps: 0.08em;

  /* ---- F. Layout ---- */
  --nora-header-height: 68px;
  --nora-input-height: 88px;
  --nora-workspace-max: 820px;
  --nora-card-max: 580px;

  /* ---- G. Transitions ---- */
  --nora-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nora-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --nora-duration-fast: 150ms;
  --nora-duration-normal: 250ms;
  --nora-duration-slow: 400ms;

  /* ---- Z-index ---- */
  --nora-z-base: 1;
  --nora-z-input: 10;
  --nora-z-header: 20;
  --nora-z-overlay: 30;
  --nora-z-modal: 40;

  /* ---- Cockpit layout ---- */
  /* Rails intentionally narrow — the center working surface is the primary
     zone for clinical reasoning. Rails carry context/actions, not content. */
  --nora-rail-width-left: 220px;
  --nora-rail-width-right: 240px;
  --nora-rail-gap: var(--nora-space-3);
  --nora-hero-accent: var(--nora-accent);

  /* ---- Apply base theme ---- */
  font-family: var(--nora-font-sans);
  background-color: var(--nora-bg-app);
  color: var(--nora-text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--nora-text-body);
  line-height: var(--nora-leading-normal);
}

/* ============================================================
   2. SCROLLBAR
   ============================================================ */

.nora-workspace ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.nora-workspace ::-webkit-scrollbar-track {
  background: transparent;
}

.nora-workspace ::-webkit-scrollbar-thumb {
  background: var(--nora-border-default);
  border-radius: var(--nora-radius-full);
}

.nora-workspace ::-webkit-scrollbar-thumb:hover {
  background: var(--nora-border-strong);
}

/* ============================================================
   3. FOCUS SYSTEM
   ============================================================ */

.nora-workspace *:focus-visible {
  outline: 2px solid var(--nora-border-focus);
  outline-offset: 2px;
  border-radius: var(--nora-radius-sm);
}

.nora-workspace button:focus-visible,
.nora-workspace input:focus-visible,
.nora-workspace textarea:focus-visible {
  outline: 2px solid var(--nora-accent);
  outline-offset: 2px;
}

/* ============================================================
   4. ANIMATIONS / MOTION
   ============================================================ */

/* --- Entrances --- */
@keyframes nora-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nora-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nora-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nora-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* --- Status animations --- */
@keyframes nora-pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes nora-glow-breathe {
  0%, 100% { box-shadow: 0 0 8px var(--nora-accent-glow); }
  50% { box-shadow: 0 0 28px var(--nora-accent-glow); }
}

@keyframes nora-ring-expand {
  0% { box-shadow: 0 0 0 0 rgba(242, 106, 106, 0.35); }
  70% { box-shadow: 0 0 0 14px rgba(242, 106, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 106, 106, 0); }
}

@keyframes nora-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes nora-dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

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

@keyframes nora-listening-wave {
  0%, 100% { height: 8px; }
  50% { height: 20px; }
}

/* --- Utility classes --- */
.nora-fade-in {
  animation: nora-fade-in var(--nora-duration-normal) var(--nora-ease) both;
}

.nora-slide-up {
  animation: nora-slide-up var(--nora-duration-slow) var(--nora-ease) both;
}

.nora-slide-down {
  animation: nora-slide-down var(--nora-duration-normal) var(--nora-ease) both;
}

.nora-scale-in {
  animation: nora-scale-in var(--nora-duration-normal) var(--nora-ease-spring) both;
}

.nora-pulse {
  animation: nora-pulse-soft 2s ease-in-out infinite;
}

.nora-glow {
  animation: nora-glow-breathe 3s ease-in-out infinite;
}

.nora-recording-ring {
  animation: nora-ring-expand 1.5s ease-out infinite;
}

.nora-shimmer {
  background: linear-gradient(
    90deg,
    var(--nora-bg-surface) 0%,
    var(--nora-bg-elevated) 40%,
    var(--nora-bg-surface) 80%
  );
  background-size: 200% 100%;
  animation: nora-shimmer 2s linear infinite;
}

/* --- Staggered entrance --- */
.nora-stagger > *:nth-child(1) { animation-delay: 0ms; }
.nora-stagger > *:nth-child(2) { animation-delay: 50ms; }
.nora-stagger > *:nth-child(3) { animation-delay: 100ms; }
.nora-stagger > *:nth-child(4) { animation-delay: 150ms; }
.nora-stagger > *:nth-child(5) { animation-delay: 200ms; }
.nora-stagger > *:nth-child(6) { animation-delay: 250ms; }
.nora-stagger > *:nth-child(7) { animation-delay: 300ms; }
.nora-stagger > *:nth-child(8) { animation-delay: 350ms; }

/* --- Listening halo ring --- */
@keyframes nora-halo-ring {
  0% { transform: scale(1); opacity: 0.35; }
  100% { transform: scale(1.8); opacity: 0; }
}

.nora-halo-ring {
  position: relative;
}

.nora-halo-ring::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--nora-accent);
  animation: nora-halo-ring 2s ease-out infinite;
  pointer-events: none;
}

/* --- Listening overlay ring animations --- */
@keyframes nora-listening-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.08); opacity: 0.4; }
}

@keyframes nora-listening-ring-pulse-delay {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.06); opacity: 0.55; }
}

.nora-listening-ring {
  animation: nora-listening-ring-pulse 2s ease-in-out infinite;
}

.nora-listening-ring-delay {
  animation: nora-listening-ring-pulse-delay 2s ease-in-out infinite 0.3s;
}

/* --- Transcription shimmer bar --- */
@keyframes nora-transcribe-bar {
  0% { width: 20%; }
  50% { width: 80%; }
  100% { width: 20%; }
}

.nora-transcribe-bar {
  height: 2px;
  border-radius: 1px;
  background: var(--nora-accent);
  animation: nora-transcribe-bar 2s ease-in-out infinite;
}

/* --- Status glow pulse --- */
@keyframes nora-status-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 213, 229, 0.15); }
  50% { box-shadow: 0 0 12px 4px rgba(52, 213, 229, 0.15); }
}

.nora-status-glow {
  animation: nora-status-glow 2.5s ease-in-out infinite;
}

/* --- Processing dots --- */
.nora-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nora-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nora-accent);
  animation: nora-dot-pulse 1.4s ease-in-out infinite;
}
.nora-dots span:nth-child(2) { animation-delay: 0.2s; }
.nora-dots span:nth-child(3) { animation-delay: 0.4s; }

/* --- Listening bars --- */
.nora-listening-bars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}
.nora-listening-bars span {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--nora-accent);
  animation: nora-listening-wave 1s ease-in-out infinite;
}
.nora-listening-bars span:nth-child(2) { animation-delay: 0.15s; }
.nora-listening-bars span:nth-child(3) { animation-delay: 0.3s; }
.nora-listening-bars span:nth-child(4) { animation-delay: 0.45s; }
.nora-listening-bars span:nth-child(5) { animation-delay: 0.6s; }

/* --- Cockpit card hover lift --- */
@keyframes nora-card-lift-in {
  from { transform: translateY(0); box-shadow: var(--nora-shadow-xs); }
  to { transform: translateY(-2px); box-shadow: var(--nora-shadow-md); }
}

.nora-card-lift {
  transition:
    transform var(--nora-duration-fast) var(--nora-ease),
    box-shadow var(--nora-duration-fast) var(--nora-ease),
    border-color var(--nora-duration-fast) var(--nora-ease);
}
.nora-card-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--nora-shadow-md);
  border-color: var(--nora-border-default);
}

/* --- Timeline event entrance --- */
@keyframes nora-timeline-event-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.nora-timeline-event-in {
  animation: nora-timeline-event-in 280ms var(--nora-ease) both;
}

/* --- Hero state cross-fade --- */
@keyframes nora-state-transition {
  from { opacity: 0.3; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

.nora-state-transition {
  animation: nora-state-transition var(--nora-duration-slow) var(--nora-ease) both;
}

/* --- Success flash (1.2s ring of green light) --- */
@keyframes nora-success-flash {
  0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
  30% { box-shadow: 0 0 0 6px rgba(61, 220, 151, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
}

.nora-success-flash {
  animation: nora-success-flash 1.2s var(--nora-ease) both;
}

/* --- Danger pulse (urgent countdown) --- */
@keyframes nora-danger-pulse {
  0%, 100% { border-color: var(--nora-danger); box-shadow: 0 0 0 0 rgba(242, 106, 106, 0); }
  50% { border-color: var(--nora-danger); box-shadow: 0 0 0 4px rgba(242, 106, 106, 0.2); }
}

.nora-danger-pulse {
  animation: nora-danger-pulse 1.2s ease-in-out infinite;
}

/* ============================================================
   5. COCKPIT LAYOUT
   ============================================================ */

.nora-cockpit {
  display: grid;
  grid-template-columns: var(--nora-rail-width-left) minmax(0, 1fr) var(--nora-rail-width-right);
  grid-template-areas: "left center right";
  grid-gap: var(--nora-rail-gap);
  gap: var(--nora-rail-gap);
  flex: 1 1;
  min-height: 0;
  padding: var(--nora-space-4);
}

.nora-cockpit-rail-left { grid-area: left; }
.nora-cockpit-center { grid-area: center; }
.nora-cockpit-rail-right { grid-area: right; }

.nora-cockpit-rail-left,
.nora-cockpit-rail-right {
  display: flex;
  flex-direction: column;
  gap: var(--nora-space-3);
  min-height: 0;
  overflow-y: auto;
}

.nora-cockpit-center {
  display: flex;
  flex-direction: column;
  gap: var(--nora-space-4);
  min-height: 0;
  overflow: hidden;
}

/* Cockpit shell is always the active layout now — the legacy shell is
   retired. Mobile and tablet collapse to a single center column with
   the rails surfaced via drawers (see RailDrawerLayer). */
.nora-cockpit-shell { display: flex; flex-direction: column; flex: 1 1; min-height: 0; }
.nora-legacy-shell { display: none; }

/* Tablet + mobile: collapse rails to single center column.
   Desktop keeps the 3-zone grid. */
@media (max-width: 1279px) {
  .nora-cockpit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "center";
  }
  .nora-cockpit-rail-left,
  .nora-cockpit-rail-right {
    display: none;
  }
}

/* Tighter cockpit padding on small screens so every pixel counts. */
@media (max-width: 767px) {
  .nora-cockpit {
    padding: var(--nora-space-2);
    gap: var(--nora-space-2);
  }
  .nora-cockpit-center {
    gap: var(--nora-space-2);
  }
}

/* Drawer edge pills — visible on tablet AND mobile (both collapse rails). */
.nora-rail-edge-pill {
  display: none;
}

@media (max-width: 1279px) {
  .nora-rail-edge-pill {
    display: flex;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 64px;
    align-items: center;
    justify-content: center;
    background: var(--nora-bg-elevated);
    border: 1px solid var(--nora-border-accent);
    color: var(--nora-accent);
    cursor: pointer;
    z-index: var(--nora-z-overlay);
    transition: all var(--nora-duration-fast) var(--nora-ease);
  }
  .nora-rail-edge-pill:hover {
    background: var(--nora-bg-hover);
    box-shadow: var(--nora-shadow-glow);
  }
  .nora-rail-edge-pill-left {
    left: 0;
    border-left: none;
    border-radius: 0 var(--nora-radius-md) var(--nora-radius-md) 0;
  }
  .nora-rail-edge-pill-right {
    right: 0;
    border-right: none;
    border-radius: var(--nora-radius-md) 0 0 var(--nora-radius-md);
  }
  .nora-rail-edge-pill[data-has-new="true"] {
    animation: nora-glow-breathe 3s ease-in-out infinite;
  }
}

/* Mobile drawers: full-width sheet-style instead of fixed rail width. */
@media (max-width: 767px) {
  .nora-rail-drawer-left,
  .nora-rail-drawer-right {
    width: min(calc(100vw - 32px), 360px);
  }
}

.nora-rail-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 17, 31, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--nora-z-overlay);
  animation: nora-fade-in var(--nora-duration-normal) var(--nora-ease) both;
}

.nora-rail-drawer {
  position: fixed;
  top: var(--nora-header-height);
  bottom: var(--nora-input-height);
  padding: var(--nora-space-4);
  background: var(--nora-bg-app);
  border: 1px solid var(--nora-border-subtle);
  z-index: calc(var(--nora-z-overlay) + 1);
  display: flex;
  flex-direction: column;
  gap: var(--nora-space-3);
  overflow-y: auto;
  box-shadow: var(--nora-shadow-xl);
}

.nora-rail-drawer-left {
  left: 0;
  width: var(--nora-rail-width-left);
  border-left: none;
  border-radius: 0 var(--nora-radius-lg) var(--nora-radius-lg) 0;
  animation: nora-drawer-in-left var(--nora-duration-normal) var(--nora-ease) both;
}

.nora-rail-drawer-right {
  right: 0;
  width: var(--nora-rail-width-right);
  border-right: none;
  border-radius: var(--nora-radius-lg) 0 0 var(--nora-radius-lg);
  animation: nora-drawer-in-right var(--nora-duration-normal) var(--nora-ease) both;
}

@keyframes nora-drawer-in-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes nora-drawer-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ============================================================
   6. RESPONSIVE — MOBILE-FIRST
   ============================================================ */

@media (max-width: 640px) {
  .nora-workspace {
    --nora-header-height: 48px;
    --nora-input-height: 68px;
    --nora-text-display: 1.25rem;
    --nora-text-heading-xl: 1.125rem;
    --nora-text-heading-lg: 1rem;
    --nora-text-heading-md: 0.9375rem;
    --nora-text-body: 0.8125rem;
    --nora-text-body-sm: 0.75rem;
    --nora-text-caption: 0.625rem;
    --nora-space-4: 12px;
    --nora-space-5: 16px;
    --nora-space-6: 16px;
    --nora-space-8: 20px;
    --nora-card-max: 100%;
    --nora-workspace-max: 100%;
    --nora-radius-md: 10px;
    --nora-radius-lg: 12px;
  }

  /* Hide clock and user info text on small screens */
  .nora-workspace .nora-header-clock {
    display: none !important;
  }
  .nora-workspace .nora-header-user-info {
    display: none !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .nora-workspace {
    --nora-header-height: 56px;
    --nora-input-height: 76px;
    --nora-text-display: 1.5rem;
    --nora-text-heading-xl: 1.25rem;
    --nora-text-heading-lg: 1.125rem;
  }
}

/* ============================================================
   6b. SKIP LINKS (a11y)
   ============================================================ */

.nora-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 16px;
  background: var(--nora-bg-elevated);
  color: var(--nora-accent);
  border: 1px solid var(--nora-border-accent);
  border-radius: var(--nora-radius-sm);
  font-size: var(--nora-text-caption);
  font-weight: var(--nora-weight-semibold);
  text-decoration: none;
  letter-spacing: var(--nora-tracking-wide);
  z-index: var(--nora-z-modal);
  transform: translateY(-200%);
  transition: transform var(--nora-duration-fast) var(--nora-ease);
}

.nora-skip-link:focus,
.nora-skip-link:focus-visible {
  transform: translateY(8px);
  outline: 2px solid var(--nora-accent);
  outline-offset: 2px;
}

/* ============================================================
   7. SELECTION
   ============================================================ */

.nora-workspace ::selection {
  background: var(--nora-accent-soft);
  color: var(--nora-text-primary);
}

/* ============================================================
   8. REDUCED MOTION
   ============================================================ */

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