/* PACK: Squads — private group create modal, connections checklist, sidebar squad rows, group-chat sender label. Navy theme, no emoji/icons. */

/* Compact create modal: tighter widths, padding and field spacing. */
.sqm-content { max-width: 380px; width: 100%; background: #0f1a2e; border: 1px solid #16223c; }
.sqm-content .modal-header { border-bottom: 1px solid #16223c; padding: 0.85rem 1rem; }
.sqm-content .modal-body { padding: 0.85rem 1rem; }
.sqm-content .modal-header h2 { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 0.98rem; }
.sqm-content .modal-header h2 svg { color: #c8a03c; flex: 0 0 auto; }
.sqm-hint { color: #9fb0c8; font-size: 0.8rem; line-height: 1.4; margin: 0 0 0.75rem; }
.sqm-label { display: block; color: #c8a03c; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.3rem; }
.sqm-name { width: 100%; box-sizing: border-box; background: #0a1628; border: 1px solid #16223c; border-radius: 8px; color: #fff; padding: 0.55rem 0.7rem; font-size: 0.9rem; margin-bottom: 0.85rem; }
.sqm-name:focus { outline: none; border-color: #c8a03c; }
.sqm-name::placeholder { color: #5a6a82; }

.sqm-conn-list { max-height: 200px; overflow-y: auto; border: 1px solid #16223c; border-radius: 8px; background: #0a1628; padding: 4px; }
/* display:flex is forced — .sqm-conn is a <label>, and a generic form-label rule (display:block)
   otherwise wins on specificity and stacks the avatar above the name. */
.sqm-conn { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px; padding: 7px 11px; border-radius: 8px; cursor: pointer; color: #e7eefc; border: 1px solid transparent; transition: background .12s ease, border-color .12s ease; }
.sqm-conn:hover { background: #16223c; }
/* Tap the whole row (the name) to select — the raw checkbox is hidden; a gold row + tick shows selection. */
.sqm-conn-check, .sqam-check { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.sqm-conn.is-selected { background: rgba(200,160,60,0.14); border-color: rgba(200,160,60,0.6); }
.sqm-conn.is-selected::after { content: ""; margin-left: auto; width: 6px; height: 11px; border: solid #c8a03c; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-right: 5px; }
.sqm-conn-avatar { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: #16223c; color: #c8a03c; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 600; overflow: hidden; }
.sqm-conn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sqm-conn-name { font-size: 0.9rem; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqm-conn-empty { color: #9fb0c8; font-size: 0.82rem; padding: 0.85rem; text-align: center; line-height: 1.4; }

.sqm-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 0.85rem 1rem 1rem; border-top: 1px solid #16223c; }
.sqm-btn { border-radius: 8px; padding: 0.5rem 1rem; font-size: 0.86rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.sqm-btn-cancel { background: transparent; border-color: #16223c; color: #9fb0c8; }
.sqm-btn-cancel:hover { color: #fff; border-color: #2a3a5c; }
.sqm-btn-create { background: #c8a03c; color: #0a1628; }
.sqm-btn-create:hover { background: #d8b04c; }
.sqm-btn-create:disabled { opacity: 0.6; cursor: default; }

/* Mobile: squad invite / detail / add-member pickers fill the whole screen so the entire
   member list is visible + tappable (was a cramped ~380px box with a 200px-capped list). */
@media (max-width: 768px) {
  .sqm-content {
    max-width: 100% !important; width: 100% !important;
    height: 100dvh !important; max-height: 100dvh !important;
    border-radius: 0 !important; border: none !important;
    display: flex !important; flex-direction: column !important;
  }
  .sqm-content .modal-body {
    flex: 1 1 auto !important; min-height: 0 !important;
    overflow: hidden !important; display: flex !important; flex-direction: column !important;
  }
  .sqm-conn-list { max-height: none !important; flex: 1 1 auto !important; min-height: 0 !important; }
  /* Force the footer visible — a higher-specificity mobile rule was hiding it (display:none),
     so the Create/Add button never showed ("how do I add?"). */
  .sqm-footer { display: flex !important; flex: 0 0 auto !important; justify-content: flex-end; gap: 9px; background: #0f1a2e; border-top: 1px solid #16223c; padding: 0.85rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)) !important; }
  /* Make the primary action fill the footer so "how do I add?" is obvious. */
  .sqm-footer .sqm-btn-create { flex: 1 1 auto; text-align: center; }
}

/* Squad rows in the Messages sidebar */
.dc-squad-avatar { background: #16223c; color: #c8a03c; display: flex; align-items: center; justify-content: center; }
.dc-squad-avatar svg { width: 14px; height: 14px; }

/* Group-chat sender name above incoming bubbles */
.sqc-sender { color: #c8a03c; font-size: 0.72rem; font-weight: 600; margin: 0 0 2px 2px; }

/* Compact + clean sidebar Squads panel (overrides any earlier chunky styles).
   Action buttons stack vertically: Members sits UNDER Leave. */
.sq-panel .sq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.sq-panel .dc-right-label { font-size: 0.62rem !important; letter-spacing: 0.06em; }
.sq-panel .sq-new-btn { display: inline-flex; align-items: center; gap: 3px; background: rgba(200,160,60,0.12); color: #c8a03c; border: 1px solid rgba(200,160,60,0.45); border-radius: 5px; padding: 0.08rem 0.38rem !important; font-size: 0.58rem !important; line-height: 1.4 !important; font-weight: 600; cursor: pointer; }
.sq-panel .sq-new-btn:hover { background: rgba(200,160,60,0.22); }
.sq-panel .sq-new-btn svg { width: 10px; height: 10px; }
.sq-panel .sq-list { display: flex; flex-direction: column; gap: 0.28rem; }
.sq-panel .sq-item { background: #0f1a2e; border: 1px solid #16223c; border-radius: 6px; }
.sq-panel .sq-item:hover { border-color: #c8a03c; }
/* The whole row is one tappable button → opens the squad detail modal. */
.sq-panel .sq-item-row { display: flex; align-items: center; gap: 0.4rem; width: 100%; background: none; border: none; cursor: pointer; padding: 0.34rem 0.5rem; text-align: left; font: inherit; }
.sq-panel .sq-item-name { color: #fff; font-size: 0.74rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.sq-panel .sq-item:hover .sq-item-name { color: #c8a03c; }
.sq-panel .sq-item-count { flex: 0 0 auto; color: #9fb0c8; font-size: 0.58rem; font-weight: 600; background: #16223c; border-radius: 9px; padding: 0.04rem 0.36rem; min-width: 16px; text-align: center; }
.sq-panel .sq-empty { color: #9fb0c8; font-size: 0.78rem; line-height: 1.4; padding: 0.4rem 0.25rem; }
.sq-panel .sq-members { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.25rem; }
.sq-panel .sq-member { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: #cdd7e8; }
.sq-panel .sq-member-avatar { width: 22px; height: 22px; border-radius: 50%; background: #16223c; color: #c8a03c; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; overflow: hidden; flex: 0 0 auto; }
.sq-panel .sq-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sq-panel .sq-members-empty { color: #9fb0c8; font-size: 0.74rem; padding: 0.3rem; }