/*
 * CODE / FunTech editorial shell
 * Presentation-only overrides. Do not change the PIXI stage or canvas geometry.
 */

html.code-funtech-shell {
  --code-ivory: #f4f1e8;
  --code-paper: #ebe7dc;
  --code-ink: #1e1e1a;
  --code-muted: #767269;
  --code-line: rgba(30, 30, 26, .17);
  --code-brass: #9d8150;
  --code-signal: #d8bd68;
  color-scheme: light;
  background: var(--code-ivory);
}

html.code-funtech-shell body {
  background: var(--code-ivory);
  color: var(--code-ink);
}

/* Preserve all layout measurements while replacing the visual language. */
html.code-funtech-shell .app-root {
  --bg: var(--code-ivory);
  --bg-deep: var(--code-paper);
  --panel: rgba(244, 241, 232, .92);
  --panel-strong: rgba(235, 231, 220, .96);
  --panel-soft: rgba(30, 30, 26, .035);
  --panel-elevated: rgba(255, 255, 255, .55);
  --border: var(--code-line);
  --border-strong: rgba(30, 30, 26, .32);
  --text: var(--code-ink);
  --muted: var(--code-muted);
  --muted-2: #918c82;
  --accent: var(--code-brass);
  --accent-strong: #6d552e;
  --accent-2: var(--code-signal);
  --shadow: 0 18px 52px rgba(39, 35, 27, .12);
  --shadow-soft: 0 12px 30px rgba(39, 35, 27, .08);
  --ring: 0 0 0 1px var(--code-line);
  background: var(--code-ivory);
}

html.code-funtech-shell .main-shell {
  background-color: var(--code-ivory);
}

html.code-funtech-shell .top-header {
  min-height: 82px;
  padding-inline: clamp(18px, 2.1vw, 40px);
  border: 0;
  border-bottom: 1px solid var(--code-ink);
  background: rgba(244, 241, 232, .96);
  box-shadow: none;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

html.code-funtech-shell .top-header h1,
html.code-funtech-shell .top-header h2 {
  color: var(--code-ink);
  font-weight: 800;
  letter-spacing: -.055em;
}

html.code-funtech-shell .top-header button,
html.code-funtech-shell .history-toggle {
  border: 1px solid var(--code-line);
  border-radius: 3px;
  background: rgba(255, 255, 255, .34);
  color: var(--code-ink);
  box-shadow: none;
}

html.code-funtech-shell .top-header button:hover,
html.code-funtech-shell .history-toggle:hover {
  border-color: var(--code-ink);
  background: var(--code-ink);
  color: var(--code-ivory);
  transform: translateY(-2px);
}

html.code-funtech-shell .workspace {
  isolation: isolate;
  background-color: var(--code-ivory);
  background-image:
    linear-gradient(var(--code-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--code-line) 1px, transparent 1px);
  background-size: 100% 25%, 25% 100%;
}

html.code-funtech-shell .workspace::after {
  content: "RESTRICTED / INTERNAL EYES ONLY";
  position: absolute;
  z-index: 2;
  top: 28px;
  right: 17px;
  color: rgba(30, 30, 26, .22);
  writing-mode: vertical-rl;
  font: 600 9px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .34em;
  pointer-events: none;
}

html.code-funtech-shell .chat-sidebar {
  margin: 14px 0 14px 14px;
  padding: 18px;
  border: 1px solid var(--code-line);
  border-radius: 4px;
  background: rgba(244, 241, 232, .94);
  box-shadow: 18px 0 50px rgba(39, 35, 27, .06);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

html.code-funtech-shell .chat-sidebar-brand {
  position: relative;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--code-line);
}

html.code-funtech-shell .chat-sidebar-brand h2,
html.code-funtech-shell .chat-sidebar-brand strong {
  font-weight: 800;
  letter-spacing: .18em;
}

html.code-funtech-shell .chat-sidebar select,
html.code-funtech-shell .chat-sidebar button,
html.code-funtech-shell .chat-sidebar-new,
html.code-funtech-shell .chat-session-card {
  border-radius: 3px;
}

html.code-funtech-shell .chat-sidebar select {
  border: 1px solid var(--code-line);
  background: rgba(255, 255, 255, .48);
  color: var(--code-ink);
}

html.code-funtech-shell .chat-sidebar-new {
  position: relative;
  min-height: 94px;
  padding: 15px 16px;
  border: 1px solid var(--code-line);
  background: rgba(255, 255, 255, .32);
  color: var(--code-ink);
  box-shadow: none;
  transition: color .22s ease, background-color .22s ease, border-color .22s ease;
}

html.code-funtech-shell .chat-sidebar-new::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 15px;
  width: 42px;
  height: 2px;
  background: var(--code-brass);
}

