:root {
  color-scheme: light;
  font-family: var(--ks-font-narrative);
  color: var(--ks-color-text-primary);
  background: var(--ks-color-background-canvas);
  font-variant-numeric: tabular-nums;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 390px;
  height: 844px;
  margin: 0;
  overflow: hidden;
}

button {
  font: inherit;
}

.showcase {
  position: relative;
  width: 390px;
  height: 844px;
  overflow: hidden;
  background: var(--ks-color-background-canvas);
}

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(10px);
  transition:
    opacity var(--ks-motion-sheet) var(--ks-ease-out),
    transform var(--ks-motion-sheet) var(--ks-ease-out),
    visibility 0s linear var(--ks-motion-sheet);
}

.scene.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.status-bar {
  position: relative;
  z-index: 5;
  height: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 24px 8px;
  color: color-mix(in srgb, var(--ks-color-text-primary) 72%, transparent);
  font-size: 11px;
  font-weight: var(--ks-typography-weight-strong);
}

.battery {
  position: relative;
  width: 28px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.battery::after {
  position: absolute;
  inset: 2px;
  width: 17px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}

.screen-header {
  position: relative;
  z-index: 5;
  height: 90px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px 18px;
  border-bottom: var(--ks-title-header-divider-size) solid var(--ks-title-header-divider);
}

.screen-header h1,
.chat-header h1 {
  margin: 0;
  color: var(--ks-title-header-title);
  font-family: var(--ks-font-narrative);
  font-size: var(--ks-title-header-title-size);
  line-height: var(--ks-title-header-title-leading);
  font-weight: var(--ks-title-header-title-weight);
  letter-spacing: var(--ks-title-header-title-tracking);
}

.screen-header {
  align-items: center;
}

.mood-checkin {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ks-color-text-primary);
  font-size: 11px;
}

.mood-checkin b {
  font-weight: var(--ks-typography-weight-strong);
}

.mood-face {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.88), transparent 29%),
    linear-gradient(145deg, #f2f4f5, #dfe3e6);
  box-shadow: inset 0 0 0 1px rgba(36, 43, 48, 0.04);
}

.mood-face i {
  position: absolute;
  top: 12px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #4d5961;
}

.mood-face i:first-child { left: 9px; }
.mood-face i:nth-child(2) { right: 9px; }
.mood-face i:last-child {
  left: 12px;
  top: 19px;
  width: 8px;
  height: 1.5px;
  border-radius: 999px;
  background: #4d5961;
}

.header-status,
.chat-header > span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--ks-color-action-primary-surface) 22%, transparent);
  border-radius: var(--ks-radius-pill);
  background: var(--ks-color-action-subtle-surface);
  color: color-mix(in srgb, var(--ks-color-text-primary) 66%, var(--ks-color-action-primary-surface) 34%);
  font-size: 10.5px;
  font-weight: var(--ks-typography-weight-strong);
  white-space: nowrap;
}

/* Calories --------------------------------------------------------- */

.calories-scene {
  background: var(--ks-material-mesh-canvas-edge-pools);
}

.calories-scroll {
  position: absolute;
  inset: 126px 0 0;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 4px 24px 118px;
  overflow: hidden;
}

.calorie-dashboard {
  display: grid;
  gap: 13px;
  padding: 7px 4px 0;
}

.dashboard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.dashboard-head h2 {
  margin: 0;
  color: var(--ks-color-data-food-ink);
  font-family: var(--ks-font-narrative);
  font-size: 17px;
  font-weight: var(--ks-module-card-title-weight);
}

.dashboard-head span {
  color: var(--ks-color-text-secondary);
  font-size: 10px;
  font-weight: var(--ks-typography-weight-strong);
}

.calorie-lead {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  padding: 4px 0 2px;
}

.energy-ring {
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--ks-color-background-canvas) 0 40px, transparent 41px),
    conic-gradient(var(--ks-color-data-food-ring) 0 50%, var(--ks-color-data-food-track) 50% 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ks-color-data-food-ink) 8%, transparent);
}

.energy-ring > div {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.energy-ring strong {
  font-family: var(--ks-font-evidence);
  font-size: 28px;
  line-height: 1;
  font-weight: var(--ks-typography-weight-label);
}

.energy-ring span,
.macro-row span {
  color: var(--ks-color-data-food-muted);
  font-size: 10px;
  font-weight: 500;
}

.macro-stack {
  display: grid;
  gap: 9px;
}

.macro-row {
  display: grid;
  gap: 4px;
}

.macro-row > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.macro-row b {
  color: var(--ks-color-data-food-ink);
  font-family: var(--ks-font-evidence);
  font-size: 11px;
  font-weight: var(--ks-typography-weight-label);
}

.macro-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--macro);
}

