/* ============================================================
   mappi — Telegram Web K ("night" theme) look-alike.
   Values taken from web.telegram.org/k's own stylesheet:
   surface #212121, body #181818, border #0f0f0f, primary #8774e1,
   secondary text #aaaaaa, secondary #707579, out bubble #8774e1,
   7 peer-avatar gradients, 16px/1.3125 type, 500 for "bold".
   ============================================================ */

:root {
  --font-regular: "Roboto", -apple-system, "apple color emoji", BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Twemoji Mozilla", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-size: 16px;
  --line-height: 1.3125;
  --font-weight-bold: 500;

  --primary-color: #8774e1;
  --primary-color-rgb: 135,116,225;
  --light-primary-color: rgba(135,116,225,.08);
  --surface-color: #212121;
  --background-color: #181818;
  --border-color: #0f0f0f;
  --primary-text-color: #ffffff;
  --secondary-text-color: #aaaaaa;
  --secondary-color: #707579;
  --light-filled-secondary-text-color: #2b2b2b;   /* hover rows */
  --danger-color: #ff595a;
  --link-color: #8774e1;

  --message-background-color: #212121;            /* incoming bubble */
  --message-out-background-color: #8774e1;        /* outgoing bubble */
  --message-time-color: #aaaaaa;
  --message-out-time-color: rgba(255,255,255,.6);
  --message-time-background: rgba(33,33,33,.92); /* K uses #00000059; on the night wallpaper a surface-toned pill stays legible */
  --messages-text-size: 16px;
  --messages-time-text-size: 12px;

  --chat-background: #0f0f0f;
  --input-search-background-color: #181818;
  --input-search-border-color: #2f2f2f;
  --input-placeholder-color: #9ba0a5;
  --input-message-placeholder-color: #a2acb4;
  --scrollbar-color: rgba(255,255,255,.2);

  --default-column-width: 360px;
  --chat-width: 728px;
  --chat-input-height: 48px;
  --chat-input-border-radius: 24px;
  --bubble-radius: 12px;
  --bubble-group-radius: 6px;
  --bubble-max-width: 30rem;

  /* Telegram's bubble tail, 11x20, drawn for the incoming (left) side */
  --bubble-tail: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 20'><path d='M11 5.5C10.7 10.8 8.3 15 .9 16.3C.25 16.42.25 17.2.9 17.5C3.6 18.9 7 20 11 20Z'/></svg>");

  --peer-avatar-red-top: #ff845e;    --peer-avatar-red-bottom: #d45246;
  --peer-avatar-orange-top: #febb5b; --peer-avatar-orange-bottom: #f68136;
  --peer-avatar-violet-top: #b694f9; --peer-avatar-violet-bottom: #6c61df;
  --peer-avatar-green-top: #9ad164;  --peer-avatar-green-bottom: #46ba43;
  --peer-avatar-cyan-top: #53edd6;   --peer-avatar-cyan-bottom: #28c9b7;
  --peer-avatar-blue-top: #5caffa;   --peer-avatar-blue-bottom: #408acf;
  --peer-avatar-pink-top: #ff8aac;   --peer-avatar-pink-bottom: #d95574;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-regular);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: 400;
  background: var(--background-color);
  color: var(--primary-text-color);
  height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

svg { display: block; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-color);
  color: var(--primary-text-color);
  padding: 10px 18px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  font-size: .875rem;
  max-width: 320px;
  text-align: center;
  z-index: 50;
  animation: toast-fade 3.5s ease;
  pointer-events: none;
}
@keyframes toast-fade {
  0% { opacity: 0; transform: translate(-50%, 10px); }
  10%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 10px); }
}

/* Twemoji-replaced emoji glyphs (real colorful images instead of whatever
   the OS's own emoji font — or lack of one — would otherwise show). */
img.emoji {
  height: 1.2em;
  width: 1.2em;
  vertical-align: -0.2em;
  margin: 0 .05em 0 .1em;
}
.emoji-item img.emoji,
.emoji-tab img.emoji {
  height: 1.6rem;
  width: 1.6rem;
  margin: 0;
  vertical-align: middle;
}

