/* The hero's copy of Shellby's real window: the panel's own tokens, sizes and
   icons (shellby src/renderer/shared/tokens.css, panel/panel.css, nav.css,
   components.css), scoped under .win so they can't touch the site. The panel
   is 460px wide in the app; here it's the same, or narrower on a phone. */
.win {
  --w-abyss: #071012; --w-ink: #0c1719; --w-reef: #11232a; --w-reef-2: #173039; --w-reef-3: #1e3d47;
  --w-line: #214049; --w-line-soft: rgba(127, 214, 194, .10);
  --w-sand: #f3e6cc; --w-sand-dim: #b3a892; --w-sand-faint: #9d9482;
  --w-glass: #7fd6c2; --w-glass-dim: rgba(127, 214, 194, .14);
  --w-coral: #ff7a5c; --w-coral-deep: #e2573a; --w-coral-dim: rgba(255, 122, 92, .14);
  --w-amber: #ffc15e; --w-danger: #ff5a4a;
  --w-r-sm: 6px; --w-r: 10px; --w-r-lg: 14px;
  --w-ease: cubic-bezier(.2, .8, .2, 1); --w-spring: cubic-bezier(.34, 1.56, .64, 1);
  position: relative; width: min(100%, 460px); border-radius: 10px; overflow: hidden;
  background: var(--w-ink); color: var(--w-sand); font: 400 13.5px/1.5 var(--f-body);
  border: 1px solid #2a4a52;
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .55), 0 0 80px -20px rgba(63, 184, 163, .35);
  user-select: none;
}
@media (prefers-reduced-motion: no-preference) { .js .win { animation: panel-in 1.1s var(--ease-out) .25s both; } }
.win svg { display: block; }
.w-inner { display: flex; flex-direction: column; }
.win kbd { font: 600 10.5px/1 var(--f-mono); padding: 2px 5px; border-radius: 4px; border: 1px solid var(--w-line); border-bottom-width: 2px; background: var(--w-reef); color: var(--w-sand-dim); }

