/* KinChat component layer — token-driven only. No hardcoded color/size where a token exists.
   Class contract mirrors the intended Blazor primitives: stable root class + state classes. */

/* ============ Button ============ */
.kc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--kc-space-2);
  min-height:var(--kc-control-md);padding:0 var(--kc-space-4);border-radius:var(--kc-radius-md);
  border:1px solid transparent;font-family:var(--kc-font-body);font-size:var(--kc-text-base);
  font-weight:var(--kc-weight-medium);line-height:1;letter-spacing:0;cursor:pointer;
  transition:background var(--kc-dur-fast) var(--kc-ease),border-color var(--kc-dur-fast) var(--kc-ease),color var(--kc-dur-fast) var(--kc-ease),box-shadow var(--kc-dur-fast) var(--kc-ease),transform var(--kc-dur-fast) var(--kc-ease);
  -webkit-tap-highlight-color:transparent}
.kc-btn:focus-visible{outline:none;box-shadow:var(--kc-focus-ring)}
.kc-btn:active:not(:disabled){transform:translateY(.5px)}
.kc-btn--standard{background:var(--kc-surface-1);border-color:var(--kc-border);color:var(--kc-text);box-shadow:var(--kc-elev-1)}
.kc-btn--standard:hover:not(:disabled){background:var(--kc-surface-2);border-color:var(--kc-border-strong)}
.kc-btn--accent{background:var(--kc-accent);color:var(--kc-text-on-accent);box-shadow:var(--kc-elev-1)}
.kc-btn--accent:hover:not(:disabled){background:var(--kc-accent-hover)}
.kc-btn--accent:active:not(:disabled){background:var(--kc-accent-active)}
.kc-btn--stealth{background:transparent;color:var(--kc-text-muted)}
.kc-btn--stealth:hover:not(:disabled){background:var(--kc-surface-2);color:var(--kc-text)}
.kc-btn--danger{background:var(--kc-danger);color:#fff;box-shadow:var(--kc-elev-1)}
.kc-btn--danger:hover:not(:disabled){background:var(--kc-danger-hover)}
.kc-btn--sm{min-height:var(--kc-control-sm);padding:0 var(--kc-space-3);font-size:var(--kc-text-sm);border-radius:var(--kc-radius-sm)}
.kc-btn--lg{min-height:var(--kc-control-lg);padding:0 var(--kc-space-5);font-size:var(--kc-text-md)}
.kc-btn--block{display:flex;width:100%}
.kc-btn--icon{padding:0;width:var(--kc-control-md);min-width:var(--kc-control-md);border-radius:var(--kc-radius-md)}
.kc-btn--icon.kc-btn--sm{width:var(--kc-control-sm);min-width:var(--kc-control-sm)}
.kc-btn--icon.kc-btn--lg{width:var(--kc-control-lg);min-width:var(--kc-control-lg);border-radius:var(--kc-radius-pill)}
.kc-btn:disabled,.kc-btn.is-disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.kc-btn__icon{width:18px;height:18px;flex:none;display:block}
.kc-btn--lg .kc-btn__icon{width:20px;height:20px}

/* ============ Surface ============ */
.kc-surface{background:var(--kc-surface-1);color:var(--kc-text);border-radius:var(--kc-radius-lg);border:1px solid transparent}
.kc-surface--canvas{background:var(--kc-canvas)}
.kc-surface--sunken{background:var(--kc-surface-sunken)}
.kc-surface--raised{background:var(--kc-surface-1);box-shadow:var(--kc-elev-2)}
.kc-surface--overlay{background:var(--kc-surface-1);box-shadow:var(--kc-elev-4)}
.kc-surface--muted{background:var(--kc-surface-2)}
.kc-surface--bordered{border-color:var(--kc-border-subtle)}
.kc-surface--pad{padding:var(--kc-space-4)}

/* ============ Modal ============ */
.kc-modal-scrim{position:absolute;inset:0;background:var(--kc-scrim);display:flex;align-items:center;justify-content:center;padding:var(--kc-space-4);backdrop-filter:blur(2px)}
.kc-modal{width:100%;max-width:420px;background:var(--kc-surface-1);border-radius:var(--kc-radius-xl);
  box-shadow:var(--kc-elev-4);border:1px solid var(--kc-border-subtle);overflow:hidden}
.kc-modal__head{padding:var(--kc-space-5) var(--kc-space-5) var(--kc-space-2)}
.kc-modal__title{font-size:var(--kc-text-lg);font-weight:var(--kc-weight-display)}
.kc-modal__body{padding:0 var(--kc-space-5) var(--kc-space-5);color:var(--kc-text-muted);font-size:var(--kc-text-base)}
.kc-modal__foot{display:flex;gap:var(--kc-space-2);justify-content:flex-end;padding:var(--kc-space-3) var(--kc-space-4);
  background:var(--kc-surface-2);border-top:1px solid var(--kc-border-subtle)}
.kc-modal__marker{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--kc-radius-pill);
  background:var(--kc-danger-soft);color:var(--kc-danger);margin-bottom:var(--kc-space-3)}
