/* Kavvi "Up next" + calm phone navbar (upnext-20261014) - see kv-upnext-20261014.js. Prefixes kvun, kvnv. */

/* ------------------------------------------------------------------ 1. the chat home: one row instead of the cards */
/* The old tiles stay in the DOM (React owns them, and the Today plan's session button is clicked from the row). */
html.kvun-on .kv-app-shell .intent-home .kv-today-slot,
html.kvun-on .kv-app-shell .intent-home .intent-home__panel,
html.kvun-on .kv-app-shell .intent-home .intent-home__cards { display: none !important; }

.kv-app-shell .intent-home > .kvun {
  order: 4;
  display: flex; align-items: stretch; gap: 8px;
  inline-size: 100%; box-sizing: border-box; margin-top: 0;
  padding: 6px; border-radius: 20px;
  border: 1px solid var(--kv-line, rgba(255, 255, 255, .08));
  background: var(--kvh-tile, var(--kv-card, #fff));
  animation: kvch-in .3s ease-out both;
}
/* the row sits right under the chips, not a card's distance away */
html.kvun-on .kv-app-shell .intent-home:has(> .kvun) .intent-home__input-block { margin-block-end: 4px !important; }
.kvun__main {
  flex: 1 1 auto; min-inline-size: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 6px 8px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit;
  text-align: start; cursor: pointer;
}
.kvun__main:hover { background: color-mix(in srgb, var(--kv-accent-fill, #1f5a42) 6%, transparent); }
.kvun__main:focus-visible, .kvun__cards:focus-visible { outline: 2px solid var(--kv-accent-fill, #1f5a42); outline-offset: 2px; }

/* the progress ring: done steps in the accent, the rest as a track; the count inside */
.kvun__mark { flex: none; inline-size: 42px; block-size: 42px; border-radius: 50%; display: grid; place-items: center; }
.kvun__mark--ring {
  background:
    radial-gradient(closest-side, var(--kvh-tile, var(--kv-card, #fff)) 78%, transparent 80%),
    conic-gradient(var(--kv-accent-fill, #1f5a42) calc(var(--kvun-p, 0) * 360deg), color-mix(in srgb, var(--kv-text, #182c25) 12%, transparent) 0);
}
.kvun__mark--ring span { font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; color: var(--kv-text, #182c25); font-variant-numeric: tabular-nums; }
.kvun__mark--icon { color: var(--kv-accent-fill, #1f5a42); background: color-mix(in srgb, var(--kv-accent-fill, #1f5a42) 11%, transparent); }
.kvun__mark--icon.is-live { color: var(--kv-on-accent, #fff); background: var(--kv-accent-fill, #1f5a42); }

.kvun__text { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.kvun__title, .kvun__sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.kvun__title { font-size: 14.5px; font-weight: 650; line-height: 1.35; color: var(--kv-text, #182c25); }
/* the step's name is the point of the row: two lines before it is cut */
.kvun .kvun__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
/* an English title in an Arabic row still sits on the row's start side */
.kvun[dir=rtl] .kvun__title, .kvun[dir=rtl] .kvun__sub { text-align: right; }
.kvun[dir=ltr] .kvun__title, .kvun[dir=ltr] .kvun__sub { text-align: left; }
.kvun__sub { font-size: 12.5px; line-height: 1.4; color: var(--kv-text-3, #6b7a72); }

/* a chevron in the reading direction */
.kvun__chev { flex: none; inline-size: 8px; block-size: 8px; margin-inline: 2px 6px; border-block-start: 2px solid var(--kv-text-3, #6b7a72); border-inline-end: 2px solid var(--kv-text-3, #6b7a72); transform: rotate(45deg); opacity: .7; }
.kvun[dir=rtl] .kvun__chev { transform: rotate(-45deg); }

/* flashcards to review: a small badge on the same row */
.kvun__cards {
  flex: none; align-self: center;
  min-block-size: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 650; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--kv-accent-fill, #1f5a42) 28%, transparent);
  background: color-mix(in srgb, var(--kv-accent-fill, #1f5a42) 9%, transparent);
  color: var(--kv-accent-fill, #1f5a42);
}
.kvun__cards[hidden] { display: none; }
.kvun__cards { display: inline-flex; align-items: center; gap: 5px; padding: 0 11px; }
.kvun__cards svg { inline-size: 15px; block-size: 15px; }
.kvun__cards b { font-weight: 700; font-variant-numeric: tabular-nums; }
.kvun__cards:hover { background: color-mix(in srgb, var(--kv-accent-fill, #1f5a42) 15%, transparent); }

html[data-theme='dark'] .kvun__mark--icon.is-live { color: var(--kv-on-accent, #0b1d16); }
@media (prefers-reduced-motion: reduce) { .kv-app-shell .intent-home > .kvun { animation: none; } }

/* ------------------------------------------------------------------ 2. phones: the navbar */
@media (max-width: 760px) {
  /* out of the bar, into the "more" sheet: focus timer (unless it is running), usage, new chat, theme, language */
  .os-top-nav .os-top-nav__right .os-top-nav__action--new-chat,
  .os-top-nav .os-top-nav__right .kv-nav-usage-btn,
  .os-top-nav .os-top-nav__right .kv-prefs .kv-prefs__theme,
  .os-top-nav .os-top-nav__right .kv-prefs .kv-prefs__langbtn,
  .os-top-nav .os-top-nav__right .kv-prefs .kv-prefs__pop,
  .os-top-nav .os-top-nav__right .kv-focus--nav:has(.kv-focus__nav.is-idle) { display: none !important; }

  /* the "theme and language" button becomes "more" (freelib hid it while the offer clock was on) */
  html .os-top-nav .os-top-nav__right .kv-prefs { display: inline-flex !important; }
  html .os-top-nav .os-top-nav__right .kv-prefs .kv-prefs__btn.kv-prefs__more { display: inline-grid !important; place-items: center; }
  html .os-top-nav .os-top-nav__right .kv-prefs .kv-prefs__more > svg { display: none; }
  html .os-top-nav .os-top-nav__right .kv-prefs .kv-prefs__more::before {
    content: ''; inline-size: 18px; block-size: 4px;
    background: radial-gradient(circle, currentColor 1.9px, transparent 2.3px) 0 50% / 7px 4px repeat-x;
  }

  .os-top-nav .os-top-nav__right { gap: 6px !important; }
  /* "Pro" for Free without an offer: a compact pill that never reaches the logo */
  .os-top-nav .os-top-nav__right .os-top-nav__upgrade { padding-inline: 12px !important; min-inline-size: 0 !important; gap: 6px !important; }
  .os-top-nav .os-top-nav__right .os-top-nav__upgrade > svg { inline-size: 16px; block-size: 16px; }
}

/* the "more" sheet */
.kvnv[hidden] { display: none; }
.kvnv { position: fixed; inset: 0; z-index: 10040; }
.kvnv__scrim { position: absolute; inset: 0; background: rgba(8, 18, 14, .38); animation: kvnv-fade .18s ease-out both; }
.kvnv__box {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0;
  background: var(--kv-card, #fff); color: var(--kv-text, #182c25);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .45);
  animation: kvnv-up .22s cubic-bezier(.2, .8, .2, 1) both;
  font-family: var(--kv-font-body, system-ui), sans-serif;
}
.kvnv__grab { display: block; inline-size: 38px; block-size: 4px; margin: 2px auto 10px; border-radius: 4px; background: color-mix(in srgb, var(--kv-text, #182c25) 18%, transparent); }
.kvnv__list { display: flex; flex-direction: column; }
.kvnv__item {
  display: flex; align-items: center; gap: 14px; min-block-size: 52px; padding: 0 8px; border: 0; border-radius: 12px;
  background: none; color: inherit; font: inherit; font-size: 15.5px; text-align: start; cursor: pointer;
}
.kvnv__item svg { color: var(--kv-accent-fill, #1f5a42); flex: none; }
.kvnv__item:hover, .kvnv__item:focus-visible { background: color-mix(in srgb, var(--kv-accent-fill, #1f5a42) 8%, transparent); outline: none; }
.kvnv__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 54px; padding: 0 8px; border-top: 1px solid var(--kv-line, rgba(0, 0, 0, .08)); }
.kvnv__list:empty + .kvnv__row { border-top: 0; }
.kvnv__label { font-size: 15.5px; }
.kvnv__seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: color-mix(in srgb, var(--kv-text, #182c25) 7%, transparent); }
.kvnv__seg button { min-block-size: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--kv-text-2, inherit); font: inherit; font-size: 13.5px; cursor: pointer; }
.kvnv__seg button[aria-pressed='true'] { background: var(--kv-card, #fff); color: var(--kv-text, #182c25); font-weight: 650; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
html[data-theme='dark'] .kvnv__seg button[aria-pressed='true'] { background: color-mix(in srgb, var(--kv-text, #fff) 14%, transparent); }
.kvnv__seg button:focus-visible { outline: 2px solid var(--kv-accent-fill, #1f5a42); outline-offset: 1px; }
@keyframes kvnv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kvnv-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .kvnv__scrim, .kvnv__box { animation: none; } }