/* ============================================================================
   AfricanDiscountFoods — mobile app shell
   Layered on app.css: bottom tab bar, install nudge, offline banner, order
   rooms, the shopping assistant and the seller brief. Phone-first (≤ 768px),
   safe-area aware, RTL-safe (logical properties), dark-mode via html.dark.
   ========================================================================== */

:root {
  --tab-bar-height: 62px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

.mobile-only { display: none; }

/* ------------------------------------------------------------ offline bar */
#adf-offline-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #3A2A10;
  color: #FBEBD2;
  font-size: .85rem;
  padding: .5rem 1rem;
  padding-top: calc(.5rem + var(--safe-top));
  text-align: center;
}

/* -------------------------------------------------------------- tab bar */
.tab-bar { display: none; }

@media (max-width: 768px) {
  .mobile-only { display: block; }

  body { padding-bottom: calc(var(--tab-bar-height) + var(--safe-bottom)); }

  .tab-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(var(--tab-bar-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--header-glass);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-top: 1px solid var(--line);
  }
  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    color: var(--ink-soft);
    font-size: .68rem;
    font-weight: 600;
    font-family: var(--font-head);
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
  }
  .tab.active { color: var(--terracotta); }
  .tab-icon { position: relative; font-size: 1.35rem; line-height: 1; }
  .tab-ai .tab-icon {
    background: linear-gradient(135deg, var(--gold), var(--terracotta));
    color: #fff;
    border-radius: 999px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin-top: -14px;
    box-shadow: var(--shadow);
    font-size: 1.2rem;
  }
  .tab-badge {
    position: absolute;
    top: -6px;
    inset-inline-end: -12px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--terracotta);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1;
  }

  /* The bottom bar replaces the top-bar links and the floating cart drawer's
     desktop position; keep the phone header compact. */
  .top-bar { display: none; }
  .brand-tag { display: none; }
  .cart-drawer { bottom: calc(var(--tab-bar-height) + var(--safe-bottom)); }
  .site-footer { padding-bottom: 1rem; }

  /* Product page: the buy row sticks above the tab bar. */
  .buy-row {
    position: sticky;
    bottom: calc(var(--tab-bar-height) + var(--safe-bottom) + .5rem);
    z-index: 30;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .6rem .7rem;
    flex-wrap: wrap;
  }
  .buy-row .btn-primary { flex: 1; justify-content: center; }
  .buy-row .btn-ghost { display: none; }

  /* Larger tap targets everywhere on phones. */
  .btn, .icon-btn, .ribbon-link, .qty-stepper button { min-height: 44px; }

  /* Two-column page layouts stack on phones (account, checkout, order pages). */
  .checkout-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .account-locale select { flex: 1; min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); color: var(--ink); font: inherit; }
}

.tab-badge.inline {
  position: static;
  display: inline-grid;
  margin-inline-start: .35rem;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--terracotta);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  place-items: center;
  line-height: 1;
}

