/* In-game dashboard — arrangement C (visuals left). Reuses gomud.css tokens. */
#dashboard {
  display: grid;
  position: relative;
  height: 100%;
  width: 100%;
  gap: var(--dash-gap, 6px) 0;   /* row-gap kept, col-gap=0 (splitter tracks handle spacing) */
  padding: 6px;
  box-sizing: border-box;
  background: #0e0a06;   /* deep ink-black field behind the cards, offset from the brown chrome */
  /* session strip on top; below it five columns: left | ls-splitter | center | rs-splitter | right
     so each panel can size independently and side columns are drag-resizable */
  grid-template-columns:
    minmax(180px, var(--col-l-w, 22vw))
    6px
    minmax(0, 1fr)
    6px
    minmax(180px, var(--col-r-w, 22vw));
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "sess sess sess   sess sess"
    "left ls   center rs   right";
}

/* Independent vertical column stacks */
.dash-col {
  display: flex; flex-direction: column;
  gap: var(--dash-gap, 6px);
  min-height: 0; min-width: 0;
}
#dash-col-left   { grid-area: left; }
#dash-col-center { grid-area: center; }
#dash-col-right  { grid-area: right; }

/* Column-width splitters (wide mode only) */
.dash-splitter { z-index: 5; align-self: stretch; }
.dash-splitter.col { cursor: col-resize; background: transparent; }
.dash-splitter.col:hover,
.dash-splitter.col.dragging { background: rgba(201,168,106,0.30); }
#dash-splitter-l { grid-area: ls; }
#dash-splitter-r { grid-area: rs; }
/* Hidden whenever not in the 3-column wide layout */
#dashboard[data-mode="rail"] .dash-splitter,
#dashboard[data-mode="phone"] .dash-splitter { display: none; }

