/* ============================================================================
   style.css — Corporate Design & Brand Standards (v1.0)

   Generated from "CORPORATE DESIGN STYLE SHEET.docx" (Virtual Human Platform).
   A light, enterprise-clinical system: Inter typography, an 8px spacing grid,
   Deep Clinical Blue as the primary, restrained semantic colors, subtle motion.

   Use the design tokens (CSS variables in :root) everywhere; do not hard-code
   colors, sizes, or spacing — the guide prohibits "random spacing values".
   ========================================================================== */

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

:root {
  /* ── 3. Primary color palette ───────────────────────────────────────── */
  --color-primary: #123E63;          /* Deep Clinical Blue — branding, headers, buttons */
  --color-primary-hover: #0F3452;    /* Primary button hover */
  --color-enterprise-blue: #2F6F9F;  /* Secondary UI accents, input focus */
  --color-cyan: #59B7D9;             /* Intelligent Cyan — interactive highlights */
  --color-accent: #0E93D5;           /* Client interactive cyan — buttons, links, hover, focus */
  --color-accent-hover: #0B7CB4;     /* Darker accent for button hover / pressed */
  --color-bg-panel: #EAF4F8;         /* Clinical Background Blue — soft panels/sections */
  --color-bg-app: #F7F9FB;           /* Soft Interface Gray — application background */

  /* ── 4. Neutral color system ────────────────────────────────────────── */
  --text-primary: #1E2933;
  --text-secondary: #5F6B76;
  --text-muted: #8B98A5;
  --border: #D8E1E8;                 /* Border Gray */
  --divider: #E8EDF2;                /* Divider Gray */
  --white: #FFFFFF;

  /* ── 5. Semantic status colors (kept restrained) ────────────────────── */
  --success: #2E8B57;
  --warning: #D89B2B;
  --error: #C44747;
  --info: #3B82F6;

  /* ── 6/7. Typography ────────────────────────────────────────────────── */
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ── 10. Spacing system (8px grid) ──────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 72px;

  /* ── 9. Layout maximum widths ───────────────────────────────────────── */
  --w-app: 1440px;
  --w-dashboard: 1280px;
  --w-reading: 760px;
  --w-form: 640px;
  --w-modal-min: 480px;
  --w-modal-max: 720px;

  /* ── Radius (11/12/14) ──────────────────────────────────────────────── */
  --radius-button: 8px;
  --radius-input: 10px;
  --radius-card: 16px;

  /* ── 12. Elevation ──────────────────────────────────────────────────── */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);

  /* ── 16. Motion ─────────────────────────────────────────────────────── */
  --motion-fast: 150ms;
  --motion-slow: 300ms;
  --easing: ease-out;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;            /* Standard body */
  line-height: 1.6;           /* Generous line spacing */
  color: var(--text-primary);
  background: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 7. Typography scale (sentence case, consistent hierarchy) ─────────── */
h1 { font-size: 56px; font-weight: 700; line-height: 64px; }
h2 { font-size: 42px; font-weight: 700; line-height: 50px; }
h3 { font-size: 32px; font-weight: 600; line-height: 40px; }
h4 { font-size: 24px; font-weight: 600; line-height: 32px; }
h5 { font-size: 20px; font-weight: 600; line-height: 28px; }
h6 { font-size: 18px; font-weight: 600; line-height: 26px; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-md); color: var(--text-primary); }

.body-lg  { font-size: 18px; font-weight: 400; }
.body     { font-size: 16px; font-weight: 400; }
.body-sm  { font-size: 14px; font-weight: 400; }
.caption  { font-size: 12px; font-weight: 400; color: var(--text-secondary); }

.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }

a { color: var(--color-accent); }

/* Wordmark accent: the "i" in typed "MediMentor" matches the logo's cyan. */
.brand-i { color: var(--color-accent); -webkit-text-fill-color: var(--color-accent); }

/* ── 9. Layout containers ───────────────────────────────────────────────*/
.container-app       { max-width: var(--w-app);       margin: 0 auto; padding: 0 var(--space-lg); }
.container-dashboard { max-width: var(--w-dashboard); margin: 0 auto; }
.container-reading   { max-width: var(--w-reading);   margin: 0 auto; }
.container-form      { max-width: var(--w-form);      margin: 0 auto; }