.macro-name svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.macro-name span {
  color: var(--ks-color-data-food-ink);
  font-size: 11px;
  font-weight: var(--ks-typography-weight-strong);
}

.macro-row i {
  height: 5px;
  display: block;
  overflow: hidden;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-color-data-food-track);
}

.macro-row em {
  width: var(--fill);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--macro);
}

.calorie-context {
  margin: -2px 0 0;
  color: var(--ks-color-data-food-muted);
  font-size: 11px;
  font-weight: var(--ks-typography-weight-strong);
  line-height: 1.35;
  text-align: center;
}

.dinner-slot {
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--ks-module-card-warm-prompt-line);
  border-radius: var(--ks-radius-card);
  background: var(--ks-module-card-warm-prompt-surface);
  box-shadow: var(--ks-module-card-warm-prompt-shadow);
}

.slot-tag {
  display: block;
  margin-bottom: 5px;
  color: var(--ks-color-accent-clay-text);
  font-size: 9px;
  font-weight: var(--ks-typography-weight-strong);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dinner-slot p {
  margin: 0;
  color: var(--ks-color-text-primary);
  font-size: 13.5px;
  font-weight: var(--ks-typography-weight-strong);
  line-height: 1.12;
}

.dinner-slot p:not(.slot-open),
.slot-diary-action,
.accepted-actions,
.dinner-draft,
.dinner-logged {
  display: none;
}

.slot-action,
.slot-diary-action,
.suggestion-actions .primary,
.accepted-actions .primary,
.log-sheet .primary,
.plan-card .primary,
.mood-card .primary {
  min-height: var(--ks-action-emphasis-height);
  border: 1px solid var(--ks-action-emphasis-line);
  border-radius: var(--ks-action-emphasis-radius);
  padding: 0 var(--ks-action-emphasis-padding-inline);
  background: var(--ks-action-emphasis-bg);
  color: var(--ks-action-emphasis-on);
  box-shadow: var(--ks-action-emphasis-shadow);
  font-size: var(--ks-action-emphasis-font-size);
  font-weight: var(--ks-action-emphasis-font-weight);
  white-space: nowrap;
}

.slot-action,
.slot-diary-action {
  min-width: 66px;
  border-radius: var(--ks-radius-pill);
}

.meal-section {
  display: grid;
  gap: 8px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px;
}

.section-head h2 {
  margin: 0;
  color: var(--ks-color-data-food-ink);
  font-family: var(--ks-font-narrative);
  font-size: 17px;
  font-weight: var(--ks-module-card-title-weight);
}

.section-head span {
  color: var(--ks-color-action-primary-surface);
  font-size: 10px;
  font-weight: var(--ks-typography-weight-strong);
}

.meal-list {
  display: grid;
  gap: 8px;
}

.meal-row {
  min-height: 74px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--ks-module-card-line);
  border-radius: var(--ks-radius-card);
  background: var(--ks-material-mesh-surface-veil);
  box-shadow: var(--ks-module-card-shadow);
}

.meal-ring {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--ks-color-background-canvas) 0 55%, transparent 56%),
    conic-gradient(var(--meal-color) var(--meal-fill), var(--ks-color-data-food-track) 0);
}

.meal-row > div:nth-child(2) {
  display: grid;
  gap: 4px;
}

.meal-row b {
  font-family: var(--ks-font-narrative);
  font-size: 14px;
  font-weight: var(--ks-typography-weight-strong);
}

.meal-row span {
  color: var(--ks-color-data-food-muted);
  font-size: 10px;
}

.meal-row > button {
  width: var(--ks-action-inline-size);
  height: var(--ks-action-inline-size);
  border: 1px solid var(--ks-action-inline-line);
  border-radius: var(--ks-action-inline-radius);
  background: var(--ks-action-inline-bg);
  color: var(--ks-action-inline-on);
  font-size: var(--ks-action-inline-icon-size);
  font-weight: var(--ks-action-inline-icon-weight);
}

.app-nav {
  position: absolute;
  left: var(--ks-app-nav-left);
  bottom: var(--ks-app-nav-bottom);
  z-index: 12;
  width: var(--ks-app-nav-width);
  height: var(--ks-app-nav-height);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ks-app-nav-button-gap);
  padding: var(--ks-app-nav-padding);
  border: 1px solid var(--ks-app-nav-line);
  border-radius: var(--ks-app-nav-radius);
  background: var(--ks-app-nav-bg);
  box-shadow: var(--ks-app-nav-shadow), var(--ks-app-nav-inset-light);
}

