/* =============================================================================
   IzeChat — Friends hub. Isolated under .ize-fr; nothing here can reach another
   page. Light/dark aware.

   DARK MODE: WoWonder signals dark by injecting <link id="night-mode-css"> and
   IzeChat additionally stamps body.dark_active from $wo['dark_active'] (see
   container.phtml). All four selectors are listed because :has() is unavailable
   on older WebViews and body.dark is the legacy class some surfaces still use.

   The layout is a flat list of rows rather than the theme's card grid: a phone
   fits four names in a column and one name in a card, and this page is a list
   of people, not a gallery.
   ========================================================================== */

.ize-fr {
  --fr-bg:      #ffffff;
  --fr-line:    #ececec;
  --fr-text:    #16181c;
  --fr-muted:   #6b7280;
  --fr-soft:    #f4f5f7;
  --fr-accent:  #C32E3A;
  --fr-on:      #22c55e;
  --fr-shadow:  0 1px 2px rgba(16,24,40,.04);
  color: var(--fr-text);
}

html:has(#night-mode-css) .ize-fr,
html.ize-dark .ize-fr,
body.dark_active .ize-fr,
body.dark .ize-fr {
  --fr-bg:      #1c2126;
  --fr-line:    rgba(255,255,255,.085);
  --fr-text:    #e9edf1;
  --fr-muted:   #93a1ad;
  --fr-soft:    #232a31;
  --fr-shadow:  0 1px 2px rgba(0,0,0,.3);
}

/* ---- header -------------------------------------------------------------- */
.ize-fr-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 0 10px; }
.ize-fr-title { margin:0; font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--fr-text); }
.ize-fr-searchbtn {
  flex:0 0 auto; width:38px; height:38px; border:0; border-radius:50%;
  background:var(--fr-soft); color:var(--fr-text); display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer;
}
.ize-fr-searchbtn:active { transform:scale(.94); }

/* ---- search -------------------------------------------------------------- */
.ize-fr-searchwrap { position:relative; margin:0 0 12px; }
.ize-fr-input {
  width:100%; height:42px; padding:0 38px 0 14px; border-radius:21px;
  border:1px solid var(--fr-line); background:var(--fr-soft);
  color:var(--fr-text); font-size:15px; outline:none;
}
.ize-fr-input:focus { border-color:var(--fr-accent); }
.ize-fr-clear {
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:26px; height:26px; border:0; border-radius:50%; line-height:1;
  background:transparent; color:var(--fr-muted); font-size:22px; cursor:pointer;
}