/* ── 11. Buttons (no pills, no gradients, minimal effects) ──────────────*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius-button);
  padding: 14px 24px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing),
              border-color var(--motion-fast) var(--easing),
              color var(--motion-fast) var(--easing);
}
.btn-primary   { background: var(--color-accent); color: var(--white); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-secondary { background: transparent; border-color: var(--color-accent); color: var(--color-accent); }
.btn-secondary:hover { background: var(--color-bg-panel); }

/* ── 12. Cards (lightweight, structured) ────────────────────────────────*/
.card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

/* Soft section panel */
.panel {
  background: var(--color-bg-panel);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}

/* ── 13. Navigation ─────────────────────────────────────────────────────*/
.navbar {
  height: 80px;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: 0 var(--space-lg);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--divider);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.navbar a, .nav-link {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--text-primary);
  text-decoration: none;
}
.navbar a:hover, .nav-link:hover { color: var(--color-accent); }

/* ── 14. Forms ──────────────────────────────────────────────────────────*/
.input,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 0 var(--space-md);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text-primary);
  background: var(--white);
  transition: border-color var(--motion-fast) var(--easing),
              box-shadow var(--motion-fast) var(--easing);
}
.input:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(14, 147, 213, 0.18);
}
textarea { height: auto; min-height: 96px; padding: var(--space-md); line-height: 1.6; }

/* ── 5. Semantic status helpers ─────────────────────────────────────────*/
.status-success { color: var(--success); }
.status-warning { color: var(--warning); }
.status-error   { color: var(--error); }
.status-info    { color: var(--info); }

/* ── 19. Accessibility: honor reduced-motion ────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* The honest interruption mark (019 Decision 3): what Carmen said before a
   barge-in stays; this small note records that she was cut off. Quiet by
   design: the record's truth, not a UI event. */
.msg-bub .interrupted-mark {
    opacity: 0.55;
    font-size: 0.85em;
    font-style: italic;
    white-space: nowrap;
}

/* ── Welcome coachmark (nudges.js) ───────────────────────────────────────────
   A one-time hint at session start, pointing down at the Talk / Hands-free dock
   controls. White card, cyan accents, soft shadow, gentle entrance. */
.coachmark {
    position: fixed;
    transform: translateX(-50%);
    max-width: 320px;
    background: var(--white);
    color: var(--text-primary);
    border-radius: 16px;
    padding: 18px 20px 16px;
    box-shadow: 0 12px 34px rgba(18, 62, 99, 0.24);
    z-index: 60;
    animation: coachmark-in 0.24s ease-out;
}
.coachmark p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.coachmark strong { color: var(--color-accent); font-weight: 700; }
.coachmark-ok {
    display: block;
    width: fit-content;
    margin-left: auto;          /* sit at the bottom-right of the card */
    background: var(--color-accent);
    color: var(--white);
    border: none;
    border-radius: 10px;
    padding: 9px 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.coachmark-ok:hover { background: var(--color-accent-hover); }
.coachmark::after {                 /* the downward tail */
    content: '';
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--white);
}
@keyframes coachmark-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Unread chat badge (nudges.js) ───────────────────────────────────────────
   Red count on the Chat dock button, with a gentle pulse (twice) on each new
   message. Red follows the messaging convention; the pulse stays calm. */
.chat-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--error);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--white);
    pointer-events: none;
}
.chat-badge.pulse { animation: chat-badge-pulse 1.1s ease-out 2; }
@keyframes chat-badge-pulse {
    0%   { box-shadow: 0 0 0 2px var(--white), 0 0 0 0 rgba(196, 71, 71, 0.55); }
    70%  { box-shadow: 0 0 0 2px var(--white), 0 0 0 9px rgba(196, 71, 71, 0); }
    100% { box-shadow: 0 0 0 2px var(--white), 0 0 0 0 rgba(196, 71, 71, 0); }
}