/* Diane Medical Web Application Stylesheet
 * Canonical Yak Design System (Light Paper & Night Slate)
 * Strictly adhering to:
 * - CONTENT FUNDAMENTALS & VISUAL FOUNDATIONS (yak-ds/readme.md)
 * - Two-Tier Token Rule & Yak Night Slate (DESIGN-NATIVE.md §6 & §7)
 * - DS Surfaces (Panel, ChatBubble, ChatChips), Controls (Button), Claims (Status)
 */

@import '../fonts/fonts.css';

:root {
  /* Canonical Yak DS Base Palette */
  --yak-ground: #f1ece2;          /* Page ground (warm unbleached paper) */
  --yak-paper: #fbf9f4;           /* Primary surfaces, panels, document ground */
  --yak-sand: #e8e2d5;            /* Containment surfaces, code */
  --yak-sand-2: #efeae0;          /* Lighter panel / incoming bubble ground */
  --yak-sand-3: #e3dccd;          /* Outgoing chat bubble */
  --yak-rule: #d8d0bf;            /* 1px rules between rows, link underlines */
  --yak-rule-2: #d6cdbc;          /* Panel outer border */
  --yak-rule-3: #e2dccf;          /* Bubble border */
  --yak-ink: #3a3733;             /* Primary text, button fill, solid strokes */

  /* Graphic Tier (Canonical DS: non-text graphics, buttons, pulse rings) */
  --yak-vermilion: #c3401f;       /* Record button fill, mic pulse ring, stop mark */
  --yak-vermilion-tint: #f2d8cd;
  --yak-vermilion-wash: #f7e9e3;  /* Error message background wash */
  --yak-grey-graphics: #7a7368;   /* Canonical DS graphical grey */
  --yak-grey-2: #9a9284;          /* Avatar fill */
  --yak-grey-3: #b9b2a4;          /* Secondary text on dark/ink */

  /* Text & Legibility Tier (Darkened Web for WCAG AA >= 4.5:1 normal text)
   * On ground (#f1ece2): grey is 5.89:1, vermilion is 5.04:1.
   * On paper (#fbf9f4):  grey is 6.59:1, vermilion is 5.64:1.
   * On sand (#e8e2d5):   grey is 5.37:1, vermilion is 4.60:1.
   */
  --yak-grey: #5f594f;            /* Secondary text, labels, metadata */
  --yak-grey-soft: #6b645a;       /* Tentative / preview text */
  --yak-vermilion-text: #b33a1c;  /* Readable vermilion text */
  --yak-unsure: #c87a1e;          /* Unsure / held mark */

  /* Surface & Text Semantics */
  --surface-page: var(--yak-ground);
  --surface-card: var(--yak-paper);
  --surface-contain: var(--yak-sand);
  --surface-code: var(--yak-sand);
  --surface-inverse: var(--yak-ink);
  --text-body: var(--yak-ink);
  --text-muted: var(--yak-grey);
  --text-inverse: var(--yak-ground);
  --text-accent: var(--yak-vermilion-text);
  --on-ink: var(--yak-ground);

  /* States & Effects */
  --hover: rgba(58, 55, 51, 0.05);
  --active: rgba(58, 55, 51, 0.10);
  --held-bg: rgba(200, 122, 30, 0.10);
  --held-border: #c87a1e;
  --stale-bg: var(--yak-vermilion-wash);
  --card-bg: var(--yak-paper);

  /* Radii per Yak DS */
  --radius-tag: 2px;
  --radius-btn: 2px;              /* DS buttons are near-square 2px */
  --radius-diagram: 5px;
  --radius-panel: 6px;            /* Screenshot / panel cards */
  --radius-boundary: 8px;         /* Chips, dialogs */
  --radius-bubble: 10px;          /* Chat bubbles */
  --radius-round: 50%;

  /* Shadows per Yak DS */
  --shadow-panel: 0 10px 34px rgba(58, 55, 51, 0.10);
  --shadow-hero: 0 14px 44px rgba(58, 55, 51, 0.16);

  /* Dot Grain per Yak DS (3.2% black, 5px pitch) */
  --grain: radial-gradient(rgba(0, 0, 0, 0.032) 0.6px, transparent 0.7px);
  --grain-size: 5px 5px;

  /* Typography */
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-system: system-ui, -apple-system, sans-serif;

  color-scheme: light;
}

