/*
 * Kisru parity shell - structural 1:1 of the baseline in
 * docs/CHAT-PARITY-BASELINE.md, with Kisru branding substituted.
 *
 * Self-contained: this sheet owns its own tokens and does not depend on
 * styles.css, chat_theme.css, kisru_studio.css or shell.css. It is scoped
 * under .k-shell so it cannot leak into the legacy surfaces.
 *
 * Metrics (type scale, line heights, radii, control heights, spacing,
 * durations, easings) and the neutral colour scale are taken from the
 * captured baseline verbatim, because those are what make the app feel the
 * way it does. The brand hue is the one substitution: the reference app's
 * red is replaced by the Kisru Crownfolk rust, and product naming is ours.
 */

.k-shell {
  /* --- neutral scale, dark (12 steps) ------------------------------- */
  --k-gray-1: #070707;
  --k-gray-2: #111111;
  --k-gray-3: #151515;
  --k-gray-4: #181818;
  --k-gray-5: #262626;
  --k-gray-6: #2f2f2f;
  --k-gray-7: #3d3d3d;
  --k-gray-8: #5a5a5a;
  --k-gray-9: #777777;
  --k-gray-10: #959595;
  --k-gray-11: #b7b7b7;
  --k-gray-12: #f3f3f3;

  /* neutral alpha, dark (6 steps) */
  --k-gray-a1: #7777770f;
  --k-gray-a2: #77777724;
  --k-gray-a3: #7777772c;
  --k-gray-a4: #77777733;
  --k-gray-a5: #77777752;
  --k-gray-a6: #77777765;

  /* white alpha, used for text and borders on dark */
  --k-white-a1: #fcfcfc0d;
  --k-white-a2: #fcfcfc1a;
  --k-white-a3: #fcfcfc26;
  --k-white-a5: #fcfcfc4d;
  --k-white-a8: #fcfcfc99;

  /* --- Kisru brand (the substitution) ------------------------------- */
  --k-brand: #D34513;
  --k-brand-hot: #FF6A2A;
  --k-brand-1: #180703;
  --k-brand-2: #260c05;
  --k-brand-3: #351006;
  --k-brand-4: #471508;
  --k-brand-5: #5d1c0a;
  --k-brand-6: #77240d;
  --k-brand-7: #99300f;
  --k-brand-8: #b93a12;
  --k-brand-9: #D34513;
  --k-brand-10: #FF6A2A;
  --k-brand-11: #ff9366;
  --k-brand-12: #ffe6da;
  --k-brand-a3: #D345132c;
  --k-brand-a5: #D3451352;

  /* --- semantics ---------------------------------------------------- */
  --k-bg-base: #070707;
  --k-bg-subtle: #111111;
  --k-bg-tertiary: #151515;
  --k-bg-elevated: #181818;
  --k-bg-scrim: #141414e5;

  --k-text-primary: #fcfcfc;
  --k-text-secondary: #fcfcfc99;
  --k-text-tertiary: #fcfcfc8f;
  --k-text-on-primary: #070707;

  --k-border-subtle: var(--k-white-a1);
  --k-border-weak: var(--k-white-a2);
  --k-border-default: var(--k-white-a3);
  --k-border-strong: var(--k-white-a5);

  --k-fill-primary: #fafafa;
  --k-fill-primary-hover: #d5d5d5;
  --k-fill-secondary: var(--k-gray-a3);
  --k-fill-ghost-hover: var(--k-gray-a3);
  --k-fill-ghost-selected: var(--k-gray-a5);
  --k-fill-elevated: #2f2f2f;

  --k-bubble-agent: #262626;
  --k-bubble-agent-nested: #181818;
  --k-bubble-user: #5a5a5a;
  --k-widget-option: #2f2f2f;

  /* --- metrics ------------------------------------------------------ */
  --k-font-size-base: 13px;
  --k-font-size-lg: 14px;
  --k-font-size-sm: 12px;
  --k-font-size-xs: 11px;
  --k-line-height-base: 18px;
  --k-line-height-lg: 22px;
  --k-line-height-sm: 16px;
  --k-line-height-xs: 14px;
  --k-tracking-base: -0.08px;
  --k-tracking-lg: -0.15px;

  --k-radius-xs: 2px;
  --k-radius-sm: 4px;
  --k-radius-base: 6px;
  --k-radius-lg: 8px;
  --k-radius-xl: 12px;
  --k-radius-2xl: 14px;
  --k-radius-3xl: 16px;
  --k-radius-4xl: 18px;
  --k-radius-full: 9999px;

  --k-height-xs: 20px;
  --k-height-sm: 24px;
  --k-height-base: 28px;
  --k-height-lg: 32px;

  --k-sidebar-width: 260px;
  --k-details-width: 284px;
  --k-transcript-max: 620px;

  --k-duration-instant: 50ms;
  --k-duration-fast: 0.1s;
  --k-duration-normal: 0.15s;
  --k-duration-slow: 0.2s;
  --k-ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
  --k-press-scale: 0.98;

  --k-font-sans: Inter, "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --k-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* bot identity hues - a set for telling bots apart, not branding */
  --k-bot-rust: #D34513;
  --k-bot-teal: #00bca6;
  --k-bot-slate: #8a8f98;
  --k-bot-violet: #9159fe;
  --k-bot-amber: #ff9800;
  --k-bot-magenta: #ff309b;
}

/* --------------------------------------------------------------------- */
/* Frame                                                                  */
/* --------------------------------------------------------------------- */