/* ---- quick access tabs --------------------------------------------------- */
.ize-fr-tabs {
  display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; margin:0 -2px 4px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.ize-fr-tabs::-webkit-scrollbar { display:none; }
.ize-fr-tab {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--fr-line); background:var(--fr-bg); color:var(--fr-text);
  border-radius:999px; padding:7px 14px; font-size:13.5px; font-weight:650;
  cursor:pointer; white-space:nowrap; transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.ize-fr-tab.is-active { background:var(--fr-accent); border-color:var(--fr-accent); color:#fff; }
.ize-fr-pill {
  min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:var(--fr-soft); color:var(--fr-muted);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}
.ize-fr-tab.is-active .ize-fr-pill { background:rgba(255,255,255,.22); color:#fff; }
.ize-fr-pill-hot { background:var(--fr-accent); color:#fff; }

/* ---- panes --------------------------------------------------------------- */
/* Explicit, because some framework resets re-declare display on generic divs and
   would beat the UA's [hidden] rule, leaving every pane stacked on screen. */
.ize-fr-pane[hidden] { display:none !important; }

/* ---- sections ------------------------------------------------------------ */
.ize-fr-sec { margin:0 0 18px; }
.ize-fr-sechead { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 6px; }
.ize-fr-sechead h2 { margin:0; font-size:16px; font-weight:750; letter-spacing:-.01em; color:var(--fr-text); }
.ize-fr-seeall { border:0; background:transparent; color:var(--fr-accent); font-size:13.5px; font-weight:650; cursor:pointer; padding:2px 0; }

/* ---- rows ---------------------------------------------------------------- */
.ize-fr-list { display:block; }
.ize-fr-row {
  display:flex; align-items:center; gap:12px; padding:9px 2px;
  border-bottom:1px solid var(--fr-line);
}
.ize-fr-row:last-child { border-bottom:0; }

.ize-fr-av { position:relative; flex:0 0 auto; display:block; line-height:0; }
.ize-fr-av img { width:52px; height:52px; border-radius:50%; object-fit:cover; background:var(--fr-soft); }
.ize-fr-dot {
  position:absolute; right:1px; bottom:1px; width:13px; height:13px; border-radius:50%;
  background:var(--fr-on); border:2px solid var(--fr-bg); display:block;
}

.ize-fr-body { flex:1 1 auto; min-width:0; }
.ize-fr-name { display:flex; align-items:center; gap:5px; color:var(--fr-text); font-size:15px; font-weight:700; text-decoration:none; }
.ize-fr-name:hover { color:var(--fr-text); text-decoration:none; }
.ize-fr-name .truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ize-fr-tick { flex:0 0 auto; color:#2E90FA; }
.ize-fr-reason { margin-top:2px; font-size:12.5px; color:var(--fr-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ize-fr-reason.ize-fr-on { color:var(--fr-on); }

.ize-fr-actions { flex:0 0 auto; display:flex; gap:6px; align-items:center; }
.ize-fr-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 12px !important; font-size:13px !important; border-radius:9px !important;
  white-space:nowrap;
}
.ize-fr-btn svg { flex:0 0 auto; }

/* On a narrow phone two full-width buttons do not fit beside a 52px avatar and a
   name: drop the icons and tighten, rather than letting the row wrap. */
@media (max-width: 420px) {
  .ize-fr-btn { padding:7px 10px !important; font-size:12.5px !important; }
  .ize-fr-btn svg { display:none; }
  .ize-fr-av img { width:46px; height:46px; }
}

/* ---- empty / caught-up --------------------------------------------------- */
.ize-fr-caught {
  display:flex; align-items:center; gap:8px; padding:12px 14px; border-radius:12px;
  background:var(--fr-soft); color:var(--fr-muted); font-size:13.5px;
}
.ize-fr-caught svg { color:var(--fr-on); flex:0 0 auto; }

.ize-fr-empty { padding:22px 14px; text-align:center; color:var(--fr-muted); }
.ize-fr-empty p { margin:0 0 12px; font-size:14px; }
.ize-fr-emptyacts { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* ---- loading / retry ----------------------------------------------------- */
.ize-fr-foot { min-height:4px; }
.ize-fr-skels { padding-top:4px; }
.ize-fr-skelrow { border-bottom:1px solid var(--fr-line); }
.ize-fr-sk { background:var(--fr-soft); border-radius:8px; position:relative; overflow:hidden; }
.ize-fr-sk::after {
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation:izeFrShimmer 1.2s infinite;
}
html:has(#night-mode-css) .ize-fr-sk::after,
html.ize-dark .ize-fr-sk::after,
body.dark_active .ize-fr-sk::after,
body.dark .ize-fr-sk::after {
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
}
@keyframes izeFrShimmer { 100% { transform:translateX(100%); } }
.ize-fr-sk-av  { width:52px; height:52px; border-radius:50%; flex:0 0 auto; }
.ize-fr-sk-l1  { height:12px; width:52%; margin-bottom:7px; }
.ize-fr-sk-l2  { height:10px; width:34%; }
.ize-fr-sk-btn { width:84px; height:30px; flex:0 0 auto; }

.ize-fr-retry { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:16px 8px; color:var(--fr-muted); font-size:13.5px; }

@media (prefers-reduced-motion: reduce) {
  .ize-fr-sk::after { animation:none; }
  .ize-fr-tab { transition:none; }
}

/* ---- desktop ------------------------------------------------------------- */
@media (min-width: 1351px) {
  .ize-fr { max-width:720px; }
  .ize-fr-title { font-size:24px; }
}

/* The bottom navigation is fixed; the last row must clear it plus the Android
   system navigation bar (--ize-safe-bottom is injected by the native shell). */
.ize-fr { padding-bottom: calc(24px + var(--ize-safe-bottom, 0px)); }