#view-agent.br-on {
  
  --br-bg: #050506;
  --br-panel: #060607;
  --br-panel-2: #0d0d0f;
  --br-panel-3: #141416;
  --br-dot: rgba(255, 255, 255, 0.055);
  
  --br-chat-dot: rgba(214, 219, 224, 0.17);
  --br-line: rgba(255, 255, 255, 0.08);
  --br-line-strong: rgba(255, 255, 255, 0.16);
  --br-text: #f2f3f4;
  --br-muted: #9a9da2;
  --br-faint: #828488;
  --br-accent: #ffffff;
  --br-accent-soft: rgba(255, 255, 255, 0.12);
  --br-good: #4ea172;
  --br-bad: #e5484d;
  --br-chat-user-text: #ffb300;
  --br-chat-vector-text: #00d0c4;
  --br-text-structural: #8a9099;
  --br-text-metadata: #7f848c;
  --br-role-user: #b3823a;
  --br-role-vector: #3f8f8b;
  --br-display: 'Archivo', 'Arial Narrow', sans-serif;
  --br-condensed: 'Bahnschrift', 'DIN Alternate', 'DIN Condensed', 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --br-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --br-rail-w: 232px;
  --br-wall-w: 420px;
  --br-bar-h: 54px;
}


#view-agent.br-on .agent-shell {
  display: grid;
  grid-template-columns: var(--br-rail-w) minmax(0, 1fr) var(--br-wall-w);
  grid-template-rows: var(--br-bar-h) minmax(0, 1fr);
  grid-template-areas: 'bar bar bar' 'rail center wall';
  gap: 0;
  background: var(--br-bg);
  border: 1px solid var(--br-line-strong);
  border-radius: 12px;
  overflow: hidden;
  color: var(--br-text);
  font: 400 0.84375rem/1.55 var(--br-ui);
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
#view-agent.br-on .br-dotfield {
  background-image: radial-gradient(var(--br-dot) 1px, transparent 1px);
  background-size: 22px 22px;
}
#view-agent.br-on button { font-family: inherit; }


#view-agent.br-on .br-topbar {
  grid-area: bar; position: relative;
  display: flex; align-items: center; gap: 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--br-line);
  background: var(--br-panel);
}
#view-agent.br-on .br-mark { display: flex; flex-direction: column; justify-content: center; line-height: 1; gap: 2px; padding-right: 2px; }
#view-agent.br-on .br-brand {
  font-family: var(--br-display); font-weight: 700; font-size: 1.5625rem;
  letter-spacing: 0.045em; color: var(--br-accent); text-transform: uppercase;
}
#view-agent.br-on .br-tagline {
  font-family: var(--br-condensed); font-weight: 500; font-size: 0.5rem;
  letter-spacing: 0.3em; color: var(--br-text-structural); text-transform: uppercase; white-space: nowrap;
}
#view-agent.br-on .br-rule { width: 1px; height: 18px; background: var(--br-line); }
#view-agent.br-on .br-project { color: var(--br-muted); font-size: 0.78125rem; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#view-agent.br-on .br-project b { color: var(--br-text); font-weight: 500; }
#view-agent.br-on .br-spacer { flex: 1; }
#view-agent.br-on .br-model { display: flex; align-items: center; gap: 6px; color: var(--br-muted); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
#view-agent.br-on .br-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--br-good); flex: none; }


#view-agent.br-on .br-rail {
  grid-area: rail;
  background: var(--br-panel); border-right: 1px solid var(--br-line);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
#view-agent.br-on .br-rail-section {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px 8px;
  font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--br-text-structural); font-weight: 500;
}
#view-agent.br-on .br-ghost {
  padding: 3px 7px; border-radius: 5px; color: var(--br-faint); background: transparent; border: 0;
  font-size: 0.75rem; line-height: 1; cursor: pointer;
}
#view-agent.br-on .br-ghost:hover { background: var(--br-panel-3); color: var(--br-text); }

