/*
  Kurumi Embed Studio - R5.4 (Aurora look).
  Served via /kurumi-static/. Every selector is scoped to the kes- namespace so nothing
  here can restyle other pages or shared controls.

  Tokens come from the Aurora design system (--ka-*) with the older --kurumi-* palette
  and plain colours as fallbacks, so the studio still reads well if Aurora is absent.
  Motion is limited to short transitions and is switched off for reduced motion.
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
.kes-studio-root,
.kes-modal,
.kes-toasts {
  --kes-bg: var(--ka-night, var(--kurumi-charcoal, #17121f));
  --kes-panel: var(--ka-plum, var(--kurumi-surface, #1f1829));
  --kes-raised: var(--ka-velvet, var(--kurumi-elevated, #2a2036));
  --kes-raised-hi: var(--ka-velvet-hi, #372b45);
  --kes-void: var(--ka-void, var(--kurumi-obsidian, #0a0810));
  --kes-ivory: var(--ka-ivory, var(--kurumi-ivory, #f4ebda));
  --kes-ivory-dim: var(--ka-ivory-dim, #cfc4b4);
  --kes-muted: var(--ka-ivory-mute, var(--kurumi-ivory-muted, #b2a797));
  --kes-crimson: var(--ka-crimson-500, var(--kurumi-crimson, #d02a3a));
  --kes-crimson-deep: var(--ka-crimson-700, var(--kurumi-crimson-deep, #86122a));
  --kes-crimson-soft: var(--ka-crimson-300, #ff766f);
  --kes-gold: var(--ka-gold-400, var(--kurumi-gold, #d6ac4c));
  --kes-gold-soft: var(--ka-gold-200, #f3dfa0);
  --kes-ok: var(--ka-ok, #5fd39a);
  --kes-warn: var(--ka-warn, #f0b75a);
  --kes-bad: var(--ka-down, #ff7a7a);
  --kes-line: var(--ka-line, rgba(244, 235, 218, 0.09));
  --kes-line-gold: var(--ka-line-gold, rgba(214, 172, 76, 0.26));
  --kes-line-gold-strong: var(--ka-line-gold-strong, rgba(232, 200, 114, 0.5));
  --kes-focus: var(--ka-gold-200, #f3dfa0);
  --kes-radius: var(--ka-r-md, 12px);
  --kes-radius-sm: var(--ka-r-sm, 8px);
  --kes-display: var(--ka-font-display, "Cormorant Garamond", "Playfair Display", Georgia, serif);
  --kes-ui: var(--ka-font-ui, system-ui, -apple-system, "Segoe UI", sans-serif);
  --kes-mono: var(--ka-font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
  --kes-gutter: clamp(0rem, 1.5vw, 0.5rem);
  color: var(--kes-ivory);
  font-family: var(--kes-ui);
}

/* ==========================================================================
   Page + shells (landing section and /studio)
   ========================================================================== */
.kes-studio-shell {
  padding-block: clamp(2.5rem, 8vh, 5rem);
  background:
    radial-gradient(80% 60% at 12% 0%, rgba(154, 27, 18, 0.16) 0%, rgba(7, 6, 11, 0) 62%),
    var(--kurumi-charcoal, transparent);
  border-bottom: 1px solid var(--kurumi-line, transparent);
}
.kes-studio-shell--page {
  padding-block: 0 2rem;
  background: none;
  border: 0;
}
.kes-page .kes-hero { min-height: 0; padding-block: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1rem; }
.kes-page .kes-hero .ka-hero__title { font-size: clamp(1.8rem, 4vw, 2.8rem); }

.kes-studio-root {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: var(--kes-gutter);
  min-width: 0;
}
.kes-studio-header { display: flex; flex-direction: column; gap: 0.4rem; }
.kes-studio-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kes-gold);
}
.kes-studio-eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--kes-gold); opacity: 0.7; }
.kes-studio-title {
  margin: 0; font-family: var(--kes-display); font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.1; color: var(--kes-ivory);
}
.kes-studio-title em { font-style: italic; color: var(--kes-gold); }
.kes-honesty { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--kes-muted); max-width: 70ch; }