.k-shell {
  display: grid;
  grid-template-columns: var(--k-sidebar-width) minmax(0, 1fr) auto;
  block-size: 100dvh;
  overflow: hidden;
  background: var(--k-bg-base);
  color: var(--k-text-primary);
  font-family: var(--k-font-sans);
  font-size: var(--k-font-size-base);
  line-height: var(--k-line-height-base);
  letter-spacing: var(--k-tracking-base);
  -webkit-font-smoothing: antialiased;
}

.k-shell *,
.k-shell *::before,
.k-shell *::after { box-sizing: border-box; }

/* Zero-specificity reset: :where() keeps this from outranking the component
 * rules below, which would otherwise strip their padding and fills. */
:where(.k-shell button) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:where(.k-shell input, .k-shell textarea) {
  font: inherit;
  letter-spacing: inherit;
}

/* Press feedback on every control that takes a click, at the reference kit's
 * scale. Applied here so no component has to remember it. */
/* Scoped with .k-shell so this wins over each component's own transition
 * regardless of source order. */
.k-shell .k-conv,
.k-shell .k-tile,
.k-shell .k-section,
.k-shell .k-footerrow,
.k-shell .k-iconbtn,
.k-shell .k-menu__item,
.k-shell .k-pill,
.k-shell .k-widget__option,
.k-shell .k-composer__plus,
.k-shell .k-composer__send,
.k-shell .k-delivery__trigger[data-many="true"] {
  transition: background var(--k-duration-fast), color var(--k-duration-fast),
    transform var(--k-duration-instant) var(--k-ease-out-quint);
}

.k-conv:active,
.k-tile:active,
.k-section:active,
.k-footerrow:active,
.k-iconbtn:active,
.k-menu__item:active,
.k-pill:not([disabled]):active,
.k-widget__option:active,
.k-composer__plus:active,
.k-composer__send:active,
.k-jump:active,
.k-delivery__trigger[data-many="true"]:active {
  transform: scale(var(--k-press-scale));
}

.k-shell :focus-visible {
  outline: 2px solid var(--k-brand-10);
  outline-offset: 1px;
  border-radius: var(--k-radius-sm);
}

/* --------------------------------------------------------------------- */
/* Sidebar                                                                */
/* --------------------------------------------------------------------- */

.k-sidebar {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  background: var(--k-bg-base);
  border-inline-end: 1px solid var(--k-border-subtle);
}

.k-sidebar__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  block-size: 48px;
  padding-inline: 12px;
  flex: 0 0 auto;
  -webkit-app-region: drag;
}

.k-iconbtn {
  display: inline-grid;
  place-items: center;
  inline-size: var(--k-height-base);
  block-size: var(--k-height-base);
  border-radius: var(--k-radius-base);
  color: var(--k-text-secondary);
  transition: background var(--k-duration-fast), color var(--k-duration-fast);
  -webkit-app-region: no-drag;
}

.k-iconbtn:hover {
  background: var(--k-fill-ghost-hover);
  color: var(--k-text-primary);
}

.k-search {
  flex: 0 0 auto;
  margin: 0 12px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  block-size: var(--k-height-lg);
  padding-inline: 10px;
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-subtle);
  border: 1px solid var(--k-border-subtle);
}

.k-search__icon { color: var(--k-text-tertiary); flex: 0 0 auto; }

.k-search input {
  flex: 1 1 auto;
  min-inline-size: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--k-text-primary);
  background: none;
  border: 0;
  outline: none;
}

.k-search input::placeholder { color: var(--k-text-tertiary); }

/* pinned tier: a two-column grid of tiles, banded off from the list */
.k-pinned {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 0 8px 10px;
}

.k-pinned[data-empty="true"] { display: none; }

.k-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 8px 10px;
  border-radius: var(--k-radius-xl);
  transition: background var(--k-duration-fast);
}

.k-tile:hover { background: var(--k-fill-ghost-hover); }

.k-tile[data-selected="true"] {
  background: color-mix(in srgb, var(--k-brand-9) 22%, var(--k-gray-a3));
}

.k-tile .k-avatar { inline-size: 46px; block-size: 46px; }

.k-tile__name {
  font-size: var(--k-font-size-sm);
  font-weight: 500;
  line-height: var(--k-line-height-xs);
  max-inline-size: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the small role chip, used on tiles and on rows */
.k-chip {
  flex: 0 1 auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  /* capped on a row so a long role never eats the employee's name */
  padding: 1px 6px;
  border-radius: var(--k-radius-sm);
  background: var(--k-gray-a3);
  color: var(--k-text-secondary);
  font-size: var(--k-font-size-xs);
  line-height: var(--k-line-height-xs);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* section header with a right-aligned count */
.k-section {
  display: flex;
  align-items: center;
  gap: 8px;
  inline-size: 100%;
  padding: 10px 8px 4px;
  color: var(--k-text-secondary);
  font-size: var(--k-font-size-sm);
  text-align: start;
}

.k-section:hover { color: var(--k-text-primary); }
.k-section__name { flex: 1 1 auto; min-inline-size: 0; }
.k-section__count { flex: 0 0 auto; color: var(--k-text-tertiary); }

.k-section[data-collapsed="true"] .k-section__name { opacity: 0.75; }

.k-convlist {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--k-gray-a4) transparent;
}

.k-conv {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--k-radius-xl);
  text-align: start;
  transition: background var(--k-duration-fast);
}

