/* ==========================================================================
   ERA Europe Coach - app.css
   All colors live in the :root block below. Replace the placeholder values
   with the official ERA brand values; nothing else needs to change.
   Bootstrap is themed by re-mapping its CSS variables to these properties.
   ========================================================================== */

:root {
  /* ---- Brand placeholders (swap these, only these) ---- */
  --era-primary: #0b3d91;
  --era-primary-dark: #082c6b;
  --era-accent: #d6001c;
  --era-ink: #1a1a1a;
  --era-muted: #6b7280;
  --era-surface: #ffffff;
  --era-surface-alt: #f5f6f8;
  --era-border: #e2e5ea;

  /* ---- Derived tints (kept here so they stay swappable too) ---- */
  --era-primary-rgb: 11, 61, 145;
  --era-accent-rgb: 214, 0, 28;
  --era-primary-tint: #eef2fa;
  --era-primary-tint-strong: #dde5f4;
  --era-success: #1c6b4a;
  --era-warning: #8a5a00;

  /* ---- Typography: every stack ends in a Cyrillic-capable family ---- */
  --era-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "DejaVu Sans",
    sans-serif;
  --era-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "DejaVu Sans Mono", monospace;

  /* ---- Layout scale ---- */
  --era-radius: 8px;
  --era-radius-sm: 6px;
  --era-navbar-height: 64px;
  --era-logo-height: 32px;

  /* ---- Bootstrap global overrides ---- */
  --bs-font-sans-serif: var(--era-font-sans);
  --bs-font-monospace: var(--era-font-mono);
  --bs-body-font-family: var(--era-font-sans);
  --bs-body-color: var(--era-ink);
  --bs-body-color-rgb: 26, 26, 26;
  --bs-body-bg: var(--era-surface-alt);
  --bs-emphasis-color: var(--era-ink);
  --bs-secondary-color: var(--era-muted);
  --bs-tertiary-bg: var(--era-surface-alt);
  --bs-border-color: var(--era-border);
  --bs-border-color-translucent: var(--era-border);
  --bs-border-radius: var(--era-radius);
  --bs-border-radius-sm: var(--era-radius-sm);
  --bs-border-radius-lg: var(--era-radius);
  --bs-primary: var(--era-primary);
  --bs-primary-rgb: var(--era-primary-rgb);
  --bs-danger: var(--era-accent);
  --bs-danger-rgb: var(--era-accent-rgb);
  --bs-link-color: var(--era-primary);
  --bs-link-color-rgb: var(--era-primary-rgb);
  --bs-link-hover-color: var(--era-primary-dark);
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-opacity: 0.35;
  --bs-focus-ring-color: rgba(var(--era-primary-rgb), 0.35);
  --bs-heading-color: var(--era-ink);
}

/* --------------------------------------------------------------------------
   Bootstrap component variable overrides
   -------------------------------------------------------------------------- */

.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-focus-box-shadow: 0 0 0 var(--bs-focus-ring-width)
    var(--bs-focus-ring-color);
}

.btn-primary {
  --bs-btn-bg: var(--era-primary);
  --bs-btn-border-color: var(--era-primary);
  --bs-btn-hover-bg: var(--era-primary-dark);
  --bs-btn-hover-border-color: var(--era-primary-dark);
  --bs-btn-active-bg: var(--era-primary-dark);
  --bs-btn-active-border-color: var(--era-primary-dark);
  --bs-btn-disabled-bg: var(--era-primary);
  --bs-btn-disabled-border-color: var(--era-primary);
  --bs-btn-color: var(--era-surface);
  --bs-btn-hover-color: var(--era-surface);
  --bs-btn-active-color: var(--era-surface);
  --bs-btn-disabled-color: var(--era-surface);
}

.btn-outline-primary {
  --bs-btn-color: var(--era-primary);
  --bs-btn-border-color: var(--era-border);
  --bs-btn-hover-bg: var(--era-primary-tint);
  --bs-btn-hover-border-color: var(--era-primary);
  --bs-btn-hover-color: var(--era-primary-dark);
  --bs-btn-active-bg: var(--era-primary-tint-strong);
  --bs-btn-active-border-color: var(--era-primary);
  --bs-btn-active-color: var(--era-primary-dark);
}

