/* AppGPT appearance layer: dark/light themes + safe LiquidGL chrome */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#070b14;
  --panel:rgba(15,22,39,.72);
  --line:rgba(255,255,255,.09);
  --text:#f5f7ff;
  --muted:#9da8be;
  --accent:#8b7cff;
  --accent2:#63d8ff;
  --ok:#55e6a5;
  --warn:#ffc66d;
  --bad:#ff7a8e;
  --shadow:0 24px 70px rgba(0,0,0,.28);
  --field:rgba(5,10,20,.68);
  --soft:rgba(255,255,255,.045);
  --soft-strong:rgba(255,255,255,.075);
  --glass-border:rgba(255,255,255,.13);
  --dock-text:#f8fbff;
}

html[data-theme="light"]{
  color-scheme:light;
  --bg:#edf3fb;
  --panel:rgba(255,255,255,.72);
  --line:rgba(30,52,82,.14);
  --text:#102038;
  --muted:#62728a;
  --accent:#6657e8;
  --accent2:#168fc4;
  --ok:#14875b;
  --warn:#a46400;
  --bad:#c93d59;
  --shadow:0 24px 70px rgba(54,80,116,.16);
  --field:rgba(255,255,255,.82);
  --soft:rgba(255,255,255,.60);
  --soft-strong:rgba(255,255,255,.82);
  --glass-border:rgba(255,255,255,.76);
  --dock-text:#102038;
}

html,body,.glass,.nav-item,.pill,.tiny-pill,button,input,textarea,select,.message,.chat-card,.template-card,.provider-card,.issue,.artifact-card,.selection-path,.phone,.phone-bar,.toast{
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}

