/* this will be exported as base.css and can be used for a basic styling */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-border-default: 1px solid #bbb;
  --xy-node-border-selected-default: 1px solid #555;

  --xy-handle-background-color-default: #333;

  --xy-selection-background-color-default: rgba(150, 150, 180, 0.1);
  --xy-selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #555;
  --xy-background-pattern-lines-color-default: #333;
  --xy-background-pattern-cross-color-default: #333;
  --xy-node-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  touch-action: none;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  border: var(--xy-node-border, var(--xy-node-border-default));
  color: var(--xy-node-color, var(--xy-node-color-default));
}
.react-flow__node-input.selected,
  .react-flow__node-input:focus,
  .react-flow__node-input:focus-visible,
  .react-flow__node-default.selected,
  .react-flow__node-default:focus,
  .react-flow__node-default:focus-visible,
  .react-flow__node-output.selected,
  .react-flow__node-output:focus,
  .react-flow__node-output:focus-visible,
  .react-flow__node-group.selected,
  .react-flow__node-group:focus,
  .react-flow__node-group:focus-visible {
    outline: none;
    border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));
  }
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}

/* PentaBot app frame. Pixel: one dark theme, colour and spacing as custom properties. */
@font-face { font-family: 'Geist'; src: url('fonts/Geist-Variable.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tiny5'; src: url('fonts/Tiny5-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark;
  --pb-bg: #0A0A0B;
  --pb-sidebar: #0B0B0D;
  --pb-panel: #0C0C0E;
  --pb-surface: #101013;
  --pb-surface-2: #16161A;
  --pb-composer: #111114;
  --pb-border: #1D1D22;
  --pb-border-strong: #2A2A31;
  --pb-owner-bubble: #1A1A1F;
  --pb-text: #E9E7E1;
  --pb-text-strong: #F2F0EA;
  --pb-text-soft: #B9B7B0;
  --pb-text-muted: #8A8992;
  --pb-dot-off: #232329;
  --pb-accent: #EDE9DC;
  --pb-accent-text: #141413;
  --pb-danger: #FF5A4E;
  --pb-danger-text: #F0A3A3;
  --pb-warn: #F6C26B;
  --pb-warn-on: #2A1A00;
  --pb-ivory: #EDE9DC;
  --pb-ivory-on: #141413;
  --pb-warn-bg: rgba(255,201,74,.10);
  --pb-info-bg: rgba(90,184,255,.10);
  --pb-focus: #EDE9DC;
  --pb-info-text: #9FD4FF;
  --pb-warn-text: #F6C26B;
  --pb-need-text: #F0A3A3;
  --pb-ok: #8EE07A;
  --pb-text-chip: #A3A7AF;
  --pb-space-1: 4px;
  --pb-space-2: 8px;
  --pb-space-3: 12px;
  --pb-space-4: 16px;
  --pb-radius: 12px;
  --pb-radius-lg: 18px;
  --pb-radius-pill: 999px;
  --pb-sidebar-w: 248px;
  --pb-panel-w: 380px;
  --pb-panel-wide-w: 520px;
  --pb-font: 'Geist', system-ui, -apple-system, sans-serif;
  --pb-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pb-pixel: 'Tiny5', 'Geist Mono', monospace;
  --pb-label: var(--pb-mono);
  --pb-series-1: #3987e5; --pb-series-2: #d95926; --pb-series-3: #199e70; --pb-series-4: #c98500;
  --pb-series-5: #d55181; --pb-series-6: #008300; --pb-series-7: #9085e9; --pb-series-other: #8a8a94;
}
* { box-sizing: border-box; }
.pb-pixel { font-family: var(--pb-label); font-synthesis: none; letter-spacing: 0.06em; text-transform: uppercase; }
/* Tiny5 is drawn on an 8-unit em, so its headings stay at 16 or 24 px to land on whole pixels. Smaller pixel-class text is Geist Mono. */
.pb-page-title, .pb-chat-title, .pb-settings .pb-server-name { font-family: var(--pb-pixel); -webkit-font-smoothing: none; letter-spacing: 0.125em; }
.pb-dotgrid { background-image: radial-gradient(circle, #1C1C21 1.1px, transparent 1.3px); background-size: 10px 10px; }
html, body, #root { height: 100%; }
/* The app scrolls its own panes; the page itself must never scroll (a stray absolute element would move the whole app). */
html, body { overflow: hidden; }
body { margin: 0; background: var(--pb-bg); color: var(--pb-text); font: 14px/1.45 var(--pb-font); }
:focus-visible { outline: 2px solid var(--pb-focus); outline-offset: 2px; }
button { font: inherit; color: inherit; }
code, pre { font-family: var(--pb-mono); }
h1 { font-size: 20px; margin: 0 0 var(--pb-space-3); }
h2 { font-size: 12px; text-transform: none; letter-spacing: .02em; color: var(--pb-text-muted); margin: 0 0 var(--pb-space-2); }
ul { list-style: none; margin: 0; padding: 0; }

.pb-app { display: flex; flex-direction: column; height: 100%; }
.pb-frame { display: flex; flex: 1; min-height: 0; }
.pb-main { flex: 1; min-width: 0; overflow: auto; background: var(--pb-bg); }
.pb-page { min-height: 100%; padding: 20px 32px; }
.pb-page h2, .pb-botpanel .pb-task-group h2 { font-family: var(--pb-label); font-synthesis: none; font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; color: var(--pb-text-muted); }
.pb-page-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--pb-space-3); padding-bottom: 16px; margin-bottom: 22px; background: var(--pb-bg); border-bottom: 1px solid var(--pb-border); }
.pb-page-head h1 { margin: 0; }
.pb-page-title { overflow-wrap: anywhere; font-size: 24px; font-weight: 400; color: var(--pb-text-strong); }
.pb-page h2.pb-section-plain { font-family: var(--pb-font); font-synthesis: initial; -webkit-font-smoothing: auto; font-size: 15px; text-transform: none; letter-spacing: normal; }
.pb-empty { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px dashed var(--pb-border-strong); border-radius: 12px; font-size: 13px; color: var(--pb-text-muted); }
.pb-empty p { margin: 0; }
.pb-empty-leds { display: inline-flex; gap: 4px; flex: none; }
.pb-placeholder { color: var(--pb-text-muted); }

.pb-banner { padding: var(--pb-space-2) var(--pb-space-4); background: var(--pb-warn-bg); color: var(--pb-text); text-align: center; border-bottom: 1px solid var(--pb-border); }
.pb-banner-paused { background: var(--pb-info-bg); }
.pb-banner-unauthorized { background: var(--pb-danger); color: var(--pb-accent-text); border-bottom-color: transparent; }

.pb-btn { border: 1px solid var(--pb-border-strong); background: transparent; border-radius: var(--pb-radius); padding: var(--pb-space-1) var(--pb-space-3); cursor: pointer; min-height: 32px; font-weight: 500; color: var(--pb-text); }
.pb-btn:hover:not(:disabled) { background: var(--pb-surface-2); }
.pb-btn:disabled { opacity: .55; cursor: default; }
.pb-btn-primary { background: var(--pb-accent); color: var(--pb-accent-text); border-color: transparent; font-weight: 600; }
.pb-btn-primary:hover:not(:disabled) { background: var(--pb-accent); filter: brightness(1.06); }
.pb-btn-secondary { background: transparent; border-color: var(--pb-border-strong); color: var(--pb-text); }
.pb-btn-danger { color: var(--pb-danger); }
.pb-btn-ghost { background: transparent; border-color: transparent; }
.pb-btn-ghost:hover:not(:disabled) { background: var(--pb-surface-2); }
.pb-btn.pb-pixel { font-size: 11px; }

.pb-popover { position: fixed; top: var(--pb-space-3); left: calc(var(--pb-sidebar-w) + var(--pb-space-1)); width: 320px; max-height: 70vh; overflow: auto; padding: var(--pb-space-3); background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); z-index: 10; }

.pb-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pb-accent); color: var(--pb-accent-text); font-size: 11px; font-weight: 600; }

