/* Hand-written app styles: plain CSS served directly from /assets, outside the
   Tailwind build (edit, reload, done - and Chrome devtools workspace edits save here).
   Keep Tailwind syntax (@apply, @utility, theme(), etc) out: build-side pieces live
   in frontend/src/style.css. */

:root {
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
}

@keyframes toolUsageSlideDown {
  from {
      max-height: 0;
      opacity: 0;
      transform: translateY(-10px);
  }
  to {
      max-height: 1000px;
      opacity: 1;
      transform: translateY(0);
  }
}
@keyframes copy-flash {
    0%, 70% { background-image: var(--icon-check); }
    100% { background-image: var(--icon-copy); }
}

:root {
  color-scheme: light;
  .monaco-editor-background {
    --vscode-editor-selectionBackground: oklch(0.8 0 0 / 0.4) !important;
    --vscode-editor-wordHighlightTextBackground: transparent !important;
   }
}
/* Dark half of the pair above: :root.dark outranks :root, so light-dark()
   resolves correctly regardless of stylesheet load order */
:root.dark { color-scheme: dark; }
#diff-editor { height: 50svh; }
.monaco-editor-container { min-height: 32px; }
#low-balance-banner:empty { display: none; }
.uk-btn { --uk-btn-padding: 0.5rem 0.75rem; }
.border, hr, .border-b { border-color: var(--color-border); }
button, .uk-btn { cursor: pointer; }
.copy-wrap { position: relative; }
.copy-wrap:not(:first-child) { margin-top: calc(var(--sp) * 0.5); }
.copy-wrap button {
    position: absolute; top: 0.1rem; right: 0.1rem; padding: 0; border: none;
    background: oklch(0.7 0 0 / 0.15) var(--icon-copy) center/16px no-repeat;
}
a:has(:disabled) { pointer-events: none; }
.copy-wrap button:hover { background-color: oklch(0.7 0 0 / 0.3); }
.copy-wrap button.copied { animation: copy-flash 1.5s forwards; }
.copy-wrap pre { padding-right: 1.5em !important; }

.toggle-button {
  user-select: none;
  outline: 1px outset var(--color-border);
  outline-offset: -1.5px;
  &:has(:checked) {
    outline-style: inset;
    color: whitesmoke;
    box-shadow: inset 1px 1px 3px 1px #0e2032;
    background: oklch(70.7% .165 254.624);
  }
}
.uk-h4 {
  font-size: 13pt;
}
.uk-codespan {
  padding: 0.25rem .5rem;
}
.uk-codespan button {
  padding: 0 0.5rem;
}
table {
  --uk-table-cell-padding: 0.5rem .75rem;
}
#popout-container .msg-body {
  max-height: none;
}
#vi-ctn {
  font-size: 14px;
  height: fit-content;
  padding: 0 4px;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--border)/0.3);
  &:has(#vi-status:empty) {
    height: 0;
  }
  input {
    background-color: transparent;
    color: hsl(var(--foreground));
    outline: none;
    border: none;
  }
}
.toggle-btn[data-sb-open] {
    outline: 1.5px groove oklch(70.7% .165 254.624);
    outline-offset: -1.5px;
}
button:active {
    outline: 1.5px groove hsl(var(--primary));
    outline-offset: -1.5px;
}
div.uk-container {
  max-width: none;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
use:is([href='#lc-bookmark-check'], [href='#lc-eye-off'], [href='#lc-pin']) { stroke: oklch(63.7% .237 25.331); border: 1px solid var(--color-foreground); }

#dialog-container {
  contain: strict;
  background-color: hsl(var(--muted) / 0.3);
  border-radius: 0.3rem;
  scroll-padding: 0.375rem 0;
}
#popout-container .uk-card {
  background-color: var(--color-card);
  color: var(--color-card-foreground);
  width: 100%;
}
#popout-container.out-only .card-in {
  display: none;
}
.uk-paragraph {
  line-height: 1.4;
}
/* #chat-box:has(#is_input[value="1"]) [data-editing] .msg-card:first-child,
#chat-box:has(#is_input:not([value])) [data-editing] .msg-card:last-child {
  outline: 1.5px dashed hsl(var(--muted-foreground));
  outline-offset: -1px;
} */
.editable {
  flex: none;
  contain: content;
  outline: 2px solid transparent;
  outline-offset: 2.5px;
  --tw-ring-color: transparent;
  .uk-btn-group { content-visibility: hidden; contain-intrinsic-size: auto 26px; box-shadow: none; }
  &[data-editing] { outline-color: oklch(72.3% 0.219 149.579); }
  &[data-sm="primary"] { --tw-ring-color: oklch(62.3% 0.214 259.815); }
  &[data-icons-vis], &:hover, &[data-sm=primary], &[data-editing] {
    .uk-btn-group { content-visibility: auto; box-shadow: var(--uk-btn-shadow); }
  }
}

