/* Evertrail Idle client · persistent shell: top bar, skills, stage, docks, chat */
.ia-client {
  position: fixed; inset: 0; z-index: 1;
  display: grid;
  grid-template-columns: var(--left) minmax(0, 1fr) var(--right);
  grid-template-rows: var(--top) minmax(0, 1fr);
  column-gap: var(--gap);
  padding: 0 var(--pad) var(--pad);
}
.ia-client[hidden] { display: none; }
#ia-mnav { display: contents; }

/* ------------------------------------------------------------------ Top bar */
.topbar {
  grid-column: 1 / -1; position: relative;
  display: flex; align-items: center; gap: .9rem;
  margin: 0 calc(var(--pad) * -1) var(--gap); padding: 0 var(--pad);
  background: linear-gradient(180deg, rgba(18, 28, 46, .96), rgba(8, 13, 23, .94));
  border-bottom: 1px solid rgba(214, 170, 96, .45);
  box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(0, 0, 0, .6);
}
.topbar::after { content: ""; position: absolute; left: 50%; bottom: -.32rem; width: .6rem; height: .6rem; translate: -50% 0; rotate: 45deg; background: linear-gradient(135deg, var(--gold-1), var(--gold-3)); border: 1px solid #000; }
.brand { display: flex; align-items: center; gap: .6rem; width: calc(var(--left) - .9rem); flex: none; }
.brand .ia-emblem { width: 2.5rem; height: 2.5rem; }
.brand-logo { object-fit: contain; filter: drop-shadow(0 .12rem .25rem rgba(0, 0, 0, .7)); }
.brand .brand-logo { width: 2.9rem; height: 2.9rem; margin: -.2rem 0; }
.brand strong { display: block; font: 700 1.2rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.brand small { display: block; margin-top: .2rem; color: var(--text-3); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; }

.now-playing {
  --skill: var(--gold-2);
  flex: 1 1 auto; max-width: 34rem; min-width: 0;
  display: flex; align-items: center; gap: .7rem;
  padding: .35rem .45rem .35rem .4rem;
  border-radius: 2rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--skill) 16%, rgba(0, 0, 0, .35)), rgba(0, 0, 0, .35));
  border: 1px solid color-mix(in srgb, var(--skill) 40%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}