.pb-sidebar { display: flex; flex-direction: column; gap: var(--pb-space-4); width: var(--pb-sidebar-w); min-width: 0; padding: 18px 14px; overflow: hidden; background: var(--pb-sidebar); border-right: 1px solid var(--pb-border); }
.pb-brand { display: flex; align-items: center; gap: 8px; padding: var(--pb-space-1) 0; min-width: 0; }
.pb-wordmark { font-size: 11px; color: var(--pb-text-strong); white-space: nowrap; }
.pb-bell { position: relative; flex: none; width: 28px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--pb-text-muted); }
.pb-bell:hover:not(:disabled) { color: var(--pb-text); }
.pb-bell .pb-badge { position: absolute; top: -4px; right: -4px; }
.pb-stop-all { margin-left: auto; flex: none; height: 32px; min-height: 32px; padding: 0 10px; font-size: 13px; font-weight: 500; border-color: var(--pb-border-strong); border-radius: 10px; white-space: nowrap; }
.pb-stop-all kbd { display: none; font: inherit; font-family: var(--pb-mono); font-size: 11px; color: var(--pb-text-muted); }
.pb-search { display: flex; align-items: center; gap: var(--pb-space-2); height: 38px; padding: 0 var(--pb-space-3); border-radius: var(--pb-radius); background: var(--pb-surface); color: var(--pb-text-muted); }
.pb-search svg { flex: none; }
.pb-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--pb-text); font: inherit; outline: none; }
.pb-search:focus-within { outline: 2px solid var(--pb-focus); outline-offset: 2px; }
.pb-group { display: flex; flex-direction: column; gap: 2px; }
.pb-label { font-family: var(--pb-label); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; color: var(--pb-text-muted); margin: 0; padding: 0 var(--pb-space-2) 6px; }
.pb-label-row { display: flex; align-items: center; justify-content: space-between; }
.pb-new-btn { font-size: 11px; height: 24px; min-height: 24px; padding: 0 var(--pb-space-2); color: var(--pb-text-muted); }
.pb-sidebar-scroll { display: flex; flex-direction: column; gap: var(--pb-space-4); flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.pb-needs-item { width: 100%; justify-content: flex-start; text-align: left; background: var(--pb-info-bg); margin-bottom: var(--pb-space-1); }
.pb-bots { display: flex; flex-direction: column; gap: 2px; }
.pb-label-actions { display: inline-flex; align-items: center; gap: 2px; }
.pb-bot-group { display: flex; flex-direction: column; gap: 2px; }
.pb-group-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding-top: var(--pb-space-1); background: transparent; border: 0; cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-group-toggle:hover { color: var(--pb-text); }
.pb-bot-group .pb-menu > .pb-btn { width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; color: var(--pb-text-muted); }
.pb-bot-group .pb-menu [role='menu'] { right: 0; }
.pb-ungrouped { padding-top: var(--pb-space-1); }
.pb-group-name { padding: 0 var(--pb-space-2) var(--pb-space-1); }
.pb-group-name input { width: 100%; height: 30px; padding: 0 var(--pb-space-2); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); background: var(--pb-surface); color: var(--pb-text); font: inherit; }
.pb-bot-item { position: relative; }
/* Two classes: the shared `.pb-menu { position: relative }` further down must not win and drop it a row lower. */
.pb-menu.pb-row-menu { position: absolute; left: 56px; top: 100%; z-index: 20; }
.pb-bot-row { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: calc(var(--pb-space-2) - 1px); border: 1px solid transparent; border-radius: var(--pb-radius); background: transparent; cursor: pointer; text-align: left; }
.pb-bot-row:hover { background: var(--pb-surface-2); }
.pb-bot-row.pb-selected, .pb-bot-row[aria-current='page'] { background: var(--pb-surface); border-color: var(--pb-bot); }
.pb-bot-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.pb-bot-name { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-bot-status { min-width: 0; font-size: 12.5px; color: var(--pb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-bot-row .pb-badge { flex: none; font-family: var(--pb-mono); }
/* An offline machine's bots: greyed, still openable (their chats read from the main machine's copy). */
.pb-bot-row.pb-bot-offline > * { opacity: 0.5; }
.pb-bot-row.pb-bot-offline .pb-bot-status { color: var(--pb-text-muted); }
.pb-bot-status-warn { color: #F6C26B; }
.pb-bot-status > span { margin-right: var(--pb-space-1); vertical-align: middle; }
.pb-badge-queue { background: var(--pb-surface-2); color: var(--pb-text-soft); }
.pb-badge-paused { width: auto; background: var(--pb-warn-bg); color: var(--pb-text-soft); font-weight: 500; }
.pb-badge-wait { width: auto; background: var(--pb-surface-2); color: var(--pb-text-soft); font-weight: 500; }
.pb-needs-pill { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pb-radius-pill); background: var(--pb-danger); color: var(--pb-accent-text); font-size: 12px; font-weight: 600; }
.pb-routine-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: var(--pb-space-2); border: 0; border-radius: var(--pb-radius); background: transparent; color: var(--pb-text); font-size: 14px; text-align: left; cursor: pointer; }
.pb-routine-row:hover { background: var(--pb-surface-2); }
.pb-routine-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pb-botpanel { position: relative; flex: none; display: flex; min-height: 0; background: var(--pb-panel); }
.pb-botpanel .pb-chat-status { display: flex; align-items: center; gap: var(--pb-space-2); margin: 0; color: var(--pb-text-muted); font-size: 12.5px; }
.pb-botpanel-state { color: var(--pb-bot); }
.pb-botpanel-about { display: flex; flex-direction: column; gap: var(--pb-space-3); }
.pb-botpanel-about .pb-connected { margin: 0; }
.pb-rail { flex: none; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--pb-space-2) 0; border-left: 1px solid var(--pb-border); overflow-y: auto; }
.pb-rail-gap { flex: 1; min-height: var(--pb-space-2); }
.pb-rail-item { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 0; border-radius: 10px; color: var(--pb-text-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.pb-rail-item:hover { background: var(--pb-surface); color: var(--pb-text); }
.pb-rail-item[aria-current='page'] { background: color-mix(in srgb, var(--pb-accent) 16%, transparent); color: var(--pb-accent); }
.pb-rail-item:focus-visible { outline: 2px solid var(--pb-focus); outline-offset: 1px; }
.pb-rail-tip { position: absolute; right: 58px; z-index: 30; transform: translateY(-50%); padding: 4px 9px; border-radius: 7px; background: var(--pb-text-strong); color: var(--pb-bg); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.pb-rail-count { position: absolute; top: 1px; right: 0; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--pb-accent); color: var(--pb-accent-text); font-family: var(--pb-mono); font-size: 10px; font-weight: 600; line-height: 15px; text-align: center; }
.pb-botpanel-wide .pb-panel:not(.pb-preview) { width: var(--pb-panel-wide-w); }
.pb-connected { margin: var(--pb-space-3); padding: var(--pb-space-3); background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); }
.pb-connected-label { margin: 0 0 var(--pb-space-2); font-size: 11px; color: var(--pb-text-muted); }
.pb-connected-list { display: flex; flex-direction: column; gap: var(--pb-space-2); margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--pb-text-soft); }
.pb-connected-list li { display: flex; align-items: center; gap: var(--pb-space-2); }
.pb-panel { flex: none; width: var(--pb-panel-w); display: flex; flex-direction: column; min-height: 0; background: var(--pb-surface); border-left: 1px solid var(--pb-border); }
.pb-panel:focus { outline: none; }
.pb-panel > header { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 var(--pb-space-3) 0 var(--pb-space-4); border-bottom: 1px solid var(--pb-border); }
.pb-panel h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--pb-text); }
.pb-panel-body { flex: 1; min-height: 0; overflow: auto; padding: var(--pb-space-3) var(--pb-space-4) var(--pb-space-4); }
/* Narrow window: the panel floats over the chat, beside the rail, instead of squeezing the chat. */
.pb-panel-overlay { position: absolute; top: 0; bottom: 0; right: 52px; z-index: 20; max-width: calc(100vw - 52px); box-shadow: -12px 0 32px rgba(0, 0, 0, .45); }
/* The file preview: the right panel at a remembered width (320 px … 60%, set by PreviewPane), full screen on a phone. */
.pb-preview { position: relative; padding: var(--pb-space-4); flex: none; width: var(--pb-preview-w, 480px); display: flex; flex-direction: column; gap: var(--pb-space-3); overflow: hidden; }
.pb-preview > header { gap: var(--pb-space-2); min-height: 0; padding: 0; border-bottom: 0; }
.pb-preview h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-preview-actions { flex: none; display: flex; align-items: center; gap: var(--pb-space-1); }
/* The pane clips its overflow, so its ⋯ menu opens leftwards from the right edge. */
.pb-preview-actions .pb-menu [role='menu'] { right: 0; }
.pb-preview-handle { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; cursor: col-resize; touch-action: none; }
.pb-preview-handle:hover, .pb-preview-handle:focus-visible, .pb-preview-dragging .pb-preview-handle { background: var(--pb-border-strong); }
.pb-preview-dragging { user-select: none; }
.pb-preview-dragging .pb-preview-frame { pointer-events: none; }
.pb-preview-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--pb-space-2); overflow: auto; }
.pb-preview-state { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pb-space-2); margin: 0; color: var(--pb-text-muted); }
.pb-preview-state p { margin: 0; }
.pb-preview-note { margin: 0; font-size: 12px; color: var(--pb-text-muted); }
.pb-preview-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.5 var(--pb-mono); color: var(--pb-text-soft); }
.pb-preview-md { color: var(--pb-text-soft); overflow-wrap: anywhere; }
.pb-preview-zoom { align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.pb-preview-zoom img { display: block; max-width: 100%; height: auto; }
.pb-preview-zoom[aria-pressed='true'] { max-width: none; cursor: zoom-out; }
.pb-preview-zoom[aria-pressed='true'] img { max-width: none; }
/* No background on the frame: a light bot page gets the browser's opaque light canvas inside the dark app. */
.pb-preview-frame { flex: 1; width: 100%; min-height: 320px; border: 1px solid var(--pb-border); border-radius: var(--pb-radius); }
@media (max-width: 640px) {
  .pb-preview { position: fixed; inset: 0; z-index: 30; width: 100%; border-left: 0; }
  .pb-preview-handle { display: none; }
}

.pb-toasts { position: fixed; right: var(--pb-space-4); bottom: var(--pb-space-4); display: flex; flex-direction: column; gap: var(--pb-space-2); max-width: 360px; z-index: 50; }
.pb-toast { display: flex; align-items: center; gap: var(--pb-space-2); padding: var(--pb-space-2) var(--pb-space-3); background: var(--pb-surface); border: 1px solid var(--pb-border); border-left: 4px solid var(--pb-accent); border-radius: var(--pb-radius-lg); font-size: 13px; }
.pb-toast span { flex: 1; }
.pb-toast-error { border-left-color: var(--pb-danger); }

.pb-dialog-backdrop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / .45); z-index: 40; }
.pb-dialog { width: min(480px, 92vw); padding: var(--pb-space-4); background: var(--pb-surface); border: 1px solid var(--pb-border-strong); border-radius: var(--pb-radius-lg); }
.pb-dialog h2 { font-family: var(--pb-font); font-synthesis: initial; -webkit-font-smoothing: auto; font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--pb-text); }
.pb-dialog-footer { display: flex; justify-content: flex-end; gap: var(--pb-space-2); margin-top: var(--pb-space-4); }
/* Phone pairing: the QR code stays black on white in every theme so any camera reads it. */
.pb-pair { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pb-space-2); margin: var(--pb-space-3) 0; }
.pb-qr { display: block; max-width: 100%; height: auto; background: #fff; border-radius: var(--pb-radius); }
.pb-pair-code { font-family: var(--pb-mono); font-size: 28px; letter-spacing: .12em; color: var(--pb-text-strong); margin: var(--pb-space-2) 0 0; }

.pb-field { display: flex; flex-direction: column; gap: var(--pb-space-1); margin-bottom: var(--pb-space-3); }
.pb-field input, .pb-field select, .pb-field textarea { font: inherit; padding: var(--pb-space-2); color: var(--pb-text); background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); }
.pb-field-hint { margin: 0; font-size: 12px; color: var(--pb-text-muted); }
.pb-field-error { margin: 0; font-size: 12px; color: var(--pb-danger); }

.pb-tabs [role='tablist'] { display: flex; gap: var(--pb-space-1); border-bottom: 1px solid var(--pb-border); }
.pb-tabs [role='tab'] { padding: var(--pb-space-2) var(--pb-space-3); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.pb-tabs [role='tab'][aria-selected='true'] { border-bottom-color: var(--pb-accent); font-weight: 600; }

.pb-menu { position: relative; display: inline-block; }
.pb-menu [role='menu'] { position: absolute; z-index: 20; min-width: 160px; display: flex; flex-direction: column; padding: var(--pb-space-1); background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); }
.pb-menu [role='menuitem'] { text-align: left; padding: var(--pb-space-2); background: transparent; border: 0; cursor: pointer; border-radius: 4px; }
.pb-menu [role='menuitem']:hover, .pb-menu [role='menuitem']:focus { background: var(--pb-surface-2); }
.pb-menu .pb-danger { color: var(--pb-danger); }

.pb-muted { color: var(--pb-text-muted); }

.pb-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pb-bot-scope { --pb-accent: var(--pb-bot); --pb-accent-text: var(--pb-bot-on); --pb-focus: var(--pb-bot); }
.pb-chat-head { display: flex; align-items: center; gap: var(--pb-space-3); min-height: 60px; box-sizing: border-box; padding: 0 var(--pb-space-4); background: rgba(10,10,11,0.94); border-bottom: 1px solid var(--pb-border); }
.pb-chat-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-chat-title { margin: 0; font-size: 16px; }
.pb-chat-line { display: flex; align-items: center; gap: var(--pb-space-2); margin: 0; }
.pb-chat-head .pb-chat-status { display: block; min-width: 0; color: var(--pb-bot); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-timeline { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: var(--pb-space-3) var(--pb-space-4); }
.pb-timeline-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 22px; max-width: 820px; margin: 0 auto; }
.pb-sentinel { height: 1px; }
.pb-flash { animation: pb-flash 1.2s ease-out; border-radius: var(--pb-radius-lg); }
@keyframes pb-flash { from { outline: 2px solid var(--pb-accent); outline-offset: 2px; } to { outline: 2px solid transparent; outline-offset: 2px; } }
.pb-app.static .pb-flash { animation: none; }
.pb-timeline-loading, .pb-timeline-empty { text-align: center; }
.pb-greeting-title { margin: 0 0 var(--pb-space-1); font-size: 18px; color: var(--pb-text); }
.pb-greeting-providers { list-style: none; margin: var(--pb-space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--pb-space-2); justify-content: center; align-items: center; }
.pb-greeting-chip { display: inline-flex; align-items: center; gap: var(--pb-space-2); padding: 0 var(--pb-space-2); border: 1px solid var(--pb-border); border-radius: var(--pb-radius-pill); background: var(--pb-surface); color: var(--pb-text-soft); font-size: 13px; }
.pb-greeting-chip-todo { border-color: var(--pb-border-strong); }
.pb-suggestion-list { display: flex; flex-wrap: wrap; gap: var(--pb-space-2); justify-content: center; margin-top: var(--pb-space-2); }
.pb-exchange { display: flex; flex-direction: column; gap: var(--pb-space-2); }
.pb-bubble { max-width: 85%; padding: var(--pb-space-2) var(--pb-space-3); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); background: var(--pb-surface); overflow-wrap: anywhere; }
.pb-bubble-owner { align-self: flex-end; max-width: 520px; padding: 12px 16px; background: color-mix(in srgb, var(--pb-bot, var(--pb-accent)) 16%, var(--pb-owner-bubble)); border: 1px solid color-mix(in srgb, var(--pb-bot, var(--pb-accent)) 45%, transparent); border-radius: 14px 14px 4px 14px; font-size: 14px; line-height: 1.5; }
.pb-bubble-owner .pb-bubble-head { color: var(--pb-text-muted); }
.pb-bubble-in.pb-origin-routine, .pb-bubble-in.pb-origin-system { background: var(--pb-surface-2); }
.pb-bubble-out { align-self: stretch; max-width: 100%; display: flex; gap: var(--pb-space-3); padding: 0; border: 0; background: transparent; color: var(--pb-text); font-family: var(--pb-font); font-size: 14px; line-height: 1.55; }
.pb-reply-body { flex: 1; min-width: 0; }
.pb-bubble-out .pb-bubble-head { color: var(--pb-text-muted); }
.pb-bubble-out .pb-bubble-label { color: var(--pb-text); }
.pb-bubble-head { display: flex; align-items: center; gap: var(--pb-space-2); margin-bottom: var(--pb-space-1); font-size: 12px; }
.pb-bubble-label { font-weight: 600; }
.pb-bubble-time { color: var(--pb-text-muted); }
.pb-bubble-avatar { display: inline-flex; }
.pb-bubble-error { margin-top: var(--pb-space-2); padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--pb-danger) 35%, transparent); border-radius: 10px; }
.pb-bubble-error p { margin: var(--pb-space-1) 0 0; }
.pb-bubble-error .pb-btn { margin-top: var(--pb-space-2); }
.pb-bubble-details { margin-top: var(--pb-space-2); font-size: 13px; color: var(--pb-text-muted); }
.pb-bubble-details summary { cursor: pointer; }
.pb-bubble-details p { overflow-wrap: anywhere; white-space: pre-wrap; }
.pb-bubble-status { font-family: var(--pb-label); font-weight: 400; font-size: 11px; font-synthesis: none; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pb-danger-text); }
.pb-attachments { margin-top: var(--pb-space-1); font-size: 12px; color: var(--pb-text-muted); }
.pb-files { list-style: none; margin: var(--pb-space-2) 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--pb-space-2); }
.pb-files > li { max-width: 100%; }
.pb-shared-output { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pb-space-1); max-width: 100%; }
.pb-shared-output-label { font-size: 12px; }
.pb-file { display: inline-flex; align-items: center; gap: 2px; max-width: min(420px, 100%); padding: 3px; border: 1px solid var(--pb-border); border-radius: var(--pb-radius-pill); background: var(--pb-surface); color: var(--pb-text-soft); font-size: 13px; line-height: 1.4; transition: border-color .15s ease; }
.pb-file:hover { border-color: var(--pb-border-strong); }
.pb-file-main { display: inline-flex; align-items: center; gap: var(--pb-space-2); min-width: 0; padding: 0 var(--pb-space-2) 0 0; background: transparent; border: 0; border-radius: var(--pb-radius-pill); color: inherit; font: inherit; text-align: left; }
button.pb-file-main { cursor: pointer; }
button.pb-file-main:focus-visible { outline: 2px solid var(--pb-focus); outline-offset: 2px; }
.pb-file-type { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--pb-text-chip); background: var(--pb-surface-2); }
.pb-file-type-markdown, .pb-file-type-text { color: var(--pb-info-text); background: var(--pb-info-bg); }
.pb-file-type-html { color: var(--pb-accent); background: color-mix(in srgb, var(--pb-accent) 12%, transparent); }
.pb-file-type-pdf { color: var(--pb-need-text); background: color-mix(in srgb, var(--pb-danger) 12%, transparent); }
.pb-file-type-image, .pb-file-type-svg { color: var(--pb-ok); background: color-mix(in srgb, var(--pb-ok) 12%, transparent); }
.pb-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pb-text); }
.pb-file-meta { flex: none; font-size: 12px; color: var(--pb-text-muted); }
.pb-file .pb-menu > .pb-btn { width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; color: var(--pb-text-muted); }
.pb-file-gone { background: transparent; border-style: dashed; }
.pb-file-gone .pb-file-name { color: var(--pb-text-muted); }
.pb-file-gone .pb-file-type { opacity: .6; }
.pb-file-image { display: flex; align-items: flex-start; gap: var(--pb-space-1); max-width: 100%; }
.pb-file-thumb { padding: 0; border: 1px solid var(--pb-border); border-radius: var(--pb-radius); background: var(--pb-surface); overflow: hidden; cursor: zoom-in; max-width: min(320px, 100%); min-height: 40px; min-width: 40px; color: inherit; font: inherit; }
.pb-file-thumb .pb-muted { display: block; padding: var(--pb-space-2) var(--pb-space-3); font-size: 13px; }
.pb-file-thumb img { display: block; max-width: min(320px, 100%); max-height: 240px; height: auto; }
@media (max-width: 640px) { .pb-file-thumb, .pb-file-thumb img { max-width: min(240px, 100%); } }