.btn-light,
.btn-outline-secondary {
  --bs-btn-color: var(--era-ink);
  --bs-btn-bg: var(--era-surface);
  --bs-btn-border-color: var(--era-border);
  --bs-btn-hover-bg: var(--era-surface-alt);
  --bs-btn-hover-border-color: var(--era-border);
  --bs-btn-hover-color: var(--era-ink);
  --bs-btn-active-bg: var(--era-surface-alt);
  --bs-btn-active-border-color: var(--era-border);
  --bs-btn-active-color: var(--era-ink);
  --bs-btn-disabled-color: var(--era-muted);
  --bs-btn-disabled-bg: var(--era-surface);
  --bs-btn-disabled-border-color: var(--era-border);
}

.card {
  --bs-card-bg: var(--era-surface);
  --bs-card-border-color: var(--era-border);
  --bs-card-border-radius: var(--era-radius);
  --bs-card-cap-bg: var(--era-surface);
  --bs-card-color: var(--era-ink);
}

.form-control,
.form-select {
  --bs-border-color: var(--era-border);
  background-color: var(--era-surface);
  color: var(--era-ink);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--era-primary);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.form-check-input {
  --bs-form-check-bg: var(--era-surface);
  border-color: var(--era-border);
}

.form-check-input:checked {
  background-color: var(--era-primary);
  border-color: var(--era-primary);
}

.form-check-input:focus {
  border-color: var(--era-primary);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.table {
  --bs-table-bg: var(--era-surface);
  --bs-table-color: var(--era-ink);
  --bs-table-border-color: var(--era-border);
  --bs-table-hover-bg: var(--era-primary-tint);
  --bs-table-hover-color: var(--era-ink);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--era-primary);
  --bs-nav-pills-border-radius: var(--era-radius-sm);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--era-surface);
  --bs-dropdown-border-color: var(--era-border);
  --bs-dropdown-border-radius: var(--era-radius);
  --bs-dropdown-link-active-bg: var(--era-primary-tint);
  --bs-dropdown-link-active-color: var(--era-primary-dark);
  --bs-dropdown-link-hover-bg: var(--era-surface-alt);
}

.offcanvas {
  --bs-offcanvas-bg: var(--era-surface);
  --bs-offcanvas-border-color: var(--era-border);
}

.tooltip {
  --bs-tooltip-bg: var(--era-ink);
  --bs-tooltip-color: var(--era-surface);
  --bs-tooltip-border-radius: var(--era-radius-sm);
  --bs-tooltip-opacity: 1;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html,
body {
  height: 100%;
}

body {
  font-size: 0.9375rem;
  line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 3px solid rgba(var(--era-primary-rgb), 0.55);
  outline-offset: 2px;
}

.era-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1080;
  padding: 0.625rem 1rem;
  background-color: var(--era-primary);
  color: var(--era-surface);
  border-radius: 0 0 var(--era-radius-sm) 0;
}

.era-skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   Navbar / shell
   -------------------------------------------------------------------------- */

.era-navbar {
  min-height: var(--era-navbar-height);
  background-color: var(--era-surface);
  border-bottom: 1px solid var(--era-border);
}

.era-navbar-row {
  min-height: var(--era-navbar-height);
}

.era-min-w-0 {
  min-width: 0;
}

.era-logo {
  height: var(--era-logo-height);
  width: auto;
  display: block;
}

.era-navbar .nav-link {
  color: var(--era-muted);
  font-weight: 500;
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.era-navbar .nav-link:hover {
  color: var(--era-ink);
}

.era-navbar .nav-link.active {
  color: var(--era-primary-dark);
  border-bottom-color: var(--era-primary);
}

.era-locale-switcher .btn {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.era-locale-switcher .btn.is-active {
  background-color: var(--era-primary-tint);
  border-color: var(--era-primary);
  color: var(--era-primary-dark);
}

.era-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--era-primary-tint);
  color: var(--era-primary-dark);
  font-weight: 600;
  border: 1px solid var(--era-border);
}

.era-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}

.era-avatar-md {
  width: 44px;
  height: 44px;
  font-size: 0.875rem;
}

.era-avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 1.25rem;
}

.era-meta {
  color: var(--era-muted);
  font-size: 0.8125rem;
}