.k-conv:hover { background: var(--k-fill-ghost-hover); }

.k-conv[data-selected="true"] {
  background: color-mix(in srgb, var(--k-brand-9) 22%, var(--k-gray-a3));
}

/* Must establish a block formatting context: as an inline span the children's
 * ellipsis and min-width:0 do not apply and the row overflows the sidebar. */
.k-conv__text {
  display: grid;
  grid-auto-rows: min-content;
  min-inline-size: 0;
  overflow: hidden;
}

.k-conv__heading {
  display: flex;
  align-items: center;
  gap: 6px;
  min-inline-size: 0;
}

/* On a row the chip yields hard: the name keeps a readable minimum and only a
 * genuinely long name truncates. */
.k-conv__heading .k-chip { max-inline-size: 64px; flex-shrink: 4; }

.k-conv__name {
  /* The name wins the row: the role chip is capped and truncates first. */
  flex: 1 1 auto;
  min-inline-size: 64px;
  font-size: var(--k-font-size-lg);
  line-height: var(--k-line-height-sm);
  font-weight: 500;
  letter-spacing: var(--k-tracking-lg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-conv__time {
  flex: 0 0 auto;
  margin-inline-start: auto;
  padding-inline-start: 4px;
  color: var(--k-text-tertiary);
  font-size: var(--k-font-size-xs);
  line-height: var(--k-line-height-xs);
  letter-spacing: 0;
  white-space: nowrap;
}

.k-conv__preview {
  display: block;
  min-inline-size: 0;
  margin-block-start: 2px;
  font-size: var(--k-font-size-sm);
  line-height: var(--k-line-height-xs);
  color: var(--k-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-conv__dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--k-radius-full);
  background: var(--k-brand-10);
}

.k-sidebar__footer {
  flex: 0 0 auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.k-footerrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--k-radius-lg);
  font-size: var(--k-font-size-lg);
  text-align: start;
  transition: background var(--k-duration-fast);
}

.k-footerrow:hover { background: var(--k-fill-ghost-hover); }

.k-initials {
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: var(--k-radius-full);
  background: var(--k-gray-a4);
  font-size: var(--k-font-size-xs);
  font-weight: 600;
  letter-spacing: 0;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------- */
/* Avatars                                                                */
/* --------------------------------------------------------------------- */

.k-avatar {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--k-radius-full);
  background: var(--k-avatar-hue, var(--k-bot-rust));
  color: #100603;
  flex: 0 0 auto;
  overflow: hidden;
}

.k-avatar svg { inline-size: 76%; block-size: 76%; display: block; }

/* A human teammate: initials on a neutral ground, same slot and size. */
.k-avatar--person {
  background: var(--k-gray-7);
  color: var(--k-text-primary);
  font-size: var(--k-font-size-sm);
  font-weight: 600;
  letter-spacing: 0;
}

.k-avatar--person.k-avatar--xs { font-size: 8px; }
.k-avatar--person.k-avatar--sm,
.k-avatar--person.k-avatar--md { font-size: var(--k-font-size-xs); }
.k-avatar--person.k-avatar--lg { font-size: 19px; }
.k-avatar--sm { inline-size: 22px; block-size: 22px; }
.k-avatar--xs { inline-size: 16px; block-size: 16px; }
.k-avatar--md { inline-size: 26px; block-size: 26px; }
.k-avatar--lg { inline-size: 56px; block-size: 56px; }

.k-avatar[data-bot-color="rust"] { --k-avatar-hue: var(--k-bot-rust); }
.k-avatar[data-bot-color="teal"] { --k-avatar-hue: var(--k-bot-teal); }
.k-avatar[data-bot-color="slate"] { --k-avatar-hue: var(--k-bot-slate); }
.k-avatar[data-bot-color="violet"] { --k-avatar-hue: var(--k-bot-violet); }
.k-avatar[data-bot-color="amber"] { --k-avatar-hue: var(--k-bot-amber); }
.k-avatar[data-bot-color="magenta"] { --k-avatar-hue: var(--k-bot-magenta); }

/* member cluster for a group */
.k-cluster {
  position: relative;
  inline-size: 40px;
  block-size: 40px;
  flex: 0 0 auto;
}

.k-cluster .k-avatar {
  position: absolute;
  inline-size: 22px;
  block-size: 22px;
  border: 1.5px solid var(--k-bg-base);
}

.k-cluster .k-avatar:nth-child(1) { inset-block-start: 0; inset-inline-start: 0; }
.k-cluster .k-avatar:nth-child(2) { inset-block-start: 0; inset-inline-end: 0; }
.k-cluster .k-avatar:nth-child(3) { inset-block-end: 0; inset-inline-start: 0; }

.k-cluster__more {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  min-inline-size: 22px;
  block-size: 22px;
  padding-inline: 3px;
  display: grid;
  place-items: center;
  border-radius: var(--k-radius-full);
  background: var(--k-gray-6);
  border: 1.5px solid var(--k-bg-base);
  font-size: var(--k-font-size-xs);
  font-weight: 600;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------- */
/* Main pane                                                              */
/* --------------------------------------------------------------------- */

.k-main {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  background: var(--k-bg-base);
}

.k-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  block-size: 48px;
  padding-inline: 14px;
  border-block-end: 1px solid var(--k-border-subtle);
  -webkit-app-region: drag;
}

.k-titlebar__name {
  font-size: var(--k-font-size-lg);
  font-weight: 600;
  letter-spacing: var(--k-tracking-lg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The way back to the list on a phone; wider layouts always show the list. */
.k-titlebar__back { display: none; font-size: 22px; }

.k-titlebar__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* --------------------------------------------------------------------- */
/* Thread strip: branches live inside the conversation, above the          */
/* transcript, never as separate rows in the sidebar.                      */
/* --------------------------------------------------------------------- */

.k-threadstrip { flex: 0 0 auto; }

.k-threadbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.k-threadbar::-webkit-scrollbar { display: none; }

.k-threadchip {
  flex: 0 0 auto;
  max-inline-size: 190px;
  padding: 4px 11px;
  border-radius: var(--k-radius-full);
  background: var(--k-gray-a3);
  color: var(--k-text-secondary);
  font-size: var(--k-font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--k-duration-fast), color var(--k-duration-fast);
}

.k-threadchip:hover {
  background: var(--k-gray-a5);
  color: var(--k-text-primary);
}

.k-threadhead {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 24px 4px;
  min-inline-size: 0;
}

.k-threadhead__title {
  min-inline-size: 0;
  font-size: var(--k-font-size-lg);
  font-weight: 600;
  letter-spacing: var(--k-tracking-lg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Branch control: quiet until the entry is hovered or focused. */
.k-entry__actions {
  display: flex;
  justify-content: flex-start;
  padding-block-start: 2px;
  opacity: 0;
  transition: opacity var(--k-duration-fast);
}

.k-entry[data-kind="text-user"] .k-entry__actions { justify-content: flex-end; }
.k-entry:hover .k-entry__actions,
.k-entry:focus-within .k-entry__actions { opacity: 1; }

.k-entry__branch {
  inline-size: var(--k-height-sm);
  block-size: var(--k-height-sm);
  font-size: var(--k-font-size-sm);
}

@media (hover: none) {
  /* No hover on touch, so the control stays reachable. */
  .k-entry__actions { opacity: 1; }
}

.k-transcript {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  padding: 16px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--k-gray-a4) transparent;
}

.k-banner {
  align-self: stretch;
  padding: 10px 14px;
  border-radius: var(--k-radius-xl);
  background: var(--k-bg-elevated);
  border: 1px solid var(--k-border-subtle);
}

.k-banner__title { font-weight: 500; }
.k-banner__detail { color: var(--k-text-secondary); font-size: var(--k-font-size-sm); }

/* --------------------------------------------------------------------- */
/* Entries                                                                */
/* --------------------------------------------------------------------- */

/* Entries settle in rather than appearing. Short, because the transcript
 * rebuilds on every render and a long entrance would read as lag. */
@keyframes k-entry-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.k-entry {
  display: flex;
  flex-direction: column;
  animation: k-entry-in var(--k-duration-slow) var(--k-ease-out-quint) both;
}

.k-entry[data-kind="text-user"] { align-items: flex-end; }

.k-entry__row {
  display: grid;
  grid-template-columns: 26px minmax(0, auto);
  align-items: end;
  gap: 8px;
  max-inline-size: min(100%, var(--k-transcript-max));
}

.k-entry__row--nogutter { grid-template-columns: minmax(0, auto); }

.k-bubble {
  padding: 9px 13px;
  border-radius: var(--k-radius-4xl);
  background: var(--k-bubble-agent);
  font-size: var(--k-font-size-lg);
  line-height: var(--k-line-height-lg);
  overflow-wrap: anywhere;
}

.k-entry[data-kind="text-user"] .k-bubble {
  background: var(--k-bubble-user);
  color: var(--k-text-primary);
}

.k-sender {
  margin-inline-start: 34px;
  margin-block-end: 3px;
  font-size: var(--k-font-size-sm);
  font-weight: 500;
  color: var(--k-sender-hue, var(--k-text-secondary));
}

.k-sender[data-bot-color="rust"] { --k-sender-hue: var(--k-bot-rust); }
.k-sender[data-bot-color="teal"] { --k-sender-hue: var(--k-bot-teal); }
.k-sender[data-bot-color="slate"] { --k-sender-hue: var(--k-bot-slate); }
.k-sender[data-bot-color="violet"] { --k-sender-hue: var(--k-bot-violet); }
.k-sender[data-bot-color="amber"] { --k-sender-hue: var(--k-bot-amber); }
.k-sender[data-bot-color="magenta"] { --k-sender-hue: var(--k-bot-magenta); }

/* markdown inside a bubble */
.k-bubble p { margin: 0; }
.k-bubble p + p,
.k-bubble p + ol,
.k-bubble p + ul,
.k-bubble ol + p,
.k-bubble ul + p { margin-block-start: 10px; }
.k-bubble ol, .k-bubble ul { margin: 0; padding-inline-start: 20px; }
.k-bubble li + li { margin-block-start: 3px; }
.k-bubble strong { font-weight: 600; }
.k-bubble a { color: var(--k-brand-11); text-underline-offset: 2px; }

.k-bubble code {
  font-family: var(--k-font-mono);
  font-size: var(--k-font-size-sm);
  padding: 1px 5px;
  border-radius: var(--k-radius-sm);
  background: var(--k-gray-a3);
  color: var(--k-brand-11);
}

/* mention chip */
.k-mention {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px 1px 3px;
  margin-inline-end: 1px;
  border-radius: var(--k-radius-full);
  background: var(--k-gray-a3);
  font-weight: 500;
  vertical-align: baseline;
}

/* images and attachments */
.k-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-end: 8px;
}

.k-images img {
  max-inline-size: 100%;
  max-block-size: 340px;
  inline-size: auto;
  block-size: auto;
  border-radius: var(--k-radius-xl);
  display: block;
}

.k-media {
  position: relative;
  border-radius: var(--k-radius-2xl);
  overflow: hidden;
  background: var(--k-bg-elevated);
  border: 1px solid var(--k-border-subtle);
  /* A vertical clip is a narrow portrait tile in the baseline, not a wide
   * band, so the card is width-constrained and the thumb keeps its ratio. */
  inline-size: 168px;
  max-inline-size: 100%;
}

.k-media__thumb {
  aspect-ratio: 9 / 16;
  display: grid;
  place-items: center;
  background: var(--k-gray-3);
  color: var(--k-text-tertiary);
}

.k-media__duration {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  padding: 2px 7px;
  border-radius: var(--k-radius-base);
  background: #000000a6;
  font-size: var(--k-font-size-xs);
  letter-spacing: 0;
}

.k-media__name {
  padding: 8px 10px;
  font-size: var(--k-font-size-sm);
  color: var(--k-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* delivery footer */
.k-entry[data-kind="delivery"] { align-items: center; }

.k-delivery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-block: 4px;
  font-size: var(--k-font-size-sm);
  color: var(--k-text-secondary);
}

.k-delivery__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--k-radius-full);
  color: inherit;
  font-size: inherit;
  transition: background var(--k-duration-fast), color var(--k-duration-fast);
}

.k-delivery__trigger[data-many="false"] { cursor: default; }

.k-delivery__trigger[data-many="true"]:hover {
  background: var(--k-fill-ghost-hover);
  color: var(--k-text-primary);
}

.k-delivery__list {
  min-inline-size: 172px;
  padding: 5px;
  border-radius: var(--k-radius-xl);
  background: var(--k-bg-elevated);
  border: 1px solid var(--k-border-weak);
  box-shadow: 0 3px 8px #0000004d;
  animation: k-rise var(--k-duration-slow) var(--k-ease-out-quint);
}

.k-delivery__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--k-radius-lg);
  color: var(--k-text-primary);
  font-size: var(--k-font-size-sm);
}