.pb-md > :first-child { margin-top: 0; }
.pb-md > :last-child { margin-bottom: 0; }
.pb-md p, .pb-md ul, .pb-md ol, .pb-md blockquote { margin: 0 0 10px; }
.pb-md h1, .pb-md h2, .pb-md h3, .pb-md h4, .pb-md .pb-md-lead { margin: 18px 0 6px; font-size: 14.5px; line-height: 1.35; font-weight: 600; color: var(--pb-text); }
.pb-md h1, .pb-md h2 { font-size: 15.5px; }
.pb-md strong { font-weight: 600; color: var(--pb-text); }
.pb-md ul, .pb-md ol { padding-left: 22px; }
.pb-md ul { list-style: disc; }
.pb-md ul ul { list-style: circle; }
.pb-md ol { list-style: decimal; }
.pb-md li { margin: 4px 0; }
.pb-md li::marker { color: var(--pb-text-muted); }
.pb-md li > p { margin: 0; }
.pb-md hr { margin: 14px 0; border: 0; border-top: 1px solid var(--pb-border); }
.pb-md blockquote { padding-left: 12px; border-left: 2px solid var(--pb-border-strong); color: var(--pb-text-soft); }
.pb-md-link { color: var(--pb-accent); text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.pb-md-table { overflow-x: auto; }
.pb-md-table th, .pb-md-table td { border: 1px solid var(--pb-border); }
.pb-md-table th { font-size: 12.5px; font-weight: 600; text-align: left; color: var(--pb-text-soft); background: var(--pb-surface); }
.pb-md-table th, .pb-md-table td { overflow-wrap: normal; word-break: normal; vertical-align: top; }
.pb-md-table code { white-space: nowrap; }
.pb-md table { border-collapse: collapse; }
.pb-md th, .pb-md td { border: 1px solid var(--pb-border); padding: var(--pb-space-1) var(--pb-space-2); }
.pb-md code { font-family: var(--pb-mono); font-size: 13.5px; background: var(--pb-surface-2); padding: 2px 6px; border-radius: 6px; }
.pb-md pre code { padding: 0; background: transparent; font-size: 13px; }
.pb-code { position: relative; }
.pb-code pre { overflow-x: auto; padding: var(--pb-space-3); background: var(--pb-surface-2); border-radius: var(--pb-radius); font-family: var(--pb-mono); }
.pb-code-copy { position: absolute; top: var(--pb-space-1); right: var(--pb-space-1); min-height: 24px; font-size: 12px; }

.pb-tool { margin: var(--pb-space-1) 6px var(--pb-space-1) 0; display: inline-block; vertical-align: top; max-width: 100%; background: var(--pb-surface); border: 1px solid rgba(255,255,255,.07); border-radius: 8px; font: 500 12.5px var(--pb-mono); color: var(--pb-text-chip); }
.pb-tool:has(.pb-tool-body) { display: block; }
.pb-tool.pb-tool-running { background: rgba(90,184,255,.1); background: color-mix(in srgb, var(--pb-bot, var(--pb-accent)) 10%, transparent); border-color: color-mix(in srgb, var(--pb-bot, var(--pb-accent)) 30%, transparent); color: var(--pb-text-soft); }
.pb-tool.pb-tool-failed { border-color: rgba(255,90,78,.35); }
.pb-tool-toggle { position: relative; display: flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 0 10px; background: transparent; border: 0; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: background-color .15s ease; }
.pb-tool-toggle:hover { background: rgba(255,255,255,.04); }
.pb-tool-name { flex: none; font-weight: 500; white-space: nowrap; }
.pb-tool-mark { flex: none; width: 10px; text-align: center; }
.pb-tool-done .pb-tool-mark { color: var(--pb-ok); }
.pb-tool-failed .pb-tool-mark { color: var(--pb-danger); }
.pb-tool-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pb-tool-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--pb-text-muted); background: transparent; padding: 0; font-size: inherit; }
.pb-tool-progress { margin: 2px 0 0 22px; color: var(--pb-text-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-steps { margin: var(--pb-space-1) 0; }
.pb-steps-toggle { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 26px; padding: 0; background: transparent; border: 0; color: var(--pb-text-muted); font-size: 12px; cursor: pointer; }
.pb-steps-chevron { flex: none; font-size: 10px; }
.pb-steps-show { flex: none; color: var(--pb-accent); }
.pb-steps-toggle:hover .pb-steps-show { text-decoration: underline; }
.pb-steps-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-steps-list { margin-top: var(--pb-space-1); padding-left: var(--pb-space-3); border-left: 1px solid var(--pb-border); }
.pb-steps-one > .pb-tool { margin: 0; background: transparent; border-color: transparent; font-size: 12px; color: var(--pb-text-muted); }
.pb-steps-one > .pb-tool > .pb-tool-toggle { min-height: 26px; padding: 0; }
.pb-team { margin: var(--pb-space-1) 0; }
.pb-team-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 2px 10px; background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); color: var(--pb-text-soft); font-size: 13px; text-align: left; cursor: pointer; transition: border-color .15s ease; }
.pb-team-row:hover { border-color: var(--pb-border-strong); }
.pb-team-row[aria-disabled="true"] { cursor: default; }
.pb-team-row[aria-disabled="true"]:hover { border-color: var(--pb-border); }
.pb-team-text { min-width: 0; overflow-wrap: anywhere; }
.pb-team-chip { flex: none; padding: 0 8px; border-radius: var(--pb-radius-pill); border: 1px solid var(--pb-border); font: 500 11.5px var(--pb-mono); color: var(--pb-text-muted); }
.pb-team-chip-live { color: var(--pb-accent-text); border-color: var(--pb-accent); }
.pb-team-chip-ok { color: var(--pb-ok); }
.pb-team-chip-warn { color: var(--pb-warn-text); background: var(--pb-warn-bg); }
.pb-team-chip-bad { color: var(--pb-danger); }
.pb-tool-body { padding: 0 var(--pb-space-2) var(--pb-space-2); }
.pb-tool-body pre { max-height: 360px; overflow: auto; padding: var(--pb-space-2); background: var(--pb-surface-2); border-radius: var(--pb-radius); font-size: 12px; white-space: pre-wrap; }

.pb-run-row { align-self: stretch; }
.pb-run-btn { display: flex; align-items: center; gap: var(--pb-space-2); width: 100%; padding: var(--pb-space-1) var(--pb-space-2); background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); cursor: pointer; text-align: left; font: 500 12px var(--pb-mono); }
.pb-run-kind, .pb-task-kind { color: var(--pb-text-muted); }
.pb-run-name { font-weight: 600; }
.pb-run-failed .pb-run-status, .pb-run-error { color: var(--pb-danger); }
.pb-run-facts { margin: var(--pb-space-1) 0 0; font: 12px var(--pb-mono); }
.pb-run-report { margin: var(--pb-space-2) 0 0; }
.pb-quiet-runs { display: flex; flex-direction: column; gap: var(--pb-space-1); }
.pb-quiet-toggle { align-self: flex-start; font-size: 12px; color: var(--pb-text-muted); }
.pb-task-row { display: flex; gap: var(--pb-space-2); font-size: 12px; padding: var(--pb-space-1) var(--pb-space-2); border-left: 3px solid var(--pb-accent); }
.pb-divider { display: flex; align-items: center; gap: var(--pb-space-2); color: var(--pb-text-muted); font-size: 12px; }
.pb-divider::before, .pb-divider::after { content: ''; flex: 1; border-top: 1px solid var(--pb-border); }
.pb-botchange { display: flex; flex-wrap: wrap; gap: var(--pb-space-2); font-size: 12px; padding: var(--pb-space-1) var(--pb-space-2); border-left: 3px solid var(--pb-accent); }
.pb-botchange-repos { color: var(--pb-text-muted); flex-basis: 100%; }
.pb-host-row { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12px; color: var(--pb-text-muted); }
.pb-thinking { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--pb-accent); font-size: 10px; }
.pb-recovered { font-size: 12px; margin: 0; }
.pb-botchange a { color: var(--pb-accent); }
.pb-run-drawer { max-height: 65vh; overflow-y: auto; }
.pb-run-meta { display: grid; grid-template-columns: auto 1fr; gap: var(--pb-space-1) var(--pb-space-3); margin: 0 0 var(--pb-space-3); }
.pb-run-meta dd { margin: 0; }
.pb-run-step { padding: var(--pb-space-2) 0; border-top: 1px solid var(--pb-border); }
.pb-run-step-head { display: flex; flex-wrap: wrap; gap: var(--pb-space-2); }
.pb-run-step h3 { font: 500 11px var(--pb-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--pb-text-muted); margin: var(--pb-space-2) 0 var(--pb-space-1); }