#view-agent.br-on .br-rail-list { flex: 1 1 0; overflow-y: auto; padding: 0 8px; min-height: 80px; }
#view-agent.br-on .br-rail-row { display: block; width: 100%; text-align: left; padding: 8px; border-radius: 6px; margin-bottom: 1px; background: transparent; border: 0; cursor: pointer; }
#view-agent.br-on .br-rail-row:hover { background: var(--br-panel-2); }
#view-agent.br-on .br-rail-row.active { background: var(--br-panel-3); box-shadow: inset 0 0 0 1px var(--br-line); }
#view-agent.br-on .br-rail-name {
  display: block; color: var(--br-text); font-size: 0.8125rem; font-weight: 450;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#view-agent.br-on .br-rail-row.active .br-rail-name { font-weight: 500; }
#view-agent.br-on .br-rail-sub { display: block; color: var(--br-faint); font-size: 0.6875rem; margin-top: 1px; }
#view-agent.br-on .br-rail-empty { color: var(--br-text-metadata); font-size: 0.75rem; padding: 14px 8px; text-align: center; }


#view-agent.br-on .br-skills { flex: 0 0 auto; max-height: 55%; overflow-y: auto; padding: 0 8px 12px; }
#view-agent.br-on .br-skill-group { padding: 6px 6px 4px; color: var(--br-text-structural); font-size: 0.59375rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
#view-agent.br-on .br-skill-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 16px; border-radius: 5px; }
#view-agent.br-on .br-skill-row:hover { background: var(--br-panel-2); }
#view-agent.br-on .br-skill-name {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  color: var(--br-text); font-size: 0.75rem; font-weight: 450;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#view-agent.br-on .br-skill-badge {
  flex: none; font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px; color: var(--br-faint); border: 1px solid var(--br-line);
}
#view-agent.br-on .br-skill-children { padding: 2px 6px 4px 22px; display: flex; flex-direction: column; gap: 1px; }
#view-agent.br-on .br-skill-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#view-agent.br-on .br-skill-child-name { color: var(--br-faint); font-size: 0.6875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-agent.br-on .br-skill-child-role { flex: none; font-size: 0.5rem; letter-spacing: 0.1em; color: var(--br-faint); border: 1px solid var(--br-line); border-radius: 3px; padding: 0 4px; }


#view-agent.br-on .agent-convo { grid-area: center; min-height: 0; }

#view-agent.br-on .sd-drawer.sd-embedded::before,
#view-agent.br-on .sd-drawer.sd-embedded::after { display: none !important; content: none !important; background: none !important; }
#view-agent.br-on .sd-drawer.sd-embedded {
  
  background: radial-gradient(var(--br-chat-dot) 1.2px, transparent 1.2px) 0 0 / 22px 22px, var(--br-bg) !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  color: var(--br-text);
  font-family: var(--br-ui);
}

#view-agent.br-on .sd-drawer.sd-embedded .sd-head { display: none !important; }

#view-agent.br-on .sd-controls-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  padding: 12px 24px 11px; margin: 0;
  border-bottom: 1px solid var(--br-line); background: var(--br-bg) !important;
  position: relative; z-index: 1;
}
#view-agent.br-on .sd-project-line,
#view-agent.br-on .sd-chip-btn {
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--br-line) !important; background: transparent !important; color: var(--br-muted) !important;
  font: 400 0.6875rem/1.4 var(--br-ui); letter-spacing: 0.06em; white-space: nowrap; box-shadow: none !important;
}
#view-agent.br-on .sd-project-line:hover,
#view-agent.br-on .sd-chip-btn:hover { color: var(--br-text) !important; border-color: var(--br-line-strong) !important; }
#view-agent.br-on .sd-popover {
  background: var(--br-panel-3) !important; border: 1px solid var(--br-line-strong) !important;
  color: var(--br-text) !important; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55) !important;
}
#view-agent.br-on .sd-popover-item { color: var(--br-text) !important; background: transparent !important; }
#view-agent.br-on .sd-popover-item:hover, #view-agent.br-on .sd-popover-item.active { background: var(--br-panel-2) !important; }
#view-agent.br-on .sd-popover .sd-chat-sub, #view-agent.br-on .sd-popover-empty { color: var(--br-faint) !important; }


