/* ========= Theme Tokens ========= */
:root {
  /* Base */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --card: var(--surface);
  --text: #111111;
  --muted: #6B7280;

  /* Brand / Accent (Apple blue AA on white) */
  --accent: #0071E3;           /* primary accent */
  --accent-contrast: #FFFFFF;  /* text/icon on accent */

  /* Status */
  --success: #34C759;          /* use sparingly for state, not primary buttons */
  --accent-gold: #D4AF37;

  /* Effects */
  --stroke: rgba(60,60,67,0.18);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --glass: rgba(255,255,255,0.60);
  --glass-dark: rgba(22,22,24,0.50);
  --blur: 14px;

  /* Shape & rhythm */
  --radius: 16px;
  --radius-pill: 999px;

  /* Spacing (4/8 grid) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;

  /* Typography */
  --brand-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color-scheme: light; /* native controls */
}

html[data-theme="dark"]{
  --bg: #0B0F14;
  --surface: #0F141A;
  --card: var(--surface);
  --text: #EEF2F7;
  --muted: #9AA4AF;
  --stroke: rgba(255,255,255,0.08);
  --glass: var(--glass-dark);
  --shadow: none;
  color-scheme: dark;
}

/* ========= Base ========= */
html {
  font-family: var(--brand-font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { background: var(--bg); color: var(--text); }

/* Minimum hit target */
button, .btn, input, .form-control { min-height: 44px; }

/* Smooth but respectful motion */
* { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* ========= Focus (rounded, accessible) ========= */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius);
}
/* Fallback if color-mix unsupported */
@supports not (color: color-mix(in srgb, white 10%, black)){
  :focus-visible { box-shadow: 0 0 0 3px rgba(0,113,227,.35); }
}

/* ========= Components ========= */

/* Glass card */
.card-glass{
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Primary button */
.btn.btn-primary{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px rgba(0,113,227,.18);
}
.btn.btn-primary:hover{ filter: brightness(.96); }
.btn.btn-primary:active{ filter: brightness(.92); }

/* Icons */
.bi{ font-size: 18px; line-height: 1; display: inline-block; }

/* Images */
.crest-img{ width: var(--size,22px); height: auto; vertical-align: middle; margin-right: 8px; }
.avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--stroke); }

