/* The corner pet's chat panel (assets/support.js). Kept out of style.css so
   the chat can change without touching the page's main sheet. */

.pet[data-pet] { display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto auto; gap:8px 12px; justify-items:end; }
.pet[data-pet] img { grid-column:2; grid-row:2; }
.pet[data-pet] .pet-mute { position:static; grid-column:2; grid-row:1; }
.pet[data-pet] .pet-say { grid-column:1; grid-row:2; margin:0; align-self:center; }
.pet-ask { pointer-events:auto; grid-column:2; grid-row:3; padding:5px 10px; border-radius:999px; border:1px solid var(--accent); background:var(--bg-2); color:var(--text); font:600 11px var(--mono); cursor:pointer; }
.pet-ask:hover, .pet-ask[aria-expanded="true"] { background:var(--accent); color:var(--accent-ink); }
.pet img[role="button"] { cursor:pointer; }
.pet.chatting .pet-say { display:none; }

.chat { position:fixed; right:18px; bottom:166px; z-index:30; width:min(380px, calc(100vw - 32px)); max-height:min(560px, calc(100dvh - 182px)); display:flex; flex-direction:column; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 40px #000a; overflow:hidden; }
.chat[hidden] { display:none; }
.chat-head { display:grid; grid-template-columns:1fr auto; align-items:center; gap:0 8px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--bg-2); }
.chat-head strong { font-size:15px; }
.chat-sub { grid-column:1; font-size:12px; color:var(--muted); }
.chat-close { grid-column:2; grid-row:1 / span 2; width:32px; height:32px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; }
.chat-close:hover { color:var(--text); background:var(--line); }

.chat-log { flex:1; min-height:0; margin:0; padding:12px 14px; list-style:none; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.chat-msg { max-width:88%; }
.chat-msg p { margin:0; padding:8px 11px; border-radius:12px; background:var(--bg-2); border:1px solid var(--line); font-size:14px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-who { display:block; margin:0 0 3px 4px; font:600 11px var(--mono); color:var(--muted); }
.chat-msg.from-visitor { align-self:flex-end; }
.chat-msg.from-visitor .chat-who { text-align:right; margin-right:4px; }
.chat-msg.from-visitor p { background:var(--accent); color:var(--accent-ink); border-color:transparent; border-radius:12px 12px 2px 12px; }
.chat-msg.from-staff p { border-color:var(--accent-2); }
.chat-msg.error p { border-color:var(--error); }
.chat-msg.typing p { color:var(--muted); }

.chat-chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px; }
.chat-chips:empty { display:none; }
.chat-chips .chip { padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--text); font-size:12.5px; cursor:pointer; }
.chat-chips .chip:hover { border-color:var(--accent); }

.chat-ticket, .chat-form { display:flex; gap:8px; padding:10px 14px 0; }
.chat-ticket[hidden] { display:none; }
.chat-ticket input, .chat-form input { flex:1; min-width:0; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:14px; }
.chat-ticket .button, .chat-form .button { padding:8px 12px; font-size:13px; white-space:nowrap; }
.chat-note { margin:8px 14px 10px; font-size:11px; color:var(--muted); }

@media (max-width:600px) {
  .chat { right:16px; left:16px; width:auto; bottom:150px; max-height:calc(100dvh - 166px); }
}