.msg-card {
  background-color: var(--color-card);
  color: var(--color-card-foreground);
  width: 95%;
  overflow: hidden;
}

.msg-body {
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: var(--spacing) calc(var(--spacing) * 1.5);
}

.msg-content {
  overflow-wrap: break-word;
  p code, li code, table code {
    background: var(--color-muted);
    padding: 0.2rem 0.3rem;
    border-radius: 0.25rem;
    line-height: 1.2rem;
  }
  pre {
    white-space: pre-wrap;
    background: light-dark(oklch(0.97 0 0), oklch(0.25 0 0));
    line-height: 125%;
    padding: 0.25rem 0.3rem;
    border-radius: 5px;
    width: 100%;
  }
  a, .uk-link { color: revert; text-decoration: revert; text-underline-offset: 2px !important; }
  img { max-height: 600px; }
}

.msg-card[data-clamped] {
  box-shadow: inset 0 2px 4px 0 oklch(44.6% .043 257.281);
    .msg-body {
      max-height: calc(60vh - 7rem);
      flex-direction: column-reverse;
    }
}

/* Kernel status dot: data-kstatus set by ws_indicator pushes (05_kernel) + kernelStatus (monedit.js) */
#ws-indicator { background-color: grey; }
#ws-indicator[data-kstatus="starting"] { background-color: gold; animation: kstatus-pulse 1.5s ease-in-out infinite; }
#ws-indicator[data-kstatus="ready"] { background-color: limegreen; }
#ws-indicator[data-kstatus="error"] { background-color: orange; }
#ws-indicator[data-kstatus="failed"], #ws-indicator[data-kstatus="closed"] { background-color: red; }
@keyframes kstatus-pulse { 50% { opacity: 0.4; } }

.spinner { margin-left: var(--spacing); }
.editable[data-sm="secondary"] { filter: invert(0.08); }
.monaco-editor-container {
  min-height: 32px;
  max-height: 50svh;
}
.editable[data-diff="deleted"]  { background: rgba(220,40,40,0.15) !important; }
.editable[data-diff="changed"]  { background: rgba(200,170,0,0.15) !important; }
.editable[data-diff="added"]    { background: rgba(0,180,0,0.15) !important; }

.msg-card.collapsed {
  position: relative;
  svg[icon="chevron-down"] {
    background: hsl(var(--muted-foreground)/0.1);
    border: 1px solid hsl(var(--muted-foreground)/0.2);
    color: hsl(var(--foreground));
  }
  .msg-body {
    max-height: 51px;
    overflow: hidden;
  }
  &::after {
    box-shadow: inset 0 -30px 30px -30px rgba(0,0,0,0.4);
    content: ''; position: absolute; height: 50px;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, hsl(var(--background)));
    pointer-events: none;
  }
}
.editable[data-sm-header="collapsed"] .msg-card {
  border-bottom: 1.5px dashed gray;
  position: relative;
  &::after {
    box-shadow: inset 0 -30px 30px -30px rgba(0,0,0,0.4);
    content: ''; position: absolute; height: 50px;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, hsl(var(--primary)/0.2));
    pointer-events: none;
  }
}