/* Yak Night Slate (Inverted Warm Ink) Theme */
:root[data-theme="night"] {
  --yak-ground: #201e1c;          /* Warm charcoal ground */
  --yak-paper: #2b2825;           /* Dark card surface */
  --yak-sand: #332f2b;            /* Warm slate panel containment */
  --yak-sand-2: #2d2926;
  --yak-sand-3: #3b3631;          /* Outgoing chat bubble */
  --yak-rule: #45403a;            /* Muted 1px divider */
  --yak-rule-2: #524c45;          /* Panel border */
  --yak-rule-3: #4a443d;
  --yak-ink: #f1ece2;             /* Primary text: warm Yak ground! (10.05:1 on night ground) */

  /* Graphic Tier */
  --yak-vermilion: #e05d38;       /* Night vermilion for graphics & rings */
  --yak-vermilion-tint: #4d261b;
  --yak-vermilion-wash: rgba(224, 93, 56, 0.15);
  --yak-grey-graphics: #a8a195;
  --yak-grey-2: #524c45;
  --yak-grey-3: #7a7368;

  /* Text Tier (WCAG AA compliant) */
  --yak-grey: #a8a195;            /* Secondary text (6.5:1 on ground, 5.7:1 on card) */
  --yak-grey-soft: #918b80;
  --yak-vermilion-text: #ff7a54;  /* High-contrast vermilion text */
  --yak-unsure: #e5932a;

  --surface-page: var(--yak-ground);
  --surface-card: var(--yak-paper);
  --surface-contain: var(--yak-sand);
  --surface-code: var(--yak-sand);
  --surface-inverse: var(--yak-ink);
  --text-body: var(--yak-ink);
  --text-muted: var(--yak-grey);
  --text-inverse: var(--yak-ground);
  --text-accent: var(--yak-vermilion-text);
  --on-ink: #201e1c;

  --hover: rgba(241, 236, 226, 0.06);
  --active: rgba(241, 236, 226, 0.12);
  --held-bg: rgba(229, 147, 42, 0.18);
  --held-border: #e5932a;
  --stale-bg: rgba(224, 93, 56, 0.18);
  --card-bg: var(--yak-paper);

  --grain: radial-gradient(rgba(241, 236, 226, 0.032) 0.6px, transparent 0.7px);
  --shadow-panel: 0 10px 34px rgba(0, 0, 0, 0.40);
  --shadow-hero: 0 14px 44px rgba(0, 0, 0, 0.50);

  color-scheme: dark;
}

/* Reset and Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100vh;
  background-color: var(--yak-ground);
  background-image: var(--grain);
  background-size: var(--grain-size);
  color: var(--yak-ink);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400; /* DS Rule: titles weight 400, never bold */
  text-wrap: pretty;
  color: var(--yak-ink);
}

a {
  color: var(--yak-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--yak-rule);
  transition: color 0.15s, border-color 0.15s;
}
a:hover {
  color: var(--yak-vermilion-text);
  border-bottom-color: var(--yak-vermilion-text);
}

/* App Layout: Left Sidebar + Main Content */
.app-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Sidebar */
.sidebar {
  width: 300px;
  flex: 0 0 300px;
  background-color: var(--yak-paper);
  border-right: 1px solid var(--yak-rule);
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  gap: 16px;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid var(--yak-rule);
  padding-bottom: 14px;
}

.brand-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--yak-ink);
}

.brand-subtitle {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--yak-grey);
}

.sidebar-search {
  width: 100%;
}

.search-input {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--yak-ink);
  background-color: var(--yak-paper);
  border: 1px solid var(--yak-rule);
  border-radius: var(--radius-btn);
  outline: none;
  transition: border-color 0.15s;
}
.search-input:focus {
  border-color: var(--yak-ink);
}

.nav-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.desktop-nav-actions {
  display: block;
  width: 100%;
  margin-top: 12px;
  margin-bottom: 16px;
}

#nav-new-visit-btn {
  width: 100%;
  justify-content: center;
}

.recents-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  gap: 8px;
}

.section-label {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em; /* DS kicker tracking */
  color: var(--yak-grey);
  border-top: 2px solid var(--yak-ink); /* DS structural rule */
  padding-top: 10px;
  margin-top: 0;
}

