/* ============================================================
   ATLAS ENCOUNTER — AVA-SP
   Adaptive Virtual Assessment
   MedAtlas Learning Minds
============================================================ */


:root {

  --background: #f6f7f9;
  --background-top: #fcfcfd;

  --surface: rgba(255, 255, 255, 0.90);
  --surface-soft: rgba(255, 255, 255, 0.68);

  --ink: #111827;
  --ink-soft: #374151;

  --muted: #697386;
  --muted-light: #929baa;

  --accent: #263d64;
  --accent-soft: #edf1f7;

  --success: #45a36c;

  --danger: #aa4047;
  --danger-soft: #fff5f5;

  --line: rgba(17, 24, 39, 0.09);
  --line-strong: rgba(17, 24, 39, 0.15);

  --shadow:
    0 30px 80px rgba(20, 30, 48, 0.10);

  --radius-large: 28px;
  --radius-medium: 18px;

  --page-width: 1480px;

}


/* ============================================================
   RESET
============================================================ */

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


html {
  min-height: 100%;
}


body {

  margin: 0;

  min-height: 100vh;

  color: var(--ink);

  background:

    radial-gradient(
      circle at 78% 12%,
      rgba(38, 61, 100, 0.055),
      transparent 32%
    ),

    linear-gradient(
      180deg,
      var(--background-top) 0%,
      var(--background) 100%
    );

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;

}


button,
input,
textarea {

  font:
    inherit;

}


button {

  cursor:
    pointer;

}


button:disabled {

  cursor:
    not-allowed;

  opacity:
    0.45;

}


[hidden] {

  display:
    none !important;

}


/* ============================================================
   SHELL
============================================================ */

.avasp-shell {

  width:
    min(
      calc(100% - 48px),
      var(--page-width)
    );

  min-height:
    100vh;

  margin:
    0 auto;

  display:
    flex;

  flex-direction:
    column;

}


/* ============================================================
   HEADER
============================================================ */

.avasp-header {

  min-height:
    90px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  border-bottom:
    1px solid var(--line);

}


.brand {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

}


.brand-orbit {

  width:
    36px;

  height:
    36px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--line-strong);

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, 0.72);

}


.brand-orbit span {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--accent);

  box-shadow:
    0 0 0 5px
    rgba(38, 61, 100, 0.08);

}


.brand-copy {

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

}


.brand-kicker,
.section-kicker,
.card-kicker,
.control-label,
.course-badge,
.avasp-footer,
.encounter-state-label {

  text-transform:
    uppercase;

  letter-spacing:
    0.16em;

}


.brand-kicker {

  color:
    var(--muted-light);

  font-size:
    0.62rem;

  font-weight:
    800;

}


.brand-name {

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.08rem;

  letter-spacing:
    -0.01em;

}


.course-badge {

  padding:
    10px 15px;

  color:
    var(--muted);

  background:
    rgba(255, 255, 255, 0.70);

  border:
    1px solid var(--line);

  border-radius:
    999px;

  font-size:
    0.60rem;

  font-weight:
    800;

  white-space:
    nowrap;

}


/* ============================================================
   INTRO
============================================================ */

.avasp-intro {

  padding:
    58px 0 38px;

  max-width:
    820px;

}


.section-kicker {

  margin:
    0 0 18px;

  color:
    var(--muted);

  font-size:
    0.66rem;

  font-weight:
    800;

}


.hero-title {

  margin:
    0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      3.2rem,
      6vw,
      6rem
    );

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.055em;

}


.hero-title span {

  color:
    var(--accent);

  font-style:
    italic;

}


.hero-lead {

  max-width:
    700px;

  margin:
    27px 0 0;

  font-size:
    clamp(
      1.05rem,
      1.5vw,
      1.25rem
    );

  line-height:
    1.55;

  letter-spacing:
    -0.016em;

}


.hero-copy {

  max-width:
    720px;

  margin:
    15px 0 0;

  color:
    var(--muted);

  font-size:
    0.95rem;

  line-height:
    1.72;

}


/* ============================================================
   ENCOUNTER CONTROL
============================================================ */

.encounter-control-card {

  display:
    grid;

  grid-template-columns:
    minmax(190px, 0.9fr)
    1px
    minmax(200px, 1fr)
    1px
    minmax(250px, 1.15fr)
    1px
    minmax(200px, 0.85fr);

  align-items:
    stretch;

  overflow:
    hidden;

  background:
    var(--surface);

  border:
    1px solid var(--line);

  border-radius:
    var(--radius-medium);

  box-shadow:
    0 18px 50px
    rgba(20, 30, 48, 0.06);

  backdrop-filter:
    blur(20px);

}


.control-block,
.control-action {

  min-width:
    0;

  padding:
    20px 22px;

}


.control-divider {

  width:
    1px;

  margin:
    17px 0;

  background:
    var(--line);

}


.control-label {

  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--muted-light);

  font-size:
    0.56rem;

  font-weight:
    800;

}