.era-eyebrow {
  color: var(--era-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.era-panel {
  background-color: var(--era-surface);
  border: 1px solid var(--era-border);
  border-radius: var(--era-radius);
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.era-auth-page {
  min-height: 100%;
  background-color: var(--era-surface-alt);
}

.era-auth-card {
  width: 100%;
  max-width: 27rem;
}

.era-auth-logo-plate {
  background-color: var(--era-surface);
  border: 1px solid var(--era-border);
  border-radius: var(--era-radius-sm);
  padding: 0.75rem 1rem;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Coach selection
   -------------------------------------------------------------------------- */

.era-coach-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.era-coach-card {
  flex: 1 1 20rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  text-align: left;
  background-color: var(--era-surface);
  border: 1px solid var(--era-border);
  border-radius: var(--era-radius);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.era-coach-card:hover {
  border-color: var(--era-primary);
}

.era-coach-card[aria-pressed="true"] {
  border-color: var(--era-primary);
  box-shadow: inset 0 0 0 1px var(--era-primary);
  background-color: var(--era-primary-tint);
}

.era-coach-portrait {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: center 22%;
  background-color: var(--era-surface-alt);
  border: 1px solid var(--era-border);
  border-radius: var(--era-radius-sm);
}

.era-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.era-bullets li {
  position: relative;
  padding-left: 1rem;
  color: var(--era-muted);
  font-size: 0.875rem;
}

.era-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--era-primary);
}

.era-select-state {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--era-muted);
}

.era-coach-card[aria-pressed="true"] .era-select-state {
  color: var(--era-primary-dark);
}

/* --------------------------------------------------------------------------
   Session shell (three columns)
   -------------------------------------------------------------------------- */

.era-session-shell {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  padding: 1.25rem;
  height: calc(100vh - var(--era-navbar-height));
  min-height: 0;
}

/* The side columns are Bootstrap responsive offcanvas elements
   (.offcanvas-lg / .offcanvas-xl): static columns on large screens,
   drawers below the breakpoint. No display rules needed here. */
.era-col-left,
.era-col-right {
  flex: 0 0 15.5rem;
  min-width: 0;
  --bs-offcanvas-width: 18rem;
  --bs-offcanvas-padding-x: 1rem;
  --bs-offcanvas-padding-y: 1rem;
}

.era-col-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--era-surface);
  border: 1px solid var(--era-border);
  border-radius: var(--era-radius);
  overflow: hidden;
}

.era-sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

.era-session-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.era-session-list-group + .era-session-list-group {
  margin-top: 1rem;
}

.era-session-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--era-radius-sm);
  background: none;
  color: var(--era-ink);
  font-size: 0.875rem;
  line-height: 1.35;
}

.era-session-link:hover {
  background-color: var(--era-surface-alt);
}

.era-session-link.is-current {
  background-color: var(--era-primary-tint);
  border-color: var(--era-primary);
  color: var(--era-primary-dark);
  font-weight: 500;
}

.era-session-link .era-session-date {
  display: block;
  color: var(--era-muted);
  font-size: 0.75rem;
  margin-top: 0.125rem;
}

.era-session-link.is-current .era-session-date {
  color: var(--era-primary-dark);
}

/* ---- Conversation ---- */

.era-chat-header {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--era-border);
  background-color: var(--era-surface);
}

.era-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background-color: var(--era-surface);
}

.era-message {
  display: flex;
  gap: 0.75rem;
  max-width: 44rem;
}

.era-message-coach {
  margin-right: auto;
}

.era-message-user {
  margin-left: auto;
  flex-direction: row-reverse;
}

.era-bubble {
  padding: 0.75rem 1rem;
  border-radius: var(--era-radius);
  border: 1px solid var(--era-border);
  background-color: var(--era-surface-alt);
  color: var(--era-ink);
}

.era-message-coach .era-bubble {
  border-top-left-radius: 2px;
}

.era-message-user .era-bubble {
  background-color: var(--era-primary-tint);
  border-color: var(--era-primary-tint-strong);
  border-top-right-radius: 2px;
}

.era-bubble p {
  margin: 0;
}

.era-bubble p + p {
  margin-top: 0.5rem;
}

.era-bubble-meta {
  display: block;
  margin-top: 0.375rem;
  color: var(--era-muted);
  font-size: 0.6875rem;
}

