@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500;700;900&family=Grandstander:wght@500;700;800&display=swap');
/* THE JIM ASSISTANT'S LOOK (public/assistant/assistant.js), for every Jim page that has it
   (Maayan: "we will have the assistant in many jim products so i want it to be reused
   because i want user to get used to it"). The panel, its open/close button, where the
   panel sits (.jim-ai-host), its colours and its two fonts. Nothing of any product. */

/* ---- Its colours: the button on the page's bar is light (parchment and gold); the panel
   redefines them dark below. Its own, so it looks the same on every product's page. ---- */
.jim-ai, .jim-ai-toggle {
  --paper:#efe7d3; --sheet:#faf5e8; --sheet2:#f2ead6; --sheet3:#e7dcc0; --edge:#cbb98f;
  --ink:#3a2c17; --ink2:#6f5c3c; --ink3:#8f7c56;
  --gold:#865309; --gold-dk:#6e4307; --gold2:#a8935f; --red:#B32D1F; --green:#2C6E4A; --line:#b7a473;
}

/* THE ASSISTANT'S BUTTON: one element, built by JimAssistant.mount in the page's slot
   (toggleRoot), the same on every page (Maayan: "button should be identical - re-use the
   same button"). The face, the name, and "AI assistant" under it, aligned to the START
   (the right, in Hebrew). A pill with a 2px border; .on while the panel is open.
   Padding is LOGICAL, not physical: the face leads and the name follows, so in Hebrew
   the whole pill mirrors and the tight 4px follows the face. */
.jim-ai-toggle { display:inline-flex; align-items:center; justify-content:flex-start; gap:10px;
  box-sizing:border-box; max-width:min(100%,220px); margin:0;
  padding-block:4px; padding-inline:4px 12px; border-radius:999px;
  border:2px solid var(--edge); background:var(--paper); color:var(--gold);
  font:600 12px/1.12 'Grandstander', system-ui, sans-serif; text-align:start; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background .15s, border-color .15s, box-shadow .15s; }
.jim-ai-toggle:hover { border-color:var(--gold2); }
.jim-ai-toggle.on { background:var(--sheet2); border-color:var(--gold); box-shadow:0 0 0 2px var(--gold); }
.jim-ai-toggle:focus-visible { outline:3px solid var(--gold2); outline-offset:2px; }
.jim-ai-toggle svg { display:block; }
.jim-ai-toggle img { width:40px; height:40px; border-radius:50%; object-fit:cover; display:block; flex:0 0 auto;
  border:2px solid var(--edge); background:var(--sheet2); }
