/* v453 — customer reviews, focused messenger and stock requests.
   Loaded only on public/customer/shopkeeper surfaces; administrator typography
   remains outside the user's compact/mobile scope. */

/* Mobile reading scale: explicit hierarchy, 16px editable fields (no iOS zoom),
   12px floor for metadata and unchanged touch targets. */
@media (max-width: 600px) {
  body.type-compact-nonadmin { font-size: 14px; line-height: 1.78; }
  body.type-compact-nonadmin :is(input, select, textarea) { font-size: max(16px, var(--fs-base)); }
  body.type-compact-nonadmin :is(.btn, .chip, .badge, .field-hint, .card-meta) { line-height: 1.45; }
  body.type-compact-nonadmin .text-xs { font-size: 12px; }
}

/* Reviews: the content stays discoverable, while the section hierarchy no
   longer consumes more visual space than the reviews themselves. */
.reviews-section .review-section-title { font-size: clamp(1rem, 1.2vw, 1.16rem); margin-bottom: 14px; }
.reviews-section .review-write-title { font-size: clamp(.92rem, 1.1vw, 1.03rem); margin: 16px 0 12px; }
.review-image-field { margin-top: 3px; }
.review-image-field .field-label small { color: var(--color-muted-foreground); font-weight: 500; }
.review-image-trigger {
  min-height: 48px; display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; border: 1px dashed color-mix(in oklab, var(--color-primary) 52%, var(--color-border));
  border-radius: 15px; color: var(--color-foreground); cursor: pointer;
  background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 11%, transparent), color-mix(in oklab, var(--gold-400, var(--color-primary)) 6%, transparent));
  transition: border-color var(--dur-2), transform var(--dur-2), background var(--dur-2);
}
.review-image-trigger:hover, .review-image-trigger:focus-within { border-color: var(--color-primary); transform: translateY(-1px); }
.review-image-trigger svg { width: 21px; height: 21px; color: var(--color-primary); filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--color-primary) 32%, transparent)); }
.review-image-trigger > span { font-weight: 780; font-size: var(--fs-sm); }
.review-image-trigger > small { margin-inline-start: auto; color: var(--color-muted-foreground); font-size: var(--fs-xs); }
.review-image-preview { display: grid; grid-template-columns: 52px minmax(0,1fr) 38px; align-items: center; gap: 9px; margin-top: 8px; padding: 7px; border: 1px solid var(--glass-hairline); border-radius: 14px; background: color-mix(in oklab, var(--color-muted) 68%, transparent); }
.review-image-preview[hidden] { display: none; }
.review-image-preview img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; }
.review-image-preview > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); }
.review-image-preview button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 11px; cursor: pointer; color: var(--color-danger-text); background: color-mix(in oklab, var(--color-danger) 11%, transparent); }
.review-image-preview button svg { width: 18px; height: 18px; }

/* Catalog stock request: one optional note plus an obvious, short action. */
.stock-card-form { display: flex; align-items: center; gap: 6px; width: 100%; }
.stock-card-form .input { min-width: 0; height: 38px; padding-inline: 10px; font-size: var(--fs-xs); }
.stock-card-form .btn { flex: none; min-height: 38px; }
.stock-card-confirm { display: inline-flex; align-items: center; gap: 5px; color: var(--color-success); font-size: var(--fs-xs); font-weight: 750; }
.stock-card-confirm svg { width: 16px; height: 16px; }
.stock-notify { align-items: center; gap: 8px; flex-wrap: wrap; }
.stock-notify .input { flex: 1 1 160px; min-height: 42px; }

/* Merchant dashboard: do not bury replenishment requests among generic tasks. */
.owner-stock-pulse { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 12px; border-color: color-mix(in oklab, var(--color-primary) 34%, var(--glass-border)); }
.owner-stock-pulse.is-waiting { background: linear-gradient(125deg, color-mix(in oklab, var(--color-primary) 15%, var(--glass-bg)), var(--glass-bg)); box-shadow: 0 12px 34px color-mix(in oklab, var(--color-primary) 15%, transparent); }
.owner-stock-pulse-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: var(--color-on-primary); background: linear-gradient(145deg, var(--color-primary-hover), var(--color-primary)); }
.owner-stock-pulse-icon svg { width: 24px; height: 24px; }
.owner-stock-pulse-copy { min-width: 0; display: grid; gap: 2px; }
.owner-stock-pulse-copy > span { font-size: var(--fs-xs); color: var(--color-muted-foreground); }
.owner-stock-pulse-copy strong { font-size: var(--fs-lg); }
.owner-stock-pulse-copy small { color: var(--color-muted-foreground); font-size: var(--fs-xs); }
.owner-stock-pulse-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.stock-page-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }

/* Focused chat: the global header/footer are omitted by the view. The local
   peer bar remains for identity, back navigation and profile selection. */
body.page-chat-focus { background: var(--color-background); }
.page-chat-focus .main-content { min-height: 100dvh; padding: 0; }
.chat-focus-page { width: min(920px, 100%); min-height: 100dvh; margin: 0 auto; }
.page-chat-focus .messenger { width: 100%; min-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; border-inline: 1px solid var(--glass-hairline); box-shadow: none; }
.page-chat-focus .messenger-head { position: relative; min-height: 64px; padding: 8px 12px; background: color-mix(in oklab, var(--color-card) 92%, transparent); }
.page-chat-focus .chat-box { background: color-mix(in oklab, var(--color-background) 90%, var(--color-card)); }
.page-chat-focus .chat-box::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: url('/assets/img/logo-mark.svg') center / min(40vw, 210px) no-repeat; opacity: .055; filter: grayscale(1); }
.page-chat-focus .chat-box > * { position: relative; z-index: 1; }
.messenger-avatar, .thread-avatar, .messenger-self-avatar, .msg-avatar { overflow: hidden; display: grid; place-items: center; flex: none; color: var(--color-on-primary); font-weight: 800; background: linear-gradient(145deg, var(--color-primary-hover), var(--color-primary)); }
.messenger-avatar img, .thread-avatar img, .messenger-self-avatar img, .msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.messenger-avatar { width: 42px; height: 42px; border-radius: 15px; }
.thread-avatar { width: 48px; height: 48px; border-radius: 16px; }
.msg { display: flex; flex-direction: row; align-items: flex-end; gap: 7px; max-width: min(84%, 590px); }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.them, .msg.admin { align-self: flex-start; }
.msg-stack { min-width: 0; display: flex; flex-direction: column; }
.msg.me .msg-stack { align-items: flex-end; }
.msg-avatar { width: 28px; height: 28px; border-radius: 10px; font-size: 11px; margin-bottom: 2px; background: color-mix(in oklab, var(--color-muted-foreground) 70%, var(--color-card)); color: var(--color-card); }
.msg.me .msg-avatar { background: linear-gradient(145deg, var(--color-primary-hover), var(--color-primary)); }
.msg-label { padding-inline: 5px; }
.chat-avatar-form { display: flex; align-items: center; gap: 3px; margin-inline-start: 2px; }
.chat-avatar-form label { display: block; cursor: pointer; }
.messenger-self-avatar { position: relative; width: 36px; height: 36px; border-radius: 13px; border: 2px solid color-mix(in oklab, var(--color-primary) 48%, var(--color-card)); }
.avatar-edit { position: absolute; inset-inline-end: -4px; bottom: -4px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: var(--color-on-primary); background: var(--color-primary); border: 2px solid var(--color-card); }
.avatar-edit svg { width: 10px; height: 10px; }
.chat-avatar-save { min-height: 30px; padding: 3px 6px; border: 0; border-radius: 8px; font: inherit; font-size: 10px; color: var(--color-muted-foreground); background: transparent; cursor: pointer; }
.chat-avatar-save:hover, .chat-avatar-save:focus-visible { color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 10%, transparent); }
.chat-stock-disclosure { margin-inline: 12px; }
.chat-stock-disclosure summary { display: flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 760; font-size: var(--fs-sm); }
.chat-stock-disclosure summary::marker { display: none; }

@media (max-width: 600px) {
  .owner-stock-pulse { grid-template-columns: 43px minmax(0,1fr); gap: 10px; }
  .owner-stock-pulse-icon { width: 43px; height: 43px; border-radius: 14px; }
  .owner-stock-pulse-actions { grid-column: 1 / -1; justify-content: stretch; }
  .owner-stock-pulse-actions .btn { flex: 1; }
  .stock-page-hero { align-items: stretch; flex-direction: column; }
  .stock-page-hero > .btn { align-self: flex-start; }
  .page-chat-focus .messenger { border: 0; }
  .page-chat-focus .messenger-head { min-height: 60px; padding-inline: 8px; gap: 6px; }
  .messenger-person small { display: none; }
  .messenger-state { display: none; }
  .msg { max-width: 92%; }
  .msg-avatar { width: 25px; height: 25px; border-radius: 9px; }
  .chat-avatar-save { display: none; }
  .chat-stock-disclosure { margin-inline: 7px; }
}