/* Scrollbars (K: 6px, #fff3 thumb in night) */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-color) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-color); border-radius: 3px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Generic controls ---------- */
input, button { font-family: inherit; }

input {
  background: transparent;
  border: 1px solid var(--input-search-border-color);
  color: var(--primary-text-color);
  padding: 0 1rem;
  height: 54px;
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.3125;
  width: 100%;
  outline: none;
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
input::placeholder { color: var(--input-placeholder-color); }
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--primary-text-color);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-color) inset;
  caret-color: var(--primary-text-color);
}
input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color) inset;
}

button {
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--primary-text-color);
  background: transparent;
  padding: 0;
  transition: background-color .15s ease-in-out, color .15s ease-in-out, opacity .15s ease-in-out;
}

.btn-primary {
  background: var(--primary-color);
  color: #fff;
  height: 54px;
  width: 100%;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.btn-primary:hover { background: #7a67d6; }
.btn-primary:active { background: #6f5ccc; }

.btn-link {
  background: transparent;
  color: var(--primary-color);
  font-size: .9375rem;
  font-weight: var(--font-weight-bold);
  height: 44px;
  padding: 0 1rem;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.btn-link:hover { background: var(--light-primary-color); }

.hint { color: var(--secondary-text-color); font-size: 1rem; line-height: 1.3125; max-width: 320px; }
.error { color: var(--danger-color); font-size: .875rem; line-height: 18px; min-height: 18px; }

/* Round 40px icon button (K .btn-icon: 24px glyph + .5rem padding) */
.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary-text-color);
  flex: 0 0 auto;
  cursor: pointer;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.btn-icon svg { width: 24px; height: 24px; }
.btn-icon:hover { background: rgba(255,255,255,.08); }

/* ---------- Auth pages (site gate + MAX login) ---------- */
.center-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
  text-align: center;
}

.auth-page {
  position: relative;
  background: var(--background-color);
  overflow: hidden;
}
.auth-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: .035;
  -webkit-mask: url(/pattern.svg) center / 1080px auto repeat;
  mask: url(/pattern.svg) center / 1080px auto repeat;
  pointer-events: none;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 390px;
  background: var(--surface-color);
  border-radius: 24px;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.auth-logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(var(--peer-avatar-violet-top), var(--peer-avatar-violet-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 24px;
}
.auth-logo svg { width: 60px; height: 60px; color: #fff; }
.auth-logo svg use { color: #fff; }

.auth-title {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1.25;
  font-weight: var(--font-weight-bold);
}
.auth-card .hint { margin-bottom: 28px; }

.auth-form {
  /* app.js toggles display between none and flex */
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  width: 100%;
}
.auth-form .btn-link { margin-top: -8px; }
.auth-card .error { margin-top: 14px; }
.auth-card .error:empty { margin-top: 0; }

/* Floating-label input, Telegram Web K style */
.field { position: relative; display: block; width: 100%; text-align: left; }
.field-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 4px;
  background: var(--surface-color);
  color: var(--secondary-text-color);
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
  transition: all .15s ease-out;
}
.field input:focus + .field-label,
.field input:not(:placeholder-shown) + .field-label {
  top: 0;
  font-size: .75rem;
  color: var(--primary-color);
}
.field input:not(:focus):not(:placeholder-shown) + .field-label { color: var(--secondary-text-color); }

/* ---------- App layout ---------- */
.app-layout {
  display: none;
  flex: 1;
  overflow: hidden;
  background: var(--background-color);
}
.app-layout.visible { display: flex; }

/* ---------- Left column: sidebar / chat list ---------- */
.sidebar-left {
  position: relative;
  width: var(--default-column-width);
  min-width: 260px;
  max-width: 40vw;
  background: var(--surface-color);
  border-inline-end: 1px solid var(--border-color);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  position: relative;
  min-height: 56px;
  padding: 0 .5rem 0 .75rem;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.sidebar-menu { margin-inline-end: .25rem; }

/* Hamburger dropdown */
.menu-dropdown {
  position: absolute;
  top: 52px;
  left: 8px;
  z-index: 20;
  min-width: 240px;
  background: var(--surface-color);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-item {
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: .9375rem;
  color: var(--primary-text-color);
}
.menu-item:hover { background: rgba(255,255,255,.08); }
.menu-item-danger { color: var(--danger-color); }

/* Modal (change site password) */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface-color);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.modal-title { margin: 0 0 18px; font-size: 1.25rem; font-weight: var(--font-weight-bold); }
.modal-card .error { margin-top: 10px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.modal-actions .btn-primary { width: auto; padding: 0 20px; height: 40px; }

/* "New chat" panel: find someone by phone number. */
.new-chat-card {
  max-width: 400px;
  padding: 20px;
}
.new-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.new-chat-header .modal-title { margin: 0; }
.new-chat-number-row {
  display: flex;
  gap: 8px;
}
.new-chat-number-row input {
  flex: 1 1 auto;
  height: 40px;
}
.new-chat-number-row .btn-primary { width: auto; padding: 0 16px; height: 40px; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: .9375rem;
  cursor: pointer;
}
.checkbox-row input { width: auto; height: auto; accent-color: var(--primary-color); }

/* Right-click context menu on a message bubble.
   Uses the #id selector, not just .context-menu, because it's a direct
   child of .message-pane and ".message-pane > *" below (same specificity,
   later in the file) would otherwise win the cascade and force `position:
   relative` back on it — which turns the JS-set top/left px offsets into
   an offset from its normal flow position instead of the viewport, so the
   menu renders far off in the bottom-right instead of at the cursor. */
#msg-context-menu {
  position: fixed;
  top: 0;
  left: 0;
}
.context-menu .menu-item { display: flex; align-items: center; gap: 10px; }
.context-menu .menu-item svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Reply/edit preview bar above the composer. Absolutely positioned (against
   .chat-input's own position:relative) instead of being a normal flex item
   in the .send-row row — otherwise it just becomes another item in that
   row, to the *left* of .chat-input-wrapper, instead of a bar sitting above
   the whole composer. */
.reply-preview {
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--chat-width);
  margin: 0 auto 6px;
  padding: 6px 10px;
  background: var(--surface-color);
  border-radius: 10px;
  border-inline-start: 3px solid var(--primary-color);
}
.reply-preview-icon { width: 20px; height: 20px; color: var(--primary-color); flex: 0 0 auto; }
.reply-preview-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .875rem;
  color: var(--secondary-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-preview .btn-icon { width: 28px; height: 28px; }
.reply-preview .btn-icon svg { width: 16px; height: 16px; }

/* Pinned-message bar, directly under the topbar. Mappi-local only — see
   handlePinMessage in main.go for why this never round-trips through Max. */
.pinned-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 1rem;
  background: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  flex: 0 0 auto;
  cursor: pointer;
}
.pinned-bar:hover { background: rgba(255,255,255,.04); }

/* Brief pulse when jumping to a message (pinned bar, replies, search). */
@keyframes flash-highlight {
  0%, 100% { background-color: transparent; }
  25% { background-color: rgba(var(--primary-color-rgb), .25); }
}
.msg.flash-highlight { animation: flash-highlight 1.2s ease-out; }
.pinned-bar-icon { width: 18px; height: 18px; color: var(--primary-color); flex: 0 0 auto; }
.pinned-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .875rem;
  color: var(--primary-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pinned-bar .btn-icon { width: 28px; height: 28px; flex: 0 0 auto; }
.pinned-bar .btn-icon svg { width: 16px; height: 16px; }

/* Select-mode toolbar replaces the normal topbar content */
.select-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
#select-count { font-size: .9375rem; }

/* Multi-select checkboxes on messages */
.msg-select-checkbox {
  position: absolute;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--secondary-text-color);
  background: rgba(0,0,0,.3);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-select-checkbox svg { width: 14px; height: 14px; color: #fff; opacity: 0; }
.msg.selected .msg-select-checkbox { background: var(--primary-color); border-color: var(--primary-color); }
.msg.selected .msg-select-checkbox svg { opacity: 1; }
.msg.mine .msg-select-checkbox { right: -32px; }
.msg:not(.mine) .msg-select-checkbox { left: -32px; }
.message-list.select-mode .msg { cursor: pointer; }
/* Room for the checkboxes in the gutter. Adds to the column's normal
   centering padding instead of replacing it outright — replacing it with a
   flat 44px (as this used to do) blew away the calc() that keeps the
   reading column centered at var(--chat-width) on wide viewports, handing
   .msg.mine's `align-self: flex-end` a much wider flex container to align
   against and shoving every one of your own messages out to the far right
   of the screen the moment you entered select mode. */
.message-list.select-mode {
  padding-inline: calc(max(.5rem, calc((100% - var(--chat-width)) / 2 + .5rem)) + 34px);
}
/* A soft tint over the bubble, like Telegram, instead of a hard outline ring. */
.msg.selected {
  background-image: linear-gradient(rgba(var(--primary-color-rgb), .18), rgba(var(--primary-color-rgb), .18));
}

/* Inline reply quote shown inside a message that replies to another —
   accent bar + sender name + quoted text, small photo thumbnail if the
   quoted message has one, Telegram-style. Click jumps to that message. */
.msg-reply-quote {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 4px 8px 4px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  max-width: 100%;
}
.msg-reply-quote:hover { background: rgba(255,255,255,.1); }
.msg-reply-quote-bar {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 2.5px;
  border-radius: 2px;
  background: var(--primary-color);
}
.msg.mine .msg-reply-quote-bar { background: rgba(255,255,255,.85); }
.msg-reply-quote-thumb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  flex: 0 0 auto;
}
.msg-reply-quote-body { min-width: 0; overflow: hidden; }
.msg-reply-quote-name {
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--primary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg.mine .msg-reply-quote-name { color: #fff; }
.msg-reply-quote-text {
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--secondary-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg.mine .msg-reply-quote-text { color: rgba(255,255,255,.75); }

/* K .input-search: 44px pill, icon 24px at ~16px */
.input-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  margin-inline: .25rem .25rem;
}
.input-search-icon {
  position: absolute;
  left: 13px;
  top: 10px;
  width: 24px;
  height: 24px;
  color: var(--secondary-text-color);
  opacity: .6;
  pointer-events: none;
  transition: color .15s, opacity .15s;
}
.input-search-input {
  height: 44px;
  min-height: 44px;
  width: 100%;
  padding: 0 1rem 0 47px;
  font-size: 1rem;
  border-radius: 22px;
  border: 1px solid var(--input-search-border-color);
  background: var(--input-search-background-color);
}
.input-search-input::placeholder { color: #9e9e9e; }
.input-search-input:focus {
  background: transparent;
  border-color: var(--primary-color);
  box-shadow: none;
}
.input-search-input:focus ~ .input-search-icon,
.input-search:has(.input-search-input:focus) .input-search-icon { color: var(--primary-color); opacity: 1; }

.sidebar-error {
  font-size: .8125rem;
  line-height: 16px;
  padding: 0 1rem 4px;
  min-height: 0;
}
.sidebar-error:empty { display: none; }

.chatlist {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: 0 .5rem .5rem;
}

/* K .chatlist-chat = .row.row-big.row-with-padding: 72px, avatar 54 @ 9px */
.chat-item {
  position: relative;
  min-height: 72px;
  padding: 9px .75rem 9px 72px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  user-select: none;
  transition: background-color .1s;
}
.chat-item:hover { background: var(--light-filled-secondary-text-color); }
.chat-item.active,
.chat-item.active:hover { background: var(--primary-color); }

.avatar {
  --size: 54px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: linear-gradient(var(--peer-avatar-blue-top), var(--peer-avatar-blue-bottom));
  flex: 0 0 auto;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}
.chat-item .avatar {
  position: absolute;
  left: 9px;
  top: 9px;
}

/* K cycles exactly these 7 peer colors: red, orange, violet, green, cyan, blue, pink */
.chat-item:nth-child(7n+1) div.avatar { background: linear-gradient(var(--peer-avatar-red-top), var(--peer-avatar-red-bottom)); }
.chat-item:nth-child(7n+2) div.avatar { background: linear-gradient(var(--peer-avatar-orange-top), var(--peer-avatar-orange-bottom)); }
.chat-item:nth-child(7n+3) div.avatar { background: linear-gradient(var(--peer-avatar-violet-top), var(--peer-avatar-violet-bottom)); }
.chat-item:nth-child(7n+4) div.avatar { background: linear-gradient(var(--peer-avatar-green-top), var(--peer-avatar-green-bottom)); }
.chat-item:nth-child(7n+5) div.avatar { background: linear-gradient(var(--peer-avatar-cyan-top), var(--peer-avatar-cyan-bottom)); }
.chat-item:nth-child(7n+6) div.avatar { background: linear-gradient(var(--peer-avatar-blue-top), var(--peer-avatar-blue-bottom)); }
.chat-item:nth-child(7n+7) div.avatar { background: linear-gradient(var(--peer-avatar-pink-top), var(--peer-avatar-pink-bottom)); }

.chat-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.chat-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
}
.chat-title {
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  line-height: 22px;
  color: var(--primary-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.chat-time {
  flex: 0 0 auto;
  margin-inline-start: .5rem;
  font-size: .75rem;
  line-height: 20px;
  margin-top: -2px;
  color: var(--secondary-text-color);
}
.chat-preview {
  font-size: 1rem;
  line-height: 22px;
  margin-top: 2px;
  color: var(--secondary-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-preview:empty::before { content: "\00a0"; }
.chat-item.active .chat-title,
.chat-item.active .chat-preview,
.chat-item.active .chat-time { color: #fff; }

/* K "new message" pencil FAB in the sidebar corner */
.new-message-button {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0,0,0,.35);
  transition: background-color .15s, transform .15s;
}
.new-message-button svg { width: 24px; height: 24px; }
.new-message-button:hover { background: #7a67d6; }
.new-message-button:active { transform: scale(.95); }

/* ---------- Right column: chat ---------- */
.message-pane {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--chat-background);
}
/* K's default night wallpaper: the doodle pattern, inverted, over near-black */
.message-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: .045;
  -webkit-mask: url(/pattern.svg) center / 1080px auto repeat;
  mask: url(/pattern.svg) center / 1080px auto repeat;
  pointer-events: none;
}
.message-pane > * { position: relative; }

/* Top bar (K .chat-info: 56px, avatar 42, title 16/500) */
.topbar {
  height: 56px;
  padding: 0 .5rem 0 .75rem;
  background: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  z-index: 2;
}
.topbar:has(#top-status:empty) { display: none; }
.chat-info {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  line-height: 22px;
  color: var(--primary-text-color);
  cursor: pointer;
  /* #top-status is a <button> (opens the profile view) — undo button chrome. */
  background: transparent;
  border: none;
  text-align: left;
  padding: 0;
  font-family: inherit;
}
.chat-info:empty { cursor: default; }
.chat-info .avatar,
.chat-info .avatar.small {
  --size: 42px;
  width: 42px;
  height: 42px;
  font-size: 1rem;
}
.chat-info span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 0 0 auto;
  margin-inline-start: .5rem;
}
.topbar-actions span.btn-icon { cursor: default; }
.topbar-actions span.btn-icon:hover { background: transparent; }

.msg-search-count {
  flex: 0 0 auto;
  color: var(--secondary-text-color);
  font-size: .8125rem;
  margin-inline-end: 4px;
  white-space: nowrap;
}
#msg-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  background: transparent;
  color: var(--primary-text-color);
}

/* Profile view */
.profile-card { max-width: 380px; }
.profile-avatar-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 8px 0 18px;
}
.profile-avatar-row .avatar {
  --size: 96px;
  width: 96px;
  height: 96px;
  font-size: 2rem;
  margin-bottom: 8px;
}
.profile-name { font-size: 1.125rem; font-weight: var(--font-weight-bold); }
.profile-status { font-size: .875rem; color: var(--secondary-text-color); }
.profile-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-field {
  padding: 10px 4px;
  border-top: 1px solid var(--border-color);
}
.profile-field-label {
  font-size: .75rem;
  color: var(--secondary-text-color);
}
.profile-field-value {
  font-size: .9375rem;
  word-break: break-word;
}

/* Message list: centered 728px column, 8px bubble padding (K --chat-bubbles-padding) */
.bubbles {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .5rem max(.5rem, calc((100% - var(--chat-width)) / 2 + .5rem)) .375rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bubbles > :first-child { margin-top: auto; }

.placeholder {
  align-self: center;
  margin: auto !important;
  color: #fff;
  font-size: .875rem;
  line-height: 1.3125;
  background: var(--surface-color);
  border-radius: 1rem;
  padding: 5px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  user-select: none;
}

/* ---------- Bubbles ---------- */
.msg {
  position: relative;
  display: flow-root;
  flex-shrink: 0;
  max-width: min(var(--bubble-max-width), 85%);
  min-width: 56px;
  padding: 4px 8px 5px;
  margin: 0 0 .375rem;
  border-radius: var(--bubble-radius);
  background: var(--message-background-color);
  align-self: flex-start;
  font-size: var(--messages-text-size);
  line-height: var(--line-height);
  color: var(--primary-text-color);
  word-break: break-word;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.msg.mine {
  align-self: flex-end;
  background: var(--message-out-background-color);
}

/* Tail (only on the last bubble of a group) */
.msg::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 11px;
  height: 20px;
  background: inherit;
  -webkit-mask: var(--bubble-tail) no-repeat 0 0 / 11px 20px;
  mask: var(--bubble-tail) no-repeat 0 0 / 11px 20px;
}
.msg:not(.mine) { border-end-start-radius: 0; }
.msg:not(.mine)::after { left: -9px; }
.msg.mine { border-end-end-radius: 0; }
.msg.mine::after { right: -9px; transform: scaleX(-1); }

/* Grouping: consecutive bubbles from the same side sit 2px apart,
   share 6px inner corners, and only the last one carries the tail. */
.msg:not(.mine):has(+ .msg:not(.mine)) {
  margin-bottom: 2px;
  border-end-start-radius: var(--bubble-group-radius);
}
.msg:not(.mine):has(+ .msg:not(.mine))::after { display: none; }
.msg:not(.mine) + .msg:not(.mine) { border-start-start-radius: var(--bubble-group-radius); }

.msg.mine:has(+ .msg.mine) {
  margin-bottom: 2px;
  border-end-end-radius: var(--bubble-group-radius);
}
.msg.mine:has(+ .msg.mine)::after { display: none; }
.msg.mine + .msg.mine { border-start-end-radius: var(--bubble-group-radius); }

/* Text body (generated as a bare <div>) flows inline so the time can
   float to the end of the last line, exactly like K's .message .time */
.msg > div:not([class]) { display: inline; white-space: pre-wrap; }

.msg-time {
  float: right;
  position: relative;
  margin: 6px 0 0 .5rem;
  height: 12px;
  font-size: var(--messages-time-text-size);
  line-height: 12px;
  color: var(--message-time-color);
  user-select: none;
  white-space: nowrap;
  top: 1px;
  display: flex;
  align-items: center;
}
.msg.mine .msg-time { color: var(--message-out-time-color); }

/* Delivery/read ticks (Telegram-style: clock while sending, one check
   once the server has it, two once the other side's read marker passes
   it) — sit right after the timestamp inside the same floated element. */
.tick {
  width: 12px;
  height: 12px;
  margin-inline-start: 3px;
  flex: 0 0 auto;
  color: var(--message-out-time-color);
}
.tick-pending { opacity: .8; }
.tick-read { color: #7dc4fa; }
.tick-failed { color: var(--danger-color); }

/* Emoji picker popover */
.emoji-picker {
  position: absolute;
  bottom: 56px;
  left: 8px;
  z-index: 25;
  width: 320px;
  height: 320px;
  background: var(--surface-color);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.emoji-tabs {
  display: flex;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border-color);
  padding: 4px;
}
.emoji-tab {
  flex: 1 1 0;
  font-size: 18px;
  padding: 6px 0;
  border-radius: 6px;
  background: transparent;
  opacity: .55;
}
.emoji-tab:hover { background: rgba(255,255,255,.08); }
.emoji-tab.active { opacity: 1; background: rgba(255,255,255,.08); }
.emoji-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  align-content: start;
}
.emoji-item {
  font-size: 22px;
  line-height: 1.6;
  padding: 4px;
  border-radius: 6px;
  text-align: center;
  background: transparent;
}
.emoji-item:hover { background: rgba(255,255,255,.08); }

/* Attachments */
.attach-sticker { display: block; max-width: 180px; max-height: 180px; }
.attach-photo,
.attach-video img {
  display: block;
  max-width: 100%;
  max-height: 360px;
  border-radius: inherit;
  object-fit: cover;
}
.attach-video { position: relative; display: block; border-radius: inherit; }
.msg:has(.attach-photo, .attach-video) { padding: 0; overflow: hidden; }
.msg:has(.attach-photo, .attach-video) > div:not([class]),
.msg:has(.attach-photo, .attach-video) .attach-file { display: block; padding: 4px 8px 0; }
.msg:has(.attach-photo, .attach-video) .msg-time { margin: 4px 8px 5px .5rem; }
.msg:has(.attach-photo, .attach-video):not(:has(> div:not([class]))) .msg-time {
  position: absolute;
  right: 6px;
  bottom: 6px;
  margin: 0;
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--message-time-background);
  color: #fff;
  float: none;
}
.attach-video-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.5);
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  padding-left: 3px;
  backdrop-filter: blur(4px);
}
.attach-file { font-size: 1rem; padding: 2px 0; }

/* Sticker-only messages float without a bubble, time in a dark pill */
.msg:has(.attach-sticker) {
  background: transparent;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}
.msg:has(.attach-sticker)::after { display: none; }
.msg:has(.attach-sticker) .msg-time {
  float: none;
  position: absolute;
  right: -4px;
  bottom: 0;
  transform: translateX(100%);
  margin: 0;
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--message-time-background);
  color: #fff;
  top: auto;
}
.msg.mine:has(.attach-sticker) .msg-time { right: auto; left: -4px; transform: translateX(-100%); }

/* ---------- Composer (K .chat-input) ---------- */
.chat-input {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  width: 100%;
  max-width: var(--chat-width);
  margin: 0 auto;
  padding: 0 .5rem 1.25rem;
  flex: 0 0 auto;
}
.chat-input-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--chat-input-height);
  display: flex;
  align-items: center;
  padding: .25rem;
  background: var(--surface-color);
  border-radius: var(--chat-input-border-radius);
  border-end-end-radius: 0;
  box-shadow: 0 1px 8px 1px rgba(0,0,0,.12);
}
.chat-input-wrapper::after {
  content: "";
  position: absolute;
  right: -9px;
  bottom: 0;
  width: 11px;
  height: 20px;
  background: var(--surface-color);
  transform: scaleX(-1);
  -webkit-mask: var(--bubble-tail) no-repeat 0 0 / 11px 20px;
  mask: var(--bubble-tail) no-repeat 0 0 / 11px 20px;
}
.ci-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary-text-color);
  flex: 0 0 auto;
  cursor: pointer;
  transition: background-color .15s ease-in-out;
}
.ci-btn:hover { background: rgba(255,255,255,.08); }
.ci-btn svg { width: 24px; height: 24px; }
.input-message-input,
.chat-input input,
.chat-input textarea {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  max-height: 120px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--primary-text-color);
  padding: .5rem .25rem;
  font-size: var(--messages-text-size);
  line-height: var(--line-height);
  font-family: inherit;
  resize: none;
  overflow-y: auto;
}
.input-message-input { height: 40px; }
.chat-input input:focus,
.chat-input textarea:focus { box-shadow: none; border: none; outline: none; }
.chat-input input::placeholder,
.chat-input textarea::placeholder { color: var(--input-message-placeholder-color); }

/* 48px circle: mic by default, morphs into the primary-colored send plane */
.btn-send {
  width: var(--chat-input-height);
  height: var(--chat-input-height);
  border-radius: 50%;
  background: var(--surface-color);
  color: var(--secondary-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 1px 8px 1px rgba(0,0,0,.12);
}
.btn-send svg { width: 24px; height: 24px; position: absolute; transition: transform .15s, opacity .15s; }
.btn-send { position: relative; }
.btn-send .ic-send { color: var(--primary-color); opacity: 0; transform: scale(.6) rotate(-20deg); }
.btn-send .ic-mic { opacity: 1; transform: scale(1); }
/* Was ":has(input:not(:placeholder-shown))" — #send-input is a <textarea>
   (changed a while back for Shift+Enter multiline support), so that
   selector never matched anything and the button silently never morphed
   from mic to send-plane based on typed text. */
.chat-input:has(textarea:not(:placeholder-shown)) .btn-send .ic-mic { opacity: 0; transform: scale(.6); }
.chat-input:has(textarea:not(:placeholder-shown)) .btn-send .ic-send { opacity: 1; transform: scale(1) rotate(0); }
.btn-send:hover { background: #262626; }
.btn-send:active { transform: scale(.96); }

/* Locked voice recording forces the send-plane look regardless of the
   (empty) textarea, since #send-btn now finalizes/sends the recording. */
.chat-input.voice-locked .btn-send .ic-mic { opacity: 0; transform: scale(.6); }
.chat-input.voice-locked .btn-send .ic-send { opacity: 1; transform: scale(1) rotate(0); }

/* ---------- Voice message recording (Telegram-style: hold to record and
   release to send; drag up to lock hands-free; drag left to cancel) ---------- */
.chat-input.voice-recording .chat-input-wrapper { display: none; }
.voice-recorder {
  display: none;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--chat-input-height);
  padding: .25rem .75rem;
  background: var(--surface-color);
  border-radius: var(--chat-input-border-radius);
  border-end-end-radius: 0;
  box-shadow: 0 1px 8px 1px rgba(0,0,0,.12);
}
.chat-input.voice-recording .voice-recorder { display: flex; }
.voice-recorder-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger-color);
  flex: 0 0 auto;
  animation: voice-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.voice-timer { font-variant-numeric: tabular-nums; color: var(--primary-text-color); flex: 0 0 auto; }
.voice-slide-hint {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  color: var(--secondary-text-color);
  font-size: .875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voice-lock-hint {
  flex: 0 0 auto;
  color: var(--secondary-text-color);
  display: flex;
  align-items: center;
  transition: transform .15s;
}
.voice-lock-hint svg { width: 20px; height: 20px; }
.chat-input.voice-locked .voice-slide-hint,
.chat-input.voice-locked .voice-lock-hint { display: none; }

/* Legacy QR image support */
img.qr { width: 280px; height: 280px; background: white; padding: 12px; border-radius: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --chat-width: 100%; }
}
@media (max-width: 900px) {
  .sidebar-left { width: 300px; }
}
@media (max-width: 640px) {
  .sidebar-left { width: 40vw; min-width: 220px; }
  .chat-item { min-height: 64px; padding-left: 62px; }
  .chat-item .avatar { --size: 46px; width: 46px; height: 46px; font-size: 17px; }
  .chat-title, .chat-preview { font-size: .9375rem; }
}