:root{
  --ease-smooth:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-back:cubic-bezier(.18,.89,.32,1.28);
  --ring-glow:0 0 0 4px var(--accent-bg);
  --ring-glow-strong:0 0 0 5px var(--accent-bg),0 0 22px var(--accent-border);
  --lift-shadow:0 10px 30px -8px rgba(15,23,36,.22),0 3px 8px -2px rgba(15,23,36,.1);
  --lift-shadow-hover:0 20px 48px -12px rgba(15,23,36,.32),0 6px 14px -3px rgba(15,23,36,.14);
  --grad-edge:linear-gradient(135deg,var(--accent),var(--accent-2));
  --grad-edge-soft:linear-gradient(135deg,color-mix(in oklab,var(--accent) 40%,transparent),color-mix(in oklab,var(--accent-2) 40%,transparent));
}

[data-theme=dark]{
  --lift-shadow:0 10px 30px -8px rgba(0,0,0,.6),0 3px 8px -2px rgba(0,0,0,.45);
  --lift-shadow-hover:0 20px 48px -12px rgba(0,0,0,.7),0 6px 14px -3px rgba(0,0,0,.5);
}

html,body{
  position:relative;
  min-height:100%;
  background:
    radial-gradient(900px 520px at 100% -8%,color-mix(in oklab,var(--accent) 16%,transparent),transparent 58%),
    radial-gradient(820px 480px at -8% 108%,color-mix(in oklab,var(--accent-2) 14%,transparent),transparent 60%),
    radial-gradient(700px 420px at 50% 50%,color-mix(in oklab,var(--accent) 5%,transparent),transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
[data-theme=dark] body{
  background:
    radial-gradient(900px 520px at 100% -8%,color-mix(in oklab,var(--accent) 18%,transparent),transparent 58%),
    radial-gradient(820px 480px at -8% 108%,color-mix(in oklab,var(--accent-2) 13%,transparent),transparent 60%),
    radial-gradient(700px 420px at 50% 50%,color-mix(in oklab,var(--accent) 6%,transparent),transparent 70%),
    var(--bg);
  background-attachment:fixed;
}

body::before,body::after{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  filter:blur(70px);
  opacity:.55;
  border-radius:50%;
  animation:float-orb 18s var(--ease-smooth) infinite alternate;
}
body::before{
  width:340px;height:340px;
  top:-90px;right:-60px;
  background:radial-gradient(circle,var(--accent),transparent 68%);
}
body::after{
  width:300px;height:300px;
  bottom:-80px;left:-50px;
  background:radial-gradient(circle,var(--accent-2),transparent 68%);
  animation-delay:-6s;animation-duration:22s;
}
[data-theme=dark] body::before,[data-theme=dark] body::after{opacity:.4}
@keyframes float-orb{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(20px,30px) scale(1.08)}
  100%{transform:translate(-18px,12px) scale(.96)}
}

#root{position:relative;z-index:1}

.workspace-top-bar{
  background:color-mix(in oklab,var(--surface) 62%,transparent);
  backdrop-filter:saturate(200%) blur(18px);
  -webkit-backdrop-filter:saturate(200%) blur(18px);
  border-bottom:1px solid transparent;
  background-clip:padding-box;
  box-shadow:0 1px 0 0 rgba(255,255,255,.5) inset,0 8px 28px -14px rgba(15,23,36,.22);
  position:relative;
}
.workspace-top-bar::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--grad-edge);
  opacity:.55;
}
[data-theme=dark] .workspace-top-bar{
  background:color-mix(in oklab,var(--surface) 58%,transparent);
  box-shadow:0 1px 0 0 rgba(255,255,255,.06) inset,0 8px 28px -14px rgba(0,0,0,.7);
}

.workspace-top-bar .text-\[26px\],
.workspace-top-bar span[class*="font-extrabold"]{
  background:var(--grad-edge);
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:.02em;
  animation:grad-shift 6s var(--ease-smooth) infinite;
}
@keyframes grad-shift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.app-control,
.control-surface,
.button,
button[class*="rounded-full"]{
  transition:transform .28s var(--ease-back),box-shadow .28s var(--ease-smooth),background-color .2s,color .2s,border-color .2s;
}