#view-agent.br-on .br-vstate { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
#view-agent.br-on .br-vstate-name { font-family: var(--br-display); font-size: 0.65625rem; font-weight: 600; letter-spacing: 0.2em; color: var(--br-faint); }
#view-agent.br-on .br-vstate-sep { color: var(--br-faint); font-size: 0.625rem; }
#view-agent.br-on .br-vstate-val { font-size: 0.65625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--br-good); font-weight: 500; }
#view-agent.br-on .br-vstate.busy .br-vstate-val { color: var(--br-text); }
#view-agent.br-on .br-vstate.busy .br-dot { background: #d8dde1; animation: br-pulse 1.6s ease-in-out infinite; }
#view-agent.br-on .br-vstate.bad .br-vstate-val { color: var(--br-bad); }
#view-agent.br-on .br-vstate.bad .br-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--br-line-strong); }
@keyframes br-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { #view-agent.br-on .br-vstate.busy .br-dot { animation: none; } }


#view-agent.br-on .sd-messages {
  background: transparent !important;
  padding: 30px 24px 8px !important;
}
#view-agent.br-on .sd-msg:not(.sd-confirm-card) {
  position: relative;
  align-self: flex-start;
  max-width: 780px; width: auto;
  margin: 20px 0 16px; padding: 0 0 0 14px;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-left: 2px solid var(--br-role-vector) !important;
  color: var(--br-chat-vector-text) !important;
  font: 400 0.875rem/1.62 var(--br-ui); font-style: normal;
}
#view-agent.br-on .sd-msg:not(.sd-confirm-card)::before {
  content: 'Backroom';
  position: absolute; top: -19px; left: 0;
  font: 600 0.625rem/1 var(--br-display); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--br-role-vector);
}
#view-agent.br-on .sd-msg.user:not(.sd-confirm-card) {
  max-width: 720px;
  border-left-color: var(--br-role-user) !important;
  color: var(--br-chat-user-text) !important;
}
#view-agent.br-on .sd-msg.user:not(.sd-confirm-card)::before { content: 'Command'; color: var(--br-role-user); }
#view-agent.br-on .sd-msg.error:not(.sd-confirm-card) { border-left-color: var(--br-bad) !important; color: var(--br-bad) !important; }
#view-agent.br-on .sd-msg.error:not(.sd-confirm-card)::before { content: 'Error'; color: var(--br-bad); }
#view-agent.br-on .sd-msg mark { color: inherit !important; font-weight: 700; }
#view-agent.br-on .sd-msg a { color: inherit; text-decoration: underline; }

#view-agent.br-on .sd-msg.sd-confirm-card { position: relative; margin-top: 24px; border-radius: 8px !important; }
#view-agent.br-on .sd-msg.sd-confirm-card::before {
  content: 'Backroom'; position: absolute; top: -19px; left: 0;
  font: 600 0.625rem/1 var(--br-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--br-role-vector);
}
#view-agent.br-on .sd-empty-hint,
#view-agent.br-on .sd-messages > .gallery-empty { color: var(--br-text-metadata) !important; }
#view-agent.br-on .sd-scroll-bottom { background: var(--br-panel-3) !important; color: var(--br-text) !important; border: 1px solid var(--br-line-strong) !important; }


#view-agent.br-on .sd-thinking { padding: 2px 24px 8px !important; background: transparent !important; }
#view-agent.br-on .sd-thinking .sd-said { color: var(--br-muted) !important; font: 400 0.84375rem/1 var(--br-ui) !important; font-style: normal !important; letter-spacing: 0.01em; }


#view-agent.br-on .sd-attach-strip { background: var(--br-bg) !important; border-top: 1px solid var(--br-line) !important; }
#view-agent.br-on .sd-input-row {
  padding: 14px 24px 18px !important; gap: 12px !important;
  border-top: 1px solid var(--br-line) !important; background: var(--br-bg) !important;
}
#view-agent.br-on .sd-input-row input {
  background: var(--br-panel-2) !important; color: var(--br-text) !important;
  border: 1px solid var(--br-line) !important; border-radius: 8px !important; box-shadow: none !important;
  font: 400 0.875rem/1.55 var(--br-ui) !important; padding: 10px 14px !important;
}
#view-agent.br-on .sd-input-row input::placeholder { color: var(--br-faint); }
#view-agent.br-on .sd-input-row input:focus { border-color: var(--br-line-strong) !important; outline: none; }
#view-agent.br-on .sd-attach-btn {
  background: transparent !important; color: var(--br-muted) !important;
  border: 1px solid var(--br-line) !important; box-shadow: none !important;
}
#view-agent.br-on .sd-attach-btn:hover { color: var(--br-text) !important; border-color: var(--br-line-strong) !important; }
#view-agent.br-on .sd-attach-menu { background: var(--br-panel-3) !important; border: 1px solid var(--br-line-strong) !important; }
#view-agent.br-on .sd-attach-menu-item { color: var(--br-text) !important; }
#view-agent.br-on .sd-attach-menu-item:hover { background: var(--br-panel-2) !important; }

