/* KAVVI CHAT HOME (2026-09-27) - the new-conversation page, re-laid-out
   around the composer.

   Before: eyebrow tip, a two-line headline, the Today card, then the input
   (a thin bar halfway down a phone), four chips, a paper-white path panel
   and three stat cards that mostly said "Nothing yet".

   Now, top to bottom:
     1. one greeting line
     2. the composer: large, raised, the only strong surface on the page
     3. the starter chips as one quiet row that serves it
     4. "continue" tiles, each only when it has something real:
        Today (a live plan), the next path step, Due, Fading.

   CSS only, over the ChatPage chunk's own markup (no bundle patch). The
   headline/eyebrow block and the first-screen wrapper become
   `display: contents`, so their children can be re-ordered inside
   .intent-home. The input block keeps its box: the mention picker is
   positioned against it. Nothing is moved in the DOM - React owns it. */

.kv-app-shell .intent-home {
  --kvh-max: 720px;
  --kvh-radius: 26px;
  --kvh-ring: color-mix(in srgb, var(--kv-accent-fill, #6ee7b7) 34%, var(--kv-line-3, rgba(255,255,255,.14)));
  --kvh-lift: 0 22px 60px -28px rgba(0, 0, 0, .7), 0 2px 10px -4px rgba(0, 0, 0, .35);
  --kvh-halo: 0 0 0 7px color-mix(in srgb, var(--kv-accent-fill, #6ee7b7) 7%, transparent);
  --kvh-tile: color-mix(in srgb, var(--kv-card, #15201c) 86%, transparent);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  inline-size: 100%;
  max-inline-size: calc(var(--kvh-max) + 48px);
  margin-inline: auto;
  padding: clamp(24px, 13vh, 150px) 24px 48px;
}
html[data-theme='light'] .kv-app-shell .intent-home {
  --kvh-lift: 0 22px 50px -30px rgba(24, 44, 37, .38), 0 2px 8px -4px rgba(24, 44, 37, .16);
  --kvh-tile: var(--kv-card, #fff);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .kv-app-shell .intent-home {
    --kvh-lift: 0 22px 50px -30px rgba(24, 44, 37, .38), 0 2px 8px -4px rgba(24, 44, 37, .16);
    --kvh-tile: var(--kv-card, #fff);
  }
}

.kv-app-shell .intent-home .intent-home__first-screen,
.kv-app-shell .intent-home .intent-home__eyebrow-block { display: contents; }

/* The tip ("Send a photo of your lesson...") repeats the chips, and "You
   left off in X" repeats the continue tile below. */
.kv-app-shell .intent-home .intent-home__eyebrow { display: none; }

/* 1. Greeting - one line, secondary to the composer. */
.kv-app-shell .intent-home .intent-home__headline {
  order: 1;
  align-self: center;
  max-inline-size: none;
  margin: 0 0 10px;
  font-size: clamp(26px, 2.9vw, 38px);
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
  text-wrap: balance;
}
.kv-app-shell .intent-home .intent-home__headline .kv-type-accent { display: inline; }

/* 2. The composer. */
.kv-app-shell .intent-home .intent-home__input-block {
  order: 2;
  inline-size: 100%;
  max-inline-size: none;
  gap: 14px;
  margin-block-end: 28px;
}
.kv-app-shell .intent-home form.intent-home__input {
  gap: 8px;
  min-block-size: 132px;
  padding: 16px 14px 12px 18px;
  border-radius: var(--kvh-radius);
  border: 1px solid var(--kvh-ring);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kv-accent-fill, #6ee7b7) 6%, var(--kv-card, #15201c)), var(--kv-card, #15201c) 70%);
  box-shadow: var(--kvh-lift), var(--kvh-halo);
  justify-content: space-between;
}
html[dir='rtl'] .kv-app-shell .intent-home form.intent-home__input { padding: 16px 18px 12px 14px; }
.kv-app-shell .intent-home form.intent-home__input:focus-within {
  border-color: var(--kv-accent-fill, #6ee7b7);
  box-shadow: var(--kvh-lift), 0 0 0 4px color-mix(in srgb, var(--kv-accent-fill, #6ee7b7) 24%, transparent);
}
/* The row becomes two lines: the text on top, the tools under it. */
.kv-app-shell .intent-home .intent-home__input-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "text text text" "plus . send";
  align-items: end !important;
  row-gap: 8px !important;
}
.kv-app-shell .intent-home .intent-home__input-row textarea {
  grid-area: text;
  min-block-size: 58px !important;
  padding: 2px 4px !important;
  font-size: 17px;
  line-height: 1.55;
}
.kv-app-shell .intent-home .intent-home__input-row textarea::placeholder { font-size: 17px; color: var(--kv-text-3); }
.kv-app-shell .intent-home .intent-home__input-row .composer-plus { grid-area: plus; }
.kv-app-shell .intent-home .intent-home__input-row .kv-composer-btn--send { grid-area: send; }
.kv-app-shell .intent-home .intent-home__input .kv-icon-btn--attach.composer-plus {
  inline-size: 38px !important; block-size: 38px !important; min-inline-size: 38px !important; min-block-size: 38px !important;
  max-inline-size: 38px !important; max-block-size: 38px !important; flex-basis: 38px !important;
  border-radius: 50% !important;
  border: 1px solid var(--kv-line-3, rgba(255,255,255,.14)) !important;
  background: transparent !important;
  color: var(--kv-text-2, inherit) !important;
}
.kv-app-shell .intent-home .intent-home__input .kv-icon-btn--send {
  inline-size: 40px !important; block-size: 40px !important; min-inline-size: 40px !important; min-block-size: 40px !important;
  max-inline-size: 40px !important; max-block-size: 40px !important; flex-basis: 40px !important;
  border-radius: 50% !important;
}

/* A soft light behind the composer, so it reads as the centre of the
   page in Free too (Pro also has the honeycomb). */
.kv-app-shell .intent-home .intent-home__input-block::before {
  content: '';
  position: absolute;
  inset: -56px -8% -24px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 42%, color-mix(in srgb, var(--kv-accent-fill, #6ee7b7) 12%, transparent), transparent 72%);
}

/* 3. Starter chips: one quiet row that serves the composer. */
.kv-app-shell .intent-home .intent-home__chips {
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.kv-app-shell .intent-home .intent-home__chips .kv-chip {
  gap: 6px !important;
  min-block-size: 34px;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  border: 1px solid var(--kv-line, rgba(255,255,255,.08)) !important;
  background: color-mix(in srgb, var(--kv-card, #15201c) 60%, transparent) !important;
  color: var(--kv-text-2, var(--kv-text)) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.kv-app-shell .intent-home .intent-home__chips .kv-chip .chip-icon { color: var(--kv-accent-fill, #6ee7b7) !important; opacity: .9; }
.kv-app-shell .intent-home .intent-home__chips .kv-chip:hover,
.kv-app-shell .intent-home .intent-home__chips .kv-chip.is-active {
  border-color: var(--kv-accent-fill, #6ee7b7) !important;
  background: color-mix(in srgb, var(--kv-accent-fill, #6ee7b7) 13%, transparent) !important;
  color: var(--kv-text, #fff) !important;
  transform: none !important;
}

/* 4. Continue tiles - each one only when it has something to say. */
.kv-app-shell .intent-home .kv-today-slot { order: 3; }
.kv-app-shell .intent-home .intent-home__panel { order: 4; }
.kv-app-shell .intent-home .intent-home__cards { order: 5; }
.kv-app-shell .intent-home .kv-today-slot:empty,
.kv-app-shell .intent-home .kv-today-slot:has(> .kvp-today--cta),
.kv-app-shell .intent-home .intent-home__panel:has(.intent-home__panel-empty) { display: none; }

/* The Today card is designed in plan-v3's plan.css (2026-09-28); here it only
   takes the home screen's tile width and colour. */
.kv-app-shell .intent-home .kv-today-slot .kvp-today {
  max-inline-size: none;
  margin: 0;
  border-radius: 18px;
  background: var(--kvh-tile);
}

/* The next path step: one compact tile, not a paper-white panel. The
   paper class re-points the colour tokens, so they are handed back. */
.kv-app-shell .intent-home .intent-home__panel,
.kv-app-shell .intent-home .intent-home__panel.kv-paper {
  --kv-text: inherit; --kv-text-bright: inherit; --kv-text-2: inherit; --kv-text-3: inherit;
  --kv-text-muted: inherit; --kv-card: inherit; --kv-line: inherit; --kv-accent-fill: inherit;
  --kv-on-accent: inherit; --kv-violet-18: inherit;
  color: var(--kv-text);
  color-scheme: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 18px;
  inline-size: 100%;
  max-inline-size: none;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--kv-line, rgba(255,255,255,.08));
  background: var(--kvh-tile);
  box-shadow: none;
}
.kv-app-shell .intent-home .intent-home__panel-head {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.kv-app-shell .intent-home .intent-home__panel-head > div { gap: 2px !important; }
.kv-app-shell .intent-home .intent-home__panel .kv-title {
  font: 600 12px/1.5 var(--kv-font-body) !important;
  color: var(--kv-text-3);
  letter-spacing: 0;
}
/* "Statics · Free-body diagrams" - the line that matters. */
.kv-app-shell .intent-home .intent-home__panel-head > div > span:nth-child(2) {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--kv-text) !important;
}
.kv-app-shell .intent-home .intent-home__panel .kv-meta {
  font: 400 12px/1.5 var(--kv-font-body) !important;
  color: var(--kv-text-3) !important;
}
/* Steps shrink to a progress track plus the one step that is next. */
.kv-app-shell .intent-home .intent-home__steps {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: 0;
}
.kv-app-shell .intent-home .intent-home__step { display: contents; }
.kv-app-shell .intent-home .intent-home__step-node-row {
  order: 1;
  flex: 1 1 0;
  flex-direction: row;
  block-size: auto;
  min-inline-size: 0;
  gap: 4px;
  padding: 0;
  grid-row: auto;
}
.kv-app-shell .intent-home .intent-home__step:last-child .intent-home__step-node-row { flex: 0 0 auto; }
.kv-app-shell .intent-home .intent-home__step-line:not(.done):not(.current) { background: var(--kv-line-3, rgba(255,255,255,.14)); }
.kv-app-shell .intent-home .intent-home__step-line { inline-size: auto; min-block-size: 0; block-size: 2px; margin-inline-end: 4px; }
.kv-app-shell .intent-home .intent-home__step .kv-dot { inline-size: 9px; block-size: 9px; flex: none; }
.kv-app-shell .intent-home .intent-home__step-note,
.kv-app-shell .intent-home .intent-home__step:not(.current) .intent-home__step-title { display: none; }
.kv-app-shell .intent-home .intent-home__step.current .intent-home__step-title {
  order: 2;
  flex-basis: 100%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--kv-text-2, var(--kv-text));
}
.kv-app-shell .intent-home .intent-home__step.current .intent-home__step-title::before { content: 'Next · '; color: var(--kv-text-3); }
.kv-app-shell .intent-home .intent-home__step.current .intent-home__step-title:lang(ar)::before { content: 'الجاي · '; }
.kv-app-shell .intent-home .intent-home__panel-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 0;
}
/* "Just answer me" only focused the composer that is right above it. */
.kv-app-shell .intent-home .intent-home__panel-actions .kv-btn--secondary { display: none; }
.kv-app-shell .intent-home .intent-home__panel-actions .kv-btn--primary {
  min-block-size: 38px !important;
  padding-inline: 16px;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  border: 0 !important;
  color: var(--kv-on-accent, #0b1d16) !important;
  background: var(--kv-accent-fill, #6ee7b7) !important;
}

/* Resume only when there is no path (the path names the same lesson);
   Due and Fading only when they hold something. */
.kv-app-shell .intent-home .intent-home__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  inline-size: 100%;
  max-inline-size: none;
  padding: 0;
}
.kv-app-shell .intent-home .intent-home__card {
  flex: 1 1 200px;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--kvh-tile);
  opacity: 1;
}
.kv-app-shell .intent-home .intent-home__card:disabled,
.kv-app-shell .intent-home .intent-home__card:nth-child(2):not(:has(.intent-home__card-note.warning)),
.kv-app-shell .intent-home:has(.intent-home__steps) .intent-home__card:nth-child(1) { display: none; }
.kv-app-shell .intent-home .intent-home__card .kv-eyebrow { font-size: 12px; color: var(--kv-text-3); }
.kv-app-shell .intent-home .intent-home__card-title { font-size: 14.5px; font-weight: 600; }
.kv-app-shell .intent-home .intent-home__card-note { font-size: 12.5px; }

/* Phones: the composer sits in the upper third, the chips scroll in a
   single row, and the bottom tab bar never covers the last tile. */
@media (max-width: 640px) {
  .kv-app-shell .intent-home {
    gap: 10px;
    padding: clamp(20px, 11vh, 110px) 16px 112px;
  }
  .kv-app-shell .intent-home .intent-home__headline { font-size: clamp(21px, 6.2vw, 26px); line-height: 1.3; margin-block-end: 6px; }
  .kv-app-shell .intent-home .intent-home__input-block::before { inset: -40px -16px -16px; background: radial-gradient(75% 60% at 50% 40%, color-mix(in srgb, var(--kv-accent-fill, #6ee7b7) 16%, transparent), transparent 75%); }
  .kv-app-shell .intent-home .intent-home__input-block { gap: 12px; margin-block-end: 20px; }
  .kv-app-shell .intent-home form.intent-home__input { min-block-size: 116px; border-radius: 22px; padding: 14px 12px 10px 16px; }
  html[dir='rtl'] .kv-app-shell .intent-home form.intent-home__input { padding: 14px 16px 10px 12px; }
  .kv-app-shell .intent-home .intent-home__input-row textarea { min-block-size: 50px !important; font-size: 16px; }
  .kv-app-shell .intent-home .intent-home__input-row textarea::placeholder { font-size: 16px; }
  .kv-app-shell .intent-home .intent-home__chips {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -16px !important;
    padding-inline: 16px !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  .kv-app-shell .intent-home .intent-home__chips::-webkit-scrollbar { display: none; }
  .kv-app-shell .intent-home .intent-home__chips .kv-chip { flex: none; min-block-size: 38px; }
  .kv-app-shell .intent-home .intent-home__panel,
  .kv-app-shell .intent-home .intent-home__panel.kv-paper { grid-template-columns: minmax(0, 1fr); }
  .kv-app-shell .intent-home .intent-home__panel-actions { grid-column: 1; grid-row: auto; }
  .kv-app-shell .intent-home .intent-home__panel-actions .kv-btn--primary { inline-size: 100%; }
}

/* Phones: the chat-sidebar toggle floated as a labelled pill between the
   header and the page. A round icon button is enough. */
@media (max-width: 640px) {
  .kv-app-shell .os-chat-sidebar-toggle-btn.is-sidebar-closed {
    inline-size: 40px !important;
    block-size: 40px !important;
    min-inline-size: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
  }
  .kv-app-shell .os-chat-sidebar-toggle-btn.is-sidebar-closed .os-chat-toggle-label {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}