/* GeminiMA: small overrides on top of Tabler 1.5.1. Keep this file short. */
/* [data-bs-theme] too: the dark sidebar re-declares Tabler's variables on its own element. */
:root, [data-bs-theme] {
  --tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --gma-brand: #e94560;
}

/* Brand mark (logo only; buttons keep Tabler's primary blue) */
.gma-brand { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; font-weight: 700; }
.gma-logo { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; background: var(--gma-brand); color: #fff; font-size: 1.25rem; }
.gma-nav-group { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .6; pointer-events: none; }

/* Razor validation output in Tabler colours */
.field-validation-error { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--tblr-danger); }
.input-validation-error { border-color: var(--tblr-danger) !important; }
.validation-summary-valid { display: none !important; }
.validation-summary-errors ul { margin: 0; padding-left: 1.25rem; }

/* Score ring: Razor sets style="--gma-value: 63; --gma-ring-color: var(--tblr-yellow)" */
.score-ring { --gma-value: 0; --gma-ring-color: var(--tblr-primary); width: 8.5rem; height: 8.5rem; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--gma-ring-color) calc(var(--gma-value) * 1%), var(--tblr-border-color) 0); }
.score-ring-inner { width: 7rem; height: 7rem; border-radius: 50%; background: var(--tblr-bg-surface); display: grid; place-items: center; text-align: center; }

/* Timecode chips that seek the player */
.seek-chip { cursor: pointer; border: 0; }
.seek-chip:hover, .seek-chip:focus-visible { text-decoration: underline; }

/* The player stays beside the report on wide screens */
@media (min-width: 992px) { .detail-player { position: sticky; top: 1rem; } }

/* Old plain-text reports and multi-line AI text */
.legacy-text { white-space: pre-wrap; font-family: var(--tblr-font-monospace); font-size: .875rem; margin: 0; }
.text-pre-line { white-space: pre-line; }

/* One-line preview cells of the admin tables */
.cell-truncate { max-width: 28rem; }

/* Upload drop zone */
.upload-drop { position: relative; display: block; border: 2px dashed var(--tblr-border-color); border-radius: var(--tblr-border-radius-lg); padding: 2.5rem 1rem; text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.upload-drop:hover, .upload-drop.is-dragover { border-color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), .04); }
.upload-drop:focus-within { border-color: var(--tblr-primary); }

/* Charts keep their height while ApexCharts loads */
.chart-box { min-height: 260px; }
/* Admin › AI usage: in the calls table the video name keeps a readable width; on mid-size screens the table scrolls inside its card */
.col-video { min-width: 10rem; }

/* Admin › Thống kê điểm: the score matrix scrolls sideways inside its card while the learner column stays on the left; that
   column needs an opaque background to cover the scores sliding under it. */
.gma-matrix > :is(thead, tbody) > tr > :first-child { position: sticky; left: 0; z-index: 1; min-width: 11rem; background-color: var(--tblr-bg-surface); }
.gma-matrix td { min-width: 4.5rem; }

/* Admin › AI config: long prompts scroll inside the box instead of stretching the page */
textarea[data-autosize] { max-height: 60vh; overflow-y: auto; }
/* Criterion name keeps a readable width; on phones the switch moves below it */
.criterion-name { flex: 1 1 13rem; width: auto; min-width: 0; }

/* Tabler's "-lt" badges (status, score, role and timecode badges) use the saturated base colour as text. On the tinted
   background that is 1.9:1 to 4.3:1 in the light theme (yellow, green, orange and azure are the worst) and 2.7:1 to 4.3:1
   for indigo in the dark theme. light-dark() follows Tabler's own color-scheme (also inside the dark sidebar): darker text
   on light, lighter on dark, so every badge reaches 4.5:1. Tabler's own rule is also (0,1,0) and !important, so these win
   by load order: app.css is linked after tabler.min.css in _Layout. */
