/* Meetxt UI unification — uses the current home page as the visual source of truth. */
:root {
  --ui-canvas: var(--landing-bg, #f6f8fd);
  --ui-surface: var(--landing-surface, #fff);
  --ui-subtle: var(--panel-subtle, #eef3fb);
  --ui-text: var(--text, #07142c);
  --ui-muted: var(--landing-muted, #5f6f8c);
  --ui-line: var(--line, #dbe3f1);
  --ui-accent: var(--primary, #167ce8);
  --ui-focus: #7b5cff;
  --ui-radius: 18px;
  --ui-control: 44px;
}

button,a,input,select,textarea,summary { -webkit-tap-highlight-color: transparent; }
button,.primary,.secondary,.ghost,.text-button,.theme-toggle,#ui-language-toggle,.support-notification { min-height: var(--ui-control); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline: 3px solid color-mix(in srgb,var(--ui-focus) 72%,transparent) !important;
  outline-offset: 3px;
}

/* Quiet global controls: no decorative frames or glow around utility actions. */
.topbar .support-notification,.topbar .theme-toggle,.topbar #ui-language-toggle,.topbar .sub-status {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar .support-notification:hover,.topbar .theme-toggle:hover,.topbar #ui-language-toggle:hover,.topbar .sub-status:hover {
  background: var(--primary-soft) !important;
}
.screen:not(.landing-screen) { max-width: 1328px; margin-inline: auto; }
.screen:not(.landing-screen) .card,.screen:not(.landing-screen) .panel,.screen:not(.landing-screen) .recording-wrap,
.screen:not(.landing-screen) .results-main,.screen:not(.landing-screen) .results-side,.screen:not(.landing-screen) .payment-wrap,
.screen:not(.landing-screen) .activate-wrap,.screen:not(.landing-screen) .account-panel,.screen:not(.landing-screen) .import-wrap {
  box-shadow: none !important;
}

/* Recorder: the choice itself is prominent; secondary detail stays quiet. */
#record .start-workspace { grid-template-columns: minmax(0,1fr) minmax(260px,330px); gap: clamp(28px,4vw,54px); }
#record .start-workspace { grid-template-columns: minmax(0,920px); justify-content: center; }
#record .start-intro { max-width: 760px; }
#record .start-intro h1 { font-size: clamp(42px,5vw,66px); }
#record .hero-lead { max-width: 65ch; color: var(--ui-muted); }
#record .recording-console { border: 0 !important; background: var(--ui-surface) !important; }
#record .console-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
#record .console-source { min-width: 0; }
#record .console-language-auto .hint { max-width: 42ch; }
#record .recent-section { border-top: 1px solid var(--ui-line); padding-top: 22px; }
#record .start-aside { display: none; }
#record .readiness-panel { border: 0; border-radius: var(--ui-radius); }

/* Library: one row, one status and one overflow menu. */
#history .history-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 6px 28px; }
#history .history-head h2 { grid-column: 1; margin: 0; }
#history .history-head .hint { grid-column: 1; }
#history .history-import-cta { grid-column: 2; grid-row: 1 / 3; align-self: center; }
#history .history-controls { display: grid; grid-template-columns: minmax(260px,1fr) minmax(150px,190px) minmax(150px,190px); gap: 10px; }
#history .history-actions { margin-top: 12px; }
#history .history-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  gap: 14px;
  align-items: center;
  min-height: 78px;
  padding: 14px 8px !important;
}
#history .history-item-main { min-width: 0; padding: 4px 2px; border: 0; background: transparent; text-align: left; color: inherit; }
#history .history-item-title { overflow: hidden; font-size: 16px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
#history .history-item-sub { display: flex; gap: 6px 14px; min-width: 0; margin-top: 6px; color: var(--ui-muted); font-size: 12px; }
#history .history-item-sub span { overflow: hidden; max-width: 260px; text-overflow: ellipsis; white-space: nowrap; }
#history .history-item-sub span + span::before { margin-right: 10px; color: var(--ui-line); content: "•"; }
.history-status { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.history-status-done { background: #e8f7ef; color: #16643f; }
.history-status-processing { background: #e9f2ff; color: #155db0; }
.history-status-error { background: #fff0ee; color: #a23c32; }
.history-status-draft { background: var(--ui-subtle); color: var(--ui-muted); }
.history-menu { position: relative; }
.history-menu > summary,.result-more-actions > summary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; border-radius: 12px; cursor: pointer; list-style: none; }
.history-menu > summary::-webkit-details-marker,.result-more-actions > summary::-webkit-details-marker { display: none; }
.history-menu > div,.result-more-actions > div { position: absolute; right: 0; z-index: 12; display: grid; gap: 4px; min-width: 210px; padding: 8px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); box-shadow: 0 18px 45px rgba(20,40,77,.16); }
.history-menu > div button,.result-more-actions > div button { width: 100%; justify-content: flex-start; text-align: left; }

/* Results: title and frequent actions live at the top, destructive actions stay aside. */
#results .results-layout { grid-template-columns: minmax(0,1fr) 280px; align-items: start; gap: 24px; }
#results .results-main { order: 1; min-width: 0; padding: clamp(24px,3.2vw,44px) !important; }
#results .results-side { order: 2; position: sticky; top: 92px; padding: 18px !important; border: 0 !important; background: transparent !important; }
.result-header { display: grid; gap: 18px; margin-bottom: 10px; }
.result-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.result-record-title { font-size: clamp(28px,3.2vw,44px); line-height: 1.08; }
.result-save-state { margin: 7px 0 0; color: var(--ui-muted); font-size: 13px; }
.result-title-edit { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.result-header-actions { display: flex; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--ui-line); }
.result-more-actions { position: relative; }
.result-more-actions > div { left: 0; right: auto; }
.original-status { margin: 10px 0 22px !important; }
#results .tabs { overflow-x: auto; scrollbar-width: thin; }
#results .tabs button { white-space: nowrap; }
#results .result-tools { border-top: 1px solid var(--ui-line); padding-top: 10px; }
#results .pro-box { border: 0; background: var(--ui-subtle); }

/* Features and plans keep the home style, but use less vertical space. */
.feature-intro-copy h2 { font-size: clamp(46px,5.8vw,76px); }
.feature-intro-visual { width: min(100%,980px); aspect-ratio: 16 / 7; }
.feature-intro-note { bottom: 22px; }
#payment .plans-intro { grid-template-columns: minmax(0,1.05fr) minmax(360px,.95fr); gap: clamp(24px,4vw,54px); }
#payment .plans-intro-visual { aspect-ratio: 16 / 9; }
#payment .plans-intro-copy h2 { font-size: clamp(42px,4.5vw,62px); }
#payment .plan-compare { grid-template-columns: repeat(4,minmax(0,1fr)); }
#payment .plan-tier { padding: 24px !important; }
#payment .plan-tier-title { align-items: flex-start; flex-direction: column; gap: 8px; }
#payment .plan-tier-title span { white-space: normal; }
.checkout-closed { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 24px; border-radius: 20px; background: var(--ui-subtle); }
.checkout-closed p { max-width: 62ch; margin: 5px 0 0 !important; color: var(--ui-muted); }

/* Utility and state surfaces are functional, not decorative cards. */
.network-banner,.notice,.pay-status:empty { box-shadow: none; }
.screen:not(.landing-screen) details > summary { min-height: 44px; }

html[data-theme="dark"] #results .hint,
html[data-theme="dark"] #results .original-status,
html[data-theme="dark"] #results .result-save-state,
html[data-theme="dark"] #results .tabs button,
html[data-theme="dark"] #results .transcript-toolbar,
html[data-theme="dark"] #results .reader-options > summary,
html[data-theme="dark"] #results .transcript-help > summary { color: #b9c6dc; }
html[data-theme="dark"] #results .tabs button.active,
html[data-theme="dark"] #results .result-back-link { color: #72bfff; }
html[data-theme="dark"] #results .transcript-mode { background: #0d1936; border-color: #38507d; }
html[data-theme="dark"] #results .transcript-mode button { color: #c9d4e8; }
html[data-theme="dark"] #results .transcript-mode button[aria-pressed="true"] { background: #18366a; border-color: #4d78b5; color: #d9edff; }

@media (max-width: 1120px) {
  #payment .plan-compare { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #results .results-layout { grid-template-columns: minmax(0,1fr) 240px; }
}

@media (max-width: 860px) {
  #record .start-workspace { grid-template-columns: 1fr; }
  #record .start-aside { border: 0; border-top: 1px solid var(--ui-line); padding-top: 24px; }
  #results .results-layout { grid-template-columns: 1fr; }
  #results .results-side { position: static; order: 2; }
  #history .history-controls { grid-template-columns: 1fr 1fr; }
  #history #history-search { grid-column: 1 / -1; }
  #payment .plans-intro { display: flex !important; flex-direction: column; gap: 18px; }
  #payment .plans-intro-copy { order: -1; width: 100%; min-width: 0; padding: 18px 12px; }
  #payment .plans-intro-copy h2,#payment .plans-kicker,#payment .plans-intro-copy p { max-width: 100%; overflow-wrap: normal; word-break: normal; hyphens: none; }
  #payment .plans-intro-visual { width: 100%; min-width: 0; }
}

@media (max-width: 680px) {
  .screen:not(.landing-screen) { padding-top: 24px; }
  #record .start-intro h1 { font-size: 42px; }
  #record .console-grid { grid-template-columns: 1fr; }
  #history .history-head { grid-template-columns: 1fr; }
  #history .history-head h2,#history .history-head .hint,#history .history-import-cta { grid-column: 1; grid-row: auto; }
  #history .history-controls { grid-template-columns: 1fr; }
  #history #history-search { grid-column: auto; }
  #history .history-item { grid-template-columns: auto minmax(0,1fr) auto; gap: 8px 10px; align-items: start; }
  #history .history-item-main { grid-column: 2; }
  #history .history-status { grid-column: 2; justify-self: start; }
  #history .history-menu { grid-column: 3; grid-row: 1 / 3; }
  #history .history-item-sub { flex-wrap: wrap; gap: 3px 9px; }
  #history .history-item-sub span { max-width: min(68vw,260px); }
  #history .history-item-sub span + span::before { margin-right: 6px; }
  .result-title-row { align-items: stretch; flex-direction: column; }
  .result-title-edit { align-self: flex-start; }
  .result-header-actions { flex-wrap: wrap; }
  .feature-intro-visual { width: 100%; aspect-ratio: 16 / 10; border-radius: 24px; }
  .feature-intro-note { left: 14px; right: 14px; bottom: 14px; max-width: none; }
  #payment .plan-compare { grid-template-columns: 1fr; }
  #payment .plans-intro-visual { aspect-ratio: 16 / 10; }
  .checkout-closed { align-items: stretch; flex-direction: column; }
  .checkout-closed .actions-row { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}