/* Voice gets a larger, frameless stage. The existing notch controller still
   measures natural content and owns every reveal, source and action. */
#top #voice .voice-native-scene .screen-frame {
  min-height: 500px;
  padding-top: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
#top #voice .display-environment {
  inset: 0 0 -24px;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  /* Fade only scenery, keeping the glass and all its text fully opaque. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22% 78%, transparent), linear-gradient(transparent, #000 16% 48%, transparent 96%);
  mask-image: linear-gradient(90deg, transparent, #000 22% 78%, transparent), linear-gradient(transparent, #000 16% 48%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#top #voice .display-environment > .glass-wallpaper {
  inset: 0;
  border-radius: 0;
}
#top #voice .mobile-product {
  width: min(960px, 90%);
  min-height: 480px !important;
  padding-bottom: 64px;
}
/* One responsive compact family. Ratios derive from the native 12pt body;
   only the shared optical base adapts, so every scene keeps the same hierarchy. */
#top :is(#voice,#meetings,#dictation) {
  --preview-body: clamp(12.5px,calc(11px + .23vw),14px);
  --preview-line: calc(var(--preview-body) * 1.4);
  --preview-request-line: calc(var(--preview-body) * 1.35);
  --preview-draft-line: calc(var(--preview-body) * 1.45);
  --preview-title: calc(var(--preview-body) * 1.1666667);
  --preview-title-line: calc(var(--preview-body) * 1.5166667);
  --preview-space: var(--preview-body);
  --preview-radius: var(--preview-body);
  --preview-control: calc(var(--preview-body) * 2);
  --preview-action-pad: calc(var(--preview-body) * .8333333);
  --preview-compact-pad: calc(var(--preview-body) * .6666667);
  --preview-meta: var(--preview-body);
  --preview-meta-line: calc(var(--preview-body) * 1.35);
  --preview-small: calc(var(--preview-body) * .8333333);
  --preview-small-line: calc(var(--preview-body) * 1.1666667);
  --preview-icon: calc(var(--preview-body) * 1.1666667);
  --preview-row-icon: var(--preview-body);
  --preview-header: calc(var(--preview-body) * 2.6666667);
  --preview-edit-pad: calc(var(--preview-body) * .5);
}
#top #voice .voice-native-panel,
#top #voice .mobile-surface.lg,
#top #voice .mobile-surface .panel-copy p {
  font-size: var(--preview-body) !important;
  line-height: var(--preview-line) !important;
}
#top #voice .voice-native-panel .mobile-surface { font-weight: 400; }
#top #voice .voice-native-panel .mobile-surface .native-voice-answer :is(h3,p) {
  font-size: var(--preview-body) !important;
  line-height: var(--preview-line) !important;
  font-weight: 400;
}
#top #voice .mobile-surface .native-source-pills > .lg-notch-button { padding-inline: var(--preview-compact-pad) !important; }
#top #voice .mobile-surface > .panel-copy { gap: var(--preview-space); }
#top #voice .mobile-surface .notch-bubble {
  font-size: var(--preview-body);
  line-height: var(--preview-line);
  padding: 5px 15px !important;
  border-radius: var(--preview-radius) !important;
}
#top #voice .voice-native-panel h3,
#top #voice .notch-card__title {
  font-size: var(--preview-title);
  line-height: var(--preview-title-line);
}
#top #voice .notch-citations { gap: 10px; margin-top: 10px; }
#top #voice .notch-citations button,
#top #voice .source-date,
#top #voice .voice-native-panel small { font-size: 12px; line-height: 16px; }
#top #voice .notch-citations img { width: 15px; height: 15px; }
#top #voice .notch-file-title { font-size: var(--preview-body); line-height: var(--preview-line); gap: 10px; }
#top #voice .notch-file-title > img { width: 15px; height: 20px; }
#top #voice .notch-file-meta { font-size: 12px; line-height: 16px; margin: 5px 0 0 25px; gap: 5px; }
#top #voice .notch-file-meta img { width: 12.5px; height: 12.5px; }
#top #voice .notch-event { gap: var(--preview-space); align-items: flex-start; }
#top #voice .notch-date { min-width: 45px; font-size: 10px; line-height: 15px; padding: 5px; border-radius: 10px; flex: none; }
#top #voice .notch-date b { font-size: 25px; line-height: 30px; }
#top #voice .notch-actions { flex-wrap: wrap; gap: 10px; }
#top #voice .notch-source-view blockquote { margin: 10px 0; padding-left: 10px; }
#top #voice .notch-complete { gap: 10px; align-items: flex-start; }
#top #voice .notch-complete p { margin-top: 5px !important; }
/* Inner product controls are the native notch variant, not marketing CTAs.
   DS.blue dark appearance is #1486ff; native secondary fill is white at .14. */