/* Session strip */
#dash-session {
  grid-area: sess;
  display: flex; align-items: center; gap: 12px;
  padding: 4px 10px;
  background: linear-gradient(var(--bar-top, #241813), var(--bar-bottom, #1a110b));
  border: 1px solid var(--panel-border, #3a2a18);
  border-radius: 5px;
  font-family: var(--font-serif, Georgia, serif); font-size: 0.85rem;
  color: var(--text-primary, #d2c3a4);
}
#dash-session .sess-name { color: var(--title-gold, #e8d2a0); font-style: italic; font-weight: bold; }
#dash-session .sess-conn { color: var(--online-green, #7fae6a); }
#dash-session .sess-spacer { margin-left: auto; }
#dash-session button { font-size: 0.75rem; }

/* Panel shell */
.dash-panel {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--panel-bg, #201913);
  border: 1px solid var(--antique-gold, #b89047);   /* warm gold outline on all cards */
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(201,168,106,0.10);
  overflow: hidden;
}
.dash-panel-head {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: linear-gradient(var(--ink-deep, #2b231d), var(--bar-bottom, #1a110b));
  border-bottom: 2px solid var(--panel-border, #3a2a18);   /* colored per column below */
  cursor: grab;            /* header is the drag handle for swap */
  user-select: none;
}
.dash-panel-head .ph-title {
  font-family: var(--font-serif, Georgia, serif); font-style: italic;
  font-size: 0.82rem; color: var(--vellum, #d9c39e);
}

/* Column identity / pop — copper (left), antique gold (center), madder (right) */
#dash-col-left   .dash-panel-head { border-bottom-color: var(--copper, #4a6b5d); }
#dash-col-center .dash-panel-head { border-bottom-color: var(--antique-gold, #b89047); }
#dash-col-right  .dash-panel-head { border-bottom-color: var(--madder, #8c3b30); }

/* Parchment cards: vellum fill + brown leather outline + dark text, for
   contrast against the dark leather cards. (session strip / command input /
   each column's middle card.) The two panels keep their dark labeled headers. */
#dash-session,
#panel-cmd,
#panel-vitals,
#panel-status {
  background: var(--vellum, #d9c39e);
  /* Tooled-red leather frame (palette red). The old dark #3a2a18 was tuned for
     the light vellum fill but vanished against the dark page outside the card,
     so these read as frameless. The warm red reads clearly against both. */
  border-color: var(--frame-red, #d6694e);
  color: var(--ink-deep, #2b231d);
}

/* Ink cards: a near-neutral faded black for the map + automation panels.
   The whole palette is warm, so every dark token (even the #0e0a06 field)
   carries a brown tint that reads brown at near-black; this drops the warmth
   so it actually reads as faded black/ink. */
#panel-map,
#panel-trig {
  background: #0c0c0d;
}
#panel-vitals .dash-panel-body,
#panel-status .dash-panel-body { color: var(--ink-deep, #2b231d); }
#panel-status .status-line { color: var(--ink-deep, #2b231d); }
#panel-status .status-empty { color: #6e5a38; }
#dash-session .sess-name { color: var(--ink-deep, #2b231d); }
#dash-session .sess-conn { color: #356b3a; }

.dash-panel-head .ph-btns { margin-left: auto; display: flex; gap: 4px; }
.dash-panel-head .ph-btn {
  width: 18px; height: 18px; line-height: 16px; text-align: center;
  font-size: 11px; cursor: pointer; border-radius: 3px;
  color: var(--brass-text, #3b2a10);
  background: var(--brass-grad, radial-gradient(circle at 34% 26%, #f4dd92, #cb9f42 46%, #8a6620));
  border: 1px solid var(--brass-border, #5e431a);
}
.dash-panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; }

/* Feed + command (center stack) */
#panel-feed { flex: 1 1 0; }                          /* dominant */
#panel-feed .dash-panel-body { overflow: hidden; }   /* xterm manages its own scroll */
/* Terminal MUST be a bounded box, else xterm can't virtualize scrollback and
   re-renders every accumulated line on each write (progressive sluggishness). */
#panel-feed #terminal { width: 100%; height: 100%; }
#panel-feed #terminal .xterm,
#panel-feed #terminal .xterm-viewport,
#panel-feed #terminal .xterm-screen { height: 100%; }
#panel-cmd { flex: 0 0 auto; }
#panel-cmd .dash-panel-body { display: flex; padding: 4px; }

/* Per-panel stack proportions (flex-basis 0 → grow ratios set the heights;
   splitters will later tune these --f-* vars). Left: Map / Vitals / Scene;
   Right: Chat / Status / Triggers (~equal). */
/* Left column auto-balances by content: the Map absorbs slack (large when the
   inventory is short) but keeps a min; the Inventory panel sizes to its content
   (grows with a long eq list — e.g. extra-arms — and scrolls only once the Map
   reaches its min). Vitals stays content-compact. */
#panel-map    { flex: 1 1 0; min-height: 150px; }    /* fills / yields slack */
#panel-vitals { flex: 0 0 auto; }                    /* content-compact; grows with party rows */
#panel-art    { flex: 0 1 auto; min-height: 120px; } /* inventory: content-sized, grows w/ eq list */
#panel-chat   { flex: var(--f-chat, 1) 1 0; }
#panel-status { flex: var(--f-status, 1) 1 0; }
#panel-trig   { flex: var(--f-trig, 1) 1 0; }

/* Reserved slots (sub-projects #2/#3) */
.dash-slot .dash-panel-body {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary, #9a8a6a); font-family: var(--font-serif, Georgia, serif);
  font-style: italic; font-size: 0.8rem; text-align: center; padding: 8px;
}

/* Collapsed panels show only the header; !important overrides per-id flex rules */
.dash-panel.collapsed .dash-panel-body { display: none; }
.dash-panel.collapsed { flex: 0 0 auto !important; }

/* Drag-to-swap highlight and grab cursor */
.dash-panel.drag-over {
  outline: 2px dashed var(--antique-gold, #b89047);
  outline-offset: -2px;
}
.dash-panel-head[draggable="true"] { cursor: grab; }

/* ------------------------------------------------------------------ */
/* Responsive reflow — Rail mode (700–1100px)                          */
/* ------------------------------------------------------------------ */

/* Default: hide the responsive chrome until JS activates a mode */
#dash-rail,
#dash-tabbar,
#dash-drawer { display: none; }

#dashboard[data-mode="rail"] {
  grid-template-columns: minmax(0, 2.3fr) minmax(240px, 1fr);
  grid-template-areas:
    "sess sess"
    "center rail";
}

#dashboard[data-mode="rail"] #dash-col-left,
#dashboard[data-mode="rail"] #dash-col-right { display: none; }

/* Rail container lives inside #dashboard at grid-area "rail" */
#dash-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel-bg, #201913);
  border: 1px solid var(--panel-border, #3a2a18);
  border-radius: 6px;
  overflow: hidden;
}

.rail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  background: linear-gradient(var(--ink-deep, #2b231d), var(--bar-bottom, #1a110b));
  border-bottom: 1px solid var(--panel-border, #3a2a18);
}

.rail-tab {
  font-size: 0.72rem;
  padding: 3px 8px;
  opacity: 0.7;
}

.rail-tab.rail-active {
  opacity: 1;
  box-shadow: inset 0 2px 4px rgba(74, 52, 16, 0.6),
              inset 0 -1px 1px rgba(255, 246, 212, 0.4);
}

/* Rail body: panels inside, only .rail-active is shown */
.rail-body {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Panels in the rail body are hidden unless JS sets display:"" */
/* (JS drives visibility directly via panel.style.display)        */

/* ------------------------------------------------------------------ */
/* Responsive reflow — Phone mode (< 700px)                           */
/* ------------------------------------------------------------------ */

#dashboard[data-mode="phone"] {
  grid-template-columns: 1fr;
  grid-template-areas:
    "sess"
    "center";
}

#dashboard[data-mode="phone"] #dash-col-left,
#dashboard[data-mode="phone"] #dash-col-right { display: none; }

/* Bottom tab-bar — appended to body (outside #dashboard) so
   position:fixed is not clipped by the grid container           */
#dash-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  background: linear-gradient(var(--bar-top, #241813), var(--bar-bottom, #1a110b));
  border-top: 2px solid var(--gold-rule, var(--antique-gold, #b89047));
  height: 48px;
}

.tabbar-btn {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 18px;
  color: var(--ink-gold, var(--antique-gold, #b89047));
  cursor: pointer;
  transition: background 0.1s;
}

.tabbar-btn.active {
  background: rgba(201, 168, 106, 0.15);
}

/* Slide-up drawer — also appended outside #dashboard */
#dash-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 48px;   /* leave room for the tab-bar */
  z-index: 49;
  height: 62vh;
  transform: translateY(100%);
  transition: transform 0.2s ease;
  background: var(--panel-bg, #201913);
  border-top: 2px solid var(--gold-rule, var(--antique-gold, #b89047));
  display: flex;
  flex-direction: column;
}

#dash-drawer.open {
  transform: translateY(0);
}

.drawer-head {
  display: flex;
  justify-content: flex-end;
  padding: 4px;
  background: linear-gradient(var(--ink-deep, #2b231d), var(--bar-bottom, #1a110b));
  border-bottom: 1px solid var(--panel-border, #3a2a18);
}

.drawer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* Panel moved into drawer fills the body */
.drawer-body .dash-panel {
  flex: 1 1 0;
  min-height: 0;
}

/* ------------------------------------------------------------------ */
/* WinBox pop-out — leather theme overlay                              */
/* ------------------------------------------------------------------ */
.winbox.dash-winbox {
  background: var(--ink-deep, #2b231d);
  border: 1px solid var(--gold-rule, #c9a86a);
}
.winbox.dash-winbox .wb-header {
  background: linear-gradient(
    var(--bar-top, #241813),
    var(--bar-bottom, #1a110b)
  );
}
.winbox.dash-winbox .wb-title {
  font-family: var(--font-serif, Georgia, serif);
  color: var(--vellum, #d9c39e);
}
.winbox.dash-winbox .wb-body {
  background: var(--panel-bg, #201913);
}

/* ------------------------------------------------------------------ */
/* Inventory Panel (#panel-art)                                        */
/* ------------------------------------------------------------------ */

/* Tab strip */
.inv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 4px 0;
  background: linear-gradient(var(--ink-deep, #2b231d), var(--bar-bottom, #1a110b));
  border-bottom: 1px solid var(--panel-border, #3a2a18);
}

/* Individual tab buttons — brass pill style */
.inv-tab.brass {
  flex: 1;
  text-align: center;
  font-size: 10px;
  padding: 4px 2px;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  border: 1px solid var(--brass-border, #5e431a);
  color: var(--brass-text, #3b2a10);
  background: var(--brass-grad,
    radial-gradient(circle at 34% 26%, #f4dd92, #cb9f42 46%, #8a6620));
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  filter: brightness(0.72);
  opacity: 0.88;
  transition: filter 0.08s, opacity 0.08s;
}
.inv-tab.brass:hover {
  filter: brightness(0.85);
  opacity: 1;
}
.inv-tab.brass.active {
  filter: brightness(1);
  opacity: 1;
  box-shadow: inset 0 2px 4px rgba(74, 52, 16, 0.6),
              inset 0 -1px 1px rgba(255, 246, 212, 0.4);
}

/* 5-column grid of item tiles */
.inv-grid {
  display: grid;
  /* Responsive: tiles stay compact (~46px) and the column count reflows
     with the card width, so the panel packs more icons into less space
     and doesn't crowd the vitals/map cards when the layout shrinks. */
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px 4px;
  padding: 8px;
  overflow: auto;
  flex: 1 1 0;
  min-height: 0;
}

/* A cell: icon tile stacked above label */
.inv-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* The square tile — antique leather frame, icon centered */
.inv-tile {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--brass-border, #5e431a);
  border-radius: 5px;
  background: radial-gradient(circle at 35% 28%, #2a2016, #150f08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  color: var(--vellum, #d9c39e);     /* currentColor feeds SVG strokes */
  transition: border-color 0.08s;
  overflow: hidden;
}
.inv-tile:hover { border-color: var(--gold-rule, #c9a86a); }

/* Icons are SVG strings from itemIconSVG — size them proportionally */
.inv-tile > svg {
  width: 58%;
  height: 58%;
  stroke: currentColor;
  stroke-width: 6;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Painted raster icons from itemIconURL — fill more of the tile than the
   line-glyphs (58%); transparent PNGs sit on the tile gradient. */
.inv-tile > img.inv-img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  pointer-events: none;   /* clicks fall through to the tile action menu */
}

/* Empty slot — dashed outline, no icon */
.inv-tile.empty {
  background: #140f08;
  border-style: dashed;
  border-color: #3a2a18;
  cursor: default;
}
.inv-tile.empty:hover { border-color: #3a2a18; }

/* Slot label below the tile */
.inv-slab {
  font-size: 8px;
  color: var(--text-secondary, #9a8a6a);
  line-height: 1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Mutation-gated slots get a green tint */
.inv-slab.mut { color: var(--copper, #7fae6a); }

/* Corner quantity badge — backpack stacks only (N identical items) */
.inv-qty {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 8px;
  color: var(--vellum, #d9c39e);
  background: rgba(0, 0, 0, 0.55);
  border-radius: 2px;
  padding: 0 2px;
  pointer-events: none;
  line-height: 1.3;
}

/* Vertical charge meter — thin bar on the left edge of a tile */
.inv-charge {
  position: absolute;
  left: 3px;
  top: 6px;
  bottom: 6px;
  width: 4px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
}
.inv-charge-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--ink-gold, #c9a86a);
  border-radius: 2px;
  transition: height 0.2s ease;
}

/* Empty-tab message */
.inv-empty-msg {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #9a8a6a);
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: 0.8rem;
  padding: 16px 8px;
  text-align: center;
}

/* ── Inventory right-click context menu ─────────────────────────────────── */
.inv-ctx {
  position: fixed;
  min-width: 120px;
  background: var(--ink-deep, #1a110b);
  border: 1px solid var(--gold-rule, #c9a86a);
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  z-index: 9000;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 12px;
}
.inv-ctx .ctx-header {
  padding: 5px 10px 4px;
  font-size: 10px;
  font-style: italic;
  color: var(--text-secondary, #9a8a6a);
  border-bottom: 1px solid rgba(58, 42, 24, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  pointer-events: none;
  user-select: none;
}
.inv-ctx .ctx-row {
  padding: 5px 10px;
  color: var(--vellum, #d9c39e);
  cursor: pointer;
  white-space: nowrap;
}
.inv-ctx .ctx-row:hover,
.inv-ctx .ctx-row.ctx-default {
  background: var(--panel-border, #4a6b5d);
  color: var(--ink-gold, #e8d2a0);
}
.inv-ctx .ctx-sep {
  border-top: 1px solid rgba(58, 42, 24, 0.7);
}

/* ------------------------------------------------------------------ */
/* Automation Panel (#panel-trig)                                      */
/* ------------------------------------------------------------------ */

/* Tab strip — flat flex row, madder underline on active (right-col accent) */
.auto-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 4px 4px 0;
  background: linear-gradient(var(--ink-deep, #2b231d), var(--bar-bottom, #1a110b));
  border-bottom: 1px solid var(--panel-border, #3a2a18);
  flex-shrink: 0;
}

.auto-tab {
  flex: 1;
  text-align: center;
  font-size: 10px;
  padding: 4px 2px;
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  color: var(--text-secondary, #9a8a6a);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.08s, border-color 0.08s;
  white-space: nowrap;
  user-select: none;
}
.auto-tab:hover {
  color: var(--vellum, #d9c39e);
}
.auto-tab.active {
  color: var(--vellum, #d9c39e);
  border-bottom-color: var(--madder, #8c3b30);
}

/* Add-bar — thin strip with a brass "+ New" button */
.auto-addbar {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  background: var(--panel-bg, #201913);
  border-bottom: 1px solid var(--panel-border, #3a2a18);
  flex-shrink: 0;
}

.auto-add {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--brass-text, #3b2a10);
  background: var(--brass-grad,
    radial-gradient(circle at 34% 26%, #f4dd92, #cb9f42 46%, #8a6620));
  border: 1px solid var(--brass-border, #5e431a);
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  filter: brightness(0.85);
  transition: filter 0.08s;
  user-select: none;
}
.auto-add:hover {
  filter: brightness(1);
}

/* Scrolling list host */
.auto-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 0;
}

/* Individual row tile — brass-bordered, gold hover */
.auto-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--brass-border, #5e431a);
  border-radius: 4px;
  background: radial-gradient(circle at 35% 28%, #2a2016, #150f08);
  cursor: pointer;
  transition: border-color 0.08s, background 0.08s;
  overflow: hidden;
  /* Hold natural height — without this, the queue bar + divider steal vertical
     space and the rows (flex-shrink:1 by default) compress, cramming the row
     text. Keep rows rigid so the list scrolls (overflow-y:auto) instead. */
  flex-shrink: 0;
}
.auto-row:hover {
  border-color: var(--ink-gold, #c9a86a);
  background: radial-gradient(circle at 35% 28%, #332818, #1c1209);
}

/* Key / alias name — mono, gold */
.auto-row .name {
  font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
  font-size: 11px;
  color: var(--ink-gold, #c9a86a);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Command summary — muted, ellipsis overflow */
.auto-row .sum {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 10px;
  font-style: italic;
  color: var(--text-secondary, #9a8a6a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
}

/* Enable-pill toggle — small inline toggle, wired in later phases */
.auto-tog {
  flex-shrink: 0;
  width: 28px;
  height: 13px;
  border-radius: 7px;
  background: #3a2a18;
  border: 1px solid var(--panel-border, #3a2a18);
  position: relative;
  cursor: pointer;
  transition: background 0.12s;
}
.auto-tog::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-secondary, #9a8a6a);
  transition: left 0.12s, background 0.12s;
}
.auto-tog.on {
  background: var(--madder, #8c3b30);
  border-color: var(--madder, #8c3b30);
}
.auto-tog.on::after {
  left: 16px;
  background: var(--vellum, #d9c39e);
}

/* Empty / coming-soon message in the list */
.auto-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #9a8a6a);
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: 0.8rem;
  padding: 16px 8px;
  text-align: center;
}

/* ── Automation context menu — mirrors .inv-ctx exactly ─────────────────── */
.auto-ctx {
  position: fixed;
  min-width: 120px;
  background: var(--ink-deep, #1a110b);
  border: 1px solid var(--gold-rule, #c9a86a);
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  z-index: 9000;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 12px;
}
/* Shared row/header/sep styles from .inv-ctx also apply to .auto-ctx */
.auto-ctx .ctx-header {
  padding: 5px 10px 4px;
  font-size: 10px;
  font-style: italic;
  color: var(--text-secondary, #9a8a6a);
  border-bottom: 1px solid rgba(58, 42, 24, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  pointer-events: none;
  user-select: none;
}
.auto-ctx .ctx-row {
  padding: 5px 10px;
  color: var(--vellum, #d9c39e);
  cursor: pointer;
  white-space: nowrap;
}
.auto-ctx .ctx-row:hover,
.auto-ctx .ctx-row.ctx-default {
  background: var(--panel-border, #4a6b5d);
  color: var(--ink-gold, #e8d2a0);
}
.auto-ctx .ctx-sep {
  border-top: 1px solid rgba(58, 42, 24, 0.7);
}

/* ── Automation modal overlay ────────────────────────────────────────────── */
.auto-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.auto-modal {
  position: relative;
  z-index: 1;
  background: var(--panel-bg, #201913);
  border: 1px solid var(--antique-gold, #b89047);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75);
  min-width: 280px;
  max-width: 420px;
  width: 90vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.auto-modal-head {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: linear-gradient(var(--ink-deep, #2b231d), var(--bar-bottom, #1a110b));
  border-bottom: 2px solid var(--madder, #8c3b30);
}

.auto-modal-title {
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--vellum, #d9c39e);
  flex: 1;
}

.auto-modal-close {
  cursor: pointer;
  color: var(--text-secondary, #9a8a6a);
  font-size: 12px;
  padding: 0 2px;
}
.auto-modal-close:hover { color: var(--vellum, #d9c39e); }

.auto-modal-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Field groups inside the modal */
.auto-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.auto-field label {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-secondary, #9a8a6a);
}
.auto-field input,
.auto-field textarea {
  background: #150f08;
  border: 1px solid var(--brass-border, #5e431a);
  border-radius: 3px;
  color: var(--vellum, #d9c39e);
  font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
  font-size: 12px;
  padding: 5px 7px;
  outline: none;
  transition: border-color 0.08s;
}
.auto-field input:focus,
.auto-field textarea:focus {
  border-color: var(--ink-gold, #c9a86a);
}
.auto-field textarea {
  resize: vertical;
  min-height: 52px;
}

.auto-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--panel-border, #3a2a18);
  background: linear-gradient(var(--bar-bottom, #1a110b), var(--ink-deep, #2b231d));
}

.auto-modal-cancel,
.auto-modal-save {
  font-size: 11px;
  padding: 4px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  border: 1px solid var(--brass-border, #5e431a);
  color: var(--brass-text, #3b2a10);
  background: var(--brass-grad,
    radial-gradient(circle at 34% 26%, #f4dd92, #cb9f42 46%, #8a6620));
  filter: brightness(0.82);
  transition: filter 0.08s;
}
.auto-modal-save {
  filter: brightness(1);
}
.auto-modal-cancel:hover,
.auto-modal-save:hover {
  filter: brightness(1.1);
}

/* ── IBM Plex Mono (self-hosted, OFL) — used by the game terminal ────────── */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/IBMPlexMono-Bold.woff2') format('woff2');
}

/* Plug xterm.css's hardcoded cold-black surfaces (viewport behind the
   scrollbar / below short content, and the IME composition box). #terminal
   prefix wins on specificity over xterm.css's `.xterm .xterm-viewport`,
   regardless of stylesheet load order, and survives an xterm upgrade. */
#terminal .xterm-viewport   { background-color: #0c0c0d; }
#terminal .composition-view { background: #2b231d; color: #e8d2a0; }

/* Automation macro/alias "sticker" chips — compact oval pills (mirrors the
   Status & Conditions cond-chips). Shows only the shortcut/F-key; full
   expansion is the hover title. Wraps to fit many in the panel. */
.auto-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px; align-content: flex-start; }
.auto-chip {
  font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 0.72rem;
  padding: 2px 9px; border-radius: 12px;
  border: 1px solid var(--panel-border, #3a2a18); background: #1d1610;
  color: var(--ink-gold, #c9a86a);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: border-color 0.1s, box-shadow 0.1s, color 0.1s;
}
/* Type accents — mirror the Status & Conditions panel's two-tone chips so the
   automation tabs read with the same polish. Macros = warm brass (F-key action
   keys); aliases = teal/copper, tying them to the status-panel buff chips. */
.auto-chip[data-auto-type="macro"] {
  border-color: var(--brass-border, #5e431a);
  color: var(--title-gold, #e8d2a0);
}
.auto-chip[data-auto-type="alias"] {
  border-color: var(--copper, #4a6b5d);
  background: #16201c;
  color: #8fb3a6;
}

/* ── Action queue UI — queued/pending trigger rows, badges, status bar ──── */

/* Pending row: red glow border, slightly warmer background */
.auto-row.pending {
  background: #2a1d12;
  border-color: var(--madder, #8c3b30);
  box-shadow: 0 0 0 1px rgba(214, 105, 78, 0.35), 0 0 9px rgba(214, 105, 78, 0.22);
}
.auto-row.pending .name {
  color: var(--title-gold, #e8d2a0);
}

/* FIFO position badge — circular, red by default, brass for position 1 */
.auto-badge {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background: var(--madder, #8c3b30);
  color: #fff;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.68rem;
  font-weight: 700;
}
/* Brass "next to fire" badge */
.auto-badge.next {
  background: radial-gradient(circle at 34% 26%, #f4dd92, #cb9f42 46%, #8a6620);
  color: var(--brass-text, #3b2a10);
}

/* Dashed divider between queued and normal trigger rows */
.auto-qsep {
  border: none;
  border-top: 1px dashed rgba(184, 144, 71, 0.3);
  margin: 3px 2px;
  flex-shrink: 0;
}

/* Queue status bar — shown above the trigger list when queue is non-empty */
.auto-qbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  background: #241a10;
  border-bottom: 1px solid var(--brass-border, #5e431a);
  flex-shrink: 0;
}
.auto-qcount {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 0.74rem;
  color: var(--title-gold, #e8d2a0);
}
.auto-qcd {
  font-size: 0.66rem;
  color: var(--text-secondary, #9a8a6a);
  font-style: italic;
  flex: 1;
}
/* Brass Clear button */
.auto-qclear {
  font-size: 0.68rem;
  color: var(--brass-text, #3b2a10);
  background: radial-gradient(circle at 34% 26%, #f4dd92, #cb9f42 46%, #8a6620);
  border: 1px solid var(--brass-border, #5e431a);
  border-radius: 4px;
  padding: 2px 9px;
  cursor: pointer;
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  transition: filter 0.08s;
}
.auto-qclear:hover {
  filter: brightness(1.1);
}
.auto-chip:hover {
  border-color: var(--gold-rule, #c9a86a);
  box-shadow: 0 0 0 1px rgba(201, 168, 106, 0.25), 0 1px 4px rgba(0, 0, 0, 0.4);
}