/* groupchat - concept UI, old Facebook (circa 2008-2012) pastiche.
   Palette:
   navy    #3B5998   blue bar, headers, links
   midblue #6D84B4   secondary bar / box head border
   pale    #D8DFEA   box head fill
   page    #E9EBEE   page background
   line    #B3B3B3 / #CCCCCC  borders
   Motion budget: chat message entry (200ms), typing line, popup slide-up (260ms), bar widths.
   Nothing else animates.
*/

* { box-sizing: border-box; }

:root {
  --navy: #3B5998;
  --midblue: #6D84B4;
  --pale: #D8DFEA;
  --palealt: #EDEFF4;
  --page: #E9EBEE;
  --line: #B3B3B3;
  --line2: #CCCCCC;
  --text: #333333;
  --grey: #777777;
  --greyd: #666666;
}

html { background: #E9EBEE; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "Lucida Grande", Tahoma, Verdana, Geneva, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.28;
}

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: bold; }
:focus-visible { outline: 2px solid #1d3c78; outline-offset: 1px; }
::selection { background: var(--midblue); color: #fff; }

/* ---------- blue bar ---------- */

.bluebar {
  background: #3B5998;
  border-bottom: 1px solid #133783;
  box-shadow: 0 1px 0 #5f78ab inset;
  position: sticky;
  top: 0;
  z-index: 40;
}

.bluebar-in {
  max-width: 1000px;
  margin: 0 auto;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
}

.wordmark {
  color: #fff;
  font-family: Tahoma, Geneva, Verdana, sans-serif;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: -0.5px;
  text-transform: lowercase;
  padding: 0 8px 2px 4px;
  line-height: 1;
}
.wordmark:hover { text-decoration: none; }

.bb-account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-weight: bold;
  padding: 3px 6px;
  border-radius: 2px;
  /* The chip is the you-modal trigger (2026-09-14): button reset keeps the
     retro chrome identical to the old static span pair. */
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.bb-account:hover { background: rgba(255, 255, 255, 0.15); }
.bb-acct-pic {
  width: 18px; height: 18px;
  background: #8a9dc1;
  border: 1px solid #29447E;
  color: #fff;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}
.bb-acct-name { font-size: 11px; }

/* ---------- page shell ---------- */

.page { max-width: 1000px; margin: 0 auto; padding: 10px 10px 40px; }

/* ---------- generic old-FB box ---------- */

.box {
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 10px;
}

.box-head {
  background: var(--pale);
  border-bottom: 1px solid var(--line2);
  color: var(--navy);
  font-weight: bold;
  font-size: 11px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.head-count {
  background: #fff;
  border: 1px solid var(--line2);
  color: var(--greyd);
  font-weight: normal;
  padding: 0 4px;
}

.head-right {
  margin-left: auto;
  color: var(--greyd);
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 4px;
}

.livedot {
  width: 6px; height: 6px;
  background: #8ec63f;
  border: 1px solid #5c8a22;
  display: inline-block;
}

.box-body { padding: 8px; }
.box-body.nopad { padding: 0; }

.hr { border-top: 1px solid #e5e5e5; margin: 7px 0; }

.small-grey { color: var(--greyd); font-size: 11px; margin: 3px 0; }

/* ---------- profile header: cover + pic + tab strip ---------- */

.profile-header {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 10px;
}

.cover {
  position: relative;
  height: 258px;
  overflow: hidden;
  background: #24365c;
}

/* abstract CSS cover art: layered blue gradients + soft light bands */
.cover-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.30), rgba(255,255,255,0) 46%),
    radial-gradient(circle at 22% 82%, rgba(109,132,180,0.55), rgba(109,132,180,0) 55%),
    linear-gradient(118deg, #1d2b4f 0%, #2b3f6b 100%);
  background-color: #22335a;
}
.cover-art::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(105deg, rgba(255,255,255,0.10) 0 12%, rgba(255,255,255,0) 12% 26%),
    linear-gradient(105deg, rgba(255,255,255,0.06) 0 6%, rgba(255,255,255,0) 6% 19%),
    linear-gradient(75deg, rgba(59,89,152,0.55) 0 30%, rgba(59,89,152,0) 30% 100%);
}
.cover-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.42) 100%);
}

.cover-name {
  position: absolute;
  left: 216px;
  bottom: 14px;
  color: #fff;
  font-family: "Lucida Grande", Tahoma, sans-serif;
  font-size: 34px;
  font-weight: bold;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.65), 0 0 12px rgba(0,0,0,0.35);
  z-index: 3;
}

.cover-actions {
  position: absolute;
  right: 12px;
  bottom: 16px;
  display: flex;
  gap: 6px;
  z-index: 3;
}