#view-agent.br-on .sd-send-btn {
  padding: 9px 20px !important; border-radius: 5px !important; border: 0 !important; box-shadow: none !important;
  background: var(--br-accent) !important; color: #0a0a0b !important;
  font: 700 0.6875rem/1 var(--br-display) !important; letter-spacing: 0.16em !important; text-transform: uppercase;
}
#view-agent.br-on .sd-send-btn:disabled { background: var(--br-panel-3) !important; color: var(--br-faint) !important; opacity: 1 !important; }
#view-agent.br-on .sd-send-btn.sd-cancel-mode,
#view-agent.br-on .sd-send-btn[data-mode="cancel"] { background: var(--br-bad) !important; color: #fff !important; }


#view-agent.br-on .agent-canvas {
  grid-area: wall;
  background: var(--br-panel) !important;
  border: 0 !important; border-left: 1px solid var(--br-line) !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 0 !important; color: var(--br-text);
}
#view-agent.br-on .agent-canvas::before, #view-agent.br-on .agent-canvas::after { display: none !important; }
#view-agent.br-on .agent-canvas-head { padding: 18px 16px 8px; margin: 0; }
#view-agent.br-on .agent-canvas-head .section-label {
  font: 500 0.625rem/1.4 var(--br-ui) !important; letter-spacing: 0.18em !important; text-transform: uppercase;
  color: var(--br-text-structural) !important;
}
#view-agent.br-on .agent-canvas-sub { color: var(--br-text-metadata) !important; font-size: 0.71875rem !important; }
#view-agent.br-on #agent-canvas-body { padding: 0 12px 12px; }
#view-agent.br-on .agent-section-label { font-size: 0.59375rem !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: var(--br-faint) !important; padding: 10px 4px 6px; }
#view-agent.br-on #agent-canvas-empty {
  color: var(--br-text-metadata) !important; background: transparent !important;
  border: 1px dashed var(--br-line) !important; border-radius: 7px; font-size: 0.75rem;
}


@media (max-width: 1180px) {
  #view-agent.br-on { --br-wall-w: 340px; --br-rail-w: 200px; }
}
@media (max-width: 900px) {
  #view-agent.br-on .agent-shell {
    grid-template-columns: 1fr; grid-template-rows: auto 70vh auto auto;
    grid-template-areas: 'bar' 'center' 'rail' 'wall'; height: auto;
  }
  #view-agent.br-on .br-topbar { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  #view-agent.br-on .br-rail { border-right: 0; border-top: 1px solid var(--br-line); }
  #view-agent.br-on .sd-controls-row { flex-wrap: wrap; padding: 10px 14px; }
  #view-agent.br-on .sd-messages { padding: 26px 14px 8px !important; }
  #view-agent.br-on .sd-input-row { padding: 12px 14px 14px !important; }
  #view-agent.br-on .agent-canvas { border-left: 0 !important; border-top: 1px solid var(--br-line) !important; }
}


@media (hover: hover) and (min-width: 861px) {
  #app-shell:has(#view-agent.br-on.active) .rail:hover .rail-panel { width: 56px; }
  #app-shell:has(#view-agent.br-on.active) .rail:hover .rail-btn,
  #app-shell:has(#view-agent.br-on.active) .rail:hover .rail-pin-btn { justify-content: center; }
  #app-shell:has(#view-agent.br-on.active) .rail:hover .rail-btn-label,
  #app-shell:has(#view-agent.br-on.active) .rail:hover .rail-pin-btn .rail-btn-label,
  #app-shell[data-app-lum="light"]:has(#view-agent.br-on.active) .rail:hover .rail-btn-label { display: none; }
}

