/* HUB-218: ceramic frames for the selected assembly-chamber theme.
   Shell layout, message identities and composer behavior remain shared. */
html[data-theme="cauldron"] {
  color-scheme: dark;
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-title: var(--font-body);
  --font-numeric: var(--font-body);
  --display-transform: none;
  --display-spacing: .02em;
  --display-shadow: none;
  --radius-lg: 6px;
  --radius-md: 3px;
  --radius-sm: 2px;
  --radius-chip: 3px;
  --bg: #090c0e;
  --surface-1: #101416;
  --surface-2: #171c1e;
  --surface-3: #242b2d;
  --sunken: #090c0d;
  --line: #303735;
  --line-strong: #606a65;
  --card-bg: #0e1214;
  --card-bg-open: #171d1e;
  --card-border: #414944;
  --card-border-open: #f56a15;
  --card-texture: none;
  --card-shadow: none;
  --plate-bg: #101416;
  --plate-texture: none;
  --plate-shadow: none;
  --turn-shadow: none;
  --text: #e6e5de;
  --text-soft: #cdcec7;
  --text-muted: #a3aaa4;
  --text-faint: #8f9993;
  --accent: #f56a15;
  --accent-soft: rgb(245 106 21 / 10%);
  --accent-line: #a75423;
  --accent-glow: none;
  --selection: rgb(245 106 21 / 30%);
  --space-base: #090c0e;
  --space-glow-a: transparent;
  --space-glow-b: transparent;
  --space-star: transparent;
  --star-opacity: 0;
  --dialog-canvas: #090c0e;
  --dialog-chrome: #101416;
  --dialog-raised: #101416;
  --dialog-stream-tabs-inset-top: 10px;
  --dialog-stream-tabs-inset-inline: 12px;
  --dialog-bubble-agent: #0d1113;
  --dialog-bubble-user: #111618;
  --dialog-code-bg: #080b0d;
  --dialog-agent-1: #dfdfd5;
  --dialog-agent-2: #c1c6bf;
  --dialog-agent-3: #b7bcb7;
  --shell-header-background: #101416;
  --shell-header-border: 1px solid var(--line);
  --shell-header-shadow: none;
  --shell-control-background: #141a1c;
  --shell-control-border: 1px solid var(--line);
  --shell-control-shadow: none;
  --shell-tab-active-background: #1c211e;
  --shell-tab-active-shadow: inset 0 -2px 0 var(--accent);
  --shell-panel-border: 1px solid var(--line);
  --shell-panel-radius: 3px;
  --shell-panel-border: 12px solid transparent;
  --shell-panel-border-image: var(--cauldron-panel-frame-asset, url("./panel-frame.svg")) 40 / 22px / 0 stretch;
  --shell-panel-border-width: 12px;
  --shell-panel-border-image-width: 22px;
  --shell-chat-border: 1px solid transparent;
  --shell-chat-border-image: none;
  --shell-chat-panel-border-width: 1px;
  --shell-workspace-gap: 7px;
  --shell-workspace-padding-bottom: 8px;
  --cauldron-header-metal: repeating-linear-gradient(0deg, rgb(222 227 213 / 2%) 0 1px, transparent 1px 3px), linear-gradient(110deg, rgb(31 39 37 / 96%), rgb(12 18 20 / 94%) 65%, rgb(28 34 32 / 96%));
  --shell-stream-tabs-background: transparent;
  --shell-stream-tabs-border: 0;
  --shell-stream-tabs-border-bottom: 0;
  --shell-stream-tabs-border-image: var(--cauldron-panel-frame-asset, url("./panel-frame.svg")) 40 / 14px 14px 0 / 0 stretch;
  --shell-stream-tabs-radius: 0;
  --shell-stream-tab-background: #101717;
  --shell-stream-tab-active-background: #39271a;
  --shell-stream-tab-hover-background: #292e2e;
  --shell-stream-card-background: linear-gradient(120deg, #232828, #111719);
  --shell-stream-card-border: 1px solid transparent;
  --shell-stream-card-border-image: none;
  --shell-stream-card-radius: 0;
  --shell-stream-card-padding: 0.5rem 0.65rem;
  --shell-tab-background: linear-gradient(#1e2723, #111719);
  --shell-tab-border: 1px solid #5e6b60;
  --shell-tab-shadow: inset 0 1px #a9b0a0, inset 0 -2px #080d0c;
  --shell-tab-active-background: #34261c;
  --shell-tab-active-border: 1px solid #f56a15;
  --shell-control-border: 1px solid #77816f;
  --shell-control-shadow: inset 0 1px #c0c4b6, inset 0 -2px #080d0c;
}

html[data-theme="cauldron"] body { background: var(--bg); }
html[data-theme="cauldron"] body::before { content: none; }
html[data-theme="cauldron"] body::after {
  content: "";
  background: url("./plating.png") center / cover no-repeat;
}
html[data-background-override="true"][data-background="cauldron"] {
  --hub-background-color: #090c0e;
  --hub-background-image: var(--cauldron-image);
}
html[data-background-override="true"][data-background="cauldron-assembly"] {
  --hub-background-color: #090c0e;
  --hub-background-image: var(--cauldron-assembly-image);
}
html[data-background-override="true"][data-background="cauldron-core"] {
  --hub-background-color: #090c0e;
  --hub-background-image: var(--cauldron-core-image);
}
html[data-background-override="true"][data-background="cauldron-metal"] {
  --hub-background-color: #090c0e;
  --hub-background-image: none;
}

/* Reuse the accepted frame on every page; layout and controls stay shared. */
html[data-theme="cauldron"] :is(.task-board-sidebar, .journal-shell,
  .statistics-card, .current-limits-card, .server-card, .server-health-card) {
  border: 12px solid transparent;
  border-image: var(--cauldron-panel-frame-asset, url("./panel-frame.svg")) 40 / 22px / 0 stretch;
  border-radius: 0;
  background-color: rgb(9 12 14 / 94%);
}
html[data-theme="cauldron"] .task-board-column-head {
  border: 1px solid transparent;
  border-image: var(--cauldron-tile-frame-asset, url("./tile-frame.svg")) 16 / 8px / 0 stretch;
  background-color: rgb(9 12 14 / 80%);
}
@media (max-width: 700px) {
  html[data-theme="cauldron"] :is(.task-board-sidebar, .journal-shell,
    .statistics-card, .current-limits-card, .server-card, .server-health-card) {
    border-width: 8px;
    border-image-width: 15px;
  }
}

/* Border images keep corners fixed while the existing panel resizers own width.
   No pseudo-elements on Workspace entries: those belong to status effects. */
html[data-theme="cauldron"] :is(.task-rail, .activity-rail) {
  background: linear-gradient(110deg, #1b2021, #0c1213 55%, #191e1f);
}

html[data-theme="cauldron"] :is(.task-workspace-item, .board-task-card) {
  border: 1px solid transparent;
  border-image: var(--cauldron-tile-frame-asset, url("./tile-frame.svg")) 16 / 10px / 0 stretch;
  border-radius: 0;
  background: linear-gradient(115deg, #232828, #111719 75%);
  box-shadow: none;
}

html[data-theme="cauldron"] .task-workspace-item[data-selected] {
  background: linear-gradient(110deg, #70401e, #33251c);
  box-shadow: inset 0 0 0 5px #f56a15;
}

/* Leave the transparent cuts of the ceramic border unpainted. Content,
   menus and focus outlines keep their original overflow/hit-test geometry. */
html[data-theme="cauldron"][data-view][data-surface] :is(
  .task-rail, .activity-rail, .task-board-sidebar, .journal-shell,
  .statistics-card, .current-limits-card, .server-card, .server-health-card,
  .task-card-modal, .workspace-card-modal, .settings-panel,
  .stream-chat-header, .stream-chat-preview-head) {
  background-clip: padding-box;
}

html[data-theme="cauldron"] .journal-shell-head {
  padding: 8px 12px 0;
}

html[data-theme="cauldron"][data-view="chat"][data-surface] .chat.chat {
  background: transparent;
}

/* Match the tile's fixed-size cuts. Workspace owns both activity pseudo-layers;
   clipping its paint keeps their glow inside the frame without replacing them. */
html[data-theme="cauldron"][data-view][data-surface] .task-list .task-workspace-item {
  border-color: transparent;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px,
    100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%,
    0 calc(100% - 7px), 0 7px);
}

html[data-theme="cauldron"] :is(.task-workspace-item, .board-task-card):hover {
  background: linear-gradient(115deg, #343937, #18201e);
}

html[data-theme="cauldron"] :is(.task-workspace-item, .board-task-card):focus-visible {
  outline: 2px solid #ffad64;
  outline-offset: -3px;
}

html[data-theme="cauldron"] :is(.task-rail-head, .activity-rail-head) {
  background: linear-gradient(120deg, #292d2d, #101718);
  box-shadow: inset 0 -1px #697568, inset 0 -3px #080d0c;
}

html[data-theme="cauldron"] :is(.workspace-task-section > header, .activity-section-head) {
  background: linear-gradient(90deg, #242929, #111819);
  border-bottom: 1px solid #465246;
  color: #cbd0c0;
}

html[data-theme="cauldron"] .activity-stream-item::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: none;
  border: 1px solid transparent;
  border-image: var(--cauldron-tile-frame-asset, url("./tile-frame.svg")) 16 / 8px / 0 stretch;
  pointer-events: none;
}

/* The card owns decoration; the tab keeps its shared divider and status layer. */
/* Join the top and bottom frame halves without wrapping or moving shared DOM.
   Each header still belongs to its chat pane, including split Stream views. */
html[data-theme="cauldron"] .stream-tabs {
  --dialog-chrome: transparent;
  isolation: isolate;
}

html[data-theme="cauldron"] .stream-tabs::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 8px solid transparent;
  border-bottom: 0;
  border-image: var(--shell-stream-tabs-border-image);
  background: var(--cauldron-header-metal);
  background-clip: padding-box;
  pointer-events: none;
  z-index: -1;
}

html[data-theme="cauldron"][data-view="chat"][data-surface] .chat :is(.stream-chat-header, .stream-chat-preview-head) {
  position: relative;
  background: var(--cauldron-header-metal);
  border: 6px solid transparent;
  background-clip: padding-box;
  border-top: 0;
  border-image: var(--cauldron-panel-frame-asset, url("./panel-frame.svg")) 40 / 0 14px 14px / 0 stretch;
  min-height: 70px;
  padding: 5px 14px 10px 18px;
  gap: 2px 10px;
}

html[data-theme="cauldron"] .stream-chat-preview-head {
  align-items: center;
}

html[data-theme="cauldron"] .stream-chat-header::after {
  content: "";
  position: absolute;
  bottom: -5px;
  right: 22px;
  width: 38px;
  height: 5px;
  background: var(--accent);
  transform: skewX(-40deg);
  pointer-events: none;
}

/* Shared chrome uses these semantic tokens. Paint only the interior status
   layer, so selection, hover and every status effect share the same contour.
   The button, its text and its drag target remain the original rectangle. */
html[data-theme="cauldron"] .stream-tabs-track .stream-tab {
  --dialog-canvas: transparent;
  --dialog-control-hover: transparent;
  --dialog-accent: transparent;
  --cauldron-tab-fill: linear-gradient(115deg, #232828, #111719 75%);
}

html[data-theme="cauldron"] .stream-tabs-track .stream-tab:hover {
  --cauldron-tab-fill: linear-gradient(115deg, #343937, #18201e);
}

html[data-theme="cauldron"] .stream-tabs-track .stream-tab[data-current] {
  --cauldron-tab-fill: linear-gradient(110deg, #70401e, #33251c);
  --cauldron-tab-selection: inset 0 -2px 0 var(--accent);
}

html[data-theme="cauldron"][data-view="chat"][data-surface] .stream-tabs-track .stream-tab > .stream-tab-status-layer {
  inset: 5px calc(var(--stream-tab-inline-padding, 16px) - 2px);
  background: var(--cauldron-tab-fill);
  box-shadow: var(--cauldron-tab-selection, none);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%,
    0 calc(100% - 4px), 0 4px);
}

html[data-theme="cauldron"] .stream-tabs-track .stream-tab:focus-visible {
  --cauldron-tab-selection: inset 0 0 0 2px #ffad64;
}

/* If no tab strip is shown, the header needs its own top edge. */
html[data-theme="cauldron"][data-view="chat"][data-surface] .chat:has(> .stream-tabs[hidden]) .stream-chat-header {
  border-top-width: 6px;
  border-image-width: 14px;
}

html[data-theme="cauldron"][data-view="chat"][data-surface="mobile"] .chat .stream-chat-header {
  padding: 8px 12px 10px;
}

html[data-theme="cauldron"] .stream-tabs .stream-tab-card {
  position: relative;
}

html[data-theme="cauldron"] .stream-tabs .stream-tab:not(.stream-tab-create) > .stream-tab-card::after {
  content: "";
  position: absolute;
  inset: 2px -6px;
  border: 1px solid transparent;
  border-image: var(--cauldron-tile-frame-asset, url("./tile-frame.svg")) 16 / 7px / 0 stretch;
  pointer-events: none;
}

html[data-theme="cauldron"] :is(.task-card-modal, .workspace-card-modal, .settings-panel) {
  border: 12px solid transparent;
  border-image: var(--cauldron-panel-frame-asset, url("./panel-frame.svg")) 40 / 22px / 0 stretch;
  border-radius: 0;
  background-color: #101718;
}

@media (max-width: 859px) {
  html[data-theme="cauldron"] :is(.task-rail, .activity-rail) {
    border: 8px solid transparent;
    border-image: var(--cauldron-panel-frame-asset, url("./panel-frame.svg")) 40 / 15px / 0 stretch;
  }
  html[data-theme="cauldron"] .stream-tab-card {
    border: 1px solid transparent;
    border-image: var(--cauldron-tile-frame-asset, url("./tile-frame.svg")) 16 / 8px / 0 stretch;
    border-radius: 0;
  }
}

html[data-theme="cauldron"][data-view="chat"][data-surface] .chat-log .msg.msg-agent:not(.msg-live),
html[data-theme="cauldron"][data-view="chat"][data-surface] .chat-scroll > .msg.msg-live {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 24px 27px 29px 43px;
}

/* Nine-slice edges keep the ceramic thickness and cuts at any message height.
   Only the backing is clipped: content, focus rings and menus remain intact. */
html[data-theme="cauldron"][data-view="chat"][data-surface] .msg.msg-agent::before,
html[data-theme="cauldron"][data-view="chat"][data-surface] form.composer::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 48px solid transparent;
  border-image: var(--cauldron-message-frame-asset, url("./message-frame.svg")) 48 80 48 104 / 48px 80px 48px 104px / 0 stretch;
  pointer-events: none;
  z-index: -1;
}

html[data-theme="cauldron"][data-view="chat"][data-surface] .msg.msg-agent::after,
html[data-theme="cauldron"][data-view="chat"][data-surface] form.composer::after {
  content: "";
  position: absolute;
  inset: 8px;
  background: linear-gradient(125deg, #171c1d, #0d1113 36%, #0a0e10 80%, #171c1c);
  clip-path: polygon(20px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 18px 100%, 0 calc(100% - 18px), 0 20px);
  pointer-events: none;
  z-index: -2;
}

html[data-theme="cauldron"][data-view="chat"][data-surface] .msg-agent .msg-head {
  margin-bottom: 10px;
}

html[data-theme="cauldron"][data-view="chat"][data-surface] .msg-agent .msg-author {
  color: #e4e4da;
  font-size: 12px;
}

html[data-theme="cauldron"][data-view="chat"][data-surface] .msg-user .msg-user-bubble {
  border: 1px solid #606a62;
  border-right: 3px solid #f56a15;
  border-radius: 2px;
  background: linear-gradient(120deg, #171c1d, #0c1012);
  box-shadow: inset 0 0 0 3px #0b0f11;
}

html[data-theme="cauldron"][data-view="chat"][data-surface] form.composer {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 25px 31px 26px 34px;
}

html[data-theme="cauldron"][data-view="chat"][data-surface] form.composer::before {
  border-width: 40px;
  border-image: var(--cauldron-composer-frame-asset, url("./composer-frame.svg")) 40 / 40px / 0 stretch;
}

html[data-theme="cauldron"][data-view="chat"][data-surface] form.composer::after {
  inset: 14px 18px;
  clip-path: polygon(20px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
}

html[data-theme="cauldron"][data-view="chat"][data-surface] form.composer:focus-within::before {
  filter: drop-shadow(0 0 3px rgb(245 106 21 / 40%));
}

html[data-theme="cauldron"][data-view="chat"][data-surface] form.composer .composer-send {
  width: 58px;
  height: 32px;
  background: #f56a15;
  border: 1px solid #ffac67;
  border-radius: 0;
  color: #101517;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 14px 100%);
}

html[data-theme="cauldron"][data-view="chat"][data-surface] form.composer .composer-send:focus-visible {
  background: #ffb778;
  box-shadow: inset 0 0 0 3px #fff0ce;
}

html[data-theme="cauldron"][data-view="chat"][data-surface] form.composer .composer-send:disabled {
  opacity: .45;
}

@media (max-width: 700px) {
  html[data-theme="cauldron"][data-view="chat"][data-surface] .chat-log .msg.msg-agent:not(.msg-live),
  html[data-theme="cauldron"][data-view="chat"][data-surface] .chat-scroll > .msg.msg-live {
    padding: 21px 20px 25px 32px;
  }
  html[data-theme="cauldron"][data-view="chat"][data-surface] .msg.msg-agent::before {
    border-width: 36px;
    border-image-width: 36px 60px 36px 78px;
  }
  html[data-theme="cauldron"][data-view="chat"][data-surface] form.composer {
    padding: 22px 24px;
  }
  html[data-theme="cauldron"][data-view="chat"][data-surface] form.composer::before {
    border-width: 32px;
    border-image-width: 32px;
  }
}