/* title bar */
.w-title { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; background: var(--w-abyss); border-bottom: 1px solid var(--w-line-soft); }
.w-brand { display: flex; align-items: center; gap: 6px; }
.w-brand-crab { display: grid; place-items: end center; width: 33px; height: 22px; }
.w-brand-crab img { width: 33px; height: auto; }
.w-level { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--w-amber); color: #2a1c02; font: 700 11px/1 var(--f-mono); }
.w-mode { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 8px; border: 1px solid var(--w-line); border-radius: 99px; background: var(--w-reef); font-size: 12px; font-weight: 700; }
.w-mode svg { width: 9px; height: 6px; opacity: .6; }
.w-mode-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--w-glass); box-shadow: 0 0 8px var(--w-glass); }
.w-btns { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.w-icon { width: 30px; height: 28px; border-radius: var(--w-r-sm); display: grid; place-items: center; color: var(--w-sand-dim); }
.w-icon svg { width: 16px; height: 16px; }
.w-sep { width: 1px; height: 16px; background: var(--w-line); margin: 0 4px; }
@media (max-width: 440px) { .w-icon { width: 24px; } .w-sep { margin: 0 2px; } }

/* tab strip */
.w-tabs { display: flex; align-items: flex-end; gap: 3px; padding: 6px 8px 0; background: var(--w-abyss); border-bottom: 1px solid var(--w-line-soft); }
.w-tab { position: relative; flex: 0 1 170px; min-width: 0; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; border-radius: 8px 8px 0 0; border: 1px solid transparent; border-bottom: 0; color: var(--w-sand-dim); font-size: 12.5px; }
.w-tab.active { background: var(--w-ink); color: var(--w-sand); border-color: var(--w-line-soft); }
.w-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--w-ink); }
.w-tab.asking { box-shadow: inset 0 2px 0 var(--w-amber); }
.w-tab-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-tab-title b { color: var(--w-sand); }
.w-tab-x { flex: none; width: 20px; text-align: center; color: var(--w-sand-faint); font-size: 15px; line-height: 1; }
.w-tab-add { flex: none; width: 28px; height: 28px; margin: 0 0 2px auto; display: grid; place-items: center; color: var(--w-sand-dim); }
.w-tab-add svg { width: 15px; height: 15px; }
.ti { flex: none; min-width: 15px; height: 15px; border-radius: 8px; padding: 0 3px; display: grid; place-items: center; font: 700 10px/1 var(--f-mono); }
.ti-ask { background: var(--w-amber); color: #2a1c02; }
.ti-busy { width: 13px; min-width: 13px; height: 13px; padding: 0; border: 2px solid var(--w-coral); border-right-color: transparent; }
.ti-ok { background: var(--w-glass); color: #06201b; }
.ti-routine { color: var(--w-glass); font-size: 12px; }
.ti-none { display: none; }
@media (prefers-reduced-motion: no-preference) { .ti-busy { animation: w-spin .8s linear infinite; } .ti-ask { animation: w-pulse 1s ease-in-out infinite; } }
@keyframes w-spin { to { transform: rotate(360deg); } }
@keyframes w-pulse { 50% { transform: scale(1.15); } }

/* sub bar */
.w-sub { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--w-ink); border-bottom: 1px solid var(--w-line-soft); font-size: 12px; }
.w-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--w-sand-dim); font: 500 11.5px/1 var(--f-mono); font-stretch: 88%; white-space: nowrap; }
.w-chip svg { width: 14px; height: 14px; flex: none; }
.w-chip.branch { color: var(--w-glass); }
.w-usage { margin-left: auto; display: flex; gap: 10px; }
.w-meter { display: flex; align-items: center; gap: 5px; color: var(--w-sand-faint); font: 600 10.5px/1 var(--f-mono); }
.w-meter i { width: 44px; height: 5px; border-radius: 3px; background: var(--w-reef-2); overflow: hidden; }
.w-meter b { display: block; height: 100%; width: 100%; background: var(--w-glass); transform: scaleX(var(--v, .2)); transform-origin: left; transition: transform .6s var(--w-ease); }
@media (max-width: 440px) { .w-chip:nth-child(3) { display: none; } .w-meter i { width: 28px; } }

/* the conversation */
.w-feed { position: relative; height: 318px; overflow: hidden; background:
  radial-gradient(40% 30% at 20% 10%, rgba(127, 214, 194, .07), transparent 70%), radial-gradient(50% 35% at 60% 100%, rgba(255, 122, 92, .05), transparent 70%), var(--w-ink); }
.w-feed-in { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px 8px; display: flex; flex-direction: column; }
.w-feed::before { content: ''; position: absolute; inset: 0 0 auto; height: 28px; background: linear-gradient(var(--w-ink), transparent); z-index: 1; pointer-events: none; }
.w-feed-in > * { animation: w-rise .25s var(--w-ease) both; }
@keyframes w-rise { from { opacity: 0; transform: translateY(6px); } }
.w-msg { margin: 0 0 14px; }
.w-msg.user { margin-left: 18%; padding: 9px 13px; background: var(--w-reef-2); border: 1px solid var(--w-line); border-radius: var(--w-r-lg) var(--w-r-lg) 4px var(--w-r-lg); }
.w-msg.claude { position: relative; padding-left: 18px; }
.w-msg.claude::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--w-coral); box-shadow: 0 0 0 2px var(--w-coral-dim); }
.w-msg code { font: 12px var(--f-mono); font-stretch: 90%; background: var(--w-reef-2); padding: 1px 5px; border-radius: 4px; }
.w-tool { margin: 0 0 5px 16px; border-left: 2px solid var(--w-line); display: flex; align-items: baseline; gap: 8px; padding: 3px 8px; font-size: 12.5px; color: var(--w-sand-dim); min-width: 0; }
.w-tool .st { width: 12px; flex: none; font: 700 11px var(--f-mono); text-align: center; color: var(--w-glass); }
.w-tool b { flex: none; color: var(--w-sand); }
.w-tool span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11.5px var(--f-mono); font-stretch: 85%; }
.w-tool.pending { border-left-color: var(--w-glass); }

