/* ========= CRT Terminal Skin ========= */

/* --- Theme tokens --- */
.terminal.crt.cyan {
  --crt-ink: #9eeaff;          /* text color */
  --crt-ink-dim: #75cce6;      /* muted */
  --crt-bloom: rgba(46,213,255,.75);
  --crt-bloom-2: rgba(46,213,255,.35);
  --crt-screen-top: #0a102a;   /* screen gradient top */
  --crt-screen-bot: #050817;   /* screen gradient bottom */
  --crt-bezel-1: #0c1030;      /* housing */
  --crt-bezel-2: #0b0f2c;
  --crt-bezel-3: #070b1e;
  --crt-grid: rgba(34,211,238,.055); /* optional grid/glow */
}

.terminal.crt.amber {
  --crt-ink: #ffdca8;
  --crt-ink-dim: #e7c78e;
  --crt-bloom: rgba(255,210,130,.75);
  --crt-bloom-2: rgba(255,210,130,.35);
  --crt-screen-top: #0d0a1e;
  --crt-screen-bot: #090616;
  --crt-bezel-1: #17120b;
  --crt-bezel-2: #1b160e;
  --crt-bezel-3: #0f0c08;
  --crt-grid: rgba(255,200,120,.06);
}

/* --- Monitor housing (bezel) --- */
.terminal.crt {
  position: relative;
  border-radius: 26px;
  border: 2px solid rgba(255,255,255,.06);
  background:
    radial-gradient(140% 180% at 50% -40%, rgba(255,255,255,.08) 0%, transparent 40%),
    linear-gradient(180deg, var(--crt-bezel-1), var(--crt-bezel-2) 50%, var(--crt-bezel-3));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 20px 60px rgba(0,0,0,.6);
  overflow: hidden;
}

/* hide modern title bar for authentic CRT; remove this if you want it */
.terminal.crt .term-title { display: none; }

/* --- Screen --- */
.terminal.crt .term-body {
  position: relative;
  height: 520px; /* a bit taller like the ref image */
  padding: 18px 16px;
  border-radius: 18px;
  margin: 18px;
  color: var(--crt-ink);
  background:
    /* subtle vignette curvature */
    radial-gradient(120% 100% at 50% 10%, rgba(255,255,255,.06), transparent 40%),
    linear-gradient(180deg, var(--crt-screen-top), var(--crt-screen-bot));
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.65),
    inset 0 0 4px rgba(255,255,255,.06);
  text-shadow:
    0 0 6px var(--crt-bloom),
    0 0 18px var(--crt-bloom-2);
  font-feature-settings: "liga" 0; /* crisper monospace look */
}

/* scanlines + very light grid/phosphor */
.terminal.crt .term-body::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05), rgba(255,255,255,.05) 1px,
      transparent 1px, transparent 3px
    ),
    linear-gradient(180deg, transparent, rgba(0,0,0,.15) 60%, transparent 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), transparent 65%),
    /* optional blueprint-ish grid — very faint to fit your cyan theme */
    linear-gradient(transparent 97%, var(--crt-grid) 97%),
    linear-gradient(90deg, transparent 97%, var(--crt-grid) 97%);
  background-size:
    auto,
    auto,
    auto,
    24px 24px,
    24px 24px;
  mix-blend-mode: overlay;
  opacity: .18;
  pointer-events: none;
}

/* reflective glare */
.terminal.crt .term-body::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(180% 55% at 50% -10%, rgba(255,255,255,.1), transparent 35%),
    radial-gradient(150% 70% at -20% 40%, rgba(255,255,255,.04), transparent 45%),
    radial-gradient(150% 70% at 120% 60%, rgba(255,255,255,.04), transparent 45%);
  pointer-events: none;
  opacity: .7;
}

/* --- Status/input bar styled like CRT “status” band --- */
.terminal.crt .prompt-line {
  margin: 0 18px 18px;
  border-radius: 12px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.25)),
    linear-gradient(180deg, var(--crt-screen-top), var(--crt-screen-bot));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.6),
    0 0 12px var(--crt-bloom-2);
}

/* --- Typography & colors --- */
.terminal.crt .line { color: var(--crt-ink); }
.terminal.crt .userprefix,
.terminal.crt .botprefix,
.terminal.crt .prefix {
  color: var(--crt-ink);
  opacity: .95;
  text-shadow: 0 0 8px var(--crt-bloom);
}

/* dim “meta” lines (e.g., # session reset) */
.terminal.crt .line .meta,
.terminal.crt .status { color: var(--crt-ink-dim); }

