/* ============================================================
   Provider Portal — top tab nav + Messages inbox (threads)
   The tabs (Jobs / Messages / Profile) live inside the sticky
   appbar, so they stay anchored to the top on scroll. Active tab
   pairs navy text with weight AND a bottom underline, never hue
   alone.
   ============================================================ */
.portal-tabbar {
  display: flex;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 var(--ha-space-3);
  border-top: 1px solid var(--ha-border-strong);
}
.portal-tabbar .tab {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 4px 10px;
  min-height: 44px; /* guarantee a comfortable tap target */
  margin-bottom: -1px;
  text-decoration: none;
  color: var(--ha-ink-muted);
  font-size: var(--ha-fs-small);
  font-weight: var(--ha-weight-medium);
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.portal-tabbar .tab svg { width: 18px; height: 18px; }
.portal-tabbar .tab:hover { color: var(--ha-blue-primary); }
.portal-tabbar .tab.is-active {
  color: var(--ha-blue-primary);
  font-weight: var(--ha-weight-bold);
  border-bottom-color: var(--ha-blue-primary);
}
.portal-tabbar .tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ha-blue-accent);
  border-radius: var(--ha-radius-sm);
}

/* Unanswered-messages dot on the Messages tab. */
.portal-tabbar .tab-icon { position: relative; display: inline-flex; }
.portal-tabbar .tab-dot {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ha-blue-accent);
  border: 1.5px solid var(--ha-surface);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---------- Messages inbox (threads) ---------- */
.threads-head { margin: var(--ha-space-6) 2px var(--ha-space-4); }
.threads-head h1 {
  font-size: var(--ha-fs-h2, 28px);
  font-weight: var(--ha-weight-bold);
  letter-spacing: -0.01em;
  margin: 0;
}
.threads-sub { font-size: var(--ha-fs-small); color: var(--ha-ink-muted); margin: 4px 0 0; }

.thread-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ha-space-3); }
.thread-row {
  background: var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius-md);
  box-shadow: var(--ha-shadow-card);
}
.thread-row.is-unanswered { border-color: var(--ha-blue-accent); }
.thread-link {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--ha-space-4) var(--ha-space-5);
  text-decoration: none;
  color: var(--ha-blue-primary);
}
.thread-top { display: flex; align-items: baseline; gap: var(--ha-space-3); }
.thread-title { font-size: var(--ha-fs-body-lg); font-weight: var(--ha-weight-bold); }
.thread-time { margin-left: auto; font-size: var(--ha-fs-caption); color: var(--ha-ink-muted); white-space: nowrap; }
.thread-snippet {
  font-size: var(--ha-fs-small);
  color: var(--ha-ink-muted);
  line-height: var(--ha-lh-small, 20px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thread-who { color: var(--ha-blue-primary); font-weight: var(--ha-weight-medium); }
.thread-foot { display: flex; align-items: center; gap: var(--ha-space-3); margin-top: 2px; }
.thread-where { font-size: var(--ha-fs-caption); color: var(--ha-ink-muted); }
.thread-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--ha-radius-pill);
  background: var(--ha-portal-accent-tint);
  color: var(--ha-blue-text);
  font-size: var(--ha-fs-caption);
  font-weight: var(--ha-weight-bold);
}

.threads-empty {
  margin-top: var(--ha-space-8);
  text-align: center;
  color: var(--ha-blue-primary);
}
.threads-empty svg { width: 40px; height: 40px; color: var(--ha-ink-muted); margin-bottom: var(--ha-space-3); }
.threads-empty p { margin: 0; font-size: var(--ha-fs-body-lg); }
.threads-empty .muted { font-size: var(--ha-fs-small); color: var(--ha-ink-muted); margin-top: 4px; }