:root {
  --green-950: #054b45;
  --green-900: #075e54;
  --green-700: #0b7d6e;
  --green-600: #128c7e;
  --green-500: #20a98f;
  --mint: #d9fdd3;
  --lime: #25d366;
  --ink: #111b21;
  --muted: #667781;
  --line: #e6e9eb;
  --surface: #ffffff;
  --wash: #f0f2f5;
  --shadow: 0 24px 70px rgba(9, 40, 36, .18);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-height: 100dvh;
  --app-top: 0px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--wash);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; background: var(--wash); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.desktop-closed {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding: 32px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 110%, rgba(37, 211, 102, .15), transparent 38%),
    linear-gradient(145deg, #032f2c, #075e54 55%, #0b806f);
}
.desktop-closed-card { max-width: 520px; text-align: center; }
.desktop-closed-icon { display: grid; width: 88px; height: 88px; place-items: center; margin: 0 auto 28px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 28px; background: rgba(255, 255, 255, .12); box-shadow: 0 22px 54px rgba(0, 0, 0, .18); backdrop-filter: blur(16px); }
.desktop-closed-icon svg { width: 43px; height: 43px; }
.desktop-closed h1 { margin: 0; font-size: clamp(36px, 5vw, 58px); line-height: 1.03; letter-spacing: -.045em; }
.desktop-closed p { margin: 18px 0 0; color: rgba(255, 255, 255, .72); font-size: 17px; line-height: 1.6; }
html.desktop-device .desktop-closed { display: grid; }
html.desktop-device .welcome,
html.desktop-device .screen-lock,
html.desktop-device .chat-app,
html.desktop-device .modal,
html.desktop-device .toast { display: none !important; }

.welcome {
  position: relative;
  display: grid;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  padding: calc(28px + var(--safe-top)) 24px calc(28px + var(--safe-bottom));
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 115%, rgba(37, 211, 102, .17), transparent 38%),
    linear-gradient(145deg, #032f2c 0%, #075e54 48%, #0b806f 100%);
}

.welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .12;
  background-image: radial-gradient(rgba(255, 255, 255, .85) .7px, transparent .7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.welcome-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); }
.welcome-orb-one { width: 420px; height: 420px; top: -220px; right: -150px; background: rgba(45, 233, 143, .16); }
.welcome-orb-two { width: 360px; height: 360px; bottom: -210px; left: -120px; background: rgba(255, 255, 255, .07); }

.welcome-card {
  width: 100%;
  max-width: 460px;
  min-width: 0;
  text-align: center;
  color: #fff;
  animation: welcome-in .55s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes welcome-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, var(--green-500), var(--green-900));
  box-shadow: 0 8px 20px rgba(7, 94, 84, .2);
}
.brand-mark svg { width: 24px; height: 24px; stroke-width: 2.2; }
.brand-mark-large {
  width: 90px;
  height: 90px;
  margin: 0 auto 30px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 29px;
  background: rgba(255, 255, 255, .13);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .24);
  backdrop-filter: blur(18px);
}
.brand-mark-large svg { width: 48px; height: 48px; stroke-width: 1.75; }
.welcome h1 { max-width: 420px; margin: 0 auto; font-size: clamp(38px, 9vw, 58px); line-height: .99; letter-spacing: -.045em; }
.welcome-copy { max-width: 360px; margin: 22px auto 32px; color: rgba(255, 255, 255, .74); font-size: 16px; line-height: 1.65; }
.start-button {
  display: flex;
  width: 100%;
  max-width: 330px;
  min-height: 62px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto;
  padding: 0 25px;
  border-radius: 20px;
  color: var(--green-950);
  background: #fff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
  cursor: pointer;
  font-size: 16px;
  font-weight: 850;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.start-button svg { width: 21px; height: 21px; transition: transform .18s ease; }
.start-button:hover { transform: translateY(-2px); box-shadow: 0 22px 52px rgba(0, 0, 0, .25); }
.start-button:hover svg { transform: translateX(3px); }
.start-button:active { transform: translateY(0) scale(.985); }
.start-button:disabled { cursor: wait; opacity: .68; }
.welcome-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 24px 0 0; color: rgba(255, 255, 255, .54); font-size: 12px; }
.welcome-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(37, 211, 102, .14); }