.control-block strong {

  color:
    var(--ink);

  font-size:
    0.95rem;

}


.id-row {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.control-helper {

  margin:
    7px 0 0;

  color:
    var(--muted);

  font-size:
    0.72rem;

  line-height:
    1.45;

}


.control-center {

  text-align:
    center;

}


.instructor-block input {

  width:
    100%;

  padding:
    10px 12px;

  color:
    var(--ink);

  background:
    rgba(255,255,255,0.72);

  border:
    1px solid var(--line-strong);

  border-radius:
    9px;

  outline:
    none;

}


.instructor-block input:focus {

  border-color:
    var(--accent);

  box-shadow:
    0 0 0 3px
    rgba(38,61,100,0.08);

}


.control-action {

  display:
    flex;

  justify-content:
    center;

  flex-direction:
    column;

}


/* ============================================================
   BUTTONS
============================================================ */

.primary-button {

  min-height:
    47px;

  padding:
    0 18px;

  color:
    white;

  background:
    var(--accent);

  border:
    0;

  border-radius:
    10px;

  font-weight:
    750;

  box-shadow:
    0 10px 24px
    rgba(38,61,100,0.16);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease;

}


.primary-button:hover:not(:disabled) {

  transform:
    translateY(-1px);

  box-shadow:
    0 14px 30px
    rgba(38,61,100,0.20);

}


.secondary-button,
.icon-button {

  color:
    var(--accent);

  background:
    rgba(255,255,255,0.72);

  border:
    1px solid var(--line);

  border-radius:
    8px;

}


.secondary-button {

  padding:
    8px 12px;

  font-size:
    0.72rem;

  font-weight:
    750;

}


.icon-button {

  width:
    29px;

  height:
    29px;

}


.danger-button {

  padding:
    10px 16px;

  color:
    var(--danger);

  background:
    var(--danger-soft);

  border:
    1px solid
    rgba(170,64,71,0.24);

  border-radius:
    9px;

  font-size:
    0.76rem;

  font-weight:
    750;

}


/* ============================================================
   PRIVACY
============================================================ */

.privacy-banner {

  margin-top:
    13px;

  padding:
    12px 17px;

  display:
    flex;

  gap:
    7px;

  flex-wrap:
    wrap;

  color:
    var(--accent);

  background:
    var(--accent-soft);

  border:
    1px solid
    rgba(38,61,100,0.08);

  border-radius:
    11px;

  font-size:
    0.76rem;

  line-height:
    1.5;

}


/* ============================================================
   MAIN STAGE
============================================================ */

.avasp-stage {

  display:
    grid;

  grid-template-columns:
    minmax(420px, 0.94fr)
    minmax(560px, 1.06fr);

  gap:
    22px;

  align-items:
    start;

  padding:
    22px 0;

}


/* ============================================================
   NOTE CARD
============================================================ */

.note-card,
.agent-card,
.transcript-card,
.evaluation-card {

  overflow:
    hidden;

  background:
    var(--surface);

  border:
    1px solid var(--line);

  border-radius:
    var(--radius-large);

  box-shadow:
    var(--shadow);

  backdrop-filter:
    blur(24px);

}


.card-header {

  min-height:
    67px;

  padding:
    15px 20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  border-bottom:
    1px solid var(--line);

}


.card-kicker {

  color:
    var(--muted-light);

  font-size:
    0.54rem;

  font-weight:
    800;

}


.card-header h2,
.evaluation-card h2 {

  margin:
    4px 0 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight:
    400;

  letter-spacing:
    -0.025em;

}


.note-section {

  display:
    grid;

  grid-template-columns:
    40px 1fr;

  gap:
    14px;

  padding:
    20px;

  border-bottom:
    1px solid var(--line);

}


.note-section:last-child {

  border-bottom:
    0;

}


.soap-letter {

  width:
    36px;

  height:
    36px;

  display:
    grid;

  place-items:
    center;

  color:
    var(--accent);

  background:
    var(--accent-soft);

  border-radius:
    10px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight:
    700;

}


.note-content label {

  display:
    block;

  font-weight:
    750;

}


.note-hint {

  display:
    block;

  margin-top:
    4px;

  color:
    var(--muted-light);

  font-size:
    0.72rem;

  line-height:
    1.45;

}


.note-content textarea {

  width:
    100%;

  min-height:
    100px;

  margin-top:
    11px;

  padding:
    10px 2px;

  color:
    var(--ink-soft);

  background:

    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 30px,
      rgba(17,24,39,0.09) 31px
    );

  border:
    0;

  outline:
    none;

  resize:
    vertical;

  line-height:
    31px;

}


.note-content textarea:disabled {

  opacity:
    0.50;

}


/* ============================================================
   AGENT
============================================================ */

.agent-card {

  min-height:
    660px;

}


.agent-card-header {

  min-height:
    54px;

  padding:
    0 20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  border-bottom:
    1px solid var(--line);

  color:
    var(--muted);

  font-size:
    0.74rem;

}