.w-lane { --acc: hsl(calc(12deg + var(--hue, 0deg)) 90% 68%); margin: 4px 0 8px 16px; border: 1px solid var(--w-line); border-left: 3px solid var(--acc); border-radius: 4px var(--w-r) var(--w-r) 4px; background: linear-gradient(90deg, rgba(255, 255, 255, .025), transparent 60%), var(--w-reef); display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.w-lane-crab { flex: none; width: 34px; }
.w-lane-crab img { width: 34px; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) { .w-lane.running .w-lane-crab img { animation: w-hop .38s ease-in-out infinite; } }
@keyframes w-hop { 50% { transform: translateY(-2px); } }
.w-lane-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.w-lane-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.w-lane-title b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-lane-type { flex: none; padding: 0 6px; border-radius: 99px; font: 600 9.5px/16px var(--f-mono); color: var(--acc); background: rgba(255, 255, 255, .06); }
.w-lane-act { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px var(--f-mono); font-stretch: 85%; color: var(--w-sand-dim); }
.w-lane.asking { border-color: rgba(255, 193, 94, .6); border-left-color: var(--acc); box-shadow: 0 0 0 3px rgba(255, 193, 94, .08); }
.w-lane.asking .w-lane-act { color: var(--w-amber); }
.w-lane-meta { flex: none; font: 10.5px var(--f-mono); font-stretch: 85%; color: var(--w-sand-faint); }
.w-lane-state { flex: none; width: 16px; text-align: center; font: 700 12px var(--f-mono); }
.w-lane.running .w-lane-state::before { content: '◌'; display: inline-block; color: var(--acc); }
@media (prefers-reduced-motion: no-preference) { .w-lane.running .w-lane-state::before { animation: w-spin 1s linear infinite; } }
.w-lane.done .w-lane-state::before { content: '✓'; color: var(--w-glass); }

.w-ask { margin: 8px 0 12px 16px; border: 1px solid rgba(255, 122, 92, .55); border-radius: var(--w-r); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 122, 92, .12), rgba(255, 122, 92, .03) 60%), var(--w-reef);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 0 4px rgba(255, 122, 92, .06); animation: w-ask-in .35s var(--w-spring) both !important; }
@keyframes w-ask-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.w-ask-head { display: flex; align-items: center; gap: 10px; padding: 11px 12px 4px; }
.w-ask-crab { flex: none; width: 36px; }
.w-ask-crab img { width: 36px; height: auto; display: block; }
.w-ask-title { font: 600 15px/1.2 var(--f-pixel); color: var(--w-coral); }
.w-ask-sub { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--w-sand-dim); }
.w-ask-sub b { display: inline-flex; align-items: center; gap: 4px; color: var(--w-sand); }
.w-ask-sub img { width: 20px; height: auto; }
.w-ask-body { padding: 6px 12px 10px; }
.w-ask-cmd { display: block; padding: 9px 11px; background: var(--w-abyss); border: 1px solid var(--w-line); border-radius: var(--w-r-sm); font: 11.5px/1.55 var(--f-mono); font-stretch: 88%; color: var(--w-sand); white-space: pre-wrap; word-break: break-all; }
.w-ask-desc { margin: 7px 0 0; font-size: 12.5px; color: var(--w-sand-dim); }
.w-ask-acts { display: flex; gap: 6px; padding: 0 12px 12px; }
.w-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 32px; border-radius: var(--w-r-sm); border: 1px solid var(--w-line); background: var(--w-reef-2); color: var(--w-sand); font-size: 13px; font-weight: 700; transition: transform .15s var(--w-spring); }
.w-btn.allow { background: var(--w-glass); border-color: var(--w-glass); color: #06201b; box-shadow: 0 2px 0 #4fa592; }
.w-ask.pressed .w-btn.allow { transform: translateY(1px); box-shadow: none; background: #99e3d2; }
.w-ask-keys { padding: 0 12px 10px; font-size: 11px; color: var(--w-sand-faint); }
.w-ask.decided { box-shadow: none; opacity: .75; background: var(--w-reef); border-color: var(--w-line); }
.w-ask.decided .w-ask-acts, .w-ask.decided .w-ask-keys, .w-ask.decided .w-ask-desc { display: none; }
.w-verdict { padding: 0 12px 10px; font: 600 12px var(--f-mono); color: var(--w-glass); }
.w-meta { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; color: var(--w-sand-faint); font: 500 11px var(--f-mono); font-stretch: 88%; white-space: nowrap; }
.w-meta::before, .w-meta::after { content: ''; flex: 1; border-top: 1px dashed var(--w-line); }
.w-crit { align-self: center; margin: 2px 0 10px; padding: 4px 10px; border-radius: 99px; background: rgba(255, 209, 102, .14); border: 1px solid rgba(255, 209, 102, .5); color: var(--sun); font: 700 11px var(--f-mono); }

/* composer */
.w-composer { padding: 8px 12px 10px; border-top: 1px solid var(--w-line-soft); background: linear-gradient(rgba(7, 16, 18, 0), var(--w-abyss)); }
.w-status { display: flex; align-items: center; gap: 9px; margin: 0 2px 8px; font-size: 12.5px; color: var(--w-sand-dim); }
.w-status-crab { width: 10px; height: 10px; flex: none; background: var(--w-coral); filter: drop-shadow(0 0 4px rgba(255, 122, 92, .6)); }
@media (prefers-reduced-motion: no-preference) { .w-status-crab { animation: w-scuttle .5s steps(2) infinite; } }
@keyframes w-scuttle { to { transform: translateX(4px); } }
.w-status-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-status-time { font: 11.5px var(--f-mono); font-stretch: 88%; opacity: .8; }
.w-stop { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 90, 74, .55); color: #ffb3aa; border-radius: var(--w-r-sm); padding: 3px 8px 3px 10px; font-size: 12px; font-weight: 700; }
.w-stop kbd { background: transparent; border-color: currentColor; color: inherit; opacity: .7; }
.w-input { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 4px; background: var(--w-reef); border: 1px solid var(--w-line); border-radius: var(--w-r-lg); transition: border-color .15s, box-shadow .15s; }
.w-input.focus { border-color: var(--w-glass); box-shadow: 0 0 0 3px var(--w-glass-dim); }
.w-attach { width: 30px; height: 34px; flex: none; margin-right: -4px; display: grid; place-items: center; color: var(--w-sand-faint); }
.w-attach svg, .w-send svg { width: 16px; height: 16px; }
.w-text { flex: 1; min-width: 0; min-height: 34px; padding: 4px 0; font-size: 14px; line-height: 1.5; color: var(--w-sand); display: flex; align-items: center; }
.w-ph { color: var(--w-sand-faint); }
.w-text .caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: var(--w-glass); }
@media (prefers-reduced-motion: no-preference) { .w-text .caret { animation: caret 1s steps(2) infinite; } }
.w-send { width: 34px; height: 34px; flex: none; border-radius: var(--w-r); background: var(--w-coral); color: #1a0d09; display: grid; place-items: center; box-shadow: 0 2px 0 var(--w-coral-deep); transition: transform .15s var(--w-spring), background-color .15s; }
.w-send.queue { background: var(--w-reef-3); color: var(--w-glass); box-shadow: none; }
.w-send.press { transform: translateY(1px); box-shadow: none; }
.w-hint { display: flex; justify-content: space-between; gap: 8px; margin: 6px 4px 0; font-size: 11px; color: var(--w-sand-faint); white-space: nowrap; overflow: hidden; }
@media (max-width: 440px) { .w-hint > :first-child { display: none; } }

/* the bar along the bottom */
.w-dock { display: flex; height: 56px; padding: 0 4px; background: var(--w-abyss); border-top: 1px solid var(--w-line-soft); }
.w-dock-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--w-sand-dim); font: 700 11px/1 var(--f-body); }
.w-dock-btn > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-dock-btn > svg { width: 44px; height: 26px; padding: 4px 13px; border-radius: 99px; }
.w-dock-btn.active { color: var(--w-sand); }
.w-dock-btn.active > svg { background: var(--w-glass-dim); color: var(--w-glass); }
.w-dock-crab { width: 44px; height: 26px; border-radius: 99px; display: grid; place-items: center; }
.w-dock-crab img { width: 30px; height: auto; max-height: 22px; }
.w-dock-btn:first-child { color: var(--w-sand); }
@media (max-width: 440px) { .w-dock-btn > svg, .w-dock-crab { width: 36px; padding-inline: 9px; } .w-dock-btn { font-size: 10px; } }
.win [hidden] { display: none !important; }

