/* Dream Hibachi — Chat Booking Assistant widget (isolated build).
   Black-gold theme. All classes are prefixed dh-chat- to avoid collisions
   with the site stylesheet (main20.css).
   Placement rules (do not loosen without re-checking the sticky bar):
   - The site mobile sticky bar (.sticky-cta) is position:fixed; bottom:0;
     z-index:70 and is ~69px tall + safe-area, visible below 900px.
   - This widget's button sits ABOVE that bar on mobile and its panel
     opens above the button, so neither ever covers the sticky bar.
   - Desktop: button bottom-right, panel above it. z-index 80/81. */
.dh-chat-btn{
  position:fixed; right:20px; bottom:24px; z-index:80;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(180deg,#33291a 0%,#171209 100%);
  border:2px solid #d4af6a; box-shadow:0 8px 24px rgba(0,0,0,.45);
  color:#f0e6cc; cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:0; line-height:1;
}
.dh-chat-btn:hover{ box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 0 4px rgba(212,175,106,.25); }
.dh-chat-btn:focus-visible{ outline:3px solid #e8c478; outline-offset:3px; }
.dh-chat-btn img{ width:34px; height:34px; border-radius:50%; display:block; }
.dh-chat-btn-fallback{ font-size:26px; line-height:1; }
.dh-chat-panel{
  position:fixed; right:20px; bottom:96px; z-index:81;
  width:380px; max-width:calc(100vw - 24px);
  height:min(580px, calc(100dvh - 120px));
  background:#141416; color:#f0e6cc; border:1px solid rgba(212,175,106,.45);
  border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.55);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.dh-chat-panel[hidden]{ display:none !important; }
.dh-chat-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:linear-gradient(180deg,#33291a 0%,#211b12 100%);
  border-bottom:1px solid rgba(212,175,106,.35); flex:0 0 auto;
}
.dh-chat-head img{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; }
.dh-chat-head b{ font-size:15px; letter-spacing:.4px; display:block; }
.dh-chat-head small{ font-size:11px; color:#c9b98f; display:block; margin-top:1px; }
.dh-chat-head-actions{ margin-left:auto; display:flex; gap:6px; }
.dh-chat-head-actions button{
  width:32px; height:32px; border-radius:8px; border:1px solid rgba(212,175,106,.4);
  background:transparent; color:#f0e6cc; font-size:16px; cursor:pointer; line-height:1;
}
.dh-chat-head-actions button:focus-visible{ outline:2px solid #e8c478; outline-offset:2px; }
.dh-chat-body{
  flex:1 1 auto; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px;
}
.dh-chat-msg{ max-width:88%; padding:10px 12px; border-radius:14px; font-size:14px; line-height:1.5; }
.dh-chat-msg p{ margin:0 0 6px; }
.dh-chat-msg p:last-child{ margin-bottom:0; }
.dh-chat-bot{ align-self:flex-start; background:#23201a; border:1px solid rgba(212,175,106,.25); }
.dh-chat-user{ align-self:flex-end; background:#2e2a1e; border:1px solid rgba(212,175,106,.55); }
.dh-chat-msg a{ color:#e8c478; }
.dh-chat-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.dh-chat-chip{
  border:1px solid #d4af6a; background:transparent; color:#f0e6cc;
  border-radius:999px; padding:7px 13px; font-size:13px; cursor:pointer; line-height:1.3;
}
.dh-chat-chip:hover{ background:rgba(212,175,106,.18); }
.dh-chat-chip:focus-visible{ outline:2px solid #e8c478; outline-offset:2px; }
.dh-chat-chip.on{ background:#d4af6a; color:#171209; font-weight:700; }
.dh-chat-quote{
  background:#1d1a12; border:1px solid rgba(212,175,106,.5); border-radius:14px;
  padding:12px 14px; font-size:14px; line-height:1.6;
}
.dh-chat-quote .q-title{ font-weight:700; color:#e8c478; margin-bottom:6px; }
.dh-chat-quote .q-row{ display:flex; justify-content:space-between; gap:12px; }
.dh-chat-quote .q-total{ border-top:1px solid rgba(212,175,106,.35); margin-top:8px; padding-top:8px; font-weight:700; }
.dh-chat-quote .q-note{ font-size:12px; color:#c9b98f; margin-top:6px; }
.dh-chat-form-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.dh-chat-form-row input[type="date"],
.dh-chat-form-row input[type="number"],
.dh-chat-form-row input[type="text"]{
  background:#0e0e10; color:#f0e6cc; border:1px solid rgba(212,175,106,.4);
  border-radius:10px; padding:9px 10px; font-size:14px; min-width:0;
}
.dh-chat-form-row input[type="number"]{ width:84px; }
.dh-chat-step-btn{
  width:34px; height:34px; border-radius:10px; border:1px solid rgba(212,175,106,.5);
  background:transparent; color:#f0e6cc; font-size:18px; cursor:pointer; line-height:1;
}
.dh-chat-foot{
  flex:0 0 auto; border-top:1px solid rgba(212,175,106,.3); padding:10px 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:#171209;
}
.dh-chat-input-row{ display:flex; gap:8px; }
.dh-chat-input-row input{
  flex:1 1 auto; min-width:0; background:#0e0e10; color:#f0e6cc;
  border:1px solid rgba(212,175,106,.4); border-radius:999px; padding:11px 14px; font-size:14px;
}
.dh-chat-input-row input:focus-visible{ outline:2px solid #e8c478; outline-offset:2px; }
.dh-chat-send{
  flex:0 0 auto; border:0; border-radius:999px; padding:0 18px; cursor:pointer;
  background:#d4af6a; color:#171209; font-weight:700; font-size:14px;
}
.dh-chat-send:focus-visible{ outline:2px solid #e8c478; outline-offset:2px; }
.dh-chat-fineprint{ font-size:11px; color:#8f8471; margin-top:8px; line-height:1.4; }
.dh-chat-error{ color:#ffb4a2; font-size:13px; }
@media (max-width:899px){
  /* Above the mobile sticky bar (~69px + safe-area): button clears it with room. */
  .dh-chat-btn{ right:14px; bottom:calc(88px + env(safe-area-inset-bottom)); }
  /* Panel opens above the button and never reaches the sticky bar. */
  .dh-chat-panel{
    left:12px; right:12px; width:auto; max-width:none;
    bottom:calc(160px + env(safe-area-inset-bottom));
    height:auto; max-height:calc(100dvh - 180px - env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce){
  .dh-chat-btn, .dh-chat-panel{ transition:none !important; }
}