/* ==========================================================================
   Banner, toolbar, layout
   ========================================================================== */
.kes-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem;
  padding: 0.85rem 1.1rem; border: 1px solid var(--kes-line-gold); border-radius: var(--kes-radius);
  background: linear-gradient(135deg, rgba(134, 18, 42, 0.28), rgba(31, 24, 41, 0.9));
}
.kes-banner[hidden] { display: none; }
.kes-banner__text { margin: 0; font-size: 0.92rem; color: var(--kes-ivory-dim); max-width: 70ch; }
.kes-banner__text strong { color: var(--kes-gold-soft); }

.kes-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.6rem; border: 1px solid var(--kes-line); border-radius: var(--kes-radius);
  background: color-mix(in srgb, var(--kes-panel) 88%, transparent);
}
.kes-toolbar__spacer { flex: 1 1 auto; }

.kes-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.kes-editor, .kes-side { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (min-width: 1100px) {
  .kes-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 1.75rem; }
  .kes-side { position: sticky; top: 5.25rem; max-height: calc(100vh - 6rem); overflow-y: auto; scrollbar-width: thin; padding-bottom: 0.25rem; }
}

/* ==========================================================================
   Panels
   ========================================================================== */
.kes-panel {
  position: relative; display: flex; flex-direction: column; gap: 1rem; min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--kes-line-gold); border-radius: var(--kes-radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kes-panel) 94%, transparent), color-mix(in srgb, var(--kes-bg) 96%, transparent));
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
}
.kes-panel__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.8rem; }
.kes-eyebrow {
  margin: 0; font-family: var(--kes-display); font-size: 1.05rem; font-weight: 600; color: var(--kes-gold);
  min-width: 2.2ch; letter-spacing: 0.08em;
}
.kes-panel__title { margin: 0; flex: 1 1 auto; font-family: var(--kes-display); font-size: 1.35rem; font-weight: 600; color: var(--kes-ivory); }
.kes-meter-text { font-size: 0.8rem; color: var(--kes-muted); font-variant-numeric: tabular-nums; }
.kes-meter-text.is-warn, .kes-count.is-warn { color: var(--kes-warn); }
.kes-meter-text.is-over, .kes-count.is-over { color: var(--kes-bad); font-weight: 700; }

/* ==========================================================================
   Controls
   ========================================================================== */