.k-delivery__item:hover { background: var(--k-fill-ghost-hover); }

/* floating jump-to-latest, sticky to the bottom of the scrollport */
.k-jump {
  position: sticky;
  inset-block-end: 2px;
  z-index: 5;
  align-self: center;
  margin-block-start: -34px;
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--k-radius-full);
  background: var(--k-fill-elevated);
  border: 1px solid var(--k-border-weak);
  color: var(--k-text-primary);
  box-shadow: 0 2px 8px #00000059;
  transition: opacity var(--k-duration-normal) var(--k-ease-out-quint),
    transform var(--k-duration-normal) var(--k-ease-out-quint);
}

.k-jump[data-visible="false"] {
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  pointer-events: none;
}

.k-jump[data-visible="true"] { opacity: 1; transform: none; }

/* choice widget */
.k-entry[data-kind="widget"] { align-items: flex-start; }

.k-widget {
  inline-size: min(100%, var(--k-transcript-max));
  border-radius: var(--k-radius-2xl);
  background: var(--k-bg-elevated);
  border: 1px solid var(--k-border-subtle);
  overflow: hidden;
}

.k-widget__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px 10px;
}

.k-widget__prompt {
  flex: 1 1 auto;
  font-size: var(--k-font-size-lg);
  font-weight: 600;
  letter-spacing: var(--k-tracking-lg);
}

