/* Toasts */
#aliko-toast-host{ position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.aliko-toast{
  background: rgba(15,18,23,.97); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px;
  font-family: var(--font-display); font-weight: 700; box-shadow: var(--shadow-card); opacity: 0; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease; border: 1px solid rgba(255,255,255,.1); max-width: 90vw; text-align: center;
}
.aliko-toast.show{ opacity: 1; transform: translateY(0); }
.aliko-toast.error{ border-color: var(--signal-red); }

/* Scroll to top */
.aliko-scrolltop{
  position: fixed; right: 18px; bottom: 18px; z-index: 400; width: 44px; height: 44px; border-radius: 50%;
  background: var(--route); color: #fff; border: none; font-size: 18px; box-shadow: var(--shadow-card);
  transition: opacity .2s ease, transform .2s ease;
}
.aliko-scrolltop.hidden{ opacity: 0; pointer-events: none; transform: translateY(10px); }

/* Offline banner */
.aliko-net-banner{
  position: fixed; top: 0; left: 0; right: 0; z-index: 500; background: var(--signal-amber); color: #1a1400;
  text-align: center; font-size: 12.5px; font-weight: 700; padding: 6px 10px; font-family: var(--font-display);
}
.aliko-net-banner.hidden{ display: none; }

/* Reduced motion */
.aliko-reduced-motion *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }

/* Password show/hide + strength */
.aliko-pw-wrap{ position: relative; display: block; }
.aliko-pw-wrap input{ padding-right: 40px !important; width: 100%; box-sizing: border-box; }
.aliko-pw-toggle{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 16px; cursor: pointer; padding: 4px; }
.aliko-pw-meter{ height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); margin: 6px 0 2px; overflow: hidden; }
.aliko-pw-meter span{ display: block; height: 100%; width: 0; border-radius: 2px; transition: width .2s ease, background .2s ease; }

/* Install button */
.aliko-install-btn{
  position: fixed; left: 18px; bottom: 18px; z-index: 400; padding: 10px 16px; border-radius: 999px;
  background: rgba(15,18,23,.95); color: #fff; border: 1px solid rgba(255,255,255,.12); font-weight: 700; font-size: 12.5px;
  box-shadow: var(--shadow-card);
}
.aliko-install-btn.hidden{ display: none; }

/* iOS "Add to Home Screen" instructions banner (no native install prompt exists on iOS) */
.aliko-ios-install-banner{
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 400;
  background: rgba(15,18,23,.97); color: #fff; border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; box-shadow: var(--shadow-card);
}
.aliko-ios-install-banner button{ background: none; border: none; color: var(--ink-faint); font-size: 14px; flex: none; }

/* Breadcrumbs */
.aliko-breadcrumb{ font-size: 12.5px; color: var(--ink-faint); margin-bottom: 10px; }
.aliko-breadcrumb a{ color: var(--ink-dim); text-decoration: none; }
.aliko-breadcrumb a:hover{ color: var(--route); }
.aliko-breadcrumb .crumb-sep{ margin: 0 6px; opacity: .5; }

/* Skeleton loaders */
.skeleton-card{ background: var(--surface); border-radius: var(--radius); padding: 16px; margin-bottom: 10px; }
.sk-line{ height: 12px; border-radius: 6px; margin-bottom: 8px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06)); background-size: 200% 100%; animation: skShimmer 1.4s ease-in-out infinite; }
.sk-line.w60{ width: 60%; } .sk-line.w40{ width: 40%; } .sk-line.w80{ width: 80%; }
@keyframes skShimmer{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }

/* Resume banner */
.resume-banner{ display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid rgba(255,90,31,.3); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.resume-banner a{ color: var(--route); font-weight: 700; text-decoration: none; }
.resume-dismiss{ background: none; border: none; color: var(--ink-faint); font-size: 14px; cursor: pointer; }

/* Recently-viewed horizontal strip (multi-item case) */
.recent-strip-wrap{ margin-bottom: 16px; }
.recent-strip-title{ font-size: 13px; color: var(--ink-dim); margin-bottom: 8px; }
.recent-strip{ display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.recent-card{
  flex: none; width: 140px; background: var(--surface); border-radius: var(--radius); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px; text-decoration: none; font-size: 12px; color: var(--ink-faint);
}
.recent-card strong{ color: var(--ink); font-size: 13px; }

/* Add-business floating action button (persistent, Uber/Maps-style CTA) */
.aliko-fab{
  position: fixed; right: 18px; bottom: 84px; z-index: 400; width: 52px; height: 52px; border-radius: 50%;
  background: var(--route); color: #fff; font-size: 24px; border: none; box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
@media (max-width: 720px){ .aliko-fab{ bottom: 70px; } }

/* Star rating input (progressive enhancement over the <select>) */
.aliko-star-input{ display: inline-flex; gap: 4px; font-size: 22px; cursor: pointer; }
.aliko-star-input span{ color: rgba(255,255,255,.2); transition: color .12s ease; }
.aliko-star-input span.filled{ color: var(--signal-amber); }

/* Bulk action bar (admin pending-listings bulk verify) */
.bulk-action-bar{ display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid rgba(255,90,31,.25); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }

/* QR code panel + review photo preview */
.qr-panel{ background: var(--surface); border-radius: var(--radius); padding: 14px; margin: 10px 0; text-align: center; }
.qr-panel.hidden{ display: none; }
.qr-panel img{ border-radius: 8px; background: #fff; padding: 8px; }
.review-photo-preview{ max-width: 120px; max-height: 120px; border-radius: 8px; margin-top: 8px; display: block; }

/* Nearby similar businesses strip */
.nearby-strip{ display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.nearby-card{
  flex: none; width: 160px; background: var(--surface); border-radius: var(--radius); padding: 12px;
  display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-dim); text-decoration: none;
}
.nearby-card strong{ color: var(--ink); font-size: 13.5px; }
.stars.small{ color: var(--signal-amber); font-size: 12px; }

/* Closing-soon urgency banner */
.closing-soon-banner{
  background: rgba(245,185,66,.12); color: var(--signal-amber); border: 1px solid rgba(245,185,66,.3);
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; font-weight: 700; margin-bottom: 10px;
}

/* Rating breakdown bars */
.rating-breakdown{ margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.rb-row{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-dim); }
.rb-star{ width: 26px; flex: none; }
.rb-track{ flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.rb-fill{ height: 100%; background: var(--signal-amber); border-radius: 3px; }
.rb-count{ width: 24px; text-align: right; flex: none; }

/* Kenya-only phone field: fixed +254 prefix + local number */
.phone-field-row{ display: flex; gap: 8px; align-items: center; }
.phone-cc-fixed{
  flex: none; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 9px 10px; font-size: 13px; font-weight: 700; color: var(--ink-dim); white-space: nowrap;
}
.phone-field-row input{ flex: 1; min-width: 0; }
.verified-at{ display: block; font-size: 10.5px; color: var(--ink-faint); font-weight: 600; margin-top: 2px; }

/* Structured location-report options */
.report-options{ display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.report-option{ display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,.04); cursor: pointer; }
.report-option:hover{ background: rgba(255,255,255,.08); }

/* =====================================================================
   Two-pane messaging layout (sidebar chat list + active conversation),
   modeled directly on WhatsApp Desktop's own layout: persistent list on
   the left, header + bubbles + composer on the right.
   ===================================================================== */
.chat-shell{
  display: flex; height: calc(100vh - 160px); min-height: 480px;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface);
}

/* Left pane: chat list */
.chat-sidebar{ width: 340px; flex: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.chat-sidebar-head{ padding: 16px 16px 8px; }
.chat-sidebar-head h2{ margin: 0; font-size: 20px; }
.chat-search{ padding: 8px 14px 12px; }
.chat-search input{ width: 100%; box-sizing: border-box; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; color: var(--ink); font-size: 13px; }
.chat-list{ flex: 1; overflow-y: auto; }

.chat-row{
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; cursor: pointer;
}
.chat-row:hover{ background: rgba(255,255,255,.04); }
.chat-row.active{ background: rgba(255,90,31,.1); }
.chat-avatar{
  flex: none; width: 50px; height: 50px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
}
.chat-row-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-row-top{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-row-name{ font-weight: 700; font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row-time{ flex: none; font-size: 11px; color: var(--ink-faint); }
.chat-row-bottom{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-row-preview{ font-size: 13px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.chat-row-sub{ color: var(--ink-faint); }
.chat-unread-badge{
  flex: none; background: var(--route); color: #fff; font-size: 11px; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 6px;
}

/* Right pane: active conversation */
.chat-main{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-empty{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ink-faint); }
.chat-empty-icon{ font-size: 40px; opacity: .5; }
.chat-active{ flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-active.hidden{ display: none; }
.chat-main-head{ display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.chat-back-btn{ display: none; background: none; border: none; color: var(--ink); font-size: 18px; margin-right: 2px; }
.chat-main-name{ font-weight: 700; font-size: 15px; }
.chat-main-sub{ font-size: 12px; color: var(--ink-faint); }

.message-bubbles{ flex: 1; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; padding: 16px; min-height: 0; }
.bubble{ max-width: 65%; padding: 8px 12px; border-radius: 16px; font-size: 13.5px; margin-bottom: 2px; }
.bubble.mine{ align-self: flex-end; background: var(--route); color: #fff; border-bottom-right-radius: 16px; }
.bubble.theirs{ align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 16px; }
/* Only the last bubble in a consecutive run from the same sender gets the
   "tail" corner and a visible timestamp — matches how WhatsApp groups a
   burst of messages from one person instead of repeating chrome on every
   single bubble. */
.bubble.mine.last-in-group{ border-bottom-right-radius: 4px; }
.bubble.theirs.last-in-group{ border-bottom-left-radius: 4px; }
.bubble:not(.last-in-group){ margin-bottom: 2px; }
.bubble.last-in-group{ margin-bottom: 10px; }
.bubble-time{ font-size: 10px; opacity: .65; margin-top: 4px; }
.bubble-sender{ font-size: 11px; font-weight: 800; opacity: .8; margin-bottom: 3px; }
.bubble.mine .bubble-sender{ color: rgba(255,255,255,.85); }
.bubble.theirs .bubble-sender{ color: var(--route); }
.date-divider{ align-self: center; font-size: 11px; color: var(--ink-faint); background: var(--surface-2); padding: 4px 12px; border-radius: 999px; margin: 10px 0 6px; }
.message-form{ display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); flex: none; }
.message-form input{ flex: 1; }

/* Mobile: one pane at a time, same as WhatsApp's own phone app — the
   sidebar and the active chat can't both fit on a phone screen. */
@media (max-width: 860px){
  /* Fix: this used a fixed "-16px" negative margin to bleed edge-to-edge,
     assuming the parent's padding was always 16px — but main.shell's own
     padding actually changes at different breakpoints (24px, 14px, then
     10px on very small phones), so the fixed guess was wrong at most
     widths and caused real horizontal overflow/overlap. This technique
     computes the bleed from the viewport directly instead, so it's
     correct regardless of whatever padding the parent has at any width. */
  .chat-shell{ height: calc(100vh - 140px); border-radius: 0; border: none; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }
  .chat-sidebar{ width: 100%; border-right: none; }
  .chat-main{ display: none; }
  .chat-shell.mobile-show-chat .chat-sidebar{ display: none; }
  .chat-shell.mobile-show-chat .chat-main{ display: flex; }
  .chat-back-btn{ display: inline-block; }
}

/* Voice search mic button */
.voice-search-btn{ background: none; border: none; font-size: 18px; padding: 4px 8px; flex: none; }
.voice-search-btn.hidden{ display: none; }
.voice-search-btn.listening{ animation: micPulse 1s ease-in-out infinite; }
@keyframes micPulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .4; } }

/* Aliko Guide widget */
.aliko-guide-btn{
  position: fixed; right: 18px; bottom: 150px; z-index: 400; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(15,18,23,.95); border: 1px solid rgba(255,255,255,.12); font-size: 20px; box-shadow: var(--shadow-card);
}
@media (max-width: 720px){ .aliko-guide-btn{ bottom: 136px; } }
.aliko-guide-panel{
  position: fixed; right: 18px; bottom: 206px; z-index: 401; width: min(340px, calc(100vw - 36px)); max-height: 60vh;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-float);
  display: flex; flex-direction: column; overflow: hidden;
}
.aliko-guide-panel.hidden{ display: none; }
.guide-header{ padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 800; font-family: var(--font-display); display: flex; align-items: center; gap: 8px; }
.guide-sub{ font-size: 10.5px; font-weight: 500; color: var(--ink-faint); }
.guide-close{ margin-left: auto; background: none; border: none; color: var(--ink-faint); font-size: 14px; }
.guide-body{ flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.guide-msg{ font-size: 13px; padding: 8px 11px; border-radius: 12px; max-width: 90%; }
.guide-msg.bot{ background: var(--surface-2); align-self: flex-start; }
.guide-msg.me{ background: var(--route); color: #fff; align-self: flex-end; }
.guide-link{ color: var(--route); font-weight: 700; display: inline-block; margin-top: 4px; }
.guide-form{ display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
.guide-form input{ flex: 1; }
.guide-form button{ background: var(--route); color: #fff; border: none; border-radius: 8px; padding: 0 14px; font-weight: 800; }

/* Recent-searches dropdown header */
.suggest-recent-header{ display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.suggest-recent-header button{ background: none; border: none; color: var(--route); font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* Typo-tolerant search fallback banner */
.fuzzy-banner{ background: rgba(155,140,255,.1); color: var(--signal-violet); border: 1px solid rgba(155,140,255,.3); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }

/* Alias tag input */
.alias-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.alias-tag{ display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border-radius: 999px; padding: 5px 10px; font-size: 12px; }
.alias-tag button{ background: none; border: none; color: var(--ink-faint); font-size: 12px; padding: 0; }
.also-known-as{ font-size: 12px; color: var(--ink-faint); margin: 4px 0 12px; }

/* Multiple-entrances editor */
.entrance-row{ display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.entrance-row input{ width: 100%; }
.entrance-row button{ background: none; border: none; color: var(--signal-red); font-size: 16px; }
.entrance-geo-btn{ font-size: 11px; padding: 4px 8px; }
.entrance-list-nav{ display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.entrance-pick{ background: var(--bg-raised); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; }
.entrance-pick.nearest{ border: 1px solid var(--route); }
.entrance-pick .ep-label{ font-weight: 700; display: flex; justify-content: space-between; }

/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--route); outline-offset: 2px;
}

/* Print stylesheet — clean printable business page */
@media print{
  #site-header, .nav-recenter, .icon-btn, .btn.ghost, .aliko-scrolltop, .aliko-install-btn, #navPanel, .action-row, .back-link{ display: none !important; }
  body{ background: #fff !important; color: #000 !important; }
  .card, .profile-grid, .address-plate{ border: 1px solid #ccc !important; background: #fff !important; color: #000 !important; }
}