/* Hover and selected states ease in (spec 2.3). Reduce Motion, the app's .static or the OS setting, turns it off. */
.pb-btn, .pb-bot-row, .pb-routine-row, .pb-appnav-row, .pb-pixel, .pb-dotgrid, .pb-card { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.pb-app.static * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Chat cards */
.pb-cards { display: flex; flex-direction: column; gap: var(--pb-space-2); padding: var(--pb-space-2) var(--pb-space-3); max-height: 45vh; overflow-y: auto; border-top: 1px solid var(--pb-border); }
.pb-card { background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: var(--pb-space-3); }
.pb-card-tag { align-self: flex-start; margin: 0; padding: 3px 6px; border-radius: 4px; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.pb-card-tag-bot { background: var(--pb-accent); color: var(--pb-accent-text); }
.pb-card-tag-ivory { background: var(--pb-ivory); color: var(--pb-ivory-on); }
.pb-card-tag-warn { background: var(--pb-warn); color: var(--pb-warn-on); }
.pb-card-tag-neutral { background: var(--pb-border-strong); color: var(--pb-text); }
.pb-card .pb-card-title { font-size: 14px; font-weight: 600; color: var(--pb-text-strong); }
.pb-card-approval, .pb-card-servertool { border-color: color-mix(in srgb, var(--pb-accent) 40%, var(--pb-border)); }
.pb-card-secret, .pb-card-toolserver { border-color: color-mix(in srgb, var(--pb-warn) 25%, var(--pb-border)); }
.pb-card .pb-btn-primary { background: var(--pb-accent); color: var(--pb-accent-text); border-color: var(--pb-accent); }
.pb-card .pb-btn-danger { background: transparent; color: var(--pb-danger-text); border-color: color-mix(in srgb, var(--pb-danger) 25%, transparent); }
.pb-card .pb-btn-ghost { border-color: transparent; }
.pb-card .pb-btn-deny { background: transparent; color: var(--pb-danger-text); border-color: #3A2326; }
/* Owner-decision cards in the conversation: ON YOU sits top-right on the card; once answered, one quiet line. */
.pb-thread-card { position: relative; max-width: 560px; }
.pb-card-tag-onyou { position: absolute; top: 14px; right: 16px; font-family: var(--pb-font); font-weight: 600; letter-spacing: .04em; }
.pb-card-answered { padding-left: var(--pb-space-1); }
.pb-card-head { display: flex; gap: var(--pb-space-2); align-items: baseline; flex-wrap: wrap; }
.pb-card-lane { font-weight: 600; }
.pb-card-kind, .pb-card-note { color: var(--pb-text-muted); font-size: 12px; margin: 0; }
.pb-card-detail { margin: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; color: var(--pb-text-soft); }
.pb-card-code, .pb-diff-patch { font-family: var(--pb-mono); font-size: 12px; background: var(--pb-surface-2); border: 1px solid var(--pb-border); border-radius: 8px; padding: var(--pb-space-2); margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow: auto; }
.pb-card-actions { display: flex; gap: var(--pb-space-2); flex-wrap: wrap; }
.pb-card-actions .pb-btn { min-height: 38px; padding: 0 var(--pb-space-4); }
.pb-card-fields { margin: 0; padding-left: var(--pb-space-4); }
.pb-card-field, .pb-card-radio { display: flex; flex-direction: column; gap: var(--pb-space-1); font-size: 12px; }
.pb-card-radio { flex-direction: row; align-items: center; gap: var(--pb-space-2); font-size: 14px; }
.pb-card-question-item { border: 0; padding: 0; margin: 0; }
.pb-card-option { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.pb-card-radio:has(.pb-card-option .pb-card-note) { align-items: flex-start; }
.pb-card-plan-steps { margin: 0; padding-left: var(--pb-space-4); display: flex; flex-direction: column; gap: var(--pb-space-1); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.pb-card-countdown { display: flex; align-items: center; gap: var(--pb-space-2); margin: 0; font-size: 12px; color: var(--pb-text-muted); font-variant-numeric: tabular-nums; }
.pb-card-status { margin-left: auto; font-size: 10px; color: var(--pb-text-muted); }
.pb-card-status-done { color: var(--pb-ok); }
.pb-card-status-failed { color: var(--pb-danger-text); }
.pb-card-status-running { color: var(--pb-accent); }
.pb-card-app { display: inline-block; min-width: 58px; margin-right: 6px; font-size: 10px; color: var(--pb-accent); }
.pb-card-stats { margin: 0; font-variant-numeric: tabular-nums; }
.pb-chip { font: 500 12px var(--pb-mono); padding: 0 var(--pb-space-2); border-radius: 999px; background: var(--pb-info-bg); }
.pb-diff { max-height: 65vh; overflow: auto; }
.pb-diff-files { margin: 0 0 var(--pb-space-2); padding-left: var(--pb-space-4); }
.pb-diff-patch { max-height: none; }
.pb-card-change { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Composer, queue tray, chat header */
.pb-chat-subtitle, .pb-chat-quiet { margin: 0; color: var(--pb-text-muted); font-size: 12px; }
.pb-pending { opacity: .85; }
.pb-pending-failed { border-color: var(--pb-danger); }
.pb-queue { border-top: 1px solid var(--pb-border); padding: var(--pb-space-2) var(--pb-space-3); max-height: 30vh; overflow-y: auto; }
.pb-queue-title { font: 500 11px var(--pb-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--pb-text-muted); margin: 0 0 var(--pb-space-1); }
.pb-queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pb-space-2); }
.pb-queue-item { background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius-lg); padding: var(--pb-space-2); }
.pb-queue-text { margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pb-queue-hold { margin: 0; font: 500 12px var(--pb-mono); color: var(--pb-text-muted); }
.pb-queue-others { margin: 0; font-size: 12px; color: var(--pb-text-muted); }
.pb-queue-actions { display: flex; gap: var(--pb-space-1); flex-wrap: wrap; margin-top: var(--pb-space-1); }
.pb-queue-editor { width: 100%; box-sizing: border-box; font: inherit; }
.pb-composer-drag { outline: 2px dashed var(--pb-accent); outline-offset: -4px; }
.pb-composer-box { position: relative; }
.pb-composer-input { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: var(--pb-space-2); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); background: var(--pb-surface); color: inherit; }
.pb-composer-actions { display: flex; align-items: center; gap: var(--pb-space-2); }
/* The composer sits at the bottom of the window: its menus (Stop options) open upward, right-aligned. */
.pb-composer-actions .pb-menu [role='menu'] { right: 0; bottom: 100%; top: auto; }
.pb-spacer { flex: 1; }
.pb-mentions { position: absolute; bottom: 100%; left: 0; z-index: 20; list-style: none; margin: 0 0 var(--pb-space-1); padding: var(--pb-space-1); min-width: 180px; background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); }
.pb-mentions [role='option'] { padding: var(--pb-space-1) var(--pb-space-2); cursor: pointer; border-radius: 4px; }
.pb-mentions .pb-mention-active, .pb-mentions [role='option']:hover { background: var(--pb-surface-2); }
.pb-chips { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--pb-space-1); flex-wrap: wrap; }
.pb-chip-file { display: inline-flex; align-items: center; gap: var(--pb-space-1); font-size: 12px; padding: 0 var(--pb-space-2); border-radius: 999px; background: var(--pb-info-bg); }
.pb-chip-error { color: var(--pb-danger); }
.pb-chip-progress { width: 40px; height: 6px; }
.pb-chip-remove { background: transparent; border: 0; cursor: pointer; color: inherit; min-width: 24px; min-height: 24px; }

.pb-bot-form { display: flex; flex-direction: column; gap: var(--pb-space-2); max-width: 640px; }
.pb-bot-form fieldset, .pb-avatar-picker { border: 1px solid var(--pb-border); border-radius: var(--pb-radius); padding: var(--pb-space-3); margin: 0; }
.pb-check { display: flex; align-items: center; gap: var(--pb-space-2); }
.pb-template-chips { display: flex; flex-wrap: wrap; gap: var(--pb-space-2); margin-bottom: var(--pb-space-3); }
.pb-template-chip { font-size: 10px; padding: var(--pb-space-1) var(--pb-space-3); border-radius: 999px; border: 1px solid var(--pb-border); background: var(--pb-surface); color: var(--pb-text); cursor: pointer; min-height: 32px; }
.pb-template-chip[aria-pressed='true'] { border-color: var(--pb-ivory); background: var(--pb-ivory); color: var(--pb-ivory-on); }
.pb-template-chip:focus-visible { outline: 2px solid var(--pb-focus); outline-offset: 2px; }
.pb-avatar-preview { display: flex; justify-content: center; margin-bottom: var(--pb-space-2); }
.pb-avatar-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pb-space-2); margin-bottom: var(--pb-space-2); }
.pb-avatar-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; background: var(--swatch); box-shadow: inset 0 0 0 2px var(--pb-bg); cursor: pointer; }
.pb-avatar-swatch[aria-pressed='true'] { border-color: var(--pb-text); }
.pb-avatar-swatch:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; }
.pb-avatar-note { margin: 0 0 var(--pb-space-2); text-align: center; font-size: 13px; }
.pb-avatar-swatch.none { width: auto; padding: 0 var(--pb-space-2); border-radius: 999px; background: var(--pb-surface-2); box-shadow: inset 0 0 0 1px var(--pb-border); color: var(--pb-text-muted); font-size: 12px; }
.pb-avatar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pb-space-3); margin-top: var(--pb-space-2); }
.pb-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pb-bot-settings { display: flex; flex-direction: column; gap: var(--pb-space-3); overflow: auto; }

/* Usage, settings, notifications (Task 15) */
.pb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pb-list { list-style: none; margin: 0 0 var(--pb-space-3); padding: 0; }
.pb-row { display: flex; justify-content: space-between; gap: var(--pb-space-3); padding: var(--pb-space-2) 0; border-bottom: 1px solid var(--pb-border); }
.pb-row p { margin: var(--pb-space-1) 0; }
.pb-actions { display: flex; gap: var(--pb-space-2); align-items: flex-start; flex-wrap: wrap; }
.pb-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.pb-table th { font: 500 11px var(--pb-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--pb-text-muted); }
.pb-table th, .pb-table td { text-align: left; padding: var(--pb-space-1) var(--pb-space-2); border-bottom: 1px solid var(--pb-border); }
.pb-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--pb-space-1) var(--pb-space-3); }
.pb-dl dd { margin: 0; }
.pb-storage-free { margin: 0 0 var(--pb-space-2); }
.pb-storage-free .pb-storage-gap { margin-left: var(--pb-space-2); }
.pb-storage-low { color: var(--pb-danger-text); }
.pb-storage-list { display: flex; flex-direction: column; gap: var(--pb-space-1); margin: 0 0 var(--pb-space-3); padding: 0; list-style: none; }
.pb-storage-row { display: flex; align-items: center; gap: var(--pb-space-3); }
.pb-storage-row .pb-storage-name { flex: 1; }
.pb-note { background: var(--pb-warn-bg); padding: var(--pb-space-2) var(--pb-space-3); border-radius: var(--pb-radius-lg); }
.pb-fieldset { border: 1px solid var(--pb-border); border-radius: var(--pb-radius-lg); margin: 0 0 var(--pb-space-3); }
.pb-range { display: flex; gap: var(--pb-space-2); margin-bottom: var(--pb-space-3); }
.pb-range [aria-pressed='true'] { background: var(--pb-accent); color: var(--pb-accent-text); border-color: transparent; font-weight: 600; }
.pb-chart { margin: 0 0 var(--pb-space-4); }
.pb-chart figcaption { font-weight: 600; font-size: 13px; margin-bottom: var(--pb-space-2); }
.pb-legend { display: flex; flex-wrap: wrap; gap: var(--pb-space-1) var(--pb-space-3); list-style: none; margin: 0 0 var(--pb-space-2); padding: 0; }
.pb-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.pb-bars { width: 100%; height: auto; max-height: 260px; }
.pb-grid { stroke: var(--pb-border); stroke-width: 1; }
.pb-axis { fill: var(--pb-text-muted); font: 10px var(--pb-mono); }
.pb-chart-readout { min-height: 1.5em; font-family: var(--pb-mono); color: var(--pb-text-muted); margin: var(--pb-space-1) 0; }
.pb-budget { margin-bottom: var(--pb-space-3); }
.pb-budget progress { width: 100%; display: block; }
.pb-popover header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--pb-space-2); }
.pb-notes { list-style: none; margin: 0; padding: 0; }
.pb-notes li { padding: var(--pb-space-2) 0; border-bottom: 1px solid var(--pb-border); }
.pb-notes .pb-unread a { font-weight: 600; }
.pb-notes a { color: var(--pb-text); }

/* Web login */
.pb-login { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100%; padding: var(--pb-space-4); box-sizing: border-box; overflow: hidden; isolation: isolate; }
.pb-login-form { position: relative; z-index: 1; width: 100%; max-width: 380px; padding: var(--pb-space-4); background: color-mix(in srgb, var(--pb-surface) 82%, transparent); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 80px rgb(0 0 0 / 0.6); }
/* The Penta wall behind the sign-in card: rows of tiles, every other row half a step over, darker toward the card and the edges. */
.pb-wall { position: absolute; inset: -40px -52px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; user-select: none; z-index: 0; }
.pb-wall-row { display: flex; gap: 8px; flex: none; }
.pb-wall-shift { margin-left: -52px; }
.pb-wall-tile { line-height: 0; }
/* On the wall the whole body glows in the bot colour (elsewhere it is a grey panel lit by a patch). */
.pb-wall .px-panel-top { stop-color: color-mix(in srgb, var(--c) 82%, white); }
.pb-wall .px-panel-base { stop-color: color-mix(in srgb, var(--c) 72%, black); }
.pb-wall::after { content: ''; position: fixed; inset: 0; background:
  radial-gradient(ellipse 340px 260px at 50% 50%, rgb(10 10 11 / 0.85), rgb(10 10 11 / 0.45) 70%, transparent 100%),
  radial-gradient(ellipse at 50% 50%, transparent 50%, rgb(10 10 11 / 0.75) 100%); }
.pb-login-form h1 { margin: 0 0 var(--pb-space-3); font-size: 20px; }
.pb-login-remember { display: flex; align-items: center; gap: var(--pb-space-2); margin-bottom: var(--pb-space-3); }
/* The web app's enrol screen and the banner buttons. */
.pb-enrol p { margin: 0 0 var(--pb-space-2); }
.pb-enrol-code { font-size: 18px; letter-spacing: 0.04em; }
.pb-banner .pb-btn { margin-left: var(--pb-space-2); }