/* The trophy card (panel/celebrate.js, card.css): rises above the task box,
   medallion, name and what earned it, the rewards in pixels, and a timer. */
.w-cel-host { position: absolute; left: 0; right: 0; bottom: 92px; z-index: 5; display: grid; justify-items: center; padding: 0 14px; pointer-events: none; }
.w-cel { position: relative; width: min(100%, 400px); display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; padding: 13px 14px 14px 13px; border-radius: var(--w-r-lg);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 193, 94, .16), transparent 55%), var(--w-reef);
  border: 1px solid rgba(255, 193, 94, .42); box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .25); overflow: hidden;
  animation: w-cel-in .45s var(--w-spring) both; }
.w-cel.leaving { animation: w-cel-out .22s ease-in forwards; }
@keyframes w-cel-in { from { transform: translateY(18px) scale(.94); opacity: 0; } }
@keyframes w-cel-out { to { transform: translateY(10px) scale(.97); opacity: 0; } }
.w-cel-medal { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffe3a3, #e0a33b 70%, #a8701c); box-shadow: 0 0 0 3px rgba(255, 193, 94, .25), inset 0 -3px 0 rgba(0, 0, 0, .2);
  animation: w-cel-medal 1.1s var(--w-spring) .1s both; }
.w-cel-medal span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #2b2006; font-size: 22px; line-height: 1; }
@keyframes w-cel-medal { 0% { transform: scale(.3) rotate(-30deg); } 60% { transform: scale(1.12) rotate(6deg); } 100% { transform: none; } }
.w-cel-body { min-width: 0; padding-right: 18px; }
.w-cel-eyebrow { margin: 1px 0; font: 600 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--w-amber); }
.w-cel-title { margin: 0; font: 600 19px/1.15 var(--f-pixel); color: var(--w-sand); }
.w-cel-text { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--w-sand-dim); }
.w-cel-rewards { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.w-cel-rewards li { display: grid; grid-template-columns: 38px 1fr; gap: 9px; align-items: center; padding: 5px 8px 5px 5px; border-radius: var(--w-r); background: rgba(6, 19, 22, .55); border: 1px solid var(--w-line-soft); }
.w-cel-thumb { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--w-abyss); }
.w-cel-thumb svg { display: block; max-width: 32px; max-height: 32px; width: auto; height: auto; image-rendering: pixelated; }
.w-cel-rname { display: grid; min-width: 0; line-height: 1.25; }
.w-cel-rname b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-cel-rname small { font: 600 9.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--w-sand-faint); }
.w-cel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.w-cel-actions .w-btn { flex: 0 0 auto; height: 30px; padding: 0 13px; }
.w-cel-actions .w-btn.primary { background: var(--w-coral); border-color: var(--w-coral); color: #1a0d09; box-shadow: 0 2px 0 var(--w-coral-deep); }
.w-cel-actions .w-btn.ghost { background: transparent; }
.w-cel-close { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; color: var(--w-sand-dim); }
.w-cel-close svg { width: 16px; height: 16px; }
.w-cel-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--w-amber), var(--w-coral)); transform-origin: left; animation: w-cel-timer var(--show-ms, 9s) linear forwards; }
@keyframes w-cel-timer { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .w-cel, .w-cel-medal, .w-cel-timer { animation: none; } }