.kes-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.kes-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.kes-label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--kes-ivory-dim); }
.kes-count { font-size: 0.74rem; color: var(--kes-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kes-hint { margin: 0; font-size: 0.78rem; color: var(--kes-muted); line-height: 1.45; }
.kes-hint.is-ok { color: var(--kes-ok); }
.kes-hint.is-bad { color: var(--kes-bad); }
.kes-note { margin: 0; font-size: 0.8rem; color: var(--kes-muted); line-height: 1.5; }
.kes-note--warn { color: var(--kes-warn); }
.kes-mono { font-family: var(--kes-mono); word-break: break-all; }
.kes-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kes-input {
  width: 100%; min-width: 0; padding: 0.6rem 0.75rem; font: inherit; font-size: 0.95rem; line-height: 1.4;
  color: var(--kes-ivory); background: var(--kes-void);
  border: 1px solid var(--kes-line-gold); border-radius: var(--kes-radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kes-input::placeholder { color: var(--kes-muted); opacity: 0.75; }
.kes-input:hover { border-color: var(--kes-line-gold-strong); }
.kes-input:focus-visible, .kes-btn:focus-visible, .kes-tab:focus-visible, .kes-icon-btn:focus-visible,
.kes-swatch:focus-visible, .kes-preset:focus-visible, .kes-group__sum:focus-visible, .kes-color:focus-visible,
.kes-modal__dialog:focus-visible {
  outline: 2px solid var(--kes-focus); outline-offset: 2px;
}
.kes-input[aria-invalid="true"] { border-color: var(--kes-bad); }
.kes-input--area { resize: vertical; min-height: 5rem; font-family: inherit; }
.kes-input--select { appearance: auto; flex: 1 1 12rem; }
.kes-input--hex { width: 7.5rem; font-family: var(--kes-mono); }
.kes-json { font-family: var(--kes-mono); font-size: 0.82rem; min-height: 18rem; }

.kes-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.kes-row > .kes-input { flex: 1 1 14rem; }
.kes-row--tight { gap: 0.6rem; }
.kes-row--end { justify-content: flex-end; }
.kes-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .kes-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kes-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.5rem; padding: 0.5rem 1rem; font: inherit; font-size: 0.88rem; font-weight: 600; text-decoration: none;
  color: var(--kes-ivory); background: var(--kes-raised);
  border: 1px solid var(--kes-line-gold); border-radius: var(--ka-r-pill, 999px); cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, filter 0.15s ease;
}
.kes-btn:hover:not(:disabled) { border-color: var(--kes-line-gold-strong); background: var(--kes-raised-hi); color: var(--kes-ivory); }
.kes-btn:active:not(:disabled) { transform: translateY(1px); }
.kes-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.kes-btn--sm { min-height: 2.25rem; padding: 0.35rem 0.8rem; font-size: 0.82rem; }
.kes-btn--block { width: 100%; min-height: 3rem; font-size: 1rem; }
.kes-btn--primary {
  color: #fff; border-color: var(--kes-crimson-soft);
  background: linear-gradient(135deg, var(--kes-crimson-deep), var(--kes-crimson));
}
.kes-btn--primary:hover:not(:disabled) { color: #fff; background: linear-gradient(135deg, var(--kes-crimson), var(--kes-crimson-deep)); filter: brightness(1.08); }
.kes-btn--gold { color: #1b1118; border-color: var(--kes-gold-soft); background: linear-gradient(135deg, var(--kes-gold-soft), var(--kes-gold)); }
.kes-btn--gold:hover:not(:disabled) { color: #1b1118; background: linear-gradient(135deg, var(--kes-gold), var(--kes-gold-soft)); }
.kes-btn--quiet { background: transparent; border-color: var(--kes-line); color: var(--kes-ivory-dim); }
.kes-btn--danger { color: var(--kes-bad); border-color: color-mix(in srgb, var(--kes-bad) 55%, transparent); background: transparent; }
.kes-btn--danger:hover:not(:disabled) { color: #fff; background: color-mix(in srgb, var(--kes-bad) 30%, var(--kes-raised)); }

.kes-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0;
  font: inherit; font-size: 1.1rem; line-height: 1; color: var(--kes-ivory-dim); background: transparent;
  border: 1px solid var(--kes-line); border-radius: 50%; cursor: pointer;
}
.kes-icon-btn:hover:not(:disabled) { color: var(--kes-ivory); border-color: var(--kes-line-gold-strong); }
.kes-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.kes-icon-btn--danger:hover:not(:disabled) { color: var(--kes-bad); border-color: var(--kes-bad); }

.kes-check { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; color: var(--kes-ivory-dim); cursor: pointer; min-height: 2.25rem; }
.kes-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--kes-crimson); }

.kes-color { width: 3rem; height: 2.5rem; padding: 0; border: 1px solid var(--kes-line-gold); border-radius: var(--kes-radius-sm); background: var(--kes-void); cursor: pointer; }
.kes-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kes-swatch { width: 1.75rem; height: 1.75rem; padding: 0; border-radius: 50%; border: 2px solid var(--kes-line-gold-strong); cursor: pointer; }
.kes-swatch:hover { transform: scale(1.12); }
.kes-colorrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; }

/* tabs */
.kes-tabs { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.35rem; scrollbar-width: thin; }
.kes-tab {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: 0 0 auto; max-width: 14rem; min-height: 2.5rem; padding: 0.35rem 0.85rem;
  font: inherit; font-size: 0.84rem; color: var(--kes-ivory-dim); background: var(--kes-void);
  border: 1px solid var(--kes-line); border-radius: var(--kes-radius-sm); cursor: pointer;
}
.kes-tab.is-active { color: var(--kes-ivory); border-color: var(--kes-gold); background: var(--kes-raised); box-shadow: inset 0 -2px 0 var(--kes-gold); }
.kes-tab__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); flex: 0 0 auto; }
.kes-tab__num { font-family: var(--kes-display); font-weight: 700; color: var(--kes-gold); }
.kes-tab__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kes-tabtools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.kes-tabtools .kes-count { margin-inline-start: auto; }
.kes-embed-editor { display: flex; flex-direction: column; gap: 0.9rem; }
.kes-empty { text-align: center; padding: 1.5rem; color: var(--kes-muted); border: 1px dashed var(--kes-line-gold); border-radius: var(--kes-radius); }

/* groups */
.kes-group { border: 1px solid var(--kes-line); border-radius: var(--kes-radius-sm); background: color-mix(in srgb, var(--kes-void) 40%, transparent); }
.kes-group__sum {
  cursor: pointer; padding: 0.7rem 0.95rem; font-weight: 600; font-size: 0.9rem; color: var(--kes-gold-soft);
  list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem;
}
.kes-group__sum::-webkit-details-marker { display: none; }
.kes-group__sum::after { content: "+"; font-size: 1.1rem; color: var(--kes-gold); }
.kes-group[open] > .kes-group__sum::after { content: "\2212"; }
.kes-group__body { display: flex; flex-direction: column; gap: 0.9rem; padding: 0.2rem 0.95rem 1rem; }

/* field rows */
.kes-fields { display: flex; flex-direction: column; gap: 0.75rem; }
.kes-field-row { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem; border: 1px solid var(--kes-line); border-radius: var(--kes-radius-sm); background: var(--kes-void); }
.kes-field-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.kes-field-row__num { font-family: var(--kes-display); font-weight: 700; color: var(--kes-gold); }

/* checks */
.kes-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.kes-issue { font-size: 0.85rem; padding: 0.5rem 0.75rem; border-radius: var(--kes-radius-sm); border: 1px solid var(--kes-line); color: var(--kes-ivory-dim); }
.kes-issue b { margin-inline-end: 0.35rem; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; }
.kes-issue--error { border-color: color-mix(in srgb, var(--kes-bad) 55%, transparent); background: color-mix(in srgb, var(--kes-bad) 10%, transparent); }
.kes-issue--error b { color: var(--kes-bad); }
.kes-issue--warn { border-color: color-mix(in srgb, var(--kes-warn) 45%, transparent); }
.kes-issue--warn b { color: var(--kes-warn); }
.kes-issue--ok { color: var(--kes-ok); border-color: color-mix(in srgb, var(--kes-ok) 40%, transparent); }

/* send bar */
.kes-sendbar {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem; border: 1px solid var(--kes-line-gold-strong);
  border-radius: var(--kes-radius); background: linear-gradient(135deg, rgba(134, 18, 42, 0.32), var(--kes-panel));
  position: sticky; bottom: 0.75rem; z-index: 3;
}
@media (min-width: 1100px) { .kes-sendbar { position: static; } }
.kes-send__note, .kes-feedback { margin: 0; font-size: 0.8rem; color: var(--kes-muted); min-height: 1.1em; }
.kes-feedback.is-bad { color: var(--kes-bad); }

/* ==========================================================================
   Discord-style preview
   ========================================================================== */
.kes-preview {
  --pv-bg: #313338; --pv-text: #dbdee1; --pv-name: #f2f3f5; --pv-muted: #949ba4; --pv-embed: #2b2d31;
  --pv-link: #00a8fc; --pv-mention-bg: rgba(88, 101, 242, 0.3); --pv-mention: #c9cdfb; --pv-code: #1e1f22;
  --pv-border: rgba(255, 255, 255, 0.08);
  padding: 1rem; border-radius: var(--kes-radius-sm); background: var(--pv-bg); color: var(--pv-text);
  font-family: "gg sans", "Noto Sans", var(--kes-ui); font-size: 0.95rem; line-height: 1.375; overflow-wrap: anywhere; min-width: 0;
}
.kes-preview[data-scheme="light"] {
  --pv-bg: #ffffff; --pv-text: #313338; --pv-name: #060607; --pv-muted: #5c5e66; --pv-embed: #f2f3f5;
  --pv-link: #006ce7; --pv-mention-bg: rgba(88, 101, 242, 0.15); --pv-mention: #4752c4; --pv-code: #e3e5e8;
  --pv-border: rgba(0, 0, 0, 0.1);
}
.kes-msg { display: flex; gap: 0.9rem; align-items: flex-start; }
.kes-msg__avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.kes-msg__avatar--default { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: #5865f2; }
.kes-msg__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.kes-msg__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.kes-msg__name { font-weight: 600; color: var(--pv-name); }
.kes-msg__bot { font-size: 0.62rem; font-weight: 700; padding: 0.05rem 0.3rem; border-radius: 4px; background: #5865f2; color: #fff; align-self: center; }
.kes-msg__time { font-size: 0.72rem; color: var(--pv-muted); }
.kes-msg__content { white-space: normal; }
.kes-msg__empty { margin: 0; color: var(--pv-muted); font-style: italic; }

.kes-embed {
  max-width: 34rem; border-radius: 4px; border-left: 4px solid var(--kes-embed-color, #9a1b12);
  background: var(--pv-embed); border-top: 1px solid var(--pv-border); border-right: 1px solid var(--pv-border); border-bottom: 1px solid var(--pv-border);
}
.kes-embed.is-active { box-shadow: 0 0 0 1px var(--kes-gold); }
.kes-embed__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem 1rem; padding: 0.5rem 1rem 1rem 0.75rem; }
.kes-embed__grid.has-thumb { grid-template-columns: minmax(0, 1fr) auto; }
.kes-embed__grid.has-thumb .kes-embed__main { grid-column: 1; }
.kes-embed__main { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; padding-top: 0.25rem; }
.kes-embed__thumb { grid-column: 2; grid-row: 1; width: 5rem; height: 5rem; border-radius: 4px; object-fit: cover; }
.kes-embed__author { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--pv-name); }
.kes-embed__authoricon, .kes-embed__footericon { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }
.kes-embed__footericon { width: 1.25rem; height: 1.25rem; }
.kes-embed__authorname { color: var(--pv-name); text-decoration: none; }
a.kes-embed__authorname:hover, a.kes-embed__title:hover { text-decoration: underline; }
.kes-embed__title { font-weight: 700; font-size: 1rem; color: var(--pv-name); text-decoration: none; }
.kes-embed__title.is-link { color: var(--pv-link); }
.kes-embed__desc { font-size: 0.88rem; }
.kes-embed__fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.5rem 0.9rem; }
.kes-embed__field { grid-column: span 12; min-width: 0; }
.kes-embed__field.is-inline { grid-column: span 4; }
@media (max-width: 520px) { .kes-embed__field.is-inline { grid-column: span 6; } }
.kes-embed__fname { font-size: 0.82rem; font-weight: 700; color: var(--pv-name); margin-bottom: 0.1rem; }
.kes-embed__fvalue { font-size: 0.85rem; }
.kes-embed__image { width: 100%; max-height: 18rem; border-radius: 4px; object-fit: cover; }
.kes-embed__image.is-broken, .kes-embed__thumb.is-broken { display: none; }
.kes-embed__footer { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--pv-muted); }