.kc-modal__marker--accent{background:var(--kc-accent-soft);color:var(--kc-accent-text)}
@media (max-width:520px){
  .kc-modal-scrim{align-items:flex-end;padding:0}
  .kc-modal{max-width:none;border-radius:var(--kc-radius-xl) var(--kc-radius-xl) 0 0}
  .kc-modal__foot{flex-direction:column-reverse;padding:var(--kc-space-3) var(--kc-space-4) var(--kc-space-5)}
  .kc-modal__foot .kc-btn{width:100%;min-height:var(--kc-control-lg)}
}

/* ============ Chat bubble (tinted rails) ============ */
.kc-msg{display:grid;grid-template-columns:3px 1fr;gap:var(--kc-space-4);padding:var(--kc-space-3) 0 var(--kc-space-4);
  position:relative}
.kc-msg+.kc-msg{border-top:1px solid var(--kc-border-subtle)}
.kc-msg__rail{border-radius:var(--kc-radius-pill);background:var(--kc-neutral-rail)}
.kc-msg--user .kc-msg__rail{background:var(--kc-accent-rail)}
.kc-msg--error .kc-msg__rail{background:var(--kc-danger)}
.kc-msg__main{min-width:0}
.kc-msg__meta{display:flex;align-items:center;gap:var(--kc-space-2);margin-bottom:var(--kc-space-2)}
.kc-msg__who{font-family:var(--kc-font-display);font-size:var(--kc-text-xs);font-weight:var(--kc-weight-bold);
  letter-spacing:var(--kc-tracking-wide);text-transform:uppercase;color:var(--kc-text-faint)}
.kc-msg--user .kc-msg__who{color:var(--kc-accent-text)}
.kc-msg__time{font-size:var(--kc-text-xs);color:var(--kc-text-faint)}
.kc-msg__body{font-size:var(--kc-text-md);line-height:var(--kc-leading-relaxed);max-width:var(--kc-measure);color:var(--kc-text)}
.kc-msg--user .kc-msg__body{background:var(--kc-accent-soft);border-radius:var(--kc-radius-md);padding:var(--kc-space-3) var(--kc-space-4);display:inline-block}
.kc-msg__body>*:first-child{margin-top:0}
.kc-msg__body>*:last-child{margin-bottom:0}

/* rendered markdown inside assistant messages */
.kc-md h2{font-size:var(--kc-text-xl);margin:var(--kc-space-6) 0 var(--kc-space-2)}
.kc-md h3{font-size:var(--kc-text-lg);margin:var(--kc-space-5) 0 var(--kc-space-2)}
.kc-md p{margin:0 0 var(--kc-space-3)}
.kc-md ul,.kc-md ol{margin:0 0 var(--kc-space-3);padding-left:var(--kc-space-5);display:flex;flex-direction:column;gap:var(--kc-space-1)}
.kc-md li::marker{color:var(--kc-accent)}
.kc-md strong{font-weight:var(--kc-weight-bold)}
.kc-md code{font-family:var(--kc-font-mono);font-size:.86em;background:var(--kc-code-bg);border:1px solid var(--kc-code-border);
  padding:.08em .34em;border-radius:var(--kc-radius-xs)}
.kc-md pre{margin:0 0 var(--kc-space-3);background:var(--kc-code-bg);border:1px solid var(--kc-code-border);
  border-radius:var(--kc-radius-md);padding:var(--kc-space-3);overflow-x:auto}
