/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/Bria/globals.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
/* ========================================================================== 
   BRIA COGNITIVE WORKSPACE — ADVANCED LIVE UI THEME
   Drop-in replacement stylesheet for BriaWorkspace.tsx v0.14.1+
   ========================================================================== */

:root {
  --bria-bg-0: #05070c;
  --bria-bg-1: #080b12;
  --bria-bg-2: #0b1019;
  --bria-bg-3: #101725;
  --bria-bg-4: #151e2f;
  --bria-panel: rgba(13, 19, 31, 0.78);
  --bria-panel-strong: rgba(14, 21, 35, 0.94);
  --bria-panel-soft: rgba(255, 255, 255, 0.035);
  --bria-line: rgba(255, 255, 255, 0.075);
  --bria-line-strong: rgba(255, 255, 255, 0.14);
  --bria-line-accent: color-mix(in srgb, var(--bria-accent, #7c8cff) 42%, transparent);
  --bria-text: #f6f8fc;
  --bria-text-2: #c8d0df;
  --bria-muted: #8a96ab;
  --bria-muted-2: #667186;
  --bria-good: #63e6ae;
  --bria-warn: #f7c769;
  --bria-bad: #ff8091;
  --bria-info: #6bd5ff;
  --bria-accent: #7c8cff;
  --bria-accent-2: #57c8ff;
  --bria-accent-3: #ac7cff;
  --bria-radius-xs: 8px;
  --bria-radius-sm: 11px;
  --bria-radius-md: 14px;
  --bria-radius-lg: 18px;
  --bria-radius-xl: 24px;
  --bria-shadow-sm: 0 8px 28px rgba(0, 0, 0, 0.24);
  --bria-shadow-md: 0 20px 60px rgba(0, 0, 0, 0.34);
  --bria-shadow-lg: 0 34px 110px rgba(0, 0, 0, 0.52);
  --bria-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bria-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bria-bg-0);
  color: var(--bria-text);
  font-family: var(--bria-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bria-accent) 78%, white 10%);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed !important;
  filter: saturate(0.55);
}

::-moz-selection {
  background: color-mix(in srgb, var(--bria-accent) 34%, transparent);
  color: #fff;
}

::selection {
  background: color-mix(in srgb, var(--bria-accent) 34%, transparent);
  color: #fff;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 139, 163, 0.3) transparent;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(133, 145, 168, 0.28);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 169, 195, 0.42);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ========================================================================== 
   ROOT / AMBIENCE
   ========================================================================== */

.bria-os {
  position: relative;
  isolation: isolate;
  height: 100dvh;
  min-height: 680px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr) 30px;
  background:
    radial-gradient(1100px 680px at 18% -180px, color-mix(in srgb, var(--bria-accent) 22%, transparent), transparent 68%),
    radial-gradient(820px 520px at 92% 15%, rgba(68, 169, 255, 0.11), transparent 72%),
    linear-gradient(180deg, #080b12 0%, #05070c 100%);
  color: var(--bria-text);
}

.ambient-background {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}

.ambient-grid {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.15));
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.15));
}

.ambient-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(85px);
  opacity: 0.2;
  animation: abr-glow-drift 13s ease-in-out infinite alternate;
}

.glow-a {
  width: 560px;
  height: 560px;
  left: -190px;
  top: 120px;
  background: color-mix(in srgb, var(--bria-accent) 66%, #281b75);
}

.glow-b {
  width: 460px;
  height: 460px;
  right: -130px;
  bottom: -150px;
  background: #0f6d9b;
  animation-delay: -6s;
}

.noise-layer {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

@keyframes abr-glow-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(45px, -22px, 0) scale(1.08); }
}

/* ========================================================================== 
   TITLE BAR
   ========================================================================== */

.bria-titlebar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(340px, 1.35fr) minmax(320px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--bria-line);
  background: rgba(7, 10, 17, 0.78);
  backdrop-filter: blur(24px) saturate(125%);
  box-shadow: 0 8px 38px rgba(0,0,0,.18);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.3), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--bria-accent) 88%, #fff 4%), #465de1 58%, #1685ac);
  border: 1px solid rgba(255,255,255,.17);
  box-shadow:
    0 10px 30px color-mix(in srgb, var(--bria-accent) 24%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.brand-orbit {
  position: absolute;
  inset: -4px;
  border: 1px solid color-mix(in srgb, var(--bria-accent) 38%, transparent);
  border-radius: 14px;
  animation: abr-brand-orbit 4.6s linear infinite;
}

@keyframes abr-brand-orbit {
  from { transform: rotate(0deg); opacity: .55; }
  50% { opacity: .14; }
  to { transform: rotate(360deg); opacity: .55; }
}

.brand > div:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand strong {
  font-size: 13px;
  line-height: 1;
  letter-spacing: .15em;
  font-weight: 850;
}

.brand span {
  margin-top: 4px;
  color: var(--bria-muted);
  font-size: 9px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.titlebar-center {
  min-width: 0;
  display: flex;
  justify-content: center;
}

.command-trigger {
  width: min(560px, 100%);
  min-width: 0;
  height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  color: #9ba7bc;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 12px;
  cursor: pointer;
  transition: .18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.command-trigger:hover {
  color: #e8edf7;
  background: rgba(255,255,255,.055);
  border-color: color-mix(in srgb, var(--bria-accent) 34%, rgba(255,255,255,.12));
  transform: translateY(-1px);
}

.command-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 11px;
}

.command-trigger kbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  color: #717c8f;
  font-family: var(--bria-font);
  font-size: 9px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  border-radius: 7px;
}

.system-cluster {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.system-stat {
  min-width: 76px;
  height: 34px;
  display: grid;
  grid-template-columns: 14px auto;
  grid-template-rows: 1fr 1fr;
  -moz-column-gap: 6px;
       column-gap: 6px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.065);
  background: rgba(255,255,255,.026);
  border-radius: 10px;
}

.system-stat > svg {
  grid-row: 1 / span 2;
  color: color-mix(in srgb, var(--bria-accent) 72%, white 10%);
}

.system-stat span {
  font-size: 7px;
  color: var(--bria-muted-2);
  line-height: 1;
}

.system-stat strong {
  font-size: 9px;
  line-height: 1;
  color: var(--bria-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-button,
.toolbar-icon,
.queue-remove {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.035);
  color: #97a2b4;
  cursor: pointer;
  transition: .16s ease;
}

.icon-button {
  width: 35px;
  height: 35px;
  border-radius: 10px;
}

.icon-button:hover,
.toolbar-icon:hover,
.queue-remove:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
  border-color: color-mix(in srgb, var(--bria-accent) 38%, rgba(255,255,255,.1));
}

/* ========================================================================== 
   MAIN SHELL / SIDEBAR
   ========================================================================== */

.workspace-shell {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.bria-sidebar {
  width: 242px;
  min-width: 242px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bria-line);
  background:
    linear-gradient(180deg, rgba(12,16,25,.97), rgba(7,10,16,.96)),
    radial-gradient(440px 180px at 30% -30px, color-mix(in srgb, var(--bria-accent) 12%, transparent), transparent 65%);
  box-shadow: 14px 0 45px rgba(0,0,0,.12);
}

.sidebar-workspace {
  padding: 12px 10px 8px;
}

.sidebar-workspace > button {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  color: inherit;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 12px;
  cursor: pointer;
  transition: .16s ease;
}

.sidebar-workspace > button:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.095);
}

.workspace-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--bria-accent) 76%, #1d2c61), #22365c);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--bria-accent) 13%, transparent);
}

.sidebar-workspace > button > div:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.sidebar-workspace strong {
  font-size: 10px;
  color: #e7ebf3;
}

.sidebar-workspace span {
  margin-top: 3px;
  color: var(--bria-muted-2);
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.primary-navigation {
  display: grid;
  gap: 3px;
  padding: 8px 10px 0;
}

.nav-caption {
  padding: 8px 9px 6px;
  color: #566176;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .16em;
}

.primary-navigation > button {
  position: relative;
  overflow: hidden;
  height: 37px;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #8e9aad;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  transition: .14s ease;
}

.primary-navigation > button:hover {
  color: #d8deea;
  background: rgba(255,255,255,.035);
}

.primary-navigation > button.active {
  color: #fff;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bria-accent) 16%, transparent), rgba(255,255,255,.035));
  border-color: color-mix(in srgb, var(--bria-accent) 22%, rgba(255,255,255,.04));
}

.primary-navigation > button svg {
  position: relative;
  z-index: 1;
}

.primary-navigation > button > span:not(.nav-indicator) {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 650;
}

.nav-indicator {
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 999px;
  background: var(--bria-accent);
  box-shadow: 0 0 15px color-mix(in srgb, var(--bria-accent) 70%, transparent);
}

.sidebar-spacer {
  flex: 1;
}

.system-card {
  margin: 12px 10px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 13px;
  background:
    radial-gradient(320px 100px at 15% -40px, color-mix(in srgb, var(--bria-accent) 12%, transparent), transparent 66%),
    rgba(255,255,255,.025);
}

.system-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.system-card-heading > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8995a9;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}

.system-card-heading .online,
.system-card-heading > span:last-child {
  color: var(--bria-good);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .06em;
}

/* ========================================================================== 
   CONTENT / TOOLBAR / RESIZABLE PANELS
   ========================================================================== */

.workspace-content {
  min-width: 0;
  flex: 1;
  height: 100%;
  display: grid;
  grid-template-rows: 46px minmax(0, 1fr);
  overflow: hidden;
}

.workspace-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: rgba(7, 10, 16, 0.58);
  backdrop-filter: blur(16px);
}

.toolbar-icon {
  width: 31px;
  height: 31px;
  border-radius: 9px;
}

.breadcrumb {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6f7a8e;
  font-size: 9px;
  text-transform: capitalize;
}

.breadcrumb strong {
  color: #c9d0dc;
  font-weight: 700;
}

.toolbar-grow {
  flex: 1;
}

.engine-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  color: #8793a7;
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.engine-pulse {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--bria-good);
  box-shadow: 0 0 0 0 rgba(99,230,174,.55);
  animation: abr-engine-pulse 1.8s infinite;
}

@keyframes abr-engine-pulse {
  0% { box-shadow: 0 0 0 0 rgba(99,230,174,.38); }
  70% { box-shadow: 0 0 0 6px rgba(99,230,174,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,230,174,0); }
}

.panel-group {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.panel-resize {
  position: relative;
  width: 7px;
  min-width: 7px;
  display: grid;
  place-items: center;
  background: transparent;
  outline: none;
  cursor: col-resize;
  transition: background .14s ease;
}

.panel-resize::before {
  content: "";
  position: absolute;
  inset: 0 2px;
  background: rgba(255,255,255,.045);
  transition: .14s ease;
}

.panel-resize:hover::before,
.panel-resize[data-resize-handle-active]::before {
  background: color-mix(in srgb, var(--bria-accent) 38%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--bria-accent) 14%, transparent);
}

.panel-resize > span {
  position: relative;
  z-index: 1;
  width: 3px;
  height: 30px;
  border-radius: 99px;
  background: rgba(255,255,255,.13);
}

.workspace-main {
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 18px 18px 28px;
  background:
    radial-gradient(700px 320px at 44% -120px, color-mix(in srgb, var(--bria-accent) 8%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.007), transparent 15%);
}

/* ========================================================================== 
   HERO / CARDS / PANELS
   ========================================================================== */

.hero-dashboard {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 18px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--bria-accent) 10%, rgba(11,17,29,.88)), rgba(10,15,24,.88) 58%),
    rgba(12,17,27,.88);
  box-shadow: var(--bria-shadow-sm), inset 0 1px 0 rgba(255,255,255,.025);
}

.hero-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.022), transparent),
    radial-gradient(440px 190px at 90% 8%, color-mix(in srgb, var(--bria-accent) 16%, transparent), transparent 72%);
}

.hero-dashboard > div:first-child {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: color-mix(in srgb, var(--bria-accent) 70%, #b8c2d5);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
}

.hero-dashboard h1 {
  margin: 8px 0 8px;
  color: #f9fbff;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.hero-dashboard p {
  max-width: 760px;
  margin: 0;
  color: #8995aa;
  font-size: 11px;
  line-height: 1.6;
}

.hero-orb {
  position: relative;
  width: 126px;
  height: 126px;
  justify-self: end;
  display: grid;
  place-items: center;
}

.orb-core {
  position: relative;
  z-index: 4;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--bria-accent) 84%, #fff 2%), #324cba);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 20px 50px color-mix(in srgb, var(--bria-accent) 24%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18);
  animation: abr-core-float 4s ease-in-out infinite;
}

@keyframes abr-core-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--bria-accent) 24%, rgba(255,255,255,.05));
  border-radius: 50%;
  transform: rotate(18deg);
}

.orbit::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  top: 50%;
  left: -3px;
  border-radius: 50%;
  background: var(--bria-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--bria-accent) 72%, transparent);
}

.orbit-a {
  width: 92px;
  height: 92px;
  animation: abr-orbit 7s linear infinite;
}

.orbit-b {
  width: 114px;
  height: 76px;
  animation: abr-orbit 10s linear infinite reverse;
}

.orbit-c {
  width: 76px;
  height: 116px;
  animation: abr-orbit 8.5s linear infinite;
}

@keyframes abr-orbit {
  to { transform: rotate(378deg); }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.dashboard-card {
  position: relative;
  overflow: hidden;
  min-height: 108px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1px 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
    rgba(11,16,26,.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.dashboard-card::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -36px;
  top: -44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bria-accent) 10%, transparent);
  filter: blur(4px);
}

.dashboard-card:hover {
  border-color: color-mix(in srgb, var(--bria-accent) 26%, rgba(255,255,255,.09));
  background: rgba(15,21,34,.86);
  box-shadow: 0 16px 42px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
}

.dashboard-icon {
  grid-row: 1 / span 3;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--bria-accent) 78%, #cbd5e7);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bria-accent) 11%, rgba(255,255,255,.025));
  border: 1px solid color-mix(in srgb, var(--bria-accent) 16%, rgba(255,255,255,.05));
}

.dashboard-icon svg {
  width: 18px;
  height: 18px;
}

.dashboard-card > span {
  color: #778399;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .04em;
}

.dashboard-card > strong {
  min-width: 0;
  color: #f5f7fb;
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-card > small {
  color: #69758a;
  font-size: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.operations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr);
  gap: 14px;
}