.app-nav span {
  display: grid;
  place-items: center;
  gap: 3px;
  color: var(--ks-app-nav-inactive);
  font-size: var(--ks-app-nav-label-size);
  font-weight: var(--ks-app-nav-label-weight);
}

.app-nav span.is-current {
  color: var(--ks-app-nav-active);
  font-weight: var(--ks-app-nav-label-active-weight);
}

.app-nav svg {
  width: var(--ks-app-nav-icon-size);
  height: var(--ks-app-nav-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ks-app-nav-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calories-instant-chat {
  position: absolute;
  inset: 0;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--ks-motion-fast) var(--ks-ease-out),
    visibility 0s linear var(--ks-motion-fast);
}

.calories-instant-chat.is-showcase-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.chat-header img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.thread {
  position: absolute;
  inset: 66px 0 0;
  display: flex;
  flex-direction: column;
  padding: 12px 18px 120px;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0 calc(100% - 50px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 0 calc(100% - 50px), transparent 100%);
}

.thread::-webkit-scrollbar {
  display: none;
}

[data-show-at] {
  max-height: 0;
  margin-block: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition:
    max-height var(--ks-motion-sheet) var(--ks-ease-out),
    margin var(--ks-motion-sheet) var(--ks-ease-out),
    opacity var(--ks-motion-exit) var(--ks-ease-out),
    transform var(--ks-motion-sheet) var(--ks-ease-out);
}

[data-show-at].is-visible {
  max-height: 520px;
  margin-block: 7px;
  overflow: visible;
  opacity: 1;
  transform: none;
}

.message {
  max-width: 82%;
  padding: 10px 12px;
  border: 1px solid var(--ks-color-border-subtle);
  border-radius: 14px;
  background: var(--ks-material-mesh-surface-veil);
  color: color-mix(in srgb, var(--ks-color-text-primary) 76%, transparent);
  box-shadow: var(--ks-shadow-card);
  font-size: 12px;
  line-height: 1.42;
}

.message.user {
  align-self: flex-end;
  border-color: color-mix(in srgb, var(--ks-color-action-primary-surface) 34%, transparent);
  background: var(--ks-color-action-primary-surface);
  color: var(--ks-color-action-primary-content);
}

.message.agent {
  align-self: flex-start;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.message.agent img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.message.agent p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--ks-color-border-subtle);
  border-radius: 14px;
  background: var(--ks-material-mesh-surface-veil);
  box-shadow: var(--ks-shadow-card);
}

.context-strip,
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.context-strip span,
.metric-grid span {
  min-height: 42px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 7px;
  border-radius: var(--ks-radius-card);
  background: var(--ks-color-background-subtle);
  color: var(--ks-color-text-secondary);
  font-size: 8.5px;
  line-height: 1.15;
}

.context-strip b,
.metric-grid b {
  color: var(--ks-color-text-primary);
  font-family: var(--ks-font-evidence);
  font-size: 12px;
  font-weight: var(--ks-typography-weight-label);
}

.thinking {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ks-color-text-secondary);
  font-size: 10px;
}

.thinking i {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--ks-color-action-primary-surface) 16%, transparent);
  border-top-color: var(--ks-color-action-primary-surface);
  border-radius: 50%;
  animation: spin 820ms linear infinite;
}

.suggestion-card,
.evidence-card,
.plan-card,
.mood-card {
  border: 1px solid var(--ks-module-card-line);
  border-radius: var(--ks-radius-card);
  background: var(--ks-material-mesh-surface-veil);
  box-shadow: var(--ks-module-card-shadow);
}