html[data-theme="light"],
html[data-theme="light"] body,
body[data-theme="light"]{
  background:
    radial-gradient(circle at 12% -5%,rgba(113,102,255,.22) 0,transparent 34%),
    radial-gradient(circle at 100% 28%,rgba(64,190,239,.22) 0,transparent 34%),
    linear-gradient(180deg,#f8fbff 0,#eaf1fb 100%) !important;
  color:var(--text) !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
body[data-theme="dark"]{
  background:
    radial-gradient(circle at 10% 0%,#111a36 0,transparent 38%),
    radial-gradient(circle at 100% 30%,#13263a 0,transparent 35%),
    var(--bg) !important;
  color:var(--text) !important;
}

html[data-theme="light"] .ambient.a{background:#8579ff;opacity:.22}
html[data-theme="light"] .ambient.b{background:#40bdeb;opacity:.22}
html[data-theme="dark"] .ambient.a{background:#6e63ff;opacity:.3}
html[data-theme="dark"] .ambient.b{background:#31b8ff;opacity:.3}

.glass{
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,transparent),color-mix(in srgb,var(--panel) 72%,transparent)) !important;
  border-color:var(--line) !important;
  box-shadow:var(--shadow) !important;
}

html[data-theme="light"] .glass{
  backdrop-filter:blur(24px) saturate(1.15);
  -webkit-backdrop-filter:blur(24px) saturate(1.15);
}

html[data-theme="light"] .brand strong,
html[data-theme="light"] .topbar h1,
html[data-theme="light"] .panel-head h2,
html[data-theme="light"] .edit-panel h2,
html[data-theme="light"] .repair-panel h2,
html[data-theme="light"] .message-body,
html[data-theme="light"] .chat-card strong,
html[data-theme="light"] .template-card strong{color:var(--text)}

html[data-theme="light"] .nav-item{color:var(--muted)}
html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .nav-item.active{background:rgba(255,255,255,.76);color:var(--text)}
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .kicker{color:#61738c}
html[data-theme="light"] .pill,
html[data-theme="light"] .tiny-pill{background:rgba(255,255,255,.68);color:#42546d}
html[data-theme="light"] .prompt-input,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{background:var(--field);color:var(--text)}
html[data-theme="light"] .build-controls label,
html[data-theme="light"] .form-grid label,
html[data-theme="light"] .publish-form label,
html[data-theme="light"] .setup-grid label,
html[data-theme="light"] .visual-form label{color:#53657d}
html[data-theme="light"] .chip,
html[data-theme="light"] .secondary-btn,
html[data-theme="light"] .ghost-btn,
html[data-theme="light"] .icon-actions button,
html[data-theme="light"] .artifact-actions button{color:var(--text);background:rgba(255,255,255,.62)}
html[data-theme="light"] .primary-btn{color:white;background:linear-gradient(135deg,#6557e8,#258ec8)}
html[data-theme="light"] .secondary-btn{background:rgba(53,163,211,.12)}
html[data-theme="light"] .file-drop,
html[data-theme="light"] .import-btn{color:#17617f;background:rgba(22,143,196,.08);border-color:rgba(22,143,196,.28)}
html[data-theme="light"] .message,
html[data-theme="light"] .chat-card,
html[data-theme="light"] .template-card,
html[data-theme="light"] .provider-card,
html[data-theme="light"] .issue,
html[data-theme="light"] .build-note{background:rgba(255,255,255,.58)}
html[data-theme="light"] .message.user{background:rgba(101,87,232,.12)}
html[data-theme="light"] .artifact-card,
html[data-theme="light"] .selection-path{background:rgba(238,244,252,.82);color:#41536d}
html[data-theme="light"] .warning,
html[data-theme="light"] .tip{color:#70551e;background:rgba(255,204,111,.18)}
html[data-theme="light"] .phone{background:#e8edf5;border-color:#b8c4d4}
html[data-theme="light"] .phone-bar{background:#eef3f9;color:#41536d}
html[data-theme="light"] .icon-close{color:var(--text)}
html[data-theme="light"] .toast{background:rgba(255,255,255,.94);color:var(--text)}
html[data-theme="light"] .build-progress-track{background:rgba(16,32,56,.09)}
html[data-theme="light"] .sheet-grabber{background:rgba(16,32,56,.2)}
html[data-theme="light"] .modal-backdrop{background:rgba(34,49,69,.36)}
html[data-theme="light"] .tiny-x{background:#ffffff;color:#102038}

.liquid-dock{
  position:fixed;
  top:14px;
  right:16px;
  z-index:40;
  min-height:54px;
  border-radius:20px;
  border:1px solid var(--glass-border);
  background:color-mix(in srgb,var(--panel) 58%,transparent);
  box-shadow:0 14px 44px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(24px) saturate(1.25);
  -webkit-backdrop-filter:blur(24px) saturate(1.25);
  overflow:hidden;
  isolation:isolate;
}

.liquid-lens{
  position:absolute !important;
  inset:0;
  z-index:0 !important;
  border-radius:inherit;
  overflow:hidden;
  pointer-events:none !important;
}
.liquid-lens *,
.liquid-lens canvas{pointer-events:none !important}

.liquid-dock .liquid-content{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  color:var(--dock-text);
  pointer-events:auto;
}

.liquid-dock .top-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.liquid-dock button{
  position:relative;
  z-index:6;
  pointer-events:auto !important;
  min-height:38px;
  border-radius:13px;
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  color:var(--dock-text);
  background:color-mix(in srgb,var(--soft) 82%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.liquid-dock button:hover{background:var(--soft-strong)}
.liquid-dock .theme-toggle{display:inline-flex;align-items:center;gap:7px;padding:9px 11px;white-space:nowrap;font-weight:700}
.theme-toggle .theme-icon{width:18px;text-align:center;font-size:15px}
.theme-toggle .theme-label{font-size:12px}
.liquid-badge{position:relative;z-index:6;display:inline-flex;align-items:center;gap:6px;margin-left:2px;padding:0 8px;height:30px;border-radius:999px;color:var(--muted);font-size:10px;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);background:color-mix(in srgb,var(--soft) 65%,transparent)}
.liquid-badge i{width:6px;height:6px;border-radius:50%;background:var(--accent2);box-shadow:0 0 12px var(--accent2)}
.liquid-badge[data-state="fallback"] i{background:var(--warn);box-shadow:none}

@media(min-width:761px){.topbar{padding-right:min(440px,42vw)}}
.provider-model-hint{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.4}
.hf-model-note{margin-top:12px;padding:10px 12px;border:1px solid rgba(255,197,86,.18);border-radius:12px;background:rgba(255,197,86,.055);color:var(--muted);font-size:11px;line-height:1.5}
@media(max-width:900px){.liquid-badge{display:none}.liquid-dock .theme-label{display:none}.liquid-dock .theme-toggle{width:38px;padding:8px;justify-content:center}}
@media(max-width:760px){.liquid-dock{top:8px;right:8px;left:8px;border-radius:18px}.liquid-dock .liquid-content{justify-content:flex-end;padding:6px}.liquid-dock .top-actions{margin-right:auto}.liquid-dock .top-actions button{font-size:11px;padding:8px 9px;min-height:36px}.topbar{padding-top:62px}}
@media(max-width:430px){.liquid-dock .top-actions #newChatBtn{display:none}.liquid-dock .top-actions button{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}