/* Redesign preview: Cookbook tab, and the "Choose how Kairos thinks" model
   setup guide (modelSetup.js), which opens from Settings, Home, Chat and
   onboarding as well, so its rules key off .model-setup rather than the tab.
   Every rule scoped under .kairos-redesign. No raw colors. */

.kairos-redesign {
  --rdc-ok-fill: rgba(var(--success-rgb), .14);
  --rdc-error-fill: rgba(var(--danger-rgb), .12);
  --rdc-track: color-mix(in srgb, var(--point) 22%, var(--rd-surface-2));
  --rdc-divider: color-mix(in srgb, var(--point) 20%, transparent);
}

/* -- Page ----------------------------------------------------------------------- */
.kairos-redesign[data-view="cookbook"] .view-constrained { max-width: 1000px; }
.kairos-redesign[data-view="cookbook"] .view-header { padding-bottom: 8px; margin-bottom: 8px; }
.kairos-redesign[data-view="cookbook"] .view-header h2 { font-size: clamp(36px, 4.4vw, 52px); line-height: 1.02; }
.kairos-redesign[data-view="cookbook"] .view-header .sub { margin-top: 8px; font-size: 15px; color: var(--rd-ink-dim); }

/* Backend tabs: a soft track with a raised active pill. */
.kairos-redesign[data-view="cookbook"] .view-constrained .segmented-tabs {
  display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--rd-radius-pill);
  background: color-mix(in srgb, var(--rd-surface-solid) 80%, transparent); border: 1px solid var(--rd-line); margin-bottom: 18px;
}
.kairos-redesign[data-view="cookbook"] .view-constrained .segmented-tab {
  min-height: 36px; padding: 0 18px; border-radius: var(--rd-radius-pill); font-size: 13px; color: var(--rd-ink-dim);
}
.kairos-redesign[data-view="cookbook"] .view-constrained .segmented-tab.active {
  background: var(--rd-primary-bg); color: var(--rd-primary-fg); font-weight: 500;
}
.kairos-redesign[data-view="cookbook"] .view-constrained .segmented-tab:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; }

/* Section labels (Installed, Catalog, Downloaded) and their dim lines. */
.kairos-redesign[data-view="cookbook"] .view-constrained > div > div > .title,
.kairos-redesign[data-view="cookbook"] .view-constrained > div > .title {
  font-size: var(--rd-label-size); font-weight: 500; letter-spacing: var(--rd-label-tracking);
  text-transform: uppercase; color: var(--rd-ink-dim); margin: 0 2px 8px !important;
}
.kairos-redesign[data-view="cookbook"] .view-constrained > div > div > .meta,
.kairos-redesign[data-view="cookbook"] .view-constrained > div > .meta { color: var(--rd-ink-dim); font-size: 12.5px; }
.kairos-redesign[data-view="cookbook"] .view-constrained > div > .meta:first-child { font-size: 14px; }

/* Model rows: installed / downloaded / running. */
.kairos-redesign[data-view="cookbook"] .card { border-radius: 18px; }
.kairos-redesign[data-view="cookbook"] .card .title { font-size: 14.5px !important; font-weight: 500; color: var(--rd-ink); }
.kairos-redesign[data-view="cookbook"] .card .meta { color: var(--rd-ink-dim); font-size: 12.5px; }
.kairos-redesign[data-view="cookbook"] .card-row { flex-wrap: wrap; gap: 12px; }
.kairos-redesign[data-view="cookbook"] .card .btn { min-height: 34px; padding: 0 15px; font-size: 12.5px; }
.kairos-redesign[data-view="cookbook"] .card .btn:not(.danger):not(.quiet) {
  background: var(--rd-primary-bg); color: var(--rd-primary-fg); border-color: transparent;
}
.kairos-redesign[data-view="cookbook"] .card .btn:not(.danger):not(.quiet):hover:not(:disabled) { background: var(--rd-primary-hover); }
.kairos-redesign[data-view="cookbook"] .card .btn:disabled { opacity: .6; }
.kairos-redesign[data-view="cookbook"] .btn.danger { background: transparent; color: var(--danger); border-color: rgba(var(--danger-rgb), .45); }
.kairos-redesign[data-view="cookbook"] .btn.danger:hover:not(:disabled) { background: rgba(var(--danger-rgb), .08); }
/* Pull / download status text beside the button. */
.kairos-redesign[data-view="cookbook"] .card-row > span.meta { margin: 0; }

/* Empty and unreachable states. */
.kairos-redesign[data-view="cookbook"] .empty-state {
  background-color: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 18px; padding: 24px 20px; color: var(--rd-ink-dim);
}
.kairos-redesign[data-view="cookbook"] .coming-soon {
  align-items: flex-start; text-align: left; padding: 22px 24px; border-radius: var(--rd-radius-card);
  background-color: var(--rd-surface); border: 1px solid var(--rd-line); box-shadow: var(--rd-shadow);
}
.kairos-redesign[data-view="cookbook"] .coming-soon h3 {
  font-family: var(--rd-font-title); font-style: italic; font-weight: 500; font-size: 26px; letter-spacing: 0; color: var(--rd-ink); margin: 0;
}
.kairos-redesign[data-view="cookbook"] .coming-soon p { text-align: left; color: var(--rd-ink-dim); font-size: 13.5px; max-width: 62ch; margin: 0; }

