html[data-theme="magma"] {
  --display-weight: 640;
  --display-spacing: -0.012em;
  --title-weight: 560;
  --label-spacing: 0.14em;

  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
  --radius-chip: 3px;
  --rail-width: 2px;

  --bg: #05080b;
  --surface-1: rgb(8 13 17 / 82%);
  --surface-2: rgb(17 24 30 / 76%);
  --surface-3: rgb(33 42 50 / 72%);
  --sunken: rgb(2 5 8 / 78%);

  --line: rgb(99 112 123 / 34%);
  --line-strong: rgb(135 148 158 / 54%);

  --magma-metal-texture: url("./magma-blackened-steel.jpg");
  --magma-forged-frame: url("./magma-forged-frame.png");
  --magma-chat-frame: url("./magma-chat-frame.png");
  --magma-side-rail: url("./magma-side-rail.png");
  --magma-image: url("./magma-lava-well.jpg");
  --magma-panel:
    linear-gradient(rgb(5 9 12 / 90%), rgb(5 9 12 / 90%)),
    var(--magma-metal-texture) center / 28rem 28rem;
  --magma-panel-soft:
    linear-gradient(rgb(7 12 16 / 82%), rgb(7 12 16 / 82%)),
    var(--magma-metal-texture) center / 24rem 24rem;
  --magma-control:
    linear-gradient(rgb(12 18 23 / 88%), rgb(7 11 15 / 94%)),
    var(--magma-metal-texture) center / 18rem 18rem;

  --card-bg: linear-gradient(180deg, rgb(11 17 22 / 94%), rgb(5 9 12 / 96%));
  --card-bg-open: linear-gradient(180deg, rgb(15 22 28 / 96%), rgb(5 9 12 / 98%));
  --card-texture:
    linear-gradient(rgb(7 12 16 / 88%), rgb(7 12 16 / 88%)),
    var(--magma-metal-texture);
  --card-border: rgb(92 105 116 / 42%);
  --card-border-open: rgb(255 105 55 / 62%);
  --card-shadow:
    inset 0 1px 0 rgb(210 224 235 / 7%),
    inset 0 -1px 0 rgb(0 0 0 / 88%),
    0 20px 44px -32px #000;

  --plate-bg: var(--magma-control);
  --plate-shadow: inset 0 1px 0 rgb(210 224 235 / 7%), inset 0 -1px 0 #020405;
  --turn-shadow: 0 18px 34px -26px #000;

  --text: #d9dde1;
  --text-soft: #adb4ba;
  --text-muted: #7e8790;
  --text-faint: #59636c;

  --accent: #ff6a38;
  --accent-soft: rgb(255 88 42 / 12%);
  --accent-line: rgb(255 101 53 / 56%);
  --accent-glow: 0 0 18px -10px rgb(255 82 35 / 78%);
  --selection: rgb(255 97 48 / 25%);
  --brand-gradient: linear-gradient(150deg, rgb(255 94 43 / 22%), rgb(35 47 57 / 20%));
  --brand-shadow: 0 0 18px -12px rgb(255 82 35 / 72%);

  --provider-none: #7d8790;
  --provider-codex: #7eb4ce;
  --provider-claude: #ff8a55;
  --provider-tone-lightness: 0.78;
  --provider-tone-chroma: 0.1;
  --provider-tone-alpha: 0.18;
  --ok: #a9bf82;
  --pending: #d59c67;

  --dot-input: #7eb4ce;
  --dot-cache: #94a5b1;
  --dot-output: #ff8a55;
  --dot-think: #9d91bd;

  --space-glow-a: rgb(255 82 35 / 7%);
  --space-glow-b: rgb(66 89 105 / 7%);
  --space-base: #05080b;
  --space-star: transparent;
  --star-opacity: 0;

  --shell-header-background: var(--magma-panel);
  --shell-header-border: 0;
  --shell-header-frame-border: 7px solid transparent;
  --shell-header-frame-content: "";
  --shell-header-frame-image: var(--magma-forged-frame) 64 / 7px stretch;
  --shell-header-gap: 0.8rem;
  --shell-header-height: 4.5rem;
  --shell-header-padding-left: clamp(0.75rem, 2.2vw, 2rem);
  --shell-header-padding-right: clamp(0.75rem, 2.2vw, 2rem);
  --shell-header-rule: linear-gradient(90deg, transparent, rgb(255 92 42 / 54%), transparent);
  --shell-header-rule-bottom: 0;
  --shell-header-rule-opacity: 0.78;
  --shell-header-shadow: inset 0 -1px 0 #000, 0 12px 32px -26px #000;
  --shell-control-background: var(--magma-control);
  --shell-control-border: 1px solid rgb(89 102 112 / 54%);
  --shell-control-shadow: inset 0 1px 0 rgb(210 224 235 / 6%), inset 0 -1px 0 #020405;
  --shell-view-switch-background: var(--magma-panel-soft);
  --shell-view-switch-border: 1px solid rgb(78 91 101 / 52%);
  --shell-view-switch-radius: 3px;
  --shell-view-switch-shadow: inset 0 1px 0 rgb(210 224 235 / 5%), inset 0 -1px 0 #000;
  --shell-tab-border: 1px solid transparent;
  --shell-tab-active-background: var(--magma-control);
  --shell-tab-active-border: 1px solid rgb(105 118 128 / 58%);
  --shell-tab-active-shadow: inset 0 -2px 0 var(--accent), 0 10px 22px -18px rgb(255 82 35 / 76%);
  --shell-workspace-padding-top: 0.45rem;
  --shell-panel-border: 7px solid transparent;
  --shell-panel-border-image: var(--magma-forged-frame) 64 / 7px stretch;
  --shell-panel-border-width: 7px;
  --shell-panel-border-image-width: 7px;
  --shell-stream-tabs-background: var(--magma-panel);
  --shell-stream-tabs-border: 6px solid transparent;
  --shell-stream-tabs-border-bottom: 6px solid transparent;
  --shell-stream-tabs-border-image: var(--magma-forged-frame) 64 / 6px stretch;
  --shell-stream-tabs-padding: 0.1rem 0.16rem;
  --shell-stream-tab-background: transparent;
  --shell-stream-tab-border: 1px solid transparent;
  --shell-stream-tab-hover-background: rgb(26 35 42 / 70%);
  --shell-stream-tab-active-background: rgb(35 22 18 / 78%);
  --shell-stream-card-background: var(--magma-control);
  --shell-stream-card-border: 5px solid transparent;
  --shell-stream-card-border-image: var(--magma-forged-frame) 64 / 5px stretch;
  --shell-stream-card-shadow:
    inset 0 1px 0 rgb(210 224 235 / 9%),
    inset 0 -2px 0 #020405,
    0 12px 24px -18px #000;
}

