/* The community's picnic artwork, served locally with no external assets. */
:root {
  color-scheme: light;
  color: #243c58;
  background: #eef5fc;
  --muted: #536b80;
  --accent: #316cba;
  --line: #ccdcec;
  --surface: #fffdf7;
}
body {
  background-color: #eaf2fb;
  background-image:
    linear-gradient(90deg, #99b8e31a 50%, transparent 50%),
    linear-gradient(#99b8e31a 50%, transparent 50%);
  background-size: 44px 44px;
}
button {
  color: #294867;
  background: #e2edfa;
}
button:hover:not(:disabled) {
  background: #cedff4;
}
button:disabled {
  opacity: 0.6;
}
input,
textarea,
select {
  color: #243c58;
  background: #fffefa;
  border-color: #adc6df;
}
input::placeholder,
textarea::placeholder {
  color: #607991;
}
a {
  color: #245fa9;
}
.primary {
  color: #fff;
  background: #316cba;
  box-shadow: 0 3px 8px #316cba18;
}
.primary:hover:not(:disabled) {
  background: #26599b;
}
.subtle-button {
  background: #f5f9ff;
  border-color: #bdd2e7;
}
.text-button {
  background: transparent;
  color: #245fa9;
}
.danger-subtle {
  color: #973e3e;
  background: #fce9e2;
}
.danger-subtle:hover:not(:disabled) {
  background: #f7d8d0;
}
.icon-button {
  color: #536b80;
  background: transparent;
}
.eyebrow {
  color: #38674b;
}
.brand-mark {
  color: #fff;
  background: #316cba;
  box-shadow: 3px 3px 0 #bcd4f0;
}
.status-dot {
  background: #467750;
}
.auth-card {
  position: relative;
  width: min(1040px, calc(100% - 48px));
  min-height: 560px;
  margin: clamp(24px, 6vh, 64px) auto;
  padding: 46px 40px 38px calc(54% + 32px);
  /* A fixed column proportion avoids tying the form width to the viewport. */
  padding-left: calc(min(1040px, 100vw - 48px) * 0.54 + 32px);
  background: #fffdf7;
  border-color: #b9cfe5;
  box-shadow: 0 18px 70px #29486b1a;
  overflow: hidden;
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 46% 0 0;
  background: #d3e8f6 url("/assets/picnic.png") center center / cover no-repeat;
  border-right: 1px solid #b9cfe5;
}
.auth-card .brand {
  margin-bottom: 38px;
}
.auth-card h1 {
  color: #244c77;
}
.auth-footer {
  color: #496f54;
}
#chat {
  background: #dceafb url("/assets/picnic.png") center 58% / cover no-repeat;
}
#sidebar {
  background: #f6fafff5;
  border-color: #bed1e6;
}
#sidebar .brand {
  padding-bottom: 18px;
}
.section-title {
  color: #5b7088;
}
.channel {
  color: #354f6b;
}
.channel:hover:not(:disabled) {
  background: #e0edfb;
}
.channel.active {
  background: #d6e5fb;
  color: #244f89;
  box-shadow: inset 3px 0 #477ec2;
}
.channel-symbol {
  color: #5d7ea3;
}
.channel-hint {
  color: #426951;
}
.channel.voice.active {
  background: #dfeddd;
  color: #345b3d;
  box-shadow: inset 3px 0 #608851;
}
.channel.voice.active .channel-hint {
  color: #345b3d;
}
.server-note {
  color: #496f54;
}
.sidebar-bottom::before {
  content: "";
  display: block;
  height: 72px;
  border: 4px solid #fffdf7;
  border-radius: 12px;
  margin: 0 2px 10px;
  background: #dae9f5 url("/assets/picnic.png") center 69% / cover no-repeat;
  box-shadow: 0 3px 12px #365f8220;
}
.account {
  background: #e5eef9;
  border-color: #c7d8ea;
}
.avatar {
  color: #305b43;
  background: #d9ead8;
}
.msg.own .avatar {
  color: #305994;
  background: #d8e6fc;
}
#content {
  background: #f8fbffed;
}
.chat-header {
  background: #fffdf7ed;
  border-color: #c5d7e8;
}
.header-hash {
  color: #62886c;
}
#connection {
  color: #41694b;
}
#connection[data-state="offline"] {
  color: #965219;
}
#messages {
  scrollbar-color: #9eb9d6 transparent;
}
.empty-symbol {
  background: #dfeadb;
  color: #456b49;
}
.day-divider {
  color: #526c85;
}
.messageBody {
  color: #2c435d;
}
.meta .you {
  color: #426851;
}
.msg time {
  color: #597187;
}
.jump-latest {
  background: #d5e6fd;
  color: #234f87;
  border-color: #b5cdeb;
  box-shadow: 0 5px 18px #2b4d7b18;
}
.compose-box {
  background: #fffefbdc;
  border-color: #adc6df;
  box-shadow: 0 2px 8px #3555760c;
}
.compose-box:focus-within {
  border-color: #527fb9;
  box-shadow: 0 0 0 3px #4a86d31a;
}
#message {
  color: #243c58;
  background: transparent;
}
#message::placeholder {
  color: #607991;
}
.composer-meta {
  color: #536b80;
}
.composer-meta #sendStatus {
  color: #345f97;
}
#sendStatus[data-tone="error"] {
  color: #a04235;
}
#voiceStatus {
  background: #eff5e8f5;
  border-color: #b3c9a6;
}
.voice-indicator {
  background: #608851;
  box-shadow: 0 0 0 5px #60885112;
}
.voice-summary strong {
  color: #315a3b;
}
.voice-summary span:not(.voice-indicator),
.screen-hint {
  color: #48664c;
}
.voice-actions [aria-pressed="true"] {
  color: #973e3e;
  background: #fce9e2;
}
#shareScreen[aria-pressed="true"] {
  color: #fff;
  background: #477647;
}
#participants li {
  color: #3b5d41;
  background: #dfead8;
}
#participants li.speaking {
  border-color: #608851;
}
#screenShares {
  background: #eaf2fbf5;
  border-color: #bed1e6;
}
.screen-heading {
  color: #284f7b;
}
.screen-heading span {
  color: #536b80;
}
.screen-card {
  background: #fffdf7;
  border-color: #adc6df;
}
.screen-toolbar {
  color: #284f7b;
}
.screen-card.expanded {
  box-shadow: 0 0 0 100vmax #263d5de8;
}
dialog {
  color: #243c58;
  background: #fffdf7;
  border-color: #bed1e6;
  box-shadow: 0 24px 100px #1e416b40;
}
dialog::backdrop {
  background: #26456366;
}
.info-panel {
  background: #eef4fb;
  border-color: #c4d7e9;
}
#notice {
  color: #315a3b;
  background: #edf5e9;
  border-color: #a9c99a;
  box-shadow: 0 10px 40px #234a692b;
}
#notice[data-tone="error"] {
  color: #85382e;
  background: #fff0e8;
  border-color: #d9a99a;
}
@media (max-height: 760px) {
  .sidebar-bottom::before {
    display: none;
  }
}
@media (max-height: 620px) {
  .sidebar-bottom::before {
    display: none;
  }
}
@media (max-width: 800px) {
  .auth-card {
    width: min(460px, calc(100% - 28px));
    min-height: 0;
    margin: 20px auto;
    padding: 26px;
  }
  .auth-card::before {
    position: static;
    display: block;
    height: 255px;
    margin: -26px -26px 28px;
    border-right: 0;
    border-bottom: 1px solid #b9cfe5;
    background-position: center 58%;
  }
  .auth-card .brand {
    margin-bottom: 26px;
  }
}
@media (max-width: 700px) {
  #sidebar {
    background: #f6faff;
  }
  #sidebarBackdrop {
    background: #26456366;
  }
  #content {
    background: #f8fbfff0;
  }
}