.glass-panel {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.027), rgba(255,255,255,.009)),
    rgba(10,15,24,.79);
  box-shadow:
    0 16px 44px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.022);
  backdrop-filter: blur(18px);
}

.glass-panel.large {
  min-height: 280px;
}

.operations-grid > .glass-panel,
.workspace-main > .glass-panel {
  padding: 15px;
}

.panel-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
}

.panel-heading-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--bria-accent) 74%, #cbd5e7);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bria-accent) 9%, rgba(255,255,255,.02));
  border: 1px solid color-mix(in srgb, var(--bria-accent) 13%, rgba(255,255,255,.04));
}

.panel-heading > div:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.panel-heading strong {
  color: #dce2ed;
  font-size: 10px;
  font-weight: 750;
}

.panel-heading span {
  margin-top: 2px;
  color: #667287;
  font-size: 7px;
  line-height: 1.35;
}

/* ========================================================================== 
   BUTTONS / FORMS
   ========================================================================== */

.primary-button,
.secondary-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.primary-button {
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--bria-accent) 72%, white 10%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bria-accent) 92%, #fff 2%), color-mix(in srgb, var(--bria-accent) 68%, #233789));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--bria-accent) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.14);
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--bria-accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.17);
}

.secondary-button {
  color: #aab4c5;
  border: 1px solid rgba(255,255,255,.085);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.secondary-button:hover:not(:disabled) {
  color: #fff;
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

.workspace-main input:not([type="checkbox"]):not([type="radio"]),
.workspace-main textarea,
.workspace-main select,
.command-search input {
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.workspace-main input:not([type="checkbox"]):not([type="radio"]):focus,
.workspace-main textarea:focus,
.workspace-main select:focus,
.command-search input:focus {
  border-color: color-mix(in srgb, var(--bria-accent) 48%, rgba(255,255,255,.11)) !important;
  background: rgba(255,255,255,.052) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bria-accent) 10%, transparent);
}

.workspace-main input[type="file"] {
  cursor: pointer;
}

.workspace-main input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 10px;
  color: #d7deea;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.055);
  cursor: pointer;
}

/* ========================================================================== 
   CHAT / MARKDOWN
   ========================================================================== */

.workspace-main .glass-panel p,
.workspace-main .glass-panel li {
  color: #c0c8d5;
}

.workspace-main .glass-panel a {
  color: color-mix(in srgb, var(--bria-accent) 72%, #7ed7ff);
}

.workspace-main pre {
  margin: 10px 0;
  overflow: auto;
  padding: 12px 13px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 11px;
  background: rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.012);
}

.workspace-main code {
  font-family: var(--bria-mono);
}

.workspace-main :not(pre) > code {
  padding: 2px 5px;
  border-radius: 5px;
  color: #d9e3f4;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.05);
}

.workspace-main table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 10px;
}

.workspace-main th,
.workspace-main td {
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.065);
  font-size: 9px;
  text-align: left;
}

.workspace-main th {
  color: #d8deea;
  background: rgba(255,255,255,.035);
}

.workspace-main td {
  color: #9ca8bb;
}

/* ========================================================================== 
   KNOWLEDGE INGESTION
   ========================================================================== */

.ingest-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 14px;
  padding: 4px 2px;
}

.ingest-header h1 {
  margin: 6px 0 6px;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.ingest-header p {
  max-width: 700px;
  margin: 0;
  color: #7e899c;
  font-size: 10px;
  line-height: 1.55;
}

.ingest-stats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 8px;
  align-items: center;
  min-width: 180px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}

.ingest-stats > div {
  grid-column: 1 / -1;
  height: 1px;
  margin: 4px 0;
  background: rgba(255,255,255,.055);
}

.ingest-stats strong {
  color: #dbe1ec;
  font-size: 11px;
}

.ingest-stats span {
  color: #687488;
  font-size: 8px;
  text-align: right;
}

.drop-zone {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 18px;
  background:
    radial-gradient(460px 220px at 50% 12%, color-mix(in srgb, var(--bria-accent) 11%, transparent), transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006));
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
}

.drop-zone::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.025);
}

.drop-zone:hover,
.drop-zone.drag-active {
  border-color: color-mix(in srgb, var(--bria-accent) 58%, rgba(255,255,255,.12));
  background:
    radial-gradient(520px 240px at 50% 16%, color-mix(in srgb, var(--bria-accent) 18%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.01));
  box-shadow: inset 0 0 48px color-mix(in srgb, var(--bria-accent) 5%, transparent);
}

.drop-zone.drag-active {
  transform: scale(.998);
}

.drop-visual {
  position: relative;
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}

.upload-core {
  position: relative;
  z-index: 3;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--bria-accent) 88%, #fff 2%), #2f54aa);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--bria-accent) 22%, transparent);
}

.upload-ring {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--bria-accent) 22%, rgba(255,255,255,.04));
  border-radius: 50%;
}

.ring-1 {
  width: 76px;
  height: 76px;
  animation: abr-upload-ring 3.4s ease-in-out infinite;
}

.ring-2 {
  width: 98px;
  height: 98px;
  animation: abr-upload-ring 3.4s ease-in-out infinite .8s;
}

@keyframes abr-upload-ring {
  0%,100% { transform: scale(.9); opacity: .25; }
  50% { transform: scale(1.04); opacity: .65; }
}

.drop-zone h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -.02em;
}

.drop-zone > p {
  max-width: 620px;
  margin: 7px auto 0;
  color: #768297;
  font-size: 10px;
  line-height: 1.55;
}

.drop-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.ingest-capabilities {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 14px;
}

.ingest-capabilities span {
  padding: 4px 7px;
  color: #657186;
  font-size: 7px;
  border: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.02);
  border-radius: 999px;
}

.file-queue {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 15px;
  background: rgba(10,15,24,.68);
}

.queue-heading {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.queue-heading > div:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.queue-heading strong {
  font-size: 10px;
}

.queue-heading span {
  margin-top: 2px;
  color: #657186;
  font-size: 7px;
}

.queue-list {
  display: grid;
  gap: 1px;
  padding: 6px;
}

.queue-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: rgba(255,255,255,.018);
  transition: .14s ease;
}

.queue-item:hover {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.055);
}

.file-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--bria-accent) 76%, #a9b7cf);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bria-accent) 8%, rgba(255,255,255,.025));
  border: 1px solid color-mix(in srgb, var(--bria-accent) 12%, rgba(255,255,255,.045));
}

.file-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.file-info strong {
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-info > div {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: #626d80;
  font-size: 7px;
}

.file-state {
  padding: 4px 7px;
  border-radius: 999px;
  color: #808b9d;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.065);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.file-state.inspecting,
.file-state.uploading {
  color: #87d4ff;
  border-color: rgba(79,178,235,.22);
  background: rgba(43,115,162,.12);
}

.file-state.complete {
  color: var(--bria-good);
  border-color: rgba(99,230,174,.22);
  background: rgba(37,132,94,.12);
}

.file-state.error {
  color: #ff9aaa;
  border-color: rgba(255,128,145,.24);
  background: rgba(138,43,57,.14);
}

.queue-remove {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

/* ========================================================================== 
   MODEL / METRIC / PIPELINE SURFACES
   ========================================================================== */

.model-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
}

.model-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--bria-accent) 74%, #b9c7dc);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bria-accent) 8%, rgba(255,255,255,.02));
  border: 1px solid color-mix(in srgb, var(--bria-accent) 12%, rgba(255,255,255,.035));
}

.model-card > div:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.model-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.model-card span:not(.model-live) {
  margin-top: 3px;
  color: #69758a;
  font-size: 7px;
  line-height: 1.35;
}

.model-live {
  justify-self: end;
  padding: 4px 6px;
  color: var(--bria-good);
  border: 1px solid rgba(99,230,174,.16);
  background: rgba(50,145,109,.10);
  border-radius: 999px;
  font-size: 7px;
  font-weight: 800;
  white-space: nowrap;
}

.metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 7px 0;
  border-top: 1px solid rgba(255,255,255,.045);
}

.metric:first-of-type {
  border-top: 0;
}

.metric span {
  color: #6f7a8e;
  font-size: 8px;
}

.metric strong {
  min-width: 0;
  color: #cdd4df;
  font-size: 8px;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.metric-bar {
  display: grid;
  gap: 6px;
  margin: 9px 0;
}

.metric-bar > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #7b8799;
  font-size: 8px;
}

.metric-bar strong {
  color: #bec6d3;
}

.metric-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

.metric-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bria-accent), var(--bria-accent-2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--bria-accent) 25%, transparent);
}

.pipeline-step {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 0;
  border-top: 1px solid rgba(255,255,255,.045);
  color: #657186;
}

.pipeline-step:first-child {
  border-top: 0;
}

.pipeline-step > div {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
}

.pipeline-step span {
  font-size: 8px;
}

.pipeline-step small {
  color: #667387;
  font-size: 7px;
}

.pipeline-step.active {
  color: #c9d2df;
}

.pipeline-step.active > div {
  color: var(--bria-good);
  border-color: rgba(99,230,174,.16);
  background: rgba(99,230,174,.06);
}

/* ========================================================================== 
   INSPECTOR
   ========================================================================== */

.inspector {
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  border-left: 1px solid rgba(255,255,255,.055);
  background:
    linear-gradient(180deg, rgba(9,13,21,.98), rgba(7,10,16,.96));
}

.inspector > .panel-heading {
  position: sticky;
  top: -14px;
  z-index: 4;
  margin: -14px -14px 10px;
  padding: 13px 14px 10px;
  background: rgba(8,11,18,.91);
  border-bottom: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(16px);
}

.inspector-section {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.021);
}

.inspector-label {
  display: inline-block;
  color: #5f6b80;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .13em;
}

/* ========================================================================== 
   COMMAND PALETTE / CMDK
   ========================================================================== */

.command-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 11vh 18px 18px;
  background: rgba(2,5,12,.63);
  backdrop-filter: blur(10px);
}

.command-dialog {
  width: min(680px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: rgba(11,16,27,.96);
  box-shadow: var(--bria-shadow-lg), inset 0 1px 0 rgba(255,255,255,.035);
}

.command-search {
  min-height: 54px;
  display: grid;
  grid-template-columns: 20px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.command-search svg {
  color: #738096;
}

.command-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #edf1f8;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px;
}

.command-search input::-moz-placeholder {
  color: #626d80;
}

.command-search input::placeholder {
  color: #626d80;
}

.command-search kbd {
  padding: 4px 6px;
  color: #707b8f;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
  font-size: 8px;
}

.command-results {
  max-height: min(520px, 65vh);
  overflow: auto;
  padding: 8px;
}

.command-results [cmdk-group-heading] {
  padding: 9px 10px 6px;
  color: #5e687a;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.command-results [cmdk-item] {
  min-height: 42px;
  display: grid;
  grid-template-columns: 20px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #98a4b7;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.command-results [cmdk-item][data-selected="true"],
.command-results [cmdk-item]:hover {
  color: #fff;
  background: color-mix(in srgb, var(--bria-accent) 9%, rgba(255,255,255,.03));
  border-color: color-mix(in srgb, var(--bria-accent) 17%, rgba(255,255,255,.04));
}

.command-results [cmdk-item] span {
  font-size: 10px;
}

.command-results [cmdk-item] small {
  color: #626d80;
  font-size: 7px;
}

/* ========================================================================== 
   STATUS BAR
   ========================================================================== */

.bria-statusbar {
  position: relative;
  z-index: 25;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  color: #606b7d;
  border-top: 1px solid rgba(255,255,255,.055);
  background: rgba(6,9,14,.9);
  backdrop-filter: blur(14px);
  font-size: 7px;
}

.bria-statusbar > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.bria-statusbar span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.status-ready {
  color: #9ea8b8;
  font-weight: 800;
  letter-spacing: .07em;
}

.status-ready > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bria-good);
  box-shadow: 0 0 10px rgba(99,230,174,.5);
}

/* ========================================================================== 
   DRAWERS / TOOLTIPS / THIRD-PARTY SURFACES
   ========================================================================== */

[data-vaul-drawer] {
  color: var(--bria-text);
}

[data-vaul-drawer] h2,
[data-vaul-drawer] [data-vaul-drawer-title] {
  color: #f2f5fb;
  font-size: 16px;
  letter-spacing: -.02em;
}

[data-radix-popper-content-wrapper] {
  z-index: 150 !important;
}

/* react-colorful */
.react-colorful {
  width: 100% !important;
  height: 190px !important;
}

.react-colorful__saturation {
  border-radius: 11px 11px 0 0 !important;
  border-bottom: 0 !important;
}

.react-colorful__hue {
  height: 18px !important;
  border-radius: 0 0 11px 11px !important;
}

.react-colorful__pointer {
  width: 18px !important;
  height: 18px !important;
  border-width: 2px !important;
}

/* Recharts */
.recharts-wrapper,
.recharts-surface {
  outline: none;
}

.recharts-cartesian-grid line {
  stroke: rgba(255,255,255,.055);
}

/* Sonner */
[data-sonner-toaster] {
  --normal-bg: rgba(13,19,31,.96) !important;
  --normal-border: rgba(255,255,255,.09) !important;
  --normal-text: #edf2f9 !important;
  --success-bg: rgba(13,32,25,.97) !important;
  --success-border: rgba(99,230,174,.2) !important;
  --error-bg: rgba(38,18,23,.97) !important;
  --error-border: rgba(255,128,145,.22) !important;
  font-family: var(--bria-font) !important;
}

/* ========================================================================== 
   TERMINAL / CODE-HEAVY VIEWS
   ========================================================================== */

.workspace-main pre,
.workspace-main code,
.workspace-main [style*="white-space: pre"] {
  font-family: var(--bria-mono);
}

.workspace-main [style*="background: rgba(0,0,0,.24)"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.014), 0 12px 32px rgba(0,0,0,.14);
}

/* ========================================================================== 
   RESPONSIVE LAYOUT
   ========================================================================== */

@media (max-width: 1380px) {
  .bria-titlebar {
    grid-template-columns: 210px minmax(260px, 1fr) auto;
    gap: 10px;
  }

  .system-stat {
    min-width: 68px;
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, .8fr);
  }
}

@media (max-width: 1120px) {
  .system-stat:nth-of-type(2) {
    display: none;
  }

  .bria-sidebar {
    width: 218px;
    min-width: 218px;
  }

  .hero-dashboard {
    grid-template-columns: minmax(0,1fr) 126px;
  }

  .operations-grid {
    grid-template-columns: 1fr;
  }

  .inspector {
    padding: 11px;
  }
}

