/* LL AI v64.9.3 — theme-aware composer border blend.
   Visual-only: softens the keyboard/composer outline across every appearance mode
   without changing input, microphone, send, image, or sidebar behavior. */

:root{
  --ll6493-composer-bg:color-mix(in srgb,var(--theme-surface,#2a2c35) 94%,var(--theme-bg,#1e2028) 6%);
  --ll6493-composer-border:color-mix(in srgb,var(--theme-line,rgba(255,255,255,.12)) 72%,var(--theme-surface,#2a2c35) 28%);
  --ll6493-composer-focus:color-mix(in srgb,var(--theme-line,rgba(255,255,255,.12)) 72%,var(--accent,#8290ff) 28%);
  --ll6493-composer-ring:rgba(var(--accent-rgb,129,140,248),.026);
  --ll6493-composer-inset:rgba(255,255,255,.022);
}

/* The resting border should read as part of the surface, not as a separate colored line. */
.composebox{
  background:var(--ll6493-composer-bg)!important;
  border-color:var(--ll6493-composer-border)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.18),inset 0 1px 0 var(--ll6493-composer-inset)!important;
  transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease,transform .11s ease!important;
}

/* Keyboard/focus state: keep the accent visible, but blend it into the current theme. */
.composebox:focus-within{
  border-color:var(--ll6493-composer-focus)!important;
  box-shadow:0 0 0 1px var(--ll6493-composer-ring),0 18px 48px rgba(0,0,0,.20),inset 0 1px 0 var(--ll6493-composer-inset)!important;
}

/* Theme tuning — same behavior, different material. */
html[data-theme="graphite"]{
  --ll6493-composer-bg:color-mix(in srgb,#2a2c35 88%,#1e2028 12%);
  --ll6493-composer-border:rgba(180,190,255,.095);
  --ll6493-composer-focus:color-mix(in srgb,rgba(180,190,255,.13) 72%,var(--accent) 28%);
  --ll6493-composer-ring:rgba(var(--accent-rgb),.022);
  --ll6493-composer-inset:rgba(255,255,255,.025);
}

html[data-theme="oled"]{
  --ll6493-composer-bg:#101010;
  --ll6493-composer-border:rgba(255,255,255,.085);
  --ll6493-composer-focus:color-mix(in srgb,rgba(255,255,255,.11) 76%,var(--accent) 24%);
  --ll6493-composer-ring:rgba(var(--accent-rgb),.018);
  --ll6493-composer-inset:rgba(255,255,255,.018);
}

html[data-theme="midnight"]{
  --ll6493-composer-bg:color-mix(in srgb,#151d33 90%,#0b1020 10%);
  --ll6493-composer-border:rgba(166,187,255,.10);
  --ll6493-composer-focus:color-mix(in srgb,rgba(166,187,255,.14) 72%,var(--accent) 28%);
  --ll6493-composer-ring:rgba(var(--accent-rgb),.022);
  --ll6493-composer-inset:rgba(210,220,255,.022);
}

html[data-theme="glass"]{
  --ll6493-composer-bg:color-mix(in srgb,var(--theme-surface) 90%,transparent);
  --ll6493-composer-border:rgba(210,225,255,.10);
  --ll6493-composer-focus:color-mix(in srgb,rgba(210,225,255,.14) 70%,var(--accent) 30%);
  --ll6493-composer-ring:rgba(var(--accent-rgb),.022);
  --ll6493-composer-inset:rgba(255,255,255,.03);
}

html[data-theme="light"]{
  --ll6493-composer-bg:#fff;
  --ll6493-composer-border:rgba(20,25,35,.095);
  --ll6493-composer-focus:color-mix(in srgb,rgba(20,25,35,.13) 76%,var(--accent) 24%);
  --ll6493-composer-ring:rgba(var(--accent-rgb),.02);
  --ll6493-composer-inset:rgba(255,255,255,.72);
}
html[data-theme="light"] .composebox{
  box-shadow:0 15px 42px rgba(24,31,47,.085),inset 0 1px 0 var(--ll6493-composer-inset)!important;
}
html[data-theme="light"] .composebox:focus-within{
  box-shadow:0 0 0 1px var(--ll6493-composer-ring),0 17px 46px rgba(24,31,47,.095),inset 0 1px 0 var(--ll6493-composer-inset)!important;
}

/* Keep tablet keyboard transitions clean and prevent the line from flashing during layout changes. */
body.v632ImagesOpen .composebox,
body.llImageKeyboardMode .composebox{
  transition:border-color .11s ease,box-shadow .11s ease,background-color .11s ease!important;
}

@media(prefers-reduced-motion:reduce){.composebox{transition:none!important}}