.k-widget__options {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-inline: 10px;
}

.k-widget__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--k-radius-lg);
  background: var(--k-widget-option);
  font-size: var(--k-font-size-lg);
  text-align: start;
  transition: background var(--k-duration-fast);
}

.k-widget__option:hover { background: var(--k-gray-7); }

.k-widget__option[data-style="primary"] { font-weight: 500; }

.k-widget__key {
  display: grid;
  place-items: center;
  inline-size: var(--k-height-xs);
  block-size: var(--k-height-xs);
  border-radius: var(--k-radius-base);
  background: var(--k-gray-a4);
  font-size: var(--k-font-size-xs);
  color: var(--k-text-secondary);
  letter-spacing: 0;
  flex: 0 0 auto;
}

.k-widget__custom {
  margin: 10px;
  block-size: var(--k-height-lg);
  inline-size: calc(100% - 20px);
  padding-inline: 12px;
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-base);
  border: 1px solid var(--k-border-subtle);
  color: var(--k-text-primary);
  font: inherit;
  outline: none;
}

.k-widget__custom::placeholder { color: var(--k-text-tertiary); }

.k-widget[data-skipped="true"] { opacity: 0.55; }

/* --------------------------------------------------------------------- */
/* Composer                                                               */
/* --------------------------------------------------------------------- */

.k-composer {
  position: relative;
  flex: 0 0 auto;
  margin: 8px 24px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 48px;
  padding: 6px 8px 6px 6px;
  border-radius: var(--k-radius-full);
  background: var(--k-bg-elevated);
  border: 1px solid var(--k-border-subtle);
}

.k-composer__plus {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--k-radius-full);
  background: var(--k-gray-a4);
  color: var(--k-text-primary);
  flex: 0 0 auto;
  transition: background var(--k-duration-fast);
}

.k-composer__plus:hover { background: var(--k-gray-a5); }