.app-control:not(:disabled):hover,
.control-surface:not(:disabled):hover,
.button:not(:disabled):not([data-disabled]):hover{
  transform:translateY(-2px);
  box-shadow:var(--control-shadow),0 0 0 1px var(--accent-border),0 8px 20px -8px var(--accent-border);
}
.app-control:not(:disabled):active,
.button:not(:disabled):not([data-disabled]):active{
  transform:translateY(0) scale(.96);
}

.button--solid,
button[class*="button--solid"]{
  background:var(--grad-edge);
  background-size:180% 180%;
  box-shadow:0 6px 18px -5px var(--accent-border),inset 0 1px 0 0 rgba(255,255,255,.3);
  transition:background-position .6s var(--ease-smooth),transform .25s var(--ease-back),box-shadow .28s var(--ease-smooth);
}
.button--solid:not(:disabled):hover{
  background-position:100% 0;
  transform:translateY(-2px);
  box-shadow:0 12px 26px -6px var(--accent-border),0 0 0 1px var(--accent-border),inset 0 1px 0 0 rgba(255,255,255,.38);
}

button[aria-label*="Send"]:not(:disabled){
  background:var(--grad-edge);
  background-size:180% 180%;
  color:var(--on-accent);
  box-shadow:var(--glow-accent),0 6px 16px -4px var(--accent-border),inset 0 1px 0 0 rgba(255,255,255,.35);
  transition:transform .22s var(--ease-spring),box-shadow .28s var(--ease-smooth),background-position .5s var(--ease-smooth);
}
button[aria-label*="Send"]:not(:disabled):hover{
  transform:translateY(-2px) scale(1.06);
  background-position:100% 0;
  box-shadow:0 0 32px var(--accent-border),var(--glow-accent),0 10px 22px -5px var(--accent-border),inset 0 1px 0 0 rgba(255,255,255,.42);
}
button[aria-label*="Send"]:not(:disabled):active{
  transform:scale(.9);
}

textarea,
input[type=text],
input[type=search],
.field{
  transition:box-shadow .28s var(--ease-smooth),border-color .2s,background-color .2s;
}
textarea:focus-visible,
input:focus-visible,
.field:focus-visible,
input:focus,
textarea:focus{
  outline:none;
  box-shadow:var(--ring-glow-strong),0 0 0 1px var(--accent) inset;
  border-color:var(--accent);
}

.device-card,
[class*="device-card"]{
  transition:transform .32s var(--ease-back),box-shadow .32s var(--ease-smooth),border-color .2s;
}
.device-card:hover{
  transform:translateY(-4px) scale(1.012);
  box-shadow:var(--lift-shadow-hover),0 0 0 1px var(--accent-border);
}

[class*="rounded-full"][class*="px-"]:hover svg,
.app-control:hover svg{
  transition:transform .3s var(--ease-spring);
  transform:scale(1.12);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:none;
  box-shadow:var(--ring-glow);
  border-radius:inherit;
}