@media (max-width: 900px) {
  .bria-titlebar {
    grid-template-columns: 170px minmax(180px,1fr) auto;
    padding: 0 10px;
  }

  .system-stat {
    display: none;
  }

  .command-trigger > span {
    font-size: 0;
  }

  .command-trigger > span::after {
    content: "Command";
    font-size: 10px;
  }

  .bria-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    box-shadow: 24px 0 70px rgba(0,0,0,.52);
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .hero-dashboard {
    padding: 18px;
  }
}

@media (max-width: 680px) {
  .bria-os {
    min-height: 0;
    grid-template-rows: 58px minmax(0,1fr) 28px;
  }

  .bria-titlebar {
    grid-template-columns: 1fr auto;
  }

  .titlebar-center {
    display: none;
  }

  .brand span {
    max-width: 160px;
  }

  .workspace-toolbar {
    padding: 0 8px;
  }

  .engine-badge {
    max-width: 135px;
  }

  .workspace-main {
    padding: 12px 10px 22px;
  }

  .hero-dashboard {
    min-height: 126px;
    grid-template-columns: 1fr;
  }

  .hero-orb {
    position: absolute;
    right: 8px;
    top: 8px;
    opacity: .3;
    transform: scale(.75);
  }

  .hero-dashboard h1 {
    font-size: 24px;
    max-width: calc(100% - 70px);
  }

  .hero-dashboard p {
    max-width: calc(100% - 40px);
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .ingest-header {
    align-items: stretch;
    flex-direction: column;
  }

  .ingest-stats {
    width: 100%;
  }

  .drop-zone {
    min-height: 260px;
    padding: 22px 14px;
  }

  .queue-item {
    grid-template-columns: 34px minmax(0,1fr) 28px;
  }

  .file-state {
    display: none;
  }

  .bria-statusbar > div:last-child span:nth-child(-n+2) {
    display: none;
  }

  .panel-resize {
    width: 5px;
    min-width: 5px;
  }
}

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

/* ==========================================================================
   BRIA v0.14.1 — CHAT FILE COMPOSER / HISTORY / ARTIFACT RUNNER
   ========================================================================== */

.chat-workbench {
  padding: 0 !important;
  min-height: 690px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
}

.chat-history-rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bria-line);
  background:
    radial-gradient(320px 180px at 10% -40px, color-mix(in srgb, var(--bria-accent) 10%, transparent), transparent 70%),
    rgba(5, 9, 16, .58);
}

.chat-history-head {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 10px 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.chat-history-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.chat-history-head strong {
  color: #eef3fb;
  font-size: 11px;
  line-height: 1.15;
}

.chat-history-list {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 8px;
  display: grid;
  align-content: start;
  gap: 4px;
}

.chat-history-item {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 9px 8px 9px 10px;
  color: #8c98ac;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.chat-history-item:hover {
  color: #dce4f1;
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.06);
  transform: translateX(1px);
}

.chat-history-item.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--bria-accent) 28%, rgba(255,255,255,.05));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bria-accent) 13%, transparent), rgba(255,255,255,.027));
  box-shadow: inset 2px 0 0 var(--bria-accent);
}

.chat-history-item > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.chat-history-item strong,
.chat-history-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-history-item strong {
  font-size: 9px;
  font-weight: 760;
}

.chat-history-item span {
  color: #657187;
  font-size: 7px;
}

.chat-history-empty {
  padding: 14px 10px;
  color: #657187;
  font-size: 8px;
  line-height: 1.5;
}

.chat-main-column {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  display: grid;
  grid-template-rows: auto auto minmax(260px, 1fr) auto;
  gap: 10px;
}

.chat-mode-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-message-list {
  min-height: 300px;
  max-height: 510px;
  overflow: auto;
  padding: 4px 3px 14px;
  display: grid;
  align-content: start;
  gap: 10px;
  scroll-behavior: smooth;
}

.chat-message {
  position: relative;
  min-width: 0;
  width: min(92%, 920px);
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.067);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.027), rgba(255,255,255,.01)),
    rgba(9,14,23,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.chat-message-user {
  justify-self: end;
  border-color: color-mix(in srgb, var(--bria-accent) 22%, rgba(255,255,255,.06));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bria-accent) 9%, rgba(255,255,255,.026)), rgba(255,255,255,.012)),
    rgba(11,17,28,.78);
}

.chat-message-system {
  justify-self: center;
  width: min(96%, 980px);
  opacity: .72;
  border-style: dashed;
}

.chat-message-role {
  margin-bottom: 7px;
  color: color-mix(in srgb, var(--bria-accent) 68%, #aeb8cb);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
}

.chat-message-body {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #d6ddea;
  font-size: 10px;
  line-height: 1.6;
}

.chat-message-body p {
  margin: 0 0 8px;
}

.chat-message-body p:last-child {
  margin-bottom: 0;
}

.chat-message-body code {
  font-family: var(--bria-mono);
  font-size: .92em;
  color: #c6d4ff;
}

.chat-message-files,
.chat-artifact-stack {
  margin-top: 11px;
  display: grid;
  gap: 9px;
}

.chat-composer {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 16px;
  background:
    radial-gradient(620px 120px at 25% -30px, color-mix(in srgb, var(--bria-accent) 11%, transparent), transparent 72%),
    rgba(6,10,18,.84);
  box-shadow:
    0 16px 46px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.chat-composer:focus-within {
  border-color: color-mix(in srgb, var(--bria-accent) 42%, rgba(255,255,255,.1));
  box-shadow:
    0 18px 52px rgba(0,0,0,.26),
    0 0 0 3px color-mix(in srgb, var(--bria-accent) 8%, transparent),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.chat-composer.has-attachments {
  border-color: color-mix(in srgb, var(--bria-accent) 28%, rgba(255,255,255,.08));
}

.chat-composer-textarea {
  width: 100%;
  min-height: 92px;
  display: block;
  resize: none;
  padding: 13px 14px 10px;
  color: var(--bria-text);
  caret-color: var(--bria-accent);
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--bria-font);
  font-size: 10px;
  line-height: 1.55;
}

.chat-composer-textarea::-moz-placeholder {
  color: #5d697d;
}

.chat-composer-textarea::placeholder {
  color: #5d697d;
}

.chat-composer-toolbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border-top: 1px solid rgba(255,255,255,.048);
  background: rgba(255,255,255,.012);
}

.chat-composer-toolbar > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.chat-composer-toolbar small {
  color: #5f6b7f;
  font-size: 7px;
}

.composer-attachment-stack {
  max-height: 430px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 9px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.012);
}

.composer-attachment-heading {
  display: grid;
  gap: 4px;
  padding: 2px 2px 1px;
}

.composer-attachment-heading > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #bac5d7;
  font-size: 8px;
  font-weight: 750;
}

.composer-attachment-heading small {
  color: #647086;
  font-size: 7px;
  line-height: 1.45;
}

.chat-attachment-card,
.artifact-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.072);
  border-radius: 13px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.024), rgba(255,255,255,.007)),
    rgba(7,12,21,.88);
}

.chat-attachment-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.chat-attachment-head,
.artifact-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-bottom: 1px solid rgba(255,255,255,.045);
}

.artifact-file-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--bria-accent) 72%, white 8%);
  border: 1px solid color-mix(in srgb, var(--bria-accent) 20%, rgba(255,255,255,.07));
  border-radius: 9px;
  background: color-mix(in srgb, var(--bria-accent) 8%, rgba(255,255,255,.02));
}

.chat-attachment-name,
.artifact-card-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.chat-attachment-name input {
  min-width: 0;
  width: 100%;
  height: 24px;
  padding: 0 5px;
  color: #e6edf7;
  font-family: var(--bria-mono);
  font-size: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  outline: none;
}

.chat-attachment-name input:hover,
.chat-attachment-name input:focus {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}

.chat-attachment-name strong,
.artifact-card-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e9eef8;
  font-family: var(--bria-mono);
  font-size: 8px;
  font-weight: 720;
}

.chat-attachment-name span,
.artifact-card-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #647086;
  font-size: 7px;
}

.syntax-preview {
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.23)),
    #080c14;
}

.syntax-preview-meta {
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px;
  color: #626e82;
  font-size: 6.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom: 1px solid rgba(255,255,255,.035);
}

.syntax-preview pre {
  margin: 0;
  max-height: 210px;
  overflow: auto;
  padding: 9px 10px 11px;
  color: #b8c3d5;
  background: transparent;
  font-family: var(--bria-mono);
  font-size: 7.6px;
  line-height: 1.55;
  -moz-tab-size: 2;
    -o-tab-size: 2;
       tab-size: 2;
  white-space: pre;
}

.syntax-preview code {
  font: inherit;
}