.kes-preview a, .kes-md-link { color: var(--pv-link); text-decoration: none; }
.kes-preview a:hover { text-decoration: underline; }
.kes-md-code { padding: 0.1rem 0.3rem; border-radius: 4px; background: var(--pv-code); font-family: var(--kes-mono); font-size: 0.85em; }
.kes-md-pre { margin: 0.25rem 0; padding: 0.5rem 0.65rem; border-radius: 4px; background: var(--pv-code); border: 1px solid var(--pv-border); font-family: var(--kes-mono); font-size: 0.82rem; white-space: pre-wrap; color: inherit; }
.kes-md-pre code { background: transparent; padding: 0; color: inherit; }
.kes-md-h { display: block; font-weight: 700; }
.kes-md-h1 { font-size: 1.4em; } .kes-md-h2 { font-size: 1.2em; } .kes-md-h3 { font-size: 1.05em; }
.kes-md-sub { display: block; font-size: 0.8em; color: var(--pv-muted); }
.kes-md-quote { display: block; padding-inline-start: 0.7rem; border-inline-start: 4px solid var(--pv-muted); }
.kes-md-li { display: block; padding-inline-start: 1.1rem; position: relative; }
.kes-md-li::before { content: "\2022"; position: absolute; inset-inline-start: 0.35rem; }
.kes-mention { padding: 0 0.15rem; border-radius: 3px; background: var(--pv-mention-bg); color: var(--pv-mention); font-weight: 500; }
.kes-mention--blocked { text-decoration: line-through; text-decoration-color: rgba(250, 100, 100, 0.8); }
.kes-emoji { color: var(--pv-muted); }
.kes-spoiler { background: var(--pv-code); color: transparent; border-radius: 3px; cursor: pointer; }
.kes-spoiler:hover, .kes-spoiler:focus { color: inherit; background: var(--pv-border); outline: none; }