/* Collapsible tool call details */
.tool-usage-details { overflow: hidden; }
.tool-usage-details[open] {
  animation: toolUsageSlideDown 0.3s ease-in-out;
  border: 2px solid var(--color-border);
  border-radius: 0.25rem;
  padding: 0.5em 0.75em;
}

.katex * { border-color: currentColor !important; }

span.comment-start { background: #fffacd; border-left: 3px solid #f0c040; padding: 2px 4px; }
span.comment-start::before { content: "💬 " attr(author) ": "; font-size: 0.8em; color: #666; }
span.deletion { text-decoration: line-through; color: #c00; background: #fee; }
span.insertion { color: #080; background: #efe; text-decoration: underline; }

.filter-hidden,.heading-hidden { display: none !important; }

/* FastAI ansi styling */
.ansi-black-bg { background-color: #3e424d; } .ansi-red-bg { background-color: #e75c58; }
.ansi-green-bg { background-color: #00a250; } .ansi-yellow-bg { background-color: #ddb62b; }
.ansi-blue-bg { background-color: #208ffb; } .ansi-magenta-bg { background-color: #d160c4; }
.ansi-cyan-bg { background-color: #60c6c8; } .ansi-white-bg { background-color: #c5c1b4; }
.ansi-black-fg { color: #3e424d; } .ansi-red-fg { color: #e75c58; }
.ansi-green-fg { color: #00a250; } .ansi-yellow-fg { color: #ddb62b; }
.ansi-blue-fg { color: #208ffb; } .ansi-magenta-fg { color: #d160c4; }
.ansi-cyan-fg { color: #60c6c8; } .ansi-white-fg { color: #c5c1b4; }
.ansi-black-intense-fg { color: #282c36; } .ansi-red-intense-fg { color: #b22b31; }
.ansi-green-intense-fg { color: #007427; } .ansi-yellow-intense-fg { color: #b27d12; }
.ansi-blue-intense-fg { color: #0065ca; } .ansi-magenta-intense-fg { color: #a03196; }
.ansi-cyan-intense-fg { color: #258f8f; } .ansi-white-intense-fg { color: #a1a6b2; }
.ansi-black-intense-bg { background-color: #282c36; } .ansi-red-intense-bg { background-color: #b22b31; }
.ansi-green-intense-bg { background-color: #007427; } .ansi-yellow-intense-bg { background-color: #b27d12; }
.ansi-blue-intense-bg { background-color: #0065ca; } .ansi-magenta-intense-bg { background-color: #a03196; }
.ansi-cyan-intense-bg { background-color: #258f8f; } .ansi-white-intense-bg { background-color: #a1a6b2; }
.ansi-bold { font-weight: bold; } .ansi-underline { text-decoration: underline; }

/* Fastpylight spans styling */
.hl-constant-builtin, .hl-constant-character, .hl-markup-raw, .hl-markup-raw-block, .hl-markup-raw-inline { color: light-dark(#5F8700, #79C0FF) }
.hl-keyword, .hl-keyword-control-import, .hl-keyword-control-return, .hl-keyword-function, .hl-keyword-storage { color: light-dark(#D70087, #FF7B72) }
.hl-markup-heading, .hl-markup-heading-2, .hl-markup-heading-4, .hl-markup-heading-5, .hl-markup-heading-6 { color: light-dark(#D75F00, #79C0FF) }
.hl-markup-list, .hl-markup-list-checked, .hl-markup-list-numbered, .hl-markup-list-unchecked, .hl-markup-list-unnumbered { color: #0087AF }
.hl-string, .hl-string-special, .hl-string-special-path, .hl-string-special-symbol, .hl-string-special-url { color: light-dark(#5F8700, #A5D6FF) }
.hl-constant, .hl-constant-numeric, .hl-constant-numeric-float, .hl-constant-numeric-integer { color: light-dark(#D75F00, #79C0FF) }
.hl-punctuation, .hl-punctuation-bracket, .hl-variable, .hl-variable-other { color: light-dark(#444444, #C9D1D9) }
.hl-comment, .hl-comment-block, .hl-comment-line { color: light-dark(#878787, #8B949E) }
.hl-constructor, .hl-function, .hl-function-method { color: light-dark(#444444, #D2A8FF) }
.hl-keyword-operator, .hl-keyword-storage-type, .hl-label { color: light-dark(#0087AF, #FF7B72) }
.hl-markup-heading-1, .hl-markup-heading-marker, .hl-type-builtin { color: light-dark(#D70087, #79C0FF) }
.hl-type-enum, .hl-type-enum-variant, .hl-variable-parameter { color: light-dark(#444444, #FFA657) }
.hl-constant-character-escape, .hl-markup-heading-3, .hl-escape { color: light-dark(#8700AF, #79C0FF) }
.hl-diff-delta, .hl-diff-delta-moved { color: light-dark(inherit, #D29922); background-color: light-dark(#FFD787, transparent) }
.hl-keyword-control, .hl-keyword-control-exception { color: light-dark(#D70000, #FF7B72) }
.hl-keyword-control-conditional, .hl-keyword-control-repeat { color: light-dark(#8700AF, #FF7B72) }
.hl-tag, .hl-tag-builtin { color: light-dark(#0087AF, #7EE787) }
.hl-attribute { color: light-dark(#D75F00, #C9D1D9) }
.hl-comment-block-documentation { color: light-dark(#878787, #8B949E) }
.hl-constant-builtin-boolean { color: light-dark(#008700, #79C0FF) }
.hl-diff-minus { color: light-dark(#AF0000, #F85149); background-color: light-dark(#FFD7FF60, transparent) }
.hl-diff-plus { color: light-dark(#008700, #3FB950); background-color: light-dark(#AFFFAF60, transparent) }
.hl-function-builtin { color: light-dark(#005FAF, #D2A8FF) }
.hl-function-macro { color: light-dark(#5F8700, #D2A8FF) }
.hl-function-special { color: light-dark(#D75F00, #D2A8FF) }
.hl-keyword-directive { color: light-dark(#0087AF, #FF7B72) }
.hl-keyword-storage-modifier { color: light-dark(#005F87, #FF7B72) }
.hl-markup-bold { color: light-dark(#444444, inherit) }
.hl-markup-link-label { color: light-dark(#008700, inherit) }
.hl-markup-link-text { color: light-dark(#D70087, #A5D6FF); text-decoration: underline }
.hl-markup-link-url { color: light-dark(#005FAF, inherit); text-decoration: underline }
.hl-markup-quote { color: light-dark(#0087AF, inherit) }
.hl-markup-strikethrough { text-decoration: line-through }
.hl-namespace { color: light-dark(#005FAF, #FFA657) }
.hl-operator { color: light-dark(#0087AF, #A5D6FF) }
.hl-punctuation-delimiter { color: light-dark(#0087AF, #C9D1D9) }
.hl-punctuation-special { color: light-dark(#D70000, #C9D1D9) }
.hl-special { color: light-dark(#3E999F, #A5D6FF) }
.hl-string-regexp { color: light-dark(#8700AF, #A5D6FF) }
.hl-type { color: light-dark(#D70087, #FFA657) }
.hl-variable-builtin { color: light-dark(#D75F00, #FF7B72) }
.hl-variable-other-member { color: light-dark(#444444, #A5D6FF) }


/* Markdown callouts, rendered from fenced divs like ::: {.callout-warning} */
.msg-content div[class*="callout-"] {
  --callout-color: oklch(55.4% 0.046 257.417);
  background: oklch(from var(--callout-color) l c h / 0.07);
  color: color-mix(in oklab, var(--color-foreground), var(--callout-color) 20%);
  border-left: 4px solid color-mix(in oklch, var(--color-border), var(--callout-color));
  padding: 0.8em 1em;
  border-radius: 0.25rem;
  margin: 0.5em 0;

  &.callout-note { --callout-color: oklch(68.5% 0.169 237.323); }
  &.callout-warning { --callout-color: oklch(76.9% 0.188 70.08); }
  &.callout-tip { --callout-color: oklch(72.3% 0.219 149.579); }
  &.callout-important { --callout-color: oklch(63.7% 0.237 25.331); }
}