.bg-blue-lt { color: light-dark(color-mix(in srgb, var(--tblr-blue) 85%, #000), color-mix(in srgb, var(--tblr-blue) 60%, #fff)) !important; }
.bg-azure-lt { color: light-dark(color-mix(in srgb, var(--tblr-azure) 65%, #000), color-mix(in srgb, var(--tblr-azure) 60%, #fff)) !important; }
.bg-indigo-lt { color: light-dark(color-mix(in srgb, var(--tblr-indigo) 85%, #000), color-mix(in srgb, var(--tblr-indigo) 60%, #fff)) !important; }
.bg-purple-lt { color: light-dark(color-mix(in srgb, var(--tblr-purple) 85%, #000), color-mix(in srgb, var(--tblr-purple) 60%, #fff)) !important; }
.bg-red-lt { color: light-dark(color-mix(in srgb, var(--tblr-red) 85%, #000), color-mix(in srgb, var(--tblr-red) 60%, #fff)) !important; }
.bg-orange-lt { color: light-dark(color-mix(in srgb, var(--tblr-orange) 65%, #000), color-mix(in srgb, var(--tblr-orange) 60%, #fff)) !important; }
.bg-yellow-lt { color: light-dark(color-mix(in srgb, var(--tblr-yellow) 55%, #000), var(--tblr-yellow)) !important; }
.bg-green-lt { color: light-dark(color-mix(in srgb, var(--tblr-green) 60%, #000), var(--tblr-green)) !important; }
.bg-secondary-lt { color: light-dark(color-mix(in srgb, var(--tblr-secondary) 85%, #000), var(--tblr-secondary)) !important; }

/* Live practice (P2): the camera preview, shown like a mirror as in the app, and the feedback sentence over it. The
   feedback colours are darkened by a quarter so the white sentence reads at 4.5:1 or more on each of them (Tabler's own
   green is 2.7:1); on phones the sentence is smaller so it hides less of the preview. */
.live-preview { display: block; aspect-ratio: 4 / 3; object-fit: cover; background: #000; transform: scaleX(-1); }
.live-feedback { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; padding: .75rem 1rem; border-radius: .75rem;
  color: #fff; font-size: 1.5rem; font-weight: 700; text-align: center; }
.live-feedback-orange { background: color-mix(in srgb, var(--tblr-orange) 75%, #000); }
.live-feedback-azure { background: color-mix(in srgb, var(--tblr-azure) 75%, #000); }
.live-feedback-green { background: color-mix(in srgb, var(--tblr-green) 75%, #000); }
@media (max-width: 575.98px) { .live-feedback { left: .75rem; right: .75rem; bottom: .75rem; padding: .5rem .75rem; font-size: 1.125rem; } }

/* A page title breaks a word wider than its column (a long file name, a conversation titled by its question) instead of
   running under the page actions on a phone. */
.page-title { overflow-wrap: anywhere; }

/* Coach chat (G): the learner's bubbles on the right, the coach's on the left; the messages scroll inside the card. */
.chat-list { max-height: 70vh; overflow-y: auto; }
.chat-messages { display: flex; flex-direction: column; gap: .75rem; height: 60vh; min-height: 18rem; overflow-y: auto; }
.chat-row { display: flex; }
.chat-row-user { justify-content: flex-end; }
.chat-bubble { max-width: 85%; padding: .5rem .75rem; border-radius: var(--tblr-border-radius-lg); white-space: pre-line; overflow-wrap: anywhere; }
.chat-row-user .chat-bubble { background: var(--tblr-primary); color: #fff; }
.chat-row-model .chat-bubble { background: var(--tblr-bg-surface-secondary); }
.chat-bubble > :last-child { margin-bottom: 0; }
.chat-bubble ul, .chat-bubble ol { padding-left: 1.25rem; margin-bottom: .5rem; }
.chat-empty-icon { font-size: 2.5rem; }

/* Public landing page (/About; "/" when signed out) on _PublicLayout. The navbar is sticky, so the sections it links to
   stop below it; the screenshots sit in a phone-shaped frame that keeps a visible edge in the dark theme. */
.gma-hero { padding: 2rem 0 3rem; background: linear-gradient(180deg, rgba(233, 69, 96, .1), rgba(233, 69, 96, 0) 75%); }
.gma-hero-title { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin-bottom: 1rem; text-wrap: balance; }
.gma-hero-lead { font-size: 1.125rem; max-width: 36rem; margin-bottom: 1.5rem; }
.gma-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; }
.gma-hero-actions > * { flex: 1 1 100%; }
@media (min-width: 576px) { .gma-hero-actions > * { flex: 0 0 auto; } }
.gma-phone { display: block; width: 100%; max-width: 17rem; height: auto; margin-inline: auto; border: .5rem solid #1e293b; border-radius: 2rem;
  background: #1e293b; box-shadow: 0 0 0 1px var(--tblr-border-color), 0 1.25rem 2.5rem rgba(15, 23, 42, .18); }
.gma-phone-sm { max-width: 13rem; border-width: .375rem; border-radius: 1.5rem; }
/* Toasts (e.g. "Bạn đã đăng xuất.") open below the sticky navbar instead of over its buttons. */
.gma-public #toast-container { top: 3.5rem !important; }
/* "Tải app Android" stays beside the brand in the navbar down to a 360 px phone (a narrower one wraps it onto a second line). */
@media (max-width: 419.98px) { .gma-navbar-download { --tblr-btn-padding-x: .5rem; --tblr-btn-font-size: .8125rem; } }
/* Tabler pads containers by .5rem below lg: the landing keeps 1rem from the screen edge at every width. */
:is(.gma-hero, .gma-section) > .container-xl { padding-inline: 1rem; }
.gma-section { padding: 3.5rem 0; scroll-margin-top: 3.5rem; }
.gma-section-alt { background: var(--tblr-bg-surface); border-block: 1px solid var(--tblr-border-color); }
.gma-section-head { max-width: 40rem; margin: 0 auto 2rem; text-align: center; text-wrap: balance; }
.gma-section-title { font-size: 1.75rem; font-weight: 700; margin-bottom: .5rem; }