/* The support chat panel, inside the widget's shadow root. Colours, font and radius are the page's own CSS variables
   (frontend/styles.css and the brand's appearance), so every brand's theme reaches it from the same file. */
:host {
  position: fixed;
  inset: auto 16px 16px auto;
  z-index: 2147483000;
  font: 400 14px/1.45 var(--font-ui, system-ui, sans-serif);
  color: var(--text, #e9f0ec);
}
:host([hidden]) { display: none; }

.panel {
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 32px));
  background: var(--panel, #1b2a23);
  border: 1px solid var(--line, #2a3c33);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow, 0 16px 38px #030b0770);
  overflow: hidden;
}

.header { display: flex; align-items: flex-start; gap: 8px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line-soft, #26372f); }
.titles { flex: 1; min-width: 0; }
.title { margin: 0; font: 600 16px/1.3 var(--font-display, var(--font-ui, system-ui, sans-serif)); }
.status { margin: 2px 0 0; color: var(--muted-light, #b7c7bf); font-size: 13px; min-height: 1em; }
.status:empty { display: none; }

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, .input:focus-visible, .log:focus-visible { outline: 2px solid var(--focus-ring, #ffd23f); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .55; }
.close { flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--radius, 7px); background: transparent; font-size: 24px; line-height: 1; }
.close:hover { background: var(--line-soft, #26372f); }

.availability { margin: 0; padding: 10px 16px; background: var(--tabs, #16241d); color: var(--warning-text, #ffdf70); font-size: 13px; border-bottom: 1px solid var(--line-soft, #26372f); }
.availability[hidden] { display: none; }

.log { flex: 1; margin: 0; padding: 12px 16px; list-style: none; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; }
.placeholder { margin: auto 0; color: var(--muted, #8aa094); text-align: center; }
.message { max-width: 85%; display: flex; flex-direction: column; gap: 2px; }
.message.player { align-self: flex-end; align-items: flex-end; }
.message .meta { color: var(--muted, #8aa094); font-size: 12px; }
.message .body { margin: 0; padding: 8px 12px; border-radius: var(--radius-lg, 12px); background: var(--bg-deep, #0b1712); white-space: pre-wrap; overflow-wrap: anywhere; }
.message.player .body { background: var(--accent-dark, #168553); color: var(--on-bar, #fff); }
.message.system .body { background: transparent; border: 1px dashed var(--line, #2a3c33); color: var(--muted-light, #b7c7bf); }
/* Status cards (I6): the service's own state beside the message, set apart from the message's text. */
.cards { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.card { padding: 8px 12px; border: 1px solid var(--line, #2a3c33); border-inline-start: 3px solid var(--accent, #1fb26b); border-radius: var(--radius, 7px); background: var(--panel-alt, #14221b); }
.card-kind { margin: 0; color: var(--muted, #8aa094); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.card-state { margin: 2px 0 0; font-weight: 600; }
.card-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 13px; }
.card-facts dt { color: var(--muted-light, #b7c7bf); }
.card-facts dd { margin: 0; overflow-wrap: anywhere; }
.card-read { margin: 6px 0 0; color: var(--muted, #8aa094); font-size: 12px; }
/* The assistant (M2): suggested articles to open, "did you mean" and quick buttons, "did it help". */
.assist { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.articles { display: flex; flex-direction: column; gap: 6px; }
.article { border: 1px solid var(--line, #2a3c33); border-radius: var(--radius, 7px); background: var(--panel-alt, #14221b); }
.article-title { min-height: 44px; display: flex; align-items: center; padding: 0 12px; cursor: pointer; font-weight: 600; }
.article-title:focus-visible { outline: 2px solid var(--focus-ring, #ffd23f); outline-offset: 2px; }
.article-body { margin: 0; padding: 0 12px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.choices, .quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick { padding: 8px 12px 0; }
.quick[hidden] { display: none; }
.choice { min-height: 44px; padding: 0 12px; border: 1px solid var(--accent, #1fb26b); border-radius: 999px; background: transparent; color: inherit; text-align: start; }
.choice:hover { background: var(--line-soft, #26372f); }
.helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; color: var(--muted-light, #b7c7bf); font-size: 13px; }
.helpful-thanks { margin: 0; color: var(--muted, #8aa094); font-size: 12px; }
.message.sending .body { opacity: .7; }
.message.failed .body { border: 1px solid var(--danger, #e25b5b); }
.delivery { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted, #8aa094); font-size: 12px; }
.delivery-error { color: var(--negative-text, #ff9187); }

.notice { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--bg-deep, #0b1712); color: var(--negative-text, #ff9187); font-size: 13px; }
.notice[hidden] { display: none; }
.link { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--odd, #ffd23f); text-decoration: underline; }
.link[hidden] { display: none; }

.composer { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line-soft, #26372f); }
.input { width: 100%; box-sizing: border-box; min-height: 44px; max-height: 140px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line, #2a3c33); border-radius: var(--radius, 7px); background: var(--bg-deep, #0b1712); color: inherit; font: inherit; }
.actions { display: flex; align-items: center; gap: 8px; }
.counter { margin-inline-start: auto; color: var(--muted, #8aa094); font-size: 12px; }
.primary, .secondary { min-height: 44px; padding: 0 16px; border-radius: var(--radius, 7px); font-weight: 600; }
.primary { border: 1px solid var(--action-border, #ffd23f); background: var(--odd, #ffd23f); color: var(--on-action, #2b2100); }
.primary:hover:not(:disabled) { background: var(--action-hover, #ffdf70); }
.secondary { border: 1px solid var(--line, #2a3c33); background: transparent; }
.secondary[hidden] { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Phones: the whole screen, above the page's bottom bar. */
@media (max-width: 600px) {
  :host { inset: 0; }
  .panel { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .panel { animation: rise .16s ease-out; }
  @keyframes rise { from { transform: translateY(8px); opacity: 0; } }
}