@media (max-width: 768px) {
  .kairos-redesign[data-view="cookbook"] .view-header h2 { font-size: 40px; }
  .kairos-redesign[data-view="cookbook"] .view-constrained .segmented-tabs { display: flex; }
  .kairos-redesign[data-view="cookbook"] .view-constrained .segmented-tab { flex: 1; min-height: 44px; }
  .kairos-redesign[data-view="cookbook"] .card-row > div:last-child:not(:first-child) { width: 100%; }
  .kairos-redesign[data-view="cookbook"] .btn, .kairos-redesign[data-view="cookbook"] select, .kairos-redesign[data-view="cookbook"] input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px !important; }
  .kairos-redesign[data-view="cookbook"] details > summary { min-height: 44px !important; display: flex; align-items: center; }
}

/* -- Model setup guide ("Choose how Kairos thinks") ----------------------------------- */
.kairos-redesign .model-setup > .sub { color: var(--rd-ink-dim); font-size: 14px; }
.kairos-redesign .model-setup-cards { gap: 12px; }
.kairos-redesign .model-setup-choice {
  padding: 16px 18px; gap: 8px; border-radius: 16px; background: var(--rd-surface-solid);
  border: 1px solid var(--rd-line); box-shadow: 0 1px 2px rgba(var(--shade-rgb), .04);
}
.kairos-redesign .model-setup-choice h3 { font-size: 16px; font-weight: 500; color: var(--rd-ink); }
.kairos-redesign .model-setup-choice p, .kairos-redesign .model-setup-screen > p, .kairos-redesign .model-setup-words p { color: var(--rd-ink-dim); }
.kairos-redesign .model-setup-card-status {
  align-self: flex-start; margin: 0; padding: 2px 10px; border-radius: var(--rd-radius-pill);
  background: var(--rd-surface-2); color: var(--rd-ink-dim) !important; font-size: 11.5px;
}
.kairos-redesign .model-setup .btn { min-height: 36px; padding: 0 16px; font-size: 13px; }
.kairos-redesign .model-setup-choice .btn:not(.quiet):not(.danger),
.kairos-redesign .model-setup-screen > .btn:not(.quiet):not(.danger) {
  background: var(--rd-primary-bg); color: var(--rd-primary-fg); border-color: transparent;
}
.kairos-redesign .model-setup-choice .btn:not(.quiet):not(.danger):hover:not(:disabled),
.kairos-redesign .model-setup-screen > .btn:not(.quiet):not(.danger):hover:not(:disabled) { background: var(--rd-primary-hover); }
.kairos-redesign .model-setup .btn:disabled { opacity: .6; }
.kairos-redesign .model-setup .btn.quiet { background: transparent; border-color: var(--rd-line-strong); color: var(--rd-ink); }
.kairos-redesign .model-setup-screen h4 { font-family: var(--rd-font-title); font-style: italic; font-weight: 500; font-size: 22px; margin: 0; color: var(--rd-ink); }
.kairos-redesign .model-setup-screen input, .kairos-redesign .model-setup-screen select { min-height: 40px; }
.kairos-redesign .model-setup-words { border-top-color: var(--rdc-divider); }
.kairos-redesign .model-setup-words summary { font-size: 13px; color: var(--rd-ink-dim); }
.kairos-redesign .model-setup-words summary:focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; border-radius: 6px; }
.kairos-redesign .model-setup-words h4 { font-size: 13px; font-weight: 500; color: var(--rd-ink); }
.kairos-redesign .model-setup-error {
  padding: 8px 12px; border-radius: 10px; background: var(--rdc-error-fill); color: var(--danger) !important;
}
.kairos-redesign .model-setup-progress { padding: 10px 12px; border-radius: 12px; background: var(--rd-ground); color: var(--rd-ink); }
.kairos-redesign .model-setup-empty {
  padding: 16px 18px; border-radius: 16px; background-color: var(--rd-surface); border-color: var(--rd-line); box-shadow: var(--rd-shadow);
}
@media (max-width: 768px) {
  .kairos-redesign .model-setup .btn, .kairos-redesign .model-setup-screen input, .kairos-redesign .model-setup-screen select { min-height: 44px !important; }
  .kairos-redesign .model-setup-words summary { min-height: 44px !important; display: flex; align-items: center; }
}

/* -- Desktop: the tab fills its window ------------------------------------------
   Installed (or downloaded) models sit in a column beside the catalog, which
   uses the rest of the width as a card grid. Notices and the engine status
   line span both. Below ~1100px the two stack. */
@media (min-width: 769px) {
  .kairos-redesign[data-view="cookbook"] .view-constrained { max-width: none; }
  .kairos-redesign[data-view="cookbook"] .cookbook-body:has(> .cookbook-installed) {
    display: grid; grid-template-columns: minmax(300px, 4fr) minmax(0, 8fr); gap: 0 28px; align-items: start;
  }
  .kairos-redesign[data-view="cookbook"] .cookbook-body > :not(.cookbook-installed):not(.cookbook-catalog) { grid-column: 1 / -1; }
  .kairos-redesign[data-view="cookbook"] .cookbook-body > :is(.cookbook-installed, .cookbook-catalog) { margin-top: 0 !important; }
  .kairos-redesign[data-view="cookbook"] .cookbook-catalog-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important; }
}
@media (min-width: 769px) and (max-width: 1100px) {
  .kairos-redesign[data-view="cookbook"] .cookbook-body:has(> .cookbook-installed) { grid-template-columns: minmax(0, 1fr); }
  .kairos-redesign[data-view="cookbook"] .cookbook-body > .cookbook-catalog { margin-top: 18px !important; }
}