/* Chat-first customer demo and the small admin area. Reuses the tokens and base
   rules from style.css; this file adds only the chat layout. */

.chat-shell { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; }

.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.chat-head h1 { font-size: 1.5rem; margin: 0 0 6px; }
.chat-head-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-link { font-size: .86rem; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

/* On a narrow screen the header side items wrap onto their own lines and used to
   sit cramped against whatever followed. Give the wrapped rows real separation
   and let the language control keep its intrinsic width instead of being
   squeezed or truncated. */
@media (max-width: 560px) {
  .chat-head { gap: 12px; }
  .chat-head-side { gap: 10px 14px; row-gap: 10px; }
  #language-switch { flex: 0 0 auto; }
  #language-switch button { padding: 6px 12px; white-space: nowrap; }
  .chat-head-side .admin-link { line-height: 1.35; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.composer-panel { margin: 24px 0 20px; }
.composer-panel textarea { width: 100%; font-size: 1rem; padding: 12px; line-height: 1.5; }
.composer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.parser-note { font-size: .8rem; margin-top: 10px; }

.intent-panel { border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 0 0 24px; background: #fbfaf7; }
.intent-panel h2 { font-size: 1.05rem; margin: 0 0 10px; }
.intent-panel h3 { font-size: .9rem; margin: 14px 0 6px; }
.intent-list { margin: 0; padding-left: 20px; font-size: .9rem; }
.intent-list.unclear { color: #8a5a00; }

.context-note {
  font-size: .86rem; background: #eef4f3; border-left: 3px solid var(--teal);
  padding: 8px 10px; margin: 0 0 14px;
}

.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panel { border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; min-height: 260px; }
.panel-head { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.panel-head h3 { margin: 0 0 4px; font-size: 1rem; }
.panel-log { padding: 12px 14px; overflow-y: auto; max-height: 60vh; flex: 1; }
.panel-log .turn { margin: 0 0 10px; }
.panel-log .turn.user p { background: #eef4f3; border-radius: 8px; padding: 8px 10px; margin: 0; }
.panel-log .turn.error p { background: #fdf0ee; color: #8a2a1a; border-radius: 8px; padding: 8px 10px; margin: 0; }
.panel-log .result { border-top: 1px dashed var(--line); padding-top: 10px; margin-bottom: 14px; }
.panel-log .result .items, .panel-log .result .checks { margin: 6px 0; padding-left: 18px; font-size: .9rem; }

.admin-block { border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 18px 0; }
.admin-block h2 { font-size: 1.05rem; margin: 0 0 8px; }
.admin-route { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.admin-route h3 { margin: 0 0 6px; font-size: .95rem; }
.admin-field { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.admin-field p { margin: 4px 0; }
.provenance-note { margin: 6px 0 0; font-size: .82rem; }

/* ---- Demo order draft (customer) and receiving (staff) ---- */
.order-panel { border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 18px 0; }
.order-panel h2 { font-size: 1.05rem; margin: 0 0 6px; }
.order-lines { list-style: none; padding: 0; margin: 10px 0; }
.order-lines li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--line); padding: 7px 0; flex-wrap: wrap;
}
.order-controls { display: flex; align-items: center; gap: 6px; }
.order-controls .qty { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
.order-total { font-weight: 600; margin: 8px 0; }
.order-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.order-payment { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.order-payment legend { font-size: .88rem; padding: 0 4px; }
.receipt {
  background: #eef4f3; border-left: 3px solid var(--teal); padding: 10px 12px;
  margin: 10px 0 4px; font-size: .9rem;
}
/* A pane whose provider is not usable is visibly marked rather than hidden, so
   the reader can see WHICH configuration is missing. */
.panel-unavailable { opacity: .75; }
.panel-unavailable .panel-log { background: repeating-linear-gradient(45deg, #fafafa, #fafafa 8px, #f4f4f4 8px, #f4f4f4 16px); }

.add-item { margin-left: 8px; }
.order-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin: 12px 0; }
.order-card-head h3 { margin: 0 0 4px; font-size: .98rem; }
.order-card-head p { margin: 2px 0; }
/* Keep the order id/status lines readable and separate the action buttons. */
.order-card-head .status-label { margin: 6px 0; }
.order-card .order-actions { margin-top: 12px; }
.order-card .order-total { margin-top: 10px; }
.warning-inline { color: #8a5a00; font-size: .85rem; }

@media (max-width: 760px) {
  .panel-grid { grid-template-columns: 1fr; }
  .panel-log { max-height: none; }
}