/* CHARACTER SHEET (Layer 1) — full-sheet popup + mini-profile additions. Border radius matches the
   app's panels (4px), magenta framing like the profile/DM surfaces. */

.cs-pop { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .18s ease; }
.cs-pop.show { opacity: 1; }
.cs-card { position: fixed; pointer-events: auto; width: 560px; max-width: 94vw;
  transform: translateY(7px) scale(.99); transition: transform .18s ease; }
.cs-pop.show .cs-card { transform: none; }
.cs-inner { position: relative; z-index: 1; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column;
  background: #0d0910; border: 1px solid #2b2440; border-radius: 5px;
  /* black outer glow hugging the sheet (~10px) */
  box-shadow: 0 0 10px 2px rgba(0,0,0,.9), 0 0 20px 4px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.55); }

.cs-bar { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: #160e1a; border-bottom: 1px solid #2b2440; }
.cs-bar-drag { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; cursor: move; }   /* move zone stops before the ✕ */
.cs-dot { width: 8px; height: 8px; border-radius: 2px; background: #ef93b1; flex: none; }
.cs-bar b { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #f0d6e4; }
.cs-bar-drag > span:not(.cs-dot) { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: #6f6277; }
.cs-x { margin-left: auto; border: none; background: transparent; color: #7f6b7c; font-size: 14px; cursor: pointer; }
.cs-x:hover { color: #f0d6e4; }
.cs-body { padding: 14px 15px 16px; overflow: auto; }
.cs-loading { font-family: var(--font-mono); font-size: 12px; color: #6f6277; padding: 26px 0; text-align: center; letter-spacing: .1em; }

.cs-hero { display: flex; gap: 13px; }
.cs-portrait { width: 84px; height: 84px; flex: none; border-radius: 5px; border: 1px solid #33283e; background: #180f1c;
  background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: #5c4a63; font-size: 24px; }
.cs-hmain { flex: 1; min-width: 0; }
.cs-name { font-family: var(--font-cond, var(--font-ui)); font-weight: 700; font-size: 27px; line-height: 1.05; }
.cs-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; color: #b6a2c2; margin-top: 5px; }
.cs-sub b { color: #ef93b1; font-weight: 700; }
.cs-al { color: #9a86e6; }
.cs-xp { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.cs-xl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: #6f6277; }
.cs-xtrack { flex: 1; height: 8px; border-radius: 4px; background: #241326; border: 1px solid #33283e; overflow: hidden; }
.cs-xfill { display: block; height: 100%; background: linear-gradient(90deg, #c76fa8, #ef93b1); }
.cs-xv { font-family: var(--font-mono); font-size: 10px; color: #a99bb4; }

.cs-tabs { position: relative; display: flex; gap: 20px; margin: 14px 0 2px; border-bottom: 1px solid #2b2440; }
.cs-tab { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: #6f6277; padding: 0 0 8px; cursor: pointer; }
.cs-tab.on { color: #f0d6e4; }
.cs-tab.off { opacity: .5; cursor: default; }
.cs-tab:not(.off):not(.on):hover { color: #b6a2c2; }
.cs-tab-ind { position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: #ef93b1; transition: left .2s ease, width .2s ease; }

.cs-pane[hidden] { display: none; }
/* 2×2 grid of the REAL FlyPosts cards (styled by posts.css) — cap at the feed's default width (356px)
   but shrink to fit a narrow browser so it never needs a horizontal scrollbar. */
.cs-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 356px)); justify-content: center; gap: 14px; max-height: 64vh; overflow-y: auto; overflow-x: hidden; padding: 14px 2px 6px; }
.cs-posts .post-card { margin: 0; width: 100%; }
/* ALBUMS tab */
.cs-albums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; overflow-x: hidden; padding: 14px 2px 6px; }
.cs-empty { grid-column: 1 / -1; }
.cs-album { position: relative; display: flex; align-items: stretch; gap: 0; border: 1px solid #2b2440; border-radius: 8px; background: #0c0f16; cursor: pointer; padding: 0; text-align: left; overflow: hidden; transition: border-color .14s ease, box-shadow .14s ease; }
.cs-album:hover { border-color: #7a4a68; box-shadow: 0 0 10px rgba(160,70,130,.3); }
.cs-album-cov { position: relative; flex: none; width: 66px; height: 66px; border-radius: 0; border: none; background: #000 center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #6a5c72; font-size: 20px; }
.cs-album-body { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 12px; min-width: 0; }
.cs-album-n { position: static; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; color: #b79ac2; background: none; border: none; padding: 0; }
.cs-album-t { font-family: var(--font-ui); font-size: 13px; color: #e6d6ee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-album-vis { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em; color: #9a7fa8; }
.cs-album-vis.pub { color: #4bbf7a; }

/* LOGBOOK tab */
.cs-logbook { max-height: 58vh; overflow-y: auto; padding: 16px 6px 6px; }
.cs-log { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #1e182a; font-family: var(--font-ui); font-size: 13px; color: #c6b8d2; }
.cs-log i { width: 16px; text-align: center; color: #9a86e6; }
.cs-log-note { margin-top: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: #5f5570; text-align: center; }

/* themed scrollbars (magenta) instead of the browser's blue */
.cs-posts, .cs-albums, .cs-logbook, .cs-body { scrollbar-width: thin; scrollbar-color: #4a3a5a transparent; }
.cs-posts::-webkit-scrollbar, .cs-albums::-webkit-scrollbar, .cs-logbook::-webkit-scrollbar, .cs-body::-webkit-scrollbar { width: 8px; }
.cs-posts::-webkit-scrollbar-track, .cs-albums::-webkit-scrollbar-track, .cs-logbook::-webkit-scrollbar-track, .cs-body::-webkit-scrollbar-track { background: transparent; }
.cs-posts::-webkit-scrollbar-thumb, .cs-albums::-webkit-scrollbar-thumb, .cs-logbook::-webkit-scrollbar-thumb, .cs-body::-webkit-scrollbar-thumb { background: #4a3a5a; border: 2px solid transparent; border-radius: 7px; background-clip: padding-box; }
.cs-posts::-webkit-scrollbar-thumb:hover, .cs-albums::-webkit-scrollbar-thumb:hover, .cs-logbook::-webkit-scrollbar-thumb:hover, .cs-body::-webkit-scrollbar-thumb:hover { background: #6a4a68; background-clip: padding-box; }

.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 14px; }
.cs-h { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #6f6277; margin: 0 0 9px; display: flex; justify-content: space-between; }
.cs-h span { color: #4f4557; }

.cs-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cs-attr { display: flex; align-items: center; gap: 8px; background: #0c1119; border: 1px solid #22344a; border-radius: 4px; padding: 7px 9px; }
.cs-v { font-family: var(--font-cond, var(--font-ui)); font-size: 20px; font-weight: 700; color: #eaf3fb; line-height: 1; min-width: 24px; text-align: center; }
.cs-k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em; color: #6f8299; }
.cs-k b { display: block; color: #9fb2c6; font-size: 10.5px; letter-spacing: .1em; font-weight: 700; }

.cs-align { margin-top: 9px; background: #0c1119; border: 1px solid #22344a; border-radius: 4px; padding: 8px 10px; }
.cs-al-t { font-family: var(--font-cond, var(--font-ui)); font-size: 15px; font-weight: 700; color: #d7c8f2; }
.cs-al-s { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; color: #6f6277; margin-top: 1px; }

.cs-skill { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cs-sk { font-family: var(--font-ui); font-size: 12px; color: #c6d5e4; width: 92px; flex: none; }
.cs-track { flex: 1; height: 7px; border-radius: 4px; background: #0c1119; border: 1px solid #22344a; overflow: hidden; }
.cs-fill { display: block; height: 100%; background: linear-gradient(90deg, #3d8fc4, #7fd0ff); }
.cs-skill.max .cs-fill { background: linear-gradient(90deg, #c76fa8, #ef93b1); }
.cs-lv { font-family: var(--font-mono); font-size: 9px; color: #6f8299; width: 28px; text-align: right; }
.cs-skill.max .cs-lv { color: #ef93b1; }

.cs-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: #f0d9a6; background: #1b1509; border: 1px solid #4a3c18; border-radius: 4px; padding: 5px 8px; display: inline-flex; gap: 6px; align-items: center; }
.cs-badge i { color: #e0a33a; }
.cs-empty { font-family: var(--font-ui); font-size: 12px; color: #5f6b78; }

.cs-note { margin-top: 14px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: #5f5570; text-align: center; }

/* --- mini-profile additions --- */
.mp-charline { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: #b6a2c2; margin: 2px 0 0; }
.mp-charline b { color: #ef93b1; font-weight: 700; }
.mp-charline .mp-al { color: #9a86e6; }
/* recolour the hover into the magenta CHARACTER theme (was navy) to match the sheet + mockup */
.msg-profile { background: linear-gradient(180deg, #140d16, #0b0910); border-color: #2b2440; border-radius: 5px; }
.mp-dot { border-color: #140d16; }
.mp-charline { margin-top: 4px; }
.mp-oneliner { color: #b6a2c2; }
.mp-stats { display: grid; grid-template-columns: repeat(4, 1fr); }   /* CHM · WIT · NRV · BADGES */
.mp-stat { background: #171021; border: 1px solid #2e2646; }   /* visible tile on the magenta frame */
.mp-s-v { color: #eaf3fb; }
.mp-meta { display: flex; gap: 12px; padding: 10px 13px 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; color: #7a6c86; }
.mp-btn.sheet { width: 100%; box-sizing: border-box; padding: 9px 0; text-align: center; border-radius: 3px; cursor: pointer;
  border: 1px solid #4a3a6a; color: #d7c8f2; background: rgba(154,134,230,.12); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .07em; }
.mp-btn.sheet:hover { border-color: #9a86e6; color: #efe7ff; }
/* compact icon action row (replaces the old stacked buttons) */
.mp-icons { display: flex; gap: 6px; margin-top: 6px; }
.mp-ic { flex: 1; height: 32px; display: grid; place-items: center; border-radius: 3px; cursor: pointer; font-size: 13px;
  background: #0c0f16; border: 1px solid #26203a; color: #9a8ba8; }
.mp-ic:hover { color: #ef93b1; border-color: #7a4a68; }   /* magenta accent (character theme) */
.mp-actions-link .mp-icons { justify-content: flex-start; }   /* link (DDial) profile: square, left-aligned buttons — no stretch */
.mp-actions-link .mp-ic { flex: 0 0 auto; width: 32px; }
.mp-ic.friend { color: #8fe0b0; border-color: #2a5a44; background: #16302a; }
.mp-ic.friend.is-friend { color: #f0a08e; border-color: #6a2a1e; background: #2a1512; }
.mp-ic.friend.is-pending { color: #8a93a8; border-color: #33384a; background: #171a20; }
.mp-ic.friend.is-incoming { color: #cfeaff; border-color: #2b6285; background: #1d3b52; }
.mp-ic.block:hover { color: #d47a68; border-color: #4a2018; background: #1f1210; }
.mp-ic.soon { opacity: .38; cursor: default; }
.mp-ic.soon:hover { color: #9a8ba8; border-color: #26203a; }
.mp-ic:disabled { opacity: .38; cursor: default; }
.mp-ic:disabled:hover { color: #9a8ba8; border-color: #26203a; background: #0c0f16; }
/* topbar username → own character sheet */
.tb-user { cursor: pointer; }
.tb-user:hover { color: #ef93b1; }