/* O-101 — THE PVT3 TOP BANNER (Phase 1 mockup styling, David's order 2026-08-14 + the Ask PVT3 mic amendment). Replaces .topbar's 76px header with a slim, symmetrical ~44px bar. Light theme only, matching the app's existing token set in styles.css (:root). */ .pvt3-banner{ /* 44px -> 62px (David, 2026-08-15): +18px to fit the curved ASK PVT3 label under the mic, under his ~20px max. align-items:center on this grid re-centers every column (left/center/right) automatically in the taller bar -- no per-column height rules needed (symmetry law). */ height:62px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); display:grid; /* SYMMETRY LAW: outer columns both 1fr so the center column (the mic) sits at the bar's true geometric center regardless of cluster width, and re-centers automatically as items are added/removed on either side. */ grid-template-columns:1fr auto 1fr; align-items:center; padding:0 20px; position:sticky; top:0; z-index:4; gap:10px; } .pvt3-banner-left{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden} .pvt3-banner-right{display:flex;align-items:center;gap:7px;justify-content:flex-end;min-width:0} .pvt3-banner-divider{width:1px;height:20px;background:var(--line);margin:0 5px;flex:0 0 auto} .pvt3-banner-page-title{font-size:13px;font-weight:800;letter-spacing:-.2px;color:var(--ink); white-space:nowrap;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;min-width:34px} .pvt3-banner-icon-btn{ width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center; border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer; } .pvt3-banner-icon-btn:hover{background:#f0f3f8;border-color:#b9d4fa} .pvt3-banner-icon-btn img{width:26px;height:26px;object-fit:contain;display:block} /* Partner logo tiles only — bumped ~9% (David, 2026-08-15, cap ~10%), the Google Calendar/Gmail launch buttons stay at the base 34px/26px above. */ .pvt3-banner-icon-btn.partner{width:37px;height:37px} .pvt3-banner-icon-btn.partner img{width:28px;height:28px} .pvt3-banner-icon-btn svg{display:block} /* LabCorp's asset has no wordmark — labeled, not icon-only (David's approved recommendation). Same height as the plain icon buttons so the row stays level; the label sits inline, widening just this one button. */ /* .pvt3-banner-icon-labeled removed 2026-08-15 (punch list item 6): LabCorp is icon-only now, same as every other partner icon. */ .pvt3-banner-pill{ display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px; border:1px solid var(--line);background:#fff;border-radius:999px;color:var(--ink); font-size:12px;font-weight:760;cursor:pointer;white-space:nowrap; } .pvt3-banner-pill:hover{border-color:#b9d4fa;background:var(--blue-soft);color:var(--blue-dark)} .pvt3-banner-pill svg{flex:0 0 auto} .pvt3-banner-welcome{border-color:#e4dbf7;color:#5f3f9e} .pvt3-banner-welcome:hover{background:var(--purple-soft);border-color:#cbb8ec} /* #651 — Quick Imaging Order: pastel, faded red */ .pvt3-banner-qio{background:#fdf0ef;border-color:#f2cfcc;color:#a8433f} .pvt3-banner-qio:hover{background:#fbe2df;border-color:#e9b3ae;color:#93332f} .pe-finder-welcome{margin:0 0 12px} /* "Quick Imaging Order" is longer than "Welcome Email" was: below 1800 px the two left pills drop their icons and tighten, so Email Patient never slides under the mic (measured by _651_proveBanner at 1512 and 1366) */ @media (max-width:1800px){ .pvt3-banner-left .pvt3-banner-qio svg,.pvt3-banner-left .pvt3-banner-email svg{display:none} .pvt3-banner-left .pvt3-banner-qio,.pvt3-banner-left .pvt3-banner-email{padding:0 9px} } @media (max-width:1440px){ .pvt3-banner-left{gap:3px} .pvt3-banner-left .pvt3-banner-divider{margin:0 3px} .pvt3-banner-icon-btn.partner{width:31px;height:31px} .pvt3-banner-icon-btn.partner img{width:24px;height:24px} .pvt3-banner-left .pvt3-banner-qio,.pvt3-banner-left .pvt3-banner-email{padding:0 7px} } /* ── ASK PVT3 — the center anchor ─────────────────────────────────── */ /* Originally the label was position:absolute so only the 32px mic set the center grid track's width (a wide straight-text label was silently stealing width from both 1fr side columns — the original left-cluster/ mic overlap bug). The curved SVG replacing it (David, 2026-08-15) is 60px wide -- a 28px difference from the mic, still well short of that original ~50-60px-wide STRAIGHT text label's overlap risk since this sits BELOW the mic in a column, not beside it in a row -- so it can sit in NORMAL FLOW as a real second row. Mic-then-arc as one centered column is also the visually correct read for a "badge/seal" design: the icon sits slightly above true center, the curved label wraps its underside below. GEOMETRY (law 5.15 — verified by rendering + looking, not derived by eye): sweep-flag=0 is the one that curves the text BELOW the path outward, away from the mic — sweep-flag=1 (the first, REJECTED attempt) put the text on the wrong side of the path, overlapping the mic ("AS" and "3" visible at the edges, everything else hidden behind the circle). Confirmed against a real rendered screenshot before this shipped again. */ .pvt3-banner-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:0 0 auto} .pvt3-ask-mic{ width:32px;height:32px;border-radius:50%;border:0;cursor:not-allowed; display:grid;place-items:center;transition:transform .15s;position:relative; } .pvt3-ask-mic:hover{transform:scale(1.06)} .pvt3-ask-label-arc{display:block;pointer-events:none;overflow:visible} .pvt3-ask-label-arc text{ font-size:8.5px;font-weight:800;letter-spacing:.04em;fill:#8b93a3;text-transform:uppercase; } .pvt3-banner-search{ position:relative;display:flex;align-items:center;gap:6px;height:30px; border:1px solid var(--line);border-radius:999px;background:#f7f9fc;padding:0 12px; width:210px;min-width:0; } .pvt3-banner-search span{color:#9aa4b5;font-size:13px} .pvt3-banner-search input{border:0;background:transparent;outline:0;font-size:12px;color:var(--ink);width:100%} .pvt3-banner-search-results{ position:absolute;top:36px;right:0;width:260px;background:#fff;border:1px solid var(--line); border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:10;max-height:280px;overflow-y:auto; } .pvt3-search-hit{display:block;width:100%;text-align:left;border:0;background:transparent;padding:8px 9px; border-radius:8px;font-size:12px;font-weight:650;color:var(--ink);cursor:pointer} .pvt3-search-hit:hover{background:var(--blue-soft)} .pvt3-search-empty{padding:10px;color:var(--muted);font-size:12px;text-align:center} /* Amendment 2 (David, 2026-08-14): saved-dot, avatar and View-As removed from the banner (quiet-success law 4.27 + explicit call). Identity now lives quietly in the left nav — see .pvt3-nav-identity below. */ .pvt3-nav-identity{display:flex;flex-direction:column;gap:4px;padding:2px 2px 16px;margin-bottom:4px; border-bottom:1px solid rgba(255,255,255,.08)} .pvt3-nav-identity-name{font-size:11px;font-weight:700;color:rgba(255,255,255,.55); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pvt3-nav-identity-role{font-size:10px;font-weight:750;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.04em} .pvt3-nav-viewas-select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.75);font-size:10.5px;font-weight:700;border-radius:6px;padding:3px 6px; width:fit-content;outline:0} .pvt3-nav-viewas-select option{color:#16213a} /* ── MODALS shared shell reused (.modal-backdrop etc. already in styles.css) */ .pvt3-banner-modal{width:min(720px,100%)} /* Contacts — capped to the PDF viewer's ACTUAL width (David, 2026-08-15, defect report #2). record-document-viewer.css defines .p3-record-viewer-modal TWICE — an early min(96vw,1840px) rule, then a SECOND rule 900+ lines later (explicitly commented "appended last so they win without editing the originals") that narrows it to min(94vw,960px), matching PVT2's 900px page + gutters. The first number is dead CSS; the second is what actually renders. Verified live (functions/scripts/proveContactsDefectFixes.mjs) before trusting it — the earlier min(96vw,1840px) value here was read from the FIRST rule only, exactly the "read the code, didn't drive it" mistake rule 4.14 item 5 warns about. Height stays auto/scrolling — only width was ordered capped. */ .pvt3-contacts-modal{width:min(94vw,960px)} .pvt3-banner-modal-body{max-height:60vh;overflow-y:auto} /* #417 (2026-09-09), found by the live proof in dark mode: diamond-calendar-dark.css sets light text on the calendar page's BODY, and the banner modals (Forms / Contacts / Protocols / Settings) keep their white sheet — so their titles inherited #e8eef7 on white and were unreadable. The sheet stays white paper (the e-mail preview's precedent); the text is pinned to the light theme's ink. A dark sheet like the compose modal is David's call. */ :root[data-theme="dark"] .pvt3-banner-modal{color:#16213a} /* #431 (law 5.16 repair, found on the way): the Welcome Email modal is a white card too, but its title and the picked patient's name inherited the dark theme's light ink — near-invisible on white. Same dark rules as the banner modals. */ :root[data-theme="dark"] .pvt3-welcome-modal,:root[data-theme="dark"] .pvt3-welcome-modal .modal-head h3,:root[data-theme="dark"] .pvt3-welcome-modal .pvt3-welcome-picked strong,:root[data-theme="dark"] .pvt3-welcome-modal .pvt3-welcome-log-row .name,:root[data-theme="dark"] .pvt3-welcome-modal .pvt3-welcome-log-head{color:#16213a} :root[data-theme="dark"] .pvt3-welcome-modal .modal-head p{color:#6d788d} :root[data-theme="dark"] .pvt3-banner-modal .modal-head h3,:root[data-theme="dark"] .pvt3-banner-modal .pvt3-forms-title,:root[data-theme="dark"] .pvt3-banner-modal .pvt3-settings-row-label{color:#16213a} :root[data-theme="dark"] .pvt3-banner-modal .modal-head p,:root[data-theme="dark"] .pvt3-banner-modal .pvt3-forms-section h4{color:#6d788d} :root[data-theme="dark"] .pvt3-banner-modal .pvt3-forms-open{color:#3478df} .pvt3-mock-tag{display:inline-block;margin-top:4px;background:#fff7ee;color:#93591d;border:1px solid #e6b980; border-radius:999px;padding:2px 9px;font-size:10px;font-weight:750} /* Forms */ .pvt3-forms-section{margin-bottom:16px} .pvt3-forms-section h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} .pvt3-forms-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer} .pvt3-forms-row:hover{background:#f7f9fc} .pvt3-forms-row.needs-confirm{background:#fffaf0} .pvt3-forms-pdf-icon{flex:0 0 auto} .pvt3-forms-pdf-icon-sm{display:inline-grid;place-items:center;width:22px;height:22px;background:#fbe4e1;color:#c0392b; border-radius:5px;font-size:7px;font-weight:850;flex:0 0 auto} .pvt3-forms-title{flex:1;font-size:13px;font-weight:660} .pvt3-forms-open{font-size:11px;font-weight:750;color:var(--blue)} .pvt3-needs-badge{background:var(--amber-soft);color:#8b580b;border-radius:999px;padding:3px 9px;font-size:10px;font-weight:800} /* Contacts */ .pvt3-contacts-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px} .pvt3-pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff; border-radius:999px;padding:5px 12px;font-size:11px;font-weight:750;color:#536079;cursor:pointer} .pvt3-pill.active{background:var(--blue);border-color:var(--blue);color:#fff} .pvt3-pill-add{border-style:dashed;color:var(--blue)} .pvt3-pill-x{border:0;background:transparent;color:inherit;font-size:12px;margin-left:2px;cursor:pointer} .pvt3-muted{color:#a7afbe;font-style:italic} .pvt3-icon-btn{width:26px;height:26px;border:1px solid var(--line);background:#fff;border-radius:8px; display:grid;place-items:center;font-size:12px;color:#566177;cursor:pointer} .pvt3-icon-btn:hover{border-color:#b9d4fa;color:var(--blue)} .pvt3-icon-btn.danger:hover{border-color:#efb3b3;color:var(--red)} .pvt3-icon-btn.sm{width:20px;height:20px;font-size:10px} /* Contacts — CARD REDESIGN (David's pick, punch-list item 4, option A: Compact Utility). Two per row, stacks/wraps as contacts grow, edit/delete live on the card itself. */ /* Fixed 2-column grid, ALWAYS (David's addendum, 2026-08-15) — cards grow taller as content grows, the grid itself never reflows to one or three columns at any width. No responsive breakpoint here on purpose. */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cardA{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px} .cardA-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px} .cardA-id{flex:1;min-width:0} .cardA-id b{display:block;font-size:13.5px;line-height:1.35} .cardA-cat-tag{display:inline-block;margin-top:3px;font-size:10px;font-weight:750;text-transform:uppercase; letter-spacing:.04em;color:var(--blue-dark);background:var(--blue-soft);padding:2px 8px;border-radius:999px} .cardA-actions{display:flex;gap:4px;flex:0 0 auto} /* The saved document, rendered — Quill's own output classes (p/strong/em/a /hr) render with the app's normal type, not the editor's tooling chrome. */ .cardA-body-rendered{font-size:12.5px;line-height:1.6;color:var(--ink)} .cardA-body-rendered p{margin:0 0 8px} .cardA-body-rendered p:last-child{margin-bottom:0} .cardA-body-rendered hr{border:0;border-top:1px solid var(--line);margin:10px 0} .cardA-body-rendered a{color:var(--blue)} /* ENFORCED, not assumed (David, 2026-08-15, defect report): every card renders left-aligned, top-aligned, normal flow — no exceptions, no matter what alignment/indent styling a future import or paste carries in. !important is deliberate here: this is a floor, not a default. li keeps its own margin/padding (bullet-marker indent is legitimate structure, not centering junk) — only its text-align is forced. */ .cardA-body-rendered, .cardA-body-rendered p, .cardA-body-rendered div, .cardA-body-rendered span, .cardA-body-rendered h1, .cardA-body-rendered h2, .cardA-body-rendered h3, .cardA-body-rendered a { text-align: left !important; margin-left: 0 !important; padding-left: 0 !important; text-indent: 0 !important; } .cardA-body-rendered li { text-align: left !important; } .pvt3-phone-copy-num{white-space:nowrap} .pvt3-phone-copy-btn{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:3px; border:1px solid var(--line);background:#fff;border-radius:5px;font-size:9px;color:var(--muted); cursor:pointer;vertical-align:middle} .pvt3-phone-copy-btn:hover{border-color:#b9d4fa;color:var(--blue)} /* Card in EDIT mode — title + category live above the same Quill instance Protocols uses (.pvt3-protocol-editor, shared CSS). */ .cardA-editing{display:flex;flex-direction:column;gap:8px} .cardA-edit-head{display:flex;gap:8px} .cardA-title-input{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:7px 10px; font-size:13px;font-weight:700;color:var(--ink)} .cardA-title-input:focus{outline:2px solid var(--blue-soft);border-color:var(--blue)} .cardA-cat-select{border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-size:12px;color:var(--ink); background:#fff;flex:0 0 auto} /* .cardA-editor reuses .pvt3-protocol-editor's toolbar/container layout but is NOT inside a sized flex column like the Protocols modal — override its flex:1 (which would try to grow into a parent height that doesn't exist here) with an explicit fixed height instead. */ .cardA-editor{height:220px;flex:none} /* ROOT CAUSE of the "indented/centered" defect (David, 2026-08-15): the shared .pvt3-protocol-editor .ql-editor rule sets max-width:760px; margin:0 auto — correct for Protocols' wide 1200px reading column, wrong here where the card is only ~450-500px. Centering a narrower text block inside that reads as "pushed right" for a long block (Quest) and dead center for a short one-liner (ProScan) — same cause, two visual symptoms. Overridden here, not in the shared rule, since Protocols still wants the centered reading column. !important matches the same enforced-floor reasoning as .cardA-body-rendered above — edit mode and display mode must render identically. */ .cardA-editor .ql-editor { max-width: none !important; margin: 0 !important; text-align: left !important; } .cardA-editor .ql-editor p, .cardA-editor .ql-editor div { text-align: left !important; margin-left: 0 !important; } .cardA-edit-actions{display:flex;justify-content:flex-end;gap:8px} .pvt3-settings-note{font-size:12px;color:var(--muted);margin:10px 0;line-height:1.5} /* Protocols */ .pvt3-protocols-list{display:flex;flex-direction:column;gap:6px} .pvt3-protocol-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px; padding:13px 14px;background:#fff;cursor:pointer;text-align:left} .pvt3-protocol-row:hover{border-color:#b9d4fa;background:var(--blue-soft)} .pvt3-protocol-icon{width:30px;height:30px;border-radius:9px;background:var(--mint-soft);color:#087b59; display:grid;place-items:center;font-size:13px;flex:0 0 auto} .pvt3-protocol-title{flex:1;font-weight:750;font-size:13px} .pvt3-protocol-arrow{color:#b0b8c6} /* Protocols surface — David's pick (2026-08-15, item 5b): at least as large as the PDF viewer (min(96vw,1840px) x 96vh), NOT the PDF viewer itself — text/editing gets a readable column width, not edge-to-edge 1840px. */ .pvt3-protocol-read{width:min(92vw,1200px);max-height:90vh;height:min(90vh,860px); display:flex;flex-direction:column;overflow:hidden} .pvt3-protocol-read .modal-body{flex:1;overflow:auto;display:flex;flex-direction:column} .pvt3-protocol-body-wrap{flex:1;display:flex;flex-direction:column;min-height:0} .pvt3-protocol-read.editing .pvt3-protocol-body-wrap{overflow:hidden} .pvt3-protocol-read .pvt3-protocol-body{color:var(--ink);line-height:1.7;margin:0 0 16px;font-size:14.5px;max-width:760px} .pvt3-protocol-body p{margin:0 0 12px} .pvt3-protocol-body h1,.pvt3-protocol-body h2,.pvt3-protocol-body h3{margin:18px 0 8px} .pvt3-protocol-body ul,.pvt3-protocol-body ol{margin:0 0 12px;padding-left:22px} /* Quill editor — fills the remaining modal height, its own toolbar sits above the writing area. */ .pvt3-protocol-editor{flex:1;display:flex;flex-direction:column;min-height:0; border:1px solid var(--line);border-radius:10px;overflow:hidden} .pvt3-protocol-editor .ql-toolbar{border:0;border-bottom:1px solid var(--line);background:var(--canvas,#f4f7fb);flex:0 0 auto} .pvt3-protocol-editor .ql-container{border:0;flex:1;overflow:auto;font-size:14.5px} .pvt3-protocol-editor .ql-editor{max-width:760px;margin:0 auto;line-height:1.7;min-height:100%} .pvt3-protocol-video{background:#f4f6f9;border:1px dashed #ccd4e1;border-radius:12px;padding:20px;text-align:center; color:var(--muted);font-weight:700;margin-bottom:16px} .pvt3-protocol-video-embed{position:relative;width:100%;padding-top:56.25%;margin-bottom:16px;border-radius:12px; overflow:hidden;background:#000} .pvt3-protocol-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .pvt3-protocol-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .pvt3-protocol-links b{width:100%;font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:.05em} .pvt3-chip-link{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:12px; font-weight:700;cursor:pointer;color:var(--ink)} .pvt3-chip-link:hover{border-color:#b9d4fa;background:var(--blue-soft)} .pvt3-draft-copy{background:#fff7ee;border:1px solid #e6b980;border-radius:10px;padding:13px;font-size:13px;line-height:1.6} /* Settings panel */ .pvt3-settings-modal{width:min(760px,100%)} .pvt3-settings-tabs{display:flex;gap:4px;padding:0 23px;border-bottom:1px solid var(--line)} .pvt3-settings-tab{border:0;background:transparent;padding:11px 14px;font-size:13px;font-weight:750; color:var(--muted);border-bottom:2px solid transparent;cursor:pointer} .pvt3-settings-tab.active{color:var(--blue);border-bottom-color:var(--blue)} .pvt3-settings-section{margin-bottom:14px} .pvt3-settings-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .pvt3-settings-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid #f0f2f6} .pvt3-drag-handle{color:#c2c9d6;cursor:grab;flex:0 0 auto} .pvt3-settings-row-label{flex:1;font-size:13px} .pvt3-settings-row-label small{color:var(--muted);margin-left:6px} .pvt3-settings-add-drop{border:2px dashed #ccd4e1;border-radius:12px;padding:22px;text-align:center;color:var(--muted);margin-top:10px;cursor:pointer} .pvt3-settings-add-drop.drag-over{border-color:#7554b4;background:#f5f2fb;color:#5f3f9e} .pvt3-settings-add-btn{margin-top:12px;width:100%} /* O-101 PHASE 2 — drag-to-reorder feedback (Forms/Contacts/Protocols rows in Banner Settings). The row itself carries [draggable], set in JS. */ .pvt3-settings-row[draggable="true"]{cursor:grab} .pvt3-settings-row.dragging{opacity:.4} /* Hover-name tooltip (law 4.9) reused inside a flex row — the wrapper's own `.fax-filename-wrap{display:block}` still works as a flex item; these just let it take its row's flexible middle column instead of shrinking to fit the tooltip text. */ .pvt3-settings-row-label.fax-filename-wrap{flex:1} .pvt3-forms-title.fax-filename-wrap{flex:1} @media(max-width:1050px){ .pvt3-banner-search{width:150px} } /* ── ASK PVT3 (O-102, David's order 2026-08-15) ────────────────────── Read-only search panel dropped from the mic. Listening treatment is Pulse Rings — two concentric rings expanding + fading from the mic, built here as the LIVE default (David's mockup review picks the final treatment; Waveform Bars / Breathing Glow are mocked separately, not wired live, per the explicit "mockups before visible deploy" phase gate). */ .pvt3-ask-mic.active{cursor:pointer} .pvt3-ask-mic:not([disabled]){cursor:pointer} .pvt3-ask-mic.listening{position:relative} .pvt3-ask-pulse-ring{ position:absolute;inset:0;border-radius:50%;border:2px solid rgba(139,92,246,.55); animation:pvt3AskPulse 1.6s ease-out infinite;pointer-events:none; } .pvt3-ask-pulse-ring.r2{animation-delay:.55s} @keyframes pvt3AskPulse{ 0%{transform:scale(1);opacity:.75} 100%{transform:scale(2.3);opacity:0} } @media(prefers-reduced-motion:reduce){ .pvt3-ask-pulse-ring{animation:none;display:none} } .pvt3-ask-panel{ position:absolute;top:40px;left:50%;transform:translateX(-50%);width:360px; background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow); z-index:20;overflow:hidden; } .pvt3-ask-panel-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:8px; padding:10px 12px;font-size:12px;font-weight:800;color:var(--ink); border-bottom:1px solid var(--line);background:#faf8ff; } /* Punch list #1 (David, 2026-08-15): the question text was running off the right edge instead of wrapping. The flex child's default min-width:auto was letting it keep its full intrinsic (single-line) width and overflow the 360px panel; min-width:0 lets it shrink to the column and wrap. The panel has no fixed height, so wrapping to N lines grows it naturally. */ .pvt3-ask-panel-head span{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:break-word;line-height:1.4;padding-top:1px} .pvt3-ask-panel-head .close-x{flex:0 0 auto} .pvt3-ask-panel-body{padding:12px} /* Punch list #2 (David, 2026-08-15): "clear visual state for actually- listening vs not." The dot is dim/static while a recognizer restart is in flight (a few hundred ms at most) and pulses while genuinely capturing speech -- the same distinction the status text next to it makes in words. */ .pvt3-ask-listen-row{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:11.5px;font-weight:700;color:var(--muted)} .pvt3-ask-listen-dot{width:7px;height:7px;border-radius:50%;background:#c3c9d6;flex:0 0 auto} .pvt3-ask-listen-row.active .pvt3-ask-listen-dot{background:#8b5cf6;animation:pvt3AskListenDot 1.3s ease-in-out infinite} @keyframes pvt3AskListenDot{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}} /* Transcript wrap, second report (David, 2026-08-15): a