/* fenced code blocks (transcripts) look like CRT panels */
.terminal.crt pre, .terminal.crt code {
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 40px rgba(0,0,0,.6);
  color: var(--crt-ink);
  text-shadow:
    0 0 6px var(--crt-bloom),
    0 0 12px var(--crt-bloom-2);
}

/* --- Cursor vibe (block blink) --- */
@keyframes crtCursor { 0%, 49% { opacity: 1 } 50%, 100% { opacity: .1 } }
.terminal.crt #msg {
  caret-color: transparent; /* hide native caret */
  position: relative;
}
.terminal.crt #msg::after {
  content: "█";
  position: absolute; right: -10px; animation: crtCursor 1.2s steps(1) infinite;
  color: var(--crt-ink); text-shadow: 0 0 8px var(--crt-bloom);
}

/* gentle flicker to sell the tube */
@keyframes crtFlicker { 0%, 100% { opacity: .98 } 50% { opacity: 1 } }
.terminal.crt .term-body { animation: crtFlicker 6s ease-in-out infinite; }

/* Overscan shadow around the screen area */
.terminal.crt::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 26px;
  box-shadow: inset 0 0 120px rgba(0,0,0,.65);
  pointer-events: none;
}
/* ===== Fixes: input styling + page background + sizing ===== */

/* Dark, full-viewport page so no white floor below the terminal */
html, body { height: 100%; }
body {
  background: radial-gradient(900px 600px at 80% -10%, #111735, #0b0f22) !important;
  color: #e6f1ff;
}

/* Center container width a bit and remove excess gutters */
.container { max-width: 1200px; margin: 24px auto; padding: 0 16px; }

/* Make the CRT monitor fill nicely on desktop without huge whitespace */
.terminal.crt { width: min(96vw, 1200px); margin: 12px auto; }

/* Input: kill the white background and native styles (all engines) */
.terminal.crt .prompt-line input#msg {
  background: transparent !important;
  color: var(--crt-ink) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font: inherit;
  padding: 0;
  height: 22px;
  appearance: none;            /* Firefox/modern */
  -webkit-appearance: none;    /* Safari/Chrome */
}

/* Placeholder & autofill colors to keep it cyber, not gray/white */
.terminal.crt .prompt-line input#msg::placeholder {
  color: color-mix(in oklab, var(--crt-ink) 45%, transparent);
  opacity: .8;
}
/* Chrome autofill hack so it doesn't flash white/yellow */
.terminal.crt .prompt-line input#msg:-webkit-autofill,
.terminal.crt .prompt-line input#msg:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--crt-ink) !important;
  transition: background-color 9999s ease-in-out 0s; /* effectively transparent */
  caret-color: var(--crt-ink);
}

/* Prompt bar should be dark as the screen, not glossy blue */
.terminal.crt .prompt-line {
  background:
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(0,0,0,.35)),
    linear-gradient(180deg, var(--crt-screen-top), var(--crt-screen-bot));
  border: 1px solid rgba(255,255,255,.06);
  margin: 0 18px 18px;
  border-radius: 12px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.65);
}

/* Optional: reduce the bottom glow if it reads as a white shelf */
.terminal.crt { box-shadow: 0 20px 60px rgba(0,0,0,.65); }
.terminal.crt::after { box-shadow: inset 0 0 120px rgba(0,0,0,.7); }

/* Keep the prefixes readable on dark input line */
.terminal.crt .prefix,
.terminal.crt .userprefix,
.terminal.crt .botprefix {
  color: var(--crt-ink) !important;
  text-shadow: 0 0 8px var(--crt-bloom);
}
/* ===== Full-screen CRT + larger "tech" font ===== */
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1000px 700px at 70% -10%, #141a3f, #0b0f22) !important;
}

.container { width: 100%; height: 100%; margin: 0; padding: 0; }

/* Fill the viewport; use CSS Grid so the screen grows and the prompt sticks at the bottom */
.terminal.crt {
  width: 100vw;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  box-shadow: none;                /* remove outer drop shadow when full screen */
  display: grid;
  grid-template-rows: 1fr auto;    /* screen + prompt bar */
}

/* Screen area */
.terminal.crt .term-body {
  margin: 0;
  border-radius: 0;
  height: auto;                    /* grid controls height */
  padding: min(2vh, 22px) min(2vw, 24px);
  font-family: "Share Tech Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(16px, 1.6vw, 24px);    /* larger, scales with viewport */
  line-height: 1.5;
  letter-spacing: 0.02em;          /* subtle tech feel */
}