#top :is(#voice,#meetings,#dictation) .mobile-surface .lg-notch-button {
  height: 30px !important; min-height: 30px;
  font-size: 15px !important; line-height: 20px !important;
  padding-inline: 12.5px !important; border-radius: 15px !important;
  background: rgba(255,255,255,.14) !important; border: 0 !important;
}
#top :is(#voice,#meetings,#dictation) .mobile-surface .lg-notch-button--primary { background: #1486ff !important; }
@media (hover:hover) {
  #top :is(#voice,#meetings,#dictation) .mobile-surface .lg-notch-button:hover { background: rgba(255,255,255,.2) !important; }
  #top :is(#voice,#meetings,#dictation) .mobile-surface .lg-notch-button--primary:hover { background: #2c92ff !important; }
}
@media (max-width: 760px) {
  #top #voice .voice-native-scene .screen-frame { min-height: 530px; padding-top: 0; }
  #top #voice .mobile-product { width: 100%; min-height: 510px !important; padding-bottom: 48px; }
  #top #voice .mobile-surface .notch-bubble { max-width: 94% !important; }
  #top #voice .notch-file-meta { margin-left: 0; }
}
@media (forced-colors:active) {
  #top :is(#voice,#meetings,#dictation) .mobile-surface .lg-notch-button { background: ButtonFace !important; color: ButtonText !important; border: 1px solid ButtonText !important; }
}

/* Complete voice component variants; captures below keep their existing scale. */
#top :is(#voice,#meetings,#dictation) .mobile-panel .mobile-surface .lg-notch-button {
  height: var(--preview-control) !important; min-height: var(--preview-control) !important;
  font-size: var(--preview-body) !important; line-height: var(--preview-meta-line) !important;
  padding-inline: var(--preview-action-pad) !important; border-radius: var(--preview-radius) !important;
  gap: calc(var(--preview-body) / 3) !important;
}
#top #voice .voice-native-panel .mobile-surface .native-source-pills > .lg-notch-button { padding-inline: var(--preview-compact-pad) !important; }
#top :is(#voice,#meetings,#dictation) .mobile-panel .mobile-surface .lg-notch-button > kbd {
  font-size: var(--preview-small) !important; line-height: var(--preview-meta-line) !important;
}
#top #voice .voice-native-panel .native-card-header {
  height: var(--preview-header) !important; min-height: var(--preview-header);
  font-size: var(--preview-title) !important; line-height: var(--preview-title-line) !important;
}
#top #voice .voice-native-panel .native-card-header > img { width: var(--preview-icon) !important; height: var(--preview-icon) !important; }
#top #voice .voice-native-panel .mobile-surface .notch-card:has(> .native-card-header,> .native-source-card,> .notch-complete),
#top #voice .voice-native-panel .mobile-surface .notch-card:has(> p:only-child) {
  padding: calc(var(--preview-body) * .6) calc(var(--preview-body) * .9333333) calc(var(--preview-body) * .9333333) !important;
  border-radius: var(--preview-radius) !important;
}
#top #voice .voice-native-panel .notch-complete > span { font-size: var(--preview-title); }
@media(max-width:600px) {
  #top #voice .voice-native-panel .native-source-card .native-card-header { height: auto !important; min-height: var(--preview-header); }
}

/* Capture previews use the same compact component family as voice. The display
   remains enlarged; the extension and its inner roles have one coherent scale. */