/* Sticky tabbar (mobile only) */
.tabbar-mobile{
  position: fixed; left:0; right:0; bottom:0;
  padding: 8px max(12px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
  background: var(--card,#fff);
  border-top: 1px solid var(--stroke,rgba(0,0,0,.1));
  display: none; gap: 10px; z-index: 1040;
}
.tabbar-mobile .tab-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:12px; color: var(--muted,#6c757d); background:transparent; border:0;
}
.tabbar-mobile .tab-item .bi{ font-size:20px; line-height:1; }
.tabbar-mobile .tab-item.active{ color: var(--brand,#0d6efd); }
.tabbar-mobile .badge-dot{
  position:absolute; margin-top:-24px; margin-left:10px;
  width:10px; height:10px; background:#dc3545; border-radius:50%;
}
@media (max-width: 991.98px){
  .tabbar-mobile{ display:flex; }
  body{ padding-bottom:72px; } /* make room for tabbar */
}

/* Subtle icon alignment inside .pill and .cta */
.pill i, .cta i { font-size: 1rem; line-height: 1; }
.pill i { margin-right: .35rem; }
.cta i  { margin-right: .4rem; }

/* Tighten progress bar rounding for a precision feel */
.progress { height: 10px; border-radius: 12px; }
.progress i { border-radius: 12px; }

/* Typographic rhythm */
.title, .h { letter-spacing: .2px; }

/* =======================================================================
   CHAT BUBBLES (WhatsApp-ish) — single canonical block
   Scope with .chat on your thread container to avoid conflicts.
   ======================================================================= */

.chat .msg-row{
  display:flex;
  margin:6px 8px;
}

.chat .wa-bubble{
  display:inline-block;
  width:auto;                         /* shrink to content */
  max-width:min(72%, 520px);          /* WhatsApp-like width */
  padding:10px 12px 18px;             /* extra space for time */
  border-radius:16px;
  position:relative;
  line-height:1.35;
  white-space:pre-wrap;
  word-break:break-word;
  box-shadow:0 1px 1px rgba(0,0,0,.04);
}

/* Incoming (left) vs Outgoing (right) */
.chat .wa-in{
  margin-right:auto;
  background:#ffffff;
  color:var(--text,#111);
  border:1px solid var(--stroke, rgba(0,0,0,.08));
  border-top-left-radius:6px;
}
.chat .wa-out{
  margin-left:auto;
  background:#E6FDD6;                 /* soft green */
  color:var(--text,#111);
  border:1px solid rgba(0,0,0,.06);
  border-top-right-radius:6px;
}

/* Timestamp + ticks (bottom-right inside bubble) */
.chat .wa-meta{
  position:absolute;
  right:8px; bottom:6px;
  font-size:11px;
  color:var(--muted,#6b7280);
  white-space:nowrap;
}
.chat .wa-ticks{ opacity:.9; }

/* Media inside bubbles */
.chat .wa-bubble > img,
.chat .wa-bubble > video,
.chat .wa-bubble > audio{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:10px;
  margin:4px 0 8px;
}

/* Neutralize any legacy “card/tile” sizing inside the chat thread */
.chat .message,
.chat .message-card,
.chat .msg,
.chat .dm-msg,
.chat .card{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* Dark mode polish for bubbles */
@media (prefers-color-scheme: dark){
  .chat .wa-in{ background:#141415; border-color:rgba(255,255,255,.10); color:#e9ecef; }
  .chat .wa-out{ background:#103b21; color:#e9faef; border-color:rgba(255,255,255,.06); }
}
/* === LinkedIn-style media tiles (scoped) === */
.post .post-media{
  position:relative;
  width:100%;
  border-radius:12px;
  overflow:hidden;
  background:#0a0a0a; /* subtle backdrop for videos/images while loading */
}

/* standard ratios */
.post .ratio-landscape{ aspect-ratio: 1200 / 627; }  /* 1.91:1 (LinkedIn) */
.post .ratio-square   { aspect-ratio: 1 / 1; }
.post .ratio-portrait { aspect-ratio: 627 / 1200; }  /* tall */

.post .post-media > img,
.post .post-media > video{
  width:100%;
  height:100%;
  object-fit:cover;     /* fills the tile, crops gently = LinkedIn feel */
  display:block;
}

/* safety: never touch avatars/crests */
.avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--stroke); }
.crest-img, .house-crest{ width:22px; height:22px; object-fit:contain; display:inline-block; }
@media (max-width:380px){
  .btn-primary .bi-people + span{ display:none; } /* hide text, keep icon */
}
  /* Search panel row layout */
  #searchPanelBody .list-group-item{ padding:10px 12px; }
  #searchPanelBody .sr-line{
    display:grid;
    grid-template-columns: 44px 1fr auto;   /* avatar | info | actions */
    gap:10px; align-items:center;
  }
  #searchPanelBody .sr-avatar{
    width:40px; height:40px; border-radius:12px; object-fit:cover;
    border:1px solid var(--stroke);
  }
  #searchPanelBody .sr-name{ display:flex; align-items:center; gap:8px; }
  #searchPanelBody .sr-badge{
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--stroke); background:#fff;
  }
  #searchPanelBody .sr-actions{ display:flex; gap:8px; white-space:nowrap; }
  #searchPanelBody .btn-resp{ white-space:nowrap; }

  /* Small screens: actions drop under info, labels shrink/hide */
  @media (max-width: 540px){
    #searchPanelBody .sr-line{
      grid-template-columns: 44px 1fr;      /* avatar | info */
    }
    #searchPanelBody .sr-actions{
      grid-column: 2 / -1;                  /* actions under info */
      justify-content:flex-start;
      margin-top:6px;
    }
    #searchPanelBody .btn-resp{ padding:6px 10px; font-size:14px; }
  }
  @media (max-width: 400px){
    #searchPanelBody .btn-resp .lbl{ display:none; } /* icon-only */
    #searchPanelBody .btn-resp{ padding:6px 8px; }
  }