@media (min-width: 861px) {
  #app-shell:has(.rail:hover) main:has(> #view-agent.br-on.active):not(#view-workflow):not(#view-home) { padding-left: 0 !important; }
}


html[data-br="1"] #view-agent:not(.br-on) .agent-shell { visibility: hidden; }



#view-agent.br-on .br-rail-item { position: relative; display: flex; align-items: stretch; border-radius: 6px; margin-bottom: 1px; }
#view-agent.br-on .br-rail-item .br-rail-row { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
#view-agent.br-on .br-rail-item .br-rail-row:has(+ .br-rail-del) { padding-right: 30px; }
#view-agent.br-on .br-rail-del {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 5px; border: 0; background: transparent;
  color: var(--br-faint); font-size: 0.9375rem; line-height: 1; cursor: pointer; opacity: 0;
}
#view-agent.br-on .br-rail-item:hover .br-rail-del, #view-agent.br-on .br-rail-del:focus-visible { opacity: 1; }
#view-agent.br-on .br-rail-del:hover { color: var(--br-bad); background: rgba(255, 107, 107, 0.10); }
@media (hover: none) { #view-agent.br-on .br-rail-del { opacity: 1; } }


#view-agent.br-on .br-btn-attach,
#view-agent.br-on .sd-attach-btn.br-btn-attach {
  display: flex !important; align-items: center; justify-content: center; flex: none;
  width: 30px !important; height: 30px !important; min-width: 0 !important; padding: 0 !important; border-radius: 5px !important;
  background: transparent !important; border: 1px solid var(--br-line) !important; color: var(--br-faint) !important;
  box-shadow: none !important; cursor: pointer;
}
#view-agent.br-on .br-btn-attach:hover:not(:disabled) { border-color: var(--br-line-strong) !important; color: var(--br-text) !important; }
#view-agent.br-on .br-btn-attach:disabled { opacity: 0.4; cursor: default; }
#view-agent.br-on .sd-input-row { align-items: center; }
@media (hover: none) { #view-agent.br-on .br-btn-attach { min-width: 40px !important; min-height: 40px !important; } }


#view-agent.br-on .sd-msg.br-results {
  align-self: stretch; max-width: 780px; width: 100%;
  margin: 4px 0 16px; padding: 0 !important; border-left: 0 !important; color: var(--br-text) !important;
}
#view-agent.br-on .sd-msg.br-results::before { content: none !important; }
#view-agent.br-on .br-gens { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
#view-agent.br-on .br-gens:empty, #view-agent.br-on .br-mc-set:empty { display: none; }
#view-agent.br-on .br-gen-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--br-panel-2); border: 1px solid var(--br-line);
}
#view-agent.br-on .br-gen-ring {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--br-line); border-top-color: var(--br-text);
  animation: br-gen-spin 0.9s linear infinite;
}
@keyframes br-gen-spin { to { transform: rotate(360deg); } }
@keyframes br-gen-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #view-agent.br-on .br-gen-ring { animation: br-gen-pulse 1.4s ease-in-out infinite; } }
#view-agent.br-on .br-gen-body { flex: 1; min-width: 0; }
#view-agent.br-on .br-gen-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.78125rem; color: var(--br-text); }
#view-agent.br-on .br-gen-line strong { font-weight: 500; }
#view-agent.br-on .br-gen-kind, #view-agent.br-on .br-gen-model, #view-agent.br-on .br-gen-elapsed {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.6875rem; color: var(--br-faint);
}
#view-agent.br-on .br-gen-elapsed { margin-left: auto; font-variant-numeric: tabular-nums; }
#view-agent.br-on .br-gen-prompt { margin-top: 3px; font-size: 0.71875rem; color: var(--br-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-agent.br-on .br-gen-cancel {
  flex: 0 0 auto; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--br-line); background: transparent;
  color: var(--br-muted); font-size: 0.71875rem; cursor: pointer;
}
#view-agent.br-on .br-gen-cancel:hover { color: var(--br-bad); border-color: var(--br-bad); }
#view-agent.br-on .br-gen-card.done { opacity: 0.9; }
#view-agent.br-on .br-gen-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--br-faint); }
#view-agent.br-on .br-gen-dot.completed { background: var(--br-good); }
#view-agent.br-on .br-gen-dot.failed, #view-agent.br-on .br-gen-dot.error { background: var(--br-bad); }