.syntax-comment { color: #657289; font-style: italic; }
.syntax-string { color: #92d5a9; }
.syntax-keyword { color: #ba9cff; font-weight: 650; }
.syntax-number { color: #f0bd7e; }
.syntax-tag { color: #7fc8ff; }
.syntax-property { color: #83c7f4; }
.syntax-operator { color: #ff9fb0; }
.syntax-plain { color: #bec8d8; }

.artifact-card {
  border-color: rgba(255,255,255,.08);
}

.artifact-card.artifact-ready {
  border-color: rgba(99,230,174,.18);
}

.artifact-card.artifact-blocked {
  border-color: rgba(255,128,145,.19);
}

.artifact-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
}

.artifact-status.ready {
  color: #8bf0c1;
  border-color: rgba(99,230,174,.18);
  background: rgba(99,230,174,.06);
}

.artifact-status.blocked {
  color: #ff9aa7;
  border-color: rgba(255,128,145,.19);
  background: rgba(255,128,145,.055);
}

.artifact-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px 0;
  background: rgba(255,255,255,.035);
}

.artifact-check-grid > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  background: #0a0f19;
}

.artifact-check-grid span {
  color: #657187;
  font-size: 6.5px;
}

.artifact-check-grid strong {
  font-size: 7.4px;
}

.check-good { color: #7de6b6; }
.check-bad { color: #ff8f9d; }

.artifact-findings {
  display: grid;
  gap: 5px;
  padding: 8px 9px;
  border-top: 1px solid rgba(255,255,255,.045);
  background: rgba(255,128,145,.025);
}

.artifact-findings > div {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  color: #b9c2d2;
  font-size: 7px;
  line-height: 1.45;
}

.artifact-findings svg {
  margin-top: 1px;
  color: #ffad78;
}

.artifact-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 9px;
  border-top: 1px solid rgba(255,255,255,.045);
}

.artifact-run-output {
  margin: 0;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  color: #b8c8dc;
  background: #05080e;
  border-top: 1px solid rgba(255,255,255,.045);
  font-family: var(--bria-mono);
  font-size: 7.4px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.artifact-preview-backdrop {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(2,4,8,.82);
  backdrop-filter: blur(14px);
}

.artifact-preview-window {
  width: min(1180px, 96vw);
  height: min(820px, 92vh);
  overflow: hidden;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: #070b12;
  box-shadow: 0 35px 120px rgba(0,0,0,.62);
}

.artifact-preview-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 11px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: rgba(12,17,27,.96);
}

.artifact-preview-titlebar > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.artifact-preview-titlebar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #eff4fc;
  font-family: var(--bria-mono);
  font-size: 9px;
}

.artifact-preview-titlebar span {
  color: #657187;
  font-size: 7px;
}

.artifact-preview-window iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.spin {
  animation: abr-spin .9s linear infinite;
}

@keyframes abr-spin {
  to { transform: rotate(360deg); }
}

/* The existing two-column cognition layout remains, but the chat side is now a
   nested history + conversation workbench rather than one oversized textarea. */
.operations-grid > .chat-workbench {
  min-width: 0;
}

/* Responsive behavior for the new conversation/file surfaces. */
@media (max-width: 1240px) {
  .chat-workbench {
    grid-template-columns: 178px minmax(0, 1fr);
  }

  .chat-composer-toolbar small {
    display: none;
  }
}

@media (max-width: 980px) {
  .chat-workbench {
    grid-template-columns: 1fr;
    min-height: 720px;
  }

  .chat-history-rail {
    max-height: 155px;
    border-right: 0;
    border-bottom: 1px solid var(--bria-line);
  }

  .chat-history-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-main-column {
    min-height: 560px;
  }
}

@media (max-width: 720px) {
  .chat-main-column {
    padding: 10px;
  }

  .chat-history-list {
    grid-template-columns: 1fr;
  }

  .chat-message {
    width: 100%;
  }

  .chat-composer-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .chat-composer-toolbar > div {
    justify-content: space-between;
  }

  .chat-composer-toolbar > .primary-button {
    width: 100%;
    justify-content: center;
  }

  .artifact-check-grid {
    grid-template-columns: 1fr;
  }

  .artifact-preview-backdrop {
    padding: 8px;
  }

  .artifact-preview-window {
    width: 100%;
    height: 96vh;
    border-radius: 12px;
  }
  }
/* ========================================================================== 
   ABR MOBILE FOCUS MODE — iOS / ANDROID
   Keeps the desktop workstation dense, but phones render one primary surface
   at a time with safe-area spacing and touch-sized controls.
   ========================================================================== */

.mobile-only {
  display: none !important;
}

.mobile-workspace-frame {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.sidebar-scrim {
  position: absolute;
  inset: 0;
  z-index: 45;
  padding: 0;
  border: 0;
  background: rgba(2, 5, 12, .62);
  backdrop-filter: blur(4px);
}

.mobile-inspector-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(2, 6, 18, .66);
  backdrop-filter: blur(5px);
}

.mobile-inspector-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  display: none;
  max-height: min(82dvh, 780px);
  padding: 8px 10px max(12px, env(safe-area-inset-bottom));
  border: 1px solid var(--bria-line-strong);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: rgba(8, 12, 20, .985);
  box-shadow: 0 -28px 90px rgba(0, 0, 0, .55);
  overflow: hidden;
}

.mobile-drawer-handle {
  width: 44px;
  height: 4px;
  margin: 2px auto 10px;
  border-radius: 99px;
  background: rgba(255,255,255,.2);
}

.mobile-inspector-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 10px;
}

.mobile-inspector-heading > div {
  display: grid;
  gap: 4px;
}

.mobile-inspector-heading strong {
  font-size: 15px;
}

@media (max-width: 900px) {
  .mobile-only {
    display: grid !important;
  }

  .mobile-inspector-drawer {
    display: block;
  }

  .bria-os {
    min-height: 0;
    height: 100dvh;
    grid-template-rows: 56px minmax(0, 1fr);
    padding-top: env(safe-area-inset-top);
  }

  .bria-titlebar {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  }

  .titlebar-center,
  .system-stat,
  .bria-statusbar {
    display: none !important;
  }

  .brand {
    gap: 8px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .brand strong {
    font-size: 12px;
  }

  .brand span {
    max-width: 52vw;
    font-size: 8px;
  }

  .system-cluster {
    gap: 4px;
  }

  .icon-button,
  .toolbar-icon {
    min-width: 42px;
    width: 42px;
    min-height: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .workspace-shell,
  .workspace-content {
    min-width: 0;
    min-height: 0;
  }

  .workspace-content {
    grid-template-rows: 48px minmax(0, 1fr);
  }

  .workspace-toolbar {
    height: 48px;
    gap: 6px;
    padding: 0 max(7px, env(safe-area-inset-right)) 0 max(7px, env(safe-area-inset-left));
  }

  .breadcrumb {
    font-size: 10px;
  }

  .breadcrumb > span {
    display: none;
  }

  .engine-badge {
    width: 18px;
    max-width: 18px;
    font-size: 0;
    overflow: visible;
  }

  .engine-pulse {
    width: 8px;
    height: 8px;
  }

  .bria-sidebar {
    width: min(82vw, 292px) !important;
    min-width: min(82vw, 292px) !important;
    max-width: 292px;
    padding-left: env(safe-area-inset-left);
    box-shadow: 28px 0 80px rgba(0,0,0,.6);
  }

  .sidebar-workspace {
    padding-top: 10px;
  }

  .primary-navigation > button {
    min-height: 46px;
    height: 46px;
    padding: 0 13px;
    border-radius: 12px;
  }

  .primary-navigation > button > span:not(.nav-indicator) {
    font-size: 12px;
  }

  .system-card {
    display: none;
  }

  .workspace-main,
  .workspace-scroll {
    padding: 10px max(8px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    overscroll-behavior: contain;
  }

  .hero-dashboard {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 14px;
    margin-bottom: 9px;
    border-radius: 14px;
  }

  .hero-orb {
    display: none;
  }

  .hero-dashboard h1 {
    max-width: none;
    margin-top: 5px;
    font-size: clamp(19px, 6vw, 24px);
    line-height: 1.08;
  }

  .hero-dashboard p {
    max-width: none;
    margin-top: 7px;
    font-size: 10px;
    line-height: 1.48;
  }

  .eyebrow {
    font-size: 7px;
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .dashboard-card {
    min-height: 104px;
    padding: 11px;
    border-radius: 13px;
  }

  .dashboard-card > strong {
    font-size: clamp(18px, 5.5vw, 24px);
  }

  .dashboard-card > small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .operations-grid {
    gap: 9px;
  }

  .glass-panel {
    border-radius: 14px;
  }

  .panel-heading {
    margin-bottom: 10px;
  }

  .chat-workbench {
    min-height: calc(100dvh - 126px);
    grid-template-columns: 1fr;
    border-radius: 14px;
  }

  .chat-history-rail {
    max-height: 112px;
    border-right: 0;
    border-bottom: 1px solid var(--bria-line);
  }

  .chat-history-head {
    min-height: 42px;
    padding: 6px 8px 5px 10px;
  }

  .chat-history-head .inspector-label {
    display: none;
  }

  .chat-history-list {
    min-height: 0;
    display: flex;
    gap: 6px;
    padding: 6px 8px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  .chat-history-item {
    flex: 0 0 min(68vw, 230px);
    min-height: 48px;
    padding: 7px 8px;
    scroll-snap-align: start;
  }

  .chat-main-column {
    min-height: 0;
    padding: 8px;
    gap: 7px;
    grid-template-rows: auto minmax(220px, 1fr) auto;
  }

  .chat-mode-strip {
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    padding: 1px 0 3px;
    scrollbar-width: none;
  }

  .chat-mode-strip::-webkit-scrollbar,
  .chat-history-list::-webkit-scrollbar {
    display: none;
  }

  .chat-mode-strip button {
    flex: 0 0 auto;
    min-height: 36px;
    padding-inline: 10px;
  }

  .chat-message-list {
    min-height: 220px;
    max-height: none;
    gap: 7px;
    padding: 2px 1px 7px;
  }

  .chat-message {
    width: 100%;
    padding: 10px 11px;
    border-radius: 13px;
  }

  .chat-message-system {
    width: 100%;
  }

  .chat-message-body {
    font-size: 11px;
    line-height: 1.55;
  }

  .chat-composer {
    border-radius: 14px;
  }

  .chat-composer-textarea {
    min-height: 68px;
    padding: 11px 11px 8px;
    font-size: 16px; /* prevents iOS Safari input zoom */
  }

  .chat-composer-toolbar {
    min-height: 46px;
    align-items: center;
    flex-direction: row;
    gap: 6px;
    padding: 6px;
  }

  .chat-composer-toolbar > div {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    gap: 5px;
  }

  .chat-composer-toolbar small {
    display: none;
  }

  .chat-composer-toolbar .secondary-button,
  .chat-composer-toolbar .primary-button {
    min-height: 38px;
    padding: 0 10px;
  }

  .chat-composer-toolbar > .primary-button {
    width: auto;
    flex: 0 0 auto;
  }

  .drop-zone {
    min-height: 190px;
    padding: 18px 10px;
  }

  .ingest-capabilities,
  .ingest-stats {
    gap: 6px;
  }

  .queue-item {
    min-height: 54px;
  }

  .mobile-inspector-drawer .inspector {
    height: min(68dvh, 660px);
    padding: 4px 4px 16px;
    overflow: auto;
    border-left: 0;
    background: transparent;
  }

  .mobile-inspector-drawer .inspector > .panel-heading {
    display: none;
  }

  .control-center-drawer {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: 88dvh;
    margin: 0 !important;
    padding: 18px 14px max(18px, env(safe-area-inset-bottom)) !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .command-overlay {
    align-items: flex-start;
    padding: max(10px, env(safe-area-inset-top)) 8px 8px;
  }

  .command-dialog {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 16px;
  }

  input,
  textarea,
  select {
    font-size: 16px !important; /* iOS Safari: avoid focus zoom */
  }

  button,
  [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 520px) {
  .bria-os {
    grid-template-rows: 52px minmax(0, 1fr);
  }

  .brand span {
    display: none;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
  }

  .workspace-content {
    grid-template-rows: 46px minmax(0,1fr);
  }

  .workspace-toolbar {
    height: 46px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-card {
    min-height: 96px;
  }

  .dashboard-card > span {
    font-size: 7px;
  }

  .dashboard-card > small {
    font-size: 7px;
  }

  .chat-history-rail {
    max-height: 102px;
  }

  .chat-history-head strong {
    font-size: 10px;
  }

  .chat-mode-strip .secondary-button,
  .chat-mode-strip .primary-button {
    font-size: 9px;
  }

  .artifact-preview-backdrop {
    padding: 0;
  }

  .artifact-preview-window {
    height: 100dvh;
    border-radius: 0;
  }

  .mobile-inspector-drawer {
    max-height: 86dvh;
  }
}

@media (hover: none) and (pointer: coarse) {
  .dashboard-card:hover,
  .command-trigger:hover,
  .chat-history-item:hover,
  .primary-button:hover,
  .secondary-button:hover {
    transform: none;
  }
}

/* ========================================================================== */
/* BRIA v0.22 — Professional Chat Center / Extensions / Media               */
/* All selectors are namespaced so the preserved legacy Advanced Lab remains  */
/* visually compatible and only mounts when explicitly opened.                */
/* ========================================================================== */

:root,
html[data-abr-theme="aether"] {
  --abr-bg: #060b12;
  --abr-bg-2: #09131e;
  --abr-panel: rgba(13, 24, 36, .78);
  --abr-panel-strong: rgba(11, 20, 31, .94);
  --abr-panel-soft: rgba(18, 33, 48, .58);
  --abr-border: rgba(130, 190, 226, .15);
  --abr-border-hot: rgba(106, 219, 255, .38);
  --abr-text: #eef9ff;
  --abr-muted: #8ba6b8;
  --abr-accent: #5fd8ff;
  --abr-accent-2: #7d7cff;
  --abr-accent-3: #72ffd6;
  --abr-danger: #ff718d;
  --abr-warn: #ffc56e;
  --abr-good: #79f5bd;
  --abr-shadow: rgba(0, 0, 0, .42);
  --abr-glow: rgba(71, 198, 255, .18);
  --abr-user: linear-gradient(135deg, rgba(62, 133, 255, .26), rgba(72, 80, 183, .16));
  --abr-assistant: linear-gradient(135deg, rgba(18, 39, 56, .88), rgba(11, 25, 38, .84));
  --abr-grid: rgba(122, 184, 219, .045);
}

html[data-abr-theme="ember"] {
  --abr-bg: #120907;
  --abr-bg-2: #1d0e09;
  --abr-panel: rgba(35, 17, 12, .82);
  --abr-panel-strong: rgba(31, 13, 9, .95);
  --abr-panel-soft: rgba(54, 27, 18, .58);
  --abr-border: rgba(255, 166, 99, .17);
  --abr-border-hot: rgba(255, 118, 62, .42);
  --abr-text: #fff6ef;
  --abr-muted: #c4a18b;
  --abr-accent: #ff7b45;
  --abr-accent-2: #ffbd69;
  --abr-accent-3: #ff5a83;
  --abr-danger: #ff6474;
  --abr-warn: #ffc861;
  --abr-good: #a8f08a;
  --abr-shadow: rgba(14, 4, 1, .5);
  --abr-glow: rgba(255, 104, 48, .17);
  --abr-user: linear-gradient(135deg, rgba(255, 92, 39, .29), rgba(145, 54, 17, .17));
  --abr-assistant: linear-gradient(135deg, rgba(50, 24, 15, .9), rgba(27, 13, 10, .86));
  --abr-grid: rgba(255, 157, 95, .048);
}

html[data-abr-theme="violet"] {
  --abr-bg: #0b0715;
  --abr-bg-2: #130b21;
  --abr-panel: rgba(24, 15, 41, .82);
  --abr-panel-strong: rgba(19, 11, 33, .95);
  --abr-panel-soft: rgba(40, 24, 64, .58);
  --abr-border: rgba(191, 145, 255, .17);
  --abr-border-hot: rgba(177, 108, 255, .45);
  --abr-text: #faf4ff;
  --abr-muted: #ab97bf;
  --abr-accent: #b26eff;
  --abr-accent-2: #796dff;
  --abr-accent-3: #f184ff;
  --abr-danger: #ff739f;
  --abr-warn: #ffd081;
  --abr-good: #80ebca;
  --abr-shadow: rgba(6, 1, 12, .5);
  --abr-glow: rgba(169, 94, 255, .19);
  --abr-user: linear-gradient(135deg, rgba(137, 78, 255, .3), rgba(74, 55, 159, .18));
  --abr-assistant: linear-gradient(135deg, rgba(35, 22, 56, .9), rgba(20, 13, 35, .87));
  --abr-grid: rgba(193, 142, 255, .05);
}

.abr-v22-shell,
.abr-v22-shell * { box-sizing: border-box; }

.abr-v22-shell {
  width: 100%;
  height: 100dvh;
  min-height: 640px;
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  overflow: hidden;
  position: relative;
  color: var(--abr-text);
  background:
    linear-gradient(var(--abr-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--abr-grid) 1px, transparent 1px),
    radial-gradient(circle at 48% -10%, var(--abr-glow), transparent 38%),
    linear-gradient(145deg, var(--abr-bg), var(--abr-bg-2));
  background-size: 44px 44px, 44px 44px, auto, auto;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
}

.abr-ambient-layer { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.abr-ambient-layer i { position: absolute; width: 34vw; aspect-ratio: 1; border-radius: 999px; filter: blur(90px); opacity: .17; animation: abrFloat 18s ease-in-out infinite alternate; }
.abr-ambient-layer i:nth-child(1){left:-11%;top:-16%;background:var(--abr-accent)}
.abr-ambient-layer i:nth-child(2){right:-12%;top:2%;background:var(--abr-accent-2);animation-duration:23s}
.abr-ambient-layer i:nth-child(3){left:36%;bottom:-25%;background:var(--abr-accent-3);animation-duration:28s}
.abr-ambient-layer i:nth-child(4){left:50%;top:18%;width:18vw;background:var(--abr-accent);opacity:.08;animation-duration:14s}
.abr-ambient-layer i:nth-child(5){right:22%;bottom:4%;width:14vw;background:var(--abr-accent-2);opacity:.08;animation-duration:20s}
@keyframes abrFloat { to { transform: translate3d(5vw, 4vh, 0) scale(1.15); } }
@keyframes abrSpin { to { transform: rotate(360deg); } }
@keyframes abrPulse { 50% { opacity: .45; transform: scale(.96); } }
@keyframes abrShimmer { from { background-position: 0 0; } to { background-position: 200% 0; } }

.abr-sidebar {
  position: relative;
  z-index: 20;
  min-width: 0;
  height: 100dvh;
  border-right: 1px solid var(--abr-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--abr-panel-strong) 92%, transparent), color-mix(in srgb, var(--abr-bg) 88%, transparent));
  backdrop-filter: blur(28px) saturate(130%);
  display: flex;
  flex-direction: column;
  padding: 14px 12px max(14px, env(safe-area-inset-bottom));
  box-shadow: 14px 0 50px rgba(0,0,0,.12);
}
.abr-side-brand { display:flex; align-items:center; gap:11px; padding:6px 7px 15px; min-height:56px; }
.abr-side-brand img,.abr-top-logo { width:34px; height:34px; border-radius:10px; filter: drop-shadow(0 0 14px var(--abr-glow)); }
.abr-side-brand>div,.abr-topbar-left>div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.abr-side-brand strong { font-size:15px; letter-spacing:.13em; }
.abr-side-brand span,.abr-topbar-left span { font-size:11px; color:var(--abr-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.abr-main-nav { display:grid; gap:3px; overflow-y:auto; padding:4px 0 8px; scrollbar-width:none; }
.abr-main-nav::-webkit-scrollbar,.abr-side-chats::-webkit-scrollbar { display:none; }
.abr-main-nav>button { width:100%; display:grid; grid-template-columns:31px minmax(0,1fr); align-items:center; gap:8px; min-height:47px; padding:7px 9px; color:var(--abr-muted); border:1px solid transparent; border-radius:12px; background:transparent; text-align:left; cursor:pointer; transition:.18s ease; }
.abr-main-nav>button svg { width:18px; justify-self:center; }
.abr-main-nav>button div { display:flex; min-width:0; flex-direction:column; gap:1px; }
.abr-main-nav>button strong { font-size:12px; color:var(--abr-text); font-weight:650; }
.abr-main-nav>button span { font-size:10px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.abr-main-nav>button:hover { background:var(--abr-panel-soft); color:var(--abr-accent); transform:translateX(2px); }
.abr-main-nav>button.active { color:var(--abr-accent); border-color:var(--abr-border-hot); background:linear-gradient(110deg, color-mix(in srgb, var(--abr-accent) 14%, transparent), color-mix(in srgb, var(--abr-accent-2) 7%, transparent)); box-shadow:inset 3px 0 0 var(--abr-accent), 0 8px 24px rgba(0,0,0,.12); }
.abr-side-rule { height:1px; background:var(--abr-border); margin:7px 5px; }
.abr-side-heading { display:flex; align-items:center; justify-content:space-between; padding:7px 8px; color:var(--abr-muted); font-size:10px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.abr-side-chats { display:grid; gap:2px; min-height:0; max-height:170px; overflow:auto; }
.abr-side-chats button { border:0; background:transparent; color:var(--abr-muted); display:flex; flex-direction:column; text-align:left; gap:2px; border-radius:9px; padding:7px 9px; cursor:pointer; min-width:0; }
.abr-side-chats button:hover,.abr-side-chats button.active { background:var(--abr-panel-soft); color:var(--abr-text); }
.abr-side-chats span { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; }
.abr-side-chats small { font-size:9px; color:var(--abr-muted); }
.abr-side-footer { margin-top:auto; padding-top:9px; }
.abr-settings-row { margin-top:8px; width:100%; border:0; background:transparent; color:var(--abr-muted); min-height:38px; border-radius:9px; display:flex; align-items:center; gap:8px; padding:0 9px; cursor:pointer; font-size:11px; }
.abr-settings-row:hover { background:var(--abr-panel-soft); color:var(--abr-text); }

.abr-theme-switcher { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
.abr-theme-switcher button { position:relative; height:32px; border:1px solid var(--abr-border); border-radius:9px; background:var(--abr-panel-soft); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; overflow:hidden; }
.abr-theme-switcher button.active { border-color:var(--abr-border-hot); box-shadow:0 0 0 2px color-mix(in srgb,var(--abr-accent) 10%,transparent); }
.abr-theme-switcher i { width:8px; height:16px; display:block; }
.abr-theme-switcher span { display:none; }

.abr-app-column { min-width:0; min-height:0; height:100dvh; display:grid; grid-template-rows:62px minmax(0,1fr) 30px; }
.abr-topbar { min-width:0; padding:0 20px; border-bottom:1px solid var(--abr-border); display:flex; align-items:center; justify-content:space-between; gap:18px; background:color-mix(in srgb,var(--abr-panel-strong) 75%,transparent); backdrop-filter:blur(25px) saturate(135%); z-index:12; }
.abr-topbar-left { display:flex; align-items:center; gap:11px; min-width:0; }
.abr-topbar-left strong { display:block; max-width:min(46vw,650px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
.abr-topbar-left span { display:flex; align-items:center; gap:4px; }
.abr-topbar-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.abr-runtime-pill { height:34px; padding:0 11px; display:flex; align-items:center; gap:7px; border:1px solid var(--abr-border); border-radius:999px; color:var(--abr-accent); background:var(--abr-panel-soft); font-size:10px; font-weight:750; letter-spacing:.06em; }
.abr-runtime-pill svg { width:14px; }

.abr-icon-button,.abr-soft-button,.abr-primary-button { border:1px solid var(--abr-border); color:var(--abr-text); border-radius:10px; cursor:pointer; font:inherit; transition:transform .14s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease; }
.abr-icon-button { width:36px; height:36px; display:grid; place-items:center; padding:0; background:var(--abr-panel-soft); }
.abr-icon-button svg { width:17px; height:17px; }
.abr-soft-button,.abr-primary-button { min-height:36px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:11px; font-weight:700; }
.abr-soft-button { background:var(--abr-panel-soft); }
.abr-primary-button { border-color:color-mix(in srgb,var(--abr-accent) 54%,var(--abr-border)); background:linear-gradient(125deg, color-mix(in srgb,var(--abr-accent) 78%,#10151e), color-mix(in srgb,var(--abr-accent-2) 70%,#10151e)); color:#fff; box-shadow:0 8px 24px color-mix(in srgb,var(--abr-accent) 18%,transparent); }
.abr-icon-button:hover,.abr-soft-button:hover { border-color:var(--abr-border-hot); background:color-mix(in srgb,var(--abr-accent) 10%,var(--abr-panel-soft)); }
.abr-primary-button:hover { transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 12px 30px color-mix(in srgb,var(--abr-accent) 25%,transparent); }
.abr-icon-button:active,.abr-soft-button:active,.abr-primary-button:active { transform:scale(.96); }
.abr-icon-button:disabled,.abr-soft-button:disabled,.abr-primary-button:disabled { cursor:not-allowed; opacity:.4; transform:none; }

.abr-workspace-canvas { min-height:0; min-width:0; overflow:hidden; position:relative; }
.abr-workspace-transition { height:100%; min-height:0; }
.abr-workspace { height:100%; min-height:0; overflow:auto; padding:clamp(20px,3vw,42px); scrollbar-color:var(--abr-border-hot) transparent; }
.abr-workspace>header { width:min(1080px,100%); margin:0 auto 26px; }
.abr-workspace>header h1 { margin:7px 0 8px; font-size:clamp(26px,3.4vw,48px); letter-spacing:-.045em; line-height:1.02; }
.abr-workspace>header p { color:var(--abr-muted); line-height:1.65; max-width:760px; margin:0; font-size:13px; }
.abr-workspace-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.abr-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--abr-accent); }
.abr-eyebrow svg { width:15px; }
.abr-workspace-grid { width:min(1120px,100%); margin:0 auto; display:grid; gap:14px; }
.abr-workspace-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.abr-workspace-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.abr-glass-card { min-width:0; border:1px solid var(--abr-border); border-radius:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--abr-panel) 92%,transparent),color-mix(in srgb,var(--abr-panel-soft) 72%,transparent)); backdrop-filter:blur(16px); box-shadow:0 18px 50px rgba(0,0,0,.13); padding:18px; }
.abr-glass-card h3 { margin:0 0 8px; }
.abr-glass-card p { color:var(--abr-muted); line-height:1.55; font-size:12px; }
.abr-card-title { display:flex; align-items:center; gap:8px; font-size:13px; }
.abr-card-title svg { width:16px; color:var(--abr-accent); }
.abr-list-line { margin:0!important; padding:7px 0; border-bottom:1px solid var(--abr-border); }
.abr-list-line:last-child { border-bottom:0; }
.abr-muted { color:var(--abr-muted)!important; }
.abr-metric-grid { width:min(1120px,100%); margin:0 auto 14px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.abr-metric-chip { border:1px solid var(--abr-border); background:var(--abr-panel-soft); border-radius:12px; padding:10px 11px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.abr-metric-chip span { color:var(--abr-muted); font-size:9px; text-transform:uppercase; letter-spacing:.09em; }
.abr-metric-chip strong { font-size:15px; overflow:hidden; text-overflow:ellipsis; }
.abr-metric-accent strong { color:var(--abr-accent); }
.abr-metric-good strong { color:var(--abr-good); }
.abr-metric-warn strong { color:var(--abr-warn); }

/* Chat is intentionally the largest, least-cluttered surface. */
.abr-chat-center { height:100%; min-height:0; display:grid; grid-template-columns:168px minmax(0,1fr); max-width:1800px; margin:0 auto; }
.abr-conversation-rail { min-height:0; padding:12px 9px; border-right:1px solid var(--abr-border); background:color-mix(in srgb,var(--abr-panel-soft) 32%,transparent); overflow:auto; display:flex; flex-direction:column; gap:4px; }
.abr-conversation-rail button { width:100%; min-height:42px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--abr-muted); padding:8px 9px; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:7px; cursor:pointer; font-size:10px; }
.abr-conversation-rail button span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.abr-conversation-rail button small { font-size:9px; }
.abr-conversation-rail button:hover,.abr-conversation-rail button.active { border-color:var(--abr-border); background:var(--abr-panel-soft); color:var(--abr-text); }
.abr-conversation-rail .abr-rail-new { justify-content:flex-start; color:var(--abr-accent); border-color:var(--abr-border); margin-bottom:4px; }
.abr-conversation-rail svg { width:15px; }
.abr-chat-main { height:100%; min-width:0; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; position:relative; }
.abr-message-scroll { min-height:0; overflow:auto; padding:22px max(26px,calc((100% - 1160px)/2)) 28px; scroll-behavior:smooth; scrollbar-color:var(--abr-border-hot) transparent; }
.abr-message { width:100%; display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; padding:12px 0 17px; }
.abr-message-avatar { width:32px; height:32px; border:1px solid var(--abr-border); background:var(--abr-panel-soft); border-radius:10px; display:grid; place-items:center; color:var(--abr-accent); box-shadow:0 8px 24px rgba(0,0,0,.1); }
.abr-message-avatar svg { width:17px; }
.abr-message-body { min-width:0; max-width:1120px; border:1px solid var(--abr-border); border-radius:15px; background:var(--abr-assistant); padding:12px 15px; box-shadow:0 10px 34px rgba(0,0,0,.1); }
.abr-message-user .abr-message-body { background:var(--abr-user); border-color:color-mix(in srgb,var(--abr-accent) 24%,var(--abr-border)); }
.abr-message-meta { display:flex; align-items:center; gap:8px; min-height:20px; margin-bottom:5px; }
.abr-message-meta strong { font-size:10px; letter-spacing:.04em; }
.abr-message-meta time { font-size:9px; color:var(--abr-muted); }
.abr-message-meta button { margin-left:auto; width:24px; height:24px; border:0; border-radius:6px; background:transparent; color:var(--abr-muted); display:grid; place-items:center; cursor:pointer; }
.abr-message-meta button:hover { background:var(--abr-panel-soft); color:var(--abr-text); }
.abr-message-meta button svg { width:12px; }
.abr-message-content { color:var(--abr-text); font-size:13.5px; line-height:1.68; overflow-wrap:anywhere; }
.abr-message-content>*:first-child { margin-top:0; }
.abr-message-content>*:last-child { margin-bottom:0; }
.abr-message-content p { margin:.55em 0; }
.abr-message-content pre { overflow:auto; border:1px solid var(--abr-border); background:rgba(0,0,0,.25); border-radius:10px; padding:12px; }
.abr-message-content code { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size:.92em; }
.abr-answer-trace { margin-top:9px; padding-top:8px; border-top:1px solid var(--abr-border); color:var(--abr-muted); font-size:9px; letter-spacing:.03em; }

.abr-welcome { min-height:100%; display:grid; grid-template-columns:minmax(220px,390px) minmax(0,590px); justify-content:center; align-items:center; gap:clamp(20px,5vw,80px); padding:24px; }
.abr-welcome-orb { width:min(29vw,310px); aspect-ratio:1; border-radius:50%; position:relative; margin:auto; background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--abr-accent) 52%,white),color-mix(in srgb,var(--abr-accent-2) 22%,transparent) 38%,transparent 66%); border:1px solid var(--abr-border-hot); box-shadow:0 0 80px var(--abr-glow),inset 0 0 60px color-mix(in srgb,var(--abr-accent) 12%,transparent); }
.abr-welcome-orb:after { content:"ABR"; position:absolute; inset:24%; display:grid; place-items:center; border:1px solid var(--abr-border-hot); border-radius:28%; color:var(--abr-text); font-size:clamp(18px,3vw,35px); font-weight:900; letter-spacing:.18em; backdrop-filter:blur(8px); }
.abr-welcome-orb span { position:absolute; inset:9%; border:1px solid color-mix(in srgb,var(--abr-accent) 34%,transparent); border-radius:43% 57% 61% 39%/48% 42% 58% 52%; }
.abr-welcome-orb span:nth-child(2){inset:16%;transform:rotate(57deg);border-color:color-mix(in srgb,var(--abr-accent-2) 42%,transparent)}
.abr-welcome-orb span:nth-child(3){inset:28%;transform:rotate(113deg);border-color:color-mix(in srgb,var(--abr-accent-3) 42%,transparent)}
.abr-welcome-copy h1 { font-size:clamp(30px,4.6vw,64px); letter-spacing:-.06em; line-height:.98; margin:9px 0 13px; max-width:680px; }
.abr-welcome-copy p { color:var(--abr-muted); line-height:1.7; font-size:13px; max-width:600px; }
.abr-welcome-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:19px; }
.abr-welcome-actions button { min-height:39px; padding:0 13px; border:1px solid var(--abr-border); border-radius:11px; background:var(--abr-panel-soft); color:var(--abr-text); display:flex; align-items:center; gap:7px; cursor:pointer; }
.abr-welcome-actions button:hover { border-color:var(--abr-border-hot); color:var(--abr-accent); transform:translateY(-1px); }
.abr-welcome-actions svg { width:16px; }

.abr-composer-wrap { position:relative; width:min(1160px,calc(100% - 42px)); margin:0 auto max(10px,env(safe-area-inset-bottom)); padding:0 0 2px; }
.abr-reasoning-strip { display:flex; gap:5px; padding:5px 2px 7px; overflow-x:auto; scrollbar-width:none; }
.abr-reasoning-strip::-webkit-scrollbar{display:none}
.abr-reasoning-strip button { min-height:29px; flex:0 0 auto; padding:0 9px; border:1px solid var(--abr-border); background:color-mix(in srgb,var(--abr-panel) 88%,transparent); color:var(--abr-muted); border-radius:999px; display:flex; align-items:center; gap:5px; font-size:9px; cursor:pointer; }
.abr-reasoning-strip button.active { color:var(--abr-accent); border-color:var(--abr-border-hot); background:color-mix(in srgb,var(--abr-accent) 10%,var(--abr-panel)); }
.abr-reasoning-strip svg { width:12px; }
.abr-composer { border:1px solid var(--abr-border-hot); border-radius:17px; padding:7px; display:grid; grid-template-columns:37px minmax(0,1fr) 39px; align-items:end; gap:5px; background:color-mix(in srgb,var(--abr-panel-strong) 92%,transparent); box-shadow:0 18px 55px rgba(0,0,0,.24),0 0 0 1px color-mix(in srgb,var(--abr-accent) 4%,transparent),0 0 35px var(--abr-glow); backdrop-filter:blur(24px); }
.abr-composer textarea { width:100%; min-height:37px; max-height:170px; resize:none; border:0; outline:0; background:transparent; color:var(--abr-text); padding:8px 6px; font:inherit; font-size:13px; line-height:1.45; }
.abr-composer textarea::-moz-placeholder { color:color-mix(in srgb,var(--abr-muted) 78%,transparent); }
.abr-composer textarea::placeholder { color:color-mix(in srgb,var(--abr-muted) 78%,transparent); }
.abr-send-button { width:39px; height:39px; border:0; border-radius:12px; display:grid; place-items:center; cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--abr-accent),var(--abr-accent-2)); box-shadow:0 6px 18px color-mix(in srgb,var(--abr-accent) 22%,transparent); }
.abr-send-button svg { width:17px; }
.abr-send-button:disabled { opacity:.35; cursor:not-allowed; }
.abr-spin { animation:abrSpin 1.1s linear infinite; }
.abr-composer-foot { min-height:22px; padding:5px 8px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--abr-muted); font-size:8.5px; }
.abr-attachment-tray { display:flex; gap:6px; overflow-x:auto; padding:0 2px 5px; }
.abr-attachment-tray>div { flex:0 0 auto; border:1px solid var(--abr-border); border-radius:8px; background:var(--abr-panel-soft); min-height:29px; padding:0 6px 0 8px; display:flex; align-items:center; gap:5px; font-size:9px; }
.abr-attachment-tray svg { width:12px; }
.abr-attachment-tray button { border:0; background:transparent; color:var(--abr-muted); padding:2px; display:grid; place-items:center; cursor:pointer; }

.abr-status-dock { min-width:0; border-top:1px solid var(--abr-border); background:color-mix(in srgb,var(--abr-panel-strong) 76%,transparent); display:flex; align-items:center; gap:18px; padding:0 18px; overflow:hidden; color:var(--abr-muted); font-size:8.5px; white-space:nowrap; }
.abr-status-dock span { display:flex; align-items:center; gap:5px; }
.abr-status-dock svg { width:11px; color:var(--abr-accent); }

.abr-inspector-backdrop,.abr-mobile-backdrop { position:fixed; inset:0; border:0; background:rgba(0,0,0,.44); backdrop-filter:blur(3px); z-index:80; }
.abr-inspector { position:fixed; right:0; top:0; bottom:0; width:min(420px,90vw); z-index:90; border-left:1px solid var(--abr-border-hot); background:color-mix(in srgb,var(--abr-panel-strong) 97%,transparent); box-shadow:-30px 0 80px rgba(0,0,0,.35); backdrop-filter:blur(28px); padding:16px; overflow:auto; }
.abr-inspector-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:13px; border-bottom:1px solid var(--abr-border); }
.abr-inspector-head>div { display:flex; align-items:center; gap:8px; }
.abr-inspector-head>div svg { color:var(--abr-accent); }
.abr-inspector-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:14px 0; }
.abr-inspector-block { border-top:1px solid var(--abr-border); padding:12px 0; }
.abr-inspector-block h4 { margin:0 0 8px; display:flex; align-items:center; gap:6px; font-size:11px; }
.abr-inspector-block h4 svg { width:14px; color:var(--abr-accent); }
.abr-inspector-block p,.abr-inspector-block span { color:var(--abr-muted); font-size:10px; line-height:1.5; }

/* Extension center */
.abr-extension-grid { width:min(1180px,100%); margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.abr-extension-card { position:relative; border:1px solid var(--abr-border); border-radius:18px; background:var(--abr-panel); padding:16px; display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:12px; align-items:start; overflow:hidden; }
.abr-extension-card:before { content:""; position:absolute; width:140px; height:140px; right:-60px; top:-70px; border-radius:50%; background:var(--abr-glow); filter:blur(24px); }
.abr-extension-card.installed { border-color:var(--abr-border-hot); }
.abr-extension-icon { width:44px; height:44px; border:1px solid var(--abr-border-hot); border-radius:13px; display:grid; place-items:center; color:var(--abr-accent); background:color-mix(in srgb,var(--abr-accent) 8%,transparent); }
.abr-extension-icon svg { width:20px; }
.abr-extension-card small { color:var(--abr-accent); font-size:8px; letter-spacing:.12em; }
.abr-extension-card h3 { margin:3px 0 6px; font-size:14px; }
.abr-extension-card p { margin:0; color:var(--abr-muted); font-size:10.5px; line-height:1.45; }
.abr-permissions { display:flex; flex-wrap:wrap; gap:4px; margin-top:9px; }
.abr-permissions span,.abr-profile-pills span { padding:4px 7px; border:1px solid var(--abr-border); border-radius:999px; color:var(--abr-muted); background:var(--abr-panel-soft); font-size:8px; }
.abr-installed-mark { position:absolute; right:8px; top:8px; width:20px; height:20px; border-radius:50%; background:var(--abr-good); color:#07140e; display:grid; place-items:center; }
.abr-installed-mark svg { width:11px; }

/* Media studio */
.abr-media-workspace { background:radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--abr-accent-2) 9%,transparent),transparent 32%); }
.abr-media-mode { width:min(1120px,100%); margin:0 auto 12px; display:flex; align-items:center; gap:7px; }
.abr-media-mode>button { min-height:36px; border:1px solid var(--abr-border); border-radius:10px; background:var(--abr-panel-soft); color:var(--abr-muted); padding:0 12px; display:flex; align-items:center; gap:6px; cursor:pointer; }
.abr-media-mode>button.active { color:var(--abr-accent); border-color:var(--abr-border-hot); background:color-mix(in srgb,var(--abr-accent) 10%,var(--abr-panel)); }
.abr-media-mode svg { width:15px; }
.abr-quota-meter { margin-left:auto; display:flex; gap:10px; color:var(--abr-muted); font-size:9px; }
.abr-quota-meter strong { color:var(--abr-accent); }
.abr-reference-uploader,.abr-media-prompt,.abr-media-result,.abr-payment-plans { width:min(1120px,100%); margin:0 auto 12px; border:1px solid var(--abr-border); border-radius:18px; background:var(--abr-panel); padding:14px; }
.abr-reference-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.abr-reference-head>div { display:flex; align-items:center; gap:9px; }
.abr-reference-head>div>svg { color:var(--abr-accent); }
.abr-reference-head span { display:flex; flex-direction:column; gap:1px; }
.abr-reference-head strong { font-size:11px; }
.abr-reference-head small { color:var(--abr-muted); font-size:9px; }
.abr-reference-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px; min-height:92px; }
.abr-reference-grid>div:not(.abr-reference-placeholder) { position:relative; aspect-ratio:1; border:1px solid var(--abr-border); border-radius:10px; overflow:hidden; background:var(--abr-panel-soft); }
.abr-reference-grid img { width:100%; height:100%; -o-object-fit:cover; object-fit:cover; }
.abr-reference-grid>div>button { position:absolute; top:4px; right:4px; width:22px; height:22px; border:0; border-radius:7px; background:rgba(0,0,0,.66); color:#fff; display:grid; place-items:center; cursor:pointer; }
.abr-reference-grid>div>button svg { width:11px; }
.abr-reference-grid>div>span { position:absolute; left:4px; right:4px; bottom:4px; color:white; font-size:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 4px #000; }
.abr-reference-placeholder { grid-column:1/-1; min-height:90px; border:1px dashed var(--abr-border-hot); border-radius:12px; display:grid; place-items:center; color:var(--abr-muted); text-align:center; padding:18px; font-size:10px; line-height:1.6; }
.abr-media-prompt { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.abr-media-prompt textarea { width:100%; min-height:76px; resize:vertical; border:0; outline:0; border-radius:11px; background:var(--abr-panel-soft); color:var(--abr-text); padding:11px; font:inherit; font-size:12px; }
.abr-media-result { display:grid; grid-template-columns:minmax(200px,42%) minmax(0,1fr); gap:15px; }
.abr-media-preview { min-height:210px; border-radius:13px; overflow:hidden; background:radial-gradient(circle,var(--abr-glow),rgba(0,0,0,.2)); display:grid; place-items:center; border:1px solid var(--abr-border); }
.abr-media-preview img { width:100%; height:100%; max-height:420px; -o-object-fit:contain; object-fit:contain; }
.abr-media-preview svg { width:46px; color:var(--abr-accent); }
.abr-media-result-info { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.abr-media-result-info h3 { margin:0 0 7px; }
.abr-media-result-info p { margin:0 0 12px; color:var(--abr-muted); font-size:11px; line-height:1.55; }
.abr-profile-pills { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }

/* Plans / payment claims */
.abr-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.abr-plan-grid button { min-height:88px; padding:12px; border:1px solid var(--abr-border); border-radius:12px; background:var(--abr-panel-soft); color:var(--abr-text); display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left; cursor:pointer; }
.abr-plan-grid button.active { border-color:var(--abr-border-hot); background:color-mix(in srgb,var(--abr-accent) 10%,var(--abr-panel-soft)); box-shadow:0 0 28px var(--abr-glow); }
.abr-plan-grid svg { width:17px; color:var(--abr-accent); }
.abr-plan-grid span { color:var(--abr-muted); font-size:9px; }
.abr-payment-claim { margin-top:10px; display:grid; grid-template-columns:minmax(200px,1.1fr) minmax(180px,1fr) auto; gap:8px; align-items:center; }
.abr-payment-claim>div { display:flex; align-items:center; gap:8px; }
.abr-payment-claim>div>svg { color:var(--abr-accent); }
.abr-payment-claim span { display:flex; flex-direction:column; }
.abr-payment-claim strong { font-size:10px; }
.abr-payment-claim small { font-size:8.5px; color:var(--abr-muted); }
.abr-payment-claim input,.abr-admin-login input,.abr-glass-card input { min-height:38px; width:100%; border:1px solid var(--abr-border); border-radius:9px; background:var(--abr-panel-soft); color:var(--abr-text); padding:0 10px; outline:0; font:inherit; font-size:11px; }
.abr-payment-claim input:focus,.abr-admin-login input:focus,.abr-glass-card input:focus { border-color:var(--abr-border-hot); box-shadow:0 0 0 3px color-mix(in srgb,var(--abr-accent) 9%,transparent); }
.abr-form-message { color:var(--abr-muted); font-size:10px; }
.abr-error-banner { width:min(1120px,100%); margin:0 auto 10px; border:1px solid color-mix(in srgb,var(--abr-danger) 45%,var(--abr-border)); background:color-mix(in srgb,var(--abr-danger) 8%,var(--abr-panel)); color:#ffdfe6; border-radius:10px; padding:9px 11px; font-size:10px; }

/* Account / admin */
.abr-account-identity { border:1px solid var(--abr-border); border-radius:12px; background:var(--abr-panel-soft); padding:12px; margin:9px 0; display:flex; flex-direction:column; gap:2px; }
.abr-account-identity span { color:var(--abr-muted); font-size:9px; }
.abr-secret-row,.abr-one-time>div { display:flex; align-items:center; gap:7px; border:1px solid var(--abr-border); border-radius:9px; padding:7px; margin-top:7px; }
.abr-secret-row code,.abr-one-time code { flex:1; overflow:hidden; text-overflow:ellipsis; color:var(--abr-accent); }
.abr-secret-row button,.abr-one-time button { border:0; background:transparent; color:var(--abr-muted); cursor:pointer; }
.abr-one-time { margin-top:10px; padding:11px; border:1px solid color-mix(in srgb,var(--abr-warn) 38%,var(--abr-border)); border-radius:12px; background:color-mix(in srgb,var(--abr-warn) 6%,transparent); }
.abr-one-time>strong { color:var(--abr-warn); }
.abr-one-time small { display:block; margin-top:7px; color:var(--abr-muted); }
.abr-form-rule { display:flex; align-items:center; gap:8px; color:var(--abr-muted); font-size:9px; margin:11px 0; }
.abr-form-rule:before,.abr-form-rule:after { content:""; flex:1; height:1px; background:var(--abr-border); }
.abr-admin-login { width:min(560px,100%); margin:0 auto; display:grid; gap:9px; border:1px solid var(--abr-border); border-radius:18px; background:var(--abr-panel); padding:18px; }
.abr-claim-list { width:min(1000px,100%); margin:12px auto 0; display:grid; gap:7px; }
.abr-claim-list article { border:1px solid var(--abr-border); border-radius:12px; background:var(--abr-panel); padding:11px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; }
.abr-claim-list article>div:first-child { display:flex; flex-direction:column; }
.abr-claim-list article span,.abr-claim-list article small { color:var(--abr-muted); font-size:9px; }
.abr-claim-list article em { color:var(--abr-accent); font-size:9px; font-style:normal; text-transform:uppercase; }
.abr-claim-list article>div:last-child { display:flex; gap:5px; }

/* Fabric / development utility layouts */
.abr-relation-list { display:grid; gap:5px; }
.abr-relation-list>div { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto; align-items:center; gap:7px; border-bottom:1px solid var(--abr-border); padding:6px 0; font-size:10px; }
.abr-relation-list>div span { color:var(--abr-accent); }
.abr-relation-list>div small { color:var(--abr-muted); }
.abr-development-workspace textarea { width:100%; min-height:250px; border:1px solid var(--abr-border); border-radius:12px; background:var(--abr-panel-soft); color:var(--abr-text); padding:12px; font:inherit; font-size:12px; line-height:1.55; outline:0; resize:vertical; }
.abr-development-workspace textarea:focus { border-color:var(--abr-border-hot); }

/* Each major center has a subtle visual identity while sharing one design system. */
.abr-section-think:before,.abr-section-fabric:before,.abr-section-development:before,.abr-section-extensions:before,.abr-section-media:before,.abr-section-code:before,.abr-section-account:before,.abr-section-admin:before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.36; }
.abr-section-think:before { background:radial-gradient(circle at 14% 10%,color-mix(in srgb,var(--abr-accent-2) 12%,transparent),transparent 30%); }
.abr-section-fabric:before { background:linear-gradient(130deg,color-mix(in srgb,var(--abr-accent-3) 5%,transparent),transparent 38%); }
.abr-section-development:before { background:repeating-linear-gradient(135deg,transparent 0 40px,color-mix(in srgb,var(--abr-accent) 3%,transparent) 41px 42px); }
.abr-section-extensions:before { background:radial-gradient(circle at 90% 30%,color-mix(in srgb,var(--abr-accent) 9%,transparent),transparent 33%); }
.abr-section-code:before { background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--abr-accent-3) 4%,transparent)); }
.abr-section-account:before,.abr-section-admin:before { background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--abr-warn) 5%,transparent),transparent 34%); }

.abr-mobile-only { display:none; }
.abr-mobile-sidebar { display:none; }

@media (max-width: 1180px) {
  .abr-v22-shell { grid-template-columns:238px minmax(0,1fr); }
  .abr-chat-center { grid-template-columns:142px minmax(0,1fr); }
  .abr-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .abr-reference-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .abr-v22-shell { display:block; min-height:100dvh; }
  .abr-desktop-sidebar { display:none; }
  .abr-mobile-only { display:grid; }
  .abr-mobile-sidebar { display:flex; position:fixed; left:0; top:0; bottom:0; width:min(318px,88vw); z-index:100; border-right-color:var(--abr-border-hot); }
  .abr-app-column { height:100dvh; grid-template-rows:58px minmax(0,1fr); }
  .abr-status-dock { display:none; }
  .abr-topbar { padding-left:max(10px,env(safe-area-inset-left)); padding-right:max(10px,env(safe-area-inset-right)); }
  .abr-top-logo { display:none; }
  .abr-topbar-actions .abr-soft-button { width:36px; font-size:0; padding:0; }
  .abr-topbar-actions .abr-soft-button svg { margin:0; }
  .abr-runtime-pill { display:none; }
  .abr-workspace { padding:18px 14px max(24px,env(safe-area-inset-bottom)); }
  .abr-workspace-grid.two,.abr-workspace-grid.three { grid-template-columns:1fr; }
  .abr-extension-grid { grid-template-columns:1fr; }
  .abr-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .abr-chat-center { display:grid; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); height:100%; }
  .abr-conversation-rail { border-right:0; border-bottom:1px solid var(--abr-border); flex-direction:row; overflow-x:auto; padding:6px 9px; min-height:49px; max-height:49px; }
  .abr-conversation-rail button { flex:0 0 auto; width:auto; max-width:160px; min-height:34px; padding:5px 9px; }
  .abr-conversation-rail button small { display:none; }
  .abr-message-scroll { padding:14px 14px 24px; }
  .abr-message { grid-template-columns:29px minmax(0,1fr); gap:8px; padding:9px 0 12px; }
  .abr-message-avatar { width:28px; height:28px; border-radius:8px; }
  .abr-message-avatar svg { width:14px; }
  .abr-message-body { border-radius:13px; padding:10px 12px; }
  .abr-message-content { font-size:13px; }
  .abr-composer-wrap { width:calc(100% - 18px); margin-bottom:max(7px,env(safe-area-inset-bottom)); }
  .abr-composer-foot { display:none; }
  .abr-composer textarea,.abr-media-prompt textarea,.abr-development-workspace textarea,.abr-payment-claim input,.abr-admin-login input,.abr-glass-card input { font-size:16px; }
  .abr-welcome { grid-template-columns:1fr; padding:24px 15px; gap:18px; text-align:center; }
  .abr-welcome-orb { width:min(54vw,230px); }
  .abr-welcome-copy p { margin-left:auto; margin-right:auto; }
  .abr-welcome-actions { justify-content:center; }
  .abr-reference-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .abr-media-result { grid-template-columns:1fr; }
  .abr-media-prompt { grid-template-columns:1fr; }
  .abr-plan-grid { grid-template-columns:1fr; }
  .abr-payment-claim { grid-template-columns:1fr; }
  .abr-claim-list article { grid-template-columns:1fr; }
  .abr-workspace-heading { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 520px) {
  .abr-topbar-left strong { max-width:42vw; }
  .abr-message-scroll { padding-left:9px; padding-right:9px; }
  .abr-message { grid-template-columns:1fr; }
  .abr-message-avatar { display:none; }
  .abr-message-body { max-width:100%; }
  .abr-reference-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .abr-reference-head { align-items:flex-start; }
  .abr-reference-head .abr-soft-button { font-size:0; width:38px; padding:0; }
  .abr-reasoning-strip { margin-right:-4px; }
  .abr-inspector { top:auto; width:100%; max-height:80dvh; border-left:0; border-top:1px solid var(--abr-border-hot); border-radius:20px 20px 0 0; padding-bottom:max(16px,env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .abr-v22-shell *, .abr-v22-shell *:before, .abr-v22-shell *:after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}
.abr-route-body { width:100%; height:100dvh; min-height:640px; overflow:hidden; background:var(--abr-bg,#060b12); }
.abr-legacy-host { width:100%; height:100%; min-height:0; overflow:hidden; }
.abr-legacy-host > * { width:100%; height:100%; }
.abr-advanced-loading { height:100%; display:grid; place-items:center; color:var(--abr-muted); font-size:12px; background:radial-gradient(circle,var(--abr-glow),transparent 45%); }

/* ABR v0.23 personal memory, generation and coding controls. */
.abr-personal-lab { display: grid; gap: 18px; min-width: 0; }
.abr-personal-lab .abr-glass-card { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.abr-personal-lab label { display: grid; gap: 6px; color: var(--abr-muted); font-size: 12px; }
.abr-personal-lab textarea, .abr-personal-lab select { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--abr-border); border-radius: 10px; background: var(--abr-panel-soft); color: var(--abr-text); font: inherit; line-height: 1.5; }
.abr-personal-lab textarea { min-height: 80px; resize: vertical; font-family: ui-monospace, monospace; font-size: 12px; }
.abr-personal-lab button { align-self: flex-start; padding: 9px 14px; border: 1px solid var(--abr-border); border-radius: 10px; background: var(--abr-panel-soft); color: var(--abr-text); cursor: pointer; }
.abr-personal-lab button:disabled { opacity: .5; cursor: default; }
.abr-personal-lab input[type=checkbox] { width: 18px; min-height: 18px; accent-color: var(--abr-accent); }
.abr-personal-lab :is(button,textarea,select,input):focus-visible { outline: 2px solid var(--abr-accent); outline-offset: 3px; }
.abr-personal-lab details { border-top: 1px solid var(--abr-border); padding-top: 10px; overflow-wrap: anywhere; }
.abr-personal-lab summary { cursor: pointer; padding: 8px 0; }
.abr-personal-lab [role=alert] { padding: 12px; border: 1px solid #fb7185; border-radius: 10px; }
.abr-card-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.abr-answer-trace p { margin: 5px 0; }
@media (max-width: 700px) { .abr-personal-lab :is(input,textarea,select) { font-size: 16px; } }

/* ABR v0.24 — PABR personal-twin workspace */
.abr-pabr-workspace{padding-bottom:5rem}.abr-pabr-status{display:flex;flex-wrap:wrap;gap:.65rem;margin:0 0 1rem}.abr-pabr-status span{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .75rem;border:1px solid var(--abr-line,rgba(255,255,255,.12));border-radius:999px;background:rgba(255,255,255,.045);font-size:.82rem}.abr-pabr-workspace label{display:grid;gap:.38rem;margin:.7rem 0;font-size:.86rem}.abr-pabr-workspace input,.abr-pabr-workspace textarea{width:100%;box-sizing:border-box}.abr-consent-check{grid-template-columns:auto 1fr!important;align-items:start!important;gap:.65rem!important;padding:.62rem .7rem;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025)}.abr-consent-check input{width:auto;margin-top:.2rem}.abr-enrollment-files{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}.abr-enrollment-files label{padding:.7rem;border:1px dashed rgba(255,255,255,.15);border-radius:12px}.abr-avatar-card{overflow:hidden}.abr-avatar-stage{min-height:360px;display:grid;place-items:center;border-radius:18px;overflow:hidden;background:radial-gradient(circle at 50% 25%,rgba(75,125,255,.18),rgba(7,10,18,.86) 65%);border:1px solid rgba(255,255,255,.08)}.abr-avatar-stage img{display:block;max-width:min(100%,384px);max-height:520px;-o-object-fit:contain;object-fit:contain}.abr-avatar-loading{opacity:.65}.abr-persona-picker{display:grid;gap:.4rem;max-height:240px;overflow:auto;padding:.4rem}.abr-persona-picker label{display:flex;grid-template-columns:none;align-items:center;gap:.55rem;margin:0;padding:.55rem;border-radius:10px;background:rgba(255,255,255,.035)}.abr-persona-picker input{width:auto}.abr-role-line{padding:.8rem .9rem;margin:.6rem 0;border-left:3px solid rgba(92,164,255,.7);border-radius:10px;background:rgba(255,255,255,.035)}.abr-role-line p{margin:.35rem 0 0}.abr-card-actions button.active{outline:2px solid rgba(110,174,255,.7)}
@media(max-width:900px){.abr-enrollment-files{grid-template-columns:1fr}.abr-avatar-stage{min-height:300px}}
.abr-pabr-chat-card{margin:1rem 0}.abr-pabr-turns{display:grid;gap:.6rem;max-height:420px;overflow:auto;padding:.45rem}.abr-pabr-turn{padding:.7rem .8rem;border-radius:14px;background:rgba(255,255,255,.035)}.abr-pabr-turn.user{margin-left:8%;border:1px solid rgba(100,170,255,.16)}.abr-pabr-turn.twin{margin-right:8%;border:1px solid rgba(170,115,255,.16)}.abr-pabr-turn p{margin:.25rem 0 0;white-space:pre-wrap}

/* Retired heavy themes were removed from the normal stylesheet; BRIA now exposes Aether, Ember and Violet only. */

/* BRIA v0.25 — inspectable reasoning/activity surface */
.bria-reasoning-activity{margin:12px 16px;border:1px solid rgba(111,211,255,.16);background:linear-gradient(145deg,rgba(6,17,29,.94),rgba(8,11,22,.94));border-radius:18px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.24)}
.bria-reasoning-activity>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.018)}
.bria-reasoning-activity>header>div{display:flex;align-items:center;gap:10px}.bria-reasoning-activity>header svg{width:16px;height:16px;color:#78d8ff}.bria-reasoning-activity>header span{display:grid}.bria-reasoning-activity>header strong{font-size:12px;letter-spacing:.02em}.bria-reasoning-activity>header small{font-size:9px;color:rgba(255,255,255,.38);text-transform:uppercase;letter-spacing:.14em;margin-top:2px}
.bria-reasoning-badge{display:flex!important;grid-auto-flow:column!important;align-items:center;gap:5px;border:1px solid rgba(120,216,255,.18);border-radius:999px;padding:5px 8px;font-size:8px!important;font-weight:900;color:#8edfff;background:rgba(72,183,255,.06)}.bria-reasoning-badge svg{width:10px!important;height:10px!important}
.bria-process-explain{margin:10px 12px 0;padding:9px 10px;border-radius:12px;border:1px solid rgba(172,137,255,.16);background:rgba(119,75,210,.08);font-size:10px;line-height:1.5;color:rgba(238,232,255,.72)}
.bria-runtime-row{display:flex;align-items:center;gap:8px;margin:10px 12px 0;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.025);font-size:9px;color:rgba(255,255,255,.48)}.bria-runtime-row span{display:flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.1em}.bria-runtime-row svg{width:12px;height:12px}.bria-runtime-row b{color:#d9f4ff;font-size:10px}.bria-runtime-row em{margin-left:auto;color:#8ef0c8;font-style:normal;font-weight:800}
.bria-reasoning-events{display:grid;gap:7px;padding:12px}.bria-reasoning-event{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:start;padding:8px 9px;border-radius:12px;border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.018)}.bria-reasoning-event>span{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(115,211,255,.06)}.bria-reasoning-event svg{width:13px;height:13px}.bria-reasoning-event b{display:block;font-size:10px;text-transform:capitalize;color:rgba(255,255,255,.82)}.bria-reasoning-event p{margin:3px 0 0;font-size:10px;line-height:1.45;color:rgba(255,255,255,.46)}.bria-reasoning-event>small{font-size:8px;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.28);padding-top:3px}.bria-reasoning-event.tone-ok svg{color:#7ce8b8}.bria-reasoning-event.tone-warn svg{color:#ffd782}.bria-reasoning-event.tone-error svg{color:#ff8e9b}.bria-reasoning-event.tone-running svg{color:#7fd8ff}
.bria-reasoning-empty{padding:18px;text-align:center;font-size:10px;color:rgba(255,255,255,.34)}.bria-reasoning-activity>footer{padding:0 12px 12px;font-size:9px;line-height:1.5;color:rgba(255,255,255,.27)}
.bria-reasoning-details{margin-top:10px;border-radius:14px;border:1px solid rgba(113,210,255,.1);overflow:hidden}.bria-reasoning-details>summary{cursor:pointer;list-style:none;padding:9px 11px;background:rgba(73,175,230,.04);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.11em;color:#9ddfff}.bria-reasoning-details .bria-reasoning-activity{margin:0;border:0;border-top:1px solid rgba(255,255,255,.05);border-radius:0;box-shadow:none}
.bria-inspector-note{margin:12px;padding:10px;border-radius:12px;background:rgba(108,168,255,.05);border:1px solid rgba(108,168,255,.1);font-size:9px;line-height:1.5;color:rgba(255,255,255,.34)}


/* BRIA 2026-09-27: per-workspace lazy loading + live thinking messages */
.abr-workspace-lazy-loader{height:100%;min-height:260px;display:flex;align-items:center;justify-content:center;gap:13px;color:var(--abr-text);background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--abr-accent) 8%,transparent),transparent 40%)}
.abr-workspace-lazy-loader>div{display:grid;gap:3px}.abr-workspace-lazy-loader strong{font-size:12px;letter-spacing:.01em}.abr-workspace-lazy-loader small{font-size:9px;color:var(--abr-muted);letter-spacing:.03em}
.abr-workspace-lazy-orb{width:20px;height:20px;border-radius:50%;border:2px solid color-mix(in srgb,var(--abr-accent) 22%,transparent);border-top-color:var(--abr-accent);box-shadow:0 0 24px color-mix(in srgb,var(--abr-accent) 22%,transparent);animation:abrLazyWorkspaceSpin .8s linear infinite}
@keyframes abrLazyWorkspaceSpin{to{transform:rotate(360deg)}}

.abr-thinking-chat-message{padding-top:4px;padding-bottom:10px}
.abria-thinking-avatar{position:relative;overflow:visible}.abria-thinking-avatar::after{content:"";position:absolute;inset:-4px;border:1px solid color-mix(in srgb,var(--abr-accent) 28%,transparent);border-radius:13px;animation:abriaThinkingHalo 1.8s ease-in-out infinite}
@keyframes abriaThinkingHalo{0%,100%{opacity:.18;transform:scale(.92)}50%{opacity:.72;transform:scale(1.08)}}
.bria-thinking-body{position:relative;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--abr-assistant) 92%,var(--abr-accent) 8%),var(--abr-assistant));border-color:color-mix(in srgb,var(--abr-accent) 23%,var(--abr-border));box-shadow:0 12px 42px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.03)}
.bria-thinking-body::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 0,color-mix(in srgb,var(--abr-accent) 6%,transparent) 45%,transparent 70%);transform:translateX(-100%);animation:abriaThinkingSweep 3.4s ease-in-out infinite}
@keyframes abriaThinkingSweep{0%,42%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}
.bria-thinking-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid color-mix(in srgb,var(--abr-accent) 12%,var(--abr-border))}
.bria-thinking-head>div{display:grid;gap:2px}.bria-thinking-head strong{font-size:11px}.bria-thinking-head small{font-size:8px;color:var(--abr-muted);text-transform:uppercase;letter-spacing:.11em}
.bria-thinking-live{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid color-mix(in srgb,var(--abr-accent) 20%,transparent);border-radius:999px;font-size:7px;font-weight:900;letter-spacing:.12em;color:var(--abr-accent);background:color-mix(in srgb,var(--abr-accent) 6%,transparent)}
.bria-thinking-live i{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:abriaThinkingPulse 1s ease-in-out infinite}
@keyframes abriaThinkingPulse{50%{opacity:.25;transform:scale(.7)}}
.bria-thinking-lines{position:relative;z-index:1;display:grid;gap:6px;padding:2px 0}
.bria-thinking-line{display:grid;grid-template-columns:10px minmax(0,1fr);gap:8px;align-items:start;padding:5px 0;animation:abriaThinkingLineIn .24s ease-out both}
@keyframes abriaThinkingLineIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.bria-thinking-dot{width:6px;height:6px;margin-top:5px;border-radius:50%;background:color-mix(in srgb,var(--abr-accent) 62%,white);box-shadow:0 0 10px color-mix(in srgb,var(--abr-accent) 32%,transparent)}
.bria-thinking-line.status-done .bria-thinking-dot,.bria-thinking-line.status-ok .bria-thinking-dot{background:#76e6b4;box-shadow:0 0 10px rgba(118,230,180,.26)}
.bria-thinking-line b{display:block;margin-bottom:2px;font-size:8px;text-transform:uppercase;letter-spacing:.105em;color:color-mix(in srgb,var(--abr-text) 72%,var(--abr-accent))}
.bria-thinking-line p{margin:0;font-size:11.5px;line-height:1.53;color:color-mix(in srgb,var(--abr-text) 72%,var(--abr-muted));overflow-wrap:anywhere}
.bria-thinking-wait{display:flex;align-items:center;gap:7px;padding:8px 2px;color:var(--abr-muted);font-size:10px}.bria-thinking-wait svg{width:13px;height:13px;color:var(--abr-accent);animation:abrLazyWorkspaceSpin 1.2s linear infinite}
.bria-thinking-cursor{display:block;width:7px;height:13px;margin:3px 0 2px 18px;border-radius:1px;background:color-mix(in srgb,var(--abr-accent) 76%,white);box-shadow:0 0 12px color-mix(in srgb,var(--abr-accent) 30%,transparent);animation:abriaThinkingCursor .85s steps(1,end) infinite}
@keyframes abriaThinkingCursor{50%{opacity:0}}

.bria-thinking-saved{margin:3px 0 10px;border:1px solid color-mix(in srgb,var(--abr-accent) 13%,var(--abr-border));border-radius:11px;background:color-mix(in srgb,var(--abr-panel-soft) 68%,transparent);overflow:hidden}
.bria-thinking-saved>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;padding:8px 10px;color:color-mix(in srgb,var(--abr-text) 76%,var(--abr-accent));-webkit-user-select:none;-moz-user-select:none;user-select:none}
.bria-thinking-saved>summary::-webkit-details-marker{display:none}.bria-thinking-saved>summary>svg:first-child{width:13px;height:13px;color:var(--abr-accent)}.bria-thinking-saved>summary span{font-size:10px;font-weight:750}.bria-thinking-saved>summary em{margin-left:auto;font-style:normal;font-size:7px;text-transform:uppercase;letter-spacing:.1em;color:var(--abr-muted)}.bria-thinking-saved>summary>svg:last-child{width:12px;height:12px;color:var(--abr-muted);transition:transform .18s}.bria-thinking-saved[open]>summary>svg:last-child{transform:rotate(180deg)}
.bria-thinking-saved .bria-thinking-lines{padding:2px 10px 10px;border-top:1px solid color-mix(in srgb,var(--abr-accent) 8%,var(--abr-border))}.bria-thinking-saved .bria-thinking-line p{font-size:10.5px}.bria-thinking-saved .bria-thinking-line b{font-size:7.5px}

