/* Design language follows dashboard_prototype.html: light paper, thin rules,
     Inter, a compact hero row, and a three-column stage of checklist | phone |
     agent stream. The live data wiring is unchanged - only the shell is. */
  :root{
    --font-ui:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --bg:#F5F6F8;
    --panel:#FFFFFF;
    --panel2:#EEF0F3;
    --line:#E1E4E9;
    --line-soft:#EAEDF1;

    --ink:#161A20;
    --ink-dim:#666D7A;
    --ink-faint:#767E8C;

    --blue:#2563EB;
    --violet:#6A3FE0;
    --green:#15803D;
    --amber:#B45309;
    --red:#DC2626;

    --phone-bezel:#1B1F27;
    --phone-line:#2A2F3A;
    --screen-bg:#0C0F14;
    --lcd-bg:#0C0F14;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; height:100%; }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-ui);
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
  }
  .mono{ font-variant-numeric:tabular-nums; font-weight:600; }
  :focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  .wrap{ height:100vh; display:flex; flex-direction:column; padding:12px 18px 12px; gap:12px; }

  /* ---------------- hero ---------------- */
  /* Two rows: the chrome (brand, counters, session picker) on top, then the goal
     across the full width - which is what lets a long goal wrap into one or two
     lines instead of being ellipsised. */
  .hero{ display:flex; flex-direction:column; gap:8px; flex-shrink:0; min-width:0; border-bottom:1px solid var(--line); padding-bottom:11px; }
  /* Row 1 is a single line, always. It carries every control, and the flexible
     ones (device, model, status, session label) give way by truncating rather
     than pushing the row into a second line. */
  .hero-top{ display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:nowrap; }
  .hero-ident{ display:flex; align-items:baseline; gap:7px; min-width:0; flex-shrink:1; }
  .device-name{ min-width:0; max-width:180px; font-size:12px; font-weight:600; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .device-size{ flex-shrink:0; font-size:10px; color:var(--ink-faint); white-space:nowrap; }
  .hero-model{ display:flex; align-items:center; gap:6px; min-width:0; flex-shrink:1; }
  .model-provider{
    flex-shrink:0; padding:2px 6px; border-radius:4px;
    font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-dim); background:rgba(154,160,172,0.16);
  }
  .model-name{ min-width:0; max-width:170px; font-size:11.5px; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .live-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; animation:pulseOpacity 1.8s ease-in-out infinite; }
  .live-dot.off{ background:var(--ink-faint); animation:none; }
  @keyframes pulseOpacity{ 0%,100%{ opacity:0.42; } 50%{ opacity:1; } }
  /* The goal is the page's headline: size and weight above everything else in the
     hero, with a small kicker labelling it. Deliberately not a left rule - the
     task cards and the stream turns already carry those. */
  .goal-row{ display:flex; align-items:baseline; gap:10px; min-width:0; }
  .goal-kicker{
    flex-shrink:0; font-size:10px; font-weight:600; text-transform:uppercase;
    letter-spacing:.09em; color:var(--ink-faint);
  }
  .goal{
    flex:1; min-width:0; margin:0;
    font-size:clamp(14px, 1.55vw, 18.5px); font-weight:600;
    line-height:1.32; letter-spacing:-.015em; color:var(--ink);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; overflow-wrap:anywhere; text-wrap:pretty;
  }
  .hero-stats{ display:flex; align-items:center; gap:14px; min-width:0; flex-shrink:1; margin-left:auto; }
  .hstat{ flex-shrink:0; text-align:right; }
  .hstat .v{ display:block; font-size:14px; font-weight:600; line-height:1.2; transition:opacity .12s ease; }
  .hstat .l{ display:block; font-size:10px; color:var(--ink-faint); margin-top:1px; }
  .hero-actions{ display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:0; flex-shrink:1; flex-wrap:nowrap; }
  .session-btn{
    display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:170px; flex-shrink:1;
    padding:5px 10px; background:var(--panel); border:1px solid var(--line); border-radius:6px;
    font-family:inherit; font-size:12px; color:var(--ink); cursor:pointer;
    transition:border-color .18s, box-shadow .18s;
  }
  .session-btn:hover{ border-color:var(--blue); box-shadow:0 1px 4px rgba(37,99,235,0.1); }
  .session-btn-tag{
    flex-shrink:0; padding:2px 6px; border-radius:4px;
    font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
    background:rgba(154,160,172,0.16); color:var(--ink-dim);
  }
  .session-btn-tag.live{ background:rgba(21,128,61,0.12); color:var(--green); }
  .session-btn-label{ min-width:0; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .session-btn-arrow{ flex-shrink:0; font-size:10px; color:var(--ink-faint); }

  /* ---------------- stage ---------------- */
  /* The phone track's max comes from JS: while the frame is height-bound the
     column shrinks to it, so a short window hands the slack to the stream
     instead of leaving the phone floating in dead space. The floor is only the
     frame's own minimum - the column no longer has to hold a row of controls. */
  .stage{ flex:1; min-height:0; display:grid; grid-template-columns:280px minmax(240px, var(--phone-w, 440px)) 1fr; gap:18px; }
  .col{ min-height:0; display:flex; flex-direction:column; }
  /* One heading treatment for every column: a small uppercase label with its
     meta on the right, so the three headings read as a set. */
  .col-heading{
    flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:10px;
    min-height:20px; margin:0 0 10px;
    font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);
  }
  .heading-hint{
    font-size:10.5px; font-weight:600; letter-spacing:.02em; text-transform:none;
    color:var(--ink-faint); white-space:nowrap;
  }
  .heading-hint.all-done{ color:var(--green); }