:root {
  --trollbox-width: 340px;
  --trollbox-surface: #050505;
  --trollbox-text: #e4e2e7;
  --trollbox-muted: #949198;
  --trollbox-focus: #c4b5dc;
  --trollbox-mono: "Lucida Console", Monaco, "Courier New", monospace;
}
.trollbox [hidden] { display: none !important; }
.trollbox-jump { display: none; }
.trollbox {
  position: relative;
  z-index: 1001;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--trollbox-surface);
  border: 0;
  color: var(--trollbox-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}
.trollbox-heading { display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 49px; padding: 14px 16px; border: 0; }
.trollbox-heading h2 { margin: 0; font-size: 13px; font-weight: 400; letter-spacing: 0; }
.trollbox-messages { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 14px 10px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #38353c transparent; }
.trollbox-messages::before { content: ""; margin-top: auto; }
.trollbox-messages > * { flex-shrink: 0; }
.trollbox-messages:focus-visible { outline: none; background: #101010; }
.trollbox-empty { margin: 4px; color: var(--trollbox-muted); font-size: 11px; line-height: 1.6; }
.chat-message { padding: 3px 4px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-message:hover { background: #ffffff05; }
.chat-author { color: var(--chat-author-color, #c4a2ff); font-weight: 700; text-shadow: 0 1px 1px #000; }
.chat-text { color: #f0f0f0; white-space: pre-wrap; text-shadow: 0 1px 1px #000; }
.chat-time { display: inline-block; min-width: 8ch; margin-right: 7px; color: #949198; font: 10px var(--trollbox-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trollbox-form { flex-shrink: 0; margin: 0; padding: 10px 12px 0; }
#trollbox-input { display: block; width: 100%; min-height: 58px; max-height: 150px; padding: 11px 10px; resize: vertical; border: 0; border-radius: 2px; background: #0c0b0e; color: var(--trollbox-text); font: inherit; font-size: 13px; line-height: 1.5; caret-color: var(--trollbox-focus); }
#trollbox-input::placeholder { color: #98939f; opacity: 1; }
#trollbox-input:hover { background: #131215; }
#trollbox-input:focus { outline: none; background: #1b191f; }
.trollbox-compose-actions { display: flex; justify-content: flex-end; padding-top: 8px; }
.trollbox-send { appearance: none; min-height: 32px; padding: 6px 14px; border: 0; border-radius: 2px; background: #242127; color: #f0edf3; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.trollbox-send:hover { background: #35303c; }
.trollbox-send:disabled { cursor: wait; opacity: .55; }
.trollbox-account { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-shrink: 0; padding: 10px 12px 0; font-size: 11px; color: var(--trollbox-muted); }
#trollbox-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trollbox-feedback { flex-shrink: 0; padding: 9px 12px 12px; color: var(--trollbox-muted); font-size: 10px; line-height: 1.5; min-height: 33px; }
.trollbox-feedback:has(.trollbox-status:empty):has(.trollbox-text-button[hidden]) { min-height: 0; padding-top: 0; }
.trollbox-status { margin: 0; }
.trollbox-text-button { appearance: none; border: 0; border-radius: 0; background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.trollbox-feedback .trollbox-text-button { margin-top: 7px; }
.trollbox-text-button:hover { color: #eee; }
.trollbox-text-button:disabled { cursor: wait; opacity: .5; }
.trollbox a:focus-visible, .trollbox button:focus-visible, .trollbox-jump:focus-visible { outline: none; background: #3c3544; color: #fff; }
.trollbox-noscript { padding: 0 12px 12px; color: var(--trollbox-muted); }
.trollbox-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.trollbox-paywall { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); padding: 26px 22px 22px; overflow-y: auto; border: 0; border-radius: 2px; background: #141414; color: #e4e4e4; font-family: var(--trollbox-mono); box-shadow: 0 20px 80px #0009; }
.trollbox-paywall::backdrop { background: rgba(0, 0, 0, .76); }
.trollbox-modal-close { position: absolute; top: 10px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 4px; background: transparent; color: #aaa; font: inherit; font-size: 25px; line-height: 1; cursor: pointer; }
.trollbox-modal-close:hover { color: white; background: #242424; }
.trollbox-paywall-heading { display: flex; align-items: center; gap: 9px; margin: 0 34px 15px 0; }
.trollbox-modal-lock { display: block; flex-shrink: 0; color: #a0a0a0; }
.trollbox-paywall h3 { margin: 0; font-size: 14px; font-weight: 400; }
.trollbox-paywall-description { margin: 0 0 20px; font-size: 12px; line-height: 1.6; color: #bbb; }
.trollbox-auth-form { margin: 0; display: grid; gap: 12px; }
.trollbox-auth-form label { color: #dedede; font-size: 12px; }
.trollbox-auth-form input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 11px 12px; border: 0; border-radius: 2px; background: #0b0b0b; color: #eee; font: 14px Arial, Helvetica, sans-serif; }
.trollbox-auth-form input:focus { outline: none; background: #262626; }
#trollbox-code { font: 20px var(--trollbox-mono); letter-spacing: .3em; }
.trollbox-auth-hint, .trollbox-verified { margin: 0; color: #aaa; font: 12px/1.6 Arial, Helvetica, sans-serif; overflow-wrap: anywhere; }
.trollbox-auth-submit { min-height: 42px; margin-top: 4px; border: 0; border-radius: 2px; background: #303030; color: #eee; font: 12px var(--trollbox-mono); cursor: pointer; }
.trollbox-auth-submit:hover { background: #3b3b3b; }
.trollbox-auth-submit:disabled { cursor: wait; opacity: .5; }
.trollbox-resend { justify-self: start; margin-top: 4px; color: #aaa; font-size: 11px; }
.trollbox-change-email { margin-top: 18px; color: #aaa; font-size: 11px; }
.trollbox-verified { margin-bottom: 15px; }
.trollbox-modal-navigation { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; color: #999; font-size: 10px; }
.trollbox-modal-navigation:has(#trollbox-back[hidden]) { justify-content: flex-end; }
.trollbox-embedded-checkout { width: 100%; min-height: 250px; }
.trollbox-embedded-checkout iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.trollbox-payment-status { margin: 14px 0 0; color: #aaa; font-size: 12px; line-height: 1.5; }
.trollbox-payment-status:empty { display: none; }
.trollbox-payment-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; margin-top: 20px; color: #bbb; font-size: 12px; }
.trollbox-payment-actions:not(:has(button:not([hidden]))) { display: none; }
@media (min-width: 1040px) {
  body { display: block; padding-right: var(--trollbox-width); }
  .page-shell { min-height: auto; margin-inline: auto; padding-left: 24px; padding-right: 24px; padding-bottom: 40px; }
  .trollbox { position: fixed; inset: 0 0 0 auto; width: var(--trollbox-width); height: 100vh; height: 100dvh; }
  .subscribe-widget { position: relative; inset: auto; transform: none; margin: 0 auto 48px; z-index: auto; }
  .site-footer-fixed { right: calc(var(--trollbox-width) + 20px); }
}
@media (max-width: 1039px) {
  body { flex-direction: column; align-items: center; }
  .page-shell { min-height: auto; padding-bottom: 40px; order: 0; }
  .trollbox-jump { display: block; width: fit-content; margin: 22px auto 0; color: var(--text-soft); font-size: 11px; text-underline-offset: 4px; }
  .trollbox { width: min(100%, 720px); height: 520px; height: min(650px, 80svh); min-height: 420px; border: 0; order: 1; scroll-margin-top: 16px; }
  .subscribe-widget { position: relative; inset: auto; transform: none; margin: 36px auto 22px; order: 2; z-index: auto; }
  .site-footer-fixed { position: static; margin: 0 auto 32px; order: 3; }
}
@media (max-width: 480px) {
  #trollbox-input, .trollbox-auth-form input { font-size: 16px; }
  .trollbox-paywall { padding: 24px 16px 18px; width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
}