/* Memory panel */
.pb-memory-panel { display: flex; flex-direction: column; gap: var(--pb-space-3); }
.pb-memory-meter { margin: 0; color: var(--pb-text-muted); font: 500 12px var(--pb-mono); }
.pb-memory-list { list-style: none; margin: 0; padding: 0; }
.pb-memory { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pb-space-2); padding: var(--pb-space-2) 0; border-bottom: 1px solid var(--pb-border); }
.pb-memory-text { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.pb-memory-actions { display: flex; flex-wrap: wrap; gap: var(--pb-space-1); }
.pb-memory-edit { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: flex-end; gap: var(--pb-space-2); }
.pb-memory-edit .pb-field { flex: 1 1 200px; margin-bottom: 0; }
.pb-skill-head { display: flex; flex: 1 1 160px; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pb-skill-name { font-size: 11px; overflow-wrap: anywhere; }
.pb-skill-text { flex: 1 1 100%; margin: 0; padding: var(--pb-space-2); background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius-lg); font: 12px var(--pb-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.pb-memory-add { margin-top: var(--pb-space-2); }

/* Tasks page and worktrees */
.pb-task-group { margin-bottom: 18px; }
.pb-task-group h2 { margin: 0 0 var(--pb-space-2); }
.pb-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pb-space-2); }
.pb-task-item { display: flex; align-items: flex-start; gap: var(--pb-space-3); }
.pb-task-item > :last-child { flex: 1; min-width: 0; }
.pb-worktree-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pb-space-3); }
.pb-worktree { background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius-lg); padding: var(--pb-space-3); display: flex; flex-direction: column; gap: var(--pb-space-2); }
.pb-worktree-path { margin: 0; overflow-wrap: anywhere; font: 12px var(--pb-mono); }

/* Graphite chat */
@keyframes pb-live { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.pb-live { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--pb-accent); animation: pb-live 1.6s ease-in-out infinite; }
.pb-live.static, .pb-tool.static .pb-tool-mark { animation: none; }
.pb-chat-status { display: flex; align-items: center; margin: 0; color: var(--pb-text-muted); font-size: 12px; white-space: nowrap; }
.pb-chat-chips { display: flex; flex-wrap: wrap; gap: var(--pb-space-2); }
.pb-chat-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--pb-radius-pill); background: var(--pb-surface); border: 1px solid var(--pb-border); font: 500 12.5px var(--pb-mono); color: var(--pb-text-chip); }
.pb-botchange { align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--pb-border); border-left-width: 1px; border-radius: 14px; font-size: 14px; background: var(--pb-surface); }
@supports (color: color-mix(in srgb, red 10%, transparent)) {
  .pb-botchange[style*='--pb-tint'] { border-color: color-mix(in srgb, var(--pb-tint) 30%, transparent); background: color-mix(in srgb, var(--pb-tint) 7%, transparent); }
}
.pb-handover-line { margin: 0; }
.pb-botchange-mark { display: inline-flex; }
.pb-botchange-arrow { color: var(--pb-text-muted); }
.pb-botchange-repos { font: 12.5px var(--pb-mono); }
.pb-routinechange em { font-style: normal; font-weight: 600; }
.pb-routinechange a { color: var(--pb-accent); }
.pb-reminder-time { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--pb-accent); cursor: pointer; text-decoration: underline dotted; }
.pb-reminder-time:disabled { cursor: default; }
.pb-bubble-in.pb-origin-reminder { background: var(--pb-surface-2); }
.pb-composer { display: flex; flex-direction: column; gap: var(--pb-space-2); padding: 0 24px 24px; border-top: 0; max-width: 868px; width: 100%; margin: 0 auto; }
.pb-composer-box { padding: 4px 8px 8px; border: 1px solid var(--pb-border-strong); border-radius: 14px; background: var(--pb-composer); }
.pb-composer-box:focus-within { border-color: var(--pb-focus); box-shadow: 0 0 0 1px var(--pb-focus); }
.pb-composer-input { display: block; padding: 8px 8px 4px; border: 0; border-radius: 0; background: transparent; resize: none; outline: none; font-size: 15px; line-height: 1.5; }
.pb-send { height: 36px; min-height: 36px; width: auto; padding: 0 14px; border-radius: 9px; font-size: 13px; background: var(--pb-accent); color: var(--pb-accent-text); }
.pb-send.pb-send-accent { background: var(--pb-accent); color: var(--pb-accent-text); }
.pb-send.pb-send-accent:disabled { background: color-mix(in srgb, var(--pb-bot, var(--pb-accent)) 30%, var(--pb-surface)); color: color-mix(in srgb, var(--pb-text) 55%, transparent); opacity: 1; }
.pb-composer-hint { margin: 0; text-align: center; font-size: 11.5px; color: var(--pb-text-muted); }
.pb-livechip-row { position: sticky; bottom: 12px; display: flex; justify-content: center; padding: 0 24px 8px; pointer-events: none; }
.pb-livechip { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 4px 6px 4px 14px; border: 1px solid var(--pb-border-strong); border-radius: var(--pb-radius-pill); background: var(--pb-surface); font-size: 13px; }
.pb-livechip-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pb-accent); animation: pb-live 1.6s ease-in-out infinite; }
.pb-livechip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-livechip-stop { height: 28px; min-height: 28px; padding: 0 12px; border-radius: var(--pb-radius-pill); font-size: 12px; }
.pb-app.static .pb-livechip-dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .pb-livechip-dot { animation: none; } }
.pb-needsbar-slot { max-width: 868px; width: 100%; margin: 0 auto; padding: 0 24px; }
.pb-needsbar { display: flex; align-items: center; gap: 10px; margin-bottom: var(--pb-space-2); padding: 8px 8px 8px 14px; border: 1px solid rgba(246, 194, 107, .3); border-radius: 12px; background: rgba(246, 194, 107, .08); font-size: 13px; }
.pb-needsbar-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f6c26b; }
.pb-needsbar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-needsbar-jump { flex: none; height: 28px; min-height: 28px; padding: 0 12px; font-size: 12px; }
.pb-attach { width: 36px; height: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--pb-border-strong); background: var(--pb-surface-2); color: var(--pb-text-muted); }
.pb-chip-file { height: 28px; background: var(--pb-surface); border: 1px solid var(--pb-border); color: var(--pb-text-soft); font-family: var(--pb-mono); }
.pb-suggestion-list .pb-btn { border-color: var(--pb-border-strong); border-radius: var(--pb-radius-pill); background: var(--pb-surface); }

.pb-routine-form { display: flex; flex-direction: column; max-width: 640px; }
.pb-routine-form .pb-fieldset { padding: var(--pb-space-3); }
.pb-routine-form input, .pb-routine-form select, .pb-routine-form textarea { background: var(--pb-surface); border: 1px solid var(--pb-border-strong); border-radius: 8px; }
.pb-choice { display: flex; align-items: center; gap: var(--pb-space-2); margin-bottom: var(--pb-space-1); }
.pb-field > label { display: flex; flex-direction: column; gap: var(--pb-space-1); }
.pb-time { font-family: var(--pb-mono); font-size: 12.5px; }

/* Routines */
.pb-routines-page .pb-page-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pb-space-3); }
.pb-routines-page .pb-page-head h1 { margin: 0; margin-right: auto; }
.pb-dim { opacity: .5; }
.pb-save-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pb-space-2); margin-top: var(--pb-space-3); }
/* Dots */
.pb-led { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; }
.pb-led-off { background: var(--pb-dot-off); }
.pb-led-idle { background: #5C5B63; }
.pb-led-on { background: var(--pb-bot, var(--pb-accent)); }
.pb-led-busy { background: var(--pb-bot, var(--pb-accent)); box-shadow: 0 0 6px var(--pb-bot, var(--pb-accent)); }
.pb-led-warn { background: var(--pb-warn); }
.pb-led-error { background: #E0736F; }
.pb-meter-dots { display: inline-flex; gap: 3px; align-items: center; }
.pb-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pb-dot-off); }
.pb-dot-lit { background: var(--pb-bot, var(--pb-accent)); }
.pb-dots-square .pb-dot { border-radius: 1px; }
.pb-trail { display: inline-flex; gap: 3px; align-items: center; }
.pb-trail-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--pb-bot, var(--pb-accent)); opacity: .25; animation: pb-trail 1s ease-in-out infinite; }
.pb-trail-still .pb-trail-dot { animation: none; }
.pb-trail-still .pb-trail-dot:nth-child(1) { opacity: 1; }
.pb-trail-still .pb-trail-dot:nth-child(2) { opacity: .6; }
.pb-trail-still .pb-trail-dot:nth-child(3) { opacity: .3; }
@keyframes pb-trail { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.pb-strip { display: inline-flex; gap: 3px; align-items: center; }
.pb-strip-dot { width: 5px; height: 5px; border-radius: 50%; }
.pb-strip-done { background: var(--pb-bot, var(--pb-accent)); }
.pb-strip-failed { background: #E0736F; }
.pb-strip-skipped { background: #3A3A42; }
.pb-strip-none { background: #1E1E23; }
.pb-logo { display: inline-grid; grid-template-columns: repeat(5, 5px); gap: 2px; }
.pb-app.static .pb-trail, .pb-app.static .pb-trail-dot { animation: none; }
.pb-app.static .pb-trail:not(.pb-trail-still) .pb-trail-dot { opacity: 1; }
.pb-host-row .pb-trail { margin-top: 6px; }
.pb-host-row-news { color: var(--pb-text-soft); }
.pb-wait-row .pb-wait-line { margin: 0; }
.pb-wait-row .pb-bubble-details { margin-top: 2px; }
.pb-notice-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pb-app.static .pb-led-busy { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .pb-trail, .pb-trail-dot { animation: none; } .pb-trail-dot { opacity: 1; } .pb-led-busy { box-shadow: none; } }
/* App pages, always visible at the bottom of the sidebar */
.pb-appnav { display: flex; flex-direction: column; gap: 2px; padding-top: var(--pb-space-2); border-top: 1px solid var(--pb-border); }
.pb-appnav-row { display: flex; align-items: center; gap: var(--pb-space-3); height: 36px; padding: 0 var(--pb-space-3); background: transparent; border: 0; border-radius: var(--pb-radius); color: var(--pb-text); font: inherit; text-align: left; cursor: pointer; }
.pb-appnav-row:hover, .pb-appnav-row:focus-visible { background: var(--pb-surface-2); color: var(--pb-text-strong); }
.pb-appnav-row[aria-current="page"] { background: var(--pb-surface-2); color: var(--pb-text-strong); font-weight: 600; }
.pb-appnav-row[aria-current="page"] svg { color: var(--pb-accent); }
.pb-appnav-label { flex: 1; min-width: 0; }
.pb-appnav-suffix { font-family: var(--pb-mono); font-size: 12px; font-weight: 400; color: var(--pb-text-muted); }
.pb-appnav-bad { color: var(--pb-danger-text); }
/* Find box (Cmd+K) */
.pb-find { display: flex; flex-direction: column; gap: var(--pb-space-3); }
.pb-find input { height: 38px; padding: 0 var(--pb-space-3); border-radius: var(--pb-radius); border: 1px solid var(--pb-border-strong); background: var(--pb-surface); color: var(--pb-text); font: inherit; }
.pb-find input:focus-visible { outline: 2px solid var(--pb-focus); outline-offset: 2px; }
.pb-find-list { display: flex; flex-direction: column; gap: var(--pb-space-2); max-height: min(60vh, 420px); overflow-y: auto; }
.pb-find-group h3 { margin: 0 0 var(--pb-space-1); }
.pb-find-item { display: flex; flex-direction: column; gap: 2px; padding: calc(var(--pb-space-2) - 1px) calc(var(--pb-space-3) - 1px); border: 1px solid transparent; border-radius: var(--pb-radius); color: var(--pb-text-strong); cursor: pointer; overflow-wrap: anywhere; }
.pb-find-item:hover, .pb-find-item[aria-selected="true"] { background: var(--pb-surface-2); }
.pb-find-item[aria-selected="true"] { border-color: var(--pb-accent); }
.pb-find-head { display: flex; align-items: center; gap: var(--pb-space-2); font-size: 12px; color: var(--pb-text-muted); }
.pb-find-bot { font-weight: 600; color: var(--pb-text-strong); }
.pb-find-time { margin-left: auto; }
.pb-find-snippet { color: var(--pb-text); }
.pb-find-snippet mark { background: var(--pb-accent); color: var(--pb-accent-text); border-radius: 2px; padding: 0 2px; }
.pb-find-note { margin: 0; padding: var(--pb-space-2) var(--pb-space-3); color: var(--pb-text-muted); }
.pb-cli-problem { color: var(--pb-danger-text); }
/* Machines (more than one): the picker above per-machine settings, the Machines rows, the sign-in card's code. */
.pb-machine-picker { max-width: 320px; margin-bottom: var(--pb-space-3); }
.pb-machine-row p { margin: 2px 0; }
.pb-machine-row .pb-machine-main { vertical-align: middle; }
.pb-signin-code { font-size: 20px; letter-spacing: 0.08em; user-select: all; }
.pb-routines-list { display: flex; flex-direction: column; gap: var(--pb-space-2); margin: 0; padding: 0; list-style: none; }
.pb-routines-list .pb-routine-row { background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius-lg); padding: var(--pb-space-3); }
.pb-routines-list .pb-routine-row:hover { background: var(--pb-surface-2); border-color: var(--pb-border-strong); }
.pb-routine-main, .pb-routine-state { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-routine-main { flex: 1; }
.pb-routine-runs { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: none; }
.pb-routine-runs-label { font-size: 10px; color: var(--pb-text-muted); }
.pb-routines-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--pb-space-4); align-items: start; }
@media (max-width: 800px) { .pb-routines-layout { grid-template-columns: minmax(0, 1fr); } .pb-upcoming { border-left: 0; border-top: 1px solid var(--pb-border); } }
.pb-upcoming { padding: var(--pb-space-3); background: var(--pb-panel); border-left: 1px solid var(--pb-border); }
.pb-upcoming h2 { margin: 0 0 var(--pb-space-3); }
.pb-upcoming ul { display: flex; flex-direction: column; gap: var(--pb-space-3); margin: 0; padding: 0; list-style: none; }
.pb-upcoming-row { display: flex; gap: var(--pb-space-2); min-width: 0; }
.pb-upcoming-time { flex: none; font: 12px var(--pb-mono); color: var(--pb-text-soft); }
.pb-upcoming-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; padding-left: var(--pb-space-2); border-left: 2px dotted var(--pb-border-strong); }
.pb-upcoming-name { min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-upcoming-bot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pb-text-muted); }
.pb-routine-state { flex: none; align-items: flex-end; font-size: 12.5px; color: var(--pb-text-soft); }
.pb-routines-list .pb-routine-name { flex: none; padding: 0; border: 0; background: transparent; color: var(--pb-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.pb-switch { flex: none; padding: 3px 6px; border: 1px solid var(--pb-border-strong); border-radius: 4px; background: transparent; color: var(--pb-text-soft); font-size: 10px; cursor: pointer; }
.pb-switch[aria-checked="true"] { background: var(--pb-accent); border-color: var(--pb-accent); color: var(--pb-accent-text); }
.pb-switch:disabled { opacity: .6; cursor: default; }
.pb-run-badge { display: inline-flex; align-items: center; gap: 6px; }
.pb-run-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pb-text-muted); }
.pb-run-succeeded { background: var(--pb-ok); }
.pb-run-failed { background: var(--pb-danger); }
.pb-run-skipped, .pb-run-cancelled { background: var(--pb-text-muted); }
.pb-run-running { background: var(--pb-accent); }
.pb-run-dot.pb-run-running { animation: pb-live 1.6s ease-in-out infinite; }
.pb-app.static .pb-run-dot { animation: none; }
.pb-routine-owner { display: inline-flex; align-items: center; gap: var(--pb-space-1); color: var(--pb-text-soft); }
.pb-routine-actions { display: flex; flex-wrap: wrap; gap: var(--pb-space-2); }
.pb-confirm-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pb-space-2); flex-basis: 100%; padding: var(--pb-space-2) var(--pb-space-3); background: var(--pb-surface-2); border: 1px solid var(--pb-border-strong); border-radius: var(--pb-radius); }
.pb-routine-section { margin-bottom: var(--pb-space-3); padding: 14px 16px; background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: 12px; }
.pb-routine-section h2 { margin: 0 0 var(--pb-space-3); }
.pb-routine-section ul { margin: 0; padding-left: var(--pb-space-4); }
.pb-routine-section .pb-run-list, .pb-routine-section .pb-link-paths { padding-left: 0; list-style: none; }
.pb-save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: var(--pb-space-2); margin-top: var(--pb-space-3); padding: var(--pb-space-2) var(--pb-space-3); background: var(--pb-surface-2); border: 1px solid var(--pb-border-strong); border-radius: var(--pb-radius); }
.pb-save-bar > :first-child { margin-right: auto; }
.pb-run-item { display: flex; align-items: center; gap: var(--pb-space-2); padding: 2px 0; }
.pb-run-open { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--pb-space-2); flex: 1; min-width: 0; padding: var(--pb-space-2); border: 0; border-radius: var(--pb-radius); background: transparent; color: var(--pb-text); font: inherit; text-align: left; cursor: pointer; }
.pb-run-open:hover { background: var(--pb-surface-2); }
.pb-link-paths li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pb-space-1); margin-bottom: var(--pb-space-1); }
@media (prefers-reduced-motion: reduce) { .pb-run-dot { animation: none !important; } }
.pb-trigger { display: flex; flex-direction: column; gap: var(--pb-space-3); margin-bottom: var(--pb-space-3); }
.pb-trigger label { display: flex; flex-direction: column; gap: var(--pb-space-1); }
.pb-trigger input, .pb-trigger select { font: inherit; padding: var(--pb-space-2); color: var(--pb-text); background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); }
.pb-files-panel { display: flex; flex-direction: column; gap: var(--pb-space-3); margin-top: var(--pb-space-3); }
.pb-files-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-files-row { display: flex; align-items: center; gap: var(--pb-space-1); padding: var(--pb-space-1); border-radius: var(--pb-radius); font-size: 13px; line-height: 1.4; }
.pb-files-row:hover { background: var(--pb-surface); }
.pb-files-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--pb-space-2); padding: var(--pb-space-1); background: transparent; border: 0; border-radius: 8px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pb-files-main:focus-visible { outline: 2px solid var(--pb-focus); outline-offset: 2px; }
.pb-files-text { min-width: 0; display: flex; flex-direction: column; }
.pb-files-jump { flex: none; font-size: 12px; color: var(--pb-text-muted); }
.pb-files-row .pb-menu > .pb-btn { width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; color: var(--pb-text-muted); }
.pb-files-total { font-size: 12px; }
.pb-files-empty { margin-top: var(--pb-space-3); }