@media (max-width:720px){.bria-thinking-head{align-items:flex-start}.bria-thinking-line p{font-size:11px}.bria-thinking-body{padding:10px 12px}.abr-workspace-lazy-loader{min-height:180px;padding:24px}}
@media (prefers-reduced-motion:reduce){.abr-workspace-lazy-orb,.bria-thinking-avatar::after,.bria-thinking-body::before,.bria-thinking-live i,.bria-thinking-wait svg,.bria-thinking-cursor{animation:none!important}}

/* ========================================================================== 
   BRIA 0.24 FAST PATH — aggressive chat UI performance profile
   Keeps the feature set, but removes continuously composited effects and limits
   ordinary customization to three lightweight themes.
   ========================================================================== */

.abr-performance-shell {
  background-image:
    linear-gradient(var(--abr-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--abr-grid) 1px, transparent 1px),
    linear-gradient(145deg, var(--abr-bg), var(--abr-bg-2));
  background-size:56px 56px,56px 56px,auto;
}

.abr-performance-shell .abr-ambient-layer { display:none!important; }
.abr-performance-shell :is(.abr-sidebar,.abr-topbar,.abr-composer,.abr-inspector,.abr-message-body,.abr-mobile-backdrop,.abr-inspector-backdrop) {
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.abr-performance-shell :is(.abr-side-brand img,.abr-top-logo,.abr-extension-card:before) { filter:none!important; }
.abr-performance-shell :is(.abr-main-nav>button,.abr-icon-button,.abr-soft-button,.abr-primary-button,.abr-welcome-actions button,.abr-message-body,.abr-composer,.abr-send-button) {
  transition:none!important;
}
.abr-performance-shell :is(.abr-main-nav>button,.abr-primary-button,.abr-welcome-actions button):hover { transform:none!important; }
.abr-performance-shell *,
.abr-performance-shell *::before,
.abr-performance-shell *::after { animation-duration:.001ms!important; animation-iteration-count:1!important; }
.abr-performance-shell .abr-spin { animation:abrSpin .9s linear infinite!important; }

.abr-theme-switcher-compact { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
.abr-theme-switcher-compact button { height:30px; }

.abr-chat-center-fast {
  grid-template-columns:minmax(0,1fr)!important;
  max-width:none!important;
}
.abr-chat-center-fast .abr-conversation-rail { display:none!important; }
.abr-chat-center-fast .abr-chat-main { width:100%; max-width:none; }
.abr-workspace-transition-fast { contain:layout paint style; }
.abr-message-scroll-fast { scroll-behavior:auto!important; contain:strict; }
.abr-virtual-row { contain:layout style; content-visibility:auto; contain-intrinsic-size:auto 180px; }
.abr-message { contain:layout style; }
.abr-message-body { box-shadow:0 4px 18px rgba(0,0,0,.12)!important; }
.abr-composer-fast { contain:layout style; }
.abr-composer-fast .abr-composer { box-shadow:0 8px 28px rgba(0,0,0,.22)!important; }

.abr-context-meter {
  margin:0 2px 5px;
  padding:6px 9px 7px;
  border:1px solid var(--abr-border);
  border-radius:10px;
  background:color-mix(in srgb,var(--abr-panel-strong) 94%,transparent);
  font-size:8.5px;
  color:var(--abr-muted);
}
.abr-context-meter-head,.abr-context-meter-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.abr-context-meter-head strong { color:var(--abr-text); font-size:9px; }
.abr-context-meter-track { height:3px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); margin:5px 0 4px; }
.abr-context-meter-track i { display:block; height:100%; background:var(--abr-accent); border-radius:inherit; }
.abr-context-meter.is-warning { border-color:rgba(247,199,105,.32); }
.abr-context-meter.is-warning .abr-context-meter-track i { background:#f7c769; }
.abr-context-meter.is-critical { border-color:rgba(255,128,145,.42); }
.abr-context-meter.is-critical .abr-context-meter-track i { background:#ff8091; }
.abr-context-meter-foot span:last-child { opacity:.72; }

.abr-context-rollover-banner,.abr-message-rollover-note {
  border:1px solid var(--abr-border-hot);
  background:color-mix(in srgb,var(--abr-accent) 7%,var(--abr-panel-strong));
  color:var(--abr-muted);
  border-radius:10px;
  font-size:9px;
  line-height:1.45;
}
.abr-context-rollover-banner { margin:10px auto 0; padding:7px 10px; width:min(1120px,calc(100% - 34px)); }
.abr-message-rollover-note { margin:0 0 8px; padding:6px 8px; }

.abr-deferred-detail { margin-top:8px; border-top:1px solid var(--abr-border); padding-top:7px; }
.abr-deferred-detail>button {
  border:0;
  background:transparent;
  color:var(--abr-muted);
  display:flex;
  align-items:center;
  gap:6px;
  padding:2px 0;
  font-size:9px;
  cursor:pointer;
}
.abr-deferred-detail>button svg { width:12px; height:12px; }
.abr-deferred-detail>button svg:last-child { margin-left:2px; }
.abr-deferred-detail>button svg.is-open { transform:rotate(180deg); }
.abr-inline-loader { padding:8px 0; color:var(--abr-muted); font-size:9px; }

.abr-inspector-fast { transition:none!important; }
.abr-mobile-sidebar-open { transform:none!important; }

@media (max-width: 760px) {
  .abr-context-meter-foot span:last-child { display:none; }
  .abr-context-meter { margin-left:0; margin-right:0; }
}

.abr-thinking-fast .abr-message-body { padding:10px 13px; }
.abr-thinking-fast-head { display:flex; align-items:center; gap:6px; color:var(--abr-accent); }
.abr-thinking-fast-head svg { width:13px; height:13px; }
.abr-thinking-fast-head strong { font-size:10px; }
.abr-thinking-fast-head span { margin-left:auto; color:var(--abr-muted); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.abr-thinking-fast p { margin:6px 0 0; color:var(--abr-muted); font-size:10px; line-height:1.45; max-width:92ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Welcome canvas: no perpetual Motion loop on the chat hot path. */
.abr-welcome-fast,
.abr-welcome-orb-fast,
.abr-welcome-orb-fast span,
.abr-welcome-orb-fast::before,
.abr-welcome-orb-fast::after {
  animation: none !important;
  transition: none !important;
  filter: none !important;
}

.abr-welcome-orb-fast {
  transform: translateZ(0);
  contain: layout paint style;
  will-change: auto !important;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--abr-accent, #7c8cff) 18%, transparent) !important;
}

.abr-welcome-orb-fast::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* BRIA project runner — lazy artifact execution; no hot-path blur or animation. */
.abr-response-part-note{display:inline-flex;margin:0 0 7px;padding:3px 7px;border:1px solid var(--abr-border);border-radius:999px;color:var(--abr-muted);font-size:8px;letter-spacing:.04em;background:var(--abr-panel-soft)}
.abr-artifact-projects{display:grid;gap:9px;margin-top:10px;padding-top:9px;border-top:1px solid var(--abr-border);contain:layout style}
.abr-artifact-actions{display:flex;flex-wrap:wrap;gap:7px}.abr-artifact-actions button,.abr-project-list-head button{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--abr-border);border-radius:9px;background:var(--abr-panel-soft);color:var(--abr-text);padding:6px 9px;font:inherit;font-size:9px;cursor:pointer}.abr-artifact-actions button:disabled{opacity:.48;cursor:default}.abr-artifact-actions svg{width:12px;height:12px}
.abr-html-preview-shell{overflow:hidden;border:1px solid var(--abr-border-hot);border-radius:12px;background:#fff;contain:layout paint}.abr-html-preview-shell>header{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--abr-panel-strong);color:var(--abr-text);font-size:9px}.abr-html-preview-shell>header span{color:var(--abr-muted);font-size:8px}.abr-html-preview-shell>header button{margin-left:auto;border:0;background:transparent;color:var(--abr-muted);cursor:pointer}.abr-html-preview-shell>header svg{width:12px;height:12px}.abr-html-preview-shell iframe{display:block;width:100%;height:min(58vh,560px);min-height:320px;border:0;background:#fff}
.abr-project-deployment{display:grid;gap:5px;padding:8px;border:1px solid var(--abr-border);border-radius:10px;background:var(--abr-panel-soft);font-size:9px}.abr-project-deployment a{display:flex;align-items:center;gap:5px;overflow-wrap:anywhere;color:var(--abr-accent)}.abr-project-deployment a svg{width:11px;height:11px;flex:none}.abr-project-deployment small{color:var(--abr-muted);line-height:1.45}.abr-project-error{padding:7px 8px;border:1px solid rgba(255,128,145,.42);border-radius:9px;color:#ff9bab;font-size:9px}
.abr-project-list-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.abr-project-list-head h3,.abr-project-list-head p{margin:0}.abr-project-list-head p{margin-top:4px;color:var(--abr-muted);font-size:10px}.abr-saved-project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}.abr-saved-project-grid article{display:grid;gap:4px;min-width:0;padding:9px;border:1px solid var(--abr-border);border-radius:10px;background:var(--abr-panel-soft)}.abr-saved-project-grid article span,.abr-saved-project-grid article code{color:var(--abr-muted);font-size:9px;overflow-wrap:anywhere}.abr-saved-project-grid article a{font-size:9px;color:var(--abr-accent)}
@media(max-width:720px){.abr-html-preview-shell iframe{height:52vh;min-height:260px}.abr-artifact-actions button{min-height:34px}.abr-saved-project-grid{grid-template-columns:1fr}}