#top :is(#meetings,#dictation) .mobile-product { width: min(620px,84%); }
#top :is(#meetings,#dictation) .mobile-panel,
#top :is(#meetings,#dictation) .mobile-surface,
#top :is(#meetings,#dictation) .mobile-surface .panel-copy p,
#top #meetings .transcript-row,
#top #meetings .speaker-line,
#top #meetings .speaker-name,
#top #meetings .transcript-text {
  font-size: var(--preview-body) !important; line-height: var(--preview-line) !important; font-weight: 400;
}
#top :is(#meetings,#dictation) .notch-readout {
  font-size: var(--preview-body); line-height: var(--preview-meta-line); font-weight: 500;
  font-variant-numeric: tabular-nums; color: rgba(255,255,255,.85);
}
#top :is(#meetings,#dictation) .notch-card__head,
#top #meetings .meeting-title {
  height: var(--preview-header) !important; gap: var(--preview-compact-pad) !important;
  font-size: var(--preview-title) !important; line-height: var(--preview-title-line) !important;
}
#top :is(#meetings,#dictation) :is(.notch-card__title,.meeting-title h3) {
  font-size: var(--preview-title) !important; line-height: var(--preview-title-line) !important; font-weight: 500;
}
#top :is(#meetings,#dictation) :is(.notch-card__head > img,.calendar-mark) {
  width: var(--preview-icon) !important; height: var(--preview-icon) !important; object-fit: contain;
}
#top #dictation .notch-card {
  padding: calc(var(--preview-body) * .6) calc(var(--preview-body) * .9333333) calc(var(--preview-body) * .9333333) !important;
  border-radius: var(--preview-radius) !important;
}
#top #dictation .notch-actions { margin-top: var(--preview-compact-pad); gap: var(--preview-compact-pad); }
#top #meetings .transcript-viewport { height: calc(var(--preview-body) * 11); }
#top #meetings .transcript-feed { gap: var(--preview-compact-pad); }
#top #meetings .transcript-attachment { margin-top: var(--preview-compact-pad); gap: calc(var(--preview-body) / 3); }
#top #meetings .transcript-attachment > img {
  width: calc(var(--preview-body) * 8.6666667); height: calc(var(--preview-body) * 5.4166667);
  border-radius: calc(var(--preview-body) * .6666667);
}
#top #meetings .transcript-attachment figcaption,
#top #meetings .meeting-feedback { font-size: var(--preview-meta); line-height: var(--preview-meta-line); }
#top #meetings .meeting-toolbar { margin-top: var(--preview-space); gap: var(--preview-compact-pad); }
#top #meetings .tool-cluster { gap: calc(var(--preview-body) * .6666667); }
#top #meetings .lg-notch-tool {
  width: var(--preview-control) !important; height: var(--preview-control) !important;
  padding: 0 !important; border-radius: var(--preview-radius) !important;
  background: rgba(255,255,255,.14) !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transform: none !important; filter: none !important;
}
#top #meetings .lg-notch-tool > :is(img,svg) { width: var(--preview-row-icon) !important; height: var(--preview-row-icon) !important; }
#top #meetings .lg-notch-tool::before,#top #meetings .lg-notch-tool::after { content: none !important; }
#top #meetings .lg-notch-tool[aria-pressed=true] { background: rgba(255,255,255,.2) !important; }
#top #meetings .meeting-orb { display: none !important; }
#top :is(#meetings,#dictation) .notch-wave {
  gap: calc(var(--preview-body) / 6); height: calc(var(--preview-body) * .6666667);
}
#top :is(#meetings,#dictation) .notch-wave i {
  width: calc(var(--preview-body) / 6); height: calc(var(--preview-body) * .25);
  border-radius: calc(var(--preview-body) / 12); opacity: .85;
  animation-name: capture-native-wave;
}
@keyframes capture-native-wave {
  0%,100% { height: calc(var(--preview-body) * .25); }
  50% { height: calc(var(--preview-body) * .6666667); }
}
/* Dictation opens immediately; reserve the final text geometry while words arrive. */
#top #dictation .panel-dictation[data-phase] .panel-copy { display: flex; }
#top #dictation .panel-dictation[data-phase] .sw { display: inline; visibility: hidden; }
#top #dictation .panel-dictation[data-phase] .sw.in { visibility: visible; }
#top #dictation .panel-dictation:not([data-phase=card]) .notch-actions { visibility: hidden; }
#top #meetings .panel-meeting[data-state=ended] .notch-wave i,
#top #dictation .panel-dictation:is([data-phase=processing],[data-phase=card]) .notch-wave i {
  display: block; width: calc(var(--preview-body) / 6); animation: none !important;
  height: calc(var(--preview-body) * .25); opacity: .6375;
}
#top #meetings .panel-meeting[data-state=ended] .notch-wave i:is(:nth-child(2),:nth-child(4)),
#top #dictation .panel-dictation:is([data-phase=processing],[data-phase=card]) .notch-wave i:is(:nth-child(2),:nth-child(4)) { height: calc(var(--preview-body) * .5); }
#top #meetings .panel-meeting[data-state=ended] .notch-wave i:nth-child(3),
#top #dictation .panel-dictation:is([data-phase=processing],[data-phase=card]) .notch-wave i:nth-child(3) { height: calc(var(--preview-body) * .75); }
#top #meetings .panel-meeting[data-state=paused] .notch-wave { gap: calc(var(--preview-body) * .25); }
#top #meetings .panel-meeting[data-state=paused] .notch-wave i {
  width: calc(var(--preview-body) * .25); height: calc(var(--preview-body) * .6666667);
  opacity: .782; animation: none !important;
}
#top #meetings .panel-meeting[data-state=paused] .notch-wave i:nth-child(n+3) { display: none; }
#top #meetings .panel-meeting:is([data-state=paused],[data-state=ended]) .notch-readout,
#top #dictation .panel-dictation:is([data-phase=processing],[data-phase=card]) .notch-readout { color: rgba(255,255,255,.55); }
@media(max-width:760px) { #top :is(#meetings,#dictation) .mobile-product { width: 100%; } }
@media(prefers-reduced-motion:reduce) { #top :is(#meetings,#dictation) .notch-wave i { animation: none !important; } }
@media(hover:hover) { #top #meetings .lg-notch-tool:hover { background: rgba(255,255,255,.2) !important; } }
@media(forced-colors:active) { #top #meetings .lg-notch-tool { background: ButtonFace !important; color: ButtonText !important; border: 1px solid ButtonText !important; } }
/* Native capture feedback uses a red screen cue and plain status text, never
   the earlier amber badge. The same icon artwork is tinted through its mask. */
#top #meetings { --capture-screen-accent: #ff6169; }
#top #meetings .lg-notch-tool[data-meeting-action=screen][aria-pressed=true] { background: rgba(255,97,105,.12) !important; }
#top #meetings .lg-notch-tool[data-meeting-action=screen][aria-pressed=true] > img { visibility: hidden; }
#top #meetings .lg-notch-tool[data-meeting-action=screen][aria-pressed=true]::after {
  content: '' !important; position: absolute; width: var(--preview-row-icon); height: var(--preview-row-icon);
  left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--capture-screen-accent);
  -webkit-mask: url('../assets/monitor.svg') center/contain no-repeat; mask: url('../assets/monitor.svg') center/contain no-repeat;
}
#top #meetings .lg-notch-tool[data-capturing=true] { background: rgba(255,255,255,.3) !important; }
#top #meetings .panel-meeting:has([data-meeting-action=screen][aria-pressed=true]):not([data-state=paused]):not([data-state=ended]) .panel-top::before {
  width: calc(var(--preview-body) * .4166667); height: calc(var(--preview-body) * .4166667);
  background: var(--capture-screen-accent); margin-right: calc(var(--preview-body) / -6);
}
#top #meetings .panel-meeting:has([data-meeting-action=screen][aria-pressed=true]):not([data-state=paused]):not([data-state=ended]) .meeting-toolbar::before {
  content: 'Recording'; height: auto; padding: 0; background: transparent; border-radius: 0;
  color: rgba(255,255,255,.85); font-size: var(--preview-body); line-height: var(--preview-meta-line); font-weight: 400;
}
#top #meetings .panel-meeting[data-state=paused] .meeting-toolbar::before { font-size: var(--preview-body); line-height: var(--preview-meta-line); }
#top :is(#meetings,#dictation) .mobile-surface > .panel-top + * { margin-top: calc(48px + var(--preview-space)); }
#top :is(#meetings,#dictation) .mobile-surface > .panel-copy { margin-bottom: var(--preview-space); }
#top #meetings .mobile-surface > .panel-copy { gap: 0; }
#top :is(#meetings,#dictation) .mobile-surface .lg-notch-card { border-color: rgba(255,255,255,.06) !important; }
#top :is(#meetings,#dictation) .mobile-surface .lg-notch-button { min-width: 0 !important; }