.recents-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recent-item {
  padding: 10px 12px;
  border: 1px solid var(--yak-rule);
  border-radius: var(--radius-btn);
  cursor: pointer;
  background: var(--yak-paper);
  transition: background-color 0.15s, border-color 0.15s;
}
.recent-item:hover {
  background-color: var(--hover);
  border-color: var(--yak-ink);
}
.recent-item.active {
  border-color: var(--yak-ink);
  background-color: var(--yak-sand-2);
}

.recent-patient {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--yak-ink);
}

.recent-summary {
  font-family: var(--font-serif);
  font-size: 12.5px;
  color: var(--yak-grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.recent-date {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--yak-grey-soft);
  margin-top: 4px;
}

.no-recents {
  font-size: 13.5px;
  font-family: var(--font-serif);
  color: var(--yak-grey);
  font-style: italic; /* Status words italic */
  padding: 12px 0;
}

.sidebar-footer {
  border-top: 1px solid var(--yak-rule);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* Main Content Area */
.main-content {
  flex: 1;
  min-width: 0;
  padding: 24px min(5vw, 48px) 48px;
  overflow-y: auto;
  max-width: 1080px;
  margin: 0 auto;
}

/* Top Bar */
.top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--yak-rule);
}

.top-bar-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.top-bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-bar-label {
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--yak-grey);
  white-space: nowrap;
}

/* Unified DS Select Styling: height >= 36px, custom chevron, mono 13px, no vertical clipping */
select, .form-select, .top-bar-select {
  height: 36px;
  min-height: 36px;
  padding: 0 30px 0 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 34px;
  color: var(--yak-ink);
  background-color: var(--yak-paper);
  border: 1px solid var(--yak-rule);
  border-radius: var(--radius-btn);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%235f594f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

select:focus, .form-select:focus, .top-bar-select:focus {
  border-color: var(--yak-ink);
}

[data-theme="night"] select,
[data-theme="night"] .form-select,
[data-theme="night"] .top-bar-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23a8a195' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

/* Buttons and Controls (Yak DS Button: mono, 2px radius, inverting on hover) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1;
  color: var(--yak-ink);
  background: transparent;
  border: 1px solid var(--yak-ink);
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.btn:hover:not(:disabled) {
  background-color: var(--yak-ink);
  color: var(--yak-ground);
  border-color: var(--yak-ink);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--yak-ink);
  color: var(--yak-ground);
  border: 1px solid var(--yak-ink);
}
.btn-primary:hover:not(:disabled) {
  background-color: transparent;
  color: var(--yak-ink);
  border-color: var(--yak-ink);
}

.btn-danger {
  color: var(--yak-vermilion-text);
  border-color: var(--yak-vermilion);
  background: transparent;
}
.btn-danger:hover:not(:disabled) {
  background-color: var(--yak-vermilion);
  color: var(--yak-ground);
}

.btn-sm {
  padding: 6px 10px;
  font-size: 12px;
}

/* Record Button: vermilion disc/pill with mic-pulse ring while recording */
#visit-record-btn {
  background-color: var(--yak-vermilion);
  color: var(--yak-ground);
  border: 1px solid var(--yak-vermilion);
  border-radius: 9999px;
  padding: 10px 22px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  transition: background-color 0.15s;
}
#visit-record-btn:hover:not(:disabled) {
  background-color: #a83518;
  border-color: #a83518;
  color: var(--yak-ground);
}

#visit-stop-btn {
  background-color: var(--yak-vermilion);
  color: var(--yak-ground);
  border: 1px solid var(--yak-vermilion);
  border-radius: 9999px;
  padding: 10px 22px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  animation: mic-pulse 1.8s infinite;
}
#visit-stop-btn:hover:not(:disabled) {
  background-color: #a83518;
  border-color: #a83518;
  color: var(--yak-ground);
}

@keyframes mic-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(195, 64, 31, 0.65);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(195, 64, 31, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(195, 64, 31, 0);
  }
}

#visit-pause-btn {
  border-radius: var(--radius-btn);
  font-family: var(--font-mono);
  color: var(--yak-ink);
  border: 1px solid var(--yak-ink);
  background: transparent;
}
#visit-pause-btn:hover:not(:disabled) {
  background: var(--yak-ink);
  color: var(--yak-ground);
}

/* Badges & Status Words: italic per DS */
.badge {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13.5px;
  font-weight: 400;
  padding: 2px 6px;
  border-radius: var(--radius-tag);
}
.badge-draft {
  color: var(--yak-grey);
}
.badge-confirmed {
  color: var(--yak-grey);
}
.badge-stale {
  color: var(--yak-vermilion-text);
}

