/* Bampfylde Order Desk — the widgets.
 * Tokens, the app shell and the three layouts live in crm.css.
 */

/* ===================================================================== */
/* A · Order intake — the chat                                            */
/* ===================================================================== */

/* The landing screen on a phone. An empty chat pane is a blank white void
   and tells a first-time user nothing, so the presets live here too — not
   only in the Order pane, which you reach by swiping and would not know to
   look for. Removed the moment the first message arrives. */
.chat-intro {
  padding: 18px 16px 4px;
}

.chat-intro[hidden] {
  display: none;
}

.chat-intro__lead {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.chat-intro__presets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-intro__presets .btn {
  width: 100%;
  text-align: left;
}

.chat-intro__hint {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}

.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.bubble {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.45;
  position: relative;
  animation: rise 200ms ease both;
}

.bubble--in {
  align-self: flex-start;
  background: var(--mist);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}

.bubble--out {
  align-self: flex-end;
  background: var(--signal);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}

.bubble__meta {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.65;
  text-align: right;
}

.typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
  background: var(--mist);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}

.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: blink 1.2s infinite;
}

.typing i:nth-child(2) {
  animation-delay: 0.18s;
}
.typing i:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes blink {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }
  30% {
    opacity: 1;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.composer {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

.composer__row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.composer textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 10px 14px;
  max-height: 110px;
  min-height: 42px;
  line-height: 1.4;
}

/* Scoped to the row, NOT `.composer button`: the stock-peek strip is also a
   <button> inside .composer, and `.composer button` outranked `.peek-strip`
   on specificity — which forced the strip into a 42px circle with its label
   spilling out of it. */
.composer__row button {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: var(--signal);
  color: var(--paper);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.composer__row button:disabled {
  background: var(--line-strong);
  cursor: not-allowed;
}

/* The stock peek. On a phone the stocklist is a different pane, but you need
   it to know what to ask for — so it comes to the chat rather than making you
   leave. Deliberately not a typeahead that inserts SKUs: the thing on show is
   that the AI parses unstructured text, and a picker would quietly
   demonstrate something else entirely. */
.peek-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
  padding: 7px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  font-size: 12.5px;
  cursor: pointer;
  min-height: 38px;
}

@media (min-width: 1024px) and (min-height: 600px) {
  .peek-strip {
    display: none;
  }
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  align-items: end;
  background: rgb(10 14 22 / 0.45);
}

.sheet[hidden] {
  display: none;
}

.sheet__panel {
  background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  max-height: 76dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  animation: slide-up 220ms ease both;
}

@keyframes slide-up {
  from {
    transform: translateY(14%);
    opacity: 0.6;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ===================================================================== */
/* B · Order analysis                                                     */
/* ===================================================================== */

.panel {
  padding: 14px;
}

.panel__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}

.empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 14px;
}

.skeleton {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-sunk), var(--mist), var(--surface-sunk));
  background-size: 200% 100%;
  animation: shimmer 1.1s linear infinite;
  margin-bottom: 10px;
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Each line is a card at every width. A six-column table inside a horizontal
   scroller means the prospect fights the UI on a phone, and the card reads
   just as well on a laptop. */
.line {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--surface);
  animation: rise 220ms ease both;
}

.line--in_stock {
  border-left-color: var(--ok);
}
.line--partial {
  border-left-color: var(--warn);
}
.line--out_of_stock {
  border-left-color: var(--bad);
}
.line--not_available {
  border-left-color: var(--none);
  background: var(--surface-sunk);
}

.line__top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.line__name {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.line__code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}

.line__said {
  font-size: 12.5px;
  color: var(--ink-faint);
  font-style: italic;
  margin-top: 2px;
}

.line__numbers {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.line__numbers span {
  color: var(--ink-soft);
}
.line__numbers b {
  color: var(--ink);
  font-weight: 600;
}

.line__note {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
  padding: 6px 9px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pill--in_stock {
  background: var(--ok-bg);
  color: var(--ok);
}
.pill--partial {
  background: var(--warn-bg);
  color: var(--warn);
}
.pill--out_of_stock {
  background: var(--bad-bg);
  color: var(--bad);
}
.pill--not_available {
  background: var(--none-bg);
  color: var(--none);
}

.chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--warn-bg);
  color: var(--warn);
}

.chip--low {
  background: var(--bad-bg);
  color: var(--bad);
}

.lead {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.subs {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ok);
  background: var(--ok-bg);
  border-radius: var(--r-sm);
  padding: 6px 9px;
}

.total {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--carbon);
  color: var(--paper);
  border-radius: var(--r-md);
}

.total__value {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.total__note {
  font-size: 11.5px;
  color: var(--ink-on-chrome-soft);
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.btn {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
}

.btn--primary {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--paper);
}

.btn--primary:hover {
  background: var(--navy);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===================================================================== */
/* C · Stocklist                                                          */
/* ===================================================================== */

.stock-tools {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}

.stock-tools input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  min-height: 40px;
}

.filters {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.filters::-webkit-scrollbar {
  display: none;
}

.filters button {
  flex: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 34px;
}

.filters button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

.stock-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  padding: 8px 14px 0;
}

.stock-group {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 12px 14px 5px;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

.stock-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--surface-sunk);
  transition: background 240ms ease;
}

.stock-row[data-hit="true"] {
  background: #fff8dc;
  box-shadow: inset 3px 0 0 var(--sky);
}

.stock-row__name {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.stock-row__price {
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stock-row__sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
}

.stock-row__qty {
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.dot--ok {
  background: var(--ok);
}
.dot--low {
  background: var(--warn);
}
.dot--out {
  background: var(--bad);
}

/* ===================================================================== */
/* D · Customer intelligence                                              */
/* ===================================================================== */

.intel {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.intel__card {
  background: var(--surface-sunk);
  border-radius: var(--r-md);
  padding: 11px 13px;
  font-size: 13.5px;
  animation: rise 200ms ease both;
}

.flag {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  line-height: 1.45;
  animation: rise 220ms ease both;
}

.flag--alert {
  background: var(--bad-bg);
  color: #7d1a15;
}
.flag--warn {
  background: var(--warn-bg);
  color: #6b4700;
}
.flag--info {
  background: var(--none-bg);
  color: var(--ink-soft);
}
.flag--good {
  background: var(--ok-bg);
  color: #0d5c36;
}

.flag__icon {
  font-size: 15px;
  line-height: 1.3;
  flex: none;
}

.bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  align-items: end;
  height: 62px;
  margin-top: 4px;
}

.bars div {
  background: var(--sky);
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  position: relative;
}

.bars div:last-child {
  background: var(--signal);
}

.bars span {
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-faint);
}

.bars-wrap {
  padding-bottom: 18px;
}

.narrative {
  background: var(--carbon);
  color: #e9eef7;
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  min-height: 22px;
}

.narrative .cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--sky);
  vertical-align: text-bottom;
  animation: blink 1s steps(2) infinite;
}

.illustrative {
  padding: 10px 14px 16px;
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
}

/* Every animation here exists to make an asynchronous process legible, not to
   decorate. When the viewer has asked for less motion none of it is load
   bearing, so all of it goes. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* Phone: every control a thumb has to hit is at least 44px tall. Several sat
   at 34-42px, which is fine with a mouse and fiddly in someone's hand while
   they are being shown something. */
@media (max-width: 639px) {
  .peek-strip {
    min-height: 44px;
  }

  .composer__row button {
    width: 46px;
    height: 46px;
  }

  .composer textarea {
    min-height: 46px;
  }

  .filters button {
    min-height: 44px;
  }

  .stock-tools input {
    min-height: 44px;
  }
}