.era-typing {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.875rem 1rem;
}

.era-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--era-muted);
  animation: era-typing-bounce 1.1s infinite ease-in-out;
}

.era-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.era-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes era-typing-bounce {
  0%,
  70%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .era-typing span {
    animation: none;
    opacity: 0.6;
  }
}

.era-hidden {
  display: none !important;
}

/* ---- Composer ---- */

.era-composer {
  border-top: 1px solid var(--era-border);
  background-color: var(--era-surface);
  padding: 0.875rem 1.25rem 1rem;
}

.era-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

/*
 * Height comes from the textarea's own `rows` attribute, which app.js keeps
 * between 1 and 5. No inline style is ever written, so a server-rendered
 * rows="1" is enough for the first paint.
 */
.era-composer-input {
  flex: 1 1 auto;
  resize: none;
  overflow-y: auto;
  line-height: 1.4;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.era-composer-input[data-rows="1"] {
  /* Match the 2.75rem icon buttons when the field is a single line. */
  height: 2.75rem;
}

.era-icon-btn {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.era-mic-wrap {
  flex: 0 0 auto;
  display: inline-block;
}

.era-composer-hint {
  margin-top: 0.5rem;
  color: var(--era-muted);
  font-size: 0.75rem;
}

/* ---- Action items ---- */

.era-action-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.era-action-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--era-border);
}

.era-action-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.era-action-list li:first-child {
  padding-top: 0;
}

.era-action-label {
  font-size: 0.875rem;
  line-height: 1.4;
}

.era-action-item.is-done .era-action-label {
  color: var(--era-muted);
  text-decoration: line-through;
}

.era-due {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--era-muted);
}

.era-due-soon {
  color: var(--era-accent);
}

.era-due-open {
  color: var(--era-warning);
}

.era-progress-track {
  height: 4px;
  border-radius: 2px;
  background-color: var(--era-surface-alt);
  overflow: hidden;
}

/*
 * Fill width is set through data-progress in 5% steps, so app.js never
 * writes an inline style and every visual value stays in this file.
 */
.era-progress-fill {
  height: 100%;
  width: 0;
  background-color: var(--era-primary);
  transition: width 0.2s ease;
}

.era-progress-fill[data-progress="5"] { width: 5%; }
.era-progress-fill[data-progress="10"] { width: 10%; }
.era-progress-fill[data-progress="15"] { width: 15%; }
.era-progress-fill[data-progress="20"] { width: 20%; }
.era-progress-fill[data-progress="25"] { width: 25%; }
.era-progress-fill[data-progress="30"] { width: 30%; }
.era-progress-fill[data-progress="35"] { width: 35%; }
.era-progress-fill[data-progress="40"] { width: 40%; }
.era-progress-fill[data-progress="45"] { width: 45%; }
.era-progress-fill[data-progress="50"] { width: 50%; }
.era-progress-fill[data-progress="55"] { width: 55%; }
.era-progress-fill[data-progress="60"] { width: 60%; }
.era-progress-fill[data-progress="65"] { width: 65%; }
.era-progress-fill[data-progress="70"] { width: 70%; }
.era-progress-fill[data-progress="75"] { width: 75%; }
.era-progress-fill[data-progress="80"] { width: 80%; }
.era-progress-fill[data-progress="85"] { width: 85%; }
.era-progress-fill[data-progress="90"] { width: 90%; }
.era-progress-fill[data-progress="95"] { width: 95%; }
.era-progress-fill[data-progress="100"] { width: 100%; }

.era-summary-list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem 0.75rem;
  font-size: 0.8125rem;
}

.era-summary-list dt {
  color: var(--era-muted);
  font-weight: 400;
}

.era-summary-list dt {
  font-size: 0.75rem;
}