.agent-status {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    #4b5563;

  font-weight:
    700;

}


.status-light {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #aab1bc;

  box-shadow:
    0 0 0 4px
    rgba(120,128,140,0.10);

  transition:
    background 240ms ease,
    box-shadow 240ms ease;

}


.status-light.ready {

  background:
    var(--success);

  box-shadow:
    0 0 0 4px
    rgba(69,163,108,0.10);

}


.agent-state {

  color:
    var(--muted-light);

}


/* ============================================================
   D-ID HOST
============================================================ */

.agent-host {

  position:
    relative;

  width:
    100%;

  height:
    606px;

  min-height:
    606px;

  overflow:
    hidden;

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,0.82),
      rgba(249,250,252,0.97)
    );

}


/* ============================================================
   FIGURE-AVA LOADER
============================================================ */

.agent-loader {

  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    16px;

  color:
    var(--muted);

  pointer-events:
    none;

  transition:
    opacity 300ms ease;

}


.agent-loader.hidden {

  opacity:
    0;

}


.agent-loader p {

  margin:
    0;

  font-size:
    0.82rem;

}


.figure-eight-loader {

  position:
    relative;

  width:
    76px;

  height:
    38px;

}


.loop {

  position:
    absolute;

  top:
    4px;

  width:
    31px;

  height:
    31px;

  border:
    1.5px solid
    rgba(38,61,100,0.20);

  border-top-color:
    var(--accent);

  border-radius:
    50%;

  animation:
    figureEightSpin
    1.6s linear infinite;

}


.loop-left {

  left:
    8px;

}


.loop-right {

  right:
    8px;

  animation-direction:
    reverse;

}


@keyframes figureEightSpin {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


/* ============================================================
   ENCOUNTER FOOTER
============================================================ */

.encounter-footer {

  margin-top:
    14px;

  padding:
    15px 18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  background:
    var(--surface-soft);

  border:
    1px solid var(--line);

  border-radius:
    var(--radius-medium);

}


.encounter-state-label {

  display:
    block;

  margin-bottom:
    4px;

  color:
    var(--muted-light);

  font-size:
    0.52rem;

  font-weight:
    800;

}


.encounter-footer strong {

  font-size:
    0.82rem;

}


.clinical-note {

  max-width:
    650px;

  margin:
    15px auto 0;

  color:
    var(--muted-light);

  text-align:
    center;

  font-size:
    0.70rem;

  line-height:
    1.62;

}


/* ============================================================
   TRANSCRIPT
============================================================ */

.transcript-card {

  margin:
    0 0 22px;

}


.transcript-status {

  color:
    var(--muted-light);

  font-size:
    0.68rem;

}


.transcript-body {

  min-height:
    150px;

  padding:
    20px;

}


.transcript-empty {

  min-height:
    110px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  color:
    var(--muted);

  text-align:
    center;

}


.transcript-empty p {

  max-width:
    560px;

  margin:
    8px 0 0;

  font-size:
    0.78rem;

  line-height:
    1.55;

}


/* ============================================================
   EVALUATION
============================================================ */

.evaluation-card {

  margin-bottom:
    22px;

  padding:
    24px;

}


.evaluation-card h2 {

  margin-top:
    5px;

}


#evaluation-content {

  margin-top:
    15px;

  color:
    var(--muted);

  font-size:
    0.86rem;

  line-height:
    1.65;

}


/* ============================================================
   FOOTER
============================================================ */

.avasp-footer {

  min-height:
    72px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  border-top:
    1px solid var(--line);

  color:
    var(--muted-light);

  font-size:
    0.54rem;

  font-weight:
    800;

}


.footer-line {

  width:
    28px;

  height:
    1px;

  background:
    var(--line-strong);

}


/* ============================================================
   TABLET
============================================================ */

@media
(max-width: 1120px) {

  .encounter-control-card {

    grid-template-columns:
      1fr 1fr;

  }


  .control-divider {

    display:
      none;

  }


  .control-block,
  .control-action {

    border-bottom:
      1px solid var(--line);

  }


  .avasp-stage {

    grid-template-columns:
      1fr;

  }


  .avasp-agent-area {

    order:
      -1;

  }

}


/* ============================================================
   MOBILE
============================================================ */

@media
(max-width: 720px) {

  .avasp-shell {

    width:
      min(
        calc(100% - 28px),
        var(--page-width)
      );

  }


  .course-badge {

    display:
      none;

  }


  .avasp-intro {

    padding-top:
      38px;

  }


  .hero-title {

    font-size:
      clamp(
        3.1rem,
        16vw,
        5rem
      );

  }


  .encounter-control-card {

    grid-template-columns:
      1fr;

  }


  .agent-card {

    min-height:
      720px;

  }


  .agent-host {

    height:
      666px;

    min-height:
      666px;

  }


  .agent-state {

    display:
      none;

  }


  .encounter-footer {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .avasp-footer {

    padding:
      20px 0;

    flex-wrap:
      wrap;

    line-height:
      1.5;

  }

}