/* A compact lobby: see people and calls without leaving the conversation. */
#peopleRail {
  display: none;
}
@media (min-width: 1100px) {
  #chat {
    grid-template-columns: 260px minmax(0, 1fr) 220px;
  }
  #peopleRail {
    display: block;
    min-height: 0;
    overflow: auto;
    padding: 16px 12px;
    background: #f6fafff5;
    border-left: 1px solid #bed1e6;
    scrollbar-width: thin;
  }
  #peopleRail .online-section {
    border: 0;
    margin: 0;
  }
  #peopleRail .people-title {
    margin-top: 0;
    margin-bottom: 12px;
  }
  #sidebar nav {
    scrollbar-width: thin;
  }
}
.people-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}
.people-button[data-live="false"] .status-dot {
  background: #8793a0;
}
.people-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 8px 4px;
}
.people-title .text-button {
  min-height: 36px;
  padding: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}
.online-section {
  border-top: 1px solid #ccdcec;
  margin-top: 16px;
}
.people-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.person-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  min-width: 0;
}
.presence-avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 10px;
  position: relative;
}
.presence-avatar::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  right: -1px;
  bottom: -1px;
  border: 2px solid #f6faff;
  box-sizing: content-box;
  border-radius: 50%;
  background: #8a99a8;
}
.presence-avatar[data-online="true"]::after {
  background: #467750;
}
.person-copy {
  flex: 1;
  min-width: 0;
}
.person-copy strong,
.person-copy small {
  display: block;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.person-copy strong {
  font-size: 12px;
  font-weight: 650;
}
.person-copy small {
  margin-top: 1px;
  font-size: 10px;
  color: #536b80;
}
.voice-channel-card {
  margin: 6px 0;
  padding-bottom: 7px;
  border: 1px solid #cfdfed;
  border-radius: 10px;
  background: #ffffff70;
}
.voice-channel-card.occupied {
  border-color: #b4cdb8;
  background: #eef6ecb0;
}
.voice-channel-card .channel {
  margin: 0;
  padding: 9px 10px 7px;
  min-height: 42px;
  border-radius: 9px 9px 5px 5px;
}
.voice-channel-card .channel-hint {
  font-size: 11px;
  flex-shrink: 0;
  font-weight: 650;
}
.voice-occupancy {
  margin: 0 10px 2px 41px;
  font-size: 10px;
  line-height: 1.45;
  color: #536b80;
}
.occupied .voice-occupancy {
  color: #386347;
  font-weight: 600;
}
.voice-preview-people {
  margin: 5px 5px 0 14px;
  padding-left: 9px;
  border-left: 1px solid #bfd3c1;
}
.voice-preview-people:empty {
  display: none;
}
.voice-preview-people .person-row {
  padding: 5px 2px;
}
.voice-preview-people .presence-avatar {
  width: 24px;
  height: 24px;
  font-size: 9px;
  border-radius: 8px;
}
.voice-preview-people .presence-avatar::after {
  display: none;
}
.voice-preview-people .person-copy strong {
  font-size: 11px;
}
.sidebar-hint {
  margin: 9px 10px;
  line-height: 1.5;
}
#peopleDialog {
  width: min(480px, calc(100% - 28px));
}
#peopleDialog h2 {
  margin-bottom: 12px;
}
#peopleDialog .person-row {
  padding: 10px 0;
  gap: 12px;
}
#peopleDialog .presence-avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
}
#peopleDialog .person-copy strong {
  font-size: 14px;
}
#peopleDialog .person-copy small {
  font-size: 12px;
}
.people-group-title,
#offlineTitle {
  font-size: 12px;
  color: #536b80;
  font-weight: 650;
  margin: 18px 0 6px;
}
#offlineTitle {
  cursor: pointer;
  padding: 12px 0;
  border-top: 1px solid #ccdcec;
}
.person-join {
  min-height: 40px;
  font-size: 12px;
}
.composer-meta #connection {
  font-size: 10px;
  width: auto;
  min-width: 0;
  margin: 0;
}
.composer-meta #connection::before {
  margin-right: 5px;
}
#voiceStatus {
  gap: 8px;
  padding: 10px 12px;
}
#screenShares {
  max-height: 34dvh;
  scrollbar-width: thin;
}
#screenShares video {
  max-height: 20dvh;
}
#screenShares .expanded video {
  max-height: none;
}
@media (min-width: 701px) {
  #composer {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
@media (max-width: 700px) {
  .chat-header {
    min-height: 62px;
    gap: 6px;
  }
  .invite-extra,
  #composerHint {
    display: none;
  }
  #sidebar {
    padding-top: max(18px, env(safe-area-inset-top));
  }
  #sidebar .brand {
    padding-bottom: 10px;
  }
  .sidebar-bottom::before,
  .server-note {
    display: none;
  }
  .people-title .text-button,
  .voice-title .icon-button {
    min-height: 44px;
    min-width: 44px;
  }
  .voice-channel-card .channel {
    min-height: 44px;
  }
  .day-divider {
    margin: 14px 0;
  }
}