/* Page Views */
.view {
  display: none;
  flex-direction: column;
  gap: 24px;
}
.view.active {
  display: flex;
}

/* Form Styles */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 520px;
}
.form-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--yak-grey);
}
.form-input {
  padding: 8px 12px;
  font-family: var(--font-serif);
  font-size: 14.5px;
  color: var(--yak-ink);
  background-color: var(--yak-paper);
  border: 1px solid var(--yak-rule);
  border-radius: var(--radius-btn);
  outline: none;
  min-height: 36px;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.form-input:focus {
  border-color: var(--yak-ink);
}
.form-hint {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--yak-grey);
}

/* DS Panels: Sand/paper ground, 1px border, 6px radius, soft shadow, ruled strips */
.card, .panel {
  background-color: var(--yak-paper);
  border: 1px solid var(--yak-rule-2);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card {
  padding: 20px 24px;
  gap: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--yak-rule);
  padding-bottom: 12px;
}

.card-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--yak-ink);
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Level Meter */
.meter-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.level-meter {
  flex: 1;
  height: 6px;
  background: var(--yak-rule);
  border-radius: 3px;
  overflow: hidden;
}
.level-meter-fill {
  height: 100%;
  width: 0%;
  background: var(--yak-vermilion);
  transition: width 100ms ease;
}
.meter-time {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--yak-grey);
}

/* Active Recording Focus: 32px mono timer, vermilion stop pill with mic-pulse, ink-outline pause, small italic status */
.record-control-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.record-active-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.meter-time-prominent {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--yak-ink);
}
.btn-record-stop {
  background: var(--yak-vermilion);
  border: 1px solid var(--yak-vermilion);
  color: #ffffff;
  border-radius: 9999px;
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 0 0 rgba(195, 64, 31, 0.4);
  animation: mic-pulse 2s infinite;
  transition: background 0.15s ease;
}
.btn-record-stop:hover {
  background: var(--yak-vermilion-text);
  border-color: var(--yak-vermilion-text);
}
@keyframes mic-pulse {
  0% { box-shadow: 0 0 0 0 rgba(195, 64, 31, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(195, 64, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(195, 64, 31, 0); }
}
.rec-stop-dot {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 2px;
  display: inline-block;
}
.btn-outline-ink {
  background: transparent;
  border: 1px solid var(--yak-ink);
  color: var(--yak-ink);
  border-radius: var(--radius-btn);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-outline-ink:hover {
  background: var(--yak-sand-2);
}
.record-status-indicator {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-style: italic;
  color: var(--yak-grey);
  margin-left: 4px;
}
.upload-link-wrap {
  margin-top: 14px;
}
.upload-text-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--yak-grey);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.upload-text-link:hover {
  color: var(--yak-ink);
}

/* Progress bar */
.progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: var(--yak-rule);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--yak-ink);
  transition: width 200ms ease;
}

/* Visit View & Summary: Paper Panel with mono header strip and serif body */
#summary-card {
  padding: 0;
  gap: 0; /* the header strip sits directly on the body */
  background-color: var(--yak-paper);
  border: 1px solid var(--yak-rule-2);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

#summary-card-header {
  background-color: var(--yak-sand-2);
  border-bottom: 1px solid var(--yak-rule);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--yak-grey);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.summary-fields {
  display: flex;
  flex-direction: column;
  padding: 20px 24px 24px;
}

.summary-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid var(--yak-rule);
}
.summary-row:first-child {
  padding-top: 0;
}
.summary-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.summary-field-title {
  font-size: 11.5px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em; /* DS kicker tracking */
  color: var(--yak-grey);
}

.summary-field-content {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--yak-ink);
}

/* Rule-separated rows in findings & plan with tooth in mono */
.summary-field-content ul {
  list-style: none;
  padding: 0;
  margin: 4px 0;
}
.summary-field-content li {
  padding: 6px 0;
  border-bottom: 1px solid var(--yak-rule);
}
.summary-field-content li:last-child {
  border-bottom: none;
}
.summary-field-content strong {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--yak-ink);
  margin-right: 6px;
}

.summary-confirm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--yak-sand-2);
  border: 1px solid var(--yak-rule-2);
  border-radius: var(--radius-btn);
  margin-top: 4px;
}

