@charset "UTF-8";
@import url('/feedback.css');

:root {
  color-scheme: dark;
  --background: #111112;
  --sidebar: #151516;
  --surface: #1b1a1c;
  --text: #f2e5d5;
  --muted: #aaa099;
  --accent: #ec1635;
  --workspace-rgb: 236, 22, 53;
  --border: #302b2c;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; color: var(--text); background: var(--background); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
svg { display: block; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10; padding: 12px 16px; background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.sidebar { width: 252px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 32px 18px 24px; background: var(--sidebar); border-right: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 40px; }
.brand-symbol { display: block; width: 44px; height: 44px; flex: none; object-fit: contain; }
.brand-copy { min-width: 0; }
.brand strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.6px; white-space: nowrap; }
.brand small { display: block; margin-top: 5px; font-size: 8px; font-weight: 500; letter-spacing: 1.65px; color: var(--muted); }
.nav-title { padding: 0 14px; margin-bottom: 16px; font-size: 9px; font-weight: 650; letter-spacing: 1.75px; color: var(--muted); }
.side-nav { display: grid; gap: 7px; }
.side-nav[hidden] { display: none; }
.navigation-header { display: contents; }
.navigation-toggle { display: none; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: 600 13px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.navigation-toggle-icon { font-size: 19px; line-height: 1; }
.navigation-toggle[aria-expanded="true"] { border-color: var(--accent); background: rgba(var(--workspace-rgb), .14); }
.navigation-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.side-nav a { display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 13px 14px; border: 1px solid transparent; border-radius: 11px; font-size: 13px; font-weight: 600; transition: background .16s ease-out; }
.side-nav a.active { color: var(--text); background: linear-gradient(100deg, rgba(var(--workspace-rgb), .15), rgba(var(--workspace-rgb), .07)); border-color: rgba(var(--workspace-rgb), .31); }
.side-nav a:hover { background: rgba(var(--workspace-rgb), .18); }
.nav-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-dot { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--accent); }
.main { display: flex; flex-direction: column; width: calc(100% - 252px); min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 73px; padding: 16px 42px; border-bottom: 1px solid var(--border); background: var(--sidebar); }
.breadcrumb { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--muted); font-size: 11px; }
.breadcrumb-separator { color: #655650; }
.breadcrumb h1 { margin: 0; color: var(--text); font-size: inherit; font-weight: 650; }
.server-status { display: flex; align-items: center; gap: 9px; flex-shrink: 0; color: var(--muted); font-size: 11px; }
.status-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--muted); }
.server-status[data-ready="true"] .status-dot { background: #69ce9a; box-shadow: 0 0 0 4px #69ce9a15; }
.server-status[data-ready="false"] .status-dot { background: var(--accent); box-shadow: 0 0 0 4px #ec163515; }
.content { flex: 1; min-height: 0; padding: 30px 42px; }
.content:focus { outline: none; }

:root[data-workspace="atr"] { --accent: #c4a484; --workspace-rgb: 196, 164, 132; }
:root { --workspace-bar-height: calc(72px + env(safe-area-inset-top, 0px)); }
.workspace-bar { position:sticky; top:0; z-index:6; height:var(--workspace-bar-height); padding:calc(10px + env(safe-area-inset-top, 0px)) 24px 0; background:#121214; border-bottom:1px solid var(--border); }
.workspace-tabs { display:flex; gap:8px; height:100%; max-width:640px; margin:0 auto; }
.workspace-tab { --tab-rgb:236, 22, 53; position:relative; display:flex; align-items:center; gap:12px; flex:1; min-width:0; padding:10px 24px 12px; border:1px solid transparent; border-bottom:0; border-radius:12px 12px 0 0; color:var(--muted); background:transparent; font:inherit; text-align:left; cursor:pointer; transition:background .16s, color .16s; }
.workspace-tab[data-workspace="atr"] { --tab-rgb:196, 164, 132; }
.workspace-tab:hover { background:rgba(var(--tab-rgb), .07); color:var(--text); }
.workspace-tab[aria-selected="true"] { color:var(--text); border-color:rgba(var(--tab-rgb), .25); background:linear-gradient(180deg, rgba(var(--tab-rgb), .14), rgba(var(--tab-rgb), .04)); }
.workspace-tab::after { content:''; position:absolute; bottom:-1px; left:20px; right:20px; height:3px; border-radius:3px 3px 0 0; background:rgba(var(--tab-rgb), .25); }
.workspace-tab[aria-selected="true"]::after { background:rgb(var(--tab-rgb)); box-shadow:0 -3px 16px rgba(var(--tab-rgb), .3); }
.workspace-tab:focus-visible { outline:2px solid rgb(var(--tab-rgb)); outline-offset:-4px; }
.workspace-marker { width:10px; height:10px; border-radius:3px; background:rgb(var(--tab-rgb)); flex:none; }
.workspace-tab-copy { display:grid; gap:4px; min-width:0; }
.workspace-tab strong { font-size:13px; font-weight:650; white-space:nowrap; }
.workspace-tab small { color:var(--muted); font-size:10px; white-space:nowrap; }
body:has(.workspace-bar) .app-shell { min-height:calc(100vh - var(--workspace-bar-height)); min-height:calc(100dvh - var(--workspace-bar-height)); }
body:has(.workspace-bar) .sidebar { top:var(--workspace-bar-height); height:calc(100vh - var(--workspace-bar-height)); height:calc(100dvh - var(--workspace-bar-height)); }
@media (max-width:760px) {
  .workspace-bar { padding-inline:12px; }
  .workspace-tabs { gap:6px; }
  .workspace-tab { padding-inline:14px; gap:9px; }
  .workspace-tab::after { left:12px; right:12px; }
  body:has(.workspace-bar) .sidebar { height:auto; }
}
@media (prefers-reduced-motion:reduce) { .workspace-tab { transition:none; } }

@media (max-width: 900px) {
  .topbar { padding: 16px 24px; }
  .content { padding: 24px; }
}
@media (max-width: 700px) {
  .app-shell { flex-direction: column; }
  .sidebar { position: static; width: 100%; height: auto; padding: 20px 18px 16px; border-right: 0; border-bottom: 1px solid var(--border); }
  .brand { padding: 0 4px 20px; }
  .nav-title { display: none; }
  .side-nav a { min-height: 44px; padding: 11px 14px; }
  .main { width: 100%; flex: 1; }
  .topbar { min-height: 64px; padding: 16px 22px; gap: 16px; flex-wrap: wrap; }
  .breadcrumb { font-size: 11px; }
  .server-status { font-size: 10px; }
  .content { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .side-nav a { transition: none; }
}

/* Installed mobile application: native-like pull-to-refresh indicator. */
html.studio-pull-refresh-enabled { overscroll-behavior-y: contain; }
.pull-refresh-indicator {
  position: fixed;
  z-index: 1050;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid rgba(var(--workspace-rgb), .48);
  border-radius: 999px;
  background: #211d23;
  box-shadow: 0 10px 30px #0009;
  color: var(--text);
  font: 600 13px/1.4 "Segoe UI", system-ui, sans-serif;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -135%);
  transition: transform .16s ease-out, opacity .16s ease-out;
}
.pull-refresh-indicator[data-active="true"] { transform: translate(-50%, 0); opacity: 1; }
.pull-refresh-indicator[data-ready="true"] { border-color: rgb(var(--workspace-rgb)); }
.pull-refresh-icon { display: inline-block; color: rgb(var(--workspace-rgb)); font-size: 22px; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
  .pull-refresh-indicator { transition: none; }
}


#saved-key-value { width: 100%; box-sizing: border-box; overflow-wrap: anywhere; resize: vertical; }
#agent-key-library button { min-height: 44px; padding: 9px 14px; border: 1px solid #493337; border-radius: 10px; background: #261f20; color: #e8dcd0; cursor: pointer; }
#agent-key-library button:disabled { opacity: .5; cursor: default; }
#saved-key-value { padding: 12px; border: 1px solid #493337; border-radius: 10px; background: #151314; color: #e8dcd0; font-size: 16px; }