html[data-theme="magma"] body::after {
  background-color: #030609;
  background-image:
    linear-gradient(180deg, rgb(2 5 8 / 48%), transparent 24% 76%, rgb(2 4 7 / 46%)),
    radial-gradient(92% 92% at 50% 52%, transparent 46%, rgb(0 0 0 / 48%) 100%),
    var(--magma-image);
  background-position: center, center, 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

@keyframes magma-glow {
  0%, 100% { opacity: 0.18; transform: scale(1.01); }
  48% { opacity: 0.34; transform: scale(1.035); }
  72% { opacity: 0.24; transform: scale(1.02); }
}

html[data-theme="magma"] body::before {
  animation: magma-glow 11s ease-in-out infinite;
  background-image:
    radial-gradient(34% 46% at 50% 78%, rgb(255 99 45 / 30%), rgb(255 70 28 / 8%) 46%, transparent 78%),
    radial-gradient(18% 54% at 50% 48%, rgb(255 119 58 / 14%), transparent 76%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.22;
}

html[data-background-override="true"][data-background="magma"] {
  --magma-image: url("./magma-lava-well.jpg");
  --hub-background-color: #030609;
  --hub-background-image:
    linear-gradient(180deg, rgb(2 5 8 / 48%), transparent 24% 76%, rgb(2 4 7 / 46%)),
    radial-gradient(92% 92% at 50% 52%, transparent 46%, rgb(0 0 0 / 48%) 100%),
    var(--magma-image);
  --hub-background-position: center, center, 50% 50%;
}

html[data-background-override="true"][data-background="magma-fissure"] {
  --hub-background-color: #030609;
  --hub-background-image:
    linear-gradient(180deg, rgb(2 5 8 / 44%), transparent 24% 76%, rgb(2 4 7 / 42%)),
    radial-gradient(94% 94% at 50% 52%, transparent 44%, rgb(0 0 0 / 46%) 100%),
    var(--magma-fissure-image, url("./magma-fissure.jpg"));
  --hub-background-position: center, center, 50% 50%;
}

html[data-background-override="true"][data-background="magma-forge-heart"] {
  --hub-background-color: #030609;
  --hub-background-image:
    linear-gradient(180deg, rgb(2 5 8 / 48%), transparent 22% 74%, rgb(2 4 7 / 38%)),
    radial-gradient(96% 90% at 50% 56%, transparent 42%, rgb(0 0 0 / 50%) 100%),
    var(--magma-forge-heart-image, url("./magma-forge-heart.jpg"));
  --hub-background-position: center, center, 50% 50%;
}

html[data-background-override="true"][data-background^="magma-"] body::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  mask-image: none;
  mix-blend-mode: screen;
}

html[data-theme="magma"] .task-rail,
html[data-theme="magma"] .activity-rail {
  background: var(--magma-panel);
  box-shadow:
    inset 0 1px 0 rgb(210 224 235 / 7%),
    inset 0 -1px 0 #020405,
    0 18px 38px -30px #000;
  position: relative;
}

html[data-theme="magma"] .chat {
  background: rgb(3 7 10 / 26%);
  box-shadow:
    inset 0 0 0 1px rgb(4 7 10 / 70%),
    inset 0 0 56px rgb(0 0 0 / 16%);
  position: relative;
}

@media (min-width: 860px) {
  html[data-theme="magma"] .stream-chat-columns {
    border: 10px solid transparent;
    border-image: var(--magma-chat-frame) 34 / 10px stretch;
    box-sizing: border-box;
    margin: 0;
    width: auto;
  }

  html[data-theme="magma"] .workspace::before,
  html[data-theme="magma"] .workspace::after {
    background: var(--magma-side-rail) center / 100% 100% no-repeat;
    bottom: 0;
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    width: clamp(1.25rem, 1.45vw, 1.6rem);
    z-index: 8;
  }

  html[data-theme="magma"] .workspace::before {
    left: calc(-1 * var(--shell-header-padding-left));
  }

  html[data-theme="magma"] .workspace::after {
    right: calc(-1 * var(--shell-header-padding-right));
    transform: scaleX(-1);
  }
}

html[data-theme="magma"] .stream-tabs,
html[data-theme="magma"] .composer,
html[data-theme="magma"] .dialog-settings,
html[data-theme="magma"] .settings-panel {
  background: var(--magma-panel);
  border: 7px solid transparent;
  border-image: var(--magma-forged-frame) 64 / 7px stretch;
  box-shadow:
    inset 0 1px 0 rgb(210 224 235 / 8%),
    inset 0 -1px 0 #020405,
    0 18px 36px -28px #000;
}

html[data-theme="magma"] .task-workspace-item,
html[data-theme="magma"] .activity-stream-item,
html[data-theme="magma"] .composer-input,
html[data-theme="magma"] .chip-button,
html[data-theme="magma"] .option-chip {
  background: var(--magma-control);
  border-color: rgb(77 91 101 / 54%);
  box-shadow: inset 0 1px 0 rgb(210 224 235 / 6%), inset 0 -1px 0 #020405;
}

html[data-theme="magma"] .task-workspace-item,
html[data-theme="magma"] .activity-stream-item {
  border: 3px solid transparent;
  border-image: var(--magma-forged-frame) 64 / 3px stretch;
  border-radius: 0;
  box-shadow:
    inset 0 1px 0 rgb(210 224 235 / 8%),
    inset 0 -1px 0 #020405,
    0 10px 18px -16px #000;
}

html[data-theme="magma"] .stream-tab[aria-pressed="true"] .stream-tab-card {
  box-shadow:
    inset 0 0 0 1px rgb(255 102 54 / 72%),
    inset 0 -2px 0 rgb(255 79 32 / 82%),
    0 0 22px -13px rgb(255 83 34 / 84%);
}

html[data-theme="magma"] .task-workspace-item:hover,
html[data-theme="magma"] .task-workspace-item:focus-visible,
html[data-theme="magma"] .activity-stream-item:hover,
html[data-theme="magma"] .activity-stream-item:focus-visible {
  background:
    linear-gradient(rgb(21 29 35 / 82%), rgb(12 18 23 / 90%)),
    var(--magma-metal-texture) center / 18rem 18rem;
  border-color: rgb(112 126 137 / 62%);
}

html[data-theme="magma"] .task-workspace-item[data-selected],
html[data-theme="magma"] .activity-stream-item[data-current] {
  background:
    linear-gradient(90deg, rgb(255 82 35 / 14%), rgb(10 15 19 / 90%) 54%),
    var(--magma-metal-texture) center / 18rem 18rem;
  box-shadow:
    inset 2px 0 0 var(--accent),
    inset 0 0 0 1px rgb(255 102 54 / 54%),
    inset 0 1px 0 rgb(210 224 235 / 6%),
    inset 0 -1px 0 #020405;
}

html[data-theme="magma"] .msg {
  backdrop-filter: blur(6px) saturate(106%);
  -webkit-backdrop-filter: blur(6px) saturate(106%);
  background-color: rgb(4 8 11 / 76%);
  background-image:
    linear-gradient(rgb(5 10 14 / 74%), rgb(5 10 14 / 74%)),
    var(--magma-metal-texture);
  background-size: auto, 24rem 24rem;
  border-color: rgb(82 95 105 / 56%);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgb(210 224 235 / 6%), inset 0 -1px 0 #020405, var(--turn-shadow);
}

html[data-theme="magma"] .msg-user {
  background-color: rgb(10 10 10 / 82%);
  background-image:
    linear-gradient(90deg, rgb(255 82 35 / 12%), rgb(5 10 14 / 80%) 58%),
    var(--magma-metal-texture);
  border-color: rgb(255 99 51 / 50%);
}

html[data-theme="magma"] .msg-system {
  background: rgb(3 7 10 / 70%);
  border-color: rgb(74 86 96 / 42%);
  border-radius: 2px;
}

html[data-theme="magma"] .view-tab,
html[data-theme="magma"] .view-settings,
html[data-theme="magma"] .chip-button,
html[data-theme="magma"] .option-chip {
  border-radius: 2px;
}

html[data-theme="magma"] .view-tab[aria-pressed="true"] {
  color: #e4e7ea;
}

html[data-theme="magma"] .task-rail-title,
html[data-theme="magma"] .activity-rail-toggle,
html[data-theme="magma"] .eyebrow {
  color: #aeb5bb;
  letter-spacing: 0.13em;
  text-shadow: 0 1px 0 #000;
}

html[data-theme="magma"] .journal details[data-work-log-day-section] {
  backdrop-filter: blur(6px) saturate(106%);
  -webkit-backdrop-filter: blur(6px) saturate(106%);
  background-color: rgb(4 8 11 / 80%);
  border-color: rgb(82 95 105 / 52%);
}

html[data-theme="magma"] .journal details[data-work-log-turn-details] {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background-color: rgb(4 8 11 / 72%);
  border-color: rgb(72 84 94 / 44%);
}

@media (max-width: 720px) {
  html[data-theme="magma"] body::after {
    background-position: center, center, 50% 52%;
  }

  html[data-background-override="true"][data-background="magma"],
  html[data-background-override="true"][data-background="magma-fissure"],
  html[data-background-override="true"][data-background="magma-forge-heart"] {
    --hub-background-position: center, center, 50% 52%;
  }

  html[data-theme="magma"] .stream-tabs,
  html[data-theme="magma"] .composer,
  html[data-theme="magma"] .dialog-settings,
  html[data-theme="magma"] .settings-panel {
    border-width: 4px;
    border-image-width: 4px;
  }

  html[data-theme="magma"] .journal details[data-work-log-day-section],
  html[data-theme="magma"] .journal details[data-work-log-turn-details] {
    background-color: rgb(4 8 11 / 88%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="magma"] body::before,
  html[data-background-override="true"][data-background^="magma-"] body::before {
    animation: none !important;
  }
}