/* Held text highlight */
.held-sentence {
  background-color: var(--held-bg);
  border-bottom: 1.5px dashed var(--held-border);
  padding: 1px 4px;
  border-radius: 2px;
}
.held-sentence::after {
  content: " (incert)";
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--held-border);
}

/* Stale & Error Notices: thin vermilion-wash strip, not big red boxes */
.stale-notice {
  background-color: var(--yak-vermilion-wash);
  border: 1px solid var(--yak-vermilion-tint);
  color: var(--yak-vermilion-text);
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  font-size: 13.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-error-banner {
  padding: 10px 16px;
  background-color: var(--yak-vermilion-wash);
  border: 1px solid var(--yak-vermilion-tint);
  color: var(--yak-vermilion-text);
  border-radius: var(--radius-btn);
  font-family: var(--font-serif);
  font-size: 14px;
  margin-bottom: 16px;
}

.app-notice-banner {
  padding: 10px 16px;
  background-color: var(--yak-sand-2);
  border: 1px solid var(--yak-rule);
  color: var(--yak-ink);
  border-radius: var(--radius-btn);
  font-family: var(--font-serif);
  font-size: 14px;
  margin-bottom: 16px;
}

.summary-pending, .summary-error {
  padding: 16px 20px;
  font-size: 14px;
  border-top: 1px solid var(--yak-rule);
}
.summary-pending {
  color: var(--yak-grey);
  font-style: italic; /* Status words italic */
  font-family: var(--font-serif);
}
.summary-error {
  color: var(--yak-vermilion-text);
  background: var(--yak-vermilion-wash);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Transcript Section: 2px ink rule above section */
.transcript-section {
  border-top: 2px solid var(--yak-ink);
  padding-top: 24px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Transcript Turns: distinct doctor vs patient bubbles, 100% full width */
.block-item {
  border: 1px solid var(--yak-rule);
  border-radius: var(--radius-bubble);
  padding: 12px 16px;
  background: var(--yak-paper);
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  transition: all 120ms ease;
}

.block-item.turn-dentist {
  background: var(--yak-paper);
  border: 1px solid var(--yak-rule-2);
}

.block-item.turn-patient {
  background: var(--yak-sand-2);
  border: 1px solid var(--yak-rule-3);
}

.block-item.turn-unsure,
.block-item.unsure {
  background: var(--yak-paper);
  border: 1px dashed #c87a1e;
}

.block-item.deleted {
  opacity: 0.45;
  background: transparent;
  text-decoration: line-through;
}

.block-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--yak-grey);
}
.block-role {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.role-dentist {
  color: var(--yak-ink);
}
.role-patient {
  color: var(--yak-grey);
}
.role-unsure {
  color: #c87a1e;
  font-weight: 600;
}

.block-time {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.block-time:hover {
  color: var(--yak-vermilion-text);
}

.block-text {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--yak-ink);
}

.block-text-edit {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--font-serif);
  font-size: 14.5px;
  color: var(--yak-ink);
  background: var(--yak-paper);
  border: 1px solid var(--yak-ink);
  border-radius: var(--radius-btn);
  resize: vertical;
}

.block-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.btn-action-link {
  background: none;
  border: none;
  padding: 2px 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--yak-grey);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
}
.btn-action-link:hover {
  color: var(--yak-ink);
  text-decoration: underline;
}
.btn-del-link:hover {
  color: var(--yak-vermilion-text) !important;
  text-decoration: underline;
}

/* Chat Section: 2px ink rule above section */
.chat-section {
  border-top: 2px solid var(--yak-ink);
  padding-top: 24px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* DS ChatChips style */
.chat-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--yak-rule);
  border-radius: var(--radius-boundary); /* 8px per DS */
  background: var(--yak-paper);
  color: var(--yak-ink);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.chip:hover {
  border-color: var(--yak-ink);
  background: var(--yak-sand-2);
}

/* Chat History: NO empty box bug (hidden when empty) */
.chat-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 380px;
  overflow-y: auto;
  padding: 12px 0;
}

.chat-history:empty,
.chat-history.hidden {
  display: none !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* DS ChatBubbles (10px radius, sand-3 outgoing, paper incoming) */
.chat-msg {
  max-width: 85%;
  line-height: 1.5;
}

.chat-msg-user {
  align-self: flex-end;
  background: var(--yak-sand-3);
  border: 1px solid var(--yak-rule-2);
  border-radius: var(--radius-bubble);
  padding: 8px 14px;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--yak-ink);
}