.suggestion-card {
  align-self: stretch;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

.suggestion-card > img {
  width: 62px;
  height: 62px;
  border-radius: 9px;
  object-fit: cover;
}

.suggestion-copy span,
.sheet-kicker,
.plan-card > span,
.mood-card-state {
  color: var(--ks-color-accent-clay-text);
  font-size: 9.5px;
  font-weight: var(--ks-typography-weight-strong);
}

.suggestion-copy h2,
.log-sheet h2,
.plan-card h2 {
  margin: 4px 0;
  font-family: var(--ks-font-narrative);
  font-size: 17px;
  line-height: 1.08;
  font-weight: var(--ks-typography-weight-strong);
}

.suggestion-copy p,
.reason,
.log-sheet p,
.plan-card p {
  margin: 0;
  color: var(--ks-color-text-secondary);
  font-size: 10px;
  line-height: 1.4;
}

.reason,
.suggestion-actions,
.accepted-actions {
  grid-column: 1 / -1;
}

.reason {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: var(--ks-radius-card);
  background: var(--ks-color-background-subtle);
}

.reason b {
  color: var(--ks-color-text-primary);
  font-size: 10px;
}

.suggestion-actions,
.log-sheet > div:last-child,
.plan-card > div,
.mood-card > div {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.suggestion-actions button:not(.primary),
.log-sheet button:not(.primary),
.plan-card button:not(.primary),
.mood-card button:not(.primary) {
  min-height: var(--ks-action-standard-height-compact);
  border: 1px solid var(--ks-action-standard-line);
  border-radius: var(--ks-action-standard-radius);
  padding: 0 var(--ks-action-standard-padding-inline);
  background: var(--ks-action-standard-bg);
  color: var(--ks-action-standard-on);
  font-size: var(--ks-action-standard-font-size-compact);
  font-weight: var(--ks-action-standard-font-weight);
}

.calories-scene.is-accepted .suggestion-actions {
  display: none;
}

.calories-scene.is-accepted .accepted-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calories-scene.is-accepted .accepted-actions > span {
  color: var(--ks-color-text-secondary);
  font-size: 9.5px;
}

.calories-scene.is-accepted .slot-open,
.calories-scene.is-logged .slot-open,
.calories-scene.is-logged .dinner-empty {
  display: none;
}

.calories-scene.has-suggestion .slot-open {
  display: none;
}

.calories-scene.has-suggestion .slot-found,
.calories-scene.is-accepted .slot-diary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calories-scene.is-accepted .slot-accepted,
.calories-scene.is-accepted .dinner-draft,
.calories-scene.is-logged .slot-logged,
.calories-scene.is-logged .dinner-logged {
  display: block;
}

.calories-scene.is-accepted .slot-action,
.calories-scene.is-logged .slot-action,
.calories-scene.is-logged .slot-diary-action {
  display: none;
}

.calories-scene.is-logged .dinner-row {
  --meal-fill: 61%;
}

.log-sheet {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border: 1px solid var(--ks-color-border-subtle);
  border-radius: var(--ks-radius-sheet);
  background: color-mix(in srgb, var(--ks-color-surface-card) 92%, transparent);
  box-shadow: var(--ks-shadow-sheet);
  backdrop-filter: blur(18px) saturate(1.14);
}

.sheet-handle {
  width: 34px;
  height: 3px;
  margin: 0 auto;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-color-border-control);
}

.log-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.log-facts span {
  display: grid;
  gap: 3px;
  padding: 9px;
  border-radius: var(--ks-radius-card);
  background: var(--ks-color-background-subtle);
}

.log-facts small {
  color: var(--ks-color-text-secondary);
  font-size: 9px;
}

.log-facts b {
  font-family: var(--ks-font-evidence);
  font-size: 14px;
}

/* Chat scenes ------------------------------------------------------ */

.chat-scene {
  isolation: isolate;
  background: var(--ks-material-mesh-canvas-edge-pools);
}

.chat-scene::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    var(--ks-material-limestone-mask),
    var(--ks-material-phone-surface-image);
  background-position: var(--ks-material-phone-surface-position);
  background-size: var(--ks-material-phone-surface-size);
  content: "";
  filter: var(--ks-material-phone-surface-filter);
  mix-blend-mode: var(--ks-material-phone-surface-blend);
  opacity: var(--ks-material-phone-surface-opacity);
  pointer-events: none;
}

.chat-header {
  position: relative;
  z-index: 5;
  height: 65px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--ks-color-border-subtle);
  background: color-mix(in srgb, var(--ks-color-background-canvas) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.12);
}

.chat-header div {
  min-width: 0;
}

.chat-header h1 {
  font-size: 19px;
}

.chat-header p {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--ks-color-text-secondary);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-header > span {
  min-height: 27px;
  font-size: 9.5px;
}

.thread {
  inset: 101px 0 0;
  z-index: 1;
  padding-bottom: 132px;
}

.evidence-card,
.plan-card,
.mood-card {
  align-self: flex-start;
  width: calc(100% - 38px);
  margin-left: 38px;
  padding: 11px 12px;
}

.evidence-card p,
.mood-card p {
  margin: 0;
  color: var(--ks-color-text-primary);
  font-size: 12px;
  line-height: 1.38;
}

.evidence-card small {
  display: block;
  margin-top: 7px;
  color: var(--ks-color-text-secondary);
  font-size: 9px;
}

