:root {
  --ink: #172521;
  --muted: #6e7d78;
  --line: #dfe9e6;
  --teal: #075e54;
  --teal-dark: #064b44;
  --teal-soft: #e1f1ed;
  --bg: #edf3f1;
  --white: #fff;
  --font-scale: 1;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #e5efec;
  --muted: #9cafaa;
  --line: #2e4540;
  --teal: #168674;
  --teal-dark: #65c6b2;
  --teal-soft: #183a32;
  --bg: #101916;
  --white: #18231f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: linear-gradient(145deg, #d7e5e1, #f0f5f3); }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.app-shell { height: 100%; max-width: 1100px; margin: auto; background: var(--white); box-shadow: 0 16px 60px #153d3520; }
.auth-screen { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 22px; background: radial-gradient(circle at 50% 16%, #edf8f5, #fff 45%); }
.brand-mark { width: 82px; height: 82px; display: grid; place-items: center; filter: drop-shadow(0 14px 18px #075e5438); }
.brand-mark img { width: 82px; height: 82px; display: block; }
.auth-screen > h1 { font-size: 34px; letter-spacing: -.8px; margin: 20px 0 5px; }
.auth-lead { color: var(--muted); margin: 0 0 28px; text-align: center; }
.auth-card { width: min(100%, 390px); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; background: #eef2f4; border-radius: 13px; margin-bottom: 22px; }
.tab { border: 0; border-radius: 10px; padding: 11px; color: var(--muted); background: transparent; font-weight: 650; cursor: pointer; }
.tab.active { color: var(--teal-dark); background: #fff; box-shadow: 0 2px 8px #23383c18; }
label { display: block; margin: 14px 0 7px; color: #43515e; font-size: 13px; font-weight: 650; }
input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid #d8e0e5; border-radius: 12px; outline: none; color: var(--ink); background: #fff; transition: .2s; }
input:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px #075e541c; }
.form-error { min-height: 18px; margin: 9px 2px 0; color: #d14343; font-size: 13px; }
.primary-button { width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: var(--teal); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px #075e542c; }
.primary-button:disabled { opacity: .65; cursor: wait; }

.messenger { height: 100%; display: grid; grid-template-columns: 350px 1fr; overflow: hidden; }
.channel-list { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #fff; }
.list-header { height: 76px; padding: 15px 18px 10px; display: flex; align-items: center; justify-content: space-between; }
.header-actions { display: flex; align-items: center; gap: 2px; }
.eyebrow { color: var(--teal); font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800; }
.list-header h2, .chat-header h2 { margin: 1px 0 0; font-size: 22px; letter-spacing: -.35px; }
.icon-button { width: 40px; height: 40px; padding: 9px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.icon-button:hover { background: #f0f4f5; }
.icon-button svg { width: 100%; fill: #697885; }
.moon-icon { display: none; }
:root[data-theme="dark"] .sun-icon { display: none; }
:root[data-theme="dark"] .moon-icon { display: block; }
.profile-row { margin: 0 14px 12px; padding: 10px; border-radius: 13px; background: #f1f7f5; display: flex; align-items: center; gap: 10px; color: #43515e; font-size: 14px; font-weight: 650; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #299b85, #075e54); color: #fff; text-transform: uppercase; }
.status-dot { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #a8b2b9; box-shadow: 0 0 0 3px #a8b2b920; }
.status-dot.online { background: #26a269; box-shadow: 0 0 0 3px #26a26920; }
.text-size-row { margin: -4px 16px 7px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: calc(12px * var(--font-scale)); }
.text-size-controls { display: flex; align-items: center; gap: 5px; }
.text-size-controls button { min-width: 35px; height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--teal-dark); background: #fff; font-weight: 750; cursor: pointer; }
.text-size-controls button:disabled { color: #aeb7bc; cursor: default; }
.text-size-controls span { width: 39px; text-align: center; font-size: 11px; }
.channels { flex: 1; overflow-y: auto; padding: 4px 8px; }
.channel-item { width: 100%; border: 0; display: grid; grid-template-columns: 46px 1fr auto; gap: 11px; align-items: center; padding: 11px 10px; border-radius: 13px; text-align: left; background: transparent; cursor: pointer; }
.channel-item:hover { background: #f3f8f6; }
.channel-item.active { background: var(--teal-soft); }
.channel-hash { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: #e3eeeb; color: var(--teal); font-size: 22px; font-weight: 500; }
.channel-item.active .channel-hash { color: #fff; background: var(--teal); }
.channel-copy { min-width: 0; }
.channel-name { display: block; font-size: calc(15px * var(--font-scale)); font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.channel-preview { display: block; margin-top: 4px; color: var(--muted); font-size: calc(13px * var(--font-scale)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.channel-time { align-self: start; padding-top: 3px; color: #98a4ad; font-size: 11px; }
.empty-state { flex: 1; padding: 30px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: var(--muted); }
.empty-state strong { color: #46545f; margin: 12px 0 5px; }
.empty-state span:last-child { max-width: 240px; font-size: 13px; line-height: 1.5; }
.empty-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; background: var(--teal-soft); color: var(--teal); font-size: 26px; }
.join-button { margin: 10px 14px max(14px, env(safe-area-inset-bottom)); min-height: 48px; border: 0; border-radius: 13px; background: var(--teal); color: #fff; font-weight: 700; cursor: pointer; }
.join-button span { margin-right: 5px; font-size: 21px; font-weight: 400; vertical-align: -1px; }

.chat { min-width: 0; display: flex; flex-direction: column; background-color: #e5eeeb; background-image: radial-gradient(#8eaaa336 1px, transparent 1px); background-size: 18px 18px; position: relative; }
.chat-header { height: 70px; flex: 0 0 70px; padding: 9px 18px; display: flex; align-items: center; gap: 12px; background: #fff; box-shadow: 0 1px 6px #20393415; z-index: 2; }
.chat-header h2 { font-size: 17px; }
.chat-heading { min-width: 0; }
.chat-heading h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(17px * var(--font-scale)); }
.leave-channel { margin-left: auto; flex: 0 0 40px; }
.leave-channel svg { fill: #d15050; }
.channel-symbol { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: #fff; font-size: 21px; }
.online-label { color: var(--muted); font-size: 12px; }
.back-button { display: none; }
.messages { flex: 1; overflow-y: auto; padding: 18px max(18px, calc((100% - 680px) / 2)); scroll-behavior: smooth; }
.message-row { display: flex; margin: 4px 0; }
.message-row.mine { justify-content: flex-end; }
.message { max-width: min(78%, 520px); padding: 8px 10px 6px; border-radius: 6px 15px 15px 15px; background: #fff; box-shadow: 0 1px 2px #263d3920; overflow-wrap: anywhere; }
.mine .message { background: #d6eee7; border-radius: 15px 6px 15px 15px; }
.message-author { margin-bottom: 3px; color: var(--teal); font-size: calc(12px * var(--font-scale)); font-weight: 750; }
.message-text { white-space: pre-wrap; line-height: 1.38; font-size: calc(14px * var(--font-scale)); }
.message-footer { min-height: 15px; margin-top: 3px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.message-time, .edited-label { color: #748782; font-size: calc(10px * var(--font-scale)); }
.message-actions { display: flex; gap: 2px; margin-right: auto; opacity: .35; transition: opacity .15s; }
.message:hover .message-actions, .message:focus-within .message-actions { opacity: 1; }
.message-action { width: 26px; height: 24px; display: grid; place-items: center; padding: 4px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.message-action:hover { background: #ffffff9c; }
.message-action svg { width: 14px; height: 14px; fill: #5f766f; }
.message-action.delete svg { fill: #bd5555; }
.day-divider { width: max-content; margin: 12px auto; padding: 5px 11px; border-radius: 12px; background: #58756eca; color: #fff; font-size: 11px; }
.empty-messages { position: absolute; inset: 70px 0 75px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #637771; pointer-events: none; }
.empty-messages > span { width: 56px; height: 56px; margin-bottom: 13px; display: grid; place-items: center; border-radius: 18px; background: #ffffffc9; color: var(--teal); font-size: 26px; }
.empty-messages small { margin-top: 5px; }
.composer { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: end; gap: 9px; padding: 9px max(12px, calc((100% - 700px) / 2)) max(9px, env(safe-area-inset-bottom)); background: #f8fbfa; border-top: 1px solid #d7e4e0; }
.composer textarea { width: 100%; min-height: 44px; max-height: 120px; resize: none; padding: 11px 15px; border: 1px solid #d4e1dd; border-radius: 22px; outline: none; line-height: 1.4; font-size: calc(14px * var(--font-scale)); }
.composer button { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; background: var(--teal); cursor: pointer; }
.composer button svg { width: 23px; fill: #fff; transform: translate(1px, 2px); }
.edit-banner { grid-column: 1 / -1; min-width: 0; height: 48px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 32px; align-items: center; gap: 8px; padding: 4px 4px 4px 9px; border-left: 3px solid var(--teal); border-radius: 6px; background: #e4f2ee; }
.edit-banner-icon { width: 30px; height: 30px; display: grid; place-items: center; }
.edit-banner-icon svg { width: 19px; fill: var(--teal); }
.edit-banner strong, .edit-banner small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.edit-banner strong { color: var(--teal-dark); font-size: calc(12px * var(--font-scale)); }
.edit-banner small { margin-top: 2px; color: var(--muted); font-size: calc(11px * var(--font-scale)); }
.composer .edit-banner > button { width: 32px; height: 32px; border-radius: 50%; color: #657872; background: transparent; font-size: 25px; line-height: 1; }
.composer .edit-banner > button:hover { background: #d5e8e2; }

.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; border: 0; background: #10201f99; backdrop-filter: blur(3px); }
.modal-card { width: min(100%, 390px); padding: 27px 24px 24px; border-radius: 20px; background: #fff; z-index: 1; position: relative; box-shadow: 0 24px 80px #0004; }
.modal-card h2 { margin: 11px 0 5px; text-align: center; }
.modal-card > p { margin: 0 0 18px; color: var(--muted); text-align: center; line-height: 1.45; font-size: 14px; }
.modal-close { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border: 0; background: transparent; color: #788690; font-size: 28px; cursor: pointer; }
.modal-symbol { width: 52px; height: 52px; margin: auto; display: grid; place-items: center; border-radius: 16px; background: var(--teal-soft); color: var(--teal); font-size: 25px; }
.prefixed-input { position: relative; }
.prefixed-input span { position: absolute; left: 15px; top: 13px; color: var(--teal); font-size: 20px; }
.prefixed-input input { padding-left: 34px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 10px; background: #17212bec; color: #fff; font-size: 13px; opacity: 0; transform: translate(-50%, 15px); pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

:root[data-theme="dark"] body { background: linear-gradient(145deg, #0b1210, #17231f); }
:root[data-theme="dark"] .app-shell { box-shadow: 0 16px 60px #0007; }
:root[data-theme="dark"] .auth-screen { background: radial-gradient(circle at 50% 16%, #18342d, #101916 48%); }
:root[data-theme="dark"] .auth-tabs { background: #101916; }
:root[data-theme="dark"] .tab.active { background: #23352f; color: #65c6b2; box-shadow: 0 2px 8px #0005; }
:root[data-theme="dark"] label { color: #b8cac5; }
:root[data-theme="dark"] input { border-color: #304b43; background: #111c18; color: var(--ink); }
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #70857f; }
:root[data-theme="dark"] .channel-list { background: #18231f; }
:root[data-theme="dark"] .icon-button:hover { background: #25352f; }
:root[data-theme="dark"] .icon-button svg { fill: #a8bbb5; }
:root[data-theme="dark"] .profile-row { background: #21312b; color: #c2d1cd; }
:root[data-theme="dark"] .text-size-controls button { border-color: #344f47; background: #1d2b26; color: #65c6b2; }
:root[data-theme="dark"] .channel-item:hover { background: #21322c; }
:root[data-theme="dark"] .channel-hash { background: #263a34; }
:root[data-theme="dark"] .chat { background-color: #111b18; background-image: radial-gradient(#51786d38 1px, transparent 1px); }
:root[data-theme="dark"] .chat-header { background: #18231f; box-shadow: 0 1px 6px #0005; }
:root[data-theme="dark"] .leave-channel svg { fill: #e1746f; }
:root[data-theme="dark"] .message { background: #22312c; box-shadow: 0 1px 2px #0005; }
:root[data-theme="dark"] .mine .message { background: #16483e; }
:root[data-theme="dark"] .message-time, :root[data-theme="dark"] .edited-label { color: #9db2ac; }
:root[data-theme="dark"] .message-action:hover { background: #ffffff12; }
:root[data-theme="dark"] .message-action svg { fill: #acc0ba; }
:root[data-theme="dark"] .day-divider { background: #3d6258dd; }
:root[data-theme="dark"] .empty-messages > span { background: #22312cdb; }
:root[data-theme="dark"] .composer { background: #18231f; border-color: #2e4540; }
:root[data-theme="dark"] .composer textarea { border-color: #324c44; background: #101916; color: var(--ink); }
:root[data-theme="dark"] .edit-banner { background: #183a32; }
:root[data-theme="dark"] .composer .edit-banner > button { color: #abc0ba; }
:root[data-theme="dark"] .composer .edit-banner > button:hover { background: #225044; }
:root[data-theme="dark"] .modal-backdrop { background: #070d0bc7; }
:root[data-theme="dark"] .modal-card { background: #18231f; }
:root[data-theme="dark"] .modal-close { color: #a4b7b1; }
:root[data-theme="dark"] .toast { background: #e5efec; color: #172521; }

@media (max-width: 680px) {
  body { background: #fff; }
  :root[data-theme="dark"] body { background: #101916; }
  .app-shell { width: 100%; max-width: none; }
  .messenger { display: block; position: relative; }
  .channel-list, .chat { position: absolute; inset: 0; width: 100%; border: 0; }
  .hidden-mobile { display: none !important; }
  .back-button { display: block; margin-left: -8px; }
  .chat-header { padding-left: 10px; }
  .messages { padding: 14px 10px; }
  .message { max-width: 84%; }
  .message-actions { opacity: .72; }
  .auth-screen { justify-content: flex-start; padding-top: max(54px, 10vh); }
  .modal { align-items: end; padding: 0; }
  .modal-card { width: 100%; max-width: none; padding-bottom: max(24px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
}