/* CREW PITS — the "Crew Pits" sub-section in THE PIT (list + divider + create), plus the
   create/settings form and invite picker. Chat-blue accent — it's an extension of chat. */

/* ---- sub-divider inside THE PIT list (reads as one continuous list, not a new section) ---- */
.chan-head { list-style: none; display: flex; align-items: center; gap: 8px; padding: 7px 12px 3px; }
.chan-div { font-family: "Barlow Condensed", "Barlow Semi Condensed", system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #57b6e8; white-space: nowrap; }
.chan-rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(87,182,232,.35), transparent); }
.chan-create { flex: none; width: 18px; height: 18px; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 5px; background: transparent; color: #57b6e8; font-size: 11px; opacity: .55; transition: opacity .12s, background .12s; }
.chan-head:hover .chan-create { opacity: 1; }
.chan-create:hover { background: rgba(87,182,232,.16); }

/* ---- channel rows (reuse .room-item chrome) ---- */
.chan-item .chan-av { flex: none; width: 20px; height: 20px; border-radius: 5px; margin-right: -2px; background: #17233a center/cover no-repeat; display: inline-grid; place-items: center; vertical-align: middle; }
.chan-av-t { font-family: var(--font-cond, var(--font-ui)); font-size: 11px; font-weight: 700; color: #57b6e8; }
.chan-tools { margin-left: auto; display: inline-flex; align-items: center; }
.chan-gear, .chan-leave { width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 5px; background: transparent; color: #6a7688; font-size: 11px; opacity: 0; transition: opacity .12s, color .12s, background .12s; }
.chan-item:hover .chan-gear, .chan-item:hover .chan-leave { opacity: 1; }
.chan-gear:hover { color: #bfe0f5; background: rgba(87,182,232,.16); }
.chan-leave:hover { color: #e08a8a; background: rgba(224,110,110,.16); }
.chan-subdiv { list-style: none; padding: 6px 12px 2px; font-family: var(--font-mono, monospace); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: #5a6675; }   /* left pad matches the "Crew Pits" head above */

/* crew-pit panel intro badge — blue (chat theme) instead of the public room's accent */
.ce-hot.ce-crew { color: #57b6e8; }

/* "Leave pit" in the panel ⋮ menu reads as mildly destructive */
.panel-menu-pop .pm-leave:hover { color: #e08a8a; }

/* crew-pit panel header: show the pit image as an avatar tile (like DM panels), replacing the left cap bar.
   Overrides the default `.panel-icon { display:none }` via higher specificity. */
.chat-panel.has-chanav .drag-handle::before { display: none; }
.chat-panel.has-chanav .panel-icon.dm-hav.has-image {
  display: flex; align-items: center; justify-content: center; flex: none; margin-right: 2px;
  width: 20px; height: 20px; border-radius: 4px; background-size: cover; background-position: center; overflow: hidden; color: transparent;
}

/* ---- pending invite rows ---- */
.chan-invite { list-style: none; display: flex; align-items: center; gap: 6px; padding: 6px 6px; margin: 2px 0; border-radius: 6px; background: rgba(87,182,232,.08); border: 1px solid rgba(87,182,232,.22); }
.chan-invite .chan-av { flex: none; width: 20px; height: 20px; }
.chan-invite-txt { flex: 1; min-width: 0; font-size: 11px; line-height: 1.3; color: #c7d3e0; }
.chan-acc, .chan-dec { flex: none; width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer; border: none; border-radius: 5px; font-size: 10px; }
.chan-acc { background: rgba(87,182,232,.2); color: #7fc8f0; }
.chan-acc:hover { background: #57b6e8; color: #06121e; }
.chan-dec { background: rgba(255,255,255,.06); color: #9a8ba4; }
.chan-dec:hover { background: #a8455f; color: #fff; }

/* ---- crew-pit popups reuse the game "sg" popup frame (frontdoor.css). These are the BLUE variant +
   the text-input / image tweaks the game popup didn't need. Standard popup style going forward. ---- */
.sg-dialog.sg-blue { border-color: #24384a; box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(87,182,232,.08);
  display: flex; flex-direction: column; max-height: 92vh; }   /* head + scroll body + foot; body scrolls on short screens */
.sg-scroll { overflow-y: auto; min-height: 0; }
.sg-blue .sg-link { border-color: #24384a; }   /* link box outline was purple */
.sg-blue .sg-hr { background: linear-gradient(90deg, #223247, rgba(34,50,71,.25)); }
.sg-blue .sg-label { color: #6a7c92; }
.sg-blue .sg-sub { color: #7f93ad; }
.sg-blue .sg-sub em { color: #33465a; }
.sg-blue .sg-close { color: #7f93ad; }
.sg-blue .sg-accent { background: linear-gradient(90deg, #57b6e8, #7fd0ff); }
.sg-blue .sg-glyph { background: rgba(87,182,232,.13); border-color: rgba(87,182,232,.34); color: #57b6e8; }
.sg-blue .sg-start { background: linear-gradient(180deg, #57b6e8, #3d8fc4); border-color: #7fd0ff; box-shadow: 0 0 20px rgba(87,182,232,.34); }
.sg-blue .sg-start:hover { box-shadow: 0 0 30px rgba(87,182,232,.55); filter: brightness(1.08); }
.sg-btn.sg-danger { color: #e0788a; border-color: #5a3040; }
.sg-btn.sg-danger:hover { background: #a8455f; color: #fff; border-color: #a8455f; }
/* solid red primary (reusable confirm popup, danger variant) */
.sg-btn.sg-danger-solid { color: #fff; background: linear-gradient(180deg, #c0455f, #8f3147); border-color: #d06a80; box-shadow: 0 0 20px rgba(192,69,95,.34); }
.sg-btn.sg-danger-solid:hover { box-shadow: 0 0 30px rgba(192,69,95,.55); filter: brightness(1.08); }
/* confirm popup sits above every other popup (settings z-27000, invite picker z-28000) */
.cf-overlay { z-index: 29000; }
.cf-dialog { width: min(400px, 92vw); }
.sg-input { width: 100%; box-sizing: border-box; background: #080b13; border: 1px solid #2b3444; padding: 9px 11px; color: #e6eff6; font-family: var(--font-ui); font-size: 13px; resize: vertical; }
.sg-input:focus { outline: none; border-color: #57b6e8; }
.sg-descin { margin-bottom: 9px; }   /* breathing room before the divider below */
.sg-imgrow { display: flex; align-items: center; gap: 12px; }
.sg-img { flex: none; width: 52px; height: 52px; background: #080b13 center/cover no-repeat; display: grid; place-items: center; color: #57b6e8; font-size: 20px; border: 1px solid #2b3444; }
.sg-upload { cursor: pointer; }
.sg-upload input { display: none; }
/* blue COPY button + link caret for the invite-link row (base is purple) */
.sg-blue .sg-copy { background: rgba(87,182,232,.14); border-color: rgba(87,182,232,.4); color: #9fd0f0; }
.sg-blue .sg-copy:hover { background: rgba(87,182,232,.24); border-color: #57b6e8; color: #d9ecfb; }
.sg-blue .sg-link-caret { color: #57b6e8; }
/* "Invite Crew" pill — matches the game's .if-open invite button (blue variant), not a flat box. */
/* beats frontdoor.css `.sg-sec:last-of-type { padding-bottom: 4px }` (higher specificity) */
.sg-blue .sg-sec.sg-invitewrap { align-items: center; padding-bottom: 22px; }   /* extra room below the button */
.sg-invitebtn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 18px;
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: #9fd0f0; background: rgba(87,182,232,.14); border: 1px solid rgba(87,182,232,.4); transition: background .15s, border-color .15s, color .15s; }
.sg-invitebtn:hover { background: rgba(87,182,232,.26); border-color: #57b6e8; color: #d9ecfb; }
.sg-invitebtn i { font-size: 12px; color: #7fc8f0; }
.sg-hint { margin-top: 3px; font-size: 12px; line-height: 1.4; color: #6f7d90; }

/* ---- invite picker: reuse the game's .ifp/.if-row grid popup, fully recolored blue ---- */
.ifp-blue .ifp-card { background: #0d1420; border-color: #24384a; }
.ifp-blue .ifp-head { border-bottom-color: #223247; }
.ifp-blue .ifp-foot { border-top-color: #223247; }
.ifp-blue .ifp-title { color: #cfe4f5; }
.ifp-blue .ifp-sub { color: #7fa2c0; }
.ifp-blue .ifp-count { color: #7fa2c0; }
.ifp-blue .ifp-x { color: #7fa2c0; }
.ifp-blue .ifp-x:hover { color: #e0653c; }
.ifp-blue .if-check { border-color: #2b3444; }
.ifp-blue .if-name { color: #cbdcec; }
.ifp-blue .if-row:hover { background: rgba(87,182,232,.07); }
.ifp-blue .if-row.on { background: rgba(87,182,232,.13); border-color: #3d6f95; }
.ifp-blue .if-row.on .if-check { background: #57b6e8; border-color: #7fd0ff; color: #06121e; }
.ifp-blue .ifp-send { background: #57b6e8; border-color: #7fd0ff; color: #06121e; }
.ifp-blue .if-invited-tag { color: #7fc8f0; border-color: rgba(87,182,232,.35); }
.ifp-blue .ifp-card { max-height: 92vh; }   /* scroll the list on short screens */
.ifp-blue .if-row.invited { cursor: pointer; opacity: .8; }   /* click to un-invite / remove */
.ifp-blue .if-row.invited:hover { opacity: 1; background: rgba(224,110,110,.08); }
/* declined: keeps its checkbox (owner can re-invite) but shows a muted red DECLINED tag */
.ifp-blue .if-declined-tag { color: #e0788a; border: 1px solid rgba(224,120,138,.35); border-radius: 4px; padding: 1px 6px; font-size: 9px; font-weight: 700; letter-spacing: .08em; margin-left: auto; }
.ifp-blue .if-row.declined .if-name { color: #9aa7b4; }