.jim-ai-id { display:flex; flex-direction:column; align-items:flex-start; text-align:start; line-height:1.12; min-width:0; }
.jim-ai-name { font-family:'Frank Ruhl Libre',serif; font-weight:900; font-size:18px; color:var(--ink);
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jim-ai-sub { font-style:normal; font-size:12px; color:var(--ink3); font-weight:600; }

/* ---------------- AI DM assistant — LEFT DRAWER (pushes the split) ---------------- */
/* The ogre's corner: the panel redefines the palette to a dark, high-contrast
   scheme so its input, bubbles and buttons all flip to dark automatically. Gold
   stays the accent. This scope is the panel only; the table is untouched. */
.jim-ai {
  --paper:#1e2216; --sheet:#171a10; --sheet2:#2b3020; --sheet3:#242a19; --edge:#4a5231;
  --ink:#f3efe0; --ink2:#cfc9b0; --ink3:#9d9880; --line:#3a4126;
  --ai-gold:#d8a63f; --ai-w:min(340px,86vw);
  flex:0 0 auto; width:0; min-height:0; overflow:hidden; background:var(--sheet);
  color:var(--ink); display:flex; flex-direction:column; transition:width .28s ease;
  font-family:'Grandstander', system-ui, sans-serif; } /* its own font, not the page's: the same on every page */
/* OPEN: the panel slides to its width, the same .28s on every page (JimAssistant.mount sets
   .is-open). */
.jim-ai.is-open { width:var(--ai-w); border-inline-end:2px solid #0f1109; }
/* WHERE IT SITS, the same on every page: its parent is the row it opens in (mount marks it
   .jim-ai-host). On a desktop the panel is the row's first item and pushes the page beside it;
   on a phone it overlays the page, full width, instead of squeezing it. */
.jim-ai-host { display:flex; min-height:0; position:relative; }
.jim-ai-host > .jim-ai { order:-1; }
/* FROM THE END EDGE (assistant.js side:"end", GrowlMaster's table): the row's last item, its line and grip on its start side */
.jim-ai-host.jim-ai-end > .jim-ai { order:99; }
@media (min-width:821px){ .jim-ai-host.jim-ai-end > .jim-ai.is-open { border-inline-end:0; border-inline-start:2px solid #0f1109; } }   /* a phone: the sheet from the bottom, as everywhere */
.jim-ai-host.jim-ai-end > .jim-ai-grip { inset-inline-start:auto; inset-inline-end:calc(var(--jim-ai-push, 0px) - 6px); }
/* ON A PHONE: A SHEET FROM THE BOTTOM (Maayan, on his iPhone: "left panel goes over everything"), the
   same on every page. About half the screen; the page above stays in view, and its row gets the sheet's
   height at its foot, so all of it can still be scrolled to. A × in its head closes it. Above the
   editors' bars and hints (60), below their menus (130). */
/* ⋮ and its menu (assistant.js): in the head's start corner, opposite the speaker. */
.jim-ai__more { position:absolute; top:10px; inset-inline-start:10px; display:grid; place-items:center; width:38px; height:38px; padding:0;
  border:2px solid rgba(255,255,255,.25); border-radius:50%; background:transparent; color:#fff; cursor:pointer; }
.jim-ai__more:hover, .jim-ai__more[aria-expanded="true"] { border-color:var(--ai-gold); }
.jim-ai__more:focus-visible { outline:3px solid var(--ai-gold); outline-offset:2px; }
.jim-ai__menu { position:absolute; top:54px; inset-inline-start:10px; z-index:5; min-width:200px; display:flex; flex-direction:column; gap:4px;
  padding:10px; background:var(--sheet2); border:2px solid var(--edge); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.45); text-align:start; }
.jim-ai__menu[hidden] { display:none; }
.jim-ai__menu-l { font-size:12px; font-weight:700; color:var(--ink3); padding:2px 4px; }
.jim-ai__sizes { display:flex; gap:4px; padding:0 2px 6px; border-bottom:1px solid var(--line); }
.jim-ai__size { flex:1; height:32px; border:2px solid var(--edge); border-radius:6px; background:var(--sheet); color:var(--ink);
  font:700 13px/1 'Grandstander', system-ui, sans-serif; cursor:pointer; }
.jim-ai__size[aria-pressed="true"] { border-color:var(--ai-gold); background:var(--ai-gold); color:#1b1a18; }
.jim-ai__menu-i { display:block; width:100%; padding:9px 8px; border:0; border-radius:6px; background:transparent; color:var(--ink);
  font:600 14px/1.2 'Grandstander', system-ui, sans-serif; text-align:start; cursor:pointer; }
.jim-ai__menu-i:hover { background:var(--sheet3); }
/* THE CAST: Change character, a grid over the conversation; each card a face, a name and what that one is best at. */
.jim-ai__cast { flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px; background:var(--sheet); }
/* While it shows, it takes the conversation's place in the panel. */
.jim-ai.is-casting .jim-ai__log, .jim-ai.is-casting .jim-ai__composer { display:none; }
.jim-ai__cast[hidden] { display:none; }
.jim-ai__cast-h { display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px; font:700 15px/1.2 'Grandstander', system-ui, sans-serif; color:var(--ink); }
.jim-ai__cast-x { border:0; background:transparent; color:var(--ink3); font-size:22px; line-height:1; cursor:pointer; padding:4px 8px; }
.jim-ai__cast-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:10px; }
.jim-ai__card { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px; text-align:center; cursor:pointer;
  border:2px solid var(--edge); border-radius:12px; background:var(--sheet2, var(--sheet)); color:var(--ink); font:600 13px/1.25 'Grandstander', system-ui, sans-serif; }
.jim-ai__card:hover { border-color:var(--ai-gold); }
.jim-ai__card[aria-pressed="true"] { border-color:var(--ai-gold); box-shadow:0 0 0 2px var(--ai-gold) inset; }
.jim-ai__card img { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--edge); }
.jim-ai__card b { font-size:14px; }
.jim-ai__card i { font-style:normal; font-size:12px; opacity:.75; }
/* The face opens the cast too, where there is more than one to pick. */
.jim-ai__face.is-picker, .jim-ai__title.is-picker { cursor:pointer; }
.jim-ai__menu-voice[aria-checked="true"]::after { content:" ✓"; color:var(--ai-gold); }
/* THE GRIP on the panel's edge (assistant.js, /shared/edge-drag.js): where the panel ends, open or
   shut; drag to widen, narrow, close or open it. */
.jim-ai-grip { position:absolute; top:0; bottom:0; inset-inline-start:calc(var(--jim-ai-push, 0px) - 6px); width:12px; z-index:30;
  cursor:col-resize; touch-action:none; }
/* A slim line always there, so the edge can be found; on hover or while dragging, a gold handle. */
.jim-ai-grip::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
  background:rgba(128,128,128,.28); transition:background .15s, width .15s; }
.jim-ai-grip::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:6px; height:44px;
  border-radius:3px; background:var(--ai-gold, #d8a63f); opacity:0; transition:opacity .15s; }
.jim-ai-grip:hover::before, .jim-ai-grip.dragging::before { width:3px; background:var(--ai-gold, #d8a63f); }
.jim-ai-grip:hover::after, .jim-ai-grip.dragging::after { opacity:1; }
.jim-ai--drag { transition:none !important; }
/* × closes the panel (assistant.js), in the head's corner opposite ⋮; on a phone, at the end of its one row. Reading
   replies aloud lives in ⋮ (Maayan, 2026-11-01). */
.jim-ai__head { position:relative; }
.jim-ai__close { position:absolute; top:10px; inset-inline-end:10px; display:grid; place-items:center; width:38px; height:38px; padding:0; margin:0;
  border:2px solid rgba(255,255,255,.25); border-radius:50%; background:transparent; color:#fff; cursor:pointer; }
.jim-ai__close:hover { border-color:var(--ai-gold); }
.jim-ai__close:focus-visible { outline:3px solid var(--ai-gold); outline-offset:2px; }
@media (max-width:820px){
  .jim-ai-host { --ai-sheet:min(55dvh, 520px); }
  .jim-ai-host.jim-ai-open { padding-bottom:var(--ai-sheet); }
  .jim-ai-host > .jim-ai { position:fixed; inset:auto 0 0 0; z-index:100;
    width:100%; height:0; transition:height .28s ease; border-inline-end:0;
    --ai-w:100vw !important;   /* the content keeps the full width, so it won't reflow while it slides (over a dragged width) */
    border-radius:16px 16px 0 0; box-shadow:0 -6px 24px rgba(0,0,0,.35); }
  .jim-ai-host > .jim-ai.is-open { width:100%; height:var(--ai-sheet); border-inline-end:0; border-top:2px solid #0f1109; }
  /* Its head, one short row: the face, the name, the ×. */
  .jim-ai-host > .jim-ai .jim-ai__head { flex-direction:row; justify-content:flex-start; gap:10px; padding:8px 12px 6px; }
  .jim-ai-host > .jim-ai .jim-ai__face { width:36px; height:36px; border-width:2px; }
  .jim-ai-host > .jim-ai .jim-ai__id { align-items:flex-start; flex:1; min-width:0; }
  .jim-ai-host > .jim-ai .jim-ai__title { font-size:17px; }
  .jim-ai-grip { display:none; }   /* a sheet, not a column: nothing to drag */
  .jim-ai-host > .jim-ai .jim-ai__more { position:static; flex:0 0 auto; width:40px; height:40px; }
  .jim-ai-host > .jim-ai .jim-ai__menu { top:56px; }
  .jim-ai-host > .jim-ai .jim-ai__close { position:static; flex:0 0 auto; width:40px; height:40px; order:4; }
}
@media (prefers-reduced-motion:reduce){ .jim-ai { transition:none; } }
/* THE HEAD THAT GETS OUT OF THE WAY (Maayan: "the big header takes too much room once a chat scrolls"). It floats
   over the top of the conversation, which keeps room for it at its full height (--ai-head, measured by assistant.js),
   so when it shrinks to one slim strip (.is-compact, the conversation scrolled down) nothing under the finger moves:
   only the head changes. Back at the top, it is whole again. */
.jim-ai { position:relative; }
.jim-ai__head { position:absolute; top:0; inset-inline-start:0; z-index:3; background:var(--sheet);
  transition:padding .2s ease, gap .2s ease; }
.jim-ai__head::after { content:""; position:absolute; inset-inline:14px; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--edge),transparent); }
.jim-ai__sep { display:none; }
.jim-ai .jim-ai__log, .jim-ai .jim-ai__cast { padding-top:calc(var(--ai-head, 190px) + 12px); } /* over the log's own padding, set below */
.jim-ai__face { transition:width .2s ease, height .2s ease, border-width .2s ease; }
.jim-ai__title { transition:font-size .2s ease; }
/* The slim strip: a small round face, the name over its line, the speaker and ⋮, in one row (mirrored right to left). */
.jim-ai.is-compact .jim-ai__head { flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; padding:8px 12px; text-align:start; }
.jim-ai.is-compact .jim-ai__face { width:36px; height:36px; border-width:2px; }
.jim-ai.is-compact .jim-ai__id { align-items:flex-start; flex:1; min-width:0; gap:1px; }
.jim-ai.is-compact .jim-ai__title { font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.jim-ai.is-compact .jim-ai__role { font-size:10px; }
.jim-ai.is-compact .jim-ai__close, .jim-ai.is-compact .jim-ai__more { position:static; flex:0 0 auto; width:34px; height:34px; }
.jim-ai.is-compact .jim-ai__close { order:4; }
.jim-ai.is-compact .jim-ai__more { order:3; }
@media (prefers-reduced-motion:reduce){ .jim-ai__head, .jim-ai__face, .jim-ai__title { transition:none; } }
/* Pin the inner content to the panel's OPEN width so it never reflows while the
   panel animates open/closed — it just clips (overflow:hidden) instead of making
   ugly line breaks mid-slide. */
.jim-ai__head, .jim-ai__sep, .jim-ai__log, .jim-ai__composer { width:var(--ai-w); box-sizing:border-box; }
/* Header: big portrait, name, role, then a separator before the conversation. */
.jim-ai__head { flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:10px; padding:20px 16px 12px; }
.jim-ai__face { width:96px; height:96px; border-radius:50%; object-fit:cover;
  border:3px solid var(--ai-gold); box-shadow:0 4px 14px rgba(0,0,0,.5); flex:0 0 auto; }
.jim-ai__id { display:flex; flex-direction:column; align-items:center; gap:3px; }
.jim-ai__title { font-family:'Frank Ruhl Libre',serif; font-weight:800; font-size:23px;
  line-height:1.05; color:#fff; }
.jim-ai__role { font-style:normal; font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ai-gold); }
.jim-ai__sep { flex:0 0 auto; height:2px; margin:6px 14px 4px;
  background:linear-gradient(90deg,transparent,var(--edge),transparent); }
.jim-ai__composer { flex:0 0 auto; display:flex; flex-direction:column; gap:8px; padding:10px 12px;
  border-top:2px solid var(--line); padding-bottom:max(10px,env(safe-area-inset-bottom,0px)); }
.jim-ai__crow { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-height:40px; }
/* Author `display:flex` must not override the HTML hidden attribute */
.jim-ai__crow[hidden] { display:none !important; }
.jim-ai__circle[hidden], .jim-ai__sq[hidden], .jim-ai__sendidle[hidden] { display:none !important; }
.jim-ai__in {
  width:100%; box-sizing:border-box; font:inherit; font-size:16px; line-height:1.35;
  padding:9px 12px; border:2px solid var(--ink); background:var(--paper); color:var(--ink);
  resize:none; overflow-y:auto; height:42px; min-height:42px; max-height:min(40vh,220px);
}
.jim-ai__in:focus { outline:none; border-color:var(--gold); }
.jim-ai__in[readonly] { opacity:.85; cursor:default; }

/* Idle mic (circle) · lang (square) · stop/send (circles) — Ask Gorak mock.
   Mic is a round dark button (no white box) so it fits the ogre panel. */
.jim-ai__sq {
  flex:0 0 auto; width:40px; height:40px; box-sizing:border-box; border-radius:50%;
  border:2px solid var(--edge); background:var(--sheet2); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; margin:0; -webkit-tap-highlight-color:transparent;
}
.jim-ai__sq:hover { background:var(--sheet3); }
.jim-ai__sq:active { transform:scale(.96); }
.jim-ai__sq:disabled { opacity:.45; cursor:not-allowed; }

.jim-ai__lang {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  width:52px; height:40px; box-sizing:border-box; padding:0 6px;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink);
  cursor:pointer; overflow:hidden;
}
.jim-ai__langsel {
  position:absolute; inset:0; opacity:0; width:100%; height:100%;
  cursor:pointer; margin:0; border:0; font-size:16px;
}
.jim-ai__lang svg, .jim-ai__lang .jim-ai__wave, .jim-ai__flag { flex:0 0 auto; pointer-events:none; }
.jim-ai__flag { font-size:14px; line-height:1; }
.jim-ai__lang > svg { opacity:.85; width:10px; height:10px; }
.jim-ai__wave { display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.jim-ai__wave i {
  display:block; width:2.5px; border-radius:1px; background:var(--ink);
  height:40%; transform-origin:center bottom;
  transform:scaleY(.4); opacity:.6;   /* resting: still and quiet until speech */
}
/* Bars dance only while the master is actually speaking. */
.jim-ai.is-speaking .jim-ai__wave i { animation:gmWave 1s ease-in-out infinite; }
.jim-ai__wave i:nth-child(1){ height:35%; animation-delay:0s; }
.jim-ai__wave i:nth-child(2){ height:70%; animation-delay:.12s; }
.jim-ai__wave i:nth-child(3){ height:100%; animation-delay:.24s; }
.jim-ai__wave i:nth-child(4){ height:55%; animation-delay:.08s; }
.jim-ai__wave i:nth-child(5){ height:40%; animation-delay:.2s; }
@keyframes gmWave {
  0%,100%{ transform:scaleY(.45); opacity:.65; }
  50%{ transform:scaleY(1); opacity:1; }
}
/* Stop / abort: same round dark button as the mic (not a white circle). */
.jim-ai__circle {
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; box-sizing:border-box;
  border:2px solid var(--edge); background:var(--sheet2); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; margin:0; -webkit-tap-highlight-color:transparent;
}
.jim-ai__circle:hover { background:var(--sheet3); }
.jim-ai__circle:active { transform:scale(.96); }
/* Send stays the gold primary action. */
.jim-ai__sendrec, .jim-ai__sendidle { background:var(--gold); color:#fff; border-color:var(--gold-dk); }
.jim-ai__sendrec:hover, .jim-ai__sendidle:hover { background:var(--gold-dk); color:#fff; }
@media (prefers-reduced-motion:reduce){
  .jim-ai__wave i { animation:none; height:50% !important; }
}

.jim-ai__log { flex:1; min-height:0; overflow:auto; padding:14px 14px; display:flex; flex-direction:column; gap:14px;
  -webkit-overflow-scrolling:touch; }
.jim-ai__msg { font-size:calc(15px * var(--ai-fs, 1)); line-height:1.55; display:flex; }
/* SELECTABLE (Maayan: "need to be able to select the text that the AI agent replied"): the
   conversation is text, whatever the page sets around it (GrowlMaster's body is user-select:none). */
.jim-ai__log, .jim-ai__log * { -webkit-user-select:text; user-select:text; }
.jim-ai__log button, .jim-ai__log button * { -webkit-user-select:none; user-select:none; }
/* A reply and, under it, its tiny buttons. */
.jim-ai__msg { flex-direction:column; align-items:stretch; gap:4px; }
.jim-ai__acts { display:flex; gap:2px; padding-inline-start:2px; opacity:.4; transition:opacity .15s; }
.jim-ai__msg:hover .jim-ai__acts, .jim-ai__acts:focus-within { opacity:1; }
@media (hover:none){ .jim-ai__acts { opacity:1; } }
.jim-ai__act { display:grid; place-items:center; width:28px; height:28px; padding:0; margin:0; border:0; border-radius:6px;
  background:transparent; color:var(--ink2); cursor:pointer; }
.jim-ai__act:hover { background:var(--sheet2); color:var(--ink); }
.jim-ai__act:focus-visible { outline:2px solid var(--ai-gold); outline-offset:1px; }
.jim-ai__act.is-done { color:var(--ai-gold); }
/* Links in a reply (linkHtml): gold, underlined, opening a new tab. */
.jim-ai__msg a { color:var(--ai-gold); text-decoration:underline; text-underline-offset:2px; word-break:break-word; }
.jim-ai__msg--dm a { color:var(--ai-gold); }
/* WHAT HE IS DOING (stepsBox): a small line per tool, tap to see what it asked and what came back;
   folded into one line under the reply once answered. */
.jim-ai__steps { display:flex; flex-direction:column; gap:2px; max-width:92%; font-size:calc(12.5px * var(--ai-fs, 1)); }
.jim-ai__steps-sum, .jim-ai__step-l { display:block; width:100%; padding:3px 6px; margin:0; border:0; border-radius:6px; background:transparent;
  color:var(--ink3); font:inherit; font-family:'Grandstander', system-ui, sans-serif; text-align:start; cursor:pointer; }
.jim-ai__steps-sum:hover, .jim-ai__step-l:hover { background:var(--sheet2); color:var(--ink2); }
.jim-ai__fold { display:inline-flex; vertical-align:-1px; margin-inline-end:5px; transform:rotate(-90deg); transition:transform .15s ease; }
[dir="rtl"] .jim-ai__fold { transform:rotate(90deg); }
.jim-ai__steps-sum[aria-expanded="true"] .jim-ai__fold, .jim-ai__step-l[aria-expanded="true"] .jim-ai__fold { transform:none; }
@media (prefers-reduced-motion:reduce){ .jim-ai__fold { transition:none; } }
.jim-ai__steps-sum[hidden], .jim-ai__steps-list[hidden], .jim-ai__step-d[hidden] { display:none; }
.jim-ai__steps-list { display:flex; flex-direction:column; gap:2px; padding-inline-start:8px; }
.jim-ai__step[data-state="running"] .jim-ai__step-l { color:var(--ink2); }
.jim-ai__step[data-state="running"] .jim-ai__step-l::after { content:" …"; animation:gmStepPulse 1s infinite ease-in-out; }
.jim-ai__step[data-state="failed"] .jim-ai__step-l { color:#d98b7a; }
@keyframes gmStepPulse { 50% { opacity:.3; } }
@media (prefers-reduced-motion:reduce){ .jim-ai__step[data-state="running"] .jim-ai__step-l::after { animation:none; } }
.jim-ai__step-d { margin:2px 0 6px 18px; padding:6px 10px; border-inline-start:2px solid var(--edge); color:var(--ink2); }
.jim-ai__step-d ul { margin:4px 0 0; padding-inline-start:16px; }
.jim-ai__step-d li { margin:2px 0; }
.jim-ai__step-d a { color:var(--ai-gold); word-break:break-word; }
.jim-ai__step-in { font-style:italic; }
.jim-ai__step-k { margin-top:4px; font-weight:700; color:var(--ink3); }
.jim-ai__step-err { color:#d98b7a; }
/* Pictures from the web (image_search): small thumbnails, each a link to its page. */
.jim-ai__imgs { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; max-width:92%; }
.jim-ai__img { display:block; aspect-ratio:1; overflow:hidden; border:2px solid var(--edge); border-radius:6px; background:var(--sheet2); }
.jim-ai__img:hover, .jim-ai__img:focus-visible { border-color:var(--ai-gold); outline:none; }
.jim-ai__img img { width:100%; height:100%; object-fit:cover; display:block; }
/* LIKE OTHER AI CHATS (assistant.js whoLine): no bubbles; every line at the left, the panel's full width;
   who is talking in a quiet line above, when the speaker changes. */
.jim-ai__txt { overflow-wrap:anywhere; white-space:pre-wrap; }
.jim-ai__msg--dm .jim-ai__txt { color:#fff; font-weight:600; }
.jim-ai__who { display:flex; align-items:center; gap:7px; margin-top:4px; font-size:12.5px; line-height:1; color:var(--ink3); }
.jim-ai__who img { width:20px; height:20px; border-radius:50%; object-fit:cover; border:1px solid var(--ai-gold); }
.jim-ai__who b { font-weight:700; letter-spacing:.02em; }
.jim-ai__who--dm b { color:var(--ink2); }
.jim-ai__busy .jim-ai__txt { color:var(--ink3); font-style:italic; }
/* Thinking: three dots that bounce while Gorak "thinks" before a line. */
.jim-ai__dots { display:inline-flex; gap:5px; align-items:center; height:1.1em; }
.jim-ai__dots i { width:7px; height:7px; border-radius:50%; background:var(--ink2);
  animation:gmDots 1s infinite ease-in-out; }
.jim-ai__dots i:nth-child(2){ animation-delay:.15s; }
.jim-ai__dots i:nth-child(3){ animation-delay:.30s; }
@keyframes gmDots { 0%,80%,100%{ transform:translateY(0); opacity:.45; } 40%{ transform:translateY(-4px); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .jim-ai__dots i { animation:none; } }
.jim-ai__card { border:2px solid var(--edge); background:var(--sheet2); padding:10px 12px; }
.jim-ai__card-t { font-family:'Frank Ruhl Libre',serif; font-weight:700; font-size:17px; }
.jim-ai__card-d { font-size:15px; color:var(--ink2); margin:3px 0 8px; line-height:1.4; }
.jim-ai__card-a { display:flex; gap:8px; }
.jim-ai__done { font-size:15px; color:var(--ink2); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
/* A reply read out: what is speaking, and Stop (assistant.js speak). */
.jim-ai__voice { display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size:14px; font-weight:700; color:var(--ink2); }
.jim-ai__voice[hidden] { display:none; }
.jim-ai__voice-t { flex:1 1 auto; min-width:0; }
.jim-ai__listen { align-self:flex-start; margin:2px 0 8px; }
.jim-ai__undo { background:none; border:0; padding:0; font:inherit; font-weight:800; color:var(--gold); cursor:pointer; text-decoration:underline; }
.jim-ai__undo:disabled { color:var(--ink3); text-decoration:none; cursor:default; }
.jim-ai__err { color:var(--red); font-size:14px; font-weight:700; margin-top:6px; }
/* onboarding reply chips — tappable choices, sit on the user's side (right) */
.jim-ai__choices { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:2px; }
.jim-ai__choice { font:inherit; font-size:15px; font-weight:700; line-height:1.2;
  padding:9px 14px; border:2px solid var(--gold); background:var(--paper); color:var(--ink);
  border-radius:999px; cursor:pointer; transition:background .12s ease, transform .06s ease; }
.jim-ai__choice:hover { background:var(--sheet2); }
.jim-ai__choice:active { transform:translateY(1px); }

.jim-ai__receipt { border:2px solid var(--edge); border-radius:10px; padding:9px 11px; margin:8px 0; background:var(--sheet2); }
.jim-ai__receipt-t { font-weight:800; margin-bottom:5px; }
.jim-ai__receipt-r { padding:2px 0; }
.jim-ai__receipt-r--bad { color:var(--ink2); }

/* THE KEPT SELECTION, above the box: "About: "…"" and ×. One line, cut with an ellipsis. */
.jim-ai__about { display:flex; align-items:center; gap:6px; margin:0 0 8px; padding-block:4px; padding-inline:10px 4px;
  border:1.5px solid var(--edge); border-radius:999px; background:var(--sheet2); color:var(--ink2); font-size:13px; font-weight:700; max-width:100%; box-sizing:border-box; }
.jim-ai__about[hidden] { display:none; }
.jim-ai__about-t { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jim-ai__about-x { flex:0 0 auto; width:24px; height:24px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink2);
  font-size:16px; line-height:1; cursor:pointer; }
.jim-ai__about-x:hover { background:var(--sheet3); color:var(--ink); }

/* =====================================================================
   THE button, one definition for GrowlMaster and the Jim assistant's panel (Maayan: reuse
   is the exact same code). GrowlMaster builds it with B() in app.js; the panel's cards use
   the same classes. Styling chosen by
   modifier classes only — never bespoke per-spot CSS. Reads the shared :root
   palette, so it renders identically in the stage (.lb), the header, and
   body-level overlays (.lb-box renders OUTSIDE .lb but :root reaches it). */
.gm-btn {
  --bg:var(--paper); --b:var(--line); --fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-sizing:border-box; margin:0; border:2px solid var(--b); background:var(--bg); color:var(--fg);
  font-family:'Grandstander', system-ui, sans-serif; font-weight:700; font-size:16px; line-height:1.2;
  padding:8px 15px; cursor:pointer; text-decoration:none; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s ease, color .12s ease, border-color .12s ease, transform .06s ease;
}
.gm-btn:hover { --bg:var(--sheet3); --b:var(--gold2); --fg:var(--ink); }
.gm-btn:active { transform:translateY(1px); }
.gm-btn:disabled { opacity:.42; cursor:not-allowed; transform:none; }
.gm-btn__i { display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.gm-btn__i svg { display:block; }
/* variants */
.gm-btn--primary { --bg:var(--gold); --b:var(--gold); --fg:#fff; }
.gm-btn--primary:hover { --bg:var(--gold-dk); --b:var(--gold-dk); --fg:#fff; }
.gm-btn--danger { --fg:var(--red); }
.gm-btn--danger:hover { --bg:var(--red); --b:var(--red); --fg:#fff; }
.gm-btn--ghost { --bg:transparent; --b:transparent; --fg:var(--ink2); }
.gm-btn--ghost:hover { --bg:var(--sheet3); --b:var(--edge); --fg:var(--ink); }
/* sizes */
.gm-btn--sm { font-size:15px; padding:6px 11px; gap:6px; }
.gm-btn--lg { font-size:18px; padding:12px 20px; }
.gm-btn--block { display:flex; width:100%; }
/* icon-only square */
.gm-btn--icon { padding:0; width:34px; height:34px; gap:0; font-size:20px; }
.gm-btn--icon.gm-btn--sm { width:30px; height:30px; font-size:18px; }
.gm-btn--icon.gm-btn--lg { width:40px; height:40px; }
/* toggled-on (toolbars, settings) */
.gm-btn.is-active { --bg:var(--ink); --b:var(--ink); --fg:var(--paper); }
.gm-btn.is-active:hover { --bg:var(--ink2); --b:var(--ink2); --fg:#fff; }