/* Kavvi Free after the trial (freelib-20261013, calmer in freelib2-20261013) - see kv-freelib-20261013.js.
   Prefix kvfl. Quiet by design: the page's own type and colours, nothing that moves, a short fade in. */

/* the chat home's headline steps aside for the personal one, which sits exactly where it was */
html.kvfl-hello-on .intent-home__headline { visibility: hidden; }
.kvfl-hello {
  position: fixed; z-index: 5; pointer-events: none; box-sizing: border-box;
  opacity: 0; transition: opacity .3s ease; visibility: hidden;
}
.kvfl-hello.is-on { opacity: 1; visibility: visible; }
.kvfl-hi { margin: 0; }
.kvfl-hello[dir=rtl] .kvfl-hi { font-family: 'Kavvi Alexandria', inherit !important; }
.kvfl-sub {
  margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--kv-text-2, #4a5a52);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px;
}
.kvfl-hello[style*="text-align: left"] .kvfl-sub { justify-content: flex-start; }
.kvfl-kept:empty, .kvfl-offer:empty { display: none; }
.kvfl-offer { font-variant-numeric: tabular-nums; color: var(--kv-text, #182c25); font-weight: 600; }
.kvfl-link {
  pointer-events: auto; appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-weight: 700; color: var(--kv-accent-fill, #1f5a42); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.kvfl-link::after { content: none !important; }
.kvfl-link:hover { text-decoration-thickness: 2px; }
.kvfl-link:focus-visible { outline: 2px solid var(--kv-accent-fill, #1f5a42); outline-offset: 3px; border-radius: 4px; }

/* the taste, as quiet text inside the composer's bottom row */
.kvfl-count {
  position: fixed; z-index: 41; transform: translateY(-50%); pointer-events: none;
  font-size: 12.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .3s ease; visibility: hidden;
}
.kvfl-count.is-on { opacity: .85; visibility: visible; }

/* at 0: the composer itself becomes the way forward - same shape, calm colours */
.kvfl-wall {
  position: fixed; z-index: 42; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--kv-accent-fill, #1f5a42) 30%, transparent);
  border-radius: 16px; cursor: pointer; font: inherit;
  background: color-mix(in srgb, var(--kv-accent-fill, #1f5a42) 9%, var(--kv-card-raised, #fff));
  color: var(--kv-text, #182c25);
  opacity: 0; visibility: hidden; transition: opacity .3s ease;
}
.kvfl-wall.is-on { opacity: 1; visibility: visible; }
.kvfl-wall::after { content: none !important; }
.kvfl-wall b { font-size: 15.5px; font-weight: 750; color: var(--kv-accent-fill, #1f5a42); }
.kvfl-wall small { font-size: 12.5px; color: var(--kv-text-2, #4a5a52); }
.kvfl-wall:hover { background: color-mix(in srgb, var(--kv-accent-fill, #1f5a42) 14%, var(--kv-card-raised, #fff)); }
.kvfl-wall:focus-visible { outline: 2px solid var(--kv-accent-fill, #1f5a42); outline-offset: 3px; }

/* the Pro sheet's own lines for Free (limit-offer reads window.__kavviFreeState) */
.kvlo__kept { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.kvlo__kept span { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.kvlo__kept b { color: #fff; }
.kvlo__proof { margin: -4px 0 12px; font-size: 12.5px; opacity: .8; }

@media (prefers-reduced-motion: reduce) { .kvfl-hello, .kvfl-count, .kvfl-wall { transition: none; } }
@media (max-width: 760px) { .kvfl-sub { font-size: 13px; gap: 2px 10px; } }

/* Phones: while the comeback offer's clock is in the navbar, the right-hand group (clock, new chat, timer, bell,
   usage, language, streak) is wider than the screen and slid over the Kavvi logo. Usage and language are on the
   Profile page; they step out of the navbar until the offer ends. */
@media (max-width: 760px) {
  html.kvte-offer .os-top-nav__right .kv-nav-usage-btn,
  html.kvte-offer .os-top-nav__right .kv-prefs__btn { display: none !important; }
}

/* ------------------------------------------------------------------ money-20261014: phones */
@media (max-width: 760px) {
  /* the navbar's offer clock: a compact chip - "-25% 20:41", no hex, no seconds */
  html.kvte-offer .os-top-nav .kvte-badge > svg,
  html.kvte-offer .os-top-nav .kvte-badge .kvtt__label { display: none !important; }
  html.kvte-offer .os-top-nav .kvte-badge .kvt-clock__s, html.kvte-offer .os-top-nav .kvte-badge .kvt-clock__long { display: none !important; }
  html.kvte-offer .os-top-nav .kvte-badge .kvtt__words { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 0; }
  html.kvte-offer .os-top-nav .kvte-badge { padding-inline: 10px !important; }
  html.kvte-offer .os-top-nav .kvte-badge .kvtt__words::before {
    content: var(--kvfl-offer-tag, "PRO"); margin-inline-end: 6px; font-size: 11px; font-weight: 800; color: #b8860b;
  }
  html.kvte-offer .os-top-nav .os-top-nav__action--new-chat { display: none !important; }

  /* the personal headline: one line, sized for a phone; one quiet subline (the clock lives in the navbar) */
  .kvfl-hello .kvfl-hi { font-size: var(--kvfl-hi-size, 25px) !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kvfl-hello .kvfl-offer, .kvfl-hello .kvfl-link { display: none; }
  .kvfl-sub { margin-top: 6px; }

  /* the chat home: less dead space; the chips row fades at its edge instead of being cut */
  html .kv-app-shell .intent-home { gap: 14px; }
  html .kv-app-shell .intent-home__input-block { margin-bottom: 4px; }
  html .kv-app-shell .intent-home__chips { mask-image: linear-gradient(90deg, #000 82%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); scroll-snap-type: x proximity; }
  html[dir=rtl] .kv-app-shell .intent-home__chips { mask-image: linear-gradient(270deg, #000 82%, transparent); -webkit-mask-image: linear-gradient(270deg, #000 82%, transparent); }
}

/* ------------------------------------------------------------------ chathome-20261014: phones */
/* The greeting is the page's own headline, rewritten in place: "What are we making sense of?" is kept in the DOM
   (React owns it) but drawn at size 0, and the personal line and the kept line are drawn by ::before / ::after. It
   scrolls with the page and appears with it - nothing floats over it any more. The home's top padding gives back
   what the second line adds, so the composer stays where it was. */
@media (max-width: 760px) {
  html.kvfl-hi-inline .kv-app-shell .intent-home { padding-top: 40px; }
  html.kvfl-hi-inline .kv-app-shell .intent-home .intent-home__headline {
    visibility: visible !important; font-size: 0 !important; line-height: 0 !important; letter-spacing: 0 !important;
    margin-block-end: 6px !important; text-wrap: balance;
  }
  html.kvfl-hi-inline .kv-app-shell .intent-home .intent-home__headline > * { display: none !important; }
  html.kvfl-hi-inline .kv-app-shell .intent-home .intent-home__headline::before {
    content: var(--kvfl-hi-text, ""); display: block;
    font-size: var(--kvfl-hi-size, 25px); line-height: 1.25; letter-spacing: -.02em; font-weight: 500;
  }
  html.kvfl-hi-inline[lang^=ar] .kv-app-shell .intent-home .intent-home__headline::before {
    font-family: 'Kavvi Alexandria', var(--kv-font-body, system-ui), sans-serif; letter-spacing: 0;
  }
  html.kvfl-hi-inline .kv-app-shell .intent-home .intent-home__headline::after {
    content: var(--kvfl-kept-text, ""); display: block; margin-top: 6px;
    font: 400 13px/1.6 var(--kv-font-body, system-ui), sans-serif; letter-spacing: 0; color: var(--kv-text-2, #4a5a52);
  }
  html.kvfl-hi-inline .kvfl-hello { display: none !important; }
}

/* ------------------------------------------------------------------ upnext-20261014: chat home input box */
/* "5 free questions left today" is the input row's own ::after, in the bottom row's middle cell (the row is a grid,
   "text text text" / "plus . send", from chat-home-20260927) - it scrolls with the page instead of trailing it. */
html.kvfl-count-inline .kv-app-shell .intent-home .intent-home__input-row::after {
  content: var(--kvfl-count-text, ""); grid-row: 2; grid-column: 2; align-self: center; min-inline-size: 0;
  padding-inline: 10px; font-size: 12.5px; line-height: 1.2; color: var(--kv-text-3); opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
/* At 0 the box itself becomes the way forward: same shape, calm colours; a tap opens the Pro sheet. */
html.kvfl-wall-inline .kv-app-shell .intent-home form.intent-home__input > * { visibility: hidden; pointer-events: none; }
html.kvfl-wall-inline .kv-app-shell .intent-home form.intent-home__input { cursor: pointer; }
html.kvfl-wall-inline .kv-app-shell .intent-home form.intent-home__input::before,
html.kvfl-wall-inline .kv-app-shell .intent-home form.intent-home__input::after {
  position: absolute; inset-inline: 16px; text-align: center; pointer-events: none;
}
html.kvfl-wall-inline .kv-app-shell .intent-home form.intent-home__input::before {
  content: var(--kvfl-wall-b, ""); top: calc(50% - 22px); font-size: 15.5px; font-weight: 750; color: var(--kv-accent-fill, #1f5a42);
}
html.kvfl-wall-inline .kv-app-shell .intent-home form.intent-home__input::after {
  content: var(--kvfl-wall-s, ""); top: calc(50% + 4px); font-size: 12.5px; color: var(--kv-text-2, #4a5a52);
}
html.kvfl-wall-inline .kv-app-shell .intent-home form.intent-home__input {
  background: color-mix(in srgb, var(--kv-accent-fill, #1f5a42) 9%, var(--kv-card-raised, #fff)) !important;
}