/* Prompt bar pinned to bottom, dark like the screen */
.terminal.crt .prompt-line {
  margin: 0;
  border-radius: 0;
  padding: 12px min(2vw, 24px);
  position: sticky;
  bottom: 0;
}

/* Input styling (kill white field) */
.terminal.crt .prompt-line input#msg {
  background: transparent !important;
  color: var(--crt-ink) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  font: inherit;
  padding: 0;
  height: 1.6em;
  appearance: none;
  -webkit-appearance: none;
}
.terminal.crt .prompt-line input#msg::placeholder {
  color: color-mix(in oklab, var(--crt-ink) 45%, transparent);
  opacity: .8;
}
/* Chrome autofill */
.terminal.crt .prompt-line input#msg:-webkit-autofill,
.terminal.crt .prompt-line input#msg:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--crt-ink) !important;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: var(--crt-ink);
}

/* Bigger block-caret to match font size */
.terminal.crt #msg::after {
  right: 0;
  transform: translateX(6px);
  font-size: 1.1em;
}

/* Slight spacing between lines for readability at larger sizes */
.terminal.crt .line { margin-bottom: 0.35em; }

/* On small screens, tighten a bit */
@media (max-width: 640px) {
  .terminal.crt .term-body { font-size: clamp(15px, 3.2vw, 19px); }
}
/* ===== Bigger prompt bar + attention caret ===== */

/* Larger, comfy prompt bar */
.terminal.crt .prompt-line{
  position: relative;
  margin: 0 18px 18px;
  border-radius: 12px;
  padding: 16px 18px;         /* bigger! */
  min-height: 64px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(0,0,0,.35)),
    linear-gradient(180deg, var(--crt-screen-top), var(--crt-screen-bot));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 30px rgba(0,0,0,.65);
}

/* Input scales with body font and stays dark */
.terminal.crt .prompt-line input#msg{
  background: transparent !important;
  color: var(--crt-ink) !important;
  border: 0 !important; outline: none !important; box-shadow: none !important;
  font: inherit;
  line-height: 1.6;
  height: 1.6em;              /* visually matches printed lines */
  appearance: none; -webkit-appearance: none;
  caret-color: var(--crt-ink) !important;   /* show native caret while typing */
}
.terminal.crt .prompt-line input#msg::placeholder{
  color: color-mix(in oklab, var(--crt-ink) 40%, transparent);
}

/* Disable any older block-caret styling (if present) */
.terminal.crt #msg::after{ content: none !important; }

/* Blinking attention caret when idle (before user types) */
@keyframes blinkBar { 0%,49%{opacity:1} 50%,100%{opacity:.1} }
.terminal.crt .prompt-line::after{
  content: "|";
  position: absolute;
  left: var(--caret-left, 24px);   /* set by JS to sit right after the prefix */
  top: 50%; transform: translateY(-50%);
  font: inherit;
  color: var(--crt-ink);
  text-shadow: 0 0 8px var(--crt-bloom);
  animation: blinkBar 1.1s steps(1) infinite;
  pointer-events: none;
  opacity: .9;
}
/* Hide the attention caret while typing/focused */
.terminal.crt .prompt-line:focus-within::after,
.terminal.crt .prompt-line.typing::after{
  display: none;
}
/* ==== Unify sizes + remove empty space in prompt bar ==== */

/* Bigger, consistent UI type */
:root { --crt-size: clamp(18px, 1.9vw, 26px); --crt-leading: 1.5; }
.terminal.crt { font-size: var(--crt-size); line-height: var(--crt-leading); }

/* Make both the screen and the prompt inherit the same scale */
.terminal.crt .term-body,
.terminal.crt .prompt-line,
.terminal.crt .prompt-line * { font-size: inherit; line-height: inherit; }

/* Prompt bar: no forced tall box, align content to middle */
.terminal.crt .prompt-line{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;     /* comfy but not huge */
  min-height: 0;          /* <<< remove tall empty area */
}

/* Input: same size as printed lines, no browser defaults */
.terminal.crt .prompt-line input#msg{
  background: transparent !important;
  color: var(--crt-ink) !important;
  border: 0 !important; outline: none !important; box-shadow: none !important;
  font: inherit;
  line-height: 1.2;       /* keeps caret height tidy */
  height: 1.2em;          /* matches visible text */
  padding: 0;
  appearance: none; -webkit-appearance: none;
  caret-color: var(--crt-ink) !important;
}