.k-composer__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  resize: none;
  max-block-size: 160px;
  padding-block: 7px;
  font: inherit;
  font-size: var(--k-font-size-lg);
  line-height: var(--k-line-height-lg);
  letter-spacing: inherit;
  color: var(--k-text-primary);
  background: none;
  border: 0;
  outline: none;
}

.k-composer__input::placeholder { color: var(--k-text-tertiary); }

.k-composer__send {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--k-radius-full);
  background: var(--k-fill-primary);
  color: var(--k-text-on-primary);
  flex: 0 0 auto;
  transition: background var(--k-duration-fast);
}

.k-composer__send:hover { background: var(--k-fill-primary-hover); }

.k-menu {
  position: absolute;
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 0;
  min-inline-size: 168px;
  padding: 5px;
  border-radius: var(--k-radius-xl);
  background: var(--k-bg-elevated);
  border: 1px solid var(--k-border-weak);
  box-shadow: 0 3px 8px #0000004d, 0 1px 1px #00000040;
  z-index: 40;
  animation: k-rise var(--k-duration-slow) var(--k-ease-out-quint);
}

@keyframes k-rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.k-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  inline-size: 100%;
  padding: 7px 9px;
  border-radius: var(--k-radius-lg);
  font-size: var(--k-font-size-lg);
  text-align: start;
}

.k-menu__item:hover { background: var(--k-fill-ghost-hover); }
.k-menu__sep { margin: 5px 4px; border-block-start: 1px solid var(--k-border-weak); }
.k-menu__chev { margin-inline-start: auto; color: var(--k-text-tertiary); }
.k-menu__value { margin-inline-start: auto; color: var(--k-text-secondary); }

/* account menu opens upward from the footer row */
.k-accountmenu {
  position: absolute;
  inset-block-end: calc(100% + 6px);
  inset-inline-start: 0;
  inline-size: calc(100% - 4px);
}

.k-sidebar__footer { position: relative; }

/* --------------------------------------------------------------------- */
/* Details panel                                                          */
/* --------------------------------------------------------------------- */

.k-details {
  inline-size: var(--k-details-width);
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  background: var(--k-bg-base);
  border-inline-start: 1px solid var(--k-border-subtle);
}

.k-details[data-collapsed="true"] { inline-size: 0; overflow: hidden; border-inline-start: 0; }

.k-details__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  block-size: 48px;
  padding-inline: 10px;
  -webkit-app-region: drag;
}

.k-details__title {
  flex: 1 1 auto;
  text-align: center;
  font-size: var(--k-font-size-lg);
  font-weight: 600;
}

.k-details__body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--k-gray-a4) transparent;
}

.k-screen {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border-radius: var(--k-radius-xl);
  background: var(--k-bg-subtle);
  border: 1px solid var(--k-border-subtle);
  color: var(--k-text-tertiary);
}

.k-screen__caption {
  margin-block-start: 8px;
  text-align: center;
  font-size: var(--k-font-size-sm);
  color: var(--k-text-secondary);
}

.k-details__label {
  font-size: var(--k-font-size-sm);
  color: var(--k-text-secondary);
}

.k-memberrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  font-size: var(--k-font-size-lg);
}

.k-empty {
  text-align: center;
  font-size: var(--k-font-size-sm);
  line-height: var(--k-line-height-sm);
  color: var(--k-text-secondary);
}

.k-field { display: flex; flex-direction: column; gap: 6px; }

.k-field__label {
  font-size: var(--k-font-size-sm);
  color: var(--k-text-secondary);
}

.k-field input,
.k-field textarea {
  inline-size: 100%;
  padding: 8px 10px;
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-subtle);
  border: 1px solid var(--k-border-subtle);
  color: var(--k-text-primary);
  font: inherit;
  font-size: var(--k-font-size-lg);
  line-height: var(--k-line-height-lg);
  outline: none;
}

.k-field input:focus,
.k-field textarea:focus { border-color: var(--k-border-strong); }

.k-field textarea { min-block-size: 132px; resize: vertical; }

.k-card {
  border-radius: var(--k-radius-xl);
  background: var(--k-bg-subtle);
  border: 1px solid var(--k-border-subtle);
  padding: 2px 12px;
}

.k-card__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 10px;
  font-size: var(--k-font-size-lg);
}

.k-card__row + .k-card__row { border-block-start: 1px solid var(--k-border-subtle); }
.k-card__row--stack { align-items: flex-start; }

.k-card__select {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: var(--k-radius-base);
  background: var(--k-gray-a3);
  font-size: var(--k-font-size-sm);
  color: var(--k-text-secondary);
}

.k-card__sub {
  margin-block-start: 2px;
  font-size: var(--k-font-size-sm);
  line-height: var(--k-line-height-xs);
  color: var(--k-text-secondary);
}

.k-toggle {
  margin-inline-start: auto;
  inline-size: 34px;
  block-size: 20px;
  border-radius: var(--k-radius-full);
  background: var(--k-gray-a5);
  position: relative;
  flex: 0 0 auto;
  transition: background var(--k-duration-normal);
}

.k-toggle::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 16px;
  block-size: 16px;
  border-radius: var(--k-radius-full);
  background: #fcfcfc;
  transition: transform var(--k-duration-normal) var(--k-ease-out-quint);
}

.k-toggle[aria-checked="true"] { background: var(--k-brand-9); }
.k-toggle[aria-checked="true"]::after { transform: translateX(14px); }