.chat-msg-assistant {
  align-self: flex-start;
  width: auto;
}

.chat-bubble-wrap {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.chat-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-avatar img {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.chat-msg-content {
  background: var(--yak-paper);
  border: 1px solid var(--yak-rule-3);
  border-radius: var(--radius-bubble);
  padding: 10px 14px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--yak-ink);
}

.chat-msg-assistant.held .chat-msg-content {
  border-color: var(--held-border);
  background-color: var(--held-bg);
}

.chat-msg-pending {
  align-self: flex-start;
  background: var(--yak-paper);
  border: 1px dashed var(--yak-rule);
  border-radius: var(--radius-bubble);
  padding: 8px 14px;
  color: var(--yak-grey);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13.5px;
}

.chat-input-bar {
  display: flex;
  gap: 8px;
}
.chat-input {
  flex: 1;
  padding: 10px 14px;
  font-family: var(--font-serif);
  font-size: 14.5px;
  color: var(--yak-ink);
  background: var(--yak-paper);
  border: 1px solid var(--yak-rule);
  border-radius: var(--radius-btn);
  outline: none;
  transition: border-color 0.15s;
}
.chat-input:focus {
  border-color: var(--yak-ink);
}

/* Modals & Dialogs */
.copy-dialog {
  border: 1px solid var(--yak-rule-2);
  border-radius: var(--radius-panel);
  background-color: var(--yak-paper);
  color: var(--yak-ink);
  padding: 24px;
  max-width: 520px;
  width: 90%;
  box-shadow: var(--shadow-hero);
  margin: auto;
}
.copy-dialog::backdrop {
  background: rgba(58, 55, 51, 0.45);
}
.copy-fallback-textarea {
  width: 100%;
  height: 220px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid var(--yak-rule);
  border-radius: var(--radius-btn);
  background: var(--yak-sand-2);
  color: var(--yak-ink);
  resize: vertical;
  box-sizing: border-box;
}

/* Utility classes to replace inline styles for strict CSP (style-src 'self') */
.hidden { display: none !important; }
.flex-row-center { display: flex; gap: 10px; align-items: center; }
.flex-row-wrap { display: flex; gap: 10px; flex-wrap: wrap; }
.flex-row-space { display: flex; justify-content: space-between; align-items: center; }
.flex-row-actions { display: flex; gap: 8px; }
.flex-row-gap-10 { display: flex; gap: 10px; }
.flex-row-gap-16 { display: flex; gap: 16px; }
.flex-col-gap-10 { display: flex; flex-direction: column; gap: 10px; }
.margin-top-4 { margin-top: 4px; }
.margin-top-6 { margin-top: 6px; }
.margin-top-10 { margin-top: 10px; }
.margin-top-14 { margin-top: 14px; }
.margin-top-16 { margin-top: 16px; }
.margin-bottom-6 { margin-bottom: 6px; }
.margin-bottom-10 { margin-bottom: 10px; }
.margin-divider { border: none; border-top: 1px solid var(--yak-rule); margin: 16px 0; }
.padding-left-20 { padding-left: 20px; }
.flex-1 { flex: 1; }
.font-bold { font-weight: 600; }
.font-extra-bold { font-weight: 700; }
.font-size-18 { font-size: 18px; font-weight: 400; }
.font-size-24 { font-size: 24px; font-weight: 400; }
.font-size-16 { font-size: 16px; font-weight: 400; }
.text-mono-bold { font-family: var(--font-mono); font-weight: 600; }
.text-mono-12 { font-family: var(--font-mono); font-size: 12px; color: var(--yak-grey); }
.text-mono-13 { font-family: var(--font-mono); font-size: 13px; }
.text-meta-grey { font-size: 13px; color: var(--yak-grey); margin-top: 4px; font-family: var(--font-mono); }
.cursor-pointer { cursor: pointer; }
.enroll-card-result { padding: 14px 16px; background: var(--yak-sand-2); border: 1px solid var(--yak-rule-2); border-radius: var(--radius-btn); }
.unconfirmed-list { padding-left: 20px; color: var(--yak-unsure); }
.chat-alert-banner { font-size: 11.5px; font-weight: 500; font-family: var(--font-mono); color: var(--held-border); margin-bottom: 4px; }
/* Visit Header & Flowing Meta Line */
.visit-header-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border-bottom: 1px solid var(--yak-rule);
  padding-bottom: 14px;
}
.visit-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--yak-grey);
  line-height: 1.4;
}
.visit-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.btn-meta-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--yak-grey);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
.btn-meta-link:hover {
  color: var(--yak-ink);
}
.btn-meta-delete:hover {
  color: var(--yak-vermilion-text) !important;
}
.meta-dot {
  color: var(--yak-grey);
  margin: 0 2px;
}