/* ==========================================================================
   Modal, presets, lists
   ========================================================================== */
.kes-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: clamp(0.75rem, 4vh, 3rem) 0.75rem; overflow-y: auto; overscroll-behavior: contain; }
.kes-modal__scrim { position: fixed; inset: 0; background: rgba(5, 3, 9, 0.78); backdrop-filter: blur(4px); }
.kes-modal__dialog {
  position: relative; width: min(34rem, 100%); max-height: none; display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem); background: linear-gradient(180deg, var(--kes-panel), var(--kes-bg));
  border: 1px solid var(--kes-line-gold-strong); border-radius: var(--kes-radius); box-shadow: 0 30px 80px -20px #000;
}
.kes-modal__dialog.is-wide { width: min(60rem, 100%); }
.kes-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kes-modal__title { margin: 0; font-family: var(--kes-display); font-size: 1.5rem; color: var(--kes-ivory); }
.kes-modal__body { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.kes-modal__body > div { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.kes-modal__foot { padding-top: 0.5rem; border-top: 1px solid var(--kes-line); }

.kes-presets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
@media (min-width: 560px) { .kes-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .kes-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kes-preset {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; text-align: left; padding: 1rem; font: inherit;
  color: var(--kes-ivory); background: var(--kes-void); border: 1px solid var(--kes-line-gold); border-radius: var(--kes-radius); cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.kes-preset:hover { border-color: var(--kes-gold); background: var(--kes-raised); transform: translateY(-2px); }
.kes-preset__glyph { font-family: var(--kes-display); font-size: 1.6rem; font-weight: 700; color: var(--kes-gold); line-height: 1; }
.kes-preset__name { font-weight: 700; font-size: 1rem; }
.kes-preset__blurb { font-size: 0.82rem; color: var(--kes-muted); line-height: 1.45; }
.kes-minicard { width: 100%; margin-top: 0.4rem; padding: 0.5rem 0.65rem; border-left: 4px solid var(--kes-embed-color, #9a1b12); border-radius: 4px; background: rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; gap: 0.3rem; }
.kes-minicard__title { font-size: 0.78rem; font-weight: 700; color: var(--kes-ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kes-minicard__line { display: block; height: 0.3rem; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.kes-minicard__line.is-short { width: 60%; }

.kes-list { display: flex; flex-direction: column; gap: 0.5rem; }
.kes-list__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.65rem 0.8rem; border: 1px solid var(--kes-line); border-radius: var(--kes-radius-sm); background: var(--kes-void); }
.kes-list__main { display: flex; flex-direction: column; flex: 1 1 12rem; min-width: 0; gap: 0.15rem; }

.kes-summary { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.kes-summary__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.5rem 0.7rem; border-radius: var(--kes-radius-sm); background: var(--kes-void); }
.kes-summary dt { font-size: 0.78rem; font-weight: 700; color: var(--kes-gold); text-transform: uppercase; letter-spacing: 0.08em; }
.kes-summary dd { margin: 0; font-size: 0.9rem; color: var(--kes-ivory); overflow-wrap: anywhere; }
@media (max-width: 520px) { .kes-summary__row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } }

.kes-keys { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; }
.kes-keys__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--kes-line); }
.kes-keys dt, .kes-keys dd { margin: 0; font-size: 0.88rem; }
.kes-kbd { padding: 0.15rem 0.5rem; border: 1px solid var(--kes-line-gold-strong); border-radius: 6px; background: var(--kes-void); font-family: var(--kes-mono); font-size: 0.8rem; color: var(--kes-gold-soft); }

/* toasts (fallback when Aurora toasts are unavailable) */
.kes-toasts { position: fixed; z-index: 2100; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
.kes-toast { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.95rem; border-radius: var(--kes-radius-sm); background: var(--kes-panel); border: 1px solid var(--kes-line-gold-strong); border-left-width: 4px; box-shadow: 0 12px 30px -10px #000; color: var(--kes-ivory); }
.kes-toast--ok { border-left-color: var(--kes-ok); }
.kes-toast--warn { border-left-color: var(--kes-warn); }
.kes-toast--down { border-left-color: var(--kes-bad); }
.kes-toast__title { font-size: 0.9rem; }
.kes-toast__text { font-size: 0.82rem; color: var(--kes-ivory-dim); }

/* ==========================================================================
   Small screens and motion
   ========================================================================== */
@media (max-width: 640px) {
  .kes-toolbar .kes-btn { flex: 1 1 auto; }
  .kes-tabtools .kes-btn { flex: 1 1 auto; }
  .kes-preview { padding: 0.75rem; }
  .kes-msg__avatar { width: 2rem; height: 2rem; }
  .kes-toasts { left: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kes-studio-root *, .kes-modal *, .kes-toasts * { transition: none !important; animation: none !important; }
  .kes-preset:hover, .kes-swatch:hover, .kes-btn:active:not(:disabled) { transform: none; }
}
html[data-ka-motion="off"] .kes-studio-root *, html[data-ka-motion="off"] .kes-modal * { transition: none !important; animation: none !important; }

/* Remember-webhook opt-in and preview image control */
.kes-remember { display: flex; flex-direction: column; gap: 0.25rem; }
.kes-remember .kes-note { margin: 0; }
.kes-imgctl { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.5rem; }
.kes-imgctl .kes-note { margin: 0; }

/* Sticky jump chips: phones only */
.kes-jump { display: none; }
@media (max-width: 600px) {
  .kes-jump { display: block; position: fixed; right: 1rem; bottom: 1rem; z-index: 40; }
  .kes-jump__chip {
    min-height: 2.75rem; padding: 0.5rem 1.1rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--kes-line-gold-strong, rgba(214, 172, 76, 0.5));
    background: var(--kes-crimson-deep, #86122a); color: var(--kes-ivory, #f4ebda);
    font: inherit; font-size: 0.88rem; font-weight: 600; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }
  .kes-jump__chip[hidden] { display: none; }
  .kes-jump__chip:focus-visible { outline: 2px solid var(--kes-gold, #d6ac4c); outline-offset: 2px; }
  .kes-sendbar { bottom: 4.5rem; }
}