.era-summary-list dd {
  margin: 0;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   History
   -------------------------------------------------------------------------- */

.era-history-row {
  cursor: pointer;
}

.era-table-numeric {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.era-badge-coach {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--era-border);
  background-color: var(--era-surface-alt);
  color: var(--era-ink);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ==========================================================================
   Server-rendered additions
   Everything above this line is the design template verbatim. Below are only
   the rules the static mock did not need because it had no server.
   ========================================================================== */

/* ── Language switcher ──────────────────────────────────────────────────────
   Locale persists to the user record, so this is a <form> that posts rather than
   a client-side toggle — which is what made it look unfinished.

   Three separate faults, all mine:

   1. A leftover `.era-locale-switcher form { display: contents }` rule from an
      earlier structure where the form was nested INSIDE the group. The form is
      now the group itself, so the rule matched nothing and only misdescribed the
      markup.

   2. The group carries a hidden input for returnTo, which is a non-button first
      child. Bootstrap's .btn-group sizing keys off :first-child / :last-child, so
      the first visible button stopped being treated as first: it picked up the
      -1px overlap margin meant for interior buttons and lost its left radius,
      which is exactly the "missing a border" edge. Anchoring on :first-of-type
      instead makes it immune to the hidden input.

   3. My own is-active override re-declared font-weight: 500, LOWERING it from the
      600 the template sets on every button in this group. The selected language
      was rendering lighter than the unselected ones — the opposite of selected.

   Presented as one segmented control: the border belongs to the GROUP and the
   buttons carry only dividers, so adjacent 1px borders cannot double up and read
   as three separate chips.
   ────────────────────────────────────────────────────────────────────────── */
.era-locale-switcher {
  display: inline-flex;
  border: 1px solid var(--era-border);
  border-radius: var(--era-radius-sm);
  background-color: var(--era-surface);
}

.era-locale-switcher .btn {
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  margin: 0;
  border-radius: 0;
  border-left: 1px solid var(--era-border);
}

/* :first-of-type / :last-of-type, not :first-child — the hidden returnTo input
   is a sibling and would otherwise take the honour. */
.era-locale-switcher .btn:first-of-type {
  border-left: 0;
  border-start-start-radius: calc(var(--era-radius-sm) - 1px);
  border-end-start-radius: calc(var(--era-radius-sm) - 1px);
}

.era-locale-switcher .btn:last-of-type {
  border-start-end-radius: calc(var(--era-radius-sm) - 1px);
  border-end-end-radius: calc(var(--era-radius-sm) - 1px);
}

/* Deliberately NOT overflow:hidden to clip the corners — Bootstrap draws focus
   as a box-shadow, and clipping it would leave keyboard users with no visible
   focus at all. Lifting the focused button instead keeps the ring whole and
   above its neighbours. */
.era-locale-switcher .btn:focus-visible {
  position: relative;
  z-index: 1;
}

/* Selected. Inherits the 600 weight the template sets on this group; a lighter
   active state reads as less selected, not more.

   border-color is re-declared because the template's is-active rule recolours all
   four borders to primary. That was right when each button carried its own
   outline, but the group now owns the border, so it would draw a box inside a
   box. The fill carries the selection instead; the divider stays neutral. */
.era-locale-switcher .btn.is-active {
  background-color: var(--era-primary-tint-strong);
  color: var(--era-primary-dark);
  border-color: transparent;
  border-left-color: var(--era-border);
}

/* Errors surfaced from a failed coach call. Sits in the message flow, so it is
   spaced like a bubble rather than like a page-level alert. */
.era-message-error {
  align-self: center;
  max-width: 42rem;
  margin: 0 auto;
}

.era-flash {
  border: 1px solid var(--era-border);
  border-left: 3px solid var(--era-accent);
  border-radius: var(--era-radius-sm);
  background: var(--era-surface);
  color: var(--era-ink);
  padding: 0.75rem 1rem;
}

/* Untranslated placeholder copy ships conspicuous on purpose. A [BG TODO] string
   that reads as ordinary text is a string that reaches a Bulgarian user. */
.era-i18n-todo {
  outline: 1px dashed var(--era-accent);
  outline-offset: 2px;
}

/* ── Logo sizing ────────────────────────────────────────────────────────────
   The real ERA Real Estate Europe mark is a STACKED PORTRAIT lockup — roof
   device above the wordmark above "REAL ESTATE EUROPE" — at 1380x1819, i.e.
   0.76:1. The design template assumed a wide horizontal mark and wrote
   width="120" height="32", a 3.75:1 ratio it never had.

   That assumption is why raising the height did not help. Constraining a
   portrait image by height makes it NARROWER, not bigger: at 56px tall this mark
   is 42px wide, which is a sliver with unreadable microtype under it. The auth
   screens therefore size by WIDTH and let the height follow.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --era-logo-width-auth: 150px;   /* -> ~198px tall at the true ratio */
}

.era-auth-logo-plate {
  padding: 1rem 1.5rem;
}

.era-auth-logo-plate .era-logo {
  width: var(--era-logo-width-auth);
  height: auto;
}

@media (max-width: 400px) {
  :root { --era-logo-width-auth: 112px; }
  .era-auth-logo-plate { padding: 0.75rem 1rem; }
}

/* The navbar is the harder case and this is an interim. A stacked lockup cannot
   be legible inside a 64px bar — at any height that fits, the two lines of
   microtype under the wordmark are mush. So it is set just large enough to read
   as the roof device, and the product name beside it carries the meaning.

   The real fix is the horizontal lockup from ERA's brand pack, which every
   brand system of this kind has and which we do not yet have. */
.era-navbar .era-logo {
  height: 40px;
  width: auto;
}

/* An overdue count of zero is unremarkable; a non-zero one is the single thing
   on the dashboard that should catch the eye. Applied by app.js as boxes are
   ticked, so it clears the moment the last one is done. */
.era-count-alert {
  color: var(--era-accent);
}

/* The navbar must never reach a second line. Bootstrap's .nav sets
   flex-wrap: wrap, which is right for a general-purpose nav and wrong for a
   fixed-height bar — it silently spills instead of getting tight, and the
   64px row grows to 128px.

   Belt and braces alongside the reduced item count: nowrap makes the failure
   mode "cramped" rather than "two rows", and cramped is visible during
   development where a second line only shows up once a real admin signs in. */
.era-navbar .nav {
  flex-wrap: nowrap;
}

.era-navbar .nav-link {
  white-space: nowrap;
}

/* ── Co-branding ────────────────────────────────────────────────────────────
   ERA's mark carries the client brand; this line carries the platform. Set well
   below the product name in weight and size, because an attribution that
   competes with the client's own name is not co-branding, it is a second logo.

   Not a link. In the navbar it would send someone out of the app mid-session
   from a spot they click by accident; if an outbound link is wanted, the auth
   screens are the place for it. */
.era-brandmark {
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.era-poweredby {
  color: var(--era-muted);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* On the auth screens it sits under the logo plate, centred with it. */
.era-auth-page .era-poweredby {
  font-size: 0.6875rem;
  text-align: center;
}

/* ── Coach identity in the chat header ──────────────────────────────────────
   Who is answering, held in view for the whole session. It used to live only in
   the left sidebar, which is an offcanvas below lg — so on a phone the entire
   conversation ran with nothing on screen saying which coach it was. */
.era-coach-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding-right: 1rem;
  border-right: 1px solid var(--era-border);
}

.era-coach-chip-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  /* The portraits are head-and-shoulders squares; a centred circular crop cuts
     the chin. Biasing upward keeps the face centred in the circle — the same
     adjustment .era-coach-portrait makes for its 16:9 crop. */
  object-position: center 20%;
  border: 1px solid var(--era-border);
  background-color: var(--era-surface-alt);
  flex: 0 0 auto;
}

.era-coach-chip-text {
  min-width: 0;          /* lets text-truncate actually engage */
  line-height: 1.25;
}

/* Below sm the name would squeeze the topic to nothing. The portrait alone still
   answers "who am I talking to", so the text drops and the divider with it. */
@media (max-width: 575.98px) {
  .era-coach-chip-text { display: none; }
  .era-coach-chip {
    padding-right: 0;
    border-right: 0;
  }
}

/* ── One page width ─────────────────────────────────────────────────────────
   The session screen used to sit outside any container while every other page
   used container-xl, so the content — and the navbar with it — snapped between
   full-bleed and centred as you navigated.

   The shell is now inside the same container-xl the other pages use, so its
   horizontal padding comes from that container and must not be applied twice. */
.era-session-shell {
  padding-inline: 0;
}

/* The container adds its own horizontal padding, which eats into the viewport
   height calculation not at all — but the shell's own vertical padding still
   needs to be there, so it is restated rather than lost with the shorthand. */
.era-session-shell {
  padding-block: 1.25rem;
}