.evidence-card .metric-grid {
  margin-top: 9px;
}

.recovery-scene .metric-grid span {
  background: color-mix(in srgb, var(--ks-color-accent-clay) 8%, transparent);
}

.plan-card {
  border-color: color-mix(in srgb, var(--ks-color-status-sage-content) 24%, transparent);
  background: color-mix(in srgb, var(--ks-color-surface-card) 84%, var(--ks-color-status-sage-surface) 16%);
}

.plan-card > div {
  margin-top: 10px;
}

.mood-context .metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
}

.mood-card {
  --scope-color: var(--ks-color-accent-connect);
  display: grid;
  gap: 8px;
}

.mood-card-state {
  display: flex;
  justify-content: space-between;
  color: var(--scope-color);
}

.mood-card-state i {
  font-style: normal;
}

.mood-card-state small {
  color: var(--ks-color-text-secondary);
  font-size: 9px;
  font-weight: 500;
}

.mood-card .settled {
  display: none;
}

.mood-scene.is-settled .proposed {
  display: none;
}

.mood-scene.is-settled .settled {
  display: flex;
}

.mood-scene.is-settled p.settled {
  display: block;
}

/* Memory scene ------------------------------------------------------ */

.day-divider {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ks-color-text-secondary);
  font-size: 9.5px;
  white-space: nowrap;
}

.day-divider::before,
.day-divider::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--ks-color-border-subtle);
}

.today-card {
  border-color: color-mix(in srgb, var(--ks-color-action-primary-surface) 26%, transparent);
  background: color-mix(in srgb, var(--ks-color-surface-card) 88%, var(--ks-color-action-primary-surface) 12%);
}

.today-card > span {
  color: var(--ks-color-accent-clay-text);
}

/* Keep / Adjust / Dismiss sit in one row: the standard actions use the
   full standard height so all three buttons align with the emphasis
   Keep instead of the compact 34px recipe. */
.today-card > div button:not(.primary) {
  min-height: var(--ks-action-standard-height);
}

.memory-sheet {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border: 1px solid var(--ks-color-border-subtle);
  border-radius: var(--ks-radius-sheet);
  background: color-mix(in srgb, var(--ks-color-surface-card) 92%, transparent);
  box-shadow: var(--ks-shadow-sheet);
  backdrop-filter: blur(18px) saturate(1.14);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity var(--ks-motion-sheet) var(--ks-ease-out),
    transform var(--ks-motion-sheet) var(--ks-ease-out);
}

.memory-scene.is-remembering .memory-sheet {
  opacity: 1;
  transform: none;
}

.memory-scene.is-remembering .thread {
  opacity: 0.36;
}

.memory-scene .thread {
  transition: opacity var(--ks-motion-sheet) var(--ks-ease-out);
}

.memory-rows {
  display: grid;
  gap: 7px;
}

.memory-rows span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--ks-radius-card);
  background: var(--ks-color-background-subtle);
}

.memory-rows small {
  color: var(--ks-color-text-secondary);
  font-size: 9px;
}

.memory-rows b {
  color: var(--ks-color-text-primary);
  font-size: 11.5px;
  font-weight: 560;
}

.memory-sheet > p {
  margin: 0;
  color: var(--ks-color-text-secondary);
  font-size: 9.5px;
}

.composer {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 22px;
  z-index: 20;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px 48px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--ks-color-border-subtle);
  border-radius: var(--ks-radius-pill);
  background: color-mix(in srgb, var(--ks-color-surface-card) 94%, transparent);
  box-shadow: var(--ks-shadow-control);
  backdrop-filter: blur(14px) saturate(1.12);
}

.composer button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ks-color-text-secondary);
}

.composer span {
  color: color-mix(in srgb, var(--ks-color-text-secondary) 62%, transparent);
  font-size: 12px;
}

.composer button.send {
  width: 48px;
  height: 42px;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-color-action-primary-surface);
  color: var(--ks-color-action-primary-content);
  font-size: 20px;
}

.tap-ring {
  position: absolute;
  z-index: 60;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 2px solid var(--ks-color-action-primary-surface);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.tap-ring::after {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--ks-color-action-primary-surface);
  content: "";
}

.tap-ring.is-active {
  animation: tap-ring var(--ks-motion-tap-indicator) var(--ks-ease-out) both;
}

@keyframes tap-ring {
  0% { opacity: 0; transform: scale(0.72); }
  24% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.75); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-transparency: reduce) {
  .chat-scene {
    background: var(--ks-color-background-canvas);
  }

  .chat-scene::before {
    display: none;
  }
}

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