/* The Shabby Attic chat widget: heritage green panel with gold and cream, matching the shop sign. */
#attie-chat { font-family: "Merriweather", Georgia, "Times New Roman", serif; }
.attie-bubble {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 3.5rem; padding: .5rem 1.15rem .5rem 1rem;
  border: 2px solid #0B160F; border-radius: 999px; cursor: pointer;
  background: #D9B562; color: #0B160F;
  font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.attie-bubble svg { width: 1.5rem; height: 1.5rem; fill: #0B160F; flex: none; }
.attie-bubble:hover, .attie-bubble:focus-visible { background: #F0D99A; }
.attie-bubble:focus-visible { outline: 3px solid #0B160F; outline-offset: 3px; }
.attie-panel {
  position: fixed; right: 1rem; bottom: 5.5rem; z-index: 61;
  width: 22rem; max-width: calc(100vw - 2rem); height: 30rem; max-height: calc(100vh - 7.5rem);
  display: none; flex-direction: column; overflow: hidden;
  background: #F3EAD3; color: #0B160F; border: 2px solid #D9B562; border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.attie-panel.attie-open { display: flex; }
.attie-header {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .75rem 1rem; background: #173A2A; color: #D9B562;
  font-family: "Cinzel", Georgia, serif; font-weight: 700; letter-spacing: .05em;
}
.attie-close { background: none; border: 0; color: #F0D99A; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
.attie-close:focus-visible, .attie-send:focus-visible, .attie-input:focus-visible { outline: 3px solid #A87E32; outline-offset: 2px; }
.attie-messages { flex: 1; overflow-y: auto; padding: .85rem; display: flex; flex-direction: column; gap: .55rem; }
.attie-msg { max-width: 88%; padding: .55rem .8rem; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 4px; }
.attie-assistant { align-self: flex-start; background: #fff; border: 1px solid #D8CDB0; }
.attie-user { align-self: flex-end; background: #173A2A; color: #F3EAD3; }
.attie-error { align-self: center; background: #f6dcd8; color: #8E2219; font-size: .8rem; }
.attie-typing { align-self: flex-start; font-size: .8rem; color: #5b4a22; padding: 0 .25rem; }
.attie-note { margin: 0; padding: .35rem .85rem; font-size: .7rem; line-height: 1.35; color: #4a3d1c; border-top: 1px solid #D8CDB0; }
.attie-note a { color: #7A5A1F; }
.attie-inputbar { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid #D8CDB0; background: #EADDBA; margin: 0; }
.attie-input { flex: 1; min-width: 0; resize: none; padding: .5rem .6rem; font: inherit; font-size: .9rem; border: 1px solid #A87E32; border-radius: 2px; background: #fff; color: #0B160F; }
.attie-send {
  padding: 0 1rem; border: 2px solid #0B160F; border-radius: 2px; cursor: pointer;
  background: #D9B562; color: #0B160F; font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase;
}
.attie-send:hover { background: #F0D99A; }
.attie-send:disabled { opacity: .55; cursor: default; }
@media (max-width: 40rem) {
  .attie-bubble { width: 3.5rem; padding: 0; justify-content: center; right: .75rem; bottom: .75rem; }
  .attie-bubble__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .attie-panel { right: .5rem; left: .5rem; width: auto; max-width: none; bottom: 5rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .attie-panel.attie-open { animation: attie-in .18s ease-out; }
  @keyframes attie-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
}