/* ========================================================= тема «Gothic» === */

html[data-theme="gothic"] {
  /* Храм Спящего: чёрное железо, базальт, вытертая кожа и редкие метки
     красной охрой. Системные антиквы сохраняют кириллицу без web-font. */
  --font-body: "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-display: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-title: "Perpetua Titling MT", "Felix Titling", "Palatino Linotype", Georgia, serif;
  --font-numeric: "Constantia", "Palatino Linotype", Georgia, serif;
  --display-weight: 650;
  --display-spacing: 0.035em;
  --display-transform: uppercase;
  --display-shadow: 0 1px 1px #020303, 0 -1px 0 rgb(225 220 207 / 8%);
  --title-weight: 600;
  --label-spacing: 0.15em;

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

  --bg: #090a0a;
  --surface-1: rgb(9 10 10 / 97%);
  --surface-2: rgb(17 18 18 / 97%);
  --surface-3: rgb(29 29 27 / 94%);
  --sunken: rgb(3 4 4 / 94%);
  --line: rgb(116 111 101 / 42%);
  --line-strong: rgb(148 140 125 / 62%);

  --gothic-iron-frame: var(--gothic-iron-frame-asset, url("./gothic-iron-frame-plain.png"));
  --gothic-forged-frame: var(--gothic-forged-frame-asset, url("./gothic-forged-frame.png"));
  --gothic-forged-frame-matte: var(--gothic-forged-frame-matte-asset, url("./gothic-forged-frame-matte.png"));
  --gothic-header-brand-rail: var(--gothic-header-brand-rail-asset, url("./gothic-header-details-reference.png"));
  --gothic-header-rail-repeat: var(--gothic-header-rail-repeat-asset, url("./gothic-header-rail-reference.png"));
  --gothic-header-rivet: var(--gothic-header-rivet-asset, url("./gothic-header-rivet.png"));
  --card-bg: rgb(10 11 11 / 94%);
  --card-bg-open: rgb(17 18 18 / 96%);
  --card-texture: var(--gothic-panel-texture-preview);
  --card-border: rgb(111 105 95 / 40%);
  --card-border-open: rgb(132 91 72 / 68%);
  --card-shadow:
    inset 0 1px 0 rgb(225 193 148 / 7%),
    inset 0 -1px 0 rgb(0 0 0 / 86%),
    inset 0 0 28px rgb(0 0 0 / 28%),
    0 20px 38px -28px #000;
  --plate-bg: rgb(12 13 13 / 95%);
  --plate-texture: var(--gothic-panel-texture-preview);
  --plate-shadow: inset 0 1px 0 rgb(216 182 134 / 8%), inset 0 -1px 0 rgb(0 0 0 / 82%);
  --turn-shadow: 0 12px 26px -18px #000;

  --text: #beb9ae;
  --text-soft: #9e998f;
  --text-muted: #74716a;
  --text-faint: #575650;
  --accent: #865044;
  --accent-soft: rgb(91 42 34 / 24%);
  --accent-line: rgb(118 58 46 / 72%);
  --accent-glow: none;
  --selection: rgb(126 58 45 / 30%);
  --brand-gradient: linear-gradient(180deg, #151616, #080909);
  --brand-shadow: inset 0 1px 0 rgb(222 217 204 / 5%), inset 0 -8px 14px rgb(0 0 0 / 52%);

  --provider-none: #766a5a;
  --provider-codex: #c8b89e;
  --provider-claude: #b66f4a;
  --provider-tone-lightness: 0.75;
  --provider-tone-chroma: 0.07;
  --provider-tone-alpha: 0.17;
  --ok: #8b9c6a;
  --pending: #c08a4d;
  --dot-input: #b9a88c;
  --dot-cache: #827666;
  --dot-output: #a65c42;
  --dot-think: #8f746c;
  --space-glow-a: rgb(120 62 47 / 4%);
  --space-glow-b: rgb(87 85 78 / 5%);
  --space-base: linear-gradient(176deg, #111313 0, #090a0a 24rem, var(--bg) 100%);
  --space-star: transparent;
  --star-opacity: 0;
  --gothic-image: url("./gothic-khorinis-harbor.jpg?v=1f41339934cb");

  /* Материалы shell задаются токенами: общая таблица сохраняет единую
     геометрию верхних панелей, а тема меняет только их фактуру и рамку. */
  --shell-header-background:
    linear-gradient(rgb(5 6 6 / 82%), rgb(5 6 6 / 82%)),
    var(--gothic-panel-texture-preview) center / 24rem 24rem;
  --shell-brand-mark-size: 2.9rem;
  --shell-header-border: 0;
  --shell-header-frame-border: 1px solid rgb(91 86 77 / 78%);
  --shell-header-frame-content: "";
  --shell-header-frame-filter: none;
  --shell-header-frame-image: none;
  --shell-header-gap: 0;
  --shell-header-height: 4.75rem;
  --shell-header-padding-right: 2rem;
  --shell-header-rule: none;
  --shell-header-rule-bottom: 0;
  --shell-header-rule-height: 0;
  --shell-header-rule-left: 0;
  --shell-header-rule-opacity: 0;
  --shell-header-rule-right: 0;
  --shell-header-shadow: none;
  --shell-toolbar-align-self: center;
  --shell-toolbar-margin-top: 0;
  --shell-control-background:
    linear-gradient(rgb(7 8 8 / 86%), rgb(7 8 8 / 86%)),
    var(--gothic-panel-texture-preview) center / 18rem 18rem;
  --shell-control-border: 1px solid rgb(106 102 94 / 54%);
  --shell-control-shadow: inset 0 1px 0 rgb(220 216 204 / 4%), inset 0 -1px 0 #020303;
  --shell-tab-background: transparent;
  --shell-tab-active-background:
    linear-gradient(rgb(9 10 10 / 42%), rgb(5 6 6 / 56%)),
    var(--gothic-panel-texture-preview) center / 20rem 20rem;
  --shell-tab-active-border: 1px solid rgb(105 100 90 / 62%);
  --shell-tab-active-padding: 0.42rem 0.94rem;
  --shell-tab-active-shadow: inset 0 -2px 0 #a14438;
  --shell-view-switch-background: transparent;
  --shell-view-switch-border: 0;
  --shell-view-switch-gap: 3px;
  --shell-view-switch-padding: 0 0.45rem;
  --shell-view-switch-radius: 0;
  --shell-view-switch-shadow: none;
  --shell-view-switch-transform: none;
  --shell-workspace-padding-top: 0;
  --shell-panel-border: 6px solid transparent;
  --shell-panel-border-image: var(--gothic-iron-frame) 5% / 6px stretch;
  --shell-panel-border-width: 6px;
  --shell-panel-border-image-width: 6px;
  --shell-stream-tabs-background:
    linear-gradient(rgb(7 8 8 / 82%), rgb(7 8 8 / 82%)),
    var(--gothic-panel-texture-preview) center / 24rem 24rem;
  --shell-stream-tabs-border: 0;
  --shell-stream-tabs-border-bottom: 0;
  --shell-stream-tabs-border-image: none;
  --shell-stream-tabs-margin-top: 0;
  --shell-stream-tabs-min-height: 3.45rem;
  --shell-stream-tabs-padding: 0 0.55rem 0.2rem;
  --shell-stream-tab-background: transparent;
  --shell-stream-tab-border: 0;
  --shell-stream-tab-hover-background: #121313 var(--gothic-panel-texture-preview) center / 18rem 18rem;
  --shell-stream-tab-active-background: #251714 var(--gothic-panel-texture-preview) center / 18rem 18rem;
  --shell-stream-card-background: #0a0b0b var(--gothic-panel-texture-preview) center / 18rem 18rem;
  --shell-stream-card-border: 6px solid transparent;
  --shell-stream-card-border-image: var(--gothic-iron-frame) 5% / 6px stretch;
}

html[data-theme="gothic"] body::after {
  background-color: #070909;
  background-image:
    linear-gradient(90deg, rgb(4 5 5 / 28%), transparent 32% 72%, rgb(4 4 4 / 8%)),
    linear-gradient(180deg, rgb(4 5 5 / 8%) 42%, rgb(2 3 3 / 56%)),
    radial-gradient(120% 94% at 50% 44%, transparent 34%, rgb(0 0 0 / 48%) 100%),
    var(--gothic-image);
  background-position: center, center, center, 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

html[data-theme="gothic"] .eyebrow,
html[data-theme="gothic"] .task-rail-title {
  color: #a8a195;
  font-family: var(--font-title);
  font-variant-caps: small-caps;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 0 #000;
}

@media (min-width: 860px) {
  html[data-theme="gothic"]:not([data-surface="mobile"]) {
    --shell-header-background:
      linear-gradient(rgb(5 6 6 / 58%), rgb(5 6 6 / 58%)),
      var(--gothic-panel-texture-preview) center / 24rem 24rem;
    --shell-header-frame-border: 6px solid transparent;
    --shell-header-frame-filter: brightness(1.16) contrast(1.08) saturate(0.78);
    --shell-header-frame-image: var(--gothic-iron-frame) 5% / 6px stretch;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .app-header::before {
    border: 6px solid transparent;
    border-image: var(--gothic-iron-frame) 5% / 6px stretch;
    filter: brightness(1.16) contrast(1.08) saturate(0.78);
    left: 16.5rem;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .brand {
    align-self: stretch;
    background:
      linear-gradient(rgb(6 7 7 / 42%), rgb(6 7 7 / 42%)),
      var(--gothic-panel-texture-preview) center / 20rem 20rem;
    border: 0;
    box-sizing: border-box;
    flex: 0 0 16.5rem;
    gap: 1.375rem;
    height: 4.75rem;
    margin-left: calc(clamp(1rem, 4vw, 4.25rem) * -1);
    padding: 0 0.9rem 0 var(--gothic-header-edge-inset, 2.45rem);
    position: relative;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .brand::before {
    border: 6px solid transparent;
    border-image: var(--gothic-iron-frame) 5% / 6px stretch;
    box-sizing: border-box;
    content: "";
    filter: brightness(1.16) contrast(1.08) saturate(0.78);
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .brand::after,
  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .chat::before {
    border: 0;
    border-right: 6px solid transparent;
    border-image: var(--gothic-iron-frame) 5% / 0 6px 0 0 stretch;
    box-sizing: border-box;
    content: "";
    filter: brightness(1.16) contrast(1.08) saturate(0.78);
    pointer-events: none;
    position: absolute;
    transform: scaleX(-1);
    width: 6px;
    z-index: 4;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .brand::after {
    bottom: 6px;
    right: -6px;
    top: 6px;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .chat::before {
    bottom: 6px;
    left: 0;
    top: 6px;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .app-header-inner::after {
    background-color: #080909;
    background-image: var(--gothic-header-rail-repeat), var(--gothic-header-rail-repeat);
    background-position: center top, center bottom;
    background-repeat: no-repeat;
    background-size: auto 6px;
    bottom: -6px;
    content: "";
    height: 12px;
    left: calc(16.5rem - 6px);
    pointer-events: none;
    position: absolute;
    width: 12px;
    z-index: 6;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .brand > * {
    position: relative;
    z-index: 1;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .view-switch,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .toolbar {
    margin-left: 0.75rem;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tab-card {
    border-image: var(--gothic-iron-frame) 5% / 6px stretch !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .brand .eyebrow {
    color: #8f897e;
    text-shadow: 0 1px 0 #000;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .brand h1 {
    color: #b5aea1;
    text-shadow: 0 1px 0 #000;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .view-tab,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .view-settings {
    color: #928b7e;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .view-tab[aria-pressed="true"] {
    color: #bdb3a3 !important;
  }
}

html[data-theme="gothic"] .journal details[data-work-log-day-section]::before {
  border: 1px solid rgb(154 109 73 / 18%);
  border-radius: 0;
  content: "";
  inset: 3px;
  pointer-events: none;
  position: absolute;
}

html[data-theme="gothic"] .journal details[data-work-log-day-section]::after {
  background-image:
    radial-gradient(circle, rgb(224 194 151 / 2.2%) 0 0.5px, transparent 0.9px),
    radial-gradient(circle, rgb(0 0 0 / 28%) 0 0.5px, transparent 0.9px),
    radial-gradient(circle, rgb(165 89 55 / 1.8%) 0 0.5px, transparent 0.9px);
  background-position: 0 0, 3px 5px, 8px 2px;
  background-size: 7px 7px, 11px 11px, 17px 17px;
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

html[data-theme="gothic"] .journal summary[data-work-log-day] > strong {
  color: #e2d4bf;
  text-shadow: 0 1px 0 #000, 0 0 14px rgb(158 72 45 / 14%);
}

html[data-theme="gothic"] .journal details[data-work-log-turn-details] {
  background-image: var(--plate-texture), linear-gradient(176deg, rgb(34 27 22 / 92%), rgb(13 11 9 / 97%));
}

html[data-theme="gothic"] .journal details[data-work-log-turn-details][open] {
  box-shadow: inset var(--rail-width) 0 0 var(--accent), inset 0 1px 0 rgb(222 188 141 / 10%), 0 0 28px -20px rgb(168 72 43 / 68%), var(--turn-shadow);
}

html[data-theme="gothic"] .journal span[data-kilo-usage],
html[data-theme="gothic"] .journal span[data-mega-usage],
html[data-theme="gothic"] .journal span[data-high-usage] {
  background: rgb(154 68 43 / 6%);
  box-shadow: inset 0 0 0 1px rgb(154 68 43 / 14%);
}

/* Неровный источник света остаётся привязан к сцене, а не к интерфейсу. */
@keyframes gothic-fire {
  0%, 100% { filter: brightness(0.94); opacity: 0.32; }
  13% { filter: brightness(1.14); opacity: 0.56; }
  27% { filter: brightness(0.98); opacity: 0.38; }
  44% { filter: brightness(1.22); opacity: 0.64; }
  61% { filter: brightness(1); opacity: 0.42; }
  82% { filter: brightness(1.08); opacity: 0.5; }
}

html[data-theme="gothic"] body::before {
  animation: gothic-fire 7s ease-in-out infinite;
  background-image: radial-gradient(46% 78% at 88% 52%, rgb(238 164 58 / 38%), rgb(164 80 20 / 12%) 46%, transparent 74%);
  background-position: 88% 52%;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.42;
}

html[data-background-override="true"][data-background="gothic"] { --hub-background-color: #05080c; --hub-background-image: linear-gradient(90deg, rgb(2 5 9 / 16%), transparent 42% 72%, rgb(0 0 0 / 12%)), var(--gothic-image, url("./gothic-khorinis-harbor.jpg?v=1f41339934cb")); --hub-background-position: center, 50% 52%; }
html[data-background-override="true"][data-background="gothic-old-camp"] { --hub-background-color: #05080c; --hub-background-image: linear-gradient(90deg, rgb(2 4 8 / 18%), transparent 46% 72%, rgb(0 0 0 / 10%)), var(--gothic-old-camp-image, url("./gothic-old-camp.jpg?v=7699c09177ec")); --hub-background-position: center, 52% 50%; }
html[data-background-override="true"][data-background="gothic-swamp-camp"] { --hub-background-color: #040807; --hub-background-image: linear-gradient(90deg, rgb(1 5 5 / 16%), transparent 44% 72%, rgb(0 0 0 / 12%)), var(--gothic-swamp-camp-image, url("./gothic-swamp-camp.jpg?v=f8876864b8ba")); --hub-background-position: center, 50% 50%; }
html[data-background-override="true"][data-background="gothic-new-camp"] { --hub-background-color: #04070b; --hub-background-image: linear-gradient(90deg, rgb(2 5 9 / 14%), transparent 44% 74%, rgb(0 0 0 / 10%)), var(--gothic-new-camp-image, url("./gothic-new-camp.jpg?v=f193f6efa8d6")); --hub-background-position: center, 54% 50%; }
html[data-background-override="true"][data-background="gothic-xardas-tower"] { --hub-background-color: #03070b; --hub-background-image: linear-gradient(90deg, rgb(2 5 9 / 12%), transparent 42% 74%, rgb(0 0 0 / 10%)), var(--gothic-xardas-tower-image, url("./gothic-xardas-tower.jpg?v=86928a4c8b38")); --hub-background-position: center, 50% 50%; }
html[data-background-override="true"][data-background="gothic-sleeper-temple"] { --hub-background-color: #090503; --hub-background-image: linear-gradient(90deg, rgb(8 3 1 / 14%), transparent 44% 72%, rgb(0 0 0 / 12%)), var(--gothic-sleeper-temple-image, url("./gothic-sleeper-temple.jpg?v=fdd63e9f6fd6")); --hub-background-position: center, 50% 50%; }
html[data-background-override="true"][data-background="gothic-innos-monastery"] { --hub-background-color: #05080b; --hub-background-image: linear-gradient(90deg, rgb(2 5 8 / 16%), transparent 44% 72%, rgb(0 0 0 / 12%)), var(--gothic-innos-monastery-image, url("./gothic-innos-monastery.jpg?v=77863edab3d8")); --hub-background-position: center, 50% 50%; }
html[data-background-override="true"][data-background="gothic-sun-circle"] { --hub-background-color: #050806; --hub-background-image: linear-gradient(90deg, rgb(2 5 3 / 14%), transparent 44% 72%, rgb(0 0 0 / 10%)), var(--gothic-sun-circle-image, url("./gothic-sun-circle.jpg?v=083a89ad257a")); --hub-background-position: center, 50% 50%; }
html[data-background-override="true"][data-background="gothic-irdorath"] { --hub-background-color: #070503; --hub-background-image: linear-gradient(90deg, rgb(6 3 1 / 14%), transparent 44% 72%, rgb(0 0 0 / 12%)), var(--gothic-irdorath-image, url("./gothic-irdorath.jpg?v=1ea92b3428f7")); --hub-background-position: center, 50% 52%; }
html[data-background-override="true"][data-background="gothic-adanos-temple"] { --hub-background-color: #030806; --hub-background-image: linear-gradient(90deg, rgb(1 5 4 / 14%), transparent 44% 72%, rgb(0 0 0 / 12%)), var(--gothic-adanos-temple-image, url("./gothic-adanos-temple.jpg?v=7f3365e4a6e6")); --hub-background-position: center, 50% 50%; }

@keyframes gothic-scene-fog {
  0%, 100% { opacity: 0.34; transform: translate3d(-2%, 0.5%, 0) scale(1.02); }
  50% { opacity: 0.62; transform: translate3d(3%, -0.5%, 0) scale(1.06); }
}

@keyframes gothic-scene-glow {
  0%, 100% { opacity: 0.3; }
  38% { opacity: 0.66; }
  52% { opacity: 0.44; }
  70% { opacity: 0.72; }
}

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

html[data-background-override="true"][data-background="gothic"] body::before { animation: gothic-scene-fog 30s ease-in-out infinite !important; background-image: radial-gradient(58% 30% at 34% 70%, rgb(118 152 190 / 16%), transparent 78%), radial-gradient(18% 16% at 70% 34%, rgb(210 225 244 / 18%), transparent 74%) !important; opacity: 0.42 !important; }
html[data-background-override="true"][data-background="gothic-old-camp"] body::before { animation: gothic-scene-fog 32s ease-in-out infinite !important; background-image: radial-gradient(62% 34% at 38% 68%, rgb(122 148 178 / 18%), transparent 80%), radial-gradient(18% 14% at 66% 40%, rgb(214 228 244 / 18%), transparent 74%) !important; opacity: 0.44 !important; }
html[data-background-override="true"][data-background="gothic-swamp-camp"] body::before { animation: gothic-scene-glow 11s ease-in-out infinite !important; background-image: radial-gradient(28% 32% at 40% 72%, rgb(222 151 74 / 18%), transparent 76%), radial-gradient(54% 34% at 46% 66%, rgb(76 126 112 / 14%), transparent 80%) !important; opacity: 0.4 !important; }
html[data-background-override="true"][data-background="gothic-new-camp"] body::before { animation: gothic-scene-fog 34s ease-in-out infinite !important; background-image: radial-gradient(58% 34% at 52% 70%, rgb(106 145 182 / 18%), transparent 80%), radial-gradient(22% 18% at 52% 58%, rgb(92 139 211 / 16%), transparent 76%) !important; opacity: 0.42 !important; }
html[data-background-override="true"][data-background="gothic-xardas-tower"] body::before { animation: gothic-scene-fog 36s ease-in-out infinite !important; background-image: radial-gradient(44% 32% at 50% 68%, rgb(116 151 176 / 16%), transparent 80%), radial-gradient(24% 24% at 54% 28%, rgb(117 178 198 / 18%), transparent 78%) !important; opacity: 0.42 !important; }
html[data-background-override="true"][data-background="gothic-sleeper-temple"] body::before { animation: gothic-scene-glow 8s ease-in-out infinite !important; background-image: radial-gradient(36% 44% at 54% 54%, rgb(236 92 38 / 22%), rgb(132 47 20 / 10%) 54%, transparent 80%) !important; opacity: 0.46 !important; }
html[data-background-override="true"][data-background="gothic-innos-monastery"] body::before { animation: gothic-scene-fog 34s ease-in-out infinite !important; background-image: radial-gradient(64% 34% at 42% 70%, rgb(112 140 172 / 18%), transparent 80%), radial-gradient(18% 16% at 58% 30%, rgb(211 224 240 / 16%), transparent 74%) !important; opacity: 0.42 !important; }
html[data-background-override="true"][data-background="gothic-sun-circle"] body::before { animation: gothic-scene-glow 10s ease-in-out infinite !important; background-image: radial-gradient(24% 30% at 50% 60%, rgb(238 164 72 / 20%), transparent 74%), radial-gradient(54% 34% at 48% 66%, rgb(86 130 101 / 14%), transparent 80%) !important; opacity: 0.4 !important; }
html[data-background-override="true"][data-background="gothic-irdorath"] body::before { animation: gothic-scene-glow 9s ease-in-out infinite !important; background-image: radial-gradient(34% 40% at 50% 72%, rgb(221 105 47 / 18%), transparent 76%), radial-gradient(50% 34% at 46% 64%, rgb(91 108 124 / 12%), transparent 80%) !important; opacity: 0.42 !important; }
html[data-background-override="true"][data-background="gothic-adanos-temple"] body::before { animation: gothic-scene-fog 36s ease-in-out infinite !important; background-image: radial-gradient(60% 36% at 50% 70%, rgb(74 122 111 / 16%), transparent 80%), radial-gradient(20% 18% at 34% 24%, rgb(180 202 218 / 14%), transparent 76%) !important; opacity: 0.4 !important; }

/* Железная подложка повторяется на всю высоту описи. */
html[data-theme="gothic"] .task-list {
  background-color: rgb(8 9 9 / 96%);
  background-image:
    linear-gradient(#0a0b0b, #0a0b0b),
    var(--gothic-panel-texture-preview);
  background-blend-mode: color, normal;
  background-position: left top;
  background-repeat: repeat;
  background-size: 24rem 24rem;
  display: flex;
  flex-direction: column;
}

html[data-theme="gothic"] .task-workspace-item,
html[data-theme="gothic"] .task-search,
html[data-theme="gothic"] .stream-chat-preview,
html[data-theme="gothic"] .dialog-settings,
html[data-theme="gothic"] .composer {
  background-color: rgb(9 10 10 / 90%);
  background-image:
    linear-gradient(rgb(7 8 8 / 70%), rgb(7 8 8 / 70%)),
    var(--gothic-panel-texture-preview);
  background-blend-mode: color, normal;
  background-size: 24rem 24rem;
}

html[data-theme="gothic"] .task-workspace-item {
  border: 1px solid rgb(112 91 67 / 46%);
  box-shadow: inset 0 1px 0 rgb(216 184 140 / 4%), inset 0 -1px 0 rgb(0 0 0 / 82%);
  margin-bottom: 0.2rem;
}

html[data-theme="gothic"] .task-workspace-item[data-selected] {
  background-color: rgb(53 31 23 / 90%);
  box-shadow: inset 2px 0 0 var(--accent), inset 0 0 24px rgb(112 45 27 / 18%);
}

html[data-theme="gothic"] .chat-pane,
html[data-theme="gothic"] .stream-chat-preview {
  background-color: rgb(7 8 8 / 58%);
}

html[data-theme="gothic"] .stream-chat-preview-log {
  background: transparent;
}

html[data-theme="gothic"] .msg {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: rgb(9 10 10 / 97%);
  background-image:
    linear-gradient(rgb(7 8 8 / 68%), rgb(7 8 8 / 68%)),
    var(--gothic-panel-texture-preview);
  background-blend-mode: color, normal;
  background-size: 22rem 22rem;
  border: 2px solid transparent;
  border-image: var(--gothic-iron-frame) 34 / 2px stretch;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgb(206 166 113 / 5%), 0 8px 18px -14px #000;
  max-width: calc(100% - 0.3rem);
  padding: 0.58rem 0.68rem;
}

html[data-theme="gothic"] .msg-user {
  background-color: rgb(47 27 21 / 94%);
  background-image:
    linear-gradient(rgb(58 29 22 / 64%), rgb(36 18 14 / 72%)),
    var(--gothic-panel-texture-preview);
  border-color: rgb(166 83 57 / 64%);
  max-width: min(34rem, 82%);
}

html[data-theme="gothic"] .msg:not(.msg-user) {
  width: calc(100% - 0.3rem);
}

html[data-theme="gothic"] .msg-live {
  border-style: solid;
  box-shadow: inset 2px 0 0 var(--accent), 0 8px 18px -14px #000;
}

html[data-theme="gothic"] .option-chip,
html[data-theme="gothic"] .composer,
html[data-theme="gothic"] .composer input,
html[data-theme="gothic"] .composer textarea,
html[data-theme="gothic"] .composer button {
  border-radius: 0;
}

html[data-theme="gothic"] .composer-input {
  background: rgb(5 6 6 / 88%);
  border-color: rgb(105 100 91 / 54%);
}

html[data-theme="gothic"] .composer-send,
html[data-theme="gothic"] .chip-button.primary {
  background: #241613;
  background-image: var(--gothic-panel-texture-preview);
  border-color: #764438;
  color: #c7bcb0;
}

html[data-theme="gothic"] .composer-slash,
html[data-theme="gothic"] .composer-attach,
html[data-theme="gothic"] .chat-stop-bottom,
html[data-theme="gothic"] .composer-send {
  color: var(--accent) !important;
}

/* Крупные поверхности снова обрамлены кованым железом. Матовая версия рамки
   сохраняет углы и заклёпки, но не содержит центральных крестов и засветов. */
@media (min-width: 860px) {
  html[data-theme="gothic"]:not([data-surface="mobile"]) {
    --shell-header-padding: 0;
    --task-rail-width: 16.5rem;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .workspace:has(.stream-chat-columns[data-multi-stream]) {
    --task-rail-width: 16.5rem;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-rail,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-rail,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .chat {
    background-color: rgb(7 8 8 / 97%);
    background-image:
      linear-gradient(rgb(8 9 9 / 74%), rgb(8 9 9 / 74%)),
      var(--gothic-panel-texture-preview);
    background-blend-mode: color, normal;
    background-size: 28rem 28rem;
    box-shadow: inset 0 0 0 1px rgb(218 184 137 / 7%), inset 0 0 2rem rgb(0 0 0 / 48%);
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) body > .workspace {
    column-gap: 0;
    margin-inline: 0;
    margin-top: 0;
    max-width: none;
    padding-inline: 0;
    width: 100%;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-chat-columns {
    gap: 0.16rem;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-chat-columns > .chat-pane,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-chat-preview {
    background-color: rgb(7 8 8 / 94%);
    background-image:
      linear-gradient(rgb(8 9 9 / 74%), rgb(8 9 9 / 74%)),
      var(--gothic-panel-texture-preview);
    background-blend-mode: color, normal;
    border: 6px solid transparent;
    border-image: var(--gothic-iron-frame) 5% / 6px stretch;
    box-shadow: inset 0 0 0 1px rgb(220 184 132 / 7%), inset 0 0 2.2rem rgb(0 0 0 / 52%);
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .chat-log {
    max-width: 72rem;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .composer {
    border: 6px solid transparent;
    border-image: var(--gothic-iron-frame) 5% / 6px stretch;
    padding: 0.35rem 0.45rem max(0.35rem, env(safe-area-inset-bottom));
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-search,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .composer-input,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .icon-button,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .chip-button {
    background-color: rgb(8 9 9 / 92%);
    background-image:
      linear-gradient(rgb(8 9 9 / 72%), rgb(8 9 9 / 72%)),
      var(--gothic-panel-texture-preview);
    background-blend-mode: color, normal;
    background-size: 18rem 18rem;
    border-color: rgb(106 101 92 / 48%);
    border-radius: 0;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-workspace-name,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tab-title,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-body {
    text-shadow: 0 1px 0 #000;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-workspace-name {
    font-size: 0.77rem;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-head {
    font-size: 0.68rem;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-body,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-feed {
    font-size: 0.76rem;
    line-height: 1.44;
  }
}

/* Три рабочие панели занимают всю сцену; чат получает оставшееся место между
   навигацией Workspace и правой колонкой активности. */
@media (min-width: 1120px) {
  html[data-theme="gothic"]:not([data-surface="mobile"]) body > .workspace {
    grid-template-columns: var(--task-rail-width) minmax(0, 1fr) var(--activity-rail-width);
    justify-content: stretch;
    padding: 0;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .workspace:has(.chat-pane[data-dialog-settings-open]),
  html[data-theme="gothic"]:not([data-surface="mobile"])
    .workspace:has(.stream-chat-columns[data-multi-stream]) {
    grid-template-columns: var(--task-rail-width) minmax(0, 1fr) var(--activity-rail-width);
    padding-right: 0;
  }
}

@media (max-width: 720px) {
  html[data-background-override="true"][data-background="gothic"] { --hub-background-position: center, 40% 52%; }
  html[data-background-override="true"][data-background="gothic-old-camp"] { --hub-background-position: center, 60% 50%; }
  html[data-background-override="true"][data-background="gothic-swamp-camp"] { --hub-background-position: center, 42% 50%; }
  html[data-background-override="true"][data-background="gothic-new-camp"] { --hub-background-position: center, 50% 50%; }
  html[data-background-override="true"][data-background="gothic-xardas-tower"] { --hub-background-position: center, 56% 50%; }
  html[data-background-override="true"][data-background="gothic-sleeper-temple"] { --hub-background-position: center, 50% 50%; }
  html[data-background-override="true"][data-background="gothic-innos-monastery"] { --hub-background-position: center, 52% 50%; }
  html[data-background-override="true"][data-background="gothic-sun-circle"] { --hub-background-position: center, 50% 50%; }
  html[data-background-override="true"][data-background="gothic-irdorath"] { --hub-background-position: center, 50% 52%; }
  html[data-background-override="true"][data-background="gothic-adanos-temple"] { --hub-background-position: center, 55% 50%; }
  html[data-theme="gothic"] .task-list { background-image: none; }
}

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

/* ===== Approved Gothic Theme Lab refinement, 2026-08-17 ===== */
html[data-theme="gothic"] {
  --accent: #81251f;
  --accent-soft: rgb(129 37 31 / 24%);
  --accent-line: rgb(129 37 31 / 72%);
  --accent-glow: 0 0 10px rgb(129 37 31 / 34%);
  --selection: rgb(129 37 31 / 34%);
  --gothic-blade-frame-preview: url("./gothic-blade-frame.png");
  --gothic-blade-divider-preview: url("./gothic-blade-divider.png");
  --gothic-blade-divider-horizontal-preview: url("./gothic-blade-divider-horizontal.png");
  --gothic-blade-joint-task-top-preview: url("./gothic-blade-joint-top-left-v12.png");
  --gothic-blade-joint-task-bottom-preview: url("./gothic-blade-joint-bottom-left-v12.png");
  --gothic-blade-joint-activity-top-preview: url("./gothic-blade-joint-top-right-v12.png");
  --gothic-blade-joint-activity-bottom-preview: url("./gothic-blade-joint-bottom-right-v12.png");
  --gothic-workspace-card-texture-preview: url("./gothic-workspace-card-texture.png");
  --gothic-panel-texture-preview: none;
  --gothic-panel-base-color: #0b0c0e;
  --gothic-panel-base-image:
    linear-gradient(rgb(8 9 10 / 14%), rgb(8 9 10 / 14%)),
    var(--gothic-panel-texture-preview);
  --gothic-panel-base-position: left top, left top;
  --gothic-panel-base-size: auto, 32rem 32rem;
  --shell-panel-border: 0;
  --shell-panel-border-image: none;
  --shell-panel-border-width: 0;
  --shell-panel-border-image-width: 0;
  --shell-chat-border: 0;
  --shell-chat-border-image: none;
  --shell-chat-panel-border-width: 0;
  --shell-chat-panel-border-image-width: 0;
  --shell-stream-tabs-border: 0;
  --shell-stream-tabs-border-bottom: 1px solid rgb(116 111 101 / 42%);
  --shell-tab-active-shadow: inset 0 -2px 0 #81251f;
}

html[data-theme="gothic"] .journal details[data-work-log-turn-details] {
  background-color: #15181b;
  background-image:
    linear-gradient(180deg, rgb(3 5 7 / 10%), rgb(1 3 5 / 16%)),
    var(--gothic-workspace-card-texture-preview);
  background-blend-mode: normal, normal;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  background-size: auto, 22rem 22rem;
}

html[data-theme="gothic"] .task-card-modal > header .icon-button {
  background-color: #15181b;
  background-image:
    linear-gradient(180deg, rgb(3 5 7 / 10%), rgb(1 3 5 / 16%)),
    var(--gothic-workspace-card-texture-preview);
  background-blend-mode: normal, normal;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  background-size: auto, 22rem 22rem;
}

html[data-theme="gothic"] body::before {
  background-image:
    radial-gradient(34% 28% at 50% 18%, rgb(150 174 206 / 18%), transparent 78%),
    radial-gradient(22% 30% at 67% 48%, rgb(108 130 154 / 10%), transparent 80%) !important;
  mix-blend-mode: screen !important;
  opacity: 0.38 !important;
}

@media (min-width: 860px) {
  html[data-theme="gothic"]:not([data-surface="mobile"]),
  html[data-theme="gothic"]:not([data-surface="mobile"]) body {
    background-color: var(--gothic-panel-base-color) !important;
    background-image: var(--gothic-panel-base-image) !important;
    background-attachment: fixed, fixed !important;
    background-position: var(--gothic-panel-base-position) !important;
    background-repeat: repeat !important;
    background-size: var(--gothic-panel-base-size) !important;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]),
  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) body {
    overflow: hidden !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .app-header::before {
    content: none !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .app-header {
    background-color: var(--gothic-panel-base-color) !important;
    background-image: var(--gothic-panel-base-image) !important;
    background-attachment: fixed, fixed !important;
    background-position: var(--gothic-panel-base-position) !important;
    background-repeat: repeat, repeat !important;
    background-size: var(--gothic-panel-base-size) !important;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) body > .workspace {
    background-color: transparent !important;
    background-image: none !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .app-header {
    --shell-header-height: calc(3.625rem + 2px);
    z-index: 3 !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .app-header-inner {
    --gothic-header-menu-offset: clamp(1rem, 4vw, 3.925rem);
    --gothic-header-control-width: clamp(
      2.2rem,
      calc(
        (100vw - var(--task-rail-width) - var(--activity-rail-width) - var(--gothic-header-menu-offset) - 2rem) / 6
      ),
      6.7rem
    );
    --gothic-toolbar-width: var(--gothic-header-control-width);
    justify-content: flex-start !important;
    transform: translateY(0.4375rem);
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .brand {
    background: transparent !important;
    box-shadow: none !important;
    height: 100% !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .brand::before,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .brand::after,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .app-header-inner::after,
  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .chat::before {
    content: none !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .view-tab svg {
    display: none !important;
  }

  html[data-theme="gothic"][data-surface]:not([data-surface="mobile"]) .view-switch {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: var(--shell-view-switch-gap) !important;
    left: 50% !important;
    margin-left: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    transform: translateX(-50%) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .view-tab {
    background-color: #100f0f !important;
    background-image: var(--gothic-panel-texture-preview) !important;
    background-blend-mode: multiply;
    background-size: 24rem 24rem !important;
    border: 1px solid rgb(79 75 79 / 28%) !important;
    border-radius: 0 !important;
    box-shadow:
      inset 0 1px 0 rgb(126 120 116 / 7%),
      inset 0 -1px 0 rgb(0 0 0 / 42%) !important;
    color: #a29d98 !important;
    flex: 0 0 var(--gothic-header-control-width);
    font-size: clamp(0.4rem, 0.72vw, 0.65rem) !important;
    justify-content: center;
    letter-spacing: 0.045em;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0.34rem 0.86rem !important;
    text-shadow: 0 1px 0 #000;
    text-transform: uppercase;
    width: var(--gothic-header-control-width);
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .view-tab:hover {
    color: #c5b9aa !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .view-tab[aria-pressed="true"] {
    background-color: #15100f !important;
    background-image: var(--gothic-panel-texture-preview) !important;
    background-blend-mode: multiply;
    background-size: 24rem 24rem !important;
    border: 1px solid rgb(79 75 79 / 48%) !important;
    box-shadow:
      inset 1px 0 0 rgb(119 111 118 / 12%),
      inset -1px 0 0 rgb(119 111 118 / 12%),
      0 5px 10px rgb(0 0 0 / 48%) !important;
    color: #e1ded9 !important;
    overflow: hidden;
    padding: 0.34rem 0.86rem !important;
    position: relative;
    text-shadow: 0 1px 0 #000, 0 0 7px rgb(110 30 26 / 22%);
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .view-tab[aria-pressed="true"]::before,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .view-tab[aria-pressed="true"]::after {
    background: linear-gradient(90deg, transparent, rgb(94 25 22 / 42%) 18%, #81251f 50%, rgb(94 25 22 / 42%) 82%, transparent) !important;
    content: "" !important;
    height: 1px !important;
    left: 3px !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 3px !important;
    z-index: 2;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .view-tab[aria-pressed="true"]::before {
    box-shadow: 0 4px 8px rgb(105 27 23 / 42%) !important;
    top: 1px !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .view-tab[aria-pressed="true"]::after {
    bottom: 1px !important;
    box-shadow: 0 -4px 8px rgb(105 27 23 / 42%) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .toolbar {
    gap: 0.2rem !important;
    margin: 0 !important;
    position: absolute !important;
    right: var(--gothic-header-edge-inset, 2.45rem) !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: auto !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .connection-banner:not([hidden]) {
    height: 2rem !important;
    left: auto !important;
    max-width: min(42rem, calc(100vw - var(--task-rail-width) - var(--activity-rail-width) - var(--gothic-toolbar-width) - 2rem)) !important;
    min-height: 2rem !important;
    overflow: hidden !important;
    position: absolute !important;
    right: calc(100% + 0.75rem) !important;
    text-overflow: ellipsis;
    top: 50% !important;
    transform: translateY(-50%) !important;
    white-space: nowrap;
    width: max-content !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .toolbar .view-settings {
    background-color: #100f0f !important;
    background-image: var(--gothic-panel-texture-preview) !important;
    background-blend-mode: multiply;
    background-size: 24rem 24rem !important;
    border: 1px solid rgb(79 75 79 / 28%) !important;
    border-radius: 0 !important;
    box-shadow:
      inset 0 1px 0 rgb(126 120 116 / 7%),
      inset 0 -1px 0 rgb(0 0 0 / 42%) !important;
    color: #a29d98 !important;
    flex: 0 0 var(--gothic-header-control-width);
    font-size: clamp(0.4rem, 0.72vw, 0.65rem) !important;
    justify-content: center;
    letter-spacing: 0.045em;
    margin: 0 !important;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0.34rem 0.86rem !important;
    text-shadow: 0 1px 0 #000;
    text-transform: uppercase;
    width: var(--gothic-header-control-width);
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .toolbar .view-settings:hover {
    color: #c5b9aa !important;
    text-shadow: 0 1px 0 #000, 0 0 7px rgb(184 72 58 / 24%);
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .toolbar .view-settings svg {
    display: none !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .toolbar .view-settings::after {
    content: "Настройки";
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .brand-text .eyebrow {
    display: none !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .brand-text h1 {
    font-size: 0 !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .brand-text h1::after {
    content: "Agent Hub";
    font-size: 1.08rem;
    letter-spacing: 0.08em;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) body > .workspace {
    box-sizing: border-box;
    isolation: isolate;
    overflow: visible;
    padding: 14px !important;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) body > .workspace::before {
    border: 0 solid transparent;
    border-image: var(--gothic-blade-frame-preview) 62 / 48px stretch;
    content: "";
    filter: brightness(0.78) contrast(1.14) saturate(0.84);
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 20;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"])
    body > .workspace::after {
    border: 14px solid var(--gothic-panel-base-color);
    box-sizing: border-box;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 19;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-rail,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-rail,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .chat {
    border: 0 !important;
    border-image: none !important;
    border-radius: 0 !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-rail,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-rail {
    background-color: var(--gothic-panel-base-color) !important;
    background-image: var(--gothic-panel-base-image) !important;
    background-attachment: fixed, fixed !important;
    background-position: var(--gothic-panel-base-position) !important;
    background-repeat: repeat, repeat !important;
    background-size: var(--gothic-panel-base-size) !important;
    overflow: visible !important;
    position: relative;
    z-index: auto !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-list,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-rail-content,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-streams,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .workspace-task-panel {
    background-color: var(--gothic-panel-base-color) !important;
    background-image: var(--gothic-panel-base-image) !important;
    background-attachment: fixed, fixed !important;
    background-position: var(--gothic-panel-base-position) !important;
    background-repeat: repeat, repeat !important;
    background-size: var(--gothic-panel-base-size) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) {
    --gothic-rail-content-inset: 1rem;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-rail-head,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-rail-head,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-section-head {
    padding-left: var(--gothic-rail-content-inset) !important;
    padding-right: var(--gothic-rail-content-inset) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-rail-head,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-rail-head {
    padding-top: var(--gothic-rail-content-inset) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-rail-title {
    margin-left: 0.75rem !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-search {
    background-color: #100f0f !important;
    background-image: var(--gothic-panel-texture-preview) !important;
    background-blend-mode: multiply !important;
    background-position: center !important;
    background-repeat: repeat !important;
    background-size: 24rem 24rem !important;
    margin-left: var(--gothic-rail-content-inset) !important;
    margin-right: var(--gothic-rail-content-inset) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-rail .task-new {
    background-color: #100f0f !important;
    background-image: var(--gothic-panel-texture-preview) !important;
    background-blend-mode: multiply !important;
    background-position: center !important;
    background-repeat: repeat !important;
    background-size: 24rem 24rem !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .dialog-settings {
    background-color: var(--gothic-panel-base-color) !important;
    background-image: var(--gothic-panel-base-image) !important;
    background-attachment: fixed, fixed !important;
    background-position: var(--gothic-panel-base-position) !important;
    background-repeat: repeat, repeat !important;
    background-size: var(--gothic-panel-base-size) !important;
    background-blend-mode: normal, normal !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-list,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-stream-list {
    padding-left: var(--gothic-rail-content-inset) !important;
    padding-right: var(--gothic-rail-content-inset) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .workspace-task-list {
    padding-left: 0.05rem !important;
    padding-right: 0.05rem !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-list,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-rail-content {
    padding-bottom: var(--gothic-rail-content-inset) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .workspace-task-panel {
    padding: var(--gothic-rail-content-inset) 0.5rem !important;
  }

  html[data-theme="gothic"][data-activity-task-column="separate"][data-activity-column-count="2"]:not([data-surface="mobile"])
    .workspace-task-panel {
    padding-right: 0.25rem !important;
  }

  html[data-theme="gothic"][data-activity-task-column="separate"][data-activity-column-count="2"]:not([data-surface="mobile"])
    .activity-stream-list {
    padding-left: 0.75rem !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .chat {
    background-color: transparent !important;
    background-image: none !important;
    z-index: 1;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tabs {
    background-color: var(--gothic-panel-base-color) !important;
    background-image:
      var(--gothic-panel-base-image),
      var(--gothic-blade-divider-horizontal-preview) !important;
    background-attachment: fixed, fixed, scroll !important;
    background-position: var(--gothic-panel-base-position), left bottom !important;
    background-repeat: repeat, repeat, repeat-x !important;
    background-size: var(--gothic-panel-base-size), 276px 11px !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    border-image: none !important;
    padding: var(--gothic-rail-content-inset) !important;
    padding-bottom: 4px !important;
  }

  html[data-theme="gothic"][data-view="chat"][data-surface]:not([data-surface="mobile"]) .stream-tabs {
    flex-basis: calc(var(--dialog-stream-tabs-height) + 6px) !important;
    height: calc(var(--dialog-stream-tabs-height) + 6px) !important;
    min-height: calc(var(--dialog-stream-tabs-height) + 6px) !important;
    padding: 6px 10px 0 !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .composer {
    background: transparent !important;
    border: 0 !important;
    border-image: none !important;
    box-shadow: none !important;
    padding: var(--gothic-rail-content-inset) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-chat-columns > .chat-pane {
    background-blend-mode: normal !important;
    background-color: transparent !important;
    background-image: none !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    border-image-width: 0 6px 0 6px !important;
    box-shadow: none !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-workspace-item,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-stream-item,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tab-card {
    background-color: #151618 !important;
    background-image:
      linear-gradient(rgb(24 25 27 / 24%), rgb(24 25 27 / 24%)),
      var(--gothic-panel-texture-preview) !important;
    background-blend-mode: normal, normal !important;
    background-position: center, center !important;
    background-repeat: repeat, repeat !important;
    background-size: auto, 28rem 28rem !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg:not(.msg-user) {
    background-color: #151618 !important;
    background-image:
      linear-gradient(rgb(24 25 27 / 24%), rgb(24 25 27 / 24%)),
      var(--gothic-workspace-card-texture-preview) !important;
    background-blend-mode: normal, normal !important;
    background-position: center, center !important;
    background-repeat: repeat, repeat !important;
    background-size: auto, 28rem 28rem !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-workspace-item[data-selected],
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-stream-item[data-current],
  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tab[aria-pressed="true"] .stream-tab-card {
    background-color: #281816 !important;
    background-image:
      linear-gradient(rgb(48 24 21 / 54%), rgb(31 17 16 / 58%)),
      var(--gothic-panel-texture-preview) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-workspace-item,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-stream-item .stream-tab-card {
    background-color: #111315 !important;
    background-image:
      linear-gradient(rgb(17 19 21 / 78%), rgb(10 11 13 / 84%)),
      var(--gothic-panel-texture-preview) !important;
    background-blend-mode: normal, normal !important;
    background-position: center, center !important;
    background-repeat: repeat, repeat !important;
    background-size: auto, 32rem 32rem !important;
    border: 1px solid rgb(104 108 111 / 34%) !important;
    border-image: none !important;
    border-radius: 0 !important;
    box-shadow:
      inset 0 1px 0 rgb(185 190 194 / 5%),
      inset 0 -1px 0 rgb(0 0 0 / 36%) !important;
    filter: none !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-workspace-item,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-stream-item .stream-tab-card {
    background-color: #15181b !important;
    background-image:
      linear-gradient(180deg, rgb(3 5 7 / 10%), rgb(1 3 5 / 16%)),
      var(--gothic-workspace-card-texture-preview) !important;
    background-blend-mode: normal, normal !important;
    background-position: center, center !important;
    background-repeat: no-repeat, repeat !important;
    background-size: auto, 22rem 22rem !important;
    border-color: rgb(92 98 104 / 58%) !important;
    border-radius: 4px !important;
    box-shadow:
      inset 0 0 0 1px rgb(0 0 0 / 68%),
      inset 0 1px 0 rgb(205 211 216 / 10%),
      0 0 0 1px rgb(0 0 0 / 42%),
      0 1px 3px rgb(0 0 0 / 58%) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tabs .stream-tab-card {
    background-color: #15181b !important;
    background-image:
      linear-gradient(180deg, rgb(3 5 7 / 10%), rgb(1 3 5 / 16%)),
      var(--gothic-workspace-card-texture-preview) !important;
    background-blend-mode: normal, normal !important;
    background-position: center, center !important;
    background-repeat: no-repeat, repeat !important;
    background-size: auto, 22rem 22rem !important;
    border-color: rgb(92 98 104 / 58%) !important;
    border-image: none !important;
    border-width: 1px !important;
    border-radius: 4px !important;
    box-shadow:
      inset 0 0 0 1px rgb(0 0 0 / 68%),
      inset 0 1px 0 rgb(205 211 216 / 10%),
      0 0 0 1px rgb(0 0 0 / 42%),
      0 1px 3px rgb(0 0 0 / 58%) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-workspace-name {
    color: rgb(224 226 228 / 94%) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-workspace-time {
    color: rgb(196 200 204 / 72%) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-stream-item {
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-workspace-item:hover,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-workspace-item:focus-visible,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-stream-item:hover .stream-tab-card,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-stream-item:focus-visible .stream-tab-card {
    background-color: #17191b !important;
    border-color: rgb(129 133 136 / 48%) !important;
    filter: none !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-workspace-item[data-selected],
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-stream-item[data-current] .stream-tab-card {
    background-color: #211413 !important;
    background-image:
      linear-gradient(rgb(38 20 18 / 58%), rgb(24 15 15 / 68%)),
      var(--gothic-panel-texture-preview) !important;
    border-color: rgb(129 37 31 / 72%) !important;
    box-shadow:
      inset 2px 0 0 #81251f,
      inset 0 1px 0 rgb(185 190 194 / 4%),
      inset 0 -1px 0 rgb(0 0 0 / 42%) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tab[aria-pressed="true"] .stream-tab-card {
    background-color: #15181b !important;
    background-image:
      linear-gradient(180deg, rgb(3 5 7 / 10%), rgb(1 3 5 / 16%)),
      var(--gothic-workspace-card-texture-preview) !important;
    border-color: rgb(92 98 104 / 58%) !important;
    border-width: 1px !important;
    box-shadow:
      inset 0 0 0 1px rgb(0 0 0 / 68%),
      inset 0 1px 0 rgb(205 211 216 / 10%),
      0 0 0 1px rgb(0 0 0 / 42%),
      0 1px 3px rgb(0 0 0 / 58%) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tab[aria-pressed="true"]::after {
    background: linear-gradient(90deg, transparent, rgb(94 25 22 / 42%) 18%, #81251f 50%, rgb(94 25 22 / 42%) 82%, transparent) !important;
    bottom: 0 !important;
    box-shadow: 0 -1px 6px rgb(105 27 23 / 50%) !important;
    content: "" !important;
    height: 2px !important;
    left: 10px !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 10px !important;
    z-index: 4;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-user {
    background-color: #151618 !important;
    background-image:
      linear-gradient(rgb(24 25 27 / 24%), rgb(24 25 27 / 24%)),
      var(--gothic-workspace-card-texture-preview) !important;
    background-blend-mode: normal, normal !important;
    background-position: center, center !important;
    background-repeat: repeat, repeat !important;
    background-size: auto, 28rem 28rem !important;
  }

  html[data-theme="gothic"] .msg-user-bubble {
    background: transparent !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .chat-log {
    max-width: 54rem !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-agent:not(.msg-live),
  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-user,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-live {
    border: 1px solid rgb(105 98 90 / 58%) !important;
    border-image: none !important;
    border-radius: 2px !important;
    box-shadow:
      inset 0 1px 0 rgb(205 211 216 / 6%),
      0 3px 10px rgb(0 0 0 / 58%) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-agent:not(.msg-live),
  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-user {
    border-color: transparent !important;
    box-shadow:
      inset 0 1px 0 rgb(202 168 145 / 12%),
      0 0 0 1px rgb(0 0 0 / 28%),
      0 4px 12px rgb(0 0 0 / 48%) !important;
    overflow: visible !important;
    position: relative !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-agent:not(.msg-live)::before,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-user::before {
    background: transparent;
    border: 1px solid rgb(74 68 61 / 78%);
    border-radius: 2px;
    box-sizing: border-box;
    content: "";
    inset: -1px;
    pointer-events: none;
    position: absolute;
    z-index: 3;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-agent:not(.msg-live)::after,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-user::after {
    background:
      radial-gradient(circle at 0 0, transparent 0 1px, rgb(84 74 64 / 76%) 1.1px 2.5px, transparent 2.6px) top left / 5px 5px no-repeat,
      radial-gradient(circle at 100% 0, transparent 0 1px, rgb(84 74 64 / 76%) 1.1px 2.5px, transparent 2.6px) top right / 5px 5px no-repeat,
      radial-gradient(circle at 0 100%, transparent 0 1px, rgb(84 74 64 / 76%) 1.1px 2.5px, transparent 2.6px) bottom left / 5px 5px no-repeat,
      radial-gradient(circle at 100% 100%, transparent 0 1px, rgb(84 74 64 / 76%) 1.1px 2.5px, transparent 2.6px) bottom right / 5px 5px no-repeat;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 4;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-agent:not(.msg-live) {
    max-width: min(28rem, 72%) !important;
    width: auto !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-user {
    border-color: transparent !important;
    max-width: min(22rem, 72%) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-live {
    border-color: rgb(126 64 52 / 72%) !important;
    margin: 0.7rem auto 0 !important;
    max-width: min(46rem, 88%) !important;
    width: auto !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .msg-system {
    border: 0 !important;
    border-image: none !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    max-width: min(46rem, 88%) !important;
    padding: 0.22rem 0.75rem !important;
    width: fit-content !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .chat-overlay-actions > .chip-button,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .chat-overlay-actions > .icon-button,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .composer-input,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .composer-main > .icon-button,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .composer-main > .chip-button,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .composer-send {
    background-color: #15181b !important;
    background-image:
      linear-gradient(180deg, rgb(3 5 7 / 16%), rgb(1 3 5 / 24%)),
      var(--gothic-workspace-card-texture-preview) !important;
    background-blend-mode: normal, normal !important;
    background-position: center, center !important;
    background-repeat: no-repeat, repeat !important;
    background-size: auto, 22rem 22rem !important;
    border-color: rgb(104 98 90 / 58%) !important;
    border-radius: 2px !important;
    box-shadow:
      inset 0 1px 0 rgb(205 211 216 / 7%),
      0 1px 3px rgb(0 0 0 / 48%) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .composer-send {
    border-color: rgb(126 64 52 / 78%) !important;
    color: var(--accent) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) * {
    scrollbar-color: rgb(118 111 99 / 58%) transparent !important;
    scrollbar-width: thin !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) *::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) *::-webkit-scrollbar-thumb {
    background: rgb(118 111 99 / 58%);
    border-radius: 0;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) *::-webkit-scrollbar-thumb:hover {
    background: rgb(142 132 117 / 72%);
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) *::-webkit-scrollbar-track,
  html[data-theme="gothic"]:not([data-surface="mobile"]) *::-webkit-scrollbar-corner {
    background: transparent;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-rail::after,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-rail::before {
    background-image: var(--gothic-blade-divider-preview);
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 11px 276px;
    bottom: 0;
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 11px;
    z-index: 22;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-rail::after {
    right: -5.5px;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-rail::before {
    left: -5.5px;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-rail::before,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-rail::after {
    bottom: -26px;
    content: "";
    pointer-events: none;
    position: absolute;
    top: -26px;
    width: 148px;
    z-index: 23;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .task-rail::before {
    background-image:
      var(--gothic-blade-joint-task-top-preview),
      var(--gothic-blade-joint-task-bottom-preview);
    background-position: center -1px, center calc(100% + 1px);
    background-repeat: no-repeat, no-repeat;
    background-size: 74px 150px, 74px 150px;
    right: -74px;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .activity-rail::after {
    background-image:
      var(--gothic-blade-joint-activity-top-preview),
      var(--gothic-blade-joint-activity-bottom-preview);
    background-position: center -1px, center calc(100% + 1px);
    background-repeat: no-repeat, no-repeat;
    background-size: 74px 150px, 74px 150px;
    left: -74px;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .chat-log,
  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .composer {
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: min(57.2rem, calc(100% - 4rem)) !important;
    width: min(57.2rem, calc(100% - 4rem)) !important;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .msg-stack {
    max-width: none !important;
    width: 100% !important;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .msg-agent:not(.msg-live) {
    box-sizing: border-box !important;
    max-width: none !important;
    padding: 0.75rem !important;
    width: min(45.5rem, 90%) !important;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .msg-user {
    align-self: flex-end !important;
    max-width: none !important;
    padding-top: 0.75rem !important;
    width: min(35.75rem, 78%) !important;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .msg-live {
    margin-top: 2rem !important;
    padding-left: 0.75rem !important;
    padding-top: 0.75rem !important;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .msg-user .msg-head {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .msg-user-bubble,
  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .composer-input > textarea,
  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .composer-input::after {
    padding: 0.75rem !important;
  }

  html[data-theme="gothic"][data-surface]:not([data-surface="mobile"]) .app-header .view-tab,
  html[data-theme="gothic"][data-view="chat"][data-surface]:not([data-surface="mobile"]) .app-header .refresh,
  html[data-theme="gothic"][data-view="chat"][data-surface]:not([data-surface="mobile"]) .stream-tabs .stream-tab,
  html[data-theme="gothic"][data-view="chat"][data-surface]:not([data-surface="mobile"]) .stream-tabs-controls .stream-tab-utility {
    background-color: #15181b !important;
    background-image:
      linear-gradient(180deg, rgb(3 5 7 / 10%), rgb(1 3 5 / 16%)),
      var(--gothic-workspace-card-texture-preview) !important;
    background-blend-mode: normal, normal !important;
    background-position: center, center !important;
    background-repeat: no-repeat, repeat !important;
    background-size: auto, 22rem 22rem !important;
  }

  html[data-theme="gothic"][data-view="chat"]:not([data-surface="mobile"]) .composer {
    background-color: var(--gothic-panel-base-color) !important;
    background-image: var(--gothic-panel-base-image) !important;
    background-position: var(--gothic-panel-base-position) !important;
    background-repeat: repeat !important;
    background-size: var(--gothic-panel-base-size) !important;
    border: 1px solid rgb(92 98 104 / 58%) !important;
    border-radius: 4px !important;
    box-shadow:
      inset 0 0 0 1px rgb(0 0 0 / 68%),
      inset 0 1px 0 rgb(205 211 216 / 10%),
      0 1px 4px rgb(0 0 0 / 58%) !important;
    padding: 0.75rem !important;
  }

  html[data-theme="gothic"][data-view="chat"][data-surface]:not([data-surface="mobile"])
    .stream-tabs .stream-tab[aria-pressed="true"] {
    background-color: #211413 !important;
    background-image:
      linear-gradient(rgb(38 20 18 / 58%), rgb(24 15 15 / 68%)),
      var(--gothic-workspace-card-texture-preview) !important;
  }

  html[data-theme="gothic"][data-view="chat"][data-surface]:not([data-surface="mobile"])
    .stream-tabs .stream-tab-card {
    background: transparent !important;
  }

  html[data-theme="gothic"][data-view="chat"][data-surface]:not([data-surface="mobile"])
    .stream-tabs-controls .stream-order-toggle {
    background-color: #15181b !important;
    background-image:
      linear-gradient(180deg, rgb(3 5 7 / 10%), rgb(1 3 5 / 16%)),
      var(--gothic-workspace-card-texture-preview) !important;
  }

  html[data-theme="gothic"][data-view="chat"][data-surface]:not([data-surface="mobile"])
    .task-rail-title {
    transform: translateX(0.5rem) !important;
  }
}

/* Mobile keeps the compact product layout and approved Gothic materials
   without the desktop ornamental shell frames. */
@media (max-width: 859px) {
  html[data-theme="gothic"][data-surface="mobile"] {
    --shell-header-background: var(--gothic-panel-base-color) var(--gothic-panel-base-image);
    --shell-header-frame-border: 0;
    --shell-header-frame-content: none;
    --shell-header-frame-filter: none;
    --shell-header-frame-image: none;
    --shell-panel-border: 0;
    --shell-panel-border-image: none;
    --shell-panel-border-width: 0;
    --shell-panel-border-image-width: 0;
    --shell-chat-border: 0;
    --shell-chat-border-image: none;
    --shell-chat-panel-border-width: 0;
    --shell-chat-panel-border-image-width: 0;
  }

  html[data-theme="gothic"][data-surface="mobile"],
  html[data-theme="gothic"][data-surface="mobile"] body,
  html[data-theme="gothic"][data-surface="mobile"] .app-header,
  html[data-theme="gothic"][data-surface="mobile"] .task-rail,
  html[data-theme="gothic"][data-surface="mobile"] .activity-rail,
  html[data-theme="gothic"][data-surface="mobile"] .task-list,
  html[data-theme="gothic"][data-surface="mobile"] .activity-rail-content,
  html[data-theme="gothic"][data-surface="mobile"] .activity-streams,
  html[data-theme="gothic"][data-surface="mobile"] .workspace-task-panel,
  html[data-theme="gothic"][data-surface="mobile"] .dialog-settings {
    background-color: var(--gothic-panel-base-color) !important;
    background-image: var(--gothic-panel-base-image) !important;
    background-position: var(--gothic-panel-base-position) !important;
    background-repeat: repeat !important;
    background-size: var(--gothic-panel-base-size) !important;
  }

  html[data-theme="gothic"][data-surface="mobile"] .chat {
    background-color: transparent !important;
    background-image: none !important;
  }

  html[data-theme="gothic"][data-surface="mobile"] .stream-chat-columns > .chat-pane {
    background-blend-mode: normal !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  html[data-theme="gothic"][data-surface="mobile"] .composer {
    background-color: var(--gothic-panel-base-color) !important;
    background-image: var(--gothic-panel-base-image) !important;
    background-blend-mode: normal, normal !important;
    background-position: var(--gothic-panel-base-position) !important;
    background-repeat: repeat !important;
    background-size: var(--gothic-panel-base-size) !important;
  }

  html[data-theme="gothic"][data-surface="mobile"] .task-workspace-item,
  html[data-theme="gothic"][data-surface="mobile"] .activity-stream-item .stream-tab-card,
  html[data-theme="gothic"][data-surface="mobile"] .stream-tab-card,
  html[data-theme="gothic"][data-surface="mobile"] .chat-overlay-actions > .chip-button,
  html[data-theme="gothic"][data-surface="mobile"] .chat-overlay-actions > .icon-button,
  html[data-theme="gothic"][data-surface="mobile"] .task-search,
  html[data-theme="gothic"][data-surface="mobile"] .task-rail .task-new,
  html[data-theme="gothic"][data-surface="mobile"] .composer-input,
  html[data-theme="gothic"][data-surface="mobile"] .composer-main > .icon-button,
  html[data-theme="gothic"][data-surface="mobile"] .composer-main > .chip-button,
  html[data-theme="gothic"][data-surface="mobile"] .composer-send {
    background-color: #15181b !important;
    background-image:
      linear-gradient(180deg, rgb(3 5 7 / 10%), rgb(1 3 5 / 16%)),
      var(--gothic-workspace-card-texture-preview) !important;
    background-blend-mode: normal, normal !important;
    background-position: center, center !important;
    background-repeat: no-repeat, repeat !important;
    background-size: auto, 22rem 22rem !important;
    border-color: rgb(92 98 104 / 58%) !important;
    border-image: none !important;
    border-radius: 4px !important;
    box-shadow:
      inset 0 0 0 1px rgb(0 0 0 / 68%),
      inset 0 1px 0 rgb(205 211 216 / 10%),
      0 0 0 1px rgb(0 0 0 / 42%),
      0 1px 3px rgb(0 0 0 / 58%) !important;
  }

html[data-theme="gothic"][data-surface="mobile"] .task-workspace-item[data-selected],
html[data-theme="gothic"][data-surface="mobile"] .activity-stream-item[data-current] .stream-tab-card,
html[data-theme="gothic"][data-surface="mobile"] .stream-tab[aria-pressed="true"] .stream-tab-card {
    background-color: #211413 !important;
    background-image:
      linear-gradient(rgb(38 20 18 / 58%), rgb(24 15 15 / 68%)),
      var(--gothic-panel-texture-preview) !important;
    border-color: rgb(129 37 31 / 72%) !important;
  }

  html[data-theme="gothic"][data-surface="mobile"] .msg:not(.msg-user),
  html[data-theme="gothic"][data-surface="mobile"] .msg-user {
    background-color: #151618 !important;
    background-image:
      linear-gradient(rgb(24 25 27 / 24%), rgb(24 25 27 / 24%)),
      var(--gothic-workspace-card-texture-preview) !important;
    background-position: center, center !important;
    background-repeat: repeat, repeat !important;
    background-size: auto, 28rem 28rem !important;
  }

  html[data-theme="gothic"][data-surface="mobile"] .msg-agent:not(.msg-live),
  html[data-theme="gothic"][data-surface="mobile"] .msg-user,
  html[data-theme="gothic"][data-surface="mobile"] .msg-live {
    border: 1px solid transparent !important;
    border-image: none !important;
    border-radius: 2px !important;
    box-shadow:
      inset 0 1px 0 rgb(202 168 145 / 12%),
      0 0 0 1px rgb(0 0 0 / 28%),
      0 4px 12px rgb(0 0 0 / 48%) !important;
    overflow: visible !important;
    position: relative !important;
  }

  html[data-theme="gothic"][data-surface="mobile"] .msg-agent:not(.msg-live)::before,
  html[data-theme="gothic"][data-surface="mobile"] .msg-user::before {
    background: transparent;
    border: 1px solid rgb(74 68 61 / 78%);
    border-radius: 2px;
    box-sizing: border-box;
    content: "";
    inset: -1px;
    pointer-events: none;
    position: absolute;
    z-index: 3;
  }

  html[data-theme="gothic"][data-surface="mobile"] .msg-agent:not(.msg-live)::after,
  html[data-theme="gothic"][data-surface="mobile"] .msg-user::after {
    background:
      radial-gradient(circle at 0 0, transparent 0 1px, rgb(84 74 64 / 76%) 1.1px 2.5px, transparent 2.6px) top left / 5px 5px no-repeat,
      radial-gradient(circle at 100% 0, transparent 0 1px, rgb(84 74 64 / 76%) 1.1px 2.5px, transparent 2.6px) top right / 5px 5px no-repeat,
      radial-gradient(circle at 0 100%, transparent 0 1px, rgb(84 74 64 / 76%) 1.1px 2.5px, transparent 2.6px) bottom left / 5px 5px no-repeat,
      radial-gradient(circle at 100% 100%, transparent 0 1px, rgb(84 74 64 / 76%) 1.1px 2.5px, transparent 2.6px) bottom right / 5px 5px no-repeat;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 4;
  }
}

@media (min-width: 860px) {
  html[data-theme="gothic"][data-stream-card-settings="true"]:not([data-surface="mobile"])
    .stream-order-toggle {
    display: none !important;
  }

  html[data-theme="gothic"][data-stream-card-settings="true"]:not([data-surface="mobile"])
    .stream-tabs-overflow {
    padding-inline: 0 !important;
    transform: translateX(calc(-1 * var(--stream-overflow-shift, 0px)));
    z-index: 43;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 0.375rem;
    position: relative;
    z-index: 44;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-toggle {
    align-items: center;
    background-color: #15181b;
    background-image:
      linear-gradient(180deg, rgb(3 5 7 / 10%), rgb(1 3 5 / 16%)),
      var(--gothic-workspace-card-texture-preview);
    background-position: center, center;
    background-repeat: no-repeat, repeat;
    background-size: auto, 22rem 22rem;
    border: 1px solid rgb(79 75 79 / 42%);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgb(205 211 216 / 8%), 0 1px 3px rgb(0 0 0 / 48%);
    color: #aaa49a;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    width: 2rem;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-toggle:hover,
  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-card-settings-toggle[aria-expanded="true"] {
    border-color: rgb(129 37 31 / 82%);
    color: #ddd5ca;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-icon {
    display: block;
    height: 0.95rem;
    width: 0.95rem;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-menu {
    background-color: var(--gothic-panel-base-color);
    background-image: var(--gothic-panel-base-image);
    background-position: var(--gothic-panel-base-position);
    background-repeat: repeat;
    background-size: var(--gothic-panel-base-size);
    border: 1px solid rgb(105 98 90 / 72%);
    box-shadow:
      inset 0 0 0 1px rgb(0 0 0 / 72%),
      inset 0 1px 0 rgb(205 211 216 / 10%),
      0 8px 22px rgb(0 0 0 / 72%);
    color: #c8c0b5;
    min-width: 17.5rem;
    padding: 0.45rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 90;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-menu[hidden],
  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-range[hidden] {
    display: none !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-section {
    background: rgb(13 14 15 / 84%);
    border: 1px solid rgb(75 71 67 / 62%);
    color: inherit;
    display: grid;
    gap: 0.45rem;
    margin-top: 0.4rem;
    padding: 0.65rem;
    text-align: left;
    width: 100%;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-group-title {
    color: #aaa49a;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-kicker {
    color: #7f7a72;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-gap-section {
    align-items: center;
    grid-template-columns: 1fr auto;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-gap-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: block;
    padding: 0;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-gap-toggle .switch-track {
    display: block;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-card-gap-toggle[aria-checked="true"] .switch-track {
    background: var(--accent-soft);
    border-color: var(--accent-line);
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-card-gap-toggle[aria-checked="true"] .switch-track::after {
    background: var(--accent);
    transform: translateX(1.05rem) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-card-gap-toggle:focus-visible .switch-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-segmented button {
    background: #111315;
    border: 1px solid rgb(75 71 67 / 62%);
    color: #89847d;
    min-height: 1.8rem;
    white-space: nowrap;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-card-settings-segmented button[aria-pressed="true"] {
    background: linear-gradient(rgb(38 20 18 / 76%), rgb(24 15 15 / 86%));
    border-color: rgb(129 37 31 / 78%);
    color: #ddd5ca;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-range {
    color: #aaa49a;
    display: grid;
    font-size: 0.7rem;
    gap: 0.3rem;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-range input {
    accent-color: #8d2b25;
    margin: 0;
    width: 100%;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-card-settings-range small {
    color: #6f6b65;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-tabs[data-stream-card-width-mode="fixed"] {
    --shell-stream-tab-max-width: var(--stream-card-width);
    --shell-stream-tab-min-width: var(--stream-card-width);
    --shell-stream-tab-width: var(--stream-card-width);
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-tabs[data-stream-card-width-mode="fixed"] .stream-tab {
    --stream-tab-inline-padding: 0.5rem;
    box-sizing: border-box !important;
    flex: 0 0 var(--stream-card-width) !important;
    max-width: var(--stream-card-width) !important;
    min-width: var(--stream-card-width) !important;
    padding-inline: 0.5rem !important;
    width: var(--stream-card-width) !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-tabs[data-stream-card-width-mode="fixed"] .stream-tab-card {
    gap: 0.25rem !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-tabs[data-stream-card-width-mode="fixed"] .stream-tab-title {
    min-width: 1.25rem !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tabs-track,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tab-group,
  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tab-divider {
    height: 100% !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-tabs[data-stream-card-gap-mode="on"] .stream-tabs-track {
    column-gap: var(--shell-view-switch-gap) !important;
  }

  html[data-theme="gothic"][data-view="chat"][data-stream-status-style="edge"][data-stream-status-effect="impulse"]:not([data-surface="mobile"])
    .stream-tabs .stream-tab[data-running] .stream-tab-status-layer::before,
  html[data-theme="gothic"][data-view="chat"][data-stream-status-style="edge"][data-stream-status-effect="impulse"]:not([data-surface="mobile"])
    .stream-tabs .stream-tab[data-running] .stream-tab-status-layer::after,
  html[data-theme="gothic"][data-view="chat"][data-stream-status-style="edge"][data-stream-status-effect="scanner"]:not([data-surface="mobile"])
    .stream-tabs .stream-tab[data-running] .stream-tab-status-layer::before,
  html[data-theme="gothic"][data-view="chat"][data-stream-status-style="edge"][data-stream-status-effect="scanner"]:not([data-surface="mobile"])
    .stream-tabs .stream-tab[data-running] .stream-tab-status-layer::after {
    background: linear-gradient(90deg, transparent 0%, var(--accent) 44%, var(--accent) 56%, transparent 100%) !important;
    content: "" !important;
    display: block !important;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 70%, transparent)) !important;
    height: 2px !important;
    left: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    right: auto !important;
    width: 58% !important;
    -webkit-mask: none !important;
    mask: none !important;
    z-index: 20 !important;
  }

  html[data-theme="gothic"][data-view="chat"][data-stream-status-style="edge"]:is([data-stream-status-effect="impulse"], [data-stream-status-effect="scanner"]):not([data-surface="mobile"])
    .stream-tabs .stream-tab[data-running] .stream-tab-status-layer::before {
    bottom: auto !important;
    top: 2px !important;
  }

  html[data-theme="gothic"][data-view="chat"][data-stream-status-style="edge"]:is([data-stream-status-effect="impulse"], [data-stream-status-effect="scanner"]):not([data-surface="mobile"])
    .stream-tabs .stream-tab[data-running] .stream-tab-status-layer::after {
    bottom: 1px !important;
    top: auto !important;
  }

  html[data-theme="gothic"][data-view="chat"][data-stream-status-style="edge"][data-stream-status-effect="impulse"]:not([data-surface="mobile"])
    .stream-tabs .stream-tab[data-running] .stream-tab-status-layer::before,
  html[data-theme="gothic"][data-view="chat"][data-stream-status-style="edge"][data-stream-status-effect="impulse"]:not([data-surface="mobile"])
    .stream-tabs .stream-tab[data-running] .stream-tab-status-layer::after {
    animation: gothic-stream-running-wave 2.2s linear infinite !important;
  }

  html[data-theme="gothic"][data-view="chat"][data-stream-status-style="edge"][data-stream-status-effect="scanner"]:not([data-surface="mobile"])
    .stream-tabs .stream-tab[data-running] .stream-tab-status-layer::before,
  html[data-theme="gothic"][data-view="chat"][data-stream-status-style="edge"][data-stream-status-effect="scanner"]:not([data-surface="mobile"])
    .stream-tabs .stream-tab[data-running] .stream-tab-status-layer::after {
    animation: gothic-stream-scanner-pass 1.85s linear infinite !important;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 40%, var(--accent) 60%, transparent 100%) !important;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 78%, transparent)) !important;
    width: 30% !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tab-group {
    align-items: stretch !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tab-divider {
    align-self: stretch !important;
    flex: 0 0 1px !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tabs .stream-tab {
    --stream-tab-inline-padding: 1rem;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-tabs .stream-tab[aria-pressed="true"][data-current] {
    box-shadow: none !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-tabs .stream-tab[aria-pressed="true"]::after {
    content: none !important;
    display: none !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tabs .stream-tab-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 100% !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tabs .stream-tab-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"]) .stream-tabs .task-time {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-tabs .task-time[data-compact-stream-time] {
    font-size: 0 !important;
  }

  html[data-theme="gothic"]:not([data-surface="mobile"])
    .stream-tabs .task-time[data-compact-stream-time]::after {
    content: attr(data-compact-stream-time);
    font-size: var(--stream-task-time-font-size, 0.62rem);
  }
}

@keyframes gothic-stream-running-wave {
  from { transform: translateX(-70%); }
  to { transform: translateX(140%); }
}

@keyframes gothic-stream-scanner-pass {
  from { transform: translateX(-50%); }
  to { transform: translateX(280%); }
}