/* Local secure preview: responsive, RTL-safe, no external assets. */
* {
  box-sizing:border-box;
}
:root {
  font:16px/1.55 system-ui,"Segoe UI",sans-serif;
  color:#18382c;
  background:#f5f8f5;
  --ink:#18382c;
  --green:#1c6549;
  --line:#cbdcd1;
  --muted:#526b5f;
}
html {
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
body {
  margin:0;
  padding:env(safe-area-inset-top,0px) max(20px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));
  min-height:100dvh;
}
header,main,.preview-label,footer {
  max-width:1100px;
  margin-inline:auto;
}
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px 0;
}
.brand {
  display:flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  color:var(--ink);
  font-size:25px;
  font-weight:750;
}
.brand small {
  display:block;
  font-size:10px;
  letter-spacing:.15em;
  color:var(--muted);
}
.mark {
  display:grid;
  place-items:center;
  background:var(--green);
  color:white;
  border-radius:12px;
  width:44px;
  height:44px;
}
.header-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
#account {
  max-width:220px;
  font-size:13px;
  overflow-wrap:anywhere;
}
.preview-label {
  font-size:12px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#eaf2ec;
  color:#365b48;
}
main {
  padding-block:22px;
}
h1 {
  font-size:clamp(28px,4vw,46px);
  line-height:1.16;
  letter-spacing:-.025em;
  margin:10px 0 16px;
}
h2 {
  font-size:20px;
  margin:0 0 16px;
}
.eyebrow {
  font-size:12px;
  letter-spacing:.12em;
  font-weight:700;
  color:#476656;
}
.muted {
  color:var(--muted);
}
button,select,input,textarea {
  font:inherit;
  font-size:16px;
}
button {
  border:1px solid #b8d0c0;
  border-radius:10px;
  background:white;
  color:var(--ink);
  min-height:44px;
  padding:10px 16px;
  font-weight:600;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}
button.primary {
  background:var(--green);
  color:white;
  border-color:var(--green);
}
button:active {
  transform:translateY(1px);
  background:#e2eee6;
}
button.primary:active {
  background:#154e38;
}
button:disabled {
  opacity:.5;
  cursor:wait;
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid #99621e;
  outline-offset:3px;
}
input,textarea,select {
  border:1px solid #98b5a4;
  border-radius:10px;
  background:white;
  color:var(--ink);
  padding:11px 13px;
  max-width:100%;
}
input,textarea {
  width:100%;
  display:block;
  margin:7px 0 15px;
}
textarea {
  resize:vertical;
}
label {
  font-weight:600;
}
input[type=email],input[type=password],#join-token,#invitation-output {
  direction:ltr;
  text-align:start;
}
.login-card {
  max-width:630px;
  margin:24px auto;
  background:white;
  padding:36px;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 12px 36px #18382c09;
}
.login-card form {
  max-width:420px;
  margin-top:26px;
}
.login-card form button {
  width:100%;
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
}
.lobby-grid {
  display:grid;
  grid-template-columns:1fr 340px;
  gap:32px;
}
.card {
  background:white;
  border:1px solid var(--line);
  padding:22px;
  border-radius:16px;
  margin-bottom:18px;
}
.room-link {
  width:100%;
  text-align:start;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:20px;
  margin-bottom:12px;
  font-size:18px;
}
.room-link small {
  font-size:12px;
  color:var(--muted);
}
.empty {
  padding:35px 20px;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:15px;
}
.room-heading {
  display:flex;
  gap:20px;
  align-items:center;
  margin-bottom:18px;
}
.room-heading>div {
  flex:1;
}
.room-heading h1 {
  font-size:28px;
  margin:5px 0;
  overflow-wrap:anywhere;
}
.room-heading .eyebrow {
  margin:0;
}
.room-toolbar {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  border-block:1px solid var(--line);
  padding:14px 0;
}
.room-toolbar select {
  max-width:260px;
}
.connection {
  font-size:12px;
  color:var(--muted);
  margin-inline-start:auto;
}
.inline-card {
  padding:20px;
  background:#eef5ef;
  border:1px solid var(--line);
  border-radius:12px;
  margin-block:16px;
}
.inline-card button {
  margin-inline-end:8px;
}
.conversation {
  min-height:32dvh;
  max-height:54dvh;
  overflow:auto;
  overscroll-behavior:contain;
  padding-block:20px;
}
.message {
  background:white;
  border:1px solid #dae5dd;
  padding:16px 18px;
  border-radius:14px;
  margin:12px 0;
}
.message .byline {
  display:flex;
  gap:12px;
  align-items:baseline;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}
.message p {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:7px 0 0;
}
.composer {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.composer textarea {
  margin:0;
  min-height:72px;
}
.composer small {
  grid-column:1/-1;
  color:var(--muted);
}
#status {
  min-height:25px;
  color:#7d451c;
  margin-bottom:12px;
  overflow-wrap:anywhere;
}
.notice {
  background:#fff8e9;
  border:1px solid #dac087;
  padding:16px;
  border-radius:12px;
  margin-bottom:20px;
}
.notice p {
  margin:0 0 12px;
}
.notice button {
  margin-inline-end:8px;
}
footer {
  font-size:12px;
  color:var(--muted);
  padding-block:18px;
}
.skip {
  position:absolute;
  top:-100px;
  background:white;
  padding:12px;
  z-index:5;
}
.skip:focus {
  top:5px;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  clip-path:inset(50%);
  overflow:hidden;
}
[hidden] {
  display:none!important;
}
@media(hover:hover) and (pointer:fine) {
  button:hover {
    border-color:var(--green);
    background:#edf5ef;
  }
  button.primary:hover {
    background:#174f39;
  }
}
@media(max-width:700px) {
  body {
    padding-inline:14px;
  }
  header {
    padding-block:16px;
  }
  .brand small {
    display:none;
  }
  #account {
    display:none;
  }
  .login-card {
    padding:24px;
    margin-block:12px;
  }
  .lobby-grid {
    grid-template-columns:1fr;
    gap:20px;
  }
  .room-heading {
    gap:10px;
    flex-wrap:wrap;
  }
  .room-heading>div {
    min-width:45%;
  }
  .room-heading h1 {
    font-size:24px;
  }
  .room-toolbar select {
    max-width:190px;
  }
  .connection {
    width:100%;
    margin:0;
  }
  .conversation {
    max-height:46dvh;
  }
  .composer {
    position:sticky;
    bottom:0;
    background:#f5f8f5;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .section-heading {
    align-items:flex-start;
  }
  .preview-label {
    font-size:11px;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

.auth-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
#onboarding-token, #onboarding-email, #onboarding-password { direction:ltr; text-align:start; }
#onboarding-form button { margin-block:6px; }

.ai-context, #ai-result { white-space:pre-wrap; overflow-wrap:anywhere; max-height:240px; overflow:auto; padding:12px; border:1px solid var(--line); background:white; }
.ai-consent { display:flex; gap:12px; align-items:flex-start; margin-block:14px; }
.ai-consent input { width:24px; min-width:24px; height:24px; margin:0; }
#ai-panel select { display:block; width:100%; margin-block:8px 14px; }