@import "./chat-ui.css";

@font-face {
  font-family: "et-book";
  src: url("fonts/et-book-roman-line-figures.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body.chat-ui {
  --page: var(--chat-page);
  --text: var(--chat-text);
  --muted: var(--chat-muted);
  --rule: var(--chat-rule);
  --incoming: var(--chat-incoming);
  --incoming-text: var(--chat-incoming-text);
  --outgoing: var(--chat-outgoing);
  --outgoing-text: var(--chat-outgoing-text);
  --max-thread: 430px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; font-size: 17px; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }

.reading-progress { position: fixed; inset: 0 0 auto; z-index: 50; height: 2px; }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--muted); }
.theme-toggle { position: absolute; top: 16px; right: 16px; z-index: 40; display: grid; width: 36px; height: 36px; place-items: center; padding: 8px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--page) 82%, transparent); color: var(--muted); cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.theme-toggle:hover { color: var(--text); }
.theme-toggle svg { grid-area: 1 / 1; width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

.thread { width: min(100%, var(--max-thread)); min-height: 100vh; margin: 0 auto; padding: 0 16px 80px 48px; }
.cover { display: flex; min-height: 42vh; flex-direction: column; align-items: center; justify-content: center; margin-left: -32px; padding: 12vh 20px 10vh; text-align: center; }
.cover h1 { margin: 0; font-family: "Instrument Serif", "et-book", Georgia, serif; font-size: 52px; font-style: italic; font-weight: normal; letter-spacing: 0; line-height: 1; }
.cover__proper { align-self: flex-end; margin-top: 18px; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: right; text-decoration: none; }
.cover__proper > span { display: block; }
.cover__proper-title { display: inline-block; color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 60%, transparent); text-underline-offset: 0.2em; }
.cover__proper-title::after { display: inline-block; margin-left: 3px; font-size: 0.65em; line-height: 0; vertical-align: super; text-decoration: none; content: "\2197"; }
.cover__proper-title:hover { color: var(--text); }
.cover__proper-title:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.date-divider { display: flex; min-height: 44px; align-items: center; justify-content: center; padding-top: 8px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; text-transform: lowercase; }
.exchange { padding-bottom: 28px; }
.chapter-label { margin: 0 0 18px; color: var(--muted); font-size: 11px; font-style: italic; font-weight: 600; letter-spacing: 0; text-align: center; text-transform: lowercase; }
.message-row { position: relative; display: flex; width: 100%; align-items: flex-end; margin-top: 2px; }
.message-row.incoming { justify-content: flex-start; gap: 8px; margin-left: -32px; }
.message-row.outgoing { justify-content: flex-end; padding-right: 10px; }
.message-row.first { margin-top: 14px; }
.message-row.last, .message-row.solo { margin-bottom: 14px; }
.avatar-mini { position: relative; bottom: 0; display: grid; flex: 0 0 auto; width: 22px; height: 22px; place-items: center; overflow: hidden; border-radius: 50%; background: url("frog.png") center / cover no-repeat; color: transparent; font-size: 0; }
.incoming:not(.last):not(.solo) .bubble { margin-left: 30px; }
.bubble { max-width: 300px; text-transform: lowercase; }

@media (max-width: 480px) {
  .cover h1 { font-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}