/* Blinking guidance caret: place right after prefix and vertically centered */
@keyframes blinkBar { 0%,49%{opacity:1} 50%,100%{opacity:.1} }
.terminal.crt .prompt-line::after{
  content: "|";
  position: absolute;
  left: var(--caret-left, 24px);
  top: 50%;
  transform: translateY(-45%); /* baseline-ish */
  font: inherit;
  color: var(--crt-ink);
  text-shadow: 0 0 8px var(--crt-bloom);
  animation: blinkBar 1.1s steps(1) infinite;
  pointer-events: none;
}
.terminal.crt .prompt-line:focus-within::after,
.terminal.crt .prompt-line.typing::after{ display: none; }
/* ===== Prompt uses the same CRT look & text as the screen ===== */

/* same ink + glow as screen text */
.terminal.crt .prompt-line .prefix,
.terminal.crt .prompt-line input#msg {
  color: var(--crt-ink) !important;
  text-shadow:
    0 0 6px var(--crt-bloom),
    0 0 18px var(--crt-bloom-2);
}

/* prompt glass styled exactly like the screen glass */
.terminal.crt .prompt-line{
  position: relative;
  background:
    radial-gradient(120% 100% at 50% 10%, rgba(255,255,255,.06), transparent 40%),
    linear-gradient(180deg, var(--crt-screen-top), var(--crt-screen-bot));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.6),
    inset 0 0 4px rgba(255,255,255,.06),
    0 0 12px var(--crt-bloom-2);
  border-radius: 12px;
}

/* scanlines/vignette overlay like the main screen */
.terminal.crt .prompt-line::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05), rgba(255,255,255,.05) 1px,
      transparent 1px, transparent 3px
    ),
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), transparent 65%);
  mix-blend-mode: overlay;
  opacity: .18;
  pointer-events: none;
}

/* input matches printed line height/size (from earlier step) */
:root { --crt-size: clamp(18px, 1.9vw, 26px); --crt-leading: 1.5; }
.terminal.crt { font-size: var(--crt-size); line-height: var(--crt-leading); }
.terminal.crt .term-body,
.terminal.crt .prompt-line,
.terminal.crt .prompt-line * { font-size: inherit; line-height: inherit; }

.terminal.crt .prompt-line{
  display:flex; align-items:center; gap:12px;
  padding: 14px 18px; min-height: 0;
}

.terminal.crt .prompt-line input#msg{
  background: transparent !important;
  border: 0 !important; outline: none !important; box-shadow: none !important;
  font: inherit; height: 1.2em; line-height: 1.2; padding: 0;
  appearance: none; -webkit-appearance: none;
  caret-color: var(--crt-ink) !important;
}
.terminal.crt .prompt-line input#msg::placeholder{
  color: color-mix(in oklab, var(--crt-ink) 40%, transparent);
}

/* blinking attention caret (kept from earlier) */
@keyframes blinkBar { 0%,49%{opacity:1} 50%,100%{opacity:.1} }
.terminal.crt .prompt-line::after{
  content: "|";
  position: absolute;
  left: var(--caret-left, 24px);
  top: 50%; transform: translateY(-45%);
  font: inherit;
  color: var(--crt-ink);
  text-shadow: 0 0 8px var(--crt-bloom);
  animation: blinkBar 1.1s steps(1) infinite;
  pointer-events: none;
}
.terminal.crt .prompt-line:focus-within::after,
.terminal.crt .prompt-line.typing::after{ display: none; }

/* selections look phosphor-ish */
.terminal.crt ::selection{
  background: color-mix(in oklab, var(--crt-bloom) 35%, transparent);
}
/* === Make prompt text identical to CRT screen text === */
.terminal.crt .prompt-line .prefix,
.terminal.crt .prompt-line input#msg {
  /* same ink + glow as screen */
  color: var(--crt-ink) !important;
  -webkit-text-fill-color: var(--crt-ink) !important;             /* safari/autofill */
  text-shadow:
    0 0 6px var(--crt-bloom),
    0 0 18px var(--crt-bloom-2) !important;
  font-weight: 600;                                                /* techy weight */
  letter-spacing: 0.02em;
  font-family: inherit;                                            /* JetBrains Mono etc. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* unifies size with the screen lines (adjust if you want even bigger) */
:root { --crt-size: clamp(18px, 1.9vw, 26px); --crt-leading: 1.5; }
.terminal.crt { font-size: var(--crt-size); line-height: var(--crt-leading); }
.terminal.crt .prompt-line,
.terminal.crt .prompt-line * { font-size: inherit; line-height: inherit; }
.terminal.crt .prompt-line { display:flex; align-items:center; gap:12px; padding:14px 18px; }

