/* Voice Notes: the record button and its panel (every signed-in page), and My Notes (notes.php). Site colors and type only. */
.vn-fab {
  position: fixed; right: 26px; bottom: var(--vn-bottom, 84px); z-index: 59;
  width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%;
  background: var(--card, #fff); color: var(--blue); border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 12px rgba(17,17,17,.16), 0 1px 2px rgba(17,17,17,.14);
  transition: transform .18s ease, background .15s ease, color .15s ease, bottom .2s ease;
}
.vn-fab:not(.rec):hover { background: var(--paper) !important; color: var(--blue) !important; border-color: var(--blue) !important; transform: translateY(-1px); }
.vn-fab.hc-shy { opacity: 0; pointer-events: none; } /* steps aside with the Help button over a control (help.js place) */
.vn-fab:focus-visible { outline: 3px solid rgba(30,144,255,.35); outline-offset: 2px; }
.vn-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vn-fab.rec, .vn-fab.rec:hover { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; animation: vn-pulse 1.4s ease-out infinite; }
@keyframes vn-pulse { 0% { box-shadow: 0 0 0 0 rgba(226,59,47,.45); } 100% { box-shadow: 0 0 0 12px rgba(226,59,47,0); } }
.vn-fab-dot { position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--orange); border: 2px solid var(--card, #fff); display: none; }
.vn-fab.vn-draft:not([aria-expanded=true]) .vn-fab-dot { display: block; }
body.nav-open .vn-fab, body.hc-on .vn-fab, body:has(dialog[open]:not(#pm-swap):not(.sprout-mini)) .vn-fab, body:has(.ttv:not([hidden])) .vn-fab, body:has(.mt-thread) .vn-fab { display: none; } /* Sprout Mini sheets (Quick Calc, Task Card) leave the help and mic buttons where they are, dimmed under the backdrop: hiding them made them jump (Travis Oct 21 2026 10:12 PM "sprout and mic jump again when it comes out"). */
body.vn-on .hc-fab, body.vn-on .hc-intro { visibility: hidden; }

.vn-panel {
  position: fixed; right: 20px; bottom: calc(var(--vn-bottom, 84px) + 50px); z-index: 61;
  width: 360px; max-height: min(520px, calc(100vh - 160px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(17,17,17,.22), 0 2px 8px rgba(17,17,17,.08);
  animation: vn-in .18s ease;
}
.vn-panel[hidden] { display: none; }
@keyframes vn-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.vn-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); min-height: 50px; }
.vn-title { flex: 1; min-width: 0; font-size: 1rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-head .hc-ib .ico { width: 18px; height: 18px; }
/* Same icon buttons as Help & Chat, for pages that do not load its CSS (My Day). */
.vn-head .hc-ib { width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; box-shadow: none; }
.vn-head .hc-ib:hover, .vn-head .hc-ib:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.vn-head .hc-ib svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vn-rec { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(226,59,47,.1); color: var(--red); font-weight: 650; font-size: .8rem; font-variant-numeric: tabular-nums; }
.vn-rec[hidden] { display: none; }
.vn-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: vn-blink 1s steps(2, start) infinite; }
@keyframes vn-blink { to { visibility: hidden; } }
.vn-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; overscroll-behavior: contain; }
.vn-say { margin: 0 0 10px; font-size: .85rem; }
.vn-live { min-height: 96px; padding: 10px 12px; border-radius: 10px; background: var(--paper); white-space: pre-wrap; overflow-wrap: anywhere; }
.vn-live:has(#vn-final:empty):has(#vn-interim:empty)::before { content: "Start talking…"; color: var(--muted); }
.vn-interim { color: var(--muted); }
.vn-audio { width: 100%; margin: 0 0 10px; }
.vn-edit label:not(.check) { display: block; margin: 0 0 4px; font-weight: 600; }
.vn-edit input:not([type=checkbox]), .vn-edit textarea { width: 100%; margin-bottom: 10px; }
.vn-edit .check input { width: auto; margin: 0; }
.vn-edit textarea { min-height: 110px; resize: vertical; }
.vn-link { margin-top: 2px; }
.vn-foot { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); }
.vn-foot [hidden] { display: none; }
.vn-foot .vn-stop, .vn-foot .vn-stop:hover { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
/* My Day: in the black My Day bar (after the name, before the gear), not floating. */
.vn-fab.vn-in-bar { position: static; width: 36px; height: 36px; justify-self: end; box-shadow: none; border-color: transparent; background: rgba(255,255,255,.12); color: #fff; }
@media (hover: hover) { .vn-fab.vn-in-bar:not(.rec):hover { background: var(--card, #fff) !important; color: var(--blue) !important; border-color: var(--card, #fff) !important; transform: none; } }
.vn-fab.vn-in-bar[aria-expanded=true]:not(.rec) { background: var(--card, #fff); color: var(--blue); }
.vn-fab.vn-in-bar .vn-fab-dot { border-color: var(--ink); }
@media print { .vn-fab, .vn-panel { display: none !important; } }

@media (max-width: 800px) {
  .vn-fab { right: calc(max(10px, env(safe-area-inset-right)) + 3px); width: 38px; height: 38px; }
  body:has(input:focus, textarea:focus, select:focus, [contenteditable]:focus):not(.vn-on) .vn-fab { display: none; }
  /* Bottom sheet on phones: above the dock and clear of the home bar and the status bar. */
  .vn-panel { left: 0; right: 0; bottom: 0; width: 100%; max-width: 100vw; max-height: calc(100vh - env(safe-area-inset-top, 0px) - 24px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px); border-radius: 16px 16px 0 0; border-left: 0; border-right: 0; border-bottom: 0; z-index: 70; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .vn-foot { flex-wrap: nowrap; }
  .vn-foot button { flex: 1; min-width: 0; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
}

/* My Notes list: one line per row. */
table.vn-list td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
table.vn-list .vn-cell-note { width: 50%; }
table.vn-list .vn-cell-share { width: 18%; }
table.vn-list .vn-cell-cust { width: 18%; }
table.vn-list .vn-cell-date { width: 14%; color: var(--muted); font-variant-numeric: tabular-nums; }
.vn-meta { margin: 0 0 12px; }
.vn-share-row { display: grid; grid-template-columns: 70px 1fr; gap: 6px 12px; align-items: baseline; margin: 6px 0; }
.vn-share-row .muted { font-size: .8rem; }
.vn-text { white-space: normal; overflow-wrap: anywhere; line-height: 1.55; }
@media (max-width: 800px) { .vn-share-row { grid-template-columns: 1fr; } }
@media (max-width: 800px) { body.vn-on .vn-fab:not(.vn-in-bar) { display: none; } }
/* Mic out of the way (Oct 20 2026, Travis, every page incl. Route): the page ends with clear room under its last item, so
   scrolling to the bottom lifts every card and button above the floating Mic (it sits above the tab bar and Help, voice-notes.js place). */
body:has(.vn-fab:not(.vn-in-bar)) .content > main::after, body:has(.vn-fab:not(.vn-in-bar)) .field-app::after { content: ""; display: block; height: 72px; }
/* Route Mic spot (Travis Oct 21 2026 12:37 PM): ONE fixed spot on every Route screen, the day-view spot (bottom right,
   just above the bottom bar: 56px bar + 10px gap + the iPhone home bar). Job screens use it too (never on the Job Dock).
   Change --vn-route-bottom here only; voice-notes.js does not move the Mic on Route (rules check "Route mic rule"). */
body.field-body { --vn-route-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
body.field-body .vn-fab:not(.vn-in-bar) { bottom: var(--vn-route-bottom); }

/* Left Menu open (Travis Oct 21 2026 1:57 PM): the Mic hides while the phone Menu covers the screen. */
body.nav-open .vn-fab { visibility: hidden; }