/* Clinical Findings & Treatment Plan: Structured Two-Column Layout */
.findings-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.finding-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--yak-sand-2);
}
.finding-row:last-child {
  border-bottom: none;
}
.finding-tooth-col {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--yak-grey);
}
.finding-desc-col {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--yak-ink);
}
@media (max-width: 600px) {
  .finding-row {
    grid-template-columns: 95px 1fr;
    gap: 10px;
  }
}

/* Settings View: Quiet Danger Zone */
.settings-danger-zone {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--yak-sand-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.danger-zone-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yak-grey);
  font-weight: 600;
}
.btn-quiet-danger {
  background: var(--yak-paper);
  border: 1px solid var(--yak-sand-2);
  color: var(--yak-grey);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-quiet-danger:hover {
  border-color: var(--yak-vermilion);
  color: var(--yak-vermilion-text);
  background: var(--yak-vermilion-tint);
}

/* Desktop Defaults for Mobile-specific elements */
.mobile-only {
  display: none !important;
}
.brand-mobile-bar {
  display: none;
}
.sidebar-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.desktop-nav-actions {
  display: block;
}
.margin-left-8 { margin-left: 8px; }
.font-size-11 { font-size: 11px; }
.font-size-12 { font-size: 12px; }
.chat-model-label { font-size: 11px; font-family: var(--font-mono); color: var(--yak-grey); margin-top: 4px; }
.summary-model-label { font-size: 11.5px; font-family: var(--font-mono); color: var(--yak-grey); }

/* Per-visit model switch, in the summary card header next to Copy / Regenerate. */
.visit-model-select {
  width: auto;
  min-height: 0;
  height: 32px;
  padding: 2px 28px 2px 8px;
  font-size: 12.5px;
}

/* A tooth number the transcript never says: shown as "36?" for the clinician to check. */
mark.tooth-unsaid {
  background: var(--yak-vermilion-tint);
  color: var(--yak-vermilion-text);
  border-radius: 3px;
  padding: 0 2px;
  cursor: help;
}

/* Desktop shell: the page itself never scrolls. Only the main area and the visits list scroll, so the brand,
   search, "Nova visita" and the footer buttons (Registre de veu, Configuració) stay in place. */
@media (min-width: 769px) {
  html, body {
    height: 100%;
    overflow: hidden;
  }
  .app-container {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }
  .sidebar {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .sidebar-body,
  .recents-section {
    min-height: 0;
  }
  .sidebar-footer {
    flex: none;
  }
  .main-content {
    height: 100%;
    max-width: none;
    margin: 0;
    padding-top: 0;
    /* The content column stays at most 1080px wide and centred, but the scrollbar sits at the window edge. */
    padding-inline: max(min(5vw, 48px), calc((100vw - 300px - 984px) / 2));
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .top-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-top: 24px;
    background-color: var(--yak-ground);
  }
}

/* Responsive Mobile Layout (390px viewport: single column, no horizontal scroll, >= 44px tap targets) */
@media (max-width: 768px) {
  html, body {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }
  .app-container {
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  .sidebar {
    width: 100%;
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--yak-rule);
    padding: 12px 16px;
    box-sizing: border-box;
  }
  .brand {
    margin-bottom: 0;
  }
  .brand-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }
  .brand-info {
    width: 100%;
  }
  .brand-title {
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
    margin: 0;
  }
  .brand-subtitle {
    display: none !important;
  }
  .brand-mobile-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .brand-mobile-bar .btn {
    flex: 1 1 calc(50% - 4px);
    width: 50%;
    min-width: 0;
    min-height: 40px;
    font-size: 13px;
    padding: 6px 8px;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-only {
    display: inline-flex !important;
  }
  .desktop-nav-actions {
    display: none !important;
  }
  .sidebar-body {
    display: none;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--yak-rule);
  }
  .sidebar.recents-open .sidebar-body {
    display: flex;
  }
  .recents-section {
    max-height: 220px;
  }
  .main-content {
    padding: 16px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .top-bar {
    width: 100%;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--yak-rule);
  }
  .top-bar-controls {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  .top-bar-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 4px;
    flex: none;
  }
  .top-bar-label {
    font-size: 11px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--yak-grey);
  }
  .top-bar-select {
    width: 100%;
    height: 40px;
    min-height: 40px;
    box-sizing: border-box;
  }
  /* Tap targets >= 44px on mobile */
  .btn, .chip, .form-input, .form-select, .top-bar-select {
    min-height: 44px;
    box-sizing: border-box;
  }
  .brand-mobile-bar .btn {
    min-height: 40px;
  }
  .btn-meta-link, .btn-action-link {
    min-height: auto;
    padding: 6px 4px;
  }
  .recent-item {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .block-item {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .chat-msg-user, .chat-msg-assistant {
    max-width: 100%;
    word-break: break-word;
  }
  .chat-input {
    min-height: 44px;
    min-width: 0;
  }
  #chat-send-btn {
    min-height: 44px;
    padding: 0 16px;
  }
  .copy-dialog {
    padding: 16px;
    width: 94%;
    max-width: 360px;
    box-sizing: border-box;
  }
  .card {
    padding: 16px;
    box-sizing: border-box;
  }
  #summary-card {
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  #summary-card-header {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .summary-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: flex-start;
  }
  #summary-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
  }
  #summary-card-actions .btn {
    width: 100%;
    min-height: 40px;
    font-size: 13px;
    padding: 6px 12px;
    box-sizing: border-box;
    justify-content: center;
  }
  .summary-fields {
    padding: 16px;
    box-sizing: border-box;
  }
  .summary-row:first-child {
    padding-top: 0;
  }
  .summary-row:last-child {
    padding-bottom: 0;
  }
  .finding-row {
    grid-template-columns: 85px 1fr;
    gap: 8px;
    width: 100%;
    word-break: break-word;
  }
  .finding-tooth-col {
    min-width: 0;
    word-break: break-word;
  }
  .finding-desc-col {
    min-width: 0;
    word-break: break-word;
  }
}