/* Installed app: no browser chrome, so trim the marketing chrome too. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .site-header { padding-top: var(--safe-top); }
  .install-banner { display: none !important; }
}

/* ------------------------------------------------------- install banner */
.install-banner {
  position: fixed;
  inset-inline: .8rem;
  bottom: calc(var(--tab-bar-height) + var(--safe-bottom) + .8rem);
  z-index: 65;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .8rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: rise .35s ease;
}
@media (min-width: 769px) { .install-banner { bottom: 1rem; inset-inline: auto 1rem; max-width: 420px; } }
.install-banner img { border-radius: 10px; flex: none; }
.install-copy { display: flex; flex-direction: column; font-size: .8rem; color: var(--ink-soft); min-width: 0; flex: 1; }
.install-copy strong { color: var(--ink); font-size: .9rem; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ push toggle */
.push-toggle {
  display: flex;
  align-items: center;
  gap: .8rem;
  justify-content: space-between;
  padding: .8rem 0;
  border-top: 1px solid var(--line);
  margin-top: .8rem;
}
.push-toggle > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.push-hint { font-size: .78rem; color: var(--ink-soft); }

/* ------------------------------------------------------------- inbox list */
.inbox-tabs { margin: .4rem 0 1rem; }
.inbox-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2rem; }
.inbox-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem .9rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .15s ease, box-shadow .15s ease;
}
.inbox-row:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.inbox-row.unread { border-color: var(--terracotta); background: linear-gradient(160deg, var(--terracotta-soft), var(--bg-raised) 60%); }
.inbox-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--green-deep);
  font-weight: 700;
  font-family: var(--font-head);
  font-size: 1rem;
}
.inbox-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.inbox-title { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.inbox-when { font-size: .74rem; color: var(--ink-faint); flex: none; }
.inbox-meta { display: flex; gap: .5rem; align-items: center; font-size: .78rem; color: var(--ink-soft); flex-wrap: wrap; }
.inbox-preview { font-size: .85rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-row.unread .inbox-preview { color: var(--ink); font-weight: 500; }
.inbox-chevron { color: var(--ink-faint); font-size: 1.4rem; }

/* -------------------------------------------------------------- order room */
.room-page { display: flex; flex-direction: column; min-height: calc(100vh - 140px); }
.room-head {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.room-title { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: .82rem; color: var(--ink-soft); }
.room-title strong { color: var(--ink); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-details { margin-top: .8rem; }
.room-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1rem 0;
  overflow-y: auto;
  max-height: 52vh;
  scroll-behavior: smooth;
}
.room-event {
  align-self: center;
  display: flex;
  gap: .6rem;
  align-items: baseline;
  font-size: .76rem;
  color: var(--ink-soft);
  background: var(--bg-sunken);
  border-radius: 999px;
  padding: .25rem .8rem;
  margin: .3rem 0;
}
.room-event time { color: var(--ink-faint); }
.room-msg {
  max-width: min(78%, 520px);
  padding: .55rem .8rem;
  border-radius: 18px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  font-size: .93rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.room-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.room-msg.theirs { align-self: flex-start; border-start-start-radius: 6px; }
.room-msg.mine { align-self: flex-end; background: var(--terracotta); color: #fff; border-color: transparent; border-start-end-radius: 6px; }
.room-msg.mine.pending { opacity: .7; }
.room-msg-name { font-size: .72rem; font-weight: 600; color: var(--green-deep); }
.room-msg-meta { display: flex; gap: .6rem; align-items: center; font-size: .7rem; opacity: .75; }
.room-link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; font-size: .7rem; cursor: pointer; }
.room-translation { font-size: .85rem; border-top: 1px dashed rgba(255,255,255,.35); padding-top: .3rem; margin-top: .2rem !important; opacity: .95; }
.room-msg.theirs .room-translation { border-top-color: var(--line); color: var(--ink-soft); }
.room-ai-bar { display: flex; gap: .4rem; flex-wrap: wrap; padding: .5rem 0; }
.room-menu { margin-top: .6rem; padding: .3rem; display: flex; flex-direction: column; }
.room-menu-item {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; min-height: 44px; padding: .55rem .8rem;
  background: none; border: 0; border-radius: 10px;
  color: var(--ink); font: inherit; text-align: start; text-decoration: none; cursor: pointer;
}
.room-menu-item:hover { background: var(--bg-sunken); }
.room-menu-item.danger { color: var(--terracotta); }
.room-block-confirm { margin-top: .6rem; }
.room-block-confirm p { font-size: .88rem; color: var(--ink-soft); margin: .4rem 0 .6rem; }
.room-block-confirm textarea { width: 100%; font: inherit; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); resize: vertical; }
.room-block-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .6rem; }
.btn-danger { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
.room-blocked {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  padding: .8rem 1rem; margin: .5rem 0;
  background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 12px;
  font-size: .88rem; color: var(--ink-soft);
}
.room-assistant { margin-top: .5rem; background: linear-gradient(160deg, var(--gold-soft), var(--bg-raised) 70%); }
.room-assistant-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.room-assistant p { margin: 0 0 .5rem; }
.room-assistant ul { margin: 0 0 .6rem; padding-inline-start: 1.1rem; font-size: .85rem; color: var(--ink-soft); }
/* Chips, assistant answer and composer travel together above the tab bar. */
.room-dock {
  position: sticky;
  bottom: calc(var(--tab-bar-height) + var(--safe-bottom));
  background: var(--bg);
  padding-top: .2rem;
  z-index: 35;
}
@media (min-width: 769px) { .room-dock { bottom: 0; } }
.room-composer {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  padding: .3rem 0 .6rem;
}
.room-composer textarea {
  flex: 1;
  resize: none;
  min-height: 44px;
  max-height: 120px;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg-raised);
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* 16px avoids iOS zoom-on-focus */
}
.room-composer .btn { border-radius: 999px; width: 48px; height: 48px; padding: 0; justify-content: center; flex: none; }

/* ------------------------------------------------------ shopping assistant */
.assist-page { display: flex; flex-direction: column; min-height: calc(100vh - 160px); }
.assist-head .lede { margin-bottom: .6rem; }
.assist-thread { flex: 1; display: flex; flex-direction: column; gap: .7rem; padding: .4rem 0 1rem; overflow-y: auto; max-height: 62vh; scroll-behavior: smooth; }
.assist-bubble {
  max-width: min(92%, 640px);
  padding: .8rem 1rem;
  border-radius: 18px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.assist-bubble p { margin: 0; }
.assist-bubble.user { align-self: flex-end; background: var(--green); color: #fff; border-color: transparent; border-start-end-radius: 6px; }
.assist-bubble.assistant { align-self: flex-start; border-start-start-radius: 6px; }
.assist-bubble.typing { flex-direction: row; gap: .3rem; padding: .8rem 1rem; }
.assist-bubble.typing span { width: 8px; height: 8px; border-radius: 999px; background: var(--ink-faint); animation: blink 1.2s infinite; }
.assist-bubble.typing span:nth-child(2) { animation-delay: .2s; }
.assist-bubble.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.assist-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.assist-chip {
  border: 1px solid var(--line);
  background: var(--bg-sunken);
  color: var(--ink);
  border-radius: 999px;
  padding: .4rem .8rem;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 36px;
}
.assist-chip:hover { border-color: var(--terracotta); color: var(--terracotta); }
.assist-chip.busy { color: var(--ink-soft); cursor: default; }
.assist-items { display: flex; flex-direction: column; gap: .4rem; }
.assist-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.assist-item-art { font-size: 1.6rem; width: 42px; height: 42px; display: grid; place-items: center; background: var(--gold-soft); border-radius: 10px; flex: none; }
.assist-item-info { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: .78rem; color: var(--ink-soft); }
.assist-item-info a { color: var(--ink); font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assist-item-info em { color: var(--green-deep); font-style: normal; }
.assist-item .btn { flex: none; white-space: nowrap; }
.assist-item-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; }
.assist-source { font-size: .68rem; color: var(--ink-faint); }
.assist-error { color: var(--danger); font-size: .85rem; }
.assist-composer {
  position: sticky;
  bottom: calc(var(--tab-bar-height) + var(--safe-bottom) + .4rem);
  display: flex;
  gap: .5rem;
  padding: .5rem 0 .6rem;
  background: var(--bg);
}
@media (min-width: 769px) { .assist-composer { bottom: 0; } }
.assist-composer input {
  flex: 1;
  min-height: 48px;
  padding: .7rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.assist-composer input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }

/* ------------------------------------------------------------ seller brief */
.brief-card { margin-bottom: 1.4rem; background: linear-gradient(160deg, var(--gold-soft), var(--bg-raised) 65%); }
.brief-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.brief-head h2 { margin: 0; font-size: 1.05rem; }
.brief-headline { font-size: 1.05rem; font-weight: 500; margin: .4rem 0 .8rem; }
.brief-metrics { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.brief-metric { display: flex; flex-direction: column; padding: .45rem .7rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 88px; }
.brief-metric b { font-family: var(--font-head); font-size: 1rem; }
.brief-metric span { font-size: .7rem; color: var(--ink-soft); }
.brief-metric .up { color: var(--green); }
.brief-metric .down { color: var(--danger); }
.brief-actions { display: flex; flex-direction: column; gap: .4rem; }
.brief-action {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  border: 1px solid var(--line);
}
.brief-action.p0 { border-color: var(--terracotta); }
.brief-action .ico { font-size: 1.3rem; width: 32px; text-align: center; flex: none; }
.brief-action div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.brief-action strong { font-size: .92rem; }
.brief-action span { font-size: .78rem; color: var(--ink-soft); }
.brief-top { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .8rem; font-size: .78rem; }
.brief-top span { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .6rem; }
.brief-source { display: block; font-size: .68rem; color: var(--ink-faint); margin-top: .6rem; }

/* Reduced motion: keep the shell calm. */
@media (prefers-reduced-motion: reduce) {
  .install-banner, .assist-thread, .room-thread { animation: none; scroll-behavior: auto; }
  .assist-bubble.typing span { animation: none; opacity: .6; }
}