/* input: no browser defaults, matches printed text height exactly */
.terminal.crt .prompt-line input#msg{
  background: transparent !important;
  border: 0 !important; outline: none !important; box-shadow: none !important;
  font: inherit; height: 1.2em; line-height: 1.2; padding: 0;
  appearance: none; -webkit-appearance: none;
  caret-color: var(--crt-ink) !important;  /* native caret while typing */
}
.terminal.crt .prompt-line input#msg::placeholder{
  color: color-mix(in oklab, var(--crt-ink) 40%, transparent);
}

/* === Thicker blinking attention cursor (shown only when idle) === */
@keyframes blinkBar { 0%,49%{opacity:1} 50%,100%{opacity:.1} }
.terminal.crt .prompt-line::after{
  /* thick glowing bar instead of a text glyph */
  content: "";
  position: absolute;
  left: var(--caret-left, 24px);
  top: 50%; transform: translateY(-52%);
  width: 0.16em;                     /* thickness — increase for chunkier */
  height: 1.1em;                     /* matches line height */
  background: var(--crt-ink);
  border-radius: 1px;
  box-shadow:
    0 0 6px var(--crt-bloom),
    0 0 16px var(--crt-bloom-2);
  animation: blinkBar 1.05s steps(1,end) infinite;
  pointer-events: none;
  opacity: .95;
}
/* hide the attention bar while typing/focused (native caret takes over) */
.terminal.crt .prompt-line:focus-within::after,
.terminal.crt .prompt-line.typing::after { display: none; }
/* --- Make the input fill the whole prompt bar width --- */
.terminal.crt .prompt-line{
  display: flex;
  align-items: center;
  gap: 12px;
  /* this keeps the prompt bar the same width as the CRT screen glass */
  margin: 0 18px 18px;   /* left/right match .term-body’s 18px margin */
}

/* keep the prefix tight, no wrapping */
.terminal.crt .prompt-line .prefix{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* input grows to take the rest of the bar */
.terminal.crt .prompt-line input#msg{
  flex: 1 1 100%;
  min-width: 0;          /* prevents flex overflow */
  width: 100%;           /* ensures full stretch inside the flex cell */
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  font: inherit; line-height: 1.2; height: 1.2em; padding: 0;
  color: var(--crt-ink) !important;
}
/* === On-screen bezel bars === */
:root { --crt-topbar-h: 36px; }

.terminal.crt .screen-bars{
  position: absolute; inset: 18px; /* aligns with glass margins */
  pointer-events: none; z-index: 5;
}

/* top bar (title) */
.terminal.crt .screen-bars .bar.top{
  position: absolute; left:0; right:0; top:0; height: var(--crt-topbar-h);
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  color: var(--crt-ink);
  text-shadow: 0 0 6px var(--crt-bloom), 0 0 18px var(--crt-bloom-2);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.35));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 40px rgba(0,0,0,.6);
  border-radius: 8px;
}

.terminal.crt .screen-bars .bar.top .label{
  font-weight: 700; letter-spacing: .04em;
}
.terminal.crt .screen-bars .bar.top .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #16ff8b; box-shadow: 0 0 10px #16ff8b, 0 0 18px #16ff8b;
}

/* side rails */
.terminal.crt .screen-bars .bar.left,
.terminal.crt .screen-bars .bar.right{
  position: absolute; top: 0; bottom: 0; width: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.35));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 30px rgba(0,0,0,.6);
  border-radius: 6px;
}
.terminal.crt .screen-bars .bar.left{ left: 0; }
.terminal.crt .screen-bars .bar.right{ right: 0; }

/* Push chat content below the top bar so text isn't hidden under it */
.terminal.crt .term-body{ padding-top: calc(18px + var(--crt-topbar-h)) !important; }

/* === Scroll/typing fix (ensure chat scrolls; input always usable) === */
.terminal.crt{
  display: flex; flex-direction: column;
  width: 100vw; height: 100svh; /* full screen */
}
.terminal.crt .term-body{
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;                /* allows child to shrink for flex overflow */
  overflow-y: auto;             /* <- scrolling chat */
  overscroll-behavior: contain; /* no page bounce on mobile */
}
.terminal.crt .prompt-line{
  flex: 0 0 auto;               /* pinned at bottom */
}

/* (keep your CRT prompt styling & blinking bar rules from earlier) */