/* --------------------------------------------------------------------- */
/* Routines                                                               */
/* --------------------------------------------------------------------- */

.k-routinerow {
  display: flex;
  align-items: center;
  gap: 10px;
  inline-size: 100%;
  padding: 8px 10px;
  margin-inline: -10px;
  border-radius: var(--k-radius-lg);
  text-align: start;
}

.k-routinerow:hover { background: var(--k-fill-ghost-hover); }
.k-routinerow[data-active="false"] { opacity: 0.6; }

.k-routinerow__text {
  display: grid;
  grid-auto-rows: min-content;
  min-inline-size: 0;
  overflow: hidden;
}

.k-routinerow__title {
  font-size: var(--k-font-size-lg);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-routinerow__when {
  display: block;
  margin-block-start: 2px;
  font-size: var(--k-font-size-sm);
  line-height: var(--k-line-height-xs);
  color: var(--k-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-routine__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.k-routine__top .k-toggle { margin-inline-start: 0; }

.k-routine__state {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: var(--k-font-size-sm);
  color: var(--k-text-secondary);
}

.k-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  inline-size: 100%;
  padding: 9px 11px;
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-subtle);
  border: 1px solid var(--k-border-subtle);
  font-size: var(--k-font-size-lg);
  text-align: start;
}

.k-trigger--add {
  color: var(--k-text-secondary);
  border-style: dashed;
}

.k-trigger--add:hover {
  color: var(--k-text-primary);
  background: var(--k-fill-ghost-hover);
}

.k-run {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  font-size: var(--k-font-size-sm);
  color: var(--k-text-secondary);
}

.k-run + .k-run { border-block-start: 1px solid var(--k-border-subtle); }

.k-run__outcome { margin-inline-start: auto; }
.k-run[data-outcome="succeeded"] .k-run__outcome { color: var(--k-bot-teal); }
.k-run[data-outcome="failed"] .k-run__outcome { color: var(--k-brand-11); }

/* --------------------------------------------------------------------- */
/* Dashboards: a full view in the main pane, not a modal over chat        */
/* --------------------------------------------------------------------- */

.k-dash { display: none; flex-direction: column; min-block-size: 0; }

/* Dashboards owns the pane, header included - the conversation title bar
 * belongs to the conversation, not to this destination. */
.k-main[data-view="dashboards"] > .k-titlebar,
.k-main[data-view="dashboards"] > .k-transcript,
.k-main[data-view="dashboards"] > .k-composer { display: none; }

.k-main[data-view="dashboards"] > .k-dash {
  display: flex;
  flex: 1 1 auto;
  animation: k-fade var(--k-duration-slow) var(--k-ease-out-quint);
}

@keyframes k-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.k-dash__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 24px 10px;
}

.k-dash__title {
  margin: 0;
  font-size: 19px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.26px;
}

.k-dash__body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  padding: 6px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  scrollbar-width: thin;
  scrollbar-color: var(--k-gray-a4) transparent;
}

.k-dash__section { max-inline-size: 760px; }

.k-dash__head { margin-block-end: 10px; }

.k-dash__sectiontitle {
  margin: 0;
  font-size: var(--k-font-size-lg);
  font-weight: 600;
  letter-spacing: var(--k-tracking-lg);
}

.k-dash__note {
  margin: 3px 0 0;
  font-size: var(--k-font-size-sm);
  line-height: var(--k-line-height-sm);
  color: var(--k-text-secondary);
}

.k-dash__rows {
  border-radius: var(--k-radius-xl);
  background: var(--k-bg-subtle);
  border: 1px solid var(--k-border-subtle);
  overflow: hidden;
}

.k-dash__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 11px 14px;
}

.k-dash__row + .k-dash__row { border-block-start: 1px solid var(--k-border-subtle); }
.k-dash__row:hover { background: var(--k-fill-ghost-hover); }

.k-dash__rowtext {
  flex: 1 1 180px;
  min-inline-size: 0;
  display: grid;
  grid-auto-rows: min-content;
  overflow: hidden;
}

.k-dash__rowname {
  display: flex;
  align-items: center;
  gap: 7px;
  min-inline-size: 0;
  font-size: var(--k-font-size-lg);
  font-weight: 500;
}

.k-dash__rowname > span:first-child {
  flex: 0 1 auto;
  min-inline-size: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A row that asks for input (signing an account in) wraps its fields under
 * the name rather than pushing them off a phone. */
.k-dash__rowfield {
  flex: 1 1 140px;
  min-inline-size: 0;
  block-size: var(--k-height-lg);
  padding-inline: 10px;
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-base);
  border: 1px solid var(--k-border-default);
  color: var(--k-text-primary);
}

.k-dash__rowfield::placeholder { color: var(--k-text-tertiary); }
.k-dash__row .k-pill { flex: 0 0 auto; }

.k-dash__rowdesc {
  display: block;
  min-inline-size: 0;
  margin-block-start: 2px;
  font-size: var(--k-font-size-sm);
  line-height: var(--k-line-height-xs);
  color: var(--k-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------- */
/* Marketplace modal (retained for the plugin surface)                    */
/* --------------------------------------------------------------------- */

.k-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--k-bg-scrim);
}

.k-modal {
  inline-size: min(100%, 760px);
  max-block-size: min(100%, 740px);
  display: flex;
  flex-direction: column;
  border-radius: var(--k-radius-4xl);
  background: var(--k-bg-tertiary);
  border: 1px solid var(--k-border-weak);
  box-shadow: 0 24px 64px #000000a6;
  overflow: hidden;
  animation: k-pop var(--k-duration-slow) var(--k-ease-out-quint);
}