/* Print Styles */
@media print {
  @page {
    size: A4;
    margin: 15mm;
  }

  html, body {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
    min-width: 0 !important;
    width: 100% !important;
    font-size: 11pt !important;
  }

  .sidebar,
  nav,
  button,
  .btn,
  .chip,
  .chat-section,
  #chat-section,
  #view-new-visit,
  #view-enrollment,
  #view-settings,
  #visit-stale-notice,
  .visit-header-actions,
  #summary-card-actions,
  .summary-confirm-bar button,
  .block-actions,
  #audio-player,
  dialog,
  .copy-dialog,
  .block-item.deleted,
  #summary-pending-state,
  #summary-error-state {
    display: none !important;
  }

  .app-container {
    display: block !important;
    min-height: auto !important;
  }

  .main-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #view-visit.active {
    display: block !important;
    padding: 0 !important;
  }

  .card, #summary-card {
    border: 1px solid #ccc !important;
    background: #fff !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
    padding: 16px !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .visit-header-row {
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #ccc !important;
  }

  .transcript-section {
    margin-top: 20px !important;
  }

  .block-item {
    border-bottom: 1px solid #eee !important;
    padding: 8px 0 !important;
    background: #fff !important;
    color: #000 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .block-meta {
    margin-bottom: 4px !important;
  }

  .block-role {
    font-weight: bold !important;
    border: 1px solid #999 !important;
    padding: 1px 4px !important;
    color: #000 !important;
    background: transparent !important;
  }

  .block-time {
    color: #444 !important;
    font-size: 9pt !important;
  }

  .block-text {
    color: #000 !important;
  }
}

/* Separator between the model label and the draft status, only when both show. */
#summary-model-label:not(.hidden):not(:empty) ~ #summary-draft-badge:not(.hidden)::before {
  content: "· ";
  font-style: normal;
}

/* Chat answers rendered from markdown */
.chat-msg-content p { margin: 0 0 6px; }
.chat-msg-content p.md-h { font-weight: 600; }
.chat-msg-content ul, .chat-msg-content ol { margin: 0 0 6px; padding-left: 20px; }
.chat-msg-content li { margin: 2px 0; }
.chat-msg-content code { font-family: var(--font-mono, monospace); font-size: 0.92em; }