#view-agent.br-on .br-mc-set { margin: 4px 0 8px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
#view-agent.br-on .br-mc-set > .br-mc { flex: 0 0 auto; max-width: 100%; }
#view-agent.br-on .br-mc {
  position: relative; margin: 0; border: 1px solid var(--br-line); border-radius: 9px; overflow: hidden;
  background: var(--br-panel); display: flex; flex-direction: column;
}
#view-agent.br-on .br-mc:hover { border-color: var(--br-line-strong); }
#view-agent.br-on .br-mc-imglink { display: block; line-height: 0; background: var(--br-bg); cursor: zoom-in; }
#view-agent.br-on .br-mc-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 280px; }
@media (max-width: 760px) { #view-agent.br-on .br-mc-img { max-height: 200px; } }
#view-agent.br-on .br-mc > figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  display: flex; align-items: center; gap: 12px; padding: 10px 11px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78) 62%);
  opacity: 0; pointer-events: none; transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
}
#view-agent.br-on .br-mc:hover > figcaption, #view-agent.br-on .br-mc:focus-within > figcaption { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (hover: none) { #view-agent.br-on .br-mc > figcaption { opacity: 1; transform: none; pointer-events: auto; } }
#view-agent.br-on .br-mc-meta { display: flex; flex-wrap: nowrap; gap: 10px; flex: 1 1 auto; min-width: 0; overflow: hidden; align-items: center; }
#view-agent.br-on .br-mc-meta span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: rgba(255, 255, 255, 0.82); font-size: 0.65625rem; letter-spacing: 0.09em; text-transform: uppercase;
}
#view-agent.br-on .br-mc-kind { display: inline-flex; align-items: center; flex: none; }
#view-agent.br-on .br-mc-actions { display: flex; gap: 6px; flex: none; }
#view-agent.br-on .br-mc-act {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0;
  border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.22); cursor: pointer; text-decoration: none;
  background: rgba(10, 10, 12, 0.55); color: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
