/* ═══════════════════════════════════════════════════════════════════
   Theme — עיצוב רפואי מודרני (תכלת/טורקיז קליני + ירוק בריאות)
   רגוע, מקצועי ואמין — עם נגיעה עכשווית של AI. נטען אחרי styles.css.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --navy: #0e7490;        /* תכלת קליני ראשי */
  --navy-2: #0891b2;      /* תכלת בהיר */
  --navy-deep: #0c4a5e;   /* תכלת עמוק לרקעים */
  --orange: #14b8a6;      /* טורקיז — צבע ההדגשה */
  --bg: #eef5f8;          /* רקע תכלכל רך ונקי */
  --surface: #ffffff;
  --ink: #102a33;
  --muted: #5a7280;
  --border: #d8e6ec;
  --rec: #e11d48;         /* אדום הקלטה (רך) */
  --ok: #10b981;          /* ירוק בריאות */
  --accent: #14b8a6;
  --grad-primary: linear-gradient(135deg, #0e7490, #0891b2 60%, #14b8a6);
  --grad-ai: linear-gradient(120deg, #0891b2, #14b8a6 55%, #2dd4bf);
  --shadow-sm: 0 2px 10px rgba(13, 74, 94, .06);
  --shadow-md: 0 14px 32px rgba(13, 74, 94, .10);
  --shadow-lg: 0 28px 60px rgba(13, 74, 94, .16);
}

/* רקע קליני נקי עם נגיעות תכלת רכות */
body {
  background:
    radial-gradient(900px 520px at 90% -10%, rgba(20, 184, 166, .10), transparent 60%),
    radial-gradient(820px 480px at -8% 8%, rgba(8, 145, 178, .10), transparent 58%),
    radial-gradient(760px 600px at 55% 124%, rgba(14, 116, 144, .07), transparent 55%),
    var(--bg);
}

/* ── Topbar — גרדיאנט תכלת קליני ── */
.topbar {
  background: linear-gradient(110deg, #0c4a5e, #0e7490 46%, #0891b2 82%, #14b8a6);
  border-bottom: none;
  box-shadow: 0 10px 38px rgba(14, 116, 144, .28);
  position: relative; overflow: hidden;
}
.topbar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(440px 170px at 10% -10%, rgba(45, 212, 191, .30), transparent 62%),
    radial-gradient(380px 180px at 74% 130%, rgba(8, 145, 178, .28), transparent 60%);
}
.topbar > * { position: relative; z-index: 1; }
.brand-logo {
  background: rgba(255, 255, 255, .96); border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.brand-text h1 {
  font-family: 'Frank Ruhl Libre', 'Assistant', serif;  /* כותרת רפואית מכובדת */
  font-weight: 800; letter-spacing: -.2px;
  display: inline-flex; align-items: center; gap: 11px;
}
.brand-text h1::after {
  content: "✚ AI"; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  background: rgba(255, 255, 255, .92); color: #0e7490;
  padding: 3px 10px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.brand-text .sub { color: #c9eef2; }
.top-status {
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .26);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #e6fbff;
}

/* ── כרטיסים: controls / issued-panel — נקי ומוגבה ── */
.controls, .issued-panel {
  border-radius: 22px; border: 1px solid var(--border);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}

/* ── תיבות התמלול/הסיכום — כרטיס נקי ── */
.box { border-radius: 20px; border: 1px solid var(--border); box-shadow: var(--shadow-md); }

/* ── כפתור "התחל הקלטת ביקור" ── */
.rec-btn {
  background: var(--grad-primary); border: none; border-radius: 999px;
  box-shadow: 0 12px 30px rgba(14, 116, 144, .35);
  transition: transform .16s ease, box-shadow .16s ease;
}
.rec-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(14, 116, 144, .45); }
.rec-btn.recording { background: linear-gradient(135deg, #e11d48, #f43f5e); box-shadow: 0 12px 30px rgba(225, 29, 72, .4); }

/* ── כפתורים משניים ── */
.secondary-btn { border-radius: 13px; transition: transform .12s ease, box-shadow .12s ease; }
.secondary-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ── כפתורי המסמכים — גווני מרפאה רכים ── */
.action-btn {
  border-radius: 15px; font-weight: 700; box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease;
}
.action-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.action-btn.tone-visit { background: #e7f3f8; border-color: #c8e3ee; color: #0e6173; }
.action-btn.tone-visit svg { color: #0891b2; }
.action-btn.tone-rx { background: #e4f6f1; border-color: #bfe7dd; color: #0b6b61; }
.action-btn.tone-rx svg { color: #0e9488; }
.action-btn.tone-ref { background: #eaf1fb; border-color: #cdddf3; color: #2456a0; }
.action-btn.tone-ref svg { color: #2f6fd0; }
.action-btn.tone-sick { background: #fbf2e7; border-color: #f0dcc2; color: #95611c; }
.action-btn.tone-sick svg { color: #d18a2e; }
.action-btn.doc-ready { background: #e6f7ec; border-color: #bce5cb; color: #15803d; }
.action-btn.doc-ready svg { color: #16a34a; }

/* פוקוס נגיש + פס גלילה עדין */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #b9d2db; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #97bcc8; }