:root {
  --bg: #111;
  --panel: #1a1a1a;
  --border: #2c2c2c;
  --text: #eee;
  --muted: #999;
  --accent: #D4AF37;
  --user-bubble: #2a2a2a;
  --assistant-bubble: #1f1a12;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  overscroll-behavior: none;
}

#app {
  display: flex;
  flex-direction: column;
  /* 100vh is computed by mobile browsers as if their address bar were
     hidden, which pushes the composer below the visible fold until the
     chrome collapses. 100dvh (dynamic viewport height) tracks the real
     visible area; the 100vh line is a fallback for browsers that don't
     support dvh yet. */
  height: 100vh;
  height: 100dvh;
  max-width: 800px;
  margin: 0 auto;
}

header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

header h1 {
  font-size: 16px;
  margin: 0;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.brand-serif {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.brand-gold {
  color: var(--accent);
  font-weight: 500;
}

.badge {
  display: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #111;
  background: #d9a441;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
}
body.demo-mode .badge { display: inline-block; }

.hidden { display: none !important; }

.demo-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.demo-switch input { accent-color: var(--accent); cursor: pointer; }

header button {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
header button:hover { color: var(--text); border-color: var(--accent); }

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

#authArea {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.auth-link {
  color: var(--accent);
  text-decoration: none;
  border: none;
  border-radius: 6px;
  padding: 6px 4px;
  background: none;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.auth-link:hover { opacity: 0.75; }
.auth-status { color: var(--muted); white-space: nowrap; }

.action-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  font-size: 12px;
}

.order-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.order-btn {
  background: var(--accent);
  border: none;
  color: #111;
  font-weight: 600;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
}
.order-btn:hover:not(:disabled) { opacity: 0.9; }
.order-btn:disabled { opacity: 0.5; cursor: default; }
.order-status { font-size: 11px; color: var(--muted); }
.order-select {
  background: #0d0d0d;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
  max-width: 220px;
}
.order-select:focus { outline: none; border-color: var(--accent); }

.feedback-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid #3a2f1c;
}
.feedback-label { color: var(--muted); white-space: nowrap; }
.feedback-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 13px;
}
.feedback-btn:hover:not(:disabled) { border-color: var(--accent); }
.feedback-btn:disabled { opacity: 0.5; cursor: default; }
.feedback-status { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.msg { display: flex; }
.msg.user { justify-content: flex-end; }
.msg.assistant { justify-content: flex-start; }

.bubble {
  max-width: min(85%, 640px);
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.5;
  font-size: 14.5px;
}

.msg.user .bubble {
  background: var(--user-bubble);
  border-bottom-right-radius: 3px;
}

.msg.assistant .bubble {
  background: var(--assistant-bubble);
  border: 1px solid #3a2f1c;
  border-bottom-left-radius: 3px;
}

.msg.welcome .bubble {
  background: none;
  border: none;
  border-radius: 0;
  padding: 8px 0 4px;
  max-width: 100%;
  font-size: 15px;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0 24px;
}

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }

.bubble p { margin: 6px 0; }
.bubble h1, .bubble h2, .bubble h3, .bubble h4 {
  margin: 10px 0 6px;
  color: var(--accent);
}
.bubble ul { margin: 6px 0; padding-left: 20px; }
.bubble strong { color: #f2d9ad; }
.bubble pre {
  background: #0d0d0d;
  padding: 8px 10px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 13px;
}

.dots { display: inline-flex; gap: 4px; align-items: center; height: 14px; }
.dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  animation: blink 1.2s infinite ease-in-out;
}
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

#composer {
  display: flex;
  padding: 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

#input {
  flex: 1;
  resize: none;
  height: 46px;
  background: #0d0d0d;
  border: 1px solid var(--border);
  border-radius: 23px;
  color: var(--text);
  padding: 12px 76px 12px 18px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
}

#sendBtn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--accent);
  border: none;
  color: #111;
  font-weight: 600;
  border-radius: 18px;
  padding: 9px 18px;
  cursor: pointer;
  font-size: 13px;
}
#sendBtn:disabled { opacity: 0.5; cursor: default; }

/* My Orders panel: dropdown anchored under the header on narrow screens,
   full-height sliding sidebar on wider ones (see the min-width query below). */
.orders-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 55;
}

.orders-panel {
  position: absolute;
  top: 100%;
  right: 18px;
  width: min(320px, 90vw);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  z-index: 60;
}

@media (min-width: 700px) {
  .orders-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--border);
  }
}

.orders-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
}
.orders-panel-head button { padding: 2px 8px; }

.orders-panel-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

.orders-list {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.orders-empty { color: var(--muted); font-size: 13px; }

.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.order-item:last-child { border-bottom: none; }
.order-item-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
.order-item-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.order-item-status { font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.order-item-status.pending { color: #d9a441; background: #3a2f1c; }
.order-item-status.done { color: #8fbf7a; background: #1c3a20; }
.order-item-date { color: var(--muted); font-size: 11px; }