.status-dot,
span[class*="bg-[var(--status"]{
  box-shadow:0 0 0 0 currentColor;
  animation:pulse-dot 2.4s var(--ease-smooth) infinite;
}
@keyframes pulse-dot{
  0%{box-shadow:0 0 0 0 color-mix(in oklab,currentColor 55%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:color-mix(in oklab,var(--scrollbar) 85%,transparent);
  border-radius:99px;
  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{
  background:var(--accent);
  background-clip:content-box;
}

.chat-input-shell{
  background:linear-gradient(to top,color-mix(in oklab,var(--bg) 88%,transparent),transparent);
  padding-bottom:4px;
}

.chat-composer{
  position:relative;
  background:color-mix(in oklab,var(--surface) 82%,transparent);
  backdrop-filter:saturate(170%) blur(14px);
  -webkit-backdrop-filter:saturate(170%) blur(14px);
  border:1px solid color-mix(in oklab,var(--line) 65%,transparent);
  box-shadow:var(--card-shadow),0 12px 30px -14px rgba(15,23,36,.22),inset 0 1px 0 0 rgba(255,255,255,.55);
  border-radius:var(--field-radius);
  transition:box-shadow .32s var(--ease-smooth),border-color .2s;
}
[data-theme=dark] .chat-composer{
  box-shadow:var(--card-shadow),0 12px 30px -14px rgba(0,0,0,.6),inset 0 1px 0 0 rgba(255,255,255,.05);
}
.chat-composer::before{
  content:"";
  position:absolute;inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:var(--grad-edge-soft);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .3s var(--ease-smooth);
  pointer-events:none;
}
.chat-composer:focus-within{
  border-color:color-mix(in oklab,var(--accent) 60%,var(--line));
  box-shadow:var(--card-shadow),0 0 0 4px var(--accent-bg),0 16px 36px -14px var(--accent-border),inset 0 1px 0 0 rgba(255,255,255,.55);
}
.chat-composer:focus-within::before{opacity:1}

.service-status-band{
  background:color-mix(in oklab,var(--surface) 40%,transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid color-mix(in oklab,var(--line) 40%,transparent);
}

.service-status-light{
  width:8px;height:8px;
  border-radius:99px;
  background:var(--status-connected);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--status-connected) 22%,transparent),0 0 10px var(--status-connected);
  animation:pulse-dot 2.4s var(--ease-smooth) infinite;
}

img[class*="object-contain"][class*="relative"]{
  filter:drop-shadow(0 8px 20px color-mix(in oklab,var(--accent) 38%,transparent));
  transition:transform .45s var(--ease-spring),filter .3s;
}
img[class*="object-contain"][class*="relative"]:hover{
  transform:scale(1.1) rotate(-3deg);
  filter:drop-shadow(0 12px 28px color-mix(in oklab,var(--accent) 55%,transparent));
}

a[href*="m5stack.com"]{
  color:var(--accent);
  font-weight:600;
  text-decoration-line:underline;
  text-decoration-color:color-mix(in oklab,var(--accent) 45%,transparent);
  text-underline-offset:2px;
  transition:color .2s,text-decoration-color .2s;
}
a[href*="m5stack.com"]:hover{
  color:var(--accent-2);
  text-decoration-color:var(--accent-2);
}

h3[class*="font-semibold"]{
  background:var(--grad-edge);
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:22px !important;
  font-weight:800 !important;
  letter-spacing:.01em;
  animation:grad-shift 6s var(--ease-smooth) infinite;
}

p[class*="max-w-"][class*="leading-relaxed"]{
  font-size:14px !important;
  line-height:1.7 !important;
  max-width:340px !important;
  color:color-mix(in oklab,var(--text) 88%,var(--muted)) !important;
}

img[src*="icon.png"][class*="relative"]{
  width:88px !important;
  height:88px !important;
  max-width:88px !important;
  max-height:88px !important;
}

img[src*="icon.png"][class*="relative"] + div,
img[src*="icon.png"][class*="relative"] ~ .space-y-\\[6px\\]{
  margin-top:4px;
}

.chat-composer{
  min-height:120px !important;
}
.chat-composer-textarea{
  min-height:44px !important;
  font-size:15px !important;
  line-height:1.5 !important;
  padding:6px 4px !important;
}
.chat-composer-textarea::placeholder{
  color:color-mix(in oklab,var(--text) 55%,var(--muted)) !important;
  opacity:1 !important;
}

button[class*="size-7"][aria-label="Send message"],
button[aria-label="Send message"]{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
}
button[aria-label="Send message"] svg{
  width:16px !important;
  height:16px !important;
}
button[aria-label="Attach images"]{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
}

.workspace-top-bar img[src*="icon.png"]{
  width:48px !important;
  height:48px !important;
  border-radius:12px !important;
  box-shadow:0 4px 12px -3px var(--accent-border),0 0 0 1px color-mix(in oklab,var(--accent) 20%,transparent) !important;
}

.service-status-metric{
  padding:2px 8px !important;
  border-radius:99px !important;
  background:color-mix(in oklab,var(--surface-2) 70%,transparent) !important;
  font-size:11px !important;
  font-weight:600 !important;
}
.service-status-metric span:first-of-type{
  color:var(--accent) !important;
  font-weight:800 !important;
}

.app-control{
  padding:8px 14px !important;
  border-radius:99px !important;
  background:color-mix(in oklab,var(--surface) 50%,transparent) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 0 rgba(255,255,255,.4) inset,0 0 0 1px color-mix(in oklab,var(--line) 50%,transparent) !important;
}
.app-control:not(:disabled):hover{
  background:color-mix(in oklab,var(--accent) 12%,var(--surface)) !important;
  box-shadow:0 0 0 1px var(--accent-border),0 6px 16px -6px var(--accent-border),0 1px 0 0 rgba(255,255,255,.5) inset !important;
}

button[aria-label*="Pair a device"]:not(.app-control){
  padding:8px 14px !important;
  border-radius:99px !important;
}

.flex.items-center.justify-center.gap-\\[16px\\]{
  gap:20px !important;
  padding:24px 16px !important;
}

button:disabled,
input:disabled,
textarea:disabled{
  opacity:.6;
  cursor:not-allowed;
}
button:disabled:not([class*="cursor-not-allowed"]){
  filter:saturate(.8);
}

[aria-haspopup="dialog"]{
  position:relative;
  overflow:hidden;
}
[aria-haspopup="dialog"]::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,color-mix(in oklab,var(--accent) 18%,transparent) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s var(--ease-smooth);
  pointer-events:none;
}
[aria-haspopup="dialog"]:hover::after{
  transform:translateX(120%);
}

.workspace-top-bar button[aria-label*="dark"]:not(:disabled):hover img,
.workspace-top-bar button[aria-label*="light"]:not(:disabled):hover img{
  transition:transform .5s var(--ease-spring);
  transform:rotate(180deg) scale(1.08);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  body::before,body::after{display:none}
}

.relative > .absolute.inset-0.opacity-30.blur-xl{
  opacity:.1 !important;
  border-radius:16px !important;
  filter:blur(32px) !important;
  transform:scale(1.3) !important;
}

.flex.flex-col.items-center.justify-center.gap-\\[16px\\] + div,
.flex.flex-col.items-center.justify-center.gap-\\[16px\\] ~ div,
[class*="flex-col"][class*="items-center"][class*="justify-center"] h3,
[class*="flex-col"][class*="items-center"][class*="justify-center"] p{
  max-width:360px !important;
  white-space:normal !important;
  word-break:break-word !important;
  overflow-wrap:break-word !important;
}

[class*="flex-col"][class*="items-center"][class*="justify-center"] p[class*="max-w-"]{
  max-width:360px !important;
  white-space:normal !important;
  word-break:break-word !important;
}

.chat-input-shell{
  padding:8px 12px 6px 12px !important;
  overflow-x:visible !important;
}
.chat-input-shell > div{
  max-width:100% !important;
}
.chat-composer{
  max-width:100% !important;
  margin:0 !important;
}

.flex.min-w-0.items-center.justify-between.gap-\\[6px\\]{
  gap:4px !important;
  padding:4px 2px !important;
}

button[aria-label*="Send"]{
  position:relative !important;
  right:0 !important;
  flex-shrink:0 !important;
}

.workspace-top-bar{
  padding-left:8px !important;
  padding-right:8px !important;
}

[class*="grid-cols"][class*="gap-\\[8px\\]"]{
  gap:4px !important;
  padding-left:6px !important;
  padding-right:6px !important;
}

[class*="px-\\[10px\\]"][class*="py-\\[10px\\]"],
[class*="px-\\[10px\\]"][class*="py-\\[14px\\]"]{
  padding-left:8px !important;
  padding-right:8px !important;
}

.service-status-band{
  padding-left:8px !important;
  padding-right:8px !important;
}

.app-control{
  padding:6px 10px !important;
}
.app-control svg{
  flex-shrink:0 !important;
}

[class*="size-\\[44px\\]"][class*="inline-flex"]{
  width:40px !important;
  height:40px !important;
}

.workspace-top-bar img{
  width:40px !important;
  height:40px !important;
}

.app-control span[class*="font-medium"]{
  font-size:12px !important;
}

.workspace-top-bar span[class*="text-\\[26px\\]"]{
  font-size:22px !important;
}

[class*="grid-cols"][class*="max-w-\\[920px\\]"]{
  max-width:100% !important;
}