/* Browser panel: the bot's tabs, its page letterboxed in a Pixel card, Stop automation. Tokens only. */
.pb-browser { display: flex; flex-direction: column; gap: var(--pb-space-3); margin-top: var(--pb-space-3); }
.pb-browser-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pb-space-2); }
.pb-browser-tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; width: 100%; }
.pb-browser-tab { display: flex; flex-direction: column; width: 100%; min-width: 0; padding: var(--pb-space-1) var(--pb-space-2); background: transparent; border: 1px solid transparent; border-radius: var(--pb-radius); color: var(--pb-text-soft); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pb-browser-tab:hover { background: var(--pb-surface); }
.pb-browser-tab[aria-current='true'] { background: var(--pb-surface); border-color: var(--pb-border-strong); color: var(--pb-text); cursor: default; }
.pb-browser-tab-title, .pb-browser-tab-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-browser-tab-url { font: 11.5px var(--pb-mono); color: var(--pb-text-muted); }
.pb-browser-open { width: 100%; }
.pb-browser-stage { position: relative; width: 100%; aspect-ratio: 1280 / 900; overflow: hidden; background: var(--pb-bg); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); touch-action: none; user-select: none; cursor: default; }
.pb-browser-video, .pb-browser-snapshot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.pb-browser-snapshot { pointer-events: none; }
.pb-browser-keys { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; resize: none; pointer-events: none; }
.pb-browser-status { margin: 0; font-size: 12.5px; }
.pb-browser-foot { display: flex; justify-content: flex-end; }
.pb-popout { display: flex; flex-direction: column; height: 100vh; padding: var(--pb-space-3) var(--pb-space-4); }
.pb-popout-head { flex: none; }
.pb-popout-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--pb-text); }
.pb-popout-gone { margin: var(--pb-space-4) 0; }
.pb-browser-popout { flex: 1; min-height: 0; }
.pb-browser-popout .pb-browser-head { flex-direction: row; align-items: center; }
.pb-browser-popout .pb-browser-tabs { flex-direction: row; flex: 1; min-width: 0; overflow-x: auto; }
.pb-browser-popout .pb-browser-tabs > li { flex: 0 1 240px; min-width: 120px; }
.pb-browser-popout .pb-browser-stage { flex: 1; min-height: 0; aspect-ratio: auto; }
.pb-desk-tag { flex: none; padding: 2px 4px; border-radius: 4px; background: var(--pb-border-strong); color: var(--pb-text-soft); font-family: var(--pb-mono); font-size: 9px; line-height: 1.2; }
.pb-desktop-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--pb-space-2); margin: var(--pb-space-1) var(--pb-space-3); padding: 6px 10px; border: 1px solid var(--pb-border); border-radius: var(--pb-radius-pill); color: var(--pb-text-soft); font-size: 12.5px; }
.pb-desktop-log-head { display: flex; justify-content: flex-end; margin-bottom: var(--pb-space-2); }
.pb-activity-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pb-space-2); margin-bottom: var(--pb-space-2); }
.pb-activity-chips { display: flex; flex: 1; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.pb-activity-chips .pb-btn { flex: none; white-space: nowrap; }
.pb-activity-chips [aria-pressed='true'] { background: var(--pb-border-strong); }
.pb-activity-group h3 { margin: var(--pb-space-2) 0 4px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-activity-group ul { margin: 0; padding: 0; list-style: none; }
.pb-activity-group li { display: grid; grid-template-columns: 58px 1fr auto; gap: 2px var(--pb-space-2); padding: 4px 0; font-size: 12.5px; }
.pb-activity-group li > span:nth-child(2) { overflow-wrap: anywhere; }
.pb-activity-kind { font-family: var(--pb-label); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pb-text-muted); line-height: 18px; }
.pb-activity-group li time { grid-column: 2 / 4; font-size: 11.5px; }
.pb-web-tag { flex: none; padding: 2px 4px; border-radius: 4px; background: var(--pb-border-strong); color: var(--pb-text-soft); font-family: var(--pb-mono); font-size: 9px; line-height: 1.2; }

/* Plan checklist: a strip above the composer while the turn runs, a folded line in the finished reply. */
.pb-plan { margin: var(--pb-space-1) 0; }
.pb-plan-strip { padding: 0 var(--pb-space-3); }
.pb-plan-toggle { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 26px; padding: 0 10px; background: transparent; border: 1px solid var(--pb-border); border-radius: var(--pb-radius-pill); color: var(--pb-text-muted); font-size: 12.5px; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.pb-plan-toggle:hover { border-color: var(--pb-border-strong); color: var(--pb-text-soft); }
.pb-plan-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-plan-list { list-style: none; margin: var(--pb-space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.pb-plan-item { display: flex; gap: 8px; color: var(--pb-text-muted); }
.pb-plan-mark { flex: none; width: 1em; text-align: center; }
.pb-plan-done .pb-plan-text { text-decoration: line-through; }
.pb-plan-active { color: var(--pb-text); }
.pb-card-access-why { color: var(--pb-text-muted); white-space: pre-wrap; }
.pb-card-secret-why, .pb-card-secret-replace { color: var(--pb-text-muted); white-space: pre-wrap; }
.pb-secrets ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pb-space-2); }
.pb-secret-row { display: flex; align-items: center; gap: var(--pb-space-3); }
.pb-secret-name { font-family: var(--pb-font-mono, monospace); flex: 1; }
.pb-notice-away { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px dashed var(--pb-border-strong); border-radius: 10px; font-size: 12px; color: var(--pb-text-soft); white-space: pre-line; }
.pb-away-tag { font-size: 10px; color: var(--pb-warn); }
.pb-plan-account { background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: 12px; padding: 14px 16px; margin-bottom: var(--pb-space-3); }
.pb-plan-account h3 { font-size: 14px; margin: var(--pb-space-3) 0 var(--pb-space-1); }
.pb-plan-account p { margin: 0; }
.pb-plan-account .pb-meter-dots { margin-top: var(--pb-space-2); }
.pb-meter { font: 12.5px var(--pb-mono); color: var(--pb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-meter-amber { color: var(--pb-warn-text); }
.pb-meter-red { color: var(--pb-danger); }
.pb-timeedit { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--pb-space-2); }
.pb-card-toolserver .pb-card-detail code { overflow-wrap: anywhere; }
.pb-row-actions { display: flex; gap: var(--pb-space-2); flex-wrap: wrap; align-items: flex-start; }

/* Settings: pixel tabs, card rows, linked apps */
.pb-settings .pb-tabs [role='tablist'] { gap: var(--pb-space-1); border-bottom: 0; margin-bottom: var(--pb-space-3); }
.pb-settings .pb-tabs [role='tab'] { font-size: 11px; padding: 7px 10px; border: 0; border-radius: 6px; color: var(--pb-text-muted); }
.pb-settings .pb-tabs [role='tab'][aria-selected='true'] { background: var(--pb-ivory); color: var(--pb-ivory-on); font-weight: 400; }
.pb-settings .pb-row { background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: 12px; padding: 16px 18px; margin-bottom: var(--pb-space-2); }
.pb-settings .pb-server-name { font-size: 16px; font-weight: 400; }
.pb-settings .pb-server-status { display: flex; align-items: center; gap: var(--pb-space-2); }
.pb-linked-head { display: flex; align-items: center; gap: var(--pb-space-2); margin-top: var(--pb-space-3); }
.pb-linked-head .pb-btn { margin-left: auto; }
.pb-linked-head h3 { margin: 0; font-size: 11px; font-weight: 400; color: var(--pb-text-muted); }
.pb-linked-app { margin-top: var(--pb-space-2); padding: 10px 12px; background: var(--pb-panel); border: 1px solid var(--pb-border); border-radius: 10px; }
.pb-linked-account { display: flex; align-items: center; gap: var(--pb-space-2); margin-top: var(--pb-space-1); }
.pb-linked-account .pb-btn { margin-left: auto; color: var(--pb-danger-text); }
/* Routine board (React Flow, base.css only): our own nodes, links and notices in the Pixel look. */
.pb-board { position: relative; display: flex; flex-direction: row; height: max(420px, calc(100vh - 240px)); margin-top: var(--pb-space-3); border: 1px solid var(--pb-border); border-radius: 12px; overflow: hidden; background-color: var(--pb-bg); }
.pb-board-toolbar { position: absolute; top: var(--pb-space-2); right: var(--pb-space-2); z-index: 5; display: flex; gap: var(--pb-space-1); }
.pb-board-toolbar .pb-btn { background: var(--pb-surface); }
.pb-board-notices { position: absolute; top: var(--pb-space-2); left: var(--pb-space-2); z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: var(--pb-space-1); max-width: 60%; pointer-events: none; }
.pb-board-notice { display: flex; align-items: center; gap: var(--pb-space-2); margin: 0; padding: 6px 10px; font-size: 13px; background: var(--pb-surface); border: 1px solid var(--pb-border-strong); border-radius: 10px; pointer-events: auto; }
.pb-board-notice-error { color: var(--pb-danger-text); }
.pb-board-canvas { position: relative; flex: 1; min-width: 0; min-height: 0; }
.pb-board .react-flow { --xy-background-color: transparent; background: transparent; }
.pb-board .react-flow__attribution { background: transparent; color: var(--pb-text-muted); }
.pb-board .react-flow__attribution a { color: var(--pb-text-muted); }
.pb-board-node { display: flex; align-items: center; gap: var(--pb-space-2); min-width: 160px; max-width: 208px; padding: 10px 12px; background: var(--pb-surface); border: 1px solid var(--pb-border-strong); border-radius: 10px; color: var(--pb-text); }
.pb-board-trigger { flex-direction: column; align-items: flex-start; gap: 2px; border-style: dashed; }
.pb-board-kicker { margin: 0; font-size: 10px; color: var(--pb-text-muted); }
.pb-board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.pb-board-trigger .pb-board-name { font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
.pb-board-bot .pb-led { margin-left: auto; }
.react-flow__node.selected .pb-board-node, .react-flow__node:focus-visible .pb-board-node { border-color: var(--pb-accent); }
.pb-board .react-flow__node:focus-visible { outline: none; }
.pb-board .react-flow__handle { width: 8px; height: 8px; background: var(--pb-surface-2); border: 1px solid var(--pb-text-muted); border-radius: 2px; }
.pb-board .react-flow__handle.connectable { cursor: crosshair; }
.pb-board .react-flow__handle.connectingto, .pb-board .react-flow__handle.valid { background: var(--pb-accent); }
.pb-board-link { stroke: var(--pb-text-muted); stroke-width: 1.5; }
.pb-board-link-fixed { stroke-dasharray: 4 4; }
.pb-board-link-selected, .react-flow__edge:focus-visible .pb-board-link { stroke: var(--pb-accent); stroke-width: 2; }
.pb-board .react-flow__edge:focus-visible { outline: none; }
.pb-board .react-flow__connection-path { stroke: var(--pb-accent); stroke-width: 1.5; }
.pb-board-mark { position: absolute; padding: 0 4px; font: 12px var(--pb-mono); color: var(--pb-text-soft); background: var(--pb-surface); border: 1px solid var(--pb-border-strong); border-radius: 4px; pointer-events: none; }
.pb-board-picker-at { position: absolute; z-index: 6; }
.pb-board-picker { min-width: 180px; max-height: 260px; overflow: auto; padding: var(--pb-space-2); background: var(--pb-surface); border: 1px solid var(--pb-border-strong); border-radius: 10px; }
.pb-board-picker .pb-board-kicker { padding: 0 var(--pb-space-1) var(--pb-space-1); }
.pb-board-picker p.pb-muted { margin: 0; padding: var(--pb-space-1); font-size: 13px; }
.pb-board-picker ul { margin: 0; padding: 0; list-style: none; }
.pb-board-pick { display: flex; align-items: center; gap: var(--pb-space-2); width: 100%; padding: 6px var(--pb-space-1); background: transparent; border: 0; border-radius: 6px; color: var(--pb-text); text-align: left; cursor: pointer; }
.pb-board-pick:hover, .pb-board-pick:focus-visible { background: var(--pb-surface-2); }

.pb-board-run { font: inherit; font-size: 12px; padding: 4px 8px; color: var(--pb-text); background: var(--pb-surface); border: 1px solid var(--pb-border-strong); border-radius: 8px; }
.pb-board-picker-none { align-self: center; padding: 0 var(--pb-space-2); font-size: 12px; }
.pb-board-bot-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.pb-board-meta { font-size: 11px; white-space: nowrap; }
.pb-board-times { font-size: 10px; color: var(--pb-text-soft); }
.pb-board-dim { opacity: 0.45; }
.pb-board-lit .pb-board-link { stroke: var(--pb-accent); stroke-width: 2; }
.pb-board-inspector { position: relative; flex: 0 0 min(320px, 45%); box-sizing: border-box; overflow: auto; margin: var(--pb-space-2); margin-left: 0; padding: var(--pb-space-3); background: var(--pb-surface); border: 1px solid var(--pb-border-strong); border-radius: 10px; }
.pb-inspector-close { position: absolute; top: 6px; right: 8px; padding: 0 6px; font-size: 18px; line-height: 1.2; color: var(--pb-text-muted); background: transparent; border: 0; cursor: pointer; }
.pb-inspector-head { display: flex; align-items: center; gap: var(--pb-space-2); margin-bottom: var(--pb-space-2); padding-right: 24px; }
.pb-inspector-bot { padding: 0; font: inherit; font-weight: 600; color: var(--pb-text); background: transparent; border: 0; cursor: pointer; text-decoration: underline; }
.pb-inspector-title { margin: 0 0 var(--pb-space-2); padding-right: 24px; font-weight: 600; }
.pb-inspector-steps { margin: 0; padding: 0; list-style: none; }
.pb-inspector-step { padding: var(--pb-space-2) 0; border-top: 1px solid var(--pb-border); }
.pb-inspector-step p { margin: 0; }
.pb-inspector-text { margin: 2px 0 var(--pb-space-2); font: 12px var(--pb-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.pb-inspector-actions { display: flex; gap: var(--pb-space-2); margin-top: var(--pb-space-2); }
.pb-board-inspector textarea { width: 100%; box-sizing: border-box; }

/* Calendar */
.pb-calendar-page .pb-page-head { flex-wrap: wrap; }
.pb-cal-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--pb-space-2); }
.pb-cal-nav .pb-range { margin: 0 0 0 var(--pb-space-2); }
.pb-cal-range { margin-right: var(--pb-space-2); font-size: 12px; color: var(--pb-text-soft); }
.pb-cal-note { display: flex; align-items: center; gap: var(--pb-space-3); margin: 0 0 var(--pb-space-3); }
.pb-cal { --pb-cal-gutter: 40px; overflow-x: auto; border: 1px solid var(--pb-border); border-radius: var(--pb-radius-lg); background: var(--pb-bg); }
.pb-cal-heads, .pb-cal-body { display: grid; grid-template-columns: var(--pb-cal-gutter) repeat(var(--pb-cal-days), minmax(0, 1fr)); min-width: calc(var(--pb-cal-gutter) + var(--pb-cal-days) * 84px); }
.pb-cal-heads { border-bottom: 1px solid var(--pb-border); }
.pb-cal-dayhead { padding: var(--pb-space-2); font-size: 11px; text-transform: uppercase; color: var(--pb-text-muted); border-left: 1px solid var(--pb-border); }
.pb-cal-dayhead[aria-current='date'] { color: var(--pb-accent-text); background: var(--pb-accent); }
.pb-cal-scroll { max-height: calc(100vh - 220px); min-height: 240px; overflow-y: auto; min-width: calc(var(--pb-cal-gutter) + var(--pb-cal-days) * 84px); }
.pb-cal-hour { box-sizing: border-box; padding: 2px 6px 0 0; text-align: right; font-size: 10px; color: var(--pb-text-muted); }
.pb-cal-day { position: relative; border-left: 1px solid var(--pb-border); background-image: repeating-linear-gradient(to bottom, var(--pb-border) 0 1px, transparent 1px 48px); }
.pb-cal-today { background-color: var(--pb-panel); }
.pb-cal-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--pb-danger); z-index: 3; pointer-events: none; }
.pb-cal-now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; background: var(--pb-danger); }
.pb-cal-event { position: absolute; box-sizing: border-box; min-width: 0; z-index: 1; }
.pb-cal-event:hover, .pb-cal-event:focus-within { z-index: 4; }
.pb-cal-event-btn { display: flex; align-items: flex-start; gap: 4px; width: 100%; height: 100%; box-sizing: border-box; padding: 2px 4px; overflow: hidden; border: 1px solid var(--pb-bot, var(--pb-accent)); border-radius: 3px; background: var(--pb-bot, var(--pb-accent)); color: var(--pb-bot-on, var(--pb-accent-text)); font: 11px/14px var(--pb-font); text-align: left; cursor: pointer; }
.pb-cal-event-btn:focus-visible { outline: 2px solid var(--pb-focus); outline-offset: 1px; }
.pb-cal-time { flex: none; font-size: 10px; }
.pb-cal-mark { flex: none; font-weight: 700; }
.pb-cal-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Side-by-side events are narrow: drop the avatar so the title still shows. */
.pb-cal-event { container-type: inline-size; }
@container (max-width: 90px) { .pb-cal-event-btn > :not(.pb-cal-time):not(.pb-cal-mark):not(.pb-cal-title) { display: none; } }
.pb-cal-failed .pb-cal-event-btn { background: var(--pb-danger); border-color: var(--pb-danger); color: var(--pb-accent-text); }
.pb-cal-muted .pb-cal-event-btn { background: var(--pb-bot-soft, var(--pb-surface-2)); color: var(--pb-text-soft); }
.pb-cal-next .pb-cal-event-btn { background: transparent; border-style: dashed; color: var(--pb-bot, var(--pb-text-soft)); opacity: .6; }
.pb-cal-live .pb-cal-event-btn { box-shadow: 0 0 8px var(--pb-bot, var(--pb-accent)); animation: pb-cal-glow 1.6s ease-in-out infinite; }
@keyframes pb-cal-glow { 0%, 100% { box-shadow: 0 0 3px var(--pb-bot, var(--pb-accent)); } 50% { box-shadow: 0 0 10px var(--pb-bot, var(--pb-accent)); } }
.pb-app.static .pb-cal-live .pb-cal-event-btn { animation: none; }
@media (prefers-reduced-motion: reduce) { .pb-cal-live .pb-cal-event-btn { animation: none; } }
.pb-cal-card { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; display: flex; flex-direction: column; gap: 2px; width: max-content; max-width: 240px; padding: var(--pb-space-2) var(--pb-space-3); background: var(--pb-surface); border: 1px solid var(--pb-border-strong); border-radius: var(--pb-radius); color: var(--pb-text); font-size: 12px; pointer-events: none; overflow-wrap: anywhere; }
.pb-cal-card-right { left: auto; right: 0; }
.pb-cal-card-above { top: auto; bottom: calc(100% + 4px); }
.pb-cal-card-title { color: var(--pb-text-strong); }
.pb-cal-card-error { color: var(--pb-danger-text); white-space: pre-wrap; }
.pb-team-progress { display: flex; gap: var(--pb-space-2); margin: 2px 0 0 var(--pb-space-2); font: 12px var(--pb-mono); color: var(--pb-text-muted); }
.pb-team-progress-name { font-weight: 600; }
.pb-task-state { margin: 2px 0 0; font: 12px var(--pb-mono); color: var(--pb-text-muted); }

/* Teammates in conversation: a speech bubble under the teammate's name; finished tasks as result cards. */
.pb-teammate { align-self: flex-start; max-width: 85%; border-radius: 14px 14px 14px 4px; font-size: 14px; line-height: 1.5; }
.pb-teammate .pb-bubble-head { color: var(--pb-text-muted); }
.pb-teammate-fold > summary { cursor: pointer; white-space: pre-wrap; color: var(--pb-text); }
.pb-teammate-fold[open] > summary { display: none; }
.pb-result-card { align-self: stretch; max-width: 640px; padding: var(--pb-space-2) var(--pb-space-3); border: 1px solid var(--pb-border); border-left-width: 3px; border-radius: var(--pb-radius); background: var(--pb-surface); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.pb-result-head { display: flex; align-items: baseline; gap: var(--pb-space-2); margin-bottom: var(--pb-space-1); }
.pb-result-head .pb-bubble-time { margin-left: auto; font-size: 12px; color: var(--pb-text-muted); }
.pb-result-icon { font-weight: 700; }
.pb-result-done { border-left-color: var(--pb-ok); }
.pb-result-done .pb-result-icon { color: var(--pb-ok); }
.pb-result-partial, .pb-result-blocked { border-left-color: var(--pb-warn); }
.pb-result-failed { border-left-color: var(--pb-danger); }
.pb-result-failed .pb-result-icon { color: var(--pb-danger); }
.pb-result-blocked .pb-result-icon, .pb-result-partial .pb-result-icon { color: var(--pb-warn-text); }
.pb-result-unblock { margin: var(--pb-space-1) 0; }

/* Avatars. A generated avatar is a Pixel Penta (one SVG per bot): data-mood picks the animation, --c the bot colour.
   Changes are frame by frame (step-end) unless noted; anything that moves a pixel pattern moves in whole-unit steps so
   the pixels stay on the grid. The colour patch is the one smooth movement: it moves light, not dots.
   Durations scale by --pt-k, which lowfps doubles. */
.pb-av { flex: none; display: inline-block; vertical-align: middle; line-height: 0; }

.penta { overflow: visible; display: block; --pp-speed: 1; --pp-size: 1; }
.penta * { transform-box: fill-box; transform-origin: center; }

/* Pixels. The pattern tiles: the body's dots are a white mask over the panel and patch, face pixels are ink, the
   thought dots and handoff plus are 80% of the bot colour; the !, tear, halo and badge glyph have their own. */
.px-dot-mask { fill: #fff; }
.px-dot-c { fill: var(--c); opacity: .8; }
.px-dot-ink { fill: #0E1016; }
.px-dot-red { fill: #FF5A4E; }
.px-dot-tear { fill: #5AB8FF; }
.px-dot-gold { fill: #F4D06F; }
.px-dot-glyph { fill: var(--c); }
.px-acc-box { fill: #0E1016; }

/* The panel: grey-white, lightest on row 0 and dimmer to row 10. The patch: the bot colour, fading out (Penta.tsx). */
.px-panel-top { stop-color: hsl(228 6% 76%); }
.px-panel-base { stop-color: hsl(228 6% 46%); }
.px-patch-stop { stop-color: var(--c); }
.px-patch-stop-2 { stop-color: var(--c2); }

/* Drift: two eased back-and-forths with different periods, so the patch's path never quite repeats. x is
   6.5 + 3·sin(2πt / 17 s) and y is 5.2 + 2.4·sin(2πt / 11.9 s + 1 rad); the negative delays start each at that phase.
   The base transforms are where the patch rests when animations are off. The mood sets --pp-speed and the size and
   lean on .px-pm. Working's second patch runs the same path mirrored around the centre, (13 − x, 11 − y), at .85 size. */
.px-px, .px-px2 { transform: translateX(6.5px); animation: px-dx calc(8.5s * var(--pt-k, 1) / var(--pp-speed)) cubic-bezier(.37, 0, .63, 1) calc(-4.25s * var(--pt-k, 1) / var(--pp-speed)) infinite alternate; }
.px-py, .px-py2 { transform: translateY(5.2px); animation: px-dy calc(5.95s * var(--pt-k, 1) / var(--pp-speed)) cubic-bezier(.37, 0, .63, 1) calc(-4.87s * var(--pt-k, 1) / var(--pp-speed)) infinite alternate; }
.px-px2 { animation-name: px-dx2; }
.px-py2 { transform: translateY(5.8px); animation-name: px-dy2; }
.px-pm { transform: translate(var(--pp-dx, 0), var(--pp-dy, 0)) scale(var(--pp-size)); }
.px-pm2 { transform: scale(calc(var(--pp-size) * .85)); }
/* Two lights: a two-colour bot always has the second patch, in --c2, on the mirrored path; both are .85 size. The base
   transforms put them at rest upper left (4.7, 4.2) and lower right (8.3, 6.8), so a still bot shows both colours. */
.penta.two .px-pm { transform: translate(var(--pp-dx, 0), var(--pp-dy, 0)) scale(calc(var(--pp-size) * .85)); }
.penta.two .px-px { transform: translateX(4.7px); }
.penta.two .px-py { transform: translateY(4.2px); }
.penta.two .px-px2 { transform: translateX(8.3px); }
.penta.two .px-py2 { transform: translateY(6.8px); }

/* Blink: the open eyes swap to the closed frame for a moment. */
.px-blink { opacity: 0; animation: px-off calc(4.2s * var(--pt-k, 1)) step-end infinite; }
.px-blink + .px-open { animation: px-on calc(4.2s * var(--pt-k, 1)) step-end infinite; }
.px-mouth-alt { opacity: 0; }

/* thinking: three pixels to the upper right light in turn */
.px-x-think path { animation: px-seq calc(1.2s * var(--pt-k, 1)) step-end infinite; }
.px-x-think path:nth-child(2) { animation-delay: calc(.3s * var(--pt-k, 1)); }
.px-x-think path:nth-child(3) { animation-delay: calc(.6s * var(--pt-k, 1)); }

/* talking: the mouth switches between one cell and the open mouth */
.penta[data-mood="talking"] .px-mouth { animation: px-on2 calc(.36s * var(--pt-k, 1)) step-end infinite; }
.penta[data-mood="talking"] .px-mouth-alt { animation: px-off2 calc(.36s * var(--pt-k, 1)) step-end infinite; }

/* The patch per mood (§2.7): speed, size and lean. idle is the default. */
.penta[data-mood="waiting"] { --pp-speed: .7; }
.penta[data-mood="thinking"] { --pp-speed: 1.6; --pp-size: .95; --pp-dx: 1.6px; --pp-dy: -1.6px; }
.penta[data-mood="talking"] { --pp-speed: 1.3; }
.penta[data-mood="working"] { --pp-speed: 3; --pp-size: 1.05; }
.penta[data-mood="attention"] { --pp-speed: 2.4; --pp-size: 1.7; }
.penta[data-mood="happy"] { --pp-speed: 1.8; }
.penta[data-mood="sad"] { --pp-speed: .5; --pp-size: .8; }
.penta[data-mood="sleepy"] { --pp-speed: .5; --pp-size: .85; }
.penta[data-mood="sleeping"] { --pp-speed: .25; --pp-size: .6; }
.penta[data-mood="handoff"] { --pp-speed: 1.3; --pp-dx: 2px; --pp-dy: -1px; }

/* talking: the patch beats with the mouth */
.penta[data-mood="talking"] .px-patch { animation: px-beat calc(.37s * var(--pt-k, 1)) ease-in-out infinite; }

/* waiting: the eyes glance left and right */
.penta[data-mood="waiting"] .px-eyes { animation: px-glance calc(1.6s * var(--pt-k, 1)) step-end infinite; }

/* attention: hop and flash, and the big patch surges; the red ! stays put */
.penta[data-mood="attention"] .px-body { animation: px-hop calc(.5s * var(--pt-k, 1)) step-end infinite; }
.penta[data-mood="attention"] .px-shape { animation: px-flash calc(.5s * var(--pt-k, 1)) step-end infinite; }
.penta[data-mood="attention"] .px-patch { animation: px-surge calc(.9s * var(--pt-k, 1)) ease-in-out infinite; }

/* happy: hop */
.penta[data-mood="happy"] .px-body { animation: px-hop calc(.7s * var(--pt-k, 1)) step-end infinite; }

/* sad: the colour drains and a tear drips */
.penta[data-mood="sad"] .px-body { filter: saturate(.35) brightness(.8); }
.px-x-tear path { animation: px-drip calc(1.2s * var(--pt-k, 1)) step-end infinite; }

/* sleepy: a slow blink */
.penta[data-mood="sleepy"] .px-blink, .penta[data-mood="sleepy"] .px-blink + .px-open { animation-duration: calc(7s * var(--pt-k, 1)); }

/* sleeping: the panel and patch dim to 62%; the Z blinks */
.penta[data-mood="sleeping"] .px-shape { filter: brightness(.62); }
.px-x-z { animation: px-seq calc(3s * var(--pt-k, 1)) step-end infinite; }

/* handoff: a little plus steps off to the upper right, a unit at a time, and fades */
.px-x-mini { animation: px-fly calc(1.6s * var(--pt-k, 1)) step-end infinite; }

/* Main: the five gold corner pixels twinkle in turn. Negative delays start the turn order at once. */
.px-halo path { animation: px-twinkle calc(3s * var(--pt-k, 1)) step-end infinite; }
.px-halo path:nth-child(2) { animation-delay: calc(-2.4s * var(--pt-k, 1)); }
.px-halo path:nth-child(3) { animation-delay: calc(-1.8s * var(--pt-k, 1)); }
.px-halo path:nth-child(4) { animation-delay: calc(-1.2s * var(--pt-k, 1)); }
.px-halo path:nth-child(5) { animation-delay: calc(-.6s * var(--pt-k, 1)); }

@keyframes px-dx { from { transform: translateX(3.5px); } to { transform: translateX(9.5px); } }
@keyframes px-dy { from { transform: translateY(2.8px); } to { transform: translateY(7.6px); } }
@keyframes px-dx2 { from { transform: translateX(9.5px); } to { transform: translateX(3.5px); } }
@keyframes px-dy2 { from { transform: translateY(8.2px); } to { transform: translateY(3.4px); } }
@keyframes px-beat { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.1); } }
@keyframes px-surge { 0%, 100% { transform: scale(1); } 50% { transform: scale(.75); } }
@keyframes px-on { 0% { opacity: 1; } 92% { opacity: 0; } 96% { opacity: 1; } }
@keyframes px-off { 0% { opacity: 0; } 92% { opacity: 1; } 96% { opacity: 0; } }
@keyframes px-on2 { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes px-off2 { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes px-seq { 0% { opacity: .15; } 33% { opacity: 1; } 66% { opacity: .15; } }
@keyframes px-glance { 0% { transform: translateX(-1px); } 33.333% { transform: translateX(0); } 66.667% { transform: translateX(1px); } }
@keyframes px-hop { 0% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes px-flash { 0% { opacity: 1; } 50% { opacity: .55; } }
@keyframes px-drip { 0% { transform: translateY(0); opacity: 1; } 33% { transform: translateY(1px); } 66% { transform: translateY(2px); opacity: .5; } 90% { opacity: 0; } }
@keyframes px-fly { 0% { transform: translate(0, 0); opacity: 1; } 25% { opacity: .75; } 33.333% { transform: translate(1px, -1px); } 50% { opacity: .5; } 66.667%, 100% { transform: translate(2px, -2px); } 75% { opacity: .25; } 100% { opacity: 0; } }
@keyframes px-twinkle { 0%, 100% { opacity: 1; } 20% { opacity: .55; } }

/* Off screen or hidden document: paused. Many visible: half speed. */
.pb-av.paused .penta, .pb-av.paused .penta * { animation-play-state: paused !important; }
.pb-av.lowfps { --pt-k: 2; }

/* Reduce Motion (the app setting or the OS): no motion; each mood keeps its still face, and the !, Z and tear stay
   visible. The patch rests at (6.5, 5.2) at its mood's size: the lean is dropped and working's second patch hidden.
   A two-colour bot keeps both patches, at their rest points (see Two lights). */
.pb-av.static .penta, .pb-av.static .penta * { animation: none !important; transition: none !important; }
.pb-av.static .penta { --pp-dx: 0 !important; --pp-dy: 0 !important; }
.pb-av.static .penta:not(.two) .px-px2 { display: none; }
@media (prefers-reduced-motion: reduce) {
  .penta *, .penta { animation: none !important; }
  .penta { --pp-dx: 0 !important; --pp-dy: 0 !important; }
  .penta:not(.two) .px-px2 { display: none; }
}

/* Uploaded picture: a rounded square with the status ring. The ring colour repeats the status text. */
.pb-av-img { --ring: var(--pb-text-muted, #8E929B); position: relative; border-radius: 30%; box-shadow: 0 0 0 3px var(--ring); overflow: hidden; }
.pb-av-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pb-av-img.mood-thinking, .pb-av-img.mood-talking, .pb-av-img.mood-working, .pb-av-img.mood-handoff { --ring: var(--pb-accent, #C9F36B); }
.pb-av-img.mood-attention { --ring: var(--pb-danger, #FF5A4E); }
.pb-av-img.mood-happy { --ring: #6FD39A; }
.pb-av-img.mood-sad { --ring: #EF9A9A; }
.pb-av-img.mood-sleepy, .pb-av-img.mood-waiting { --ring: #B3A8E6; }
.pb-av-img.mood-working, .pb-av-img.mood-thinking, .pb-av-img.mood-talking, .pb-av-img.mood-handoff { animation: av-pulse calc(1.4s * var(--pt-k, 1)) ease-in-out infinite; }
.pb-av-img.mood-attention { animation: av-pulse-glow calc(1.4s * var(--pt-k, 1)) ease-in-out infinite; }
@keyframes av-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--ring); } 50% { box-shadow: 0 0 0 5px var(--ring); } }
@keyframes av-pulse-glow { 0%, 100% { box-shadow: 0 0 0 3px var(--ring), 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px var(--ring), 0 0 10px var(--ring); } }
.pb-av-img.mood-sleeping img { filter: grayscale(1); opacity: 0.7; }
.pb-av-img.paused { animation-play-state: paused; }
.pb-av-img.static { animation: none; }