#view-agent.br-on .br-mc-act:hover { background: rgba(10, 10, 12, 0.78); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
#view-agent.br-on .br-mc-act.failed { color: var(--br-bad); border-color: var(--br-bad); }
@media (hover: none) { #view-agent.br-on .br-mc-act { width: 34px; height: 34px; } }
#view-agent.br-on .br-mc-failed { padding: 18px; text-align: center; }
#view-agent.br-on .br-mc-failed-mark { font: 600 0.6875rem/1 var(--br-display); letter-spacing: 0.18em; text-transform: uppercase; color: #c99a2e; }
#view-agent.br-on .br-mc-failed-note { color: var(--br-faint); font-size: 0.75rem; margin: 6px 0 0; line-height: 1.5; }


html[data-br="1"] .br-modal-backdrop {
  --br-panel-2: #0d0d0f; --br-bg: #050506; --br-line: rgba(255, 255, 255, 0.08); --br-line-strong: rgba(255, 255, 255, 0.16);
  --br-text: #f2f3f4; --br-muted: #9a9da2; --br-faint: #828488; --br-accent: #ffffff; --br-bad: #e5484d; --br-warn: #c99a2e;
  --br-text-cost: #e6a935; --br-text-metadata: #7f848c;
  --br-display: 'Archivo', 'Arial Narrow', sans-serif; --br-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --br-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: fixed; inset: 0; z-index: 10050; background: rgba(0, 0, 0, 0.68);
  display: flex; align-items: center; justify-content: center;
  font: 400 0.84375rem/1.55 var(--br-ui); color: var(--br-text); -webkit-font-smoothing: antialiased;
}
html[data-br="1"] .br-modal { width: min(520px, 92vw); max-height: 90dvh; overflow-y: auto; background: var(--br-panel-2); border: 1px solid var(--br-line-strong); border-radius: 10px; }
html[data-br="1"] .br-modal-head {
  padding: 14px 18px; border-bottom: 1px solid var(--br-line);
  font: 600 0.75rem/1.3 var(--br-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--br-text);
}
html[data-br="1"] .br-modal-body { padding: 16px 18px; }
html[data-br="1"] .br-perm-tool { font-family: var(--br-mono); font-size: 0.75rem; display: flex; align-items: center; gap: 10px; color: var(--br-muted); }
html[data-br="1"] .br-risk {
  font: 400 0.59375rem/1.4 var(--br-ui); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; border: 1px solid var(--br-line-strong); color: var(--br-muted);
}
html[data-br="1"] .br-risk.external { color: var(--br-warn); border-color: var(--br-warn); }
html[data-br="1"] .br-perm-summary { font-size: 0.875rem; color: var(--br-text); margin: 10px 0 0; line-height: 1.45; }
html[data-br="1"] .br-perm-cost {
  font-size: 0.8125rem; font-weight: 600; color: var(--br-text-cost); font-variant-numeric: tabular-nums;
  border: 1px solid rgba(230, 169, 53, 0.45); border-radius: 6px; padding: 6px 10px; margin: 10px 0 0; display: inline-block;
}
html[data-br="1"] .br-perm-cost-after { color: var(--br-muted); font-weight: 500; }
html[data-br="1"] .br-perm-cost-after b { color: var(--br-text-cost); font-weight: 600; }
html[data-br="1"] .br-perm-short { margin: 8px 0 0; font-size: 0.78125rem; color: var(--br-bad); }
html[data-br="1"] .br-perm-note { margin: 8px 0 0; font-size: 0.71875rem; color: var(--br-text-metadata); line-height: 1.45; }
html[data-br="1"] .br-perm-detail { font-size: 0.75rem; color: var(--br-muted); margin: 10px 0 0; font-style: italic; line-height: 1.45; overflow-wrap: anywhere; }
html[data-br="1"] .br-perm-raw-toggle {
  display: block; padding: 0; margin: 12px 0 0; border: 0; background: none; cursor: pointer;
  color: var(--br-text-metadata); font: 400 0.6875rem/1.4 var(--br-ui); text-decoration: underline;
}
html[data-br="1"] .br-perm-raw-toggle:hover { color: var(--br-muted); }
html[data-br="1"] .br-perm-input {
  background: var(--br-bg); border: 1px solid var(--br-line); border-radius: 6px; padding: 10px; margin-top: 8px;
  font-family: var(--br-mono); font-size: 0.71875rem; color: var(--br-muted); max-height: 220px; overflow: auto; white-space: pre-wrap;
}
html[data-br="1"] .br-perm-input[hidden] { display: none; }
html[data-br="1"] .br-modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--br-line); flex-wrap: wrap; }
html[data-br="1"] .br-modal-actions button {
  border: 1px solid var(--br-line-strong); border-radius: 5px; padding: 8px 16px; background: transparent; color: var(--br-text); cursor: pointer;
  font: 700 0.6875rem/1 var(--br-display); letter-spacing: 0.16em; text-transform: uppercase;
}
html[data-br="1"] .br-modal-actions button:hover { border-color: var(--br-accent); }
html[data-br="1"] .br-modal-actions button.primary { background: var(--br-accent); color: #0a0a0b; border-color: var(--br-accent); }
html[data-br="1"] .br-modal-actions button:disabled { opacity: 0.45; cursor: default; }
html[data-br="1"] .br-modal-actions button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--br-panel-2), 0 0 0 4px var(--br-accent); }
@media (hover: none) { html[data-br="1"] .br-modal-actions button { min-height: 40px; } }
html[data-br="1"] .br-perm-countdown { margin-right: auto; font-family: var(--br-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--br-text-metadata); font-variant-numeric: tabular-nums; }
html[data-br="1"] .br-perm-countdown.hot { color: var(--br-warn); }


#view-agent.br-on .br-btn-enhance.is-loading { opacity: 0.6; animation: br-gen-pulse 1.1s ease-in-out infinite; cursor: progress; }


#view-agent.br-on .br-mc-player { display: block; width: auto; height: auto; max-width: 100%; max-height: 280px; min-width: 200px; background: #000; }
@media (max-width: 760px) { #view-agent.br-on .br-mc-player { max-height: 200px; } }
#view-agent.br-on .br-mc-video > figcaption {
  top: 0; bottom: auto; transform: translateY(-4px);
  background: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.78) 62%);
}
#view-agent.br-on .br-mc-video:hover > figcaption, #view-agent.br-on .br-mc-video:focus-within > figcaption { transform: translateY(0); }