/* meet.jaekwon.com: one column, the conversation, then the calendar. */
:root {
  --bg: #fff;
  --fg: #222;
  --muted: #777;
  --line: #e4e4e4;
  --accent: #337ab7;
  --them: #f2f3f5;
  --me: #e3eef8;
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a;
    --fg: #e6e6e6;
    --muted: #9a9a9a;
    --line: #2b2f35;
    --accent: #6aaee6;
    --them: #22262c;
    --me: #1d3448;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 var(--font); }
a { color: var(--accent); }
.wrap { max-width: 640px; margin: 0 auto; padding: 24px 16px 40px; }
.head { margin-bottom: 16px; }
.home { font-size: 14px; text-decoration: none; color: var(--muted); }
.home:hover { color: var(--accent); }
h1 { font-size: 28px; font-weight: 600; margin: 8px 0 4px; letter-spacing: -0.01em; }
.sub { margin: 0; color: var(--muted); }
h2 { font-size: 20px; font-weight: 600; margin: 24px 0 4px; }

.log { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; min-height: 120px; }
.line { max-width: 88%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.line.assistant { background: var(--them); border-bottom-left-radius: 6px; align-self: flex-start; }
.line.user { background: var(--me); border-bottom-right-radius: 6px; align-self: flex-end; }
.line.wait { color: var(--muted); letter-spacing: 2px; animation: pulse 1.2s ease-in-out infinite; }
.line.note { background: none; color: var(--muted); font-size: 14px; align-self: center; text-align: center; }
@keyframes pulse { 50% { opacity: 0.35; } }

.composer { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.composer.over { display: none; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
textarea { flex: 1; resize: none; font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; max-height: 160px; line-height: 1.4; }
textarea:focus { outline: none; border-color: var(--accent); }
button { font: inherit; font-weight: 600; color: #fff; background: var(--accent); border: 0; border-radius: 12px; padding: 10px 18px; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: default; }

.calendar { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.calendar p { margin: 0 0 8px; color: var(--muted); }
.calendly { height: 700px; min-width: 320px; margin: 0 -8px; } /* Calendly sizes its iframe to the parent: a set height, not a min */
.booked { color: var(--fg); font-weight: 600; }

.foot { margin-top: 32px; font-size: 13px; color: var(--muted); }
.foot p { margin: 0; }
@media (max-width: 480px) {
  .wrap { padding: 16px 16px 32px; }
  h1 { font-size: 24px; }
  .line { max-width: 94%; }
}