.now-playing .medal { --size: 2.45rem; }
.np-copy { flex: 1; min-width: 0; display: grid; gap: .18rem; }
.np-copy strong { font: 600 .95rem/1.1 var(--font-display); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-copy small { color: var(--text-3); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-copy .bar { --fill: var(--skill); height: .28rem; }
.now-playing .btn { border-radius: 1.2rem; }
.now-playing.is-idle { --skill: #7d8799; }
.now-playing.is-idle .np-copy strong { color: var(--text-2); }

.top-stats { display: flex; align-items: center; gap: .45rem; margin-left: auto; }
.stat-pill {
  display: inline-flex; align-items: center; gap: .45rem; height: 2.35rem; padding: 0 .75rem 0 .4rem;
  border-radius: 1.2rem; border: 1px solid var(--edge-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .3));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  font-family: var(--font-num); color: var(--text-1); white-space: nowrap;
  transition: border-color .15s, background .15s;
}
button.stat-pill:hover { border-color: var(--edge-strong); background: linear-gradient(180deg, rgba(242, 198, 106, .12), rgba(0, 0, 0, .3)); }
.stat-pill .ia-emblem { width: 1.55rem; height: 1.55rem; }
.stat-pill b { font-weight: 700; font-size: .95rem; }
.stat-pill small { color: var(--text-3); font-size: .7rem; font-family: var(--font-ui); }
.stat-pill.is-warn b { color: var(--ember); }
/* The Store sits beside the gold that buys from it. */
.store-pill .pill-label { font: 650 .85rem var(--font-ui); letter-spacing: .02em; }
.store-pill .sr-badge { min-width: 1.2rem; height: 1.2rem; font-size: .68rem; margin-right: -.3rem; }
.store-pill.is-active { border-color: color-mix(in srgb, var(--gold-2) 70%, transparent); background: linear-gradient(180deg, rgba(242, 198, 106, .2), rgba(0, 0, 0, .3)); }

.unit-frame { display: flex; align-items: center; gap: .55rem; padding: .2rem .7rem .2rem .25rem; border-radius: 2rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .3); text-align: left; transition: border-color .15s; }
.unit-frame:hover { border-color: var(--edge-strong); }
.portrait { position: relative; width: 2.6rem; height: 2.6rem; border-radius: 50%; overflow: hidden; flex: none; background: radial-gradient(circle at 50% 30%, #3b5577, #111c2e 75%); box-shadow: 0 0 0 2px var(--gold-3), 0 0 0 3px #000; }
.portrait .q-host { position: absolute; inset: 0; min-height: 0; }
.portrait .initial { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.1rem var(--font-display); color: var(--gold-1); }
.portrait .q-host[data-status="ready"] + .initial { display: none; }
.unit-frame strong { display: block; font: 600 .9rem/1.1 var(--font-display); }
.unit-frame small { color: var(--text-3); font-size: .68rem; }
.unit-frame .ia-glyph { color: var(--text-3); width: .8rem; }

.popover { position: fixed; z-index: 70; min-width: 15rem; padding: .9rem; animation: menu-in .15s var(--ease-out); }
.popover h3 { margin: 0 0 .5rem; font: 600 1.05rem var(--font-display); color: var(--gold-1); }
.popover .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--edge-soft); font-size: .82rem; }
.popover .row:last-of-type { border-bottom: 0; }
.popover input[type="range"] { width: 8rem; accent-color: var(--gold-2); }
.toggle { position: relative; width: 2.3rem; height: 1.3rem; border-radius: 1rem; background: rgba(0, 0, 0, .5); border: 1px solid var(--edge-soft); transition: background .15s; }
.toggle::after { content: ""; position: absolute; top: .12rem; left: .14rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--text-3); transition: translate .18s var(--ease-out), background .18s; }
.toggle[aria-pressed="true"] { background: var(--emerald-3); border-color: var(--emerald-2); }
.toggle[aria-pressed="true"]::after { translate: 1rem 0; background: var(--emerald); }

