/* The chat module's look. Everything is under .cx-root so it can sit inside another page. Dark only. */
.cx-root {
  --cx-bg: #0f1720;
  --cx-panel: #17222d;
  --cx-panel-2: #1f2c39;
  --cx-chat-bg: #0c161f;
  --cx-mine: #2b5f86;
  --cx-theirs: #1c2935;
  --cx-accent: #4aa3df;
  --cx-accent-2: #7cc0ec;
  --cx-text: #e8eef4;
  --cx-muted: #8394a5;
  --cx-border: #26333f;
  --cx-input: #0f1922;
  --cx-bad: #ff8a80;
  position: relative;
  color: var(--cx-text);
  background: var(--cx-bg);
  font: 15.5px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.cx-root *, .cx-root *::before, .cx-root *::after { box-sizing: border-box; }
.cx-root button { font: inherit; color: inherit; cursor: pointer; }
.cx-root input, .cx-root textarea { font: inherit; color: inherit; }
.cx-full { position: fixed; top: 0; left: 0; right: 0; height: var(--cx-h, 100dvh); }

.cx-ic { display: inline-grid; width: 22px; height: 22px; flex: none; }
.cx-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cx-muted { color: var(--cx-muted); }
.cx-small { font-size: 13.5px; }
.cx-center { text-align: center; }
.cx-error { color: var(--cx-bad); margin: 0; font-size: 14px; }
.cx-error:empty { display: none; }

/* ------------------------------------------------------------ buttons and fields */
.cx-btn { width: 100%; padding: 12px 16px; border: 0; border-radius: 10px; background: var(--cx-accent); color: #fff !important; font-weight: 600; font-size: 16px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.cx-btn:disabled { opacity: .55; }
.cx-btn-small { width: auto; padding: 9px 14px; font-size: 15px; flex: none; }
.cx-btn-ghost { background: transparent; border: 1px solid var(--cx-border); color: var(--cx-text) !important; font-weight: 500; }
.cx-icbtn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--cx-muted); display: grid; place-items: center; flex: none; }
.cx-icbtn:hover { background: #ffffff10; color: var(--cx-text); }
.cx-icbtn.cx-done { color: #7fd38a; }
.cx-root input:not([type=file]), .cx-root textarea { background: var(--cx-input); border: 1px solid var(--cx-border); border-radius: 10px; padding: 11px 12px; font-size: 16px; width: 100%; outline: none; }
.cx-root input:focus, .cx-root textarea:focus { border-color: var(--cx-accent); }
.cx-field { display: flex; flex-direction: column; gap: 5px; }
.cx-field > span { font-size: 13.5px; color: var(--cx-muted); }
.cx-field > small { font-size: 12.5px; color: var(--cx-muted); }
.cx-inline { display: flex; gap: 8px; align-items: center; }
.cx-inline input { flex: 1; min-width: 0; }
.cx-at { color: var(--cx-muted); font-size: 17px; margin-right: -2px; }

/* ------------------------------------------------------------ sign-in and join */
.cx-auth { height: 100%; overflow-y: auto; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.cx-auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.cx-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 4px; }
.cx-brand h1 { margin: 0; font-size: 24px; font-weight: 650; }
.cx-brand-ic { width: 76px; height: 76px; border-radius: 24px; background: linear-gradient(160deg, #56b1ea, #2a6fa6); display: grid; place-items: center; color: #fff; }
.cx-brand-ic .cx-ic { width: 40px; height: 40px; }
.cx-brand-ic .cx-ic svg { fill: #fff; stroke: #fff; }
.cx-form { display: flex; flex-direction: column; gap: 14px; }
.cx-lead { margin: 0; text-align: center; font-size: 17px; }
.cx-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: #ff8a8014; color: var(--cx-bad); font-size: 14px; }
.cx-auth p { margin: 0; }

/* ------------------------------------------------------------ layout */
.cx-app { display: flex; height: 100%; }
.cx-side { width: 100%; display: flex; flex-direction: column; position: relative; background: var(--cx-panel); min-width: 0; }
.cx-main { display: none; flex: 1; flex-direction: column; min-width: 0; background: var(--cx-chat-bg); background-image: radial-gradient(circle at 20% 10%, #16324a33, transparent 45%), radial-gradient(circle at 85% 90%, #1d3b3433, transparent 40%); }
.cx-show-main .cx-side { display: none; }
.cx-show-main .cx-main { display: flex; }
@media (min-width: 760px) {
  .cx-side { width: 340px; flex: none; display: flex !important; border-right: 1px solid var(--cx-border); }
  .cx-main { display: flex; }
  .cx-back-chat { display: none !important; }
}

.cx-bar { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; min-height: 56px; background: var(--cx-panel); border-bottom: 1px solid var(--cx-border); flex: none; }
.cx-bar-title { flex: 1; min-width: 0; }
.cx-bar-name { font-weight: 650; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-bar-sub { font-size: 13px; color: var(--cx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-bar-sub:empty { display: none; }
.cx-side .cx-bar-name { font-size: 19px; }

/* ------------------------------------------------------------ chat list */
.cx-list { flex: 1; overflow-y: auto; padding: 4px 0 90px; }
.cx-item { display: flex; gap: 12px; align-items: center; width: 100%; padding: 8px 12px; border: 0; background: none; text-align: left; }
.cx-item:hover { background: #ffffff08; }
.cx-item.cx-active { background: #2b5f8666; }
.cx-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-item-top, .cx-item-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cx-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-item-time { font-size: 12.5px; color: var(--cx-muted); flex: none; }
.cx-item-last { color: var(--cx-muted); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-unread .cx-item-last { color: var(--cx-text); }
.cx-unread .cx-item-time { color: var(--cx-accent-2); }
.cx-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cx-accent); flex: none; }
.cx-empty { padding: 40px 24px; text-align: center; color: var(--cx-muted); }
.cx-fab { position: absolute; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--cx-accent); color: #fff !important; display: grid; place-items: center; box-shadow: 0 6px 18px #0008; }

.cx-av { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 17px; letter-spacing: .3px; }
.cx-bar .cx-av { width: 38px; height: 38px; font-size: 14.5px; }
.cx-av-big { width: 64px; height: 64px; font-size: 24px; }

/* ------------------------------------------------------------ a chat */
.cx-placeholder { flex: 1; display: grid; place-items: center; color: var(--cx-muted); }
.cx-placeholder span, .cx-hello { background: #00000055; padding: 7px 14px; border-radius: 14px; }
.cx-msgs { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 6px; }
.cx-msgs-inner { max-width: 760px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.cx-loading { margin: auto; color: var(--cx-muted); }
.cx-hello { margin: auto; align-self: center; color: var(--cx-muted); }
.cx-older { align-self: center; margin: 6px 0 10px; border: 0; background: #00000066; border-radius: 14px; padding: 6px 14px; font-size: 14px; }
.cx-day { text-align: center; margin: 10px 0 8px; position: sticky; top: 0; z-index: 1; }
.cx-day span { background: #00000066; padding: 3px 11px; border-radius: 12px; font-size: 13px; color: #d6e0ea; }

.cx-row { display: flex; padding: 1px 10px; }
.cx-row:not(.cx-run) { margin-top: 6px; }
.cx-mine { justify-content: flex-end; }
.cx-failed { flex-direction: column; align-items: flex-end; }
.cx-bubble { max-width: min(80%, 540px); padding: 6px 10px 7px; border-radius: 16px; background: var(--cx-theirs); white-space: pre-wrap; overflow-wrap: anywhere; position: relative; box-shadow: 0 1px 1px #0004; }
.cx-mine .cx-bubble { background: var(--cx-mine); }
.cx-mine.cx-tail .cx-bubble { border-bottom-right-radius: 5px; }
.cx-theirs.cx-tail .cx-bubble { border-bottom-left-radius: 5px; }
.cx-text a { color: var(--cx-accent-2); }
.cx-mine .cx-text a { color: #bfe3ff; }
.cx-meta { float: right; position: relative; top: 5px; margin: 0 0 0 10px; display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: #a9bccd; white-space: nowrap; user-select: none; }
.cx-theirs .cx-meta { color: var(--cx-muted); }
.cx-tick .cx-ic { width: 14px; height: 14px; }
.cx-failed .cx-tick { color: var(--cx-bad); }
.cx-has-photo { padding: 3px 3px 6px; }
.cx-has-photo .cx-text { display: block; padding: 4px 7px 0; }
.cx-has-photo .cx-meta { margin-right: 7px; }
.cx-photo { display: block; width: 280px; max-width: 100%; max-height: 380px; min-height: 90px; object-fit: cover; border-radius: 13px; background: #00000033; cursor: zoom-in; }
.cx-photo-only { padding: 3px; }
.cx-photo-only .cx-meta { position: absolute; float: none; top: auto; right: 9px; bottom: 9px; margin: 0; padding: 1px 7px; border-radius: 10px; background: #00000099; color: #fff; }
.cx-retry { border: 0; background: none; color: var(--cx-bad); font-size: 12.5px; padding: 3px 4px 0; text-align: right; }

.cx-composer { flex: none; background: var(--cx-panel); border-top: 1px solid var(--cx-border); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
.cx-compose-row { display: flex; align-items: flex-end; gap: 6px; max-width: 760px; margin: 0 auto; }
.cx-root .cx-input { flex: 1; resize: none; border-radius: 21px; padding: 10px 15px; line-height: 1.35; max-height: 140px; background: var(--cx-input); }
.cx-send { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--cx-accent); color: #fff !important; display: grid; place-items: center; flex: none; transition: background .15s; }
.cx-send:disabled { background: transparent; color: var(--cx-muted) !important; cursor: default; }
.cx-preview { display: flex; align-items: flex-start; gap: 6px; padding: 4px 4px 8px; max-width: 760px; margin: 0 auto; }
.cx-preview img { height: 76px; border-radius: 9px; }

.cx-viewer { position: absolute; inset: 0; z-index: 30; background: #000000ee; display: grid; place-items: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.cx-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cx-viewer-close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; color: #fff; background: #ffffff1a; }

/* ------------------------------------------------------------ sheets and settings */
.cx-sheet-wrap { position: absolute; inset: 0; z-index: 20; background: #00000099; display: flex; align-items: flex-end; justify-content: center; }
.cx-sheet { width: 100%; max-width: 480px; max-height: 82%; overflow-y: auto; background: var(--cx-panel); border-radius: 18px 18px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 760px) { .cx-sheet-wrap { align-items: center; } .cx-sheet { border-radius: 18px; } }
.cx-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cx-sheet-head h2 { margin: 0; font-size: 18px; }
.cx-sub { margin: 14px 0 4px; font-size: 14px; font-weight: 650; color: var(--cx-accent-2); display: flex; align-items: center; gap: 6px; }
.cx-card .cx-sub { margin: 0; }
.cx-people { display: flex; flex-direction: column; }
.cx-person { display: flex; gap: 12px; align-items: center; padding: 8px 6px; border: 0; border-radius: 10px; background: none; text-align: left; }
.cx-person:hover { background: #ffffff0a; }
.cx-person > span:last-child { display: flex; flex-direction: column; }
.cx-person small { color: var(--cx-muted); }

.cx-page { flex: 1; overflow-y: auto; padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 640px; margin: 0 auto; }
.cx-card { background: var(--cx-panel); border: 1px solid var(--cx-border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cx-card p { margin: 0; }
.cx-profile { display: flex; gap: 14px; align-items: center; }
.cx-profile-name { font-size: 18px; font-weight: 650; }
.cx-invites { display: flex; flex-direction: column; gap: 8px; }
.cx-invite { border: 1px solid var(--cx-border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.cx-invite-used { opacity: .8; }
.cx-link { font: 12.5px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--cx-accent-2); word-break: break-all; }
.cx-invite-actions { display: flex; gap: 2px; margin: -4px -8px -6px; }

.cx-root ::-webkit-scrollbar { width: 8px; }
.cx-root ::-webkit-scrollbar-thumb { background: #ffffff1f; border-radius: 4px; }

html, body { margin: 0; background: #0f1720; }