.kc-md pre code{background:none;border:0;padding:0;font-size:var(--kc-text-sm);line-height:var(--kc-leading-snug)}
.kc-md blockquote{margin:0 0 var(--kc-space-3);padding-left:var(--kc-space-3);border-left:2px solid var(--kc-border);color:var(--kc-text-muted)}
.kc-md table{width:100%;border-collapse:collapse;font-size:var(--kc-text-sm);margin:0 0 var(--kc-space-3)}
.kc-md th,.kc-md td{text-align:left;padding:var(--kc-space-2) var(--kc-space-3);border-bottom:1px solid var(--kc-border-subtle)}
.kc-md thead th{font-family:var(--kc-font-display);font-weight:var(--kc-weight-bold);font-size:var(--kc-text-xs);
  letter-spacing:var(--kc-tracking-wide);text-transform:uppercase;color:var(--kc-text-faint);background:var(--kc-surface-2)}
.kc-md__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 var(--kc-space-3)}
.kc-md__scroll table{margin:0;min-width:380px}

/* streaming */
.kc-caret{display:inline-block;width:.5em;height:1.02em;margin-left:.08em;vertical-align:-.18em;border-radius:2px;
  background:var(--kc-accent);animation:kc-blink 1s steps(2,start) infinite}
@keyframes kc-blink{50%{opacity:0}}
.kc-msg__status{display:inline-flex;align-items:center;gap:var(--kc-space-2);margin-top:var(--kc-space-2);
  font-size:var(--kc-text-xs);color:var(--kc-text-faint)}
.kc-dots{display:inline-flex;gap:3px}
.kc-dots i{width:4px;height:4px;border-radius:50%;background:var(--kc-accent);animation:kc-bounce 1.1s var(--kc-ease) infinite}
.kc-dots i:nth-child(2){animation-delay:.14s}.kc-dots i:nth-child(3){animation-delay:.28s}
@keyframes kc-bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* interrupted + error */
.kc-msg__note{display:flex;align-items:center;gap:var(--kc-space-2);margin-top:var(--kc-space-3);padding:var(--kc-space-2) var(--kc-space-3);
  border-radius:var(--kc-radius-sm);font-size:var(--kc-text-sm);background:var(--kc-surface-2);color:var(--kc-text-muted)}
.kc-msg__note--warning{background:var(--kc-warning-soft);color:var(--kc-warning)}
.kc-msg__note--danger{background:var(--kc-danger-soft);color:var(--kc-danger)}
.kc-msg--error .kc-msg__body{color:var(--kc-text-muted)}

/* ============ Composer ============ */
.kc-composer{background:var(--kc-surface-1);border-top:1px solid var(--kc-border-subtle);
  padding:var(--kc-space-3) var(--kc-space-3) max(var(--kc-space-3),env(safe-area-inset-bottom))}
.kc-composer__field{display:flex;align-items:flex-end;gap:var(--kc-space-2);background:var(--kc-surface-2);
  border:1px solid var(--kc-border);border-radius:var(--kc-radius-xl);padding:var(--kc-space-1) var(--kc-space-1) var(--kc-space-1) var(--kc-space-3);
  transition:border-color var(--kc-dur-fast) var(--kc-ease),box-shadow var(--kc-dur-fast) var(--kc-ease),background var(--kc-dur-fast) var(--kc-ease)}
.kc-composer.is-focused .kc-composer__field,.kc-composer__field:focus-within{border-color:var(--kc-accent);background:var(--kc-surface-1);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--kc-accent) 18%,transparent)}
.kc-composer.is-busy .kc-composer__field{background:var(--kc-surface-2);border-color:var(--kc-border-subtle)}
.kc-composer__input{flex:1;min-width:0;border:0;background:none;resize:none;color:var(--kc-text);
  font-family:var(--kc-font-body);font-size:var(--kc-text-md);line-height:var(--kc-leading-normal);
  padding:var(--kc-space-3) 0;max-height:168px;overflow-y:auto}
.kc-composer__input:focus{outline:none}
.kc-composer__input::placeholder{color:var(--kc-text-faint)}
.kc-composer__send{flex:none;width:var(--kc-control-lg);height:var(--kc-control-lg);border-radius:var(--kc-radius-pill)}
.kc-composer__hint{display:flex;align-items:center;justify-content:space-between;gap:var(--kc-space-2);
  padding:var(--kc-space-2) var(--kc-space-2) 0;font-size:var(--kc-text-xs);color:var(--kc-text-faint)}

/* ============ Conversation list ============ */
.kc-convlist{display:flex;flex-direction:column;gap:var(--kc-space-05);padding:var(--kc-space-2)}
.kc-convlist__group{font-family:var(--kc-font-display);font-size:var(--kc-text-xs);font-weight:var(--kc-weight-bold);
  letter-spacing:var(--kc-tracking-wide);text-transform:uppercase;color:var(--kc-text-faint);
  padding:var(--kc-space-4) var(--kc-space-3) var(--kc-space-1)}