/* ------------------------------------------------------------- Skill rail */
.skillbar { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; padding-top: 1.1rem; }
.skill-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .2rem .45rem .5rem; }
.skill-group + .skill-group { margin-top: .5rem; }
.skill-group > header { display: flex; align-items: center; gap: .5rem; padding: .45rem .45rem .3rem; color: var(--gold-3); }
.skill-group > header::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--edge), transparent); }
.skill-row {
  --skill: var(--gold-2);
  position: relative; width: 100%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem;
  padding: .32rem .5rem .32rem .38rem; margin: .1rem 0;
  border-radius: .5rem; border: 1px solid transparent;
  text-align: left; color: var(--text-1);
  transition: background .15s, border-color .15s;
}
.skill-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--skill) 14%, transparent), rgba(255, 255, 255, .02)); border-color: rgba(255, 255, 255, .06); }
.skill-row.is-viewing { background: linear-gradient(90deg, color-mix(in srgb, var(--skill) 26%, transparent), color-mix(in srgb, var(--skill) 6%, transparent)); border-color: color-mix(in srgb, var(--skill) 55%, transparent); box-shadow: inset 0 0 1rem color-mix(in srgb, var(--skill) 14%, transparent); }
.skill-row.is-viewing::before { content: ""; position: absolute; left: -.46rem; top: 22%; bottom: 22%; width: .2rem; border-radius: 1rem; background: var(--skill); box-shadow: 0 0 .6rem var(--skill); }
.skill-row .medal { --size: 2.2rem; }
.sr-name { display: grid; gap: .28rem; min-width: 0; font-weight: 600; font-size: .9rem; }
.sr-name > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-name .bar { --fill: var(--skill); height: .22rem; }
.sr-level { min-width: 2rem; text-align: right; font: 700 1.15rem/1 var(--font-num); color: var(--text-1); text-shadow: 0 1px 0 #000; }
.sr-level small { display: block; font: 600 .55rem/1 var(--font-ui); letter-spacing: .12em; color: var(--text-3); margin-top: .12rem; }
.skill-row.is-soon .sr-name, .skill-row.is-soon .sr-level { color: var(--text-3); }
.skill-row.is-soon .medal .ia-emblem { filter: grayscale(.85) brightness(.8) drop-shadow(0 .08rem .08rem #000); opacity: .75; }
.skill-row .soon { font: 700 .58rem var(--font-ui); letter-spacing: .12em; color: var(--text-3); border: 1px solid var(--edge-soft); border-radius: 1rem; padding: .12rem .38rem; }
.skill-row .working { position: absolute; right: .45rem; top: .3rem; width: .42rem; height: .42rem; border-radius: 50%; background: var(--skill, var(--emerald)); box-shadow: 0 0 .5rem var(--skill, var(--emerald)); }
.skill-row.is-working .sr-level { color: color-mix(in srgb, var(--skill, var(--emerald)) 40%, #fff); }
.skillbar-foot { display: flex; align-items: center; gap: .55rem; padding: .55rem .85rem .65rem; border-top: 1px solid var(--edge-soft); background: linear-gradient(0deg, rgba(0, 0, 0, .3), transparent); }
.skillbar-foot .ia-emblem { width: 1.8rem; height: 1.8rem; }
.skillbar-foot strong { display: block; font: 700 1rem/1 var(--font-num); }
.skillbar-foot small { color: var(--text-3); font-size: .66rem; }
.skillbar-foot .save { margin-left: auto; }

/* ------------------------------------------------------------ Center stage */
.center { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--gap); }
.stage-host { position: relative; min-height: 0; min-width: 0; }
.stage { position: absolute; inset: 0; overflow: hidden; }
.stage.is-scroll { overflow-y: auto; overflow-x: hidden; padding: .9rem .1rem .1rem; }
.world-layer { position: absolute; inset: 0; }

/* -------------------------------------------------------------------- Chat */
.chat { display: flex; flex-direction: column; height: 12.25rem; transition: height .25s var(--ease-out); }
.chat.is-collapsed { height: 2.6rem; }
.chat-head { display: flex; align-items: center; gap: .25rem; padding: .3rem .45rem 0; border-bottom: 1px solid var(--edge-soft); }
.chat-tab { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .75rem .5rem; font-size: .78rem; font-weight: 650; color: var(--text-3); border-radius: .4rem .4rem 0 0; transition: color .15s, background .15s; }
.chat-tab:hover { color: var(--text-1); }
.chat-tab[aria-pressed="true"] { color: var(--gold-1); background: linear-gradient(180deg, rgba(242, 198, 106, .14), transparent); }
.chat-tab[aria-pressed="true"]::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 2px; background: var(--gold-2); box-shadow: 0 0 .5rem var(--gold-2); }
.chat-tab .ia-glyph { width: .8rem; height: .8rem; opacity: .7; }
.chat-head .spacer { flex: 1; }
.chat-log { flex: 1; overflow-y: auto; padding: .45rem .8rem; font-size: .82rem; line-height: 1.5; }
.chat-line { display: flex; gap: .55rem; padding: .08rem 0; animation: fade-in .3s ease-out; }
.chat-line time { flex: none; color: var(--text-4); font: 600 .72rem/1.75 var(--font-num); }
.chat-line .who { flex: none; font-weight: 700; }
.chat-line.k-reward .who { color: var(--gold-2); }
.chat-line.k-level .who { color: var(--emerald); }
.chat-line.k-equip .who { color: var(--azure); }
.chat-line.k-rare .who { color: var(--rar-epic); }
.chat-line.k-warn .who { color: var(--ember); }
.chat-line.k-system .who { color: var(--text-3); }
.chat-line.k-level span:last-child { color: #d4f7dc; }
.chat-line.k-rare span:last-child { color: #ead9ff; }
.chat-input { display: flex; align-items: center; gap: .5rem; margin: 0 .5rem .5rem; padding: .3rem .35rem .3rem .7rem; border-radius: .4rem; border: 1px solid var(--edge-soft); background: rgba(0, 0, 0, .35); }
.chat-input span { font: 700 .62rem var(--font-ui); letter-spacing: .12em; color: var(--gold-3); }
.chat-input input { flex: 1; border: 0; background: none; outline: none; color: var(--text-2); font-size: .8rem; }
.chat-empty { display: grid; place-items: center; gap: .3rem; height: 100%; text-align: center; color: var(--text-3); font-size: .8rem; }
.chat-empty strong { font: 600 .95rem var(--font-display); color: var(--text-2); }
/* Global and Area chat (docs/MULTIPLAYER.md): a log line with a channel tag and a name; the SAY line picks the channel. */
.chat-tab-place { display: inline-block; max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-weight: 600; }
.chat-unread { position: absolute; top: .38rem; right: .32rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 .45rem var(--gold-2); }
.chat-line.k-chat .who { color: #8fd0ff; }
.chat-line.k-chat.ch-area .who { color: #8be0a6; }
.chat-name { flex: none; font-weight: 700; color: var(--gold-1); }
.chat-name::after { content: ":"; color: var(--text-3); }
.chat-line.is-own .chat-name { color: var(--gold-2); }
.chat-text { min-width: 0; color: var(--text-1); overflow-wrap: anywhere; }
.chat-line.is-pending { opacity: .55; }
.chat-peek.is-talk .chat-name { font-weight: 700; color: var(--gold-2); }
.chat-peek.is-talk .chat-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.chat-input .chat-say { flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .45rem; border-radius: .3rem; font: 700 .62rem var(--font-ui); letter-spacing: .12em; color: #8fd0ff; border: 1px solid rgba(143, 208, 255, .28); background: rgba(143, 208, 255, .07); }
.chat-input .chat-say.ch-area { color: #8be0a6; border-color: rgba(139, 224, 166, .3); background: rgba(139, 224, 166, .07); }
.chat-input .chat-say.is-fixed { padding: .16rem 0; border-color: transparent; background: none; }
.chat-input .chat-say.is-fixed:not(.ch-global):not(.ch-area) { color: var(--gold-3); }
.chat-input .chat-say .ia-glyph { width: .72rem; height: .72rem; opacity: .75; }
.chat-input button.chat-say:hover:not(:disabled) { border-color: currentColor; filter: brightness(1.15); }
.chat-input button.chat-say:disabled { opacity: .85; cursor: default; }
.chat-input:focus-within { border-color: var(--edge); box-shadow: 0 0 0 2px rgba(242, 198, 106, .1); }
.chat-input input { min-width: 0; color: var(--text-1); }
.chat-input input::placeholder { color: var(--text-4); }
.chat-input input:disabled { cursor: not-allowed; }

/* ---------------------------------------------------------- Right column */
.rightcol { grid-column: 3; grid-row: 2; min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }
.dock { display: flex; flex-direction: column; min-height: 0; }
.dock-head { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem .45rem .6rem; border-bottom: 1px solid var(--edge-soft); background: linear-gradient(180deg, rgba(255, 236, 190, .05), transparent); border-radius: var(--radius) var(--radius) 0 0; cursor: pointer; }
.dock-head .ia-emblem { width: 1.45rem; height: 1.45rem; }
.dock-head h3 { margin: 0; font: 600 1rem/1 var(--font-display); color: var(--gold-1); text-shadow: 0 1px 0 #000; }
.dock-head .meta { margin-left: auto; font: 600 .8rem var(--font-num); color: var(--text-2); }
.dock-head .meta b { color: var(--text-1); }
.dock-head .fold { color: var(--text-3); transition: rotate .2s; }
.dock.is-collapsed .fold { rotate: -90deg; }
.dock.is-collapsed .dock-body { display: none; }
.dock.is-collapsed .dock-head { border-bottom-color: transparent; border-radius: var(--radius); }
.dock-body { min-height: 0; }
.dock.gear { flex: 1 1 auto; min-height: 0; }
.popover .graphics-row { flex-wrap: wrap; row-gap: .35rem; }
.popover .graphics-row > span { display: grid; gap: .1rem; }
.popover .graphics-row small { font-size: .7rem; color: var(--text-3); }
/* A name in chat opens that adventurer's profile (views/profile.mjs). */
button.chat-name { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--gold-1); cursor: pointer; }
button.chat-name:hover, button.chat-name:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.chat-line.is-own button.chat-name { color: var(--gold-2); }
/* Staff roles (roles.mjs): the Owner wears a crown badge in the house colours and a gilded name, in chat, the people
   tooltips and profiles. The badge is a still gradient, the same on every line. */
.chat-role { flex: none; align-self: center; display: inline-flex; align-items: center; gap: .22rem; padding: .04rem .42rem .04rem .3rem; border-radius: .3rem; font: 800 .6rem/1.55 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.chat-role .ia-glyph { width: .82rem; height: .82rem; }
.chat-role.role-owner { color: #2b1200; background: linear-gradient(100deg, #fff1b8 0%, #ffc94d 30%, #ff8a3d 60%, #ff4f7a 100%); box-shadow: 0 0 .6rem rgba(255, 160, 60, .5), inset 0 0 0 1px rgba(255, 255, 255, .4); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.chat-line.role-owner { margin-left: -.55rem; padding-left: .5rem; border-left: 2px solid #ffb347; border-radius: .25rem; background: linear-gradient(90deg, rgba(255, 179, 71, .14), rgba(200, 107, 255, .05) 45%, transparent 75%); }
.chat-line.role-owner .chat-name, .chat-peek.is-talk .chat-role.role-owner + .chat-name { background: linear-gradient(180deg, #fff6d2, #ffd466 50%, #ff9a3c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 .3rem rgba(255, 160, 60, .6)); }
.chat-line.role-owner .chat-text { color: #fff4df; }
.chat-peek .chat-role { font-size: .55rem; }
.tip-role { display: inline-flex; color: #ffc94d; filter: drop-shadow(0 0 .25rem rgba(255, 160, 60, .6)); }
.tip-role .ia-glyph { width: .8rem; height: .8rem; }
/* The Queen (roles.mjs): a heart-crowned badge in rose and lilac, a rose-gold name and a soft pink edge. */
.chat-role.role-queen { color: #3b0a2a; background: linear-gradient(100deg, #ffe6f3 0%, #ffa6d2 35%, #ff6fb5 65%, #c28bff 100%); box-shadow: 0 0 .6rem rgba(255, 110, 180, .5), inset 0 0 0 1px rgba(255, 255, 255, .45); text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
.chat-line.role-queen { margin-left: -.55rem; padding-left: .5rem; border-left: 2px solid #ff8fc8; border-radius: .25rem; background: linear-gradient(90deg, rgba(255, 143, 200, .14), rgba(194, 139, 255, .05) 45%, transparent 75%); }
.chat-line.role-queen .chat-name, .chat-peek.is-talk .chat-role.role-queen + .chat-name { background: linear-gradient(180deg, #fff0f8, #ffb8dc 50%, #ff78b9); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 .3rem rgba(255, 120, 185, .55)); }
.chat-line.role-queen .chat-text { color: #fff0f6; }
.tip-role.role-queen { color: #ff9fd0; filter: drop-shadow(0 0 .25rem rgba(255, 120, 185, .6)); }