/* Native dialog owns focus trapping for the product support conversation. */
.support-launcher {
  position: fixed;
  z-index: 30;
  right: 22px;
  bottom: max(22px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding: 12px 17px 12px 21px;
  border: 1px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink), 0 8px 25px #0002;
  font: 800 24px/1 var(--head);
}
.support-launcher:hover { background: #ffcb36; }
.support-launcher-label {
  border-left: 1px solid #191c1d66;
  padding-left: 14px;
  font: 600 10px/1.4 var(--mono);
  letter-spacing: .5px;
}
.support-dialog {
  position: fixed;
  inset: auto 18px 18px auto;
  width: 440px;
  height: min(730px, calc(var(--support-viewport-height, 100dvh) - 36px));
  max-width: calc(100vw - 36px);
  max-height: calc(var(--support-viewport-height, 100dvh) - 36px);
  margin: 0;
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 20px 80px #0006;
  overscroll-behavior: contain;
}
.support-dialog[open] { display: flex; flex-direction: column; }
.support-dialog::backdrop { background: #10141482; backdrop-filter: blur(2px); }
.support-header {
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 17px 21px;
  background: var(--ink);
  color: var(--paper);
  border-top: 4px solid var(--yellow);
}
.support-kicker { display: block; color: var(--yellow); font: 10px/1.4 var(--mono); letter-spacing: 1.3px; margin-bottom: 5px; }
.support-heading h2 { font: 800 36px/1 var(--head); letter-spacing: -.2px; }
.support-header-actions { display: flex; align-items: center; gap: 9px; }
.support-reset { min-height: 44px; padding: 8px; background: none; color: var(--paper); border: 0; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.support-close { width: 42px; height: 42px; display: grid; place-items: center; padding: 0 0 3px; background: transparent; border: 1px solid #737978; color: var(--paper); font: 28px/1 var(--body); }
.support-close:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.support-header button:focus-visible { outline-color: var(--yellow); outline-offset: 2px; }
.support-description { flex: 0 0 auto; padding: 12px 20px; margin: 0; font: 12px/1.5 var(--body); color: #545b57; border-bottom: 1px solid var(--line); }
.support-ai-status { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 47px; padding: 6px 18px; border-bottom: 1px solid var(--line); border-left: 4px solid #8b9287; background: #f0efe7; }
.support-ai-status[data-state='ready'] { border-left-color: #4a6743; }
.support-ai-status[data-state='waiting'] { border-left-color: var(--yellow); background: #f7efd7; }
.support-availability { flex: 1 1 auto; min-width: 0; font: 11px/1.45 var(--body); overflow-wrap: anywhere; }
.support-elapsed { flex: 0 0 auto; font: 11px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.support-status-button { flex: 0 0 auto; min-height: 34px; padding: 6px 8px; border: 1px solid #b7bcb3; background: transparent; font: 600 11px/1.4 var(--body); }
.support-status-button:hover { background: var(--yellow); border-color: var(--ink); }
.support-context { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 20px; min-height: 39px; border-bottom: 1px solid var(--line); background: #eae9e1; }
.support-context-label { font: 9px/1.4 var(--mono); letter-spacing: .65px; overflow-wrap: anywhere; }
.support-cancel { flex-shrink: 0; min-height: 30px; padding: 5px 0 5px 8px; border: 0; background: none; font: 600 11px/1.4 var(--body); text-decoration: underline; text-underline-offset: 3px; }
.support-browse { flex: 0 0 auto; border-bottom: 1px solid var(--line); }
.support-browse > summary { padding: 11px 40px 11px 20px; min-height: 40px; font: 600 12px/1.5 var(--body); }
.support-browse > summary:after { top: 7px; right: 20px; font-size: 21px; }
.support-browse-controls { display: flex; align-items: stretch; gap: 8px; padding: 0 18px 14px; }
.support-topic { flex: 1 1 auto; min-width: 0; max-width: 100%; margin: 0; padding: 9px; height: 43px; font: 14px/1.4 var(--body); }
.support-topic-ask { flex: 0 0 auto; padding: 9px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 600 11px/1.4 var(--body); }
.support-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 20px 18px 8px; scrollbar-gutter: stable; scroll-behavior: auto; }
.support-log:focus-visible { outline: 2px solid #bd7600; outline-offset: -3px; }
.support-message { margin: 0 0 16px; max-width: 100%; padding: 15px 15px 16px; border: 1px solid var(--line); background: #fffefa; overflow-wrap: anywhere; }
.support-message-user { margin-left: 36px; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.support-message[data-source='ai'] { border-left: 3px solid var(--yellow); }
.support-message[data-source='status'] { background: #eeede5; border-style: dashed; }
.support-speaker { display: block; margin-bottom: 9px; color: #676d66; font: 9px/1.35 var(--mono); letter-spacing: .7px; }
.support-message-user .support-speaker { color: var(--yellow); }
.support-message-text { white-space: pre-wrap; margin: 0; font: 14px/1.6 var(--body); text-align: start; unicode-bidi: plaintext; }
.support-ai-note { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: #596257; font: 11px/1.5 var(--body); text-align: left; }
.support-message-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.support-action { min-height: 42px; max-width: 100%; padding: 10px 12px; border: 1px solid #b7bcb3; background: transparent; color: var(--ink); text-align: left; font: 600 12px/1.35 var(--body); overflow-wrap: anywhere; }
.support-action:hover { border-color: var(--ink); background: #efeee7; }
.support-action-primary { background: var(--yellow); border-color: var(--yellow); }
.support-action-primary:hover { background: #ffcb36; border-color: var(--ink); }
.support-review-actions { flex-direction: column; }
.support-review-actions .support-action { text-align: center; }
.support-error { margin-top: 12px; padding: 10px; border-left: 3px solid #a63d1b; background: #f9ede6; color: #8a2816; font: 13px/1.5 var(--body); }
.support-form { flex: 0 0 auto; max-height: 55%; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 13px 18px 12px; border-top: 1px solid #c3c6bb; background: var(--paper); }
.support-language-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.support-language-label { flex: 0 0 auto; font: 8px/1.4 var(--mono); letter-spacing: .5px; }
.support-language { flex: 1 1 auto; min-width: 0; width: auto; height: 34px; margin: 0; padding: 5px 7px; font: 13px/1.4 var(--body); }
.support-input-label { margin-bottom: 7px; color: #50584f; font: 9px/1.5 var(--mono); letter-spacing: .8px; }
.support-compose { display: flex; align-items: stretch; gap: 8px; }
.support-input { display: block; flex: 1 1 auto; min-width: 0; min-height: 56px; height: 60px; max-height: 110px; padding: 10px 11px; margin: 0; border: 1px solid #a5ada1; border-radius: 0; background: #fffefa; font: 16px/1.3 var(--body); resize: vertical; }
.support-input:disabled { background: #e7e7df; color: #666b60; }
.support-send { flex: 0 0 61px; min-height: 48px; padding: 10px 11px; border: 1px solid var(--ink); background: var(--ink); color: var(--yellow); font: 700 13px/1.3 var(--body); }
.support-send:hover:enabled { background: #354039; }
.support-privacy { margin: 8px 0 0; text-align: center; color: #5e665d; font: 10px/1.4 var(--body); }
.support-privacy-details { margin-top: 3px; color: #5e665d; }
.support-privacy-details > summary { min-height: 24px; padding: 3px 0; text-align: center; font: 600 10px/1.5 var(--body); text-decoration: underline; text-underline-offset: 3px; }
.support-privacy-details > summary:after { position: static; display: inline; margin-left: 7px; font-size: 13px; }
.support-privacy-details > p { max-height: 100px; overflow-y: auto; overscroll-behavior: contain; margin: 4px 0 0; padding: 8px 4px; border-top: 1px solid var(--line); font: 11px/1.5 var(--body); }
@media (max-width: 600px) {
  .support-launcher { right: 17px; bottom: max(17px, env(safe-area-inset-bottom)); min-height: 50px; gap: 14px; padding: 10px 13px 10px 17px; font-size: 22px; }
  .support-launcher-label { padding-left: 11px; font-size: 9px; }
  .support-dialog { inset: calc(var(--support-viewport-top, 0px) + 8px) 8px auto; width: calc(100vw - 16px); max-width: calc(100vw - 16px); height: calc(var(--support-viewport-height, 100dvh) - 16px); max-height: calc(var(--support-viewport-height, 100dvh) - 16px); }
  .support-header { padding: 13px 13px 13px 17px; gap: 10px; }
  .support-heading h2 { font-size: 32px; }
  .support-kicker { font-size: 9px; }
  .support-header-actions { gap: 4px; }
  .support-description { padding: 10px 16px; font-size: 11px; }
  .support-context { padding: 7px 16px; }
  .support-ai-status { padding-right: 12px; padding-left: 12px; }
  .support-browse > summary { padding-left: 16px; }
  .support-browse-controls { padding-right: 12px; padding-left: 12px; }
  .support-topic { font-size: 16px; }
  .support-log { padding: 16px 12px 4px; }
  .support-message { padding: 13px; }
  .support-message-user { margin-left: 25px; }
  .support-form { padding: 11px 12px max(10px, env(safe-area-inset-bottom)); }
  .support-input { resize: none; }
  .support-language { font-size: 16px; }
}
.support-compact .support-header { padding-top: 8px; padding-bottom: 8px; }
.support-compact .support-heading h2 { font-size: 27px; }
.support-compact .support-kicker { margin-bottom: 3px; font-size: 8px; }
.support-compact .support-description { display: none; }
.support-compact .support-context { min-height: 30px; padding-top: 3px; padding-bottom: 3px; }
.support-compact .support-log { padding-top: 10px; }
.support-compact .support-form { padding-top: 8px; }
.support-compact .support-ai-status { min-height: 38px; padding-top: 3px; padding-bottom: 3px; }
.support-compact .support-language-row { margin-bottom: 5px; }
.support-compact .support-language { height: 30px; }
.support-compact .support-input-label { margin-bottom: 4px; }
.support-compact .support-input { height: 48px; min-height: 48px; }