.kc-conv{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--kc-space-2);
  min-height:var(--kc-tap-min);padding:var(--kc-space-2) var(--kc-space-3);border-radius:var(--kc-radius-md);
  border:1px solid transparent;background:none;text-align:left;cursor:pointer;color:var(--kc-text);width:100%;
  font-family:var(--kc-font-body);transition:background var(--kc-dur-fast) var(--kc-ease)}
.kc-conv:hover{background:var(--kc-surface-2)}
.kc-conv:focus-visible{outline:none;box-shadow:var(--kc-focus-ring)}
.kc-conv.is-active{background:var(--kc-accent-soft);border-color:color-mix(in oklab,var(--kc-accent) 26%,transparent)}
.kc-conv.is-active .kc-conv__title{color:var(--kc-accent-text);font-weight:var(--kc-weight-bold)}
.kc-conv__title{font-size:var(--kc-text-base);font-weight:var(--kc-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-conv__time{font-size:var(--kc-text-xs);color:var(--kc-text-faint);font-variant-numeric:tabular-nums}
.kc-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--kc-space-2);
  padding:var(--kc-space-8) var(--kc-space-5);color:var(--kc-text-muted)}
.kc-empty__mark{width:44px;height:44px;border-radius:var(--kc-radius-lg);background:var(--kc-accent-soft);
  color:var(--kc-accent-text);display:flex;align-items:center;justify-content:center;margin-bottom:var(--kc-space-1)}
.kc-empty__title{font-family:var(--kc-font-display);font-weight:var(--kc-weight-display);color:var(--kc-text);font-size:var(--kc-text-base)}
.kc-empty__text{font-size:var(--kc-text-sm);max-width:30ch}

/* ============ Tags / badges ============ */
.kc-tag{display:inline-flex;align-items:center;gap:var(--kc-space-1);height:22px;padding:0 var(--kc-space-2);
  border-radius:var(--kc-radius-sm);font-size:var(--kc-text-xs);font-weight:var(--kc-weight-bold);
  letter-spacing:var(--kc-tracking-wide);text-transform:uppercase;background:var(--kc-surface-3);color:var(--kc-text-muted)}
.kc-tag--accent{background:var(--kc-accent-soft);color:var(--kc-accent-text)}
.kc-tag--success{background:var(--kc-success-soft);color:var(--kc-success)}
.kc-tag--warning{background:var(--kc-warning-soft);color:var(--kc-warning)}
.kc-tag--danger{background:var(--kc-danger-soft);color:var(--kc-danger)}

/* ============ Admin table ============ */
.kc-table{width:100%;border-collapse:collapse;font-size:var(--kc-text-base)}
.kc-table th,.kc-table td{padding:var(--kc-space-3);text-align:left;border-bottom:1px solid var(--kc-border-subtle);vertical-align:middle}
.kc-table thead th{font-family:var(--kc-font-display);font-size:var(--kc-text-xs);font-weight:var(--kc-weight-bold);
  letter-spacing:var(--kc-tracking-wide);text-transform:uppercase;color:var(--kc-text-faint);background:var(--kc-surface-2)}
.kc-table tbody tr:hover{background:var(--kc-surface-2)}
.kc-table tbody tr.is-disabled .kc-table__name{color:var(--kc-text-faint)}
.kc-table__name{font-weight:var(--kc-weight-medium)}
.kc-table__sub{font-size:var(--kc-text-sm);color:var(--kc-text-faint)}
.kc-usercard{display:grid;grid-template-columns:1fr auto;gap:var(--kc-space-2) var(--kc-space-3);align-items:center;
  padding:var(--kc-space-3);border-bottom:1px solid var(--kc-border-subtle)}
.kc-usercard__tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--kc-space-2)}

/* ============ App shell ============ */
.kc-shell{display:grid;grid-template-columns:var(--kc-sidebar-w) 1fr;height:100%;background:var(--kc-canvas);overflow:hidden}
.kc-shell__side{display:flex;flex-direction:column;min-height:0;background:var(--kc-surface-1);border-right:1px solid var(--kc-border-subtle)}
.kc-shell__side-head{display:flex;align-items:center;gap:var(--kc-space-2);padding:var(--kc-space-3);border-bottom:1px solid var(--kc-border-subtle)}
.kc-shell__brand{display:flex;align-items:center;gap:var(--kc-space-2);font-family:var(--kc-font-display);
  font-weight:var(--kc-weight-display);font-size:var(--kc-text-lg);letter-spacing:var(--kc-tracking-tight);flex:1;min-width:0}