/* Owner-selected capture toolbar: three tools share one quiet enclosure;
   transport actions remain separate at the trailing edge. */
#top #meetings .meeting-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--preview-compact-pad); }
#top #meetings .meeting-toolbar::before { margin-right: auto; }
#top #meetings .meeting-tool-group {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  margin-left: auto; margin-right: 0; border: 1px solid rgba(255,255,255,.12);
  border-radius: calc(var(--preview-radius) + 4px); background: rgba(255,255,255,.05);
}
#top #meetings .meeting-tool-group > .lg-notch-tool { background: transparent !important; }
#top #meetings .meeting-tool-group > .lg-notch-tool[aria-pressed=true] { background: rgba(255,255,255,.2) !important; }
#top #meetings .meeting-tool-group > .lg-notch-tool[data-meeting-action=screen][aria-pressed=true] { background: rgba(255,97,105,.12) !important; }
#top #meetings .meeting-tool-group > .lg-notch-tool[data-capturing=true] { background: rgba(255,255,255,.3) !important; }
#top #meetings .meeting-toolbar > .tool-cluster:not(.meeting-tool-group) {
  display: flex; align-items: center; gap: var(--preview-compact-pad); margin-left: 0;
}
#top #meetings .panel-meeting[data-state=paused] .meeting-tool-group { display: none; }
/* The old Stop hover swapped artwork through a pseudo-element. Transport
   controls now retain their actual icon while the shared hover fill responds. */
#top #meetings .lg-notch-tool[data-meeting-action=end]:hover > img { opacity: 1 !important; }
@media(hover:hover) { #top #meetings .meeting-tool-group > .lg-notch-tool:not([aria-pressed=true]):not([data-capturing=true]):hover { background: rgba(255,255,255,.12) !important; } }
@media(forced-colors:active) { #top #meetings .meeting-tool-group { background: Canvas; border-color: CanvasText; } }

#top #meetings .lg-notch-tool:disabled { opacity: .4; cursor: default; }