html.code-funtech-shell .chat-sidebar-new:hover {
  border-color: var(--code-ink);
  background: var(--code-ink);
  color: var(--code-ivory);
}

html.code-funtech-shell .chat-session-card {
  border: 1px solid var(--code-line);
  background: rgba(255, 255, 255, .28);
  box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

html.code-funtech-shell .chat-session-card:hover {
  border-color: rgba(157, 129, 80, .55);
  background: rgba(255, 255, 255, .7);
  transform: translateX(3px);
}

html.code-funtech-shell .chat-session-card.active,
html.code-funtech-shell .chat-session-card[aria-current="true"] {
  border-color: var(--code-brass);
  background: #fffdf7;
}

/* Stage decoration is layered above the background and below all controls. */
html.code-funtech-shell .code-stage-chrome {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

html.code-funtech-shell .code-stage-index {
  position: absolute;
  left: clamp(18px, 3.2vw, 58px);
  top: clamp(24px, 6vh, 72px);
  display: grid;
  justify-items: start;
  gap: .03em;
  width: 34%;
  overflow: hidden;
  color: rgba(30,30,26,.065);
  font: 900 clamp(48px,7vw,116px)/.76 "Arial Narrow","Segoe UI",sans-serif;
  letter-spacing: -.075em;
  white-space: nowrap;
}

html.code-funtech-shell .code-stage-index b {
  font: inherit;
  letter-spacing: inherit;
}

html.code-funtech-shell .code-stage-index em {
  margin-left: .08em;
  color: rgba(30,30,26,.14);
  font: 300 .48em/1 ui-monospace,"SFMono-Regular",Consolas,monospace;
  letter-spacing: -.04em;
  font-style: normal;
}

html.code-funtech-shell .code-stage-caption {
  position: absolute;
  left: clamp(20px, 3.5vw, 64px);
  bottom: 22px;
  display: flex;
  gap: 18px;
  align-items: center;
  color: rgba(30, 30, 26, .42);
  font: 600 9px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .24em;
}

html.code-funtech-shell .code-stage-caption::before {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--code-brass);
}

html.code-funtech-shell .code-scanline {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 14%;
  height: 1px;
  background: rgba(157, 129, 80, .3);
  opacity: 0;
  animation: code-stage-scan 7s cubic-bezier(.22, .7, .2, 1) 1.1s infinite;
}

/* Product stage is character-first; legacy engineering identity belongs only
   to the developer surface and must not cover the avatar composition. */
html.code-funtech-shell .live2d-stage-header,
html.code-funtech-shell .stage-hero-card {
  display: none !important;
}

/* This diagnostic card is developer-facing; retain its data in the DOM. */
html.code-funtech-shell .live2d-runtime-status {
  display: none !important;
}

html.code-funtech-shell .chat-input-shell {
  border: 1px solid rgba(30, 30, 26, .24);
  border-radius: 4px;
  background: rgba(244, 241, 232, .9);
  color: var(--code-ink);
  box-shadow: 0 18px 48px rgba(39, 35, 27, .11);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

html.code-funtech-shell .chat-input-shell::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 1px;
  background: var(--code-brass);
  transform: scaleX(.12);
  transform-origin: left;
  transition: transform .36s cubic-bezier(.22, .8, .2, 1);
}

html.code-funtech-shell .chat-input-shell:focus-within::before {
  transform: scaleX(1);
}

html.code-funtech-shell .chat-input-shell textarea,
html.code-funtech-shell .chat-input-shell input {
  color: var(--code-ink);
}

html.code-funtech-shell .chat-send-fab {
  border: 1px solid var(--code-ink);
  border-radius: 3px;
  background: var(--code-ink);
  color: var(--code-ivory);
  box-shadow: none;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

html.code-funtech-shell .chat-send-fab:hover {
  background: var(--code-signal);
  color: var(--code-ink);
  transform: translate(2px, -2px);
}

html.code-funtech-shell .right-drawer {
  border: 1px solid var(--code-line);
  border-radius: 4px;
  background: rgba(244, 241, 232, .97);
  color: var(--code-ink);
  box-shadow: -20px 0 54px rgba(39, 35, 27, .12);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  animation: code-drawer-in .42s cubic-bezier(.22, .8, .2, 1) both;
}

html.code-funtech-shell .right-drawer button,
html.code-funtech-shell .right-drawer input,
html.code-funtech-shell .right-drawer select {
  border-radius: 3px;
}

html.code-funtech-shell.code-shell-ready .top-header {
  animation: code-reveal-down .55s cubic-bezier(.22, .8, .2, 1) both;
}

html.code-funtech-shell.code-shell-ready .chat-sidebar {
  animation: code-reveal-left .62s cubic-bezier(.22, .8, .2, 1) .08s both;
}

html.code-funtech-shell.code-shell-ready .chat-input-shell {
  animation: code-reveal-up .62s cubic-bezier(.22, .8, .2, 1) .16s both;
}

/* CODE identity architecture v2 — FunTech-inspired, content-preserving. */
html.code-funtech-shell .top-header {
  min-height: 92px;
  padding: 0 clamp(16px, 2.2vw, 42px) 0 clamp(22px, 3vw, 58px);
  color: var(--code-ink);
  background:
    linear-gradient(90deg, var(--code-ink) 0 8px, var(--code-signal) 8px 12px, transparent 12px),
    rgba(244,241,232,.98);
}

html.code-funtech-shell .top-header::before {
  content: "IDENTITY / COMMUNICATION / ARCHIVE";
  position: absolute;
  right: clamp(18px,2.2vw,40px);
  bottom: 7px;
  color: rgba(30,30,26,.38);
  font: 700 7px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .24em;
  pointer-events: none;
}

html.code-funtech-shell .top-header-main {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-template-areas:
    "kicker kicker kicker"
    "title pills subtitle";
  align-items: center;
  column-gap: 18px;
  row-gap: 4px;
}

html.code-funtech-shell .top-kicker {
  grid-area: kicker;
  color: #806e4c;
  font: 700 8px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .22em;
}

html.code-funtech-shell .top-title-row { grid-area: title; }
html.code-funtech-shell .top-title {
  color: var(--code-ink);
  font-size: clamp(26px,2.3vw,38px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.06em;
}

html.code-funtech-shell .top-header-pills { grid-area: pills; }
html.code-funtech-shell .top-info-pill {
  min-height: 30px;
  padding: 0 13px;
  border: 1px solid var(--code-line);
  border-radius: 0;
  background: transparent;
  color: var(--code-ink);
  font: 700 7px/28px ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .17em;
}

html.code-funtech-shell .top-subtitle {
  grid-area: subtitle;
  align-self: end;
  padding-bottom: 2px;
  color: var(--code-muted);
}

html.code-funtech-shell .top-header-actions {
  align-self: center;
  padding-bottom: 9px;
}

html.code-funtech-shell .top-header button,
html.code-funtech-shell .history-toggle {
  min-height: 46px;
  padding-inline: 18px;
  border-radius: 0;
}

html.code-funtech-shell .top-header .world-entry-btn {
  border-color: var(--code-ink);
  background: var(--code-ink);
  color: var(--code-ivory);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) {
  position: relative;
  margin: 0;
  padding: 26px 22px 20px 30px;
  border: 0;
  border-right: 1px solid rgba(216,189,104,.34);
  border-radius: 0;
  color: var(--code-ivory);
  background:
    linear-gradient(135deg,rgba(255,255,255,.035),transparent 38%),
    var(--code-ink);
  box-shadow: 22px 0 48px rgba(30,30,26,.12);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed)::before {
  content: "SECURE / AVATAR";
  position: absolute;
  inset: 0 auto 0 0;
  width: 14px;
  padding-top: 18px;
  color: var(--code-ink);
  background: var(--code-signal);
  font: 800 7px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .14em;
  text-align: center;
  writing-mode: vertical-rl;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-brand {
  padding-bottom: 20px;
  border-color: rgba(244,241,232,.18);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-logo {
  color: var(--code-ivory);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .18em;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-subtitle,
html.code-funtech-shell .chat-sidebar:not(.collapsed) .agent-avatar-label {
  color: #d8bd68;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-helper,
html.code-funtech-shell .chat-sidebar:not(.collapsed) .agent-avatar-picker small,
html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-new small {
  color: rgba(244,241,232,.52);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-toggle {
  border-color: rgba(244,241,232,.28);
  background: transparent;
  color: var(--code-ivory);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .agent-avatar-picker {
  padding: 16px 0 18px;
  border-color: rgba(244,241,232,.16);
  background: transparent;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) select {
  min-height: 50px;
  border-color: rgba(244,241,232,.28);
  border-radius: 0;
  background: #292824;
  color: var(--code-ivory);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) select:focus-visible {
  border-color: var(--code-signal);
  outline: 2px solid var(--code-signal);
  outline-offset: 2px;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-new {
  min-height: 82px;
  border-color: var(--code-signal);
  border-radius: 0;
  color: var(--code-ivory);
  background: transparent;
  clip-path: polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-new:hover {
  background: var(--code-signal);
  color: var(--code-ink);
  transform: translate(-2px,-2px);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-session-card {
  min-height: 82px;
  border-color: rgba(244,241,232,.15);
  border-radius: 0;
  background: rgba(255,255,255,.035);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-session-card:hover {
  border-color: var(--code-brass);
  background: rgba(255,255,255,.075);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-session-card.active,
html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-session-card[aria-current="true"] {
  border-color: var(--code-signal);
  background: var(--code-ivory);
  color: var(--code-ink);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-clear {
  min-height: 44px;
  border-color: rgba(244,241,232,.25);
  border-radius: 0;
  background: transparent;
  color: var(--code-ivory);
}

html.code-funtech-shell .chat-sidebar.collapsed {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html.code-funtech-shell .chat-sidebar.collapsed .chat-sidebar-collapsed-button {
  border-radius: 0 20px 20px 0;
  background: var(--code-ink);
  color: var(--code-ivory);
}

/* Header controls v3: quiet identity bar, explicit destinations. */
html.code-funtech-shell .top-header {
  min-height: 104px;
  padding-left: clamp(30px,3.7vw,70px);
  overflow: hidden;
}

html.code-funtech-shell .top-header::before {
  content: "AUTHORIZED TERMINAL / 07";
  top: auto;
  right: clamp(18px,2.1vw,38px);
  bottom: 8px;
  color: rgba(30,30,26,.38);
  writing-mode: horizontal-tb;
}

html.code-funtech-shell .top-header::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--code-ink);
  box-shadow: 5px 0 0 var(--code-signal);
}

html.code-funtech-shell .top-header-main {
  grid-template-columns: max-content max-content minmax(200px,1fr);
  column-gap: clamp(16px,2vw,34px);
}

html.code-funtech-shell .top-kicker {
  max-width: none;
  white-space: nowrap;
}

html.code-funtech-shell .top-title {
  font-size: clamp(32px,2.6vw,44px);
}

html.code-funtech-shell .top-subtitle {
  max-width: 58ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.code-funtech-shell .top-header-actions {
  display: grid;
  grid-template-columns: 126px 154px;
  gap: 8px;
  padding-bottom: 12px;
}

html.code-funtech-shell .top-header .history-toggle,
html.code-funtech-shell .top-header .world-entry-btn {
  position: relative;
  justify-content: flex-start;
  min-height: 54px;
  padding: 19px 38px 8px 14px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .04em;
  text-align: left;
  clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
}

html.code-funtech-shell .top-header .history-toggle::before,
html.code-funtech-shell .top-header .world-entry-btn::before {
  position: absolute;
  top: 8px;
  left: 14px;
  font: 700 7px/1 ui-monospace,"SFMono-Regular",Consolas,monospace;
  letter-spacing: .16em;
  opacity: .55;
}

html.code-funtech-shell .top-header .history-toggle::before { content: "ARCHIVE / 01"; }
html.code-funtech-shell .top-header .world-entry-btn::before { content: "TRANSFER / 02"; }

html.code-funtech-shell .top-header .history-toggle::after,
html.code-funtech-shell .top-header .world-entry-btn::after {
  content: "↗";
  position: absolute;
  right: 13px;
  bottom: 11px;
  font-size: 14px;
  transition: transform .2s ease;
}

html.code-funtech-shell .top-header .history-toggle:hover::after,
html.code-funtech-shell .top-header .world-entry-btn:hover::after {
  transform: translate(3px,-3px);
}

html.code-funtech-shell .top-header .history-toggle {
  border-color: rgba(30,30,26,.38);
  background: transparent;
}

html.code-funtech-shell .top-header .history-toggle[aria-expanded="true"] {
  border-color: var(--code-signal);
  background: var(--code-signal);
  color: var(--code-ink);
}

html.code-funtech-shell .top-header .world-entry-btn {
  border-color: var(--code-ink);
  background: var(--code-ink);
  color: var(--code-ivory);
}

html.code-funtech-shell .top-header .world-entry-btn:hover {
  border-color: var(--code-signal);
  background: var(--code-signal);
  color: var(--code-ink);
}

html.code-funtech-shell .chat-sidebar.collapsed .chat-sidebar-collapsed-button {
  position: relative;
  width: 48px;
  height: 166px;
  padding: 15px 8px;
  border: 1px solid rgba(30,30,26,.16);
  border-left: 0;
  border-radius: 0 22px 22px 0;
  background: var(--code-ink);
  color: var(--code-ivory);
  box-shadow: 12px 16px 28px rgba(30,30,26,.14);
  transition: transform .24s cubic-bezier(.22,.8,.2,1),background-color .2s ease,color .2s ease;
}

html.code-funtech-shell .chat-sidebar.collapsed .chat-sidebar-collapsed-button::before {
  content: "OPEN";
  position: absolute;
  top: 10px;
  left: 50%;
  color: var(--code-signal);
  font: 800 6px/1 ui-monospace,"SFMono-Regular",Consolas,monospace;
  letter-spacing: .14em;
  transform: translateX(-50%);
}

html.code-funtech-shell .chat-sidebar.collapsed .chat-sidebar-collapsed-button:hover,
html.code-funtech-shell .chat-sidebar.collapsed .chat-sidebar-collapsed-button:focus-visible {
  transform: translateX(4px);
  outline: none;
  background: var(--code-signal);
  color: var(--code-ink);
}

html.code-funtech-shell .chat-sidebar.collapsed .chat-sidebar-collapsed-button:hover::before,
html.code-funtech-shell .chat-sidebar.collapsed .chat-sidebar-collapsed-button:focus-visible::before {
  color: var(--code-ink);
}

@media (max-width: 1080px) {
  html.code-funtech-shell .top-header { min-height: 86px; }
  html.code-funtech-shell .top-header-main { grid-template-columns: max-content 1fr; }
  html.code-funtech-shell .top-header-pills,
  html.code-funtech-shell .top-subtitle { display: none; }
  html.code-funtech-shell .top-header-actions { grid-template-columns: 112px 138px; }
}

@media (max-width: 680px) {
  html.code-funtech-shell .top-header { min-height: 72px; padding: 0 8px 0 24px; }
  html.code-funtech-shell .top-kicker { display: none; }
  html.code-funtech-shell .top-title { font-size: 22px; }
  html.code-funtech-shell .top-header-actions { grid-template-columns: 48px 92px; gap: 5px; padding: 0; }
  html.code-funtech-shell .top-header .history-toggle,
  html.code-funtech-shell .top-header .world-entry-btn { min-height: 42px; padding: 13px 6px 5px; font-size: 9px; }
  html.code-funtech-shell .top-header .history-toggle::before,
  html.code-funtech-shell .top-header .world-entry-btn::before { top: 5px; left: 6px; font-size: 5px; }
  html.code-funtech-shell .top-header .history-toggle::after,
  html.code-funtech-shell .top-header .world-entry-btn::after { display: none; }
}

@keyframes code-stage-scan {
  0%, 15% { opacity: 0; transform: translateY(0); }
  22% { opacity: 1; }
  68% { opacity: .5; }
  78%, 100% { opacity: 0; transform: translateY(58vh); }
}

@keyframes code-reveal-down {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes code-reveal-left {
  from { opacity: 0; transform: translateX(-22px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes code-reveal-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes code-drawer-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 980px) {
  html.code-funtech-shell .workspace::after,
  html.code-funtech-shell .code-stage-caption {
    display: none;
  }

  html.code-funtech-shell .chat-sidebar {
    margin: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.code-funtech-shell *,
  html.code-funtech-shell *::before,
  html.code-funtech-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Control rail v4 — compact operational hierarchy with a narrow signal spine. */
html.code-funtech-shell .chat-sidebar:not(.collapsed) {
  padding: 24px 20px 18px 32px;
  border-right-color: rgba(216,189,104,.24);
  background: linear-gradient(145deg,#1d1d1a 0%,#151512 72%);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed)::before {
  content: "";
  inset: 0 auto 0 0;
  width: 5px;
  padding: 0;
  background: var(--code-signal);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed)::after {
  content: "SECURE / AVATAR";
  position: absolute;
  left: 13px;
  bottom: 20px;
  color: rgba(230,217,0,.76);
  font: 800 7px/1 ui-monospace,"SFMono-Regular",Consolas,monospace;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
  pointer-events: none;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-brand {
  min-height: 116px;
  padding: 0 0 20px;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-logo {
  padding-right: 56px;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-subtitle {
  display: block;
  margin-top: 14px;
  color: var(--code-signal);
  font: 800 8px/1.2 ui-monospace,"SFMono-Regular",Consolas,monospace;
  letter-spacing: .13em;
  white-space: nowrap;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-helper {
  max-width: none;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-toggle {
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  box-shadow: inset 0 2px 0 rgba(230,217,0,.46);
  border-radius: 0;
  transition: background-color .18s ease,color .18s ease,transform .18s ease;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-toggle:hover,
html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-toggle:focus-visible {
  border-color: var(--code-signal);
  outline: none;
  background: var(--code-signal);
  color: var(--code-ink);
  transform: translate(-2px,-2px);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .agent-avatar-picker {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 15px 0 17px;
  border: 0;
  border-bottom: 1px solid rgba(244,241,232,.15);
  border-radius: 0;
  box-shadow: none;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .agent-avatar-label {
  margin: 0;
  font: 800 9px/1 ui-monospace,"SFMono-Regular",Consolas,monospace;
  letter-spacing: .16em;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) select {
  min-height: 52px;
  padding-inline: 15px 40px;
  border: 1px solid rgba(244,241,232,.22);
  border-top-color: var(--code-signal);
  background-color: #24231f;
  box-shadow: none;
  transition: border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) select:hover {
  border-color: rgba(230,217,0,.66);
  background-color: #292824;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-new {
  min-height: 66px;
  margin-top: 16px;
  padding: 12px 14px;
  border-color: rgba(230,217,0,.72);
  display: grid;
  align-content: center;
  box-shadow: 7px 7px 0 rgba(230,217,0,.08);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-new::before {
  left: 0;
  width: 52px;
  height: 3px;
  background: var(--code-signal);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-new-icon {
  border-radius: 0;
  color: var(--code-ink);
  background: var(--code-signal);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-list {
  gap: 9px;
  margin-top: 16px;
  padding-right: 5px;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-session-card {
  min-height: 76px;
  padding: 13px 12px;
  border-top-width: 2px;
  background: rgba(255,255,255,.025);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-session-card.active,
html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-session-card[aria-current="true"] {
  border-color: var(--code-signal);
  background: var(--code-ivory);
  box-shadow: 7px 7px 0 rgba(230,217,0,.1);
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-session-card button {
  min-width: 42px;
  min-height: 42px;
  border-radius: 0;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-clear {
  min-height: 46px;
  margin-top: 12px;
  border-color: rgba(244,241,232,.22);
  letter-spacing: .04em;
}

html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-clear:hover,
html.code-funtech-shell .chat-sidebar:not(.collapsed) .chat-sidebar-clear:focus-visible {
  border-color: var(--code-signal);
  outline: none;
  color: var(--code-ink);
  background: var(--code-signal);
}

/* The identity is intentionally strong, but remains below the Live2D canvas. */
html.code-funtech-shell .code-stage-index {
  left: clamp(-28px,-1.8vw,-8px);
  top: clamp(32px,7vh,82px);
  display: flex;
  align-items: baseline;
  gap: .05em;
  width: calc(100% + 28px);
  overflow: visible;
  color: #1e1e1a;
  font: 900 clamp(88px,13vw,220px)/.78 "Arial Narrow","Segoe UI",sans-serif;
  letter-spacing: -.085em;
  white-space: nowrap;
  opacity: .94;
  mix-blend-mode: multiply;
}

html.code-funtech-shell .code-stage-index em {
  margin-left: .03em;
  color: #1e1e1a;
  font-size: .42em;
  font-weight: 800;
  opacity: .88;
}

html.code-funtech-shell .workspace .live2d-stage,
html.code-funtech-shell .workspace .live2d-host,
html.code-funtech-shell .workspace .live2d-canvas-root {
  z-index: 3;
}

@media (max-width: 900px) {
  html.code-funtech-shell .code-stage-index {
    left: -12px;
    top: 28px;
    font-size: clamp(62px,17vw,118px);
    opacity: .86;
  }
}

/* 2026-08-24 geometry repair
   Keep the communications console in the left rail and reserve the full
   second column for the Live2D stage.  An absolutely positioned grid item
   otherwise inherits the first grid cell as its static containing area. */
html.code-funtech-shell .workspace.without-right-panel {
  grid-template-columns: clamp(300px, 23vw, 420px) minmax(0, 1fr) !important;
}

html.code-funtech-shell .workspace.left-collapsed.without-right-panel {
  grid-template-columns: 72px minmax(0, 1fr) !important;
}

html.code-funtech-shell .workspace > .chat-sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0;
}

html.code-funtech-shell .workspace > .workspace-stage {
  position: relative !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
}

html.code-funtech-shell .workspace-stage .live2d-stage,
html.code-funtech-shell .workspace-stage .live2d-canvas-root,
html.code-funtech-shell .workspace-stage .live2d-host {
  width: 100% !important;
  height: 100% !important;
}

html.code-funtech-shell .workspace > .workspace-center-spacer {
  display: none !important;
}

@media (max-width: 760px) {
  html.code-funtech-shell .workspace.without-right-panel {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }
}