.kc-shell__mark{width:26px;height:26px;border-radius:8px;background:var(--kc-accent);color:var(--kc-text-on-accent);
  display:flex;align-items:center;justify-content:center;font-size:var(--kc-text-sm);flex:none}
.kc-shell__scroll{flex:1;min-height:0;overflow-y:auto}
.kc-shell__side-foot{display:flex;align-items:center;gap:var(--kc-space-1);padding:var(--kc-space-2);border-top:1px solid var(--kc-border-subtle)}
.kc-shell__main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--kc-canvas)}
.kc-shell__topbar{display:flex;align-items:center;gap:var(--kc-space-2);min-height:52px;padding:var(--kc-space-2) var(--kc-space-3);
  background:var(--kc-surface-1);border-bottom:1px solid var(--kc-border-subtle)}
.kc-shell__title{font-family:var(--kc-font-display);font-weight:var(--kc-weight-bold);font-size:var(--kc-text-base);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.kc-shell__thread{flex:1;min-height:0;overflow-y:auto;padding:var(--kc-space-4) var(--kc-space-4) var(--kc-space-6)}
.kc-shell__thread-inner{max-width:760px;margin:0 auto}
.kc-shell__drawer-btn{display:none}
.kc-shell__side-scrim{display:none}
.kc-shell.is-narrow{grid-template-columns:1fr}
.kc-shell.is-narrow .kc-shell__drawer-btn{display:inline-flex}
.kc-shell.is-narrow .kc-shell__side{position:absolute;inset:0 auto 0 0;width:min(84%,var(--kc-sidebar-w));z-index:3;
  box-shadow:var(--kc-elev-4);transform:translateX(-102%);transition:transform var(--kc-dur-slow) var(--kc-ease)}
.kc-shell.is-narrow.is-drawer-open .kc-shell__side{transform:none}
.kc-shell.is-narrow.is-drawer-open .kc-shell__side-scrim{display:block;position:absolute;inset:0;z-index:2;background:var(--kc-scrim)}
.kc-shell.is-narrow .kc-shell__thread{padding:var(--kc-space-3) var(--kc-space-3) var(--kc-space-5)}

.kc-icon{width:20px;height:20px;display:block;flex:none}
.kc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ Field ============ */
.kc-field{display:grid;gap:var(--kc-space-2)}
.kc-field__label{display:flex;align-items:center;justify-content:space-between;gap:var(--kc-space-2);
  font-family:var(--kc-font-display);font-size:var(--kc-text-sm);font-weight:var(--kc-weight-bold);
  color:var(--kc-text-muted)}
.kc-field__input{width:100%;min-height:var(--kc-control-lg);padding:0 var(--kc-space-3);
  border-radius:var(--kc-radius-md);border:1px solid var(--kc-border);background:var(--kc-surface-2);
  color:var(--kc-text);font-family:var(--kc-font-body);font-size:var(--kc-text-md);
  transition:border-color var(--kc-dur-fast) var(--kc-ease),background var(--kc-dur-fast) var(--kc-ease),
    box-shadow var(--kc-dur-fast) var(--kc-ease)}
.kc-field__input::placeholder{color:var(--kc-text-faint)}
.kc-field__input:hover:not(:disabled){border-color:var(--kc-border-strong)}
.kc-field__input:focus,.kc-field.is-focused .kc-field__input{outline:none;border-color:var(--kc-accent);
  background:var(--kc-surface-1);box-shadow:0 0 0 3px color-mix(in oklab,var(--kc-accent) 18%,transparent)}
.kc-field.is-invalid .kc-field__input{border-color:var(--kc-danger);background:var(--kc-surface-1)}
.kc-field.is-invalid .kc-field__input:focus{box-shadow:0 0 0 3px color-mix(in oklab,var(--kc-danger) 20%,transparent)}
.kc-field__input:disabled{opacity:.55;cursor:not-allowed}
.kc-field__msg{display:flex;align-items:center;gap:var(--kc-space-2);font-size:var(--kc-text-sm);
  color:var(--kc-danger);line-height:var(--kc-leading-snug)}
.kc-field__msg svg{width:15px;height:15px;flex:none}
.kc-field__msg[hidden]{display:none}
/* Select rendering of the same field — same box, same states, native menu. */
select.kc-field__input{appearance:none;padding-right:var(--kc-space-8);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% - 2px),calc(100% - 13px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}