/* Uses the portfolio's paper, ink and theme tokens. */
html { scrollbar-gutter: stable; }
.secretary-enabled { padding-bottom: 120px; }
.challenge-open { overflow: hidden; }
.secretary-open { overflow: hidden; }
.secretary-launcher, .secretary-panel button, .secretary-panel textarea { font: inherit; }
.secretary-launcher, .secretary-panel button { cursor: pointer; }
.secretary-launcher {
  position: fixed; z-index: 10; right: max(24px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom)); max-width: calc(100% - 32px);
  padding: 13px 19px; border: 1px solid var(--ink); border-radius: 4px;
  background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--accent);
  font-size: 14px; font-weight: 700;
}
.secretary-panel {
  position: fixed; inset: auto max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) auto;
  margin: 0; padding: 0; width: 420px; max-width: calc(100% - 32px);
  height: 660px; max-height: calc(100dvh - 40px); overflow: hidden;
  color: var(--ink); background: var(--surface); border: 1px solid var(--ink);
  border-radius: 12px; box-shadow: 12px 12px 0 var(--line);
}
.secretary-panel[open] { display: flex; flex-direction: column; animation: secretary-arrive .18s ease-out; }
.secretary-panel::backdrop { background: rgb(20 25 20 / .25); }
.secretary-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 22px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--paper), var(--green)); }
.secretary-identity { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.secretary-avatar { display: block; flex-shrink: 0; width: 56px; height: 56px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); }
.secretary-identity-copy { min-width: 0; }
.secretary-identity-copy .secretary-kicker { display: block; font-size: 7px; letter-spacing: 0; white-space: nowrap; }
.secretary-kicker { color: var(--muted); font: 700 10px 'Courier New', monospace; letter-spacing: 1px; }
.secretary-header h2 { font-size: 27px; margin: 7px 0 0; letter-spacing: -0.02em; }
.secretary-close { flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 50%; font-size: 22px !important; }
.secretary-reset { flex-shrink: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--muted); font-size: 11px !important; padding: 4px 0; }
.secretary-log { flex: 1; min-height: 80px; overflow-y: auto; overscroll-behavior: contain; padding: 24px 22px; background: var(--surface); }
.secretary-message { margin-bottom: 20px; overflow-wrap: anywhere; }
.secretary-message:last-child { margin-bottom: 0; }
.secretary-speaker { display: block; color: var(--muted); font: 700 11px 'Courier New', monospace; text-transform: uppercase; margin-bottom: 6px; }
.secretary-message p { font-size: 14px; line-height: 1.6; margin: 0; white-space: pre-wrap; }
.secretary-reply { font-size: 14px; line-height: 1.6; }
.secretary-reply ul, .secretary-reply ol { padding-left: 20px; margin: 8px 0; }
.secretary-reply pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px; background: var(--paper); }
.secretary-reply code { font-size: .9em; }
.secretary-reply blockquote { margin: 8px 0; padding-left: 12px; border-left: 2px solid var(--line); }
.secretary-message--user { background: var(--green); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 12px 14px; }
.secretary-status { color: var(--muted); font-size: 13px; line-height: 1.4; margin: 0; padding: 0 20px 10px; }
.secretary-status:empty { padding: 0; }
.secretary-form { border-top: 1px solid var(--line); padding: 16px 22px; background: var(--paper); }
.secretary-form label { display: block; width: fit-content; margin-bottom: 8px; padding: 4px 8px; border-radius: 999px; background: var(--green); color: var(--muted); font: 700 10px 'Courier New', monospace; letter-spacing: .08em; text-transform: uppercase; }
.secretary-form textarea { display: block; width: 100%; resize: none; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; font-size: 16px; line-height: 1.4; }
.secretary-form textarea::placeholder { color: var(--muted); }
.secretary-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(219 106 43 / .16); outline: none; }
.secretary-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.secretary-actions span { font-size: 10px; color: var(--muted); }
.secretary-send { background: var(--accent); color: var(--paper); border: 1px solid var(--accent); border-radius: 999px; padding: 10px 17px; white-space: nowrap; font-weight: 700; }
.secretary-panel button:disabled { opacity: .55; cursor: default; }
.secretary-disclosure { padding: 0 20px 14px; margin: 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.secretary-disclosure a { display: inline-block; margin-top: 6px; }
.secretary-launcher:focus-visible, .secretary-panel :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@keyframes secretary-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .secretary-launcher { right: max(16px, env(safe-area-inset-right)); font-size: 13px; }
  .secretary-panel { inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .secretary-header { padding: 14px 18px; }
}
@media (max-height: 540px) { .secretary-header { padding-block: 8px; } }
@media (prefers-reduced-motion: reduce) { .secretary-panel[open] { animation: none; } }

.challenge-entry { position: fixed; z-index: 10; right: max(24px, env(safe-area-inset-right)); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 58px); padding: 4px 8px; border: 0; border-radius: 3px; background: var(--paper); color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.challenge-panel { position: fixed; inset: 0; margin: auto; width: 560px; max-width: calc(100% - 32px); max-height: calc(100dvh - 40px); padding: 32px; overflow-y: auto; overscroll-behavior: contain; color: var(--ink); background: var(--surface); border: 1px solid var(--ink); border-radius: 6px; box-shadow: 8px 8px 0 var(--line); }
.challenge-panel[open] { animation: secretary-arrive .18s ease-out; }
.challenge-panel::backdrop { background: rgb(20 25 20 / .35); }
.challenge-panel button { font: inherit; cursor: pointer; }
.challenge-close { position: absolute; top: 12px; right: 12px; }
.challenge-intro { display: flex; align-items: center; gap: 16px; margin: 0 32px 26px 0; }
.challenge-avatar { display: block; width: 88px; height: 88px; flex-shrink: 0; object-fit: cover; border-radius: 50%; border: 2px solid var(--accent); box-shadow: 4px 4px 0 var(--green); }
.challenge-intro .secretary-kicker { margin: 0 0 8px; line-height: 1.5; }
.challenge-taunt { font-size: 15px; font-style: italic; line-height: 1.4; margin: 0; }
.challenge-panel h2 { font-size: clamp(32px, 6vw, 48px); line-height: 1.05; letter-spacing: -.035em; margin-bottom: 18px; }
.challenge-reward { display: inline-block; margin: 0 0 20px; padding: 9px 12px; background: var(--green); border-left: 3px solid var(--accent); color: var(--ink); font: 700 12px 'Courier New', monospace; line-height: 1.5; letter-spacing: .04em; }
.challenge-panel h2 span { display: block; margin-top: 8px; }
.challenge-panel h2:focus { outline: none; }
#challenge-copy { font-size: 15px; line-height: 1.6; }
#challenge-copy p { margin-bottom: 16px; }
.challenge-accept { width: 100%; padding: 16px; font-weight: 700 !important; margin-top: 8px; box-shadow: 3px 3px 0 var(--ink); }
.challenge-accept:hover { filter: brightness(1.08); }
.challenge-dismiss { display: block; width: 100%; padding: 14px 0; border: 0; background: transparent; color: var(--muted); font-size: 13px !important; font-style: italic !important; text-decoration: underline; text-underline-offset: 4px; }
.challenge-rules { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; font-size: 12px; color: var(--muted); }
.challenge-rules summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.challenge-rules p { margin: 12px 0 0; overflow-wrap: anywhere; }
.challenge-entry:hover, .challenge-dismiss:hover, .challenge-rules summary:hover { color: var(--accent); }
.challenge-entry:focus-visible, .challenge-panel :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) { .challenge-entry { right: max(16px, env(safe-area-inset-right)); } .challenge-panel { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { .challenge-panel[open] { animation: none; } }