/* old-FB white cover button */
.fbtn {
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  color: #3B5998;
  background: #fff;
  background-image: linear-gradient(to bottom, #ffffff, #f2f3f7);
  border: 1px solid #b5b8c0;
  border-radius: 2px;
  padding: 5px 11px;
  cursor: pointer;
  line-height: 15px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
.fbtn:hover { background-image: linear-gradient(to bottom, #ffffff, #e9ebf0); }
.fbtn:active { background-image: none; background: #e6e8ee; }
.fbtn-dots { padding: 5px 9px; font-size: 13px; letter-spacing: 1px; }

/* square profile picture overlapping bottom-left of cover */
.pic-slot {
  position: absolute;
  left: 18px;
  top: 92px;
  z-index: 4;
}
.pic-frame {
  position: relative;
  width: 178px; height: 178px;
  background: #fff;
  border: 1px solid #b5b8c0;
  padding: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.30);
}
.pic-img {
  width: 100%; height: 100%;
  background: #6D84B4;
  background-image: linear-gradient(150deg, #7b90bd 0%, #3B5998 60%, #29447E 100%);
  color: #fff;
  font-family: Tahoma, sans-serif;
  font-size: 56px;
  font-weight: bold;
  letter-spacing: -2px;
  display: flex; align-items: center; justify-content: center;
}
.pic-cam {
  position: absolute;
  left: 11px; bottom: 11px;
  width: 26px; height: 19px;
  background: rgba(0,0,0,0.55);
  border-radius: 3px;
}
.pic-cam::before {
  content: "";
  position: absolute;
  left: 8px; top: 5px;
  width: 10px; height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
}
.pic-cam::after {
  content: "";
  position: absolute;
  left: 7px; top: -3px;
  width: 8px; height: 4px;
  background: rgba(0,0,0,0.55);
  border-radius: 2px 2px 0 0;
}

/* white tab strip below the cover */
.tabstrip {
  background: #fff;
  height: 46px;
  padding-left: 212px;
  display: flex;
  align-items: stretch;
  border-top: 1px solid #e5e5e5;
}
.tab {
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  color: #3B5998;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { background: #f2f3f7; }
.tab-active {
  color: #333;
  border-bottom-color: #3B5998;
  cursor: default;
}
.tab-active:hover { background: none; }
.tab-count { color: #9197a3; font-weight: normal; font-size: 12px; margin-left: 3px; }

.infotable { border-collapse: collapse; font-size: 11px; }
.infotable th {
  text-align: right;
  color: var(--grey);
  font-weight: normal;
  padding: 1px 6px 1px 0;
  vertical-align: top;
  white-space: nowrap;
  width: 92px;
}
.infotable td { padding: 1px 0; color: var(--text); }
.infotable.money { width: 100%; }
.infotable.money th { width: auto; text-align: left; }
.infotable.money td { text-align: right; font-weight: bold; }

/* ---------- old gradient buttons ---------- */

.btn-blue, .btn-grey {
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
  line-height: 16px;
}
.btn-blue {
  color: #fff;
  border: 1px solid #29447E;
  border-bottom-color: #1a356e;
  background: #5B74A8;
  background-image: linear-gradient(to bottom, #6d84b4 0%, #5b74a8 50%, #4f699e 51%, #4a659c 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset;
}
.btn-blue:hover { background-image: linear-gradient(to bottom, #7b90bd 0%, #6379ac 50%, #556ea2 51%, #4f699e 100%); }
.btn-blue:active { background: #4a659c; box-shadow: none; }
.btn-grey {
  color: #333;
  border: 1px solid #999;
  background: #eee;
  background-image: linear-gradient(to bottom, #fff 0%, #eceef2 50%, #dfe3ea 51%, #d8dee7 100%);
}
.btn-grey:hover { background-image: linear-gradient(to bottom, #fff 0%, #f4f5f8 50%, #e7eaf0 51%, #e0e5ec 100%); }
.btn-wide { display: block; width: 100%; margin-top: 7px; padding: 3px 0; }

/* ---------- loop strip ---------- */

.loop-body p { margin: 0 0 6px; font-size: 11px; line-height: 1.5; color: #333; }
.loop-note { color: var(--grey); font-style: italic; }

/* ---------- columns ---------- */

.cols { display: flex; gap: 10px; align-items: flex-start; }
.col-left { width: 226px; flex: none; }
.col-mid { flex: 1; min-width: 0; }
.col-right { width: 210px; flex: none; }

/* ---------- agent roster rows ---------- */

.agent-row {
  display: flex;
  gap: 7px;
  padding: 7px;
  border-bottom: 1px solid #e5e5e5;
}
.agent-row:last-child { border-bottom: 0; }
.agent-row.dying { background: #FFF9D7; }

.sq {
  width: 40px; height: 40px;
  flex: none;
  border: 1px solid var(--line);
  color: #fff;
  font-family: Tahoma, sans-serif;
  font-weight: bold;
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.sq-sm { width: 32px; height: 32px; font-size: 14px; }
.sq-xs { width: 24px; height: 24px; font-size: 11px; }
.sq-mabel { background: #d1a02a; }

.agent-info { min-width: 0; flex: 1; }
.agent-name { color: var(--navy); font-weight: bold; font-size: 11px; word-break: break-word; }
.agent-tag { color: var(--grey); font-style: italic; }
.agent-bal { margin-top: 2px; color: #333; }
.agent-bal b { color: #2e6e2e; }
.agent-budget { color: var(--greyd); }
.agent-last { color: var(--grey); margin-top: 2px; }
.agent-row .deposit-addr-inline { margin-top: 3px; }

/* ---------- old progress bar ---------- */

.oldbar {
  height: 9px;
  background: #fff;
  border: 1px solid var(--line);
  margin: 4px 0;
  overflow: hidden;
}
.oldbar-fill {
  height: 100%;
  width: 0;
  background: #6D84B4;
  background-image: linear-gradient(to bottom, #8ba0c8, #5b74a8);
  transition: width 500ms ease-out;
}
.oldbar-fill.given { background-image: linear-gradient(to bottom, #8fc07a, #5c8a3c); }

/* ---------- mabel alert ---------- */

.alert-box { border-color: #E2C822; }
.alert-head { background: #FFF3B0; border-bottom-color: #E2C822; color: #7a5c00; }
.alert-row { display: flex; gap: 7px; }
.alert-copy { min-width: 0; }
.alert-sub { color: var(--greyd); margin-top: 2px; }
.dw-line { margin-top: 6px; color: #333; }
.dw-count { font-family: Tahoma, monospace; }
.dw-goal { color: var(--greyd); }

/* ---------- notifications list ---------- */

.notif-list { max-height: 210px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 6px;
  padding: 6px 7px;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
}
.notif-item.fresh { background: #EDEFF4; }
.notif-item:last-child { border-bottom: 0; }
.notif-copy { min-width: 0; }
.notif-time { color: var(--grey); font-size: 10px; margin-top: 1px; }
.notif-empty { padding: 10px 8px; color: var(--grey); }

/* ---------- the chat window ---------- */

.chat-box { border-color: #29447E; }

.chat-head {
  background: #6D84B4;
  background-image: linear-gradient(to bottom, #7c92bd, #5b74a8);
  border-bottom: 1px solid #29447E;
  color: #fff;
  padding: 4px 8px;
}
.chat-title { font-weight: bold; font-size: 11px; }
.chat-head-right {
  margin-left: auto;
  color: #e2e8f4;
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  padding: 2px;
  margin-left: 3px;
  border: 1px solid #29447E;
  border-radius: 2px;
  background: #3B5998;
  color: #fff;
  cursor: pointer;
}
.chat-sound-toggle:hover { background: #29447E; }
.chat-sound-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.chat-sound-toggle[aria-pressed="false"] { color: #c4cde0; }
.ondot {
  width: 7px; height: 7px;
  background: #8ec63f;
  border: 1px solid #4e7a18;
  border-radius: 50%;
  display: inline-block;
}

.chat-log {
  height: 560px;
  overflow-y: auto;
  background: #F7F7F7;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
}

.chat-typing {
  height: 15px;
  padding: 0 8px;
  background: #F7F7F7;
  border-top: 1px solid #E3E6EB;
  color: var(--grey);
  font-size: 10px;
  font-style: italic;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The honest "X is typing" state: same strip, same tone, with the animated
   dots a chat human expects. The dots animate, the text does not move. */
.typing-dots span {
  animation: typing-dot 1.2s infinite;
  opacity: 0.2;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.2; }
  30% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots span { animation: none; opacity: 0.6; }
}

.chat-entry {
  background: var(--palealt);
  border-top: 1px solid var(--line2);
  padding: 6px 7px;
  /* The @ mention popup is absolutely positioned against this box, so the
     list floats above the textarea instead of pushing the composer down and
     shifting the whole chat log every time somebody types an @. */
  position: relative;
}
.entry-row { display: flex; gap: 5px; align-items: flex-start; }

/* Exact-message reply context. Desktop double-click opens this; touch
   layouts keep their existing gestures and can only see it after an
   explicit reply action is introduced elsewhere. */
.composer-reply {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -1px 0 5px;
  padding: 4px 5px;
  border-left: 3px solid var(--navy);
  background: #fff;
  color: #333;
}
.composer-reply-copy { min-width: 0; flex: 1; }
.composer-reply-copy b,
.composer-reply-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-reply-copy b { color: var(--navy); font-size: 10px; }
.composer-reply-copy span { color: var(--greyd); font-size: 10px; }
.composer-reply-cancel {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--greyd);
  font: bold 16px/1 Arial, sans-serif;
  padding: 3px 5px;
  cursor: pointer;
}
.composer-reply-cancel:hover,
.composer-reply-cancel:focus-visible { color: var(--navy); }

/* ---------- @ mention autocomplete ----------
   Same flat retro register as .roomlist and the gift list: a bordered white
   panel, small text, one avatar square per row. It opens UPWARDS (bottom
   anchored to the top of the composer) because the composer sits at the
   bottom of the chat box and a downward list would fall off the card. */
.mention-pop {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: calc(100% - 1px);
  z-index: 40;
  max-height: 168px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line2);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.14);
}
.mention-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.mention-row:last-child { border-bottom: none; }
/* One highlight class for keyboard and pointer alike, so the row Enter would
   take and the row under the finger are never two different rows. */
.mention-row-on { background: var(--palealt); }
.mention-mid { min-width: 0; }
.mention-name {
  font-size: 11px;
  font-weight: bold;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mention-tag {
  font-size: 10px;
  color: var(--greyd);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-entry textarea {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 11px;
  line-height: 15px;
  height: 24px;
  border: 1px solid #BDC7D8;
  padding: 4px 5px;
  resize: none;
  color: #333;
}
.btn-send { flex: none; padding: 3px 12px; }
.composer-foot { display: flex; align-items: center; margin-top: 4px; }
.composer-hint { color: var(--greyd); margin-right: auto; font-size: 10px; }

/* chat rows */

.post {
  display: flex;
  gap: 6px;
  padding: 3px 8px 4px;
  background: #F7F7F7;
}
.post.user { background: #F7F7F7; }
.post.agentpost { background: #FFFFFF; }
.post.whisper { background: #F4F1FA; }
.post.muted { opacity: 0.72; }

.post .sq-sm { width: 24px; height: 24px; font-size: 11px; border-radius: 1px; }

.post-body { min-width: 0; flex: 1; }
.post-head { display: flex; align-items: baseline; gap: 5px; }
.post-name {
  font-weight: bold;
  color: var(--navy);
  font-size: 11px;
  word-break: break-word;
}
.post-name::after { content: ":"; }
.post-status {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #8ec63f;
  border: 1px solid #4e7a18;
  display: inline-block;
  flex: none;
  margin-right: 1px;
}
.post-time {
  color: #9a9a9a;
  font-size: 10px;
  margin-left: auto;
  padding-left: 6px;
  white-space: nowrap;
}
.post-text {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.42;
  color: #333;
  word-wrap: break-word;
}
.post-seen { font-size: 10px; color: #a3a3a3; margin-top: 1px; }

.mention { color: var(--navy); }

.tag {
  font-size: 9px;
  border: 1px solid var(--line2);
  background: var(--palealt);
  color: var(--greyd);
  padding: 0 3px;
  font-weight: normal;
}

/* The human counterpart to the `agent` badge. Tinted rather than merely
   labelled, because the two badges are read at a glance while scrolling and
   identical chrome in two colours is faster to tell apart than two words in
   the same colour. Same size and weight as .tag so neither kind of speaker
   is given more visual authority than the other. */
.tag-human {
  border-color: #b9c8de;
  background: #eef3fa;
  color: #41608c;
}

.post-gift, .post-event, .post-lock, .post-incoming, .post-buy {
  margin-top: 3px;
  padding: 2px 5px;
  font-size: 10px;
  border: 1px solid var(--line2);
  display: inline-block;
}
.post-gift { background: #EAF3E4; border-color: #BBD6A8; color: #38621f; }
.post-event { background: #FDECEA; border-color: #E4B3AC; color: #8a2c20; }
.post-lock { background: #F0F0F0; color: var(--greyd); }
.post-incoming {
  background: #E7EEF9;
  border-color: #A9BFDF;
  color: #29447E;
  font-family: "Lucida Console", Consolas, Monaco, monospace;
}
.post-buy {
  background: #FFF3B0;
  border-color: #E2C822;
  color: #7a5c00;
  font-weight: bold;
}

/* ---------- deposit address block ---------- */

.deposit {
  margin-top: 10px;
  background: var(--palealt);
  border: 1px solid var(--line2);
  padding: 7px 8px;
}
.deposit-label { color: var(--navy); font-weight: bold; margin-bottom: 4px; }
.deposit-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.deposit-addr {
  font-family: "Lucida Console", Consolas, Monaco, monospace;
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 3px 5px;
  color: #333;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}
.deposit-addr-inline {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  flex: none;
  color: var(--greyd);
}
.deposit-copy { flex: none; padding: 3px 10px; }
.deposit-copy.copied {
  color: #38621f;
  border-color: #BBD6A8;
  background-image: linear-gradient(to bottom, #f2f9ee 0%, #e4f0dc 100%);
}
.deposit-note { color: var(--greyd); margin-top: 5px; line-height: 1.45; }

.msg-enter { animation: postIn 200ms ease-out; }
@keyframes postIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- right column bits ---------- */

.roomlist { margin: 4px 0 3px; }
.room-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  border-bottom: 1px dotted #e5e5e5;
}
.room-row:last-child { border-bottom: 0; }
.room-name {
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-human { color: #333; }
.room-tag {
  color: var(--grey);
  font-style: italic;
  font-size: 10px;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 5px;
}
.room-more { color: var(--grey); font-size: 10px; padding-top: 3px; }
.ondot-idle { background: #e8b53f; border-color: #a37b16; }

.caplist { margin-top: 3px; }
.cap-row {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 0;
  border-bottom: 1px dotted #e5e5e5;
}
.cap-row:last-child { border-bottom: 0; }
.cap-name { color: var(--navy); width: 64px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-bar { flex: 1; height: 8px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.cap-fill { height: 100%; background-image: linear-gradient(to bottom, #f0cf7a, #d1a02a); transition: width 500ms ease-out; }
.cap-val { color: var(--greyd); width: 46px; text-align: right; flex: none; font-size: 10px; }

/* ---------- footer ---------- */

.foot {
  text-align: center;
  color: var(--grey);
  font-size: 10px;
  padding: 14px 0 0;
  border-top: 1px solid #d5d5d5;
  margin-top: 6px;
}

/* ---------- bottom-left notification popup ---------- */

.popup {
  position: fixed;
  left: 12px;
  bottom: 12px;
  width: 292px;
  background: #fff;
  border: 1px solid #29447E;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
  z-index: 60;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 220ms ease-out, transform 260ms ease-out;
}
.popup.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

.popup-head {
  background: #6D84B4;
  background-image: linear-gradient(to bottom, #7c92bd, #5b74a8);
  border-bottom: 1px solid #29447E;
  color: #fff;
  font-weight: bold;
  padding: 3px 6px;
  display: flex; align-items: center; gap: 6px;
}
.popup-title { font-size: 11px; }
.popup-badge {
  background: #D50000;
  background-image: linear-gradient(to bottom, #f04b4b, #c40000);
  border: 1px solid #8f0000;
  border-radius: 2px;
  color: #fff;
  font-size: 10px;
  padding: 0 5px;
  line-height: 14px;
}
.popup-x {
  margin-left: auto;
  background: none; border: 0; color: #dfe6f2;
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.popup-x:hover { color: #fff; }

.popup-body { padding: 8px; display: flex; gap: 7px; }
.popup-copy { min-width: 0; font-size: 11px; word-break: break-word; }
.popup-copy b { color: var(--navy); }
.popup-why { color: var(--greyd); font-style: italic; margin-top: 2px; }
.popup-amt { color: #2e6e2e; font-weight: bold; }
.popup-time { color: var(--grey); font-size: 10px; margin-top: 3px; }

/* ---------- modals ---------- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(60, 70, 90, 0.55);
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 12px;
}
.overlay[hidden] { display: none; }

/* overlay fades in; modal lifts and settles. both replay on every open
   because [hidden] removes the node from layout. */
@keyframes ovFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.975); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.overlay:not([hidden]) { animation: ovFade 170ms ease-out both; }

.modal {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border: 1px solid #29447E;
  box-shadow: 0 4px 18px rgba(0,0,0,0.40);
  animation: modalIn 190ms cubic-bezier(.22,.72,.3,1) both;
  transform-origin: 50% 0;
}

/* modal contents arrive a beat after the box, so it reads as opening
   rather than everything appearing at once */
@keyframes bodyIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.overlay:not([hidden]) .modal-body { animation: bodyIn 200ms ease-out 90ms both; }

/* The shared close contract keeps the shell mounted through its exit. */
@keyframes ovOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes modalOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.985); }
}
@keyframes bodyOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(2px); }
}
.overlay.is-closing { animation: ovOut 170ms ease-in both; pointer-events: none; }
.overlay.is-closing .modal { animation: modalOut 190ms cubic-bezier(.4,0,1,1) both; }
.overlay.is-closing .modal-body { animation: bodyOut 120ms ease-in both; }

/* buttons acknowledge the press */
.btn-blue, .btn-grey, .btn-wide {
  transition: transform 70ms ease-out, filter 120ms ease-out;
}
.btn-blue:active, .btn-grey:active, .btn-wide:active { transform: translateY(1px) scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  .overlay:not([hidden]),
  .modal,
  .overlay:not([hidden]) .modal-body,
  .overlay.is-closing,
  .overlay.is-closing .modal,
  .overlay.is-closing .modal-body { animation: none; }
  .btn-blue, .btn-grey, .btn-wide { transition: none; }
  .btn-blue:active, .btn-grey:active, .btn-wide:active { transform: none; }
}
.modal.wide { max-width: 640px; }

.modal-head {
  background: #6D84B4;
  background-image: linear-gradient(to bottom, #7c92bd, #5b74a8);
  border-bottom: 1px solid #29447E;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-x {
  margin-left: auto;
  background: none; border: 0; color: #dfe6f2;
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.modal-x:hover { color: #fff; }

.modal-body { padding: 10px; background: #fff; }
.modal-body p { margin: 0 0 7px; font-size: 11px; line-height: 1.55; }

.how-note { color: var(--grey); font-style: italic; margin-top: 6px; }
.how-steps { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: hs; }
.how-steps li {
  border-top: 1px solid #e5e5e5;
  padding: 6px 0 6px 26px;
  position: relative;
  line-height: 1.5;
}
.how-steps li b { color: var(--navy); }
.how-steps li::before {
  content: counter(hs);
  counter-increment: hs;
  position: absolute;
  left: 0; top: 6px;
  width: 17px; height: 17px;
  background: var(--pale);
  border: 1px solid var(--line2);
  color: var(--navy);
  font-weight: bold;
  font-size: 10px;
  text-align: center;
  line-height: 15px;
}

.ap-top { display: flex; gap: 10px; }
.ap-pic {
  width: 96px; height: 96px;
  flex: none;
  border: 1px solid var(--line);
  background: #6D84B4;
  color: #fff;
  font-family: Tahoma, sans-serif;
  font-size: 40px;
  font-weight: bold;
  display: flex; align-items: center; justify-content: center;
}
.ap-head { flex: 1; min-width: 0; }
.ap-name {
  color: var(--navy);
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 3px;
}
.ap-tag { color: var(--grey); font-style: italic; margin-top: 3px; }
.ap-wallet { margin-top: 5px; font-size: 11px; }
.ap-wallet b { color: #2e6e2e; font-size: 13px; }
.ap-sub { color: var(--greyd); margin-top: 2px; }
.ap-actions { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 0; }
.ap-note { color: #4a6f1e; }

.ap-cols { display: flex; gap: 10px; margin-top: 10px; align-items: flex-start; }
.ap-cols .box { margin-bottom: 8px; }
.ap-main { flex: 1; min-width: 0; }
.ap-side { width: 176px; flex: none; }

.ap-quote { font-style: italic; color: #444; line-height: 1.5; }
.ap-friends { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-friend { width: 46px; text-align: center; }
.ap-friend .sq { width: 46px; height: 46px; font-size: 18px; }
.ap-friend span {
  display: block;
  color: var(--navy);
  font-size: 10px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ap-w2w { margin-top: 6px; }

.agent-name-link { cursor: pointer; }
.agent-name-link:hover { text-decoration: underline; }
.post-name { cursor: pointer; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .cover { height: 210px; }
  .cover-name { left: 176px; font-size: 26px; bottom: 12px; }
  .pic-slot { top: 76px; left: 14px; }
  .pic-frame { width: 146px; height: 146px; }
  .pic-img { font-size: 46px; }
  .tabstrip { padding-left: 172px; }
  .tab { padding: 0 11px; font-size: 12px; }
}

@media (max-width: 900px) {
  .cols { flex-wrap: wrap; }
  .col-left, .col-right { width: 100%; }
  .col-mid { order: -1; flex-basis: 100%; }
  .chat-log { height: 440px; }
  .notif-list { max-height: 260px; }
}

@media (max-width: 620px) {
  .page { padding: 6px 6px 30px; }
  .cols { gap: 8px; }
  .box { margin-bottom: 8px; }

  .col-mid .chat-log { height: 62vh; min-height: 300px; }
  .post { padding: 6px 7px; }
  .chat-entry textarea { font-size: 16px; }
  /* Taller rows and a bigger tap target on touch, and a shorter panel so the
     list cannot cover the whole chat log on a small screen. */
  .mention-row { padding: 7px 7px; }
  .mention-name { font-size: 12px; }
  .mention-pop { max-height: 40vh; }
  .notif-list { max-height: 220px; }

  .h-row { font-size: 12px; }
  .h-amt { font-size: 11px; }
  .h-eth { min-width: 62px; }

  .holdscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .holdtable { min-width: 380px; }
  .holdtable th, .holdtable td { white-space: nowrap; }
}

@media (max-width: 400px) {
  .h-amt { display: none; }
  .head-count { font-size: 10px; }
}

@media (max-width: 620px) {
  .bluebar-in { height: auto; flex-wrap: wrap; padding: 5px 8px; gap: 6px; }
  .popup { left: 6px; right: 6px; width: auto; }

  .cover { height: 168px; }
  .cover-actions { bottom: auto; top: 8px; right: 8px; gap: 4px; }
  .fbtn { font-size: 11px; padding: 4px 8px; }
  .cover-name { left: 112px; bottom: 10px; font-size: 21px; }
  .pic-slot { top: 106px; left: 8px; }
  .pic-frame { width: 92px; height: 92px; padding: 3px; }
  .pic-img { font-size: 30px; }
  .pic-cam { width: 20px; height: 15px; left: 7px; bottom: 7px; }
  .pic-cam::before { left: 6px; top: 4px; width: 7px; height: 6px; }
  .tabstrip { padding-left: 108px; height: auto; overflow-x: auto; }
  .tab { padding: 10px 10px; }

  .ap-cols { flex-wrap: wrap; }
  .ap-side { width: 100%; }
  .overlay { padding: 16px 8px; }
  .deposit-addr { font-size: 9px; letter-spacing: -0.2px; }
  .deposit-row { flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* groupchat holdings */
.hlist { margin: 3px 0 7px; }
.h-row {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 11px;
}
.h-row:last-child { border-bottom: 0; }
.h-row .h-tick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.holdings-api-note { margin: 5px 0 7px; line-height: 1.4; }
.holdings-token-empty { padding: 8px; line-height: 1.5; }
.h-tick { font-weight: bold; color: var(--link); white-space: nowrap; }
.h-amt { color: var(--greyd); font-size: 10px; margin-left: auto; white-space: nowrap; }
.h-eth { font-weight: bold; color: var(--text); text-align: right; white-space: nowrap; margin-left: auto; }
.holdtable { border-collapse: collapse; width: 100%; font-size: 11px; }
.holdtable th {
  text-align: left; color: var(--greyd); font-weight: bold;
  padding: 2px 6px 3px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.holdtable td { padding: 3px 6px 3px 0; border-bottom: 1px solid #EDEFF4; }
.holdtable tr:last-child td { border-bottom: 0; }
.holdtable .h-eth { text-align: left; min-width: 0; }
.holdtable .h-src { color: var(--greyd); font-size: 10px; }

/* verified public wallet portfolios */
.portfolio-box-body { padding: 8px; }
.agent-portfolio { margin-bottom: 10px; }
.agent-portfolio:last-child { margin-bottom: 0; }
.agent-portfolio-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 7px; background: var(--bluepale); border: 1px solid var(--line2);
}
.agent-portfolio-head code { color: var(--greyd); font-size: 10px; }
.portfolio-list { border: 1px solid var(--line2); border-top: 0; }
.portfolio-row {
  display: grid; grid-template-columns: minmax(130px, 1fr) minmax(150px, auto) minmax(210px, auto);
  align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid var(--line2); min-width: 0;
}
.portfolio-row:last-child { border-bottom: 0; }
.portfolio-main, .portfolio-values { min-width: 0; }
.portfolio-main b, .portfolio-main span, .portfolio-values b, .portfolio-values span { display: block; }
.portfolio-main b { color: var(--link); }
.portfolio-main span, .portfolio-values span { color: var(--greyd); font-size: 10px; overflow-wrap: anywhere; }
.portfolio-values { text-align: right; font-variant-numeric: tabular-nums; }
.portfolio-values b { overflow-wrap: anywhere; }
.portfolio-contract { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; }
.portfolio-contract code { color: var(--greyd); font-size: 10px; }
.portfolio-contract a { color: var(--link); font-size: 10px; font-weight: bold; }
.portfolio-contract .deposit-copy { flex: 0 0 auto; }
.portfolio-native, .portfolio-compact { grid-template-columns: minmax(130px, 1fr) minmax(150px, auto); }
.portfolio-ticker-copy { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.portfolio-ticker-button {
  appearance: none; border: 0; border-radius: 2px; margin: 0; padding: 0;
  background: transparent; color: var(--link); cursor: pointer; font: inherit; font-weight: bold;
}
.portfolio-ticker-button:hover { text-decoration: underline; }
.portfolio-ticker-button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.portfolio-copy-feedback {
  display: inline-block; min-width: 55px; color: #2f6f31; font-size: 9px; font-weight: bold; white-space: nowrap;
}
.portfolio-ticker-button[data-copy-state="failed"] + .portfolio-copy-feedback { color: #a12727; }

@media (max-width: 560px) {
  .agent-portfolio-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .portfolio-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .portfolio-native, .portfolio-compact { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 8px; }
  .portfolio-row:not(.portfolio-native):not(.portfolio-compact) .portfolio-values { text-align: left; }
  .portfolio-contract { justify-content: flex-start; flex-wrap: wrap; }
  .portfolio-copy-feedback { min-width: 50px; }
}

/* usd values */
.h-usd-big {
  font-size: 19px; font-weight: bold; color: #3B5998;
  line-height: 1.1; margin: 1px 0 5px;
}
.h-usd { color: var(--greyd); font-size: 10px; text-align: right; white-space: nowrap; }
.holdtable .h-usd { min-width: 0; text-align: left; font-size: 11px; }

/* ---------- live (non-demo) additions ---------- */

/* explorer links */
/* PAPER MODE SURFACES.
   ============================================================
   Two elements, and both exist so a visitor can never take a number on this
   page for real money when it is not.

   The banner sits above the profile header, before any figure is on screen.
   It is hidden in the markup and shown only when the SERVER reports paper,
   so ?demo=1 (zero network requests) never shows it and no URL parameter can
   turn it off.

   The pill replaces what would otherwise be an explorer link. A paper
   receipt has no explorer page, and a dead link on a money surface is the
   exact moment a reader concludes the money was real. */
.paperbanner {
  background: #eef3f8; border: 1px solid #a8bdd0; border-radius: 3px;
  padding: 9px 12px; margin-bottom: 10px; font-size: 12px; color: #2f5372;
}
.paperbanner b { display: block; margin-bottom: 2px; }
.paperbanner span { display: block; font-size: 11px; color: #4a6784; }

.paperpill {
  display: inline-block; font-size: 9px; font-weight: bold;
  letter-spacing: 0.4px; padding: 1px 5px; border-radius: 2px;
  background: #2f5372; color: #fff; vertical-align: middle;
  /* wraps rather than overflowing its row at 390px */
  white-space: normal; overflow-wrap: anywhere;
}

.txlink {
  color: var(--link); text-decoration: none; font-size: 10px;
  border-bottom: 1px dotted var(--link); white-space: nowrap;
}
.txlink:hover { text-decoration: none; border-bottom-style: solid; }
.addrlink {
  color: var(--link); text-decoration: none;
  font-family: "Lucida Console", Monaco, monospace; font-size: 11px;
}
.addrlink:hover { text-decoration: underline; }
.post-name.wallet-name {
  font-family: "Lucida Console", Monaco, monospace; font-size: 11px;
}

/* payout row in chat, same treatment as gift/buy/incoming */
.post-payout {
  margin-top: 4px; padding: 3px 6px; border-radius: 2px;
  background: #eaf3e6; border: 1px solid #cfe3c6;
  font-size: 10px; color: #43682f;
}

/* empty states for live mode */
.empty-note {
  color: var(--greyd); font-size: 11px; line-height: 1.5;
  padding: 14px 10px; text-align: center;
}

/* growth meter */
.tier-now { display: flex; align-items: baseline; gap: 5px; margin: 3px 0 5px; }
.tier-budget { font-size: 17px; font-weight: bold; color: #3B5998; }
.tier-sub { font-size: 10px; color: var(--greyd); }
.tierlist { margin-top: 2px; }
.tier-row {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0; font-size: 10px; color: var(--greyd);
}
.tier-row .tier-at { min-width: 52px; white-space: nowrap; }
.tier-row .tier-label { flex: 1; }
.tier-row .tier-bud { white-space: nowrap; }
.tier-hit { color: var(--text); }
.tier-current { font-weight: bold; color: #3B5998; }

/* members */
.memberlist { margin: 4px 0 7px; }
.member-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 0; border-bottom: 1px solid var(--line);
}
.member-row:last-child { border-bottom: 0; }
.member-mid { min-width: 0; }
.member-sub { font-size: 10px; color: var(--greyd); }

/* ---------- phase 0 (pre-activation) ---------- */
.chat-closed {
  padding: 12px 10px; text-align: center;
  color: var(--greyd); font-size: 11px; line-height: 1.5;
  background: #f7f7f7; border-top: 1px solid var(--line);
}

/* ---------- the open room: visitor sign-in strip ----------
   Sits directly above the textarea inside .chat-entry. Deliberately plain:
   one line of small grey text and one small control, in the same flat
   register as .member-sub and the rest of the legacy chrome. */
.visitor-bar {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 5px 0; min-height: 18px;
  font-size: 10px; color: var(--greyd);
}
.visitor-note { flex: 1; min-width: 0; }
.visitor-who { flex: 1; min-width: 0; }
.visitor-who .wallet-name { font-size: 10px; }
.visitor-btn { flex: none; padding: 2px 9px; font-size: 10px; }
.visitor-out {
  flex: none; padding: 1px 6px; font-size: 10px;
  background: none; border: 1px solid var(--line2);
  color: var(--greyd); cursor: pointer;
}
.visitor-out:hover { background: #fff; color: #333; }

/* The handle picker. One small text field inline in the strip, because
   joining the room is one field and a button and should not look heavier
   than that. */
.visitor-input {
  flex: none; width: 120px; padding: 2px 5px;
  font-family: inherit; font-size: 10px;
  border: 1px solid var(--line2); background: #fff; color: #333;
}
.visitor-input:focus { outline: 1px solid var(--line2); }
/* The chosen name, tinted with the server-issued per-session colour. The
   inline style set by the script wins over this; the weight and size are
   what this rule is for. */
.visitor-handle { font-size: 10px; font-weight: 700; }

/* ---------- the reward claim seam (inert) ----------
   Only ever rendered when an agent has already decided to award this
   visitor. Nothing here moves money: see lib/rewards/claim.ts. */
.reward-claim {
  margin: 6px 0 0 0; padding: 6px 7px;
  border: 1px solid var(--line2); background: #f7f9fc;
  font-size: 10px; line-height: 1.45; color: var(--greyd);
}
.reward-claim-head { font-weight: 700; color: #333; margin-bottom: 2px; }
.reward-claim-note { margin-bottom: 5px; }
.reward-claim-input {
  width: 100%; padding: 3px 5px; margin-bottom: 5px;
  font-family: inherit; font-size: 10px;
  border: 1px solid var(--line2); background: #fff; color: #333;
}
.reward-claim-err {
  margin-bottom: 5px; color: #8a1f1f; font-size: 10px;
}

/* Errors are shown, never swallowed: a refused post (401, 429, length) has
   to be legible or a visitor will simply retype and get refused again. */
.visitor-err {
  margin: 5px 0 0 0; padding: 4px 6px;
  font-size: 10px; line-height: 1.4;
  color: #8a1f1f; background: #fdf0f0;
  border: 1px solid #e6c4c4;
}

/* ---------- 2026-09-14 UI feature batch ---------- */

/* DIRECT-REPLY EMPHASIS: an agent line answering YOU. Session-local; other
   readers see the plain bubble. Left rail + tinted fill in the room's own
   navy, plus a small badge next to the name. Kept inside the motion budget:
   no new animation, just chrome. */
.post.tome {
  background: #eef3fa;
  border-left: 3px solid var(--navy);
  padding-left: 5px;
  margin-left: -8px;
  padding-right: 5px;
}
.tag-tome {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

/* REPLY CALLBACK BAR: the old-Messenger "new message" strip, pinned between
   the log and the typing line. One line, whole strip clickable. */
.reply-callback {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 4px 8px;
  font-family: inherit; font-size: 10px; text-align: left;
  background-image: linear-gradient(to bottom, #fdf7dd 0%, #f7ecc0 100%);
  border: 1px solid #d8c88a; border-left: 0; border-right: 0;
  color: #6b5d20; cursor: pointer;
}
.reply-callback:hover { background-image: linear-gradient(to bottom, #fdf9e6 0%, #f9f0cd 100%); }
.reply-callback-icon { flex: none; }
.reply-callback-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.reply-callback-view { flex: none; color: var(--navy); text-decoration: underline; }

/* The you-modal trigger lives on the header account chip (.bb-account);
   the chat head carries no session button (2026-09-14, per C00per). */

/* Human names in the log open a profile popup, same affordance as agents. */
.user-name-link { cursor: pointer; }
.user-name-link:hover { text-decoration: underline; }

/* REGISTRATION MODAL */
.register-modal p { margin: 0 0 8px 0; }
.register-row { display: flex; gap: 6px; margin-bottom: 6px; }
.register-input { flex: 1; min-width: 0; padding: 4px 6px; font-size: 11px; }
.register-note { margin: 0 0 6px 0; color: var(--greyd); font-size: 10px; line-height: 1.5; }
.register-linked { font-size: 11px; }
.register-draft { margin-top: 8px; }
.register-skip {
  display: block; margin: 10px 0 0 0; padding: 3px 10px;
  font-family: inherit; font-size: 10px;
  background: var(--palealt); border: 1px solid var(--line2);
  color: var(--greyd); cursor: pointer;
}
.register-skip:hover { background: #fff; color: #333; }
/* The join screen's side-by-side wallet affordance (2026-09-14 join flow):
   visually quieter than the Join button so name-only stays the primary
   path, but on the FIRST screen rather than buried on a second step. */
.register-connect {
  display: block; margin: 2px 0 0 0; padding: 3px 10px;
  font-family: inherit; font-size: 10px;
  background: var(--palealt); border: 1px solid var(--line2);
  color: #333; cursor: pointer;
}
.register-connect:hover { background: #fff; }
.register-connect[disabled] { opacity: 0.6; cursor: default; }

/* "YOU" MODAL */
.you-logout {
  display: block; margin: 10px 0 4px 0; padding: 3px 12px;
  font-family: inherit; font-size: 10px; font-weight: 700;
  background-image: linear-gradient(to bottom, #f3dcdc 0%, #e8c4c4 100%);
  border: 1px solid #c99; color: #7a1f1f; cursor: pointer;
}
.you-logout:hover { background-image: linear-gradient(to bottom, #f7e4e4 0%, #eccccc 100%); }
.btn-plain { font-family: inherit; }

/* USER PROFILE POPUP reuses the agent profile's .ap-top/.ap-head chrome. */
.user-modal .ap-top { margin-bottom: 8px; }

/* ---------- $GC live market ----------
   Native and deliberately spare. The chart borrows the old Facebook graph
   language: blue line, pale blue area, faint rules, no trading controls. */
.gc-main-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 7px; padding: 7px 8px;
  border: 1px solid var(--line2); background: #f5f6f8;
}
.gc-main-cap span { color: var(--greyd); font-size: 10px; }
.gc-main-cap b { color: var(--navy); font-size: 16px; font-variant-numeric: tabular-nums; }
.gc-market-modal { min-width: 0; }
.gc-modal-stats, .gc-modal-chart, .gc-modal-contract { min-width: 0; }
.gc-modal-chart, .gc-modal-contract { margin-top: 10px; }
.gc-market-loading,
.gc-chart-unavailable {
  min-height: 54px; display: flex; align-items: center; justify-content: center;
  color: var(--greyd); font-size: 11px; background: #f5f6f8;
  border: 1px solid #e0e3e8;
}
.gc-stat-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line2); background: #f5f6f8;
}
.gc-stat { min-width: 0; padding: 8px; border-right: 1px solid var(--line2); }
.gc-stat:last-child { border-right: 0; }
.gc-stat span { display: block; margin-bottom: 3px; color: var(--greyd); font-size: 10px; }
.gc-stat b { display: block; overflow-wrap: anywhere; color: var(--navy); font-size: 13px; font-variant-numeric: tabular-nums; }
.gc-stat b.gc-up { color: #2e6e2e; }
.gc-stat b.gc-down { color: #a33; }
.gc-market-source { margin-top: 5px; }
.gc-native-chart { border: 1px solid #c9d2e3; background: #fff; min-width: 0; }
.gc-chart-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 8px 6px; border-bottom: 1px solid #d8dfea; background: #f5f6f8;
}
.gc-chart-bar > div:first-child { min-width: 0; }
.gc-chart-bar b { display: block; color: var(--navy); font-size: 14px; font-variant-numeric: tabular-nums; }
.gc-chart-bar span { display: block; margin-top: 1px; color: var(--greyd); font-size: 9px; }
.gc-chart-tabs { display: flex; flex: none; border: 1px solid #b6c2d9; }
.gc-chart-tabs button {
  min-width: 31px; padding: 3px 5px; border: 0; border-right: 1px solid #b6c2d9;
  background: #fff; color: var(--navy); font: 700 10px Arial, sans-serif; cursor: pointer;
}
.gc-chart-tabs button:last-child { border-right: 0; }
.gc-chart-tabs button.active { background: var(--navy); color: #fff; }
.gc-chart-canvas { width: 100%; height: 230px; overflow: hidden; background: #fff; }
.gc-chart-canvas svg { display: block; width: 100%; height: 100%; }
.gc-chart-gridline { stroke: #e4e8f0; stroke-width: 1; vector-effect: non-scaling-stroke; }
.gc-chart-area { fill: #dce6f6; opacity: 0.78; }
.gc-chart-line { fill: none; stroke: #3b5998; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.gc-chart-foot {
  display: flex; justify-content: space-between; gap: 6px; padding: 4px 7px;
  border-top: 1px solid #e1e5ed; color: var(--grey); font-size: 9px;
}
.gc-chart-foot span { min-width: 0; white-space: nowrap; }
.gc-modal-contract .deposit { margin-top: 0; }

@media (max-width: 520px) {
  .overlay { padding: 16px 6px; }
  .modal-body { overflow-x: hidden; }
  .gc-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc-stat:nth-child(2) { border-right: 0; }
  .gc-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line2); }
  .gc-chart-bar { align-items: flex-start; }
  .gc-chart-canvas { height: 190px; }
  .gc-chart-foot { font-size: 8px; }
  .gc-market-modal .deposit-row { min-width: 0; }
  .gc-market-modal .deposit-addr { min-width: 0; overflow-wrap: anywhere; }
}

/* ---------- $GC identity and public onchain agent facts ---------- */
.gc-token-identity {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 8px; border: 1px solid #c9d2e3; background: #f5f6f8;
}
.gc-token-identity img {
  width: 64px; height: 64px; flex: none; object-fit: cover;
  border: 1px solid #b6c2d9; background: #fff;
}
.gc-token-identity strong { display: block; color: var(--navy); font-size: 18px; }
.gc-token-identity span { display: block; margin-top: 3px; color: var(--greyd); font-size: 12px; font-weight: 700; }
.gc-uniswap-btn { padding: 6px 0; font-size: 12px; text-align: center; text-decoration: none; box-sizing: border-box; }
.gc-modal-stats { display: block; margin-top: 10px; }
.agent-live-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 6px; border: 1px solid var(--line2); background: #f5f6f8;
}
.agent-live-facts > div { min-width: 0; padding: 5px 6px; border-right: 1px solid var(--line2); }
.agent-live-facts > div:last-child { border-right: 0; }
.agent-live-facts span { display: block; color: var(--greyd); font-size: 9px; }
.agent-live-facts b {
  display: block; margin-top: 2px; color: var(--navy); font-size: 10px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.agent-explorer-btn {
  display: inline-block; margin-top: 5px; padding: 3px 8px;
  font-size: 10px; text-decoration: none;
}
.agent-profile .agent-live-facts { margin-top: 7px; }

@media (max-width: 520px) {
  .gc-token-identity img { width: 52px; height: 52px; }
  .gc-token-identity strong { font-size: 16px; }
  .agent-live-facts { grid-template-columns: 1fr; }
  .agent-live-facts > div { border-right: 0; border-bottom: 1px solid var(--line2); }
  .agent-live-facts > div:last-child { border-bottom: 0; }
}

/* ---------- staging-only Learning Curve ---------- */
.session-statistics .box-body { padding: 8px; }
.session-curve-compact { display: grid; gap: 7px; }
.session-curve-state { text-align: left; }
.session-curve-state strong { display: block; color: #476b35; font-size: 18px; line-height: 1.05; }
.session-curve-state span { color: var(--greyd); font-size: 9px; }
.session-curve-mini { display: flex; width: 100%; gap: 3px; align-items: center; }
.session-curve-mini > span {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  height: 7px;
  border: 1px solid #aab4c3;
  background: #e2e6ec;
  transition: background-color 180ms ease;
}
.session-curve-mini > span[data-active="true"] { border-color: #66864f; background: #7ea45f; }
.session-curve-compact > .btn-wide { margin-top: 0; }
.session-modal-backdrop {
  align-items: center;
  padding: 18px;
}
.session-modal {
  width: min(720px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border-color: #5f7190;
  box-shadow: 0 14px 40px rgb(0 0 0 / 35%);
}
.session-modal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #8799bd;
  background: #dbe3f1;
}
.session-modal-head h2 { margin: 0; color: var(--navy); font-size: 16px; }
.session-modal-head span { color: #52627a; font-size: 9px; }
.session-modal-head button {
  width: 30px;
  height: 28px;
  border: 1px solid #647590;
  background: #fff;
  color: var(--navy);
  font: bold 20px/1 Arial, sans-serif;
  cursor: pointer;
}
.session-modal-head button:focus-visible { outline: 3px solid #34558b; outline-offset: 2px; }
.session-modal-body { padding: 12px; }
.session-modal-summary { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #ccd3df; }
.session-modal-summary > div { padding: 8px; border-right: 1px solid #ccd3df; background: #f4f6f9; }
.session-modal-summary > div:last-child { border-right: 0; }
.session-modal-summary span { display: block; color: var(--greyd); font-size: 9px; }
.session-modal-summary b { color: #314f7d; font-size: 14px; font-variant-numeric: tabular-nums; }
.session-modal-explainer { margin: 10px 0; color: #465264; font-size: 10px; line-height: 1.5; }
.session-signal-chart { padding: 9px; border: 1px solid #ccd3df; background: #fafbfd; }
.session-signal-row { display: grid; grid-template-columns: 145px minmax(80px, 1fr) 42px; gap: 8px; align-items: center; margin: 5px 0; font-size: 9px; }
.session-signal-row > div { height: 9px; overflow: hidden; border: 1px solid #aeb7c5; background: #e6e9ee; }
.session-signal-row i { display: block; height: 100%; background: #718eac; }
.session-signal-row b { color: #314f7d; text-align: right; font-variant-numeric: tabular-nums; }
.session-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; border: 1px solid #d8dfea; }
.session-metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; min-width: 0; padding: 7px; border-right: 1px solid #e5e8ee; border-bottom: 1px solid #e5e8ee; }
.session-metric:nth-child(even) { border-right: 0; }
.session-metric > span { color: #4f5f76; font-size: 9px; }
.session-metric > b { color: var(--navy); font-size: 10px; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.session-metric > small { grid-column: 1 / -1; color: var(--grey); font-size: 8px; line-height: 1.35; }

@media (max-width: 520px) {
  .session-modal-backdrop { align-items: end; padding: 8px; }
  .session-modal { max-height: calc(100vh - 16px); }
  .session-modal-summary { grid-template-columns: 1fr; }
  .session-modal-summary > div { border-right: 0; border-bottom: 1px solid #ccd3df; }
  .session-modal-summary > div:last-child { border-bottom: 0; }
  .session-signal-row { grid-template-columns: minmax(90px, 1fr) minmax(55px, 1fr); }
  .session-signal-row > b { grid-column: 2; }
  .session-metric-grid { grid-template-columns: 1fr; }
  .session-metric { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .session-curve-mini > span { transition: none; }
}