@keyframes k-pop {
  from { opacity: 0; transform: scale(0.985) translateY(6px); }
  to { opacity: 1; transform: none; }
}

.k-modal__top {
  display: flex;
  align-items: center;
  padding: 22px 28px 0;
}

.k-modal__title {
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.26px;
}

.k-modal__installed {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--k-font-size-sm);
  color: var(--k-text-secondary);
}

.k-modal__close { margin-inline-start: 12px; }

.k-modal__body {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  padding: 14px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  scrollbar-width: thin;
  scrollbar-color: var(--k-gray-a4) transparent;
}

.k-modal__search {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  block-size: 38px;
  padding-inline: 12px;
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-base);
  border: 1px solid var(--k-border-subtle);
}

.k-modal__search input {
  flex: 1 1 auto;
  min-inline-size: 0;
  font: inherit;
  font-size: var(--k-font-size-lg);
  color: var(--k-text-primary);
  background: none;
  border: 0;
  outline: none;
}

.k-section__head {
  display: flex;
  align-items: baseline;
  margin-block-end: 10px;
}

.k-section__title { font-size: var(--k-font-size-lg); font-weight: 600; }

.k-section__viewall {
  margin-inline-start: auto;
  font-size: var(--k-font-size-sm);
  color: var(--k-text-secondary);
}

.k-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.k-card--feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 14px 16px;
  border-radius: var(--k-radius-2xl);
  background: transparent;
  border: 1px solid var(--k-border-weak);
  text-align: center;
}

.k-card--feature .k-avatar { inline-size: 64px; block-size: 64px; }

.k-feature__badge {
  position: absolute;
  inset-block-end: -2px;
  inset-inline-end: -4px;
  inline-size: 26px;
  block-size: 26px;
  border-radius: var(--k-radius-full);
  background: var(--k-gray-7);
  border: 2px solid var(--k-bg-tertiary);
}

.k-feature__avatarwrap { position: relative; }

.k-feature__name {
  font-size: var(--k-font-size-lg);
  font-weight: 500;
  line-height: var(--k-line-height-sm);
}

.k-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 4px 24px;
}

.k-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.k-row__name { font-size: var(--k-font-size-lg); font-weight: 500; }
.k-row__by { color: var(--k-text-secondary); font-weight: 400; font-size: var(--k-font-size-sm); }

.k-row__desc {
  font-size: var(--k-font-size-sm);
  color: var(--k-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-row__icon {
  inline-size: 34px;
  block-size: 34px;
  border-radius: var(--k-radius-lg);
  background: var(--k-gray-6);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.k-pill {
  padding: 5px 13px;
  border-radius: var(--k-radius-base);
  background: var(--k-gray-a4);
  font-size: var(--k-font-size-sm);
  font-weight: 500;
  transition: background var(--k-duration-fast);
}

.k-pill:hover { background: var(--k-gray-a5); }

.k-pill--primary {
  background: var(--k-fill-primary);
  color: var(--k-text-on-primary);
}

.k-pill--primary:hover { background: var(--k-fill-primary-hover); }

.k-pill[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.k-pill[disabled]:hover { background: var(--k-fill-primary); }

/* --------------------------------------------------------------------- */
/* New-employee permission dialog                                         */
/* --------------------------------------------------------------------- */

.k-modal--create { inline-size: min(100%, 460px); }

.k-create {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}

.k-create .k-modal__title { font-size: 17px; line-height: 22px; }

.k-create__by {
  margin: -8px 0 0;
  font-size: var(--k-font-size-sm);
  color: var(--k-text-secondary);
}

.k-create__reason {
  margin: 0;
  padding: 9px 11px;
  border-radius: var(--k-radius-lg);
  background: var(--k-bg-subtle);
  border: 1px solid var(--k-border-subtle);
  font-size: var(--k-font-size-sm);
  line-height: var(--k-line-height-sm);
  color: var(--k-text-secondary);
}

.k-create .k-field textarea { min-block-size: 92px; }

.k-create__note {
  margin: 0;
  font-size: var(--k-font-size-sm);
  line-height: var(--k-line-height-sm);
  color: var(--k-text-tertiary);
}

.k-create__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-block-start: 2px;
}

/* --------------------------------------------------------------------- */
/* Narrow / phone                                                         */
/* --------------------------------------------------------------------- */

/* The details panel is the first thing to go; the sidebar is the spine of the
 * product and survives much further down, as it does in the reference. */
@media (max-width: 1100px) {
  .k-shell { grid-template-columns: var(--k-sidebar-width) minmax(0, 1fr); }
  .k-details { display: none; }
}

@media (max-width: 860px) {
  .k-shell { --k-sidebar-width: 232px; }
}

@media (max-width: 720px) {
  .k-shell { grid-template-columns: minmax(0, 1fr); }
  .k-sidebar { display: none; }
  .k-shell[data-mobile-view="list"] .k-sidebar { display: flex; inline-size: 100%; }
  .k-shell[data-mobile-view="list"] .k-main { display: none; }
  .k-titlebar__back { display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; margin-inline-start: -10px; }
  .k-dash__top .k-iconbtn { inline-size: 44px; block-size: 44px; }
  .k-transcript { padding-inline: 14px; }
  .k-composer { margin-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .k-shell * { animation: none !important; transition: none !important; }
}