.screen-lock {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  padding: calc(28px + var(--safe-top)) 24px calc(28px + var(--safe-bottom));
  color: #fff;
  isolation: isolate;
  background:
    radial-gradient(circle at 48% 112%, rgba(37, 211, 102, .2), transparent 38%),
    linear-gradient(145deg, #032f2c 0%, #075e54 50%, #0b806f 100%);
}
.screen-lock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .1;
  background-image: radial-gradient(rgba(255, 255, 255, .9) .7px, transparent .7px);
  background-size: 22px 22px;
}
.screen-lock-orb { position: absolute; z-index: -1; border-radius: 50%; }
.screen-lock-orb-one { width: 350px; height: 350px; top: -190px; right: -120px; background: rgba(45, 233, 143, .14); }
.screen-lock-orb-two { width: 310px; height: 310px; bottom: -190px; left: -110px; background: rgba(255, 255, 255, .07); }
.screen-lock-card { width: 100%; max-width: 390px; text-align: center; animation: welcome-in .35s ease both; }
.screen-lock-icon {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  margin: 0 auto 25px;
  border: 1px solid rgba(255, 255, 255, .27);
  border-radius: 27px;
  background: rgba(255, 255, 255, .13);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px);
}
.screen-lock-icon svg { width: 39px; height: 39px; }
.screen-lock h1 { margin: 0; font-size: 33px; line-height: 1.05; letter-spacing: -.035em; }
.screen-lock-card > p { max-width: 310px; margin: 14px auto 23px; color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.55; }
.screen-lock-user {
  display: flex;
  width: min(100%, 330px);
  align-items: center;
  gap: 12px;
  margin: 0 auto 17px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  text-align: left;
  background: rgba(255, 255, 255, .09);
}
.screen-lock-avatar { width: 43px; height: 43px; flex: 0 0 auto; font-size: 13px; }
.screen-lock-user div { min-width: 0; }
.screen-lock-user strong, .screen-lock-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-lock-user strong { font-size: 14px; }
.screen-lock-user small { margin-top: 4px; color: rgba(255, 255, 255, .61); font-size: 10px; }
.screen-unlock-button {
  display: flex;
  width: min(100%, 330px);
  min-height: 60px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  border-radius: 20px;
  color: var(--green-950);
  background: #fff;
  box-shadow: 0 17px 42px rgba(0, 0, 0, .21);
  cursor: pointer;
  font-weight: 850;
}
.screen-unlock-button svg { width: 19px; height: 19px; }
.screen-unlock-button:active { transform: scale(.985); }
.screen-unlock-button:disabled { cursor: wait; opacity: .62; }
.screen-switch-button { margin-top: 18px; padding: 8px 12px; color: rgba(255, 255, 255, .7); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.screen-switch-button:active { color: #fff; }

.chat-app {
  position: fixed;
  top: var(--app-top);
  right: 0;
  left: 0;
  display: grid;
  width: 100%;
  height: var(--app-height);
  grid-template-columns: minmax(320px, 32%) minmax(0, 1fr);
  padding-top: var(--safe-top);
  background: var(--surface);
  animation: app-in .3s ease both;
}
@keyframes app-in { from { opacity: 0; } to { opacity: 1; } }

.sidebar {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: #fff;
}
.sidebar-head {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border-bottom: 1px solid #eef0f1;
  background: linear-gradient(180deg, #fff, #fbfcfc);
}
.brand-lockup { display: flex; min-width: 0; align-items: center; gap: 11px; }
.brand-lockup > div:last-child { display: flex; min-width: 0; flex-direction: column; }
.brand-lockup strong { color: var(--green-900); font-size: 15px; font-weight: 900; letter-spacing: .08em; }
.brand-lockup span { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 650; white-space: nowrap; }
.sidebar-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 5px; }

.header-close-button {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  color: #66777d;
  background: #f0f2f5;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}
.header-close-button:hover { color: #9f2530; background: #fbeaec; }
.header-close-button:active { transform: scale(.94); }
.header-close-button svg { width: 18px; height: 18px; stroke-width: 2.2; }

.me-button {
  display: flex;
  min-width: 0;
  max-width: 190px;
  align-items: center;
  gap: 9px;
  padding: 5px 6px;
  border-radius: 14px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.me-button:hover { background: var(--wash); }
.me-button > svg { width: 15px; height: 15px; flex: 0 0 auto; color: #8a979d; }
.me-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.me-copy strong { overflow: hidden; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.me-copy small { display: block; overflow: hidden; margin-top: 2px; color: #7d8a90; font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.connection-dot { width: 8px; height: 8px; flex: 0 0 auto; border: 2px solid #e4e8e9; border-radius: 50%; background: #a9b2b7; }
.connection-dot.is-online { border-color: #dff8e8; background: var(--lime); }

.avatar {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green-600);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -.02em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.avatar-small { width: 34px; height: 34px; font-size: 11px; }

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  margin: 14px 18px 9px;
}
.search-box svg { position: absolute; left: 14px; width: 17px; height: 17px; color: #7d8b92; pointer-events: none; }
.search-box input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 42px;
  border: 1px solid transparent;
  border-radius: 14px;
  outline: 0;
  color: var(--ink);
  background: #f0f2f5;
  font-size: 13px;
  transition: border-color .15s, background .15s;
}
.search-box input:focus { border-color: rgba(18, 140, 126, .32); background: #fff; box-shadow: 0 0 0 3px rgba(18, 140, 126, .08); }
.list-heading { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 8px; color: #93a0a6; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.list-heading span:last-child { letter-spacing: 0; text-transform: none; }
.user-list { min-height: 0; flex: 1; overflow: auto; padding: 0 8px 24px; scrollbar-width: thin; scrollbar-color: #cfd5d8 transparent; }

.user-row {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 11px;
  border-radius: 15px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .15s, transform .15s;
}
.user-row:hover, .user-row.is-active { background: #f2f8f6; }
.user-row.is-blocked .avatar { filter: grayscale(.75); opacity: .72; }
.user-row:active { transform: scale(.99); }
.user-avatar-wrap { position: relative; }
.presence-dot { position: absolute; right: -1px; bottom: 0; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #b4bec3; }
.presence-dot.is-online { background: var(--lime); }
.user-copy { min-width: 0; }
.user-copy strong { display: block; overflow: hidden; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.user-copy span { display: block; overflow: hidden; margin-top: 4px; color: #87949a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.user-copy span.is-online { color: var(--green-700); font-weight: 700; }
.unread-badge { display: grid; min-width: 21px; height: 21px; place-items: center; padding: 0 6px; border-radius: 11px; color: #fff; background: var(--lime); font-size: 10px; font-weight: 900; }
.list-empty { display: grid; place-items: center; min-height: 220px; padding: 24px; color: #7b898f; text-align: center; }
.list-empty svg { width: 34px; height: 34px; margin-bottom: 13px; color: #a4b0b5; }
.list-empty strong { color: #4d5c63; font-size: 13px; }
.list-empty span { max-width: 240px; margin-top: 7px; font-size: 11px; line-height: 1.55; }

.conversation { position: relative; min-width: 0; min-height: 0; background: #efeae2; }
.conversation::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .34;
  background-image:
    radial-gradient(circle at 8px 8px, rgba(92, 87, 79, .15) 1px, transparent 1.5px),
    radial-gradient(circle at 25px 28px, rgba(92, 87, 79, .1) 1px, transparent 1.5px);
  background-size: 42px 42px;
  pointer-events: none;
}
.conversation-empty { position: relative; z-index: 1; display: grid; height: 100%; place-content: center; justify-items: center; padding: 30px; text-align: center; }
.empty-art { position: relative; display: grid; width: 126px; height: 126px; place-items: center; margin-bottom: 24px; border-radius: 42px; color: #fff; background: linear-gradient(145deg, #128c7e, #075e54); box-shadow: 0 20px 50px rgba(7, 94, 84, .22); }
.empty-art > svg { width: 58px; height: 58px; stroke-width: 1.5; }
.empty-bubble { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.empty-bubble-one { width: 38px; height: 38px; top: -12px; right: -18px; }
.empty-bubble-two { width: 22px; height: 22px; bottom: 5px; left: -11px; }
.conversation-empty h2 { margin: 0; color: #314149; font-size: 22px; letter-spacing: -.03em; }
.conversation-empty p { max-width: 360px; margin: 10px 0 0; color: #708087; font-size: 13px; line-height: 1.6; }
.conversation-active { position: relative; z-index: 1; display: grid; height: 100%; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr) auto; }

.conversation-head {
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px);
}
.back-button { display: none !important; }
.peer-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.peer-copy strong { overflow: hidden; font-size: 14px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.peer-copy span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.peer-copy span.is-online { color: var(--green-700); font-weight: 700; }
.secure-label { padding: 5px 9px; border-radius: 8px; color: var(--green-900); background: #e7f5f1; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.block-button { width: 38px; height: 38px; color: #7b898f; background: #f0f2f5; }
.block-button.is-active { color: #a12632; background: #fbeaec; }
.conversation-close-button { margin-left: -4px; background: rgba(240, 242, 245, .94); }
.retention-strip { z-index: 2; padding: 5px 14px; color: #78858a; background: rgba(255, 255, 255, .96); border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: 9px; font-weight: 750; line-height: 1.35; text-align: center; }

.messages { min-height: 0; overflow: auto; padding: 24px max(4%, 24px) 18px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(84, 96, 92, .28) transparent; }
.day-separator { display: table; margin: 5px auto 18px; padding: 6px 11px; border-radius: 9px; color: #647176; background: rgba(255, 255, 255, .85); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); font-size: 10px; font-weight: 750; }
.message-row { display: flex; margin: 4px 0; animation: message-in .18s ease both; }
.message-row.is-me { justify-content: flex-end; }
@keyframes message-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.message-bubble { position: relative; max-width: min(660px, 76%); min-width: 86px; padding: 8px 9px 6px; border-radius: 10px; color: var(--ink); background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.message-row.is-me .message-bubble { border-top-right-radius: 3px; background: var(--mint); }
.message-row:not(.is-me) .message-bubble { border-top-left-radius: 3px; }
.message-text { min-width: 0; white-space: pre-wrap; }
.message-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 14px; margin: 2px 0 -1px 16px; color: #7c8b90; font-size: 9px; line-height: 1; white-space: nowrap; }
.message-meta svg { width: 15px; height: 15px; }
.message-meta svg.is-read { color: #53bdeb; }
.attachment { display: block; min-width: 210px; margin-bottom: 4px; }
.attachment-image { position: relative; display: block; overflow: hidden; width: min(380px, 52vw); border: 0; border-radius: 8px; background: #d6dcdd; cursor: pointer; }
.attachment-image img { display: block; width: 100%; max-height: 330px; object-fit: cover; }
.attachment-image img:not([src]) { min-height: 150px; background: linear-gradient(110deg, #d6dcdd 30%, #eef1f1 50%, #d6dcdd 70%); background-size: 240% 100%; animation: attachment-loading 1.3s linear infinite; }
.attachment.is-unavailable { opacity: .55; pointer-events: none; }
@keyframes attachment-loading { to { background-position-x: -240%; } }
.attachment-file { display: flex; min-height: 62px; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; color: #304149; background: rgba(255, 255, 255, .6); cursor: pointer; text-align: left; }
.attachment-file > svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--green-700); }
.attachment-file-copy { min-width: 0; flex: 1; }
.attachment-file-copy strong { display: block; overflow: hidden; max-width: 240px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-file-copy span { display: block; margin-top: 4px; color: #7b898f; font-size: 9px; }
.attachment-file .download-icon { width: 17px; height: 17px; color: #718087; }
.attachment-audio { min-width: min(330px, 65vw); }
.attachment-audio audio { display: block; width: 100%; height: 42px; }

.composer {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 7px;
  padding: 10px max(2%, 14px) calc(10px + var(--safe-bottom));
  border-top: 1px solid rgba(0, 0, 0, .06);
  background: #f0f2f5;
}
.composer textarea {
  width: 100%;
  min-height: 44px;
  max-height: 120px;
  resize: none;
  padding: 12px 15px;
  border: 1px solid transparent;
  border-radius: 22px;
  outline: 0;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  line-height: 18px;
  scrollbar-width: none;
}
.composer textarea:focus { border-color: rgba(18, 140, 126, .2); }
.composer.is-unavailable { grid-template-columns: minmax(0, 1fr); }
.composer.is-unavailable .attach-button,
.composer.is-unavailable .mic-button,
.composer.is-unavailable .send-button { display: none !important; }
.composer.is-unavailable textarea { color: #7d898e; background: #e4e7e8; text-align: center; }
.icon-button, .send-button {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s, transform .15s, color .15s;
}
.icon-button { color: #667781; background: transparent; }
.icon-button:hover { color: var(--green-700); background: rgba(18, 140, 126, .08); }
.icon-button:disabled { cursor: default; opacity: .5; }
.icon-button:active, .send-button:active { transform: scale(.94); }
.attach-button.is-open { color: var(--green-700); transform: rotate(45deg); }
.send-button { color: #fff; background: var(--green-600); box-shadow: 0 7px 16px rgba(18, 140, 126, .2); }
.send-button:hover { background: var(--green-900); }
.send-button:disabled { opacity: .5; cursor: default; }
.mic-button { display: none; }
.composer.is-empty .mic-button { display: grid; }
.composer.is-empty .send-button { display: none; }

.attach-menu {
  position: absolute;
  z-index: 8;
  left: max(2%, 14px);
  bottom: calc(72px + var(--safe-bottom));
  display: grid;
  min-width: 210px;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(16, 35, 32, .18);
  animation: menu-in .16s ease both;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.attach-menu button { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 12px; color: #28373d; background: transparent; cursor: pointer; font-size: 12px; font-weight: 750; text-align: left; }
.attach-menu button:hover { background: #f2f5f5; }
.attach-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #fff; }
.attach-icon svg { width: 18px; height: 18px; }
.attach-image { background: #7c3aed; }
.attach-document { background: #2563eb; }
.attach-audio { background: #db2777; }

.recording-panel {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: 65px;
  align-items: center;
  gap: 12px;
  padding: 10px max(2%, 16px) calc(10px + var(--safe-bottom));
  border-top: 1px solid #e4e7e8;
  background: #fff;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
}
.recording-pulse { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); animation: record-pulse 1.5s infinite; }
.recording-panel.is-ready .recording-pulse { background: var(--green-600); animation: none; }
@keyframes record-pulse { 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.recording-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.recording-copy strong { font-size: 12px; }
.recording-copy span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.recording-panel button { min-height: 38px; padding: 0 12px; border-radius: 12px; cursor: pointer; font-size: 11px; font-weight: 800; }
.recording-cancel { color: #7b858a; background: #f0f2f5; }
.recording-stop { color: #fff; background: #ef4444; }
.recording-send { display: grid; width: 40px; place-items: center; padding: 0 !important; color: #fff; background: var(--green-600); }
.recording-send svg { width: 18px; height: 18px; }

.modal { position: fixed; z-index: 100; top: var(--app-top); right: 0; left: 0; display: grid; width: 100%; height: var(--app-height); place-items: center; overflow: auto; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(5, 21, 20, .62); backdrop-filter: blur(6px); }
.profile-dialog,
.email-dialog {
  position: relative;
  z-index: 1;
  width: min(390px, 100%);
  padding: 30px;
  border-radius: 25px;
  background: #fff;
  box-shadow: var(--shadow);
  animation: dialog-in .22s ease both;
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-close { position: absolute; top: 14px; right: 14px; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #718087; background: #f0f2f5; cursor: pointer; }
.modal-close svg { width: 17px; height: 17px; }
.profile-dialog h2,
.email-dialog h2 { margin: 20px 0 7px; font-size: 22px; letter-spacing: -.03em; }
.profile-dialog > p,
.email-dialog > p { margin: 0 0 22px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.profile-dialog form,
.email-dialog form { display: grid; gap: 9px; }
.profile-dialog label,
.email-dialog label { color: #4d5b61; font-size: 11px; font-weight: 800; }
.profile-dialog input,
.email-dialog input { height: 48px; padding: 0 14px; border: 1px solid #d8dddf; border-radius: 13px; outline: 0; }
.profile-dialog input:focus,
.email-dialog input:focus { border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(18, 140, 126, .1); }
.profile-dialog form button,
.email-dialog form button { height: 48px; margin-top: 6px; border-radius: 13px; color: #fff; background: var(--green-600); cursor: pointer; font-weight: 850; }
.email-dialog { width: min(420px, 100%); }
.email-dialog form button { display: flex; align-items: center; justify-content: center; gap: 10px; }
.email-dialog form button svg { width: 18px; height: 18px; }
.email-dialog form button:disabled { cursor: wait; opacity: .65; }
.email-dialog form .secondary-form-button { height: 38px; margin-top: 0; color: #637178; background: transparent; font-size: 11px; }
.email-dialog form .secondary-form-button:hover { color: var(--green-700); background: #f2f8f6; }
.profile-code-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid #edf0f1; }
.email-dialog > small { display: block; margin-top: 16px; color: #8a9895; font-size: 10px; line-height: 1.5; text-align: center; }

.preview-modal { padding: max(14px, var(--safe-top)) 14px max(14px, var(--safe-bottom)); }
.preview-dialog { position: relative; z-index: 1; display: grid; width: min(1000px, 100%); height: min(820px, 94dvh); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.preview-dialog > header { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--line); }
.preview-dialog > header strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.preview-dialog > header div { display: flex; gap: 7px; }
.preview-dialog > header a, .preview-dialog > header button { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #627178; background: #f0f2f5; cursor: pointer; }
.preview-dialog > header svg { width: 18px; height: 18px; }
.preview-body { display: grid; min-height: 0; place-items: center; overflow: auto; background: #e8ecee; }
.preview-body img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.preview-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.preview-fallback { display: grid; place-items: center; padding: 30px; color: #617078; text-align: center; }
.preview-fallback svg { width: 48px; height: 48px; margin-bottom: 14px; color: var(--green-700); }
.preview-fallback a { margin-top: 16px; padding: 11px 16px; border-radius: 12px; color: #fff; background: var(--green-600); text-decoration: none; font-size: 12px; font-weight: 800; }

.toast { position: fixed; z-index: 200; right: 18px; bottom: calc(18px + var(--safe-bottom)); max-width: min(360px, calc(100vw - 36px)); padding: 12px 15px; border-radius: 13px; color: #fff; background: #172426; box-shadow: 0 12px 34px rgba(0, 0, 0, .24); font-size: 12px; font-weight: 700; line-height: 1.45; animation: toast-in .2s ease both; }
.toast.is-error { background: #9f2530; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .chat-app { grid-template-columns: minmax(290px, 38%) minmax(0, 1fr); }
  .brand-lockup > div:last-child { display: none; }
  .message-bubble { max-width: 84%; }
}

@media (max-width: 680px) {
  .welcome { padding-right: 22px; padding-left: 22px; }
  .brand-mark-large { width: 82px; height: 82px; border-radius: 26px; }
  .brand-mark-large svg { width: 43px; height: 43px; }
  .welcome-copy { font-size: 14px; }

  .chat-app { display: block; height: var(--app-height); padding-top: var(--safe-top); }
  .sidebar, .conversation { width: 100%; height: calc(var(--app-height) - var(--safe-top)); border: 0; }
  .conversation { display: none; }
  .chat-app.has-peer .sidebar { display: none; }
  .chat-app.has-peer .conversation { display: block; }
  .brand-lockup > div:last-child { display: flex; }
  .sidebar-head { min-height: 78px; padding: 13px 15px; }
  .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
  .me-button { max-width: 142px; }
  .search-box { margin: 11px 14px 7px; }
  .list-heading { padding-right: 17px; padding-left: 17px; }
  .user-list { padding: 0 5px 20px; }
  .user-row { padding: 11px 10px; }

  .conversation-head { min-height: 66px; padding: 8px 10px; }
  .back-button { display: grid !important; width: 38px; height: 38px; }
  .conversation-head .avatar { width: 39px; height: 39px; font-size: 12px; }
  .secure-label { margin-right: 3px; }
  .messages { padding: 17px 9px 12px; }
  .message-bubble { max-width: 88%; font-size: 13px; }
  .attachment { min-width: 185px; }
  .attachment-image { width: min(300px, 70vw); }
  .attachment-audio { min-width: min(280px, 72vw); }
  .composer { gap: 2px; padding: 8px 7px calc(8px + var(--safe-bottom)); }
  .icon-button, .send-button { width: 41px; height: 41px; }
  .composer textarea { min-height: 41px; padding: 11px 13px; border-radius: 21px; }
  .attach-menu { left: 9px; bottom: calc(65px + var(--safe-bottom)); }
  .recording-panel { min-height: 61px; padding-right: 9px; padding-left: 12px; }
  .recording-panel button { padding-right: 9px; padding-left: 9px; }
  .modal { align-items: start; padding: max(14px, var(--safe-top)) 14px max(14px, var(--safe-bottom)); }
  .profile-dialog, .email-dialog { margin: auto 0; padding: 27px 24px; }
  .preview-modal { padding: 0; }
  .preview-dialog { width: 100%; height: var(--app-height); border-radius: 0; }
  .toast { right: 12px; bottom: calc(12px + var(--safe-bottom)); }
}

@media (max-width: 390px) {
  .brand-lockup span { display: none; }
  .me-copy { max-width: 66px; }
  .me-button > svg { display: none; }
  .welcome h1 { font-size: 40px; }
  .message-bubble { max-width: 91%; }
  .secure-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.push-controls{padding:10px 16px;border-bottom:1px solid #dfe7e5;background:#f3faf7;font-size:12px;color:#075e54}
.push-controls p{margin:0 0 7px;line-height:1.5}.push-controls>div{display:flex;gap:8px;flex-wrap:wrap}
.push-controls button{border:1px solid #b4d7c9;border-radius:8px;background:white;padding:7px 10px;color:#075e54;font:inherit;cursor:pointer}
.push-controls button:disabled{opacity:.6;cursor:wait}

.message-text .message-link{color:#0066cc;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;word-break:break-word}
.message-text .message-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}

.message-text .message-link:visited{color:#0066cc}

.logout-button{border:1px solid #c8d6d2;border-radius:9px;padding:8px 9px;background:#fff;color:#075e54;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}

.sidebar-head{flex-wrap:wrap}.setup-head-actions{flex:1 0 100%;display:flex;gap:8px;justify-content:flex-end}.setup-head-actions button,.setup-welcome-actions button{border:1px solid #b4d7c9;background:#fff;border-radius:8px;padding:8px 10px;color:#075e54;font:inherit;font-size:12px;font-weight:650;cursor:pointer;min-height:38px}.setup-welcome-actions{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;left:14px;display:flex;justify-content:flex-end;gap:8px}.setup-welcome-actions button{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}.setup-guide{position:fixed;inset:0;z-index:15000;background:rgba(5,30,26,.6);display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box}.setup-guide-card{width:100%;max-width:500px;max-height:calc(100dvh - 24px);background:#fff;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px #0003}.setup-guide-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid #e3ece8}.setup-guide h2{font-size:18px;margin:0;color:#075e54}.setup-guide #setupClose{width:38px;height:38px;flex:0 0 38px;padding:0;border:0;background:#edf4f1;color:#075e54;border-radius:50%;font-size:26px;cursor:pointer}.setup-guide-body{overflow:auto;padding:16px;font-size:14px;line-height:1.65;overscroll-behavior:contain}.setup-lead{margin-top:0;color:#526a62}.setup-guide ol{padding-left:26px;margin:14px 0}.setup-guide li{margin:14px 0;padding-left:4px}.setup-guide li::marker{font-weight:800;color:#075e54}#setupStatus{background:#edf7f1;padding:12px;border-radius:8px;overflow-wrap:anywhere}.setup-guide-actions{display:flex;flex-direction:column;gap:10px}.setup-guide-actions button{border:0;border-radius:9px;padding:12px;background:#075e54;color:#fff;font:inherit;font-weight:700;min-height:44px;cursor:pointer}.setup-guide-actions .setup-secondary{background:#edf4f1;color:#075e54}.setup-guide-actions button:disabled{opacity:.55;cursor:default}.desktop-device .setup-welcome-actions,.desktop-device .setup-head-actions{display:none}@media(max-width:350px){.setup-head-actions button{font-size:11px;padding:8px}.setup-guide{padding:6px}.setup-guide-card{max-height:calc(100dvh - 12px)}}

.setup-share-icon{width:19px;height:19px;vertical-align:middle;flex:0 0 19px}[data-yasko-install]{display:inline-flex;align-items:center;justify-content:center;gap:6px}.setup-share-cue{display:none}.setup-simple .setup-share-cue{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;background:#edf7f1;border-radius:10px;padding:14px 8px;color:#075e54;font-size:12px;font-weight:750}.setup-simple li{font-size:15px;margin:18px 0}.setup-simple #setupStatus{background:transparent;padding:0;color:#526a62;font-size:12px}.setup-simple #setupCopy{font-size:12px;padding:9px;min-height:38px}

.group-create-button{border:1px solid #b4d7c9;border-radius:8px;background:#edf7f1;color:#075e54;padding:8px 10px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}.list-heading{gap:8px;flex-wrap:wrap}.group-list{flex:0 0 auto;max-height:30vh;overflow:auto;border-bottom:1px solid #e3ece8}.group-list:empty{display:none}.group-list-item{display:flex;align-items:center;gap:12px;padding:12px 16px;width:100%;border:0;border-bottom:1px solid #edf1ef;background:#fff;text-align:left;font:inherit;cursor:pointer}.group-list-item:hover{background:#edf7f1}.group-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#d9efea;color:#075e54;font-size:26px;flex:0 0 42px}.group-list-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.group-list-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-list-copy small{color:#698179;font-size:11px}.group-unread{border-radius:14px;background:#128c7e;color:#fff;padding:3px 7px;font-size:12px}.group-conversation{position:fixed;inset:0;z-index:1200;background:#eeeae1;display:flex;flex-direction:column;height:var(--app-height,100dvh);max-height:100dvh;overflow:hidden}.group-head{display:flex;align-items:center;gap:12px;padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));padding-top:max(12px,env(safe-area-inset-top));background:#fff;border-bottom:1px solid #e5ebe8;flex-shrink:0}.group-head button{border:0;background:#f0f4f2;color:#075e54;border-radius:10px;width:42px;height:42px;flex:0 0 42px;font-size:26px;cursor:pointer}#groupDetails{flex:1;min-width:0;width:auto;height:auto;text-align:left;background:transparent;font-size:16px}#groupName{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#groupSubtitle{display:block;color:#64776f;font-size:11px;font-weight:400;margin-top:4px}.group-retention{text-align:center;margin:0;padding:7px 12px;background:#f7faf8;color:#64776f;font-size:10px;line-height:1.5;flex-shrink:0}.group-messages{flex:1;min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;overscroll-behavior:contain}.group-message{max-width:88%;padding:10px 12px;background:#fff;border-radius:12px;box-shadow:0 1px 2px #0001;overflow-wrap:anywhere}.group-message.own{align-self:flex-end;background:#dcf8c6}.group-message-author{display:block;color:#08776b;font-size:11px;margin-bottom:5px}.group-message-text{white-space:pre-wrap;font-size:15px;line-height:1.5}.group-message-text a{color:#0066cc;text-decoration:underline}.group-message-time{display:block;text-align:right;font-size:10px;color:#6c8278;margin-top:5px}.group-composer{display:flex;align-items:center;gap:8px;background:#f7faf8;padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));flex-shrink:0}.group-composer textarea{flex:1;min-width:0;border:1px solid #d5e2dc;border-radius:20px;background:#fff;padding:12px;font:inherit;font-size:16px;min-height:44px;max-height:100px;resize:none}.group-composer button{border:0;border-radius:20px;background:#075e54;color:#fff;padding:12px;font:inherit;font-size:12px;min-height:44px;cursor:pointer}.group-attach{width:34px;height:42px;display:grid;place-items:center;color:#075e54;font-size:28px;cursor:pointer;flex:0 0 34px}#groupError:empty,#groupEditorStatus:empty{display:none}#groupError,#groupEditorStatus{margin:0;padding:10px 14px;color:#a52626;font-size:12px;background:#fff4f4}.group-editor{position:fixed;inset:0;z-index:1300;background:#142f2a88;display:flex;align-items:center;justify-content:center;padding:10px}.group-editor-card{width:100%;max-width:520px;max-height:calc(100dvh - 20px);display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 18px 60px #0003}.group-editor-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #e2eae6}.group-editor-card h2{font-size:18px;margin:0;color:#075e54}.group-editor-card header button{background:#edf4f1;color:#075e54;border:0;border-radius:50%;width:38px;height:38px;font-size:24px;flex:0 0 38px;cursor:pointer}.group-editor-body{padding:16px;overflow:auto;overscroll-behavior:contain}.group-form{display:flex;flex-direction:column;gap:12px}.group-form>label{font-size:13px;color:#436258}.group-field{display:block;width:100%;min-width:0;font:inherit;font-size:16px;border:1px solid #cfdfd7;border-radius:8px;padding:11px;margin:5px 0 10px;box-sizing:border-box}.group-muted{font-size:12px;color:#657f74;line-height:1.6}.group-button{border:0;background:#075e54;color:#fff;border-radius:9px;padding:12px 14px;font:inherit;font-size:13px;cursor:pointer;min-height:44px}.group-button:disabled,.group-small-button:disabled{opacity:.5}.group-button.danger,.group-small-button.danger{background:#fff0f0;color:#ad3030}.group-picker{max-height:38vh;overflow:auto;border:1px solid #e3ece8;border-radius:8px}.group-picker-row{border-bottom:1px solid #e3ece8;padding:12px}.group-person{display:flex;gap:12px;align-items:center;font-size:14px;overflow-wrap:anywhere}.group-person input,.group-admin-choice input{width:20px;height:20px;flex:0 0 20px;accent-color:#128c7e}.group-admin-choice{display:flex;gap:8px;align-items:center;margin:8px 0 0 32px;font-size:11px;color:#075e54}.group-member-row{border-bottom:1px solid #e2eae6;padding:12px 0}.group-member-row>div:first-child{display:flex;flex-direction:column;gap:4px}.group-member-row small{font-size:11px;color:#657f74}.group-member-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.group-small-button,.group-file-button,.group-older{border:1px solid #d6e4dd;background:#f2f8f5;color:#075e54;padding:8px;border-radius:8px;font:inherit;font-size:11px;cursor:pointer}.group-file-button{display:block;max-width:100%;overflow-wrap:anywhere;margin:4px 0}.group-image{display:block;max-width:100%;max-height:300px;border-radius:6px}.group-message audio{max-width:100%;width:240px}.group-inline-form{display:flex;align-items:center;gap:8px}.group-inline-form .group-field{flex:1;width:0}.group-inline-form .group-button{font-size:11px;padding:10px}.group-history{margin-top:16px;font-size:12px;line-height:1.5}.group-history p{padding:8px;background:#f4f7f5;border-radius:6px}.group-editor-body>h3{font-size:15px;margin:16px 0 10px}.group-editor-body>.group-button{margin:12px 0}.group-editor input:focus-visible,.group-composer textarea:focus-visible{outline:2px solid #128c7e;outline-offset:1px}@media(min-width:800px){.group-conversation{left:calc(50% - 380px);right:auto;width:760px;border-inline:1px solid #d5e2dc}.group-message{max-width:75%}}@media(max-width:350px){.group-composer{gap:5px;padding-inline:8px}.group-composer button{padding:10px;font-size:11px}.group-attach{width:28px;flex-basis:28px}.group-editor{padding:5px}.group-editor-card{max-height:calc(100dvh - 10px)}}

@media(max-width:767px){
 .sidebar-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,160px);align-items:center;gap:10px;padding:12px;min-height:0}
 .sidebar-head>.brand-lockup{grid-column:1;grid-row:1;min-width:0;gap:7px;overflow:hidden}
 .sidebar-head .brand-mark{width:32px;height:32px;flex:0 0 32px;border-radius:10px}
 .sidebar-head .brand-mark svg{width:19px;height:19px}
 .sidebar-head .brand-lockup>div:last-child{display:flex;min-width:0;overflow:hidden}
 .sidebar-head .brand-lockup strong{display:block;max-width:100%;font-size:12px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sidebar-head .brand-lockup span{font-size:10px;overflow:hidden;text-overflow:ellipsis}
 .sidebar-head>.sidebar-actions{grid-column:2;grid-row:1;display:flex;min-width:0;width:100%;gap:5px;align-items:center;justify-content:flex-end}
 .sidebar-head .me-button{flex:1;min-width:0;max-width:117px;padding:5px 3px;gap:5px;overflow:hidden}
 .sidebar-head .me-copy{max-width:none;min-width:0;flex:1}
 .sidebar-head .me-copy strong{font-size:12px}
 .sidebar-head .me-copy small{max-width:100%}
 .sidebar-head .me-button>svg{display:none}
 .sidebar-head .avatar-small{width:30px;height:30px;flex:0 0 30px}
 .sidebar-head .header-close-button{width:38px;height:38px;flex:0 0 38px}
 .sidebar-head>.setup-head-actions{grid-column:1/-1;grid-row:2;min-width:0;flex-wrap:wrap;justify-content:flex-end;gap:6px}
 .sidebar-head .setup-head-actions button{font-size:11px;padding:8px 9px}
}

.push-controls>.push-action-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:stretch}
.push-action-row>[data-yasko-help]{grid-column:1;grid-row:1}
.push-action-row>#pushEnable,.push-action-row>#pushDisable{grid-column:2;grid-row:1}
.push-action-row>#logoutButton{grid-column:1/-1;justify-self:end;width:auto}
.push-action-row>button{min-width:0;min-height:38px;margin:0;font-size:12px;padding:8px 6px;white-space:normal;line-height:1.3}
.sidebar-head>.setup-head-actions:has([data-yasko-install][hidden]){display:none}

.push-action-row>#groupCreate{grid-column:1;grid-row:2;width:100%;justify-self:stretch}
.push-action-row>#logoutButton{grid-column:2;grid-row:2;width:100%;justify-self:stretch}

.yasko-bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));flex-shrink:0;background:#fff;border-top:1px solid #e7efea;padding:8px 5px max(8px,env(safe-area-inset-bottom));gap:2px;margin-top:auto;box-shadow:0 -4px 18px #075e5405}
.yasko-bottom-nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;border:0;border-radius:13px;background:transparent;color:#657970;padding:7px 2px;font:inherit;font-size:10px;font-weight:650;line-height:1.2;min-height:54px;cursor:pointer}
.yasko-bottom-nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.yasko-bottom-nav button[aria-current="page"]{background:#e4f5ed;color:#075e54}.yasko-bottom-nav .nav-create{color:#075e54}.yasko-bottom-nav .nav-create svg{width:28px;height:28px;stroke-width:1.8}.yasko-bottom-nav button:focus-visible{outline:2px solid #128c7e;outline-offset:-2px}.yasko-bottom-nav b{position:absolute;top:0;right:8px;background:#128c7e;color:#fff;border:2px solid #fff;border-radius:12px;min-width:18px;padding:2px 4px;font-size:9px}
.chat-app.groups-only #userList,.chat-app.groups-only #onlineCount{display:none}.chat-app.groups-only #groupList{flex:1;max-height:none}.group-empty-nav{padding:28px 18px;line-height:1.8;font-size:13px;text-align:center;color:#789086;flex:1}.profile-settings{border-top:1px solid #e3ece8;margin-top:20px;padding-top:16px}.profile-settings h3{font-size:14px;margin:0 0 12px;color:#075e54}.profile-settings .setup-head-actions{margin-bottom:10px;justify-content:flex-start}.profile-settings .setup-head-actions:has([data-yasko-install][hidden]){display:none}.profile-settings .push-controls{padding:10px;border:1px solid #e2ece7;border-radius:10px}.profile-settings .push-action-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.profile-logout{border-top:1px solid #e3ece8;margin-top:18px;padding-top:16px}.profile-logout #logoutButton{display:block;min-height:44px;width:100%;border:1px solid #f4d3d3;color:#ae3030;background:#fff5f5;font-size:13px;border-radius:10px}.sidebar-head .me-copy,.sidebar-head .me-button>svg{display:none}.sidebar-head .me-button{flex:0 0 auto;max-width:none;padding:4px;background:#e6f2ed;border-radius:50%}.sidebar-head .connection-dot{display:none}.sidebar-head>.sidebar-actions{gap:10px}.sidebar-head .header-close-button{background:#f4f7f5}.sidebar-head .brand-lockup strong{font-size:23px;letter-spacing:-.5px;font-weight:850;color:#075e54}.sidebar-head .brand-lockup span{font-size:10px;display:block}.sidebar-head .brand-mark{display:none}.sidebar-head{padding:18px 18px 12px;min-height:78px;gap:12px}.sidebar-head .brand-lockup{overflow:visible}.list-heading{font-size:16px;padding-top:10px;padding-bottom:8px}.search-box{background:#f0f5f2;border-radius:14px;border:0}.profile-dialog{max-height:calc(var(--app-height) - 32px);overflow:auto;overscroll-behavior:contain}.sidebar{min-height:0}
@media(max-width:767px){.sidebar-head{grid-template-columns:minmax(0,1fr) auto;min-height:72px;padding:14px 16px 10px}.sidebar-head>.sidebar-actions{width:auto}.sidebar-head .brand-lockup strong{font-size:24px}.sidebar-head .brand-lockup>div:last-child{display:flex}.sidebar-head .brand-lockup span{display:block;font-size:10px}.sidebar-head .avatar-small{width:34px;height:34px}.sidebar-head .header-close-button{width:38px;height:38px}.user-list{padding-bottom:8px}.yasko-bottom-nav{min-height:67px}.profile-dialog{padding:26px 18px}.profile-settings .setup-head-actions button{font-size:12px}.list-heading #onlineCount{font-size:10px;font-weight:400}}

:root{--yasko-nav-space:0px}body.has-yasko-nav{--yasko-nav-space:var(--yasko-nav-height,76px)}
#yaskoBottomNav{position:fixed;left:0;right:0;bottom:0;z-index:1250;min-height:72px;box-sizing:border-box;padding-bottom:max(8px,env(safe-area-inset-bottom));margin:0}
.has-yasko-nav .sidebar,.has-yasko-nav .conversation{box-sizing:border-box;padding-bottom:var(--yasko-nav-space)}
.has-yasko-nav .group-conversation{box-sizing:border-box;padding-bottom:var(--yasko-nav-space)}
.has-yasko-nav .group-composer{padding-bottom:10px}

.yasko-page{position:fixed!important;top:var(--app-top,0px)!important;right:0!important;bottom:auto!important;left:0!important;width:100%!important;height:var(--app-height,100dvh)!important;max-height:var(--app-height,100dvh)!important;display:flex!important;align-items:stretch!important;justify-content:stretch!important;padding:0 0 var(--yasko-nav-space,0px)!important;box-sizing:border-box!important;background:#fff!important;backdrop-filter:none!important;overflow:hidden!important;z-index:1210!important;animation:none!important;transform:none!important;perspective:none!important}
.yasko-page[hidden]{display:none!important}.yasko-page.yasko-page-is-top{z-index:1220!important}.yasko-page .modal-backdrop{display:none!important}
.yasko-page .group-editor-card,.yasko-page .setup-guide-card{width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important;animation:none!important;transform:none!important}
#profileModal.yasko-page .profile-dialog{position:relative;width:100%;max-width:none;height:100%;max-height:none;margin:0!important;padding:0 18px 24px!important;border-radius:0!important;box-shadow:none!important;animation:none!important;transform:none!important;overflow:auto}
.profile-page-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;background:#fff;border-bottom:1px solid #e3ece8;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));margin:0 -18px 20px;min-height:64px}.profile-page-head h2{font-size:18px;margin:0!important;line-height:1.4}.profile-page-head .modal-close{position:static;flex:0 0 38px;width:38px;height:38px;background:transparent;color:#075e54;border-radius:8px}#profileModal.yasko-page .profile-dialog>.brand-mark{display:none}
.yasko-page .group-editor-card>header,.yasko-page .setup-guide-card>header{justify-content:flex-start;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));min-height:64px;background:#fff}.yasko-page #groupEditorClose,.yasko-page #setupClose{order:-1;background:transparent!important;color:#075e54;border-radius:8px!important;font-size:30px!important;flex:0 0 38px}.yasko-page .group-editor-body,.yasko-page .setup-guide-body{padding:18px;flex:1;min-height:0;overflow:auto}.yasko-page .group-editor-body>h3:first-child{margin-top:0}.yasko-page .setup-guide-card h2,.yasko-page .group-editor-card h2{font-size:18px}
@media(min-width:800px){.yasko-page .profile-dialog,.yasko-page .setup-guide-card,.yasko-page .group-editor-card{padding-inline:calc((100vw - 720px)/2)!important}.yasko-page .profile-page-head{margin-inline:0}}

/* Keep the touch bar outside all page hit areas, including iOS standalone. */
#yaskoBottomNav{z-index:30000;isolation:isolate;pointer-events:auto;touch-action:manipulation;transform:translateZ(0);-webkit-transform:translateZ(0)}
#yaskoBottomNav button{pointer-events:auto;touch-action:manipulation;-webkit-user-select:none;user-select:none}
#yaskoBottomNav button>*{pointer-events:none}
body.has-yasko-nav .yasko-page{height:calc(var(--app-height,100dvh) - var(--yasko-nav-space,76px))!important;max-height:calc(var(--app-height,100dvh) - var(--yasko-nav-space,76px))!important;padding-bottom:0!important}

#profileNameHelp{order:-1;color:#a91d2b!important;background:#fff0f1;border:1px solid #f2b4bb;border-left:4px solid #c82333;border-radius:8px;padding:12px 14px;margin:0 0 18px;font-weight:650;line-height:1.5}

/* Use the visible viewport for standalone iOS keyboard layout. */
html.mobile-device input,html.mobile-device textarea{font-size:16px!important}
html.mobile-device .group-conversation{top:var(--app-top,0px);bottom:auto;height:var(--app-height,100dvh);max-height:var(--app-height,100dvh);min-height:0}
html.mobile-device .group-messages,html.mobile-device .messages{overscroll-behavior:contain;min-height:0}
html.mobile-device.keyboard-editing .composer,html.mobile-device.keyboard-editing .group-composer{padding-bottom:10px}
html.mobile-device.keyboard-editing{overscroll-behavior:none}

/* Keep the selected chat above the list while iOS recomposites for its keyboard. */
html.mobile-device body[data-yasko-conversation="group"] #chatApp{visibility:hidden}
html.mobile-device body[data-yasko-conversation="group"] .group-conversation:not([hidden]){visibility:visible;transform:translateZ(0);-webkit-transform:translateZ(0);isolation:isolate;z-index:1200}
@media(max-width:680px){body[data-yasko-conversation="direct"] .sidebar{display:none!important}body[data-yasko-conversation="direct"] .conversation{display:block!important}}
.group-message-text .message-link,.group-message-text .message-link:visited{color:#0066cc;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;word-break:break-word}
.group-message-text .message-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}

.chat-tools{display:flex;gap:8px;align-items:center;padding:5px 12px;background:#f7faf8;flex-shrink:0}.chat-action{border:1px solid #d3e3dc;background:#fff;color:#075e54;border-radius:18px;min-width:36px;min-height:36px;padding:6px 10px;font:inherit;font-size:16px;cursor:pointer;touch-action:manipulation}.chat-tools>.chat-action{font-size:21px}.chat-emoji-panel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:8px 12px;background:#f7faf8;max-height:170px;overflow:auto;flex-shrink:0}.chat-emoji-panel .chat-action{min-width:0;padding:5px;font-size:23px}.message-reactions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:5px;max-width:100%}.reaction-counts,.reaction-options{display:flex;gap:4px;flex-wrap:wrap;max-width:100%}.reaction-options{flex-basis:100%;background:#f0f7f3;padding:5px;border-radius:12px}.message-reactions .chat-action{font-size:15px;min-height:32px;min-width:32px;padding:4px 7px}.reaction-count[aria-pressed=true]{background:#d9fdd3;border-color:#128c7e}.chat-file-menu{display:flex;gap:8px;flex-wrap:wrap;padding:10px;background:#f7faf8;flex-shrink:0}.chat-file-menu .chat-action{font-size:13px}.group-voice-panel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;background:#fff4ef;flex-shrink:0}.group-voice-panel>span{flex:1 0 100%;font-size:13px;color:#a13628;font-weight:650}.group-voice-panel audio{width:100%;max-width:100%;height:38px}.group-voice-panel .chat-action{font-size:13px}.chat-social-status{margin:0;padding:8px 12px;background:#fff0f0;color:#aa2637;font-size:13px;flex-shrink:0}.chat-social-status:empty{display:none}.message-bubble,.group-message{min-width:0}.reaction-options[hidden],.chat-emoji-panel[hidden],.chat-file-menu[hidden],.group-voice-panel[hidden]{display:none!important}

/* Emoji and reactions remain free of button/bubble backgrounds. */
.chat-emoji-panel,.reaction-options{background:transparent}
.chat-emoji-panel .chat-action,.message-reactions .chat-action,.reaction-count[aria-pressed=true]{background:transparent;border-color:transparent;box-shadow:none}
.reaction-count[aria-pressed=true]{font-weight:800;text-decoration:underline;text-underline-offset:4px}
.message-text,.group-message-text,.message-text *,.group-message-text *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.message-bubble.emoji-only-message,.group-message.emoji-only-message{background:transparent!important;box-shadow:none;border:0}
.emoji-only-message .message-text,.emoji-only-message .group-message-text{font-size:34px;line-height:1.35}
.reaction-options .select-message-text{font-size:12px;color:#075e54;text-decoration:underline}

/* A floating reaction strip never changes message or scroll heights. */
.message-bubble,.group-message{position:relative}
.message-reactions{margin-top:0;min-height:0}.reaction-counts:empty{display:none}
.message-reactions>.reaction-trigger{position:absolute;right:3px;top:2px;min-width:24px;min-height:24px;padding:1px;opacity:0;font-size:15px}
.message-bubble:hover .reaction-trigger,.group-message:hover .reaction-trigger,.reaction-trigger:focus-visible{opacity:1}
body>.reaction-options{position:fixed;z-index:31000;display:flex;flex-wrap:wrap;gap:2px;align-items:center;justify-content:center;width:252px;max-width:calc(100vw - 16px);padding:6px 8px;background:#fff;border:1px solid #e1e8e4;border-radius:18px;box-shadow:0 4px 18px #12342b20}
body>.reaction-options .chat-action{flex:0 0 34px;width:34px;min-width:34px;height:34px;min-height:34px;padding:3px;background:transparent;border:0;box-shadow:none;font-size:21px;line-height:1}
body>.reaction-options .select-message-text{flex:0 0 100%;width:auto;height:22px;min-height:22px;padding:1px;font-size:11px;line-height:20px;color:#526b61;text-decoration:none}

/* Compact direct/group composers: 4px corners and opt-in extra actions. */
.composer{grid-template-columns:auto minmax(0,1fr) auto}
.composer,.group-composer,.composer textarea,.group-composer textarea,
.composer button,.group-composer button,.chat-tools button,.attach-menu,.attach-menu button,
.attach-icon,.chat-file-menu,.chat-file-menu button,.chat-emoji-panel,.chat-emoji-panel button,
.recording-panel button,.group-voice-panel button{border-radius:4px}
.chat-tools[hidden]{display:none!important}
.chat-tools button{width:44px;height:44px;display:grid;place-items:center;padding:8px}
#attachButton svg,#groupMoreButton svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#groupMoreButton{flex:0 0 44px;width:44px;height:44px;padding:8px;background:transparent;color:#075e54}

/* CRM internal-chat media layout; preserve the requested 4px composer corners. */
.message-bubble,.group-message{border:1px solid #e5e7eb;border-radius:14px;padding:9px 10px 7px;background:#fff;color:#111827;box-shadow:0 1px 2px #0f172a08;overflow-wrap:anywhere}
.message-row.is-me .message-bubble,.group-message.own{background:#059669;color:#fff;border-color:#059669}
.group-message.own .group-message-author,.group-message.own .group-message-time{color:#fff}
.attachment-image,.group-image-preview{display:block;padding:0;border:1px solid #e5e7eb;border-radius:12px;background:#fff;overflow:hidden;max-width:100%;cursor:pointer}
.attachment-image img,.group-image-preview img{display:block;width:100%;max-width:280px;max-height:220px;object-fit:cover}
.attachment-audio{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;max-width:100%;min-width:0;color:#111827}
.attachment-audio audio,.group-message .group-audio{width:190px;max-width:100%;min-width:0;flex:1;height:34px}
.media-download{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:0;border-radius:4px;background:#fef2f2;color:#991b1b;cursor:pointer;margin:0;padding:0}
#recordingPanel{flex-wrap:wrap}#recordingPreview{width:100%;height:36px;order:2}#recordingPreview[hidden]{display:none}
.media-compose-dialog{position:fixed;inset:0;z-index:3000;background:#0f172a99;display:flex;align-items:center;justify-content:center;padding:14px}
.media-compose-card{width:min(100%,540px);max-height:90dvh;display:flex;flex-direction:column;background:#fff;color:#111827;border-radius:12px;padding:16px;gap:12px;box-sizing:border-box}
.media-compose-card h2{font-size:18px;margin:0}.media-compose-list{overflow:auto;min-height:0;display:grid;gap:10px}.media-compose-item{border:1px solid #e5e7eb;border-radius:8px;padding:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.media-compose-item img{width:80px;height:70px;object-fit:cover;border-radius:4px}.media-compose-item audio{width:100%;height:36px}.media-compose-item span{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px}
.media-compose-card button,.media-image-dialog button{padding:10px 14px;border:1px solid #d1d5db;border-radius:4px;background:#f9fafb;color:#111827;cursor:pointer;font:inherit;font-size:13px}.media-compose-card button:disabled{opacity:.5;cursor:wait}.media-compose-card footer{display:flex;justify-content:flex-end;gap:8px}.media-compose-card footer button:last-child{background:#059669;color:#fff;border-color:#059669}.media-compose-status{margin:0;font-size:13px;overflow-wrap:anywhere}
.media-image-dialog{max-width:95vw;max-height:95dvh;border:0;border-radius:12px;padding:12px}.media-image-dialog::backdrop{background:#000b}.media-image-dialog header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.media-image-dialog header span{flex:1;overflow-wrap:anywhere;min-width:0}.media-image-dialog img{display:block;max-width:85vw;max-height:75dvh;object-fit:contain}.media-error{display:block;color:#b91c1c;background:#fff;font-size:12px}
@media(max-width:480px){.message-bubble,.group-message{max-width:88%}.media-compose-card{max-height:85dvh}.attachment-audio audio{width:170px}}

.message-row.is-me .message-meta{color:#e8fff6}.message-row.is-me .message-link{color:#fff;text-decoration:underline}

/* Composer actions float upward from + without button or panel backgrounds. */
#directComposerTools,#groupComposerTools{position:fixed;z-index:1400;display:flex;flex-direction:column;align-items:center;gap:4px;width:44px;padding:0;margin:0;background:transparent;border:0;box-shadow:none}
#directComposerTools>button,#groupComposerTools>button{flex:0 0 44px;width:44px;height:44px;padding:8px;background:transparent;border:0;box-shadow:none;color:#075e54}
#directComposerTools>button:hover,#groupComposerTools>button:hover{background:transparent}
#directComposerTools>button:focus-visible,#groupComposerTools>button:focus-visible{outline:2px solid #128c7e;outline-offset:1px}

/* Rounded composer and light conversation bubbles from the supplied reference. */
.conversation-active{display:flex;flex-direction:column}.messages{flex:1;min-height:0}
.messages,.group-messages{background-color:#efeae2}
.message-bubble,.group-message{border:0;border-radius:9px;background:#fff;color:#111b21;padding:8px 10px 6px;box-shadow:0 1px 1px #0002;font-size:16px;line-height:1.4}
.message-row.is-me .message-bubble,.group-message.own{background:#d9fdd3;color:#111b21;border:0}
.message-row.is-me .message-meta,.group-message.own .group-message-time,.message-meta{color:#667781;font-size:11px}
.group-message.own .group-message-author{color:#128c7e}.message-row.is-me .message-link{color:#0066cc}
.composer,.group-composer{display:flex;align-items:flex-end;gap:7px;padding:7px 8px max(7px,env(safe-area-inset-bottom));border:0;background:#efeae2;flex-shrink:0}
.chat-input-pill{display:flex;flex:1;min-width:0;align-items:flex-end;background:#fff;border-radius:28px;padding:3px 5px;gap:0}
.chat-input-pill textarea{flex:1;min-width:0;width:0;min-height:46px;padding:12px 4px;border:0!important;border-radius:0;background:transparent;font-size:17px;line-height:22px;outline:none}
.chat-input-pill button{display:grid;place-items:center;flex:0 0 34px;width:34px;min-width:34px;height:46px;padding:5px;border:0;border-radius:0;background:transparent;color:#667781;box-shadow:none}
.chat-input-pill button svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.composer .composer-primary-mic,.composer .composer-primary-send,.group-composer .composer-primary-mic,.group-composer .composer-primary-send{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;min-height:52px;padding:13px;border:0;border-radius:50%;color:#fff;background:#00a884;box-shadow:none}
.composer-primary-mic svg,.composer-primary-send svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8}
.composer .composer-primary-mic[hidden],.composer .composer-primary-send[hidden],.group-composer .composer-primary-mic[hidden],.group-composer .composer-primary-send[hidden]{display:none!important}
.composer.is-unavailable .chat-input-pill button,.composer.is-unavailable>.composer-primary-mic,.composer.is-unavailable>.composer-primary-send{display:none!important}
.attach-button.is-open{transform:none}
/* Attachment sheet and recorder follow the supplied mobile reference. */
#attachMenu.attachment-sheet,.attachment-sheet.chat-file-menu{position:relative;left:auto;bottom:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px;min-width:0;flex-shrink:0;width:100%;padding:30px 14px max(20px,env(safe-area-inset-bottom));border:0;border-radius:28px 28px 0 0;background:#fff;box-shadow:0 -2px 12px #00000008;box-sizing:border-box;max-height:40dvh;overflow:auto}
.attachment-sheet::before{content:'';position:absolute;top:10px;left:calc(50% - 22px);width:44px;height:5px;background:#a7adaf;border-radius:5px}
#attachMenu.attachment-sheet button,.attachment-sheet.chat-file-menu button{display:flex;flex-direction:column;gap:8px;padding:0;min-width:0;border:0;background:transparent;color:#667781;font-size:13px;font-weight:400}
.sheet-icon{display:grid;place-items:center;width:62px;height:44px;border:1px solid #eef0f1;border-radius:25px;font-size:29px;font-weight:700;color:#008cff}.sheet-icon-1{color:#8b5cf6}.sheet-icon-2{color:#f59e0b}.sheet-icon-3{color:#ec4899}
#recordingPanel,.group-voice-panel{position:relative;inset:auto;z-index:9;display:grid;grid-template-columns:60px minmax(0,1fr) 60px;gap:18px 12px;align-items:center;background:#fff;border:0;border-radius:28px 28px 0 0;padding:20px 16px max(20px,env(safe-area-inset-bottom));box-shadow:none;flex-shrink:0}
#recordingPanel[hidden],.group-voice-panel[hidden]{display:none!important}
.recording-copy,.group-voice-panel>span{grid-column:1;grid-row:1;margin:0;font-size:15px;color:#111b21;font-weight:400}.recording-copy strong{display:none}#recordingTimer{font-size:22px;color:#111b21}
.voice-wave{grid-column:2/4;grid-row:1;width:100%;max-width:240px;height:50px;justify-self:end}
#recordingCancel,.voice-delete{grid-column:1;grid-row:2}#recordingStop,.voice-pause{grid-column:2;grid-row:2}#recordingSend,.voice-send{grid-column:3;grid-row:2}
#recordingCancel,.group-voice-panel .voice-delete{width:56px;height:56px;border:0;border-radius:50%;background:#fce9ed;color:#d50045;font-size:26px}
#recordingStop,.group-voice-panel .voice-pause{height:56px;min-width:0;border:0;border-radius:30px;background:#f5f5f5;color:#111b21;font-size:15px}
#recordingSend,.group-voice-panel .voice-send{display:grid;place-items:center;width:56px;height:56px;border:0;border-radius:50%;background:#00a884;color:#fff;padding:14px}
#recordingSend svg,.voice-send svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2}
#recordingPreview,.group-voice-panel>audio{grid-column:1/4;grid-row:3;width:100%;height:36px}
.conversation-active:has(#recordingPanel:not([hidden])) #composer,.group-conversation:has(.group-voice-panel:not([hidden])) #groupComposer{display:none}
#recordingCancel svg{width:26px;height:26px}.recording-panel button[hidden],.group-voice-panel button[hidden]{display:none!important}
/* Inline voice messages: avatar, play control, waveform and duration. */
.attachment-audio.has-voice-player{display:block;background:transparent;border:0;padding:4px 0 0;min-width:0;width:290px;max-width:100%;margin:0;border-radius:0}
.has-voice-player>audio:not([controls]){display:none}.has-voice-player>.media-download{display:none}
.voice-message-player{display:flex;align-items:center;gap:10px;min-width:0}
.voice-message-avatar{position:relative;display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:#d2e5dc;color:#426252;font-size:17px;font-weight:600}
.voice-avatar-mic{position:absolute;right:-2px;bottom:-4px;font-size:20px;color:#567b68;background:inherit;border-radius:50%;line-height:1}
.voice-play{flex:0 0 30px;width:30px;height:42px;padding:0;border:0;background:transparent;color:#667781;font-size:28px;cursor:pointer}
.voice-message-body{flex:1;min-width:0}.voice-message-track{position:relative;height:42px;min-width:0}.voice-message-wave{display:block;width:100%;height:42px}.voice-message-seek{position:absolute;inset:0;width:100%;height:42px;margin:0;opacity:0;cursor:pointer}.voice-message-track:focus-within{outline:2px solid #128c7e;border-radius:4px}.voice-message-duration{display:block;font-size:11px;color:#667781;min-height:14px}
@media(max-width:380px){.attachment-audio.has-voice-player{width:250px}.voice-message-player{gap:7px}.voice-message-avatar{flex-basis:42px;width:42px;height:42px}}

.voice-avatar-mic{display:grid;place-items:center;right:-4px;bottom:-3px;width:20px;height:26px;border-radius:10px;background:#fff;color:#667781}.message-row.is-me .voice-avatar-mic,.group-message.own .voice-avatar-mic{background:#d9fdd3}.voice-avatar-mic svg{width:18px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.message-reactions>.reaction-trigger{display:none!important}.message-row.reaction-selected .message-bubble,.group-message.reaction-selected{outline:2px solid #128c7e55;outline-offset:2px}.message-row:focus-visible,.group-message:focus-visible{outline:2px solid #128c7e;outline-offset:2px}

/* Selected-message reaction pill, as in the supplied reference. */
body>.reaction-options{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-evenly;gap:2px;width:350px;max-width:calc(100vw - 16px);padding:8px 10px;border:0;border-radius:40px;background:#fff;box-shadow:0 3px 14px #00000012;box-sizing:border-box}
body>.reaction-options .chat-action{flex:1 1 0;min-width:0;width:auto;height:48px;min-height:48px;padding:0;border:0;border-radius:50%;background:transparent;font-size:34px;line-height:48px;box-shadow:none}
body>.reaction-options .chat-action:hover,body>.reaction-options .chat-action:focus-visible{background:#f0f2f5}
.message-row.reaction-selected{background:#b8ddc080;box-shadow:0 0 0 8px #b8ddc080}.message-row.reaction-selected .message-bubble,.group-message.reaction-selected{outline:none}.group-message.reaction-selected{box-shadow:0 0 0 8px #b8ddc080}
@media(max-width:350px){body>.reaction-options .chat-action{font-size:29px;height:42px;min-height:42px;line-height:42px}}
/* Timestamps and voice duration are non-selectable metadata labels. */
.message-meta,.message-meta *,.group-message-time,.voice-message-duration{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:default;color:#7b8985;font-weight:400}
.message-row.is-me .message-meta,.group-message.own .group-message-time{color:#7b8985}
.voice-message-avatar,.voice-message-avatar *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* Reactions sit on the lower bubble edge, with no visible counts. */
.message-reactions{position:absolute;bottom:-19px;left:8px;margin:0;z-index:2;max-width:calc(100% - 16px)}
.message-row.is-me .message-reactions,.group-message.own .message-reactions{left:auto;right:8px}
.reaction-counts{display:flex;gap:2px;align-items:center;background:#fff;border:2px solid #efeae2;border-radius:18px;padding:1px 4px;box-shadow:0 1px 2px #0000000c}
.reaction-counts:empty{display:none}
.message-reactions .reaction-count{display:grid;place-items:center;min-width:26px;min-height:26px;width:26px;height:26px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;font-size:20px;line-height:1;box-shadow:none}
.message-reactions .reaction-count[aria-pressed="true"]{background:transparent;border:0}
.message-row:has(.reaction-count){margin-bottom:24px}.group-message:has(.reaction-count){margin-bottom:16px}
/* Reaction emojis are plain glyphs, never underlined links. */
.message-reactions .reaction-count,.message-reactions .reaction-count:hover,.message-reactions .reaction-count:focus,.message-reactions .reaction-count:active,.reaction-counts,.reaction-counts *{text-decoration:none!important;border-bottom:0!important}

/* Message selection opens reactions, not the operating system text-selection menu. */
#messages .message-row,#messages .message-row *,#groupMessages .group-message,#groupMessages .group-message *{user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none}
#messageInput,#groupInput{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}

/* Authenticated chat history and message actions. */
.chat-feature-dialog{border:0;border-radius:16px;padding:20px;width:min(94vw,480px);max-height:82dvh;overflow:auto;color:#152c28;background:#fff;box-shadow:0 20px 80px #0005}.chat-feature-dialog::backdrop{background:#0006}.chat-feature-dialog button{display:inline-flex;padding:11px 14px;margin:4px;border:1px solid #dbe7e3;border-radius:8px;background:#f4f8f6;color:#123e33;cursor:pointer}.chat-feature-dialog button:disabled{opacity:.5}.chat-feature-dialog input,.chat-feature-dialog textarea{width:100%;padding:12px;border:1px solid #cad8d3;border-radius:8px;box-sizing:border-box}.chat-feature-dialog textarea{min-height:120px}.chat-feature-dialog h2{font-size:20px}.chat-feature-dialog p{overflow-wrap:anywhere}.chat-message-menu{border:0;background:transparent;color:#53756b;font-size:21px;padding:0 7px;cursor:pointer;float:right}.chat-message-quote{margin:0 0 8px;padding:8px;border-left:3px solid #079774;background:#ffffff75;border-radius:4px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}.chat-message-badges{display:block;color:#53756b;font-size:11px;clear:both}.chat-reply-draft{background:#e8f4ef;border-left:3px solid #079774;padding:8px;font-size:12px}.chat-reply-draft button{float:right}.chat-feature-tools{border:0;background:transparent;color:#476d61;font-size:12px;padding:4px 10px;cursor:pointer}.chat-history-results .chat-history-item{display:block;text-align:left;white-space:pre-wrap;width:calc(100% - 8px);overflow-wrap:anywhere}

#userList,#groupList{display:flex;flex-direction:column}#userList [hidden],#groupList [hidden]{display:none!important}.chat-list-filter{margin:6px 12px;padding:8px;border:1px solid #dbe7e3;border-radius:6px;color:#245144;background:white}.chat-pref-marker{margin-left:auto;color:#52776a}

.voice-speed{border:0;background:#ffffff80;border-radius:12px;color:#3f6856;padding:3px 6px;font-size:11px;cursor:pointer}

.attachment-video video,.media-compose-item video{width:100%;max-height:340px;border-radius:6px}.chat-card-open{display:block;border:1px solid #b5d4c3;border-radius:6px;background:#ffffff80;padding:9px;margin-top:5px;color:#205941}.chat-feature-dialog label{display:block;margin:12px 0}.chat-feature-dialog small{display:block;margin:0 8px;color:#547165}