:root{font-family:Inter,system-ui,sans-serif;color:#182927;background:#eaf1ee;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px}
main{width:min(100%,460px)}
header{display:flex;align-items:center;gap:12px;font-size:24px;margin-bottom:20px}
.mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#124e44;color:#fff}
section{background:#fff;border:1px solid #cfdfd9;border-radius:24px;padding:clamp(22px,6vw,38px)}
h1{font-size:clamp(26px,7vw,36px);margin:0}
p{line-height:1.5;color:#455c56}
label{display:block;font-weight:600;margin:24px 0 8px}
input,button{display:block;width:100%;border-radius:10px;padding:12px;font:inherit}
input{border:1px solid #a6bdb5;background:#fbfdfc}
button{margin-top:12px;border:1px solid #124e44;background:#124e44;color:white;cursor:pointer;font-weight:600}
button.secondary{background:white;color:#124e44}
button:disabled{opacity:.55;cursor:wait}
#status:empty{display:none}
h2{font-size:19px;margin:26px 0 10px}
textarea{width:100%;border:1px solid #a6bdb5;border-radius:10px;padding:10px;font:inherit}

#web-expected { display: block; overflow-wrap: anywhere; }


:root {
  --ink: #222421;
  --muted: #4c5951;
  --mint: #c4d5c9;
  --paper: #f6f6ee;
  --coral: #ff806a;
  --coral-ink: #ad3d2d;
  --glass: rgba(246, 246, 238, .84);
  color: var(--ink);
  background: var(--mint);
}
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #2b6456; outline-offset: 3px; }
body { padding: 0; min-height: 100dvh; }
main:not(.signed-in) { width: min(100%, 490px); padding: 24px; min-height: 100dvh; display:flex; flex-direction:column; }
main:not(.signed-in) section { margin-block: auto 0; background: var(--paper); border: 0; }
main:not(.signed-in) h1 { font-size: clamp(34px, 8vw, 52px); letter-spacing: -.06em; }
.mark { background: var(--ink); color: var(--paper); }
button { border-color: var(--ink); background: var(--ink); border-radius: 999px; }
button.secondary { border-color: transparent; background: #e6ebe2; color: var(--ink); }
button:disabled { cursor: default; }
#passkey-login, #register, #new-chat { background: var(--coral); color: var(--ink); border-color: transparent; }
.oauth-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#legacy-login { margin-top: 16px; font-size: 14px; }
body:has(.signed-in) { display: block; }
main.signed-in { width: min(100%, 1280px); margin: auto; }
.signed-in > header, .signed-in #title { display: none; }
.signed-in > section { background: transparent; border: 0; padding: 0; }
#account { height: 100dvh; display: grid; grid-template-columns: minmax(270px, 350px) minmax(0, 1fr); }
.inbox, .conversation { min-height: 0; min-width: 0; position: relative; display: flex; flex-direction: column; }
.inbox { background: var(--paper); border-inline-end: 1px solid #9cab9f; }
.inbox-heading, .inbox-search, .conversation-heading, .inbox-footer {
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid #ffffffbd;
  border-radius: 25px;
  box-shadow: 0 4px 20px #22242114;
}
.inbox-heading, .conversation-heading { display: flex; align-items: center; gap: 12px; padding: 8px 14px; margin: max(10px, env(safe-area-inset-top)) 12px 0; z-index: 1; }
.inbox-heading { justify-content: space-between; }
.inbox-heading h2, .conversation-heading h2 { margin: 0; font-size: 24px; line-height: 1.1; letter-spacing: -.045em; overflow-wrap: anywhere; }
#new-chat { font-size: 24px; line-height: 1; }
#new-chat, #back-to-chats { width: auto; margin: 0; min-height: 44px; }
.inbox-search { display: block; margin: 6px 12px 0; z-index: 1; }
.inbox-search input { border: 0; background: transparent; border-radius: inherit; }
.inbox-list { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 8px 12px 92px; }
#chats, #web-history { list-style: none; padding: 0; margin: 0; }
#chats li { border-bottom: 1px solid #dde4da; overflow-wrap: anywhere; }
.chat-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; margin: 0; border: 0; border-radius: 14px; padding: 8px; text-align: start; color: var(--ink); background: transparent; }
button.chat-row:hover, button.chat-row[aria-current=true] { background: #dbe8da; }
.chat-row .mark { flex: 0 0 42px; background: #bed4c0; color: var(--ink); }
.chat-row small { display: block; font-weight: 400; color: var(--muted); }
.inbox-footer { position: absolute; inset-inline: 12px; bottom: max(10px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-around; gap: 4px; padding: 4px; }
.inbox-footer button, .inbox-footer strong { width: auto; margin: 0; padding: 10px; }
.inbox-footer strong { background: #c4d5c9; border-radius: 999px; }
#web-history { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 8px 16px; }
.message-bubble {
  --bubble-gutter: 10px;
  width: fit-content; max-width: 88%; margin-block: 2px; padding: 6px var(--bubble-gutter);
  background: var(--paper); border-radius: 14px 14px 14px 5px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
#web-history .own-message { margin-inline-start: auto; background: #e2eccd; border-radius: 14px 14px 5px 14px; }
#web-history small { color: var(--muted); font-size: .69rem; white-space: nowrap; }
#web-send label, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#chat-empty, #web-status, #web-add-device, #web-link-code, #web-approve-device { margin: 8px 16px; }
#web-status:empty, #back-to-chats, [data-sheet-status]:empty { display: none; }
.signed-in #status:not(:empty) { position: fixed; z-index: 2; bottom: max(80px, env(safe-area-inset-bottom)); inset-inline-end: 12px; margin: 0; padding: 12px; max-width: min(440px, calc(100% - 24px)); background: var(--paper); border-radius: 12px; }
dialog { width: min(calc(100% - 20px), 520px); max-height: calc(100dvh - 20px); padding: 20px; border: 0; border-radius: 26px; color: var(--ink); background: var(--paper); box-shadow: 0 12px 60px #22242145; }
dialog::backdrop { background: #22242165; }
dialog h2 { margin-top: 0; }
dialog details { margin-top: 16px; }
dialog summary { cursor: pointer; }
.profile-page { width: min(100%, 680px); height: 100dvh; max-height: 100dvh; }
.profile-page h2 { margin-top: 18px; }
.profile-card { padding: 20px; border-radius: 20px; background: var(--mint); display: flex; gap: 12px; align-items: center; }
.profile-card p { margin: 0; font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
#web-fingerprint { overflow-wrap: anywhere; }
@media (max-width: 680px) {
  #account { grid-template-columns: minmax(0, 1fr); }
  #account:not(.conversation-open) .conversation, .conversation-open > .inbox { display: none; }
  #back-to-chats { display: block; flex-shrink: 0; }
  dialog { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 26px 26px 0 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .profile-page { border-radius: 0; }
}

#private-groups { width: min(calc(100% - 20px), 640px); }
#group-thread { padding: 0; border: 0; border-radius: 0; background: transparent; }
#group-members, #group-messages { list-style: none; padding: 0; }
#group-members li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 2px; }
#group-members button { width: auto; margin: 0; padding: 5px 10px; }
#group-messages { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0; padding: 8px 16px; }
#group-messages .own-message { margin-inline-start: auto; background: #e2eccd; border-radius: 14px 14px 5px 14px; }
.group-author { display: block; color: var(--muted); }
.message-meta { display: inline-flex; gap: 4px; align-items: center; margin-inline-start: 6px; white-space: nowrap; color: var(--muted); font-size: .69rem; }
.message-check { font-weight: 700; letter-spacing: -.15em; padding-inline-end: .15em; }
.message-check.is-read { color: var(--coral-ink); }
#group-send label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#back-to-groups { width: auto; margin: 0; flex-shrink: 0; }
#back-to-groups, #group-thread-status:empty { display: none; }
#group-thread-status { margin: 4px 16px; }
#group-info { margin: 0 16px; }
#group-members { max-height: 22dvh; overflow: auto; }
#handle-results { list-style: none; padding: 0; margin: 0; }
#handle-search-status { margin: 4px 8px; color: var(--muted); }
@media (max-width: 680px) {
  #account.group-open #group-thread { display: flex; }
  #account.group-open > .inbox { display: none; }
  #back-to-groups { display: block; }
}
#group-verification p { overflow-wrap: anywhere; }
.inbox-footer button, .inbox-footer strong { padding-inline: 6px; }
@media (max-width: 680px) {
  #private-groups { width: 100%; }
}

#channel-publications { list-style: none; padding: 0; }
.publication-block { margin: 6px 0; padding: 10px 12px; border-radius: 16px; background: #e3ece5; overflow-wrap: anywhere; }
.publication-block p { margin: 4px 0 0; }
#account.channels-mode #direct-pane, #account.group-open #direct-pane { display: none; }
.inbox-footer button[aria-current=true] { background: #c4d5c9; }
#channel-open label { margin: 8px 0; }
#channel-open button { margin: 8px 0 12px; }
#recent-channels { list-style: none; padding: 0; margin: 0; }
#channel-reader { padding: 0; border: 0; border-radius: 0; background: transparent; }
#back-to-channels { display: none; width: auto; margin: 0; flex-shrink: 0; }
#channel-subtitle { color: var(--muted); }
.channel-feed { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 8px 16px; }
#channel-publications { margin: 0; }
#channel-publications > .message-bubble { max-width: min(96%, 720px); }
#channel-publications .message-text { display: inline; margin: 0; color: inherit; line-height: inherit; }
#channel-status:empty { display: none; }
#channel-builder { border-top: 1px solid #b8c8be; margin: 0; padding: 8px 16px; background: var(--paper); overflow: auto; max-height: 42dvh; }
#channel-builder summary { cursor: pointer; }
button.media-thumbnail {
  position: relative; display: block; width: 100%; aspect-ratio: 1.5;
  margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden;
  background: var(--mint); cursor: zoom-in; isolation: isolate;
}
.media-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.media-thumbnail .media-foreground { z-index: 1; object-fit: contain; }
.media-thumbnail .media-backdrop { object-fit: cover; transform: scale(1.2); filter: blur(14px); }
.message-bubble.has-media { width: min(88%, 360px); overflow: hidden; }
#channel-publications > .message-bubble.has-media { width: min(96%, 540px); }
.message-media { display: block; }
.has-media .media-thumbnail {
  width: calc(100% + 2 * var(--bubble-gutter));
  margin-inline: calc(-1 * var(--bubble-gutter));
}
#web-history .message-media .media-thumbnail { margin-block-start: -6px; }
#group-messages .group-author + .message-media .media-thumbnail { margin-block-start: 3px; }
#group-messages .own-message .message-media .media-thumbnail { margin-block-start: -6px; }
.publication-media { margin: 4px 0 0; padding: 0; border-radius: 0; background: transparent; }
.has-media > .message-meta { display: flex; justify-content: flex-end; margin: 3px 0 0; }

#media-viewer {
  box-sizing: border-box; inset: 0; width: 100%; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: #171c19; color: #f6f6ee;
}
#media-viewer[open] { display: flex; flex-direction: column; }
.media-toolbar { display: flex; gap: 8px; align-items: center; padding: max(12px, env(safe-area-inset-top)) 16px 8px; }
.media-toolbar h2 { font-size: 17px; margin: 0 auto 0 0; }
.media-toolbar button { width: auto; margin: 0; }
#media-canvas { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 16px; }
#media-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
#media-canvas.zoomed { display: block; }
#media-canvas.zoomed #media-image { width: var(--zoom-width); max-width: none; max-height: none; margin: auto; }

@media (min-width: 681px) {
  main.signed-in { width: min(100%, 1440px); }
}
@media (max-width: 680px) {
  #account.channels-mode:not(.channel-open) .channel-pane { display: none; }
  #account.channels-mode.channel-open > .inbox { display: none; }
  #account.channels-mode:not(.channel-open) > .inbox { display: flex; }
  #account.channels-mode.channel-open .channel-pane { display: flex; }
  #back-to-channels { display: block; }
}

.attachment-preview {
  min-width: 0; display: flex; align-items: center;
  gap: 10px; padding: 6px 10px; border-bottom: 1px solid #c4d5c9;
}
.attachment-preview img { width: 64px; height: 56px; border-radius: 8px; object-fit: contain; }
.attachment-preview span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-caption { display: block; margin-top: 4px; }

.create-sheet h2, .profile-page h2 { font-size: 26px; letter-spacing: -.03em; }
.create-sheet .sheet-hint { color: var(--muted); margin-block: 0 14px; }
.create-options { display: grid; gap: 8px; }
.create-options button { margin: 0; display: grid; gap: 3px; text-align: start; border-radius: 16px; }
.create-options small { color: var(--muted); font-weight: 400; }
.contact-picker { margin-block: 14px; }
.contact-picker ul { list-style: none; padding: 0; margin: 6px 0; max-height: 32dvh; overflow: auto; }
.contact-picker label:not(.visually-hidden) { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px; border-radius: 14px; cursor: pointer; }
.contact-picker label:has(input:checked) { background: #dbe8da; }
.contact-picker .mark { color: var(--ink); background: var(--mint); flex: 0 0 42px; }
.contact-picker input[type=checkbox] { margin-inline-start: auto; width: 20px; height: 20px; padding: 0; accent-color: var(--ink); }
.selection-count, .picker-empty { color: var(--muted); margin-block: 6px; font-size: .9rem; }
.selection-count:empty { display: none; }
.profile-logout { margin-top: 24px; color: var(--coral-ink); }

#web-link-code summary { cursor: pointer; }
#web-link-code code { overflow-wrap: anywhere; }

.chat-pattern, .channel-look {
  --wallpaper: #d6e3d7;
  --wallpaper-ink: #48634a14;
  --wallpaper-tile: 220px 176px;
  --wallpaper-pattern: var(--generated-wallpaper,
    radial-gradient(circle at 28px 28px, var(--wallpaper-ink) 0 2px, transparent 3px));
  --channel-accent: #285744;
  --channel-card: #f3f8ed;
  background-color: var(--wallpaper);
  background-image: var(--wallpaper-pattern);
  background-size: var(--wallpaper-tile);
}
#group-thread.chat-pattern, #channel-reader.channel-look {
  background-color: var(--wallpaper);
  background-image: var(--wallpaper-pattern);
  background-size: var(--wallpaper-tile);
}
.channel-look[data-theme=coral] {
  --wallpaper: #efd6c7; --wallpaper-ink: #823b2b18; --channel-accent: #923b2c; --channel-card: #fff4ed;
}
.channel-look[data-theme=iris] {
  --wallpaper: #ded9f1; --wallpaper-ink: #50407b18; --channel-accent: #57428f; --channel-card: #f8f4ff;
}
.channel-look[data-theme=sky] {
  --wallpaper: #d3e7ed; --wallpaper-ink: #245b7018; --channel-accent: #1e5268; --channel-card: #edf9fb;
}
.channel-look[data-backdrop=plain] { --wallpaper-pattern: none; }
.message-input {
  display: block; width: 100%; min-width: 0; min-height: 42px; max-height: min(30dvh, 180px);
  resize: none; overflow-y: auto; line-height: 1.4; padding: 10px 12px; border: 0;
  border-radius: inherit; background: transparent; overflow-wrap: anywhere;
}
#open-channel-appearance { width: auto; flex: 0 0 auto; margin: 0 0 0 auto; padding: 8px; }
#channel-reader .conversation-heading > div { min-width: 0; }
.channel-author { display: block; margin: 0 0 3px; color: var(--channel-accent); font-size: .85rem; overflow-wrap: anywhere; }
#channel-reader #channel-publications > li { background: var(--channel-card); }
#channel-appearance-preview { padding: 12px; border-radius: 16px; }
#channel-appearance-preview p { width: fit-content; margin: 0; border-radius: 12px; padding: 8px 12px; background: var(--channel-card); }
#channel-appearance-preview strong { color: var(--channel-accent); }
#channel-appearance-form select { display: block; width: 100%; padding: 10px; border: 1px solid #a6bdb5; border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; }
#channel-appearance-form label { margin-top: 12px; }
#channel-appearance-form #channel-sign-option { display: flex; align-items: center; gap: 8px; }
#channel-sign-posts { width: auto; accent-color: var(--ink); }

.conversation {
  --top-height: 64px;
  --dock-height: 66px;
  --floating-glass: rgba(246, 246, 238, .62);
  isolation: isolate;
}
.conversation-top, .conversation-dock {
  position: absolute; inset-inline: 0; z-index: 2; pointer-events: none;
}
.conversation-top { inset-block-start: 0; padding-block: max(10px, env(safe-area-inset-top)) 0; }
.conversation-dock { inset-block-end: 0; padding-block: 0 max(10px, env(safe-area-inset-bottom)); }
.conversation-top > *, .conversation-dock > * { pointer-events: auto; }
.conversation .conversation-heading, .conversation .composer-center, .conversation .composer > .chat-attach,
.conversation #group-info, .conversation #channel-builder,
.conversation #web-add-device, .conversation #web-link-code, .conversation #web-approve-device,
.conversation #web-status:not(:empty), .conversation #group-thread-status:not(:empty) {
  margin: 0 12px;
  background: var(--floating-glass);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid #ffffffa3;
  border-radius: 24px;
  box-shadow: 0 5px 18px #22242114;
}
.conversation .conversation-top > :not(:first-child) { margin-block-start: 5px; }
.conversation-dock { display: flex; flex-direction: column; gap: 5px; }
.conversation #group-info { align-self: start; width: fit-content; max-width: calc(100% - 24px); padding: 4px 12px; }
.conversation #group-members { margin-block: 4px; }
.conversation #channel-builder { padding: 6px 12px; }
.conversation #web-add-device, .conversation #web-link-code, .conversation #web-approve-device,
.conversation #web-status:not(:empty), .conversation #group-thread-status:not(:empty) { padding: 6px 12px; }
.conversation #web-history, .conversation #group-messages, .conversation .channel-feed {
  min-height: 0;
  padding-block-start: calc(var(--top-height) + 10px);
  padding-block-end: calc(var(--dock-height) + 10px);
  scroll-padding-block: calc(var(--top-height) + 10px) calc(var(--dock-height) + 10px);
}
#chat-empty { position: absolute; inset-block-start: calc(var(--top-height) + 8px); inset-inline: 0; pointer-events: none; }
.connection-note {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  z-index: 1; transform: translate(-50%, -50%); pointer-events: none;
  width: max-content; max-width: calc(100% - 32px); padding: 5px 11px;
  border: 1px solid #fff9; border-radius: 999px;
  background: rgba(252, 247, 236, .82); color: #683820;
  font-size: .8rem; font-weight: 600; text-align: center;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.message-check.is-paused { color: var(--coral-ink); letter-spacing: 0; padding: 0 3px; }
#channel-send button.is-paused { color: #fff; background: var(--coral-ink); }
@supports not ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  .conversation { --floating-glass: rgba(246, 246, 238, .94); }
}

.conversation-dock .composer {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px;
  align-items: end; gap: 6px; margin-inline: 12px;
}
.conversation-dock .composer-with-attachment { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.conversation .composer-center { min-width: 0; margin: 0; }
.composer > .composer-submit, .conversation .composer > .chat-attach {
  display: grid; place-items: center; width: 44px; height: 44px;
  margin: 0; padding: 0; border-radius: 50%; font-size: 25px; line-height: 1;
}
.composer > .composer-submit { border-color: transparent; background: var(--coral); color: var(--ink); }
.attachment-preview button { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; margin: 0; }

.inbox-copy { flex: 1; min-width: 0; }
.inbox-copy > strong, .inbox-preview {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-card > div { min-width: 0; }
.profile-card small { color: var(--muted); overflow-wrap: anywhere; }