/* =====================================================================
   The colourful glass on Chat, Genexts Build and Studio (Nov 2026): the Agent page's colour, a + menu in
   the chat box and the model selector beside the send button.
   Loaded after rail.css; remove the <link> to go back to the plain look.
   ===================================================================== */
html[data-theme] :is(#chat-view, #canvas-view, #studio-view) { position: relative; isolation: isolate; --chat-glass: rgba(255, 255, 255, 0.07); --chat-glass-2: rgba(255, 255, 255, 0.11); --chat-edge: rgba(255, 255, 255, 0.14); }
html[data-theme="light"] :is(#chat-view, #canvas-view, #studio-view) { --chat-glass: rgba(255, 255, 255, 0.55); --chat-glass-2: rgba(255, 255, 255, 0.72); --chat-edge: rgba(20, 24, 32, 0.12); }
html[data-theme] :is(#chat-view, #canvas-view, #studio-view)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.42;
  background:
    radial-gradient(34% 40% at 14% 16%, #2dd4bf, transparent 72%),
    radial-gradient(34% 42% at 86% 14%, #818cf8, transparent 72%),
    radial-gradient(32% 38% at 18% 92%, #f59e0b, transparent 72%),
    radial-gradient(36% 42% at 84% 90%, #ec4899, transparent 72%);
  filter: blur(40px) saturate(130%);
}
html[data-theme="light"] :is(#chat-view, #canvas-view, #studio-view)::before { opacity: 0.32; }
html[data-theme] :is(#chat-view, #canvas-view) :is(.chat-shell, .chat-body, .cv-shell, .cv-layout, .cv-main, .cv-thread) { background: transparent !important; }
html[data-theme] :is(#chat-view, #canvas-view) .chat-suggestion {
  background: var(--chat-glass) !important; border: 1px solid var(--chat-edge) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
html[data-theme] :is(#chat-view, #canvas-view) .chat-suggestion:hover { background: var(--chat-glass-2) !important; }
html[data-theme] :is(#chat-view, #canvas-view) .chat-header {
  background: var(--chat-glass) !important; border-bottom: 1px solid var(--chat-edge) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
}

/* The chat box */
html[data-theme] :is(#chat-view, #canvas-view) .chat-composer {
  position: relative; align-items: center; gap: 6px; min-height: 58px; padding: 8px 8px 8px 10px;
  border-radius: 28px !important; border: 1px solid var(--chat-edge) !important;
  background: linear-gradient(135deg, var(--chat-glass-2), var(--chat-glass)) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 16px 44px -22px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
:is(#chat-view, #canvas-view) .chat-composer .chat-hidden-tools { display: none !important; }
:is(#chat-view, #canvas-view) .chat-composer #chat-input { flex: 1 1 120px; min-width: 60px; }

/* + and its menu */
:is(#chat-view, #canvas-view, #main-view) .chat-plus-wrap { position: relative; flex: none; }
:is(#chat-view, #canvas-view, #main-view) .chat-plus {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--chat-glass-2); color: var(--r-text, inherit); cursor: pointer; transition: background 0.15s, transform 0.15s;
}
:is(#chat-view, #canvas-view, #main-view) .chat-plus:hover { background: var(--chat-edge); }
:is(#chat-view, #canvas-view, #main-view) .chat-plus[aria-expanded="true"] { transform: rotate(45deg); }
:is(#chat-view, #canvas-view, #main-view) .chat-plus-menu {
  position: absolute; left: 0; bottom: calc(100% + 14px); z-index: 30; width: 250px; padding: 8px;
  border-radius: 20px; border: 1px solid var(--chat-edge); color: var(--r-text, inherit);
  background: color-mix(in srgb, var(--r-surface, #1b1e24) 97%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  box-shadow: 0 22px 60px -20px rgba(0, 0, 0, 0.7);
}
:is(#chat-view, #canvas-view, #main-view) .chat-plus-menu[hidden] { display: none; }
:is(#chat-view, #canvas-view, #main-view) .chat-plus-menu button {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 14px; padding: 8px 14px; border: 0; border-radius: 12px;
  background: transparent; color: inherit; font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
:is(#chat-view, #canvas-view, #main-view) .chat-plus-menu button:hover, :is(#chat-view, #canvas-view, #main-view) .chat-plus-menu button:focus-visible { background: var(--chat-glass-2); outline: none; }
:is(#chat-view, #canvas-view, #main-view) .chat-plus-menu button svg { flex: none; }
:is(#chat-view, #canvas-view, #main-view) .chat-plus-menu button span { flex: 1; }
:is(#chat-view, #canvas-view, #main-view) .chat-plus-check { display: none; font-style: normal; color: var(--r-accent-text, #2dd4bf); }
:is(#chat-view, #canvas-view, #main-view) .chat-plus-menu button[aria-checked="true"] .chat-plus-check { display: inline; }

/* Tools that are on, shown as small chips */
:is(#chat-view, #canvas-view, #main-view) .chat-tool-chips { display: flex; flex: none; gap: 4px; }
:is(#chat-view, #canvas-view, #main-view) .chat-tool-chips:empty { display: none; }
:is(#chat-view, #canvas-view, #main-view) .chat-tool-chip {
  min-height: 32px; padding: 4px 10px; border: 0; border-radius: 999px; white-space: nowrap; cursor: pointer; font: inherit; font-size: 12.5px;
  background: var(--r-accent-soft, rgba(45, 212, 191, 0.16)); color: var(--r-accent-text, #2dd4bf);
}

/* The model selector, in the chat box */
:is(#chat-view, #canvas-view) .chat-composer #chat-model-picker { flex: 0 1 auto; min-width: 0; }
html[data-theme] :is(#chat-view, #canvas-view) .chat-composer .mp-btn {
  max-width: 230px; min-height: 40px; padding: 6px 10px !important; border: 0 !important; border-radius: 999px !important;
  background: transparent !important; box-shadow: none !important;
}
html[data-theme] :is(#chat-view, #canvas-view) .chat-composer .mp-btn:hover,
html[data-theme] :is(#chat-view, #canvas-view) .chat-composer .mp-btn[aria-expanded="true"] { background: var(--chat-glass-2) !important; }

/* The Genexts Pro bar and the starter cards get the same glass */
html[data-theme] :is(#chat-view, #canvas-view) .pro-levels, html[data-theme] :is(#chat-view, #canvas-view) .pro-private, html[data-theme] :is(#chat-view, #canvas-view) .pro-saved {
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}

/* Phones: the selector shows the model's name only, so the typing space stays */
@media (max-width: 768px) {
  html[data-theme] :is(#chat-view, #canvas-view, #studio-view)::before {
    filter: blur(28px);
    background:
      radial-gradient(70% 34% at 8% 10%, #2dd4bf, transparent 72%),
      radial-gradient(70% 34% at 92% 12%, #818cf8, transparent 72%),
      radial-gradient(70% 30% at 8% 92%, #f59e0b, transparent 72%),
      radial-gradient(70% 30% at 92% 90%, #ec4899, transparent 72%);
  }
  html[data-theme] :is(#chat-view, #canvas-view) .chat-composer .mp-badge { display: none; }
  html[data-theme] :is(#chat-view, #canvas-view) .chat-composer { flex-wrap: wrap; padding: 8px; border-radius: 24px !important; }
  :is(#chat-view, #canvas-view) .chat-composer #chat-input { flex: 1 1 calc(100% - 60px); order: 0; font-size: 16px; }
  :is(#chat-view, #canvas-view) .chat-composer #chat-model-picker { order: 2; flex: 1 1 auto; }
  :is(#chat-view, #canvas-view, #main-view) .chat-tool-chips { order: 1; width: 100%; overflow-x: auto; }
  :is(#chat-view, #canvas-view) .chat-composer .chat-send { order: 3; margin-left: auto; }
  html[data-theme] :is(#chat-view, #canvas-view) .chat-composer .mp-btn { max-width: 200px; }
  :is(#chat-view, #canvas-view, #main-view) .chat-plus-menu { width: min(250px, calc(100vw - 48px)); }
}

/* Genexts Build only */
html[data-theme] #canvas-view .cv-roster-item {
  background: var(--chat-glass) !important; border: 1px solid var(--chat-edge) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
html[data-theme] #canvas-view .cv-panel {
  background: color-mix(in srgb, var(--r-surface, #1b1e24) 88%, transparent) !important; border: 1px solid var(--chat-edge) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
}
html[data-theme] #canvas-view .chat-composer #cv-input { flex: 1 1 120px; min-width: 60px; align-self: center; }
#canvas-view .chat-composer .mp { position: relative; flex: 0 1 auto; min-width: 0; }
/* Its model list opens upwards now that it's in the chat box */
#canvas-view .chat-composer .mp-pop { top: auto; bottom: calc(100% + 14px); right: 0; }
@media (max-width: 768px) {
  html[data-theme] #canvas-view .chat-composer #cv-input { flex: 1 1 calc(100% - 60px); font-size: 16px; }
  html[data-theme] #canvas-view .chat-composer .mp { order: 2; flex: 1 1 auto; }
  html[data-theme] #canvas-view .chat-composer .mp-btn { width: auto; justify-content: flex-start; }
  #canvas-view .chat-composer .mp-pop { right: auto; left: 0; }
  /* The selector left the top bar, so it fits on one line */
  html[data-theme] #canvas-view .chat-header { flex-wrap: nowrap !important; }
  html[data-theme] #canvas-view .chat-header-left { flex: 1 1 auto; min-width: 0; }
  html[data-theme] #canvas-view .chat-header-actions { flex: 0 0 auto; margin-left: 0; }
  #canvas-view .chat-composer .chat-send { order: 3; margin-left: auto; }
}

/* Studio only */
html[data-theme] #studio-view :is(.app-container, .gd-host, #studio-root) { background: transparent !important; }
html[data-theme] #studio-view :is(.st-svc, .st-points li, .st-model, .st-make, .st-item, .st-seg, .st-search, .st-empty, .st-connect) {
  background: linear-gradient(135deg, var(--chat-glass-2), var(--chat-glass)) !important; border-color: var(--chat-edge) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
}
html[data-theme] #studio-view :is(.st-svc.on, .st-model.on) { border-color: var(--r-accent-text, #2dd4bf) !important; box-shadow: inset 0 0 0 1px var(--r-accent-text, #2dd4bf); }
html[data-theme] #studio-view .st-make textarea, html[data-theme] #studio-view .st-opts select { background: var(--chat-glass) !important; border-color: var(--chat-edge) !important; }
html[data-theme] #studio-view .st-seg button.on { background: var(--chat-glass-2) !important; }
/* Phones: keep the page's first line clear of the menu button */
@media (max-width: 768px) { #studio-view .st-wrap { padding-top: 68px; } }

/* The + on Home */
#main-view .home-composer { padding-left: 0.5rem !important; }
#main-view .chat-plus-menu { text-align: left; }
@media (max-width: 480px) { #main-view .home-composer { flex-wrap: wrap; } #main-view .chat-tool-chips { order: 3; width: 100%; } }