:root {
  --app-viewport-height: 100vh;
  --app-viewport-offset-top: 0px;
  --page-background: #dfe8ec;
  --panel-background: var(--surface-strong);
  --sidebar-background: #eef4f6;
  --chat-background: #dbe7eb;
  --chat-pattern: rgba(71, 107, 119, 0.08);
  --chat-glow-one: rgba(255, 255, 255, 0.42);
  --chat-glow-two: rgba(79, 127, 143, 0.16);
  --custom-chat-background-image: none;
  --custom-chat-background-size: cover;
  --custom-chat-background-overlay: 0.18;
  --text-primary: #203037;
  --text-secondary: #6c7f87;
  --border-color: #d4e0e4;
  --accent-color: #4f7f8f;
  --accent-color-dark: #3d6876;
  --accent-soft: #d9e9ee;
  --own-message-background: #cfe5ec;
  --own-message-opacity-percent: 88%;
  --partner-message-background: var(--surface-strong);
  --message-text-color: var(--text-primary);
  --message-author-color: var(--accent-color-dark);
  --chat-message-font-family: Arial, sans-serif;
  --chat-message-font-size: 15px;
  --message-bubble-radius: 15px;
  --message-bubble-tail-radius: 5px;
  --message-spacing: 8px;
  --danger-color: #a84848;
  --danger-soft: #f6e4e4;
  --surface-strong: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.72);
  --surface-floating: rgba(255, 255, 255, 0.78);
  --surface-floating-strong: rgba(255, 255, 255, 0.96);
  --input-background: var(--surface-strong);
  --hover-background: #edf3f5;
  --muted-button-background: #e8eef0;
  --date-background: rgba(255, 255, 255, 0.76);
  --shell-border: rgba(255, 255, 255, 0.75);
  --shadow-soft: 0 18px 45px rgba(32, 58, 68, 0.14);
  --search-highlight-background: #ffe28a;
  --search-current-outline: #d89b22;
}

:where(html, body)[data-theme="ocean"] {
  color-scheme: dark;
  --page-background: #07151c;
  --panel-background: #10242c;
  --sidebar-background: #132b34;
  --chat-background: #0b2028;
  --chat-pattern: rgba(113, 183, 201, 0.12);
  --chat-glow-one: rgba(80, 166, 187, 0.16);
  --chat-glow-two: rgba(17, 78, 95, 0.42);
  --text-primary: #e6f1f3;
  --text-secondary: #9eb5bd;
  --border-color: #29434c;
  --accent-color: #4e9fb3;
  --accent-color-dark: #7bc5d5;
  --accent-soft: #1d4652;
  --own-message-background: #1c5260;
  --partner-message-background: #183640;
  --danger-color: #ef8a8a;
  --danger-soft: #4a292d;
  --surface-strong: #17313a;
  --surface-soft: rgba(29, 62, 73, 0.82);
  --surface-floating: rgba(23, 49, 58, 0.9);
  --surface-floating-strong: rgba(16, 36, 44, 0.97);
  --input-background: #17313a;
  --hover-background: #21434e;
  --muted-button-background: #29434c;
  --date-background: rgba(23, 49, 58, 0.88);
  --shell-border: rgba(255, 255, 255, 0.08);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.34);
  --search-highlight-background: #9f7624;
  --search-current-outline: #d5a642;
}

:where(html, body)[data-theme="coral"] {
  --page-background: #f2e6df;
  --panel-background: #fffaf7;
  --sidebar-background: #f8eee8;
  --chat-background: #f1dfd5;
  --chat-pattern: rgba(157, 94, 73, 0.09);
  --chat-glow-one: rgba(255, 255, 255, 0.52);
  --chat-glow-two: rgba(194, 116, 91, 0.15);
  --text-primary: #44302a;
  --text-secondary: #8a6c62;
  --border-color: #ead4ca;
  --accent-color: #c17661;
  --accent-color-dark: #9d5947;
  --accent-soft: #f2d9cf;
  --own-message-background: #f1cfc1;
  --partner-message-background: #fffaf7;
  --danger-color: #ad4c4c;
  --danger-soft: #f6dddd;
  --surface-strong: #fffaf7;
  --surface-soft: rgba(255, 250, 247, 0.78);
  --surface-floating: rgba(255, 250, 247, 0.84);
  --surface-floating-strong: rgba(255, 250, 247, 0.97);
  --input-background: #fffaf7;
  --hover-background: #f5e6df;
  --muted-button-background: #f0e0d8;
  --date-background: rgba(255, 250, 247, 0.82);
  --shell-border: rgba(255, 255, 255, 0.75);
  --shadow-soft: 0 18px 45px rgba(91, 58, 46, 0.14);
}

:where(html, body)[data-theme="lavender"] {
  --page-background: #e9e5f1;
  --panel-background: #fdfbff;
  --sidebar-background: #f1edf7;
  --chat-background: #e5def0;
  --chat-pattern: rgba(103, 82, 137, 0.09);
  --chat-glow-one: rgba(255, 255, 255, 0.5);
  --chat-glow-two: rgba(132, 103, 171, 0.15);
  --text-primary: #352f40;
  --text-secondary: #766c83;
  --border-color: #ddd5e8;
  --accent-color: #836da2;
  --accent-color-dark: #65527f;
  --accent-soft: #e2d8ee;
  --own-message-background: #dcd0eb;
  --partner-message-background: #fdfbff;
  --danger-color: #a74f64;
  --danger-soft: #f3dfe5;
  --surface-strong: #fdfbff;
  --surface-soft: rgba(253, 251, 255, 0.76);
  --surface-floating: rgba(253, 251, 255, 0.83);
  --surface-floating-strong: rgba(253, 251, 255, 0.97);
  --input-background: #fdfbff;
  --hover-background: #eee8f4;
  --muted-button-background: #e9e2ef;
  --date-background: rgba(253, 251, 255, 0.8);
  --shell-border: rgba(255, 255, 255, 0.8);
  --shadow-soft: 0 18px 45px rgba(62, 48, 80, 0.14);
}

:where(html, body)[data-theme="graphite"] {
  --page-background: #dadddf;
  --panel-background: #f8f9fa;
  --sidebar-background: #eaedef;
  --chat-background: #d9dee1;
  --chat-pattern: rgba(73, 83, 90, 0.09);
  --chat-glow-one: rgba(255, 255, 255, 0.5);
  --chat-glow-two: rgba(87, 101, 110, 0.14);
  --text-primary: #282f33;
  --text-secondary: #6c767c;
  --border-color: #d0d6da;
  --accent-color: #667680;
  --accent-color-dark: #4d5c65;
  --accent-soft: #d8dfe3;
  --own-message-background: #ced9df;
  --partner-message-background: #f8f9fa;
  --danger-color: #a44b4b;
  --danger-soft: #f1dddd;
  --surface-strong: #f8f9fa;
  --surface-soft: rgba(248, 249, 250, 0.78);
  --surface-floating: rgba(248, 249, 250, 0.84);
  --surface-floating-strong: rgba(248, 249, 250, 0.97);
  --input-background: #f8f9fa;
  --hover-background: #e8ecee;
  --muted-button-background: #e2e6e8;
  --date-background: rgba(248, 249, 250, 0.82);
  --shell-border: rgba(255, 255, 255, 0.78);
  --shadow-soft: 0 18px 45px rgba(39, 48, 54, 0.16);
}

:where(html, body)[data-theme="sage"] {
  --page-background: #dfe5dc;
  --panel-background: #fbfcf8;
  --sidebar-background: #edf2e9;
  --chat-background: #dce6d8;
  --chat-pattern: rgba(83, 108, 77, 0.1);
  --chat-glow-one: rgba(255, 255, 255, 0.48);
  --chat-glow-two: rgba(104, 137, 94, 0.15);
  --text-primary: #2f392c;
  --text-secondary: #73806e;
  --border-color: #d4ded0;
  --accent-color: #708d67;
  --accent-color-dark: #536f4c;
  --accent-soft: #dce8d7;
  --own-message-background: #d2e3cc;
  --partner-message-background: #fbfcf8;
  --danger-color: #a64d4d;
  --danger-soft: #f2dddd;
  --surface-strong: #fbfcf8;
  --surface-soft: rgba(251, 252, 248, 0.78);
  --surface-floating: rgba(251, 252, 248, 0.84);
  --surface-floating-strong: rgba(251, 252, 248, 0.97);
  --input-background: #fbfcf8;
  --hover-background: #e8eee5;
  --muted-button-background: #e2e9df;
  --date-background: rgba(251, 252, 248, 0.82);
  --shell-border: rgba(255, 255, 255, 0.78);
  --shadow-soft: 0 18px 45px rgba(52, 70, 47, 0.14);
}

:where(html, body)[data-theme="forest"] {
  color-scheme: dark;
  --page-background: #08100a;
  --panel-background: #112016;
  --sidebar-background: #0f1c13;
  --chat-background: #0a150d;
  --chat-pattern: rgba(144, 196, 109, 0.12);
  --chat-glow-one: rgba(196, 244, 143, 0.10);
  --chat-glow-two: rgba(77, 120, 66, 0.32);
  --text-primary: #edf8e7;
  --text-secondary: #a9c3a0;
  --border-color: #294131;
  --accent-color: #84b56c;
  --accent-color-dark: #cbe8a6;
  --accent-soft: #203726;
  --own-message-background: #2b5132;
  --partner-message-background: #183020;
  --danger-color: #ef9b9b;
  --danger-soft: #4b2f33;
  --surface-strong: #183020;
  --surface-soft: rgba(24, 48, 32, 0.84);
  --surface-floating: rgba(18, 37, 24, 0.91);
  --surface-floating-strong: rgba(14, 30, 19, 0.97);
  --input-background: #173021;
  --hover-background: #26422d;
  --muted-button-background: #2f4e37;
  --date-background: rgba(18, 39, 24, 0.9);
  --shell-border: rgba(203, 232, 166, 0.10);
  --shadow-soft: 0 18px 52px rgba(0, 0, 0, 0.42);
  --search-highlight-background: #d8e99a;
  --search-current-outline: #cbe8a6;
}

:where(html, body)[data-theme="sand"] {
  --page-background: #ece4d6;
  --panel-background: #fffdf8;
  --sidebar-background: #f5eee3;
  --chat-background: #e9dfcf;
  --chat-pattern: rgba(133, 104, 67, 0.1);
  --chat-glow-one: rgba(255, 255, 255, 0.5);
  --chat-glow-two: rgba(164, 126, 77, 0.15);
  --text-primary: #40372b;
  --text-secondary: #847565;
  --border-color: #e4d8c7;
  --accent-color: #a47e55;
  --accent-color-dark: #7c5d3c;
  --accent-soft: #eee0cc;
  --own-message-background: #ead7bc;
  --partner-message-background: #fffdf8;
  --danger-color: #a94d4d;
  --danger-soft: #f3dddd;
  --surface-strong: #fffdf8;
  --surface-soft: rgba(255, 253, 248, 0.78);
  --surface-floating: rgba(255, 253, 248, 0.84);
  --surface-floating-strong: rgba(255, 253, 248, 0.97);
  --input-background: #fffdf8;
  --hover-background: #f2e9dc;
  --muted-button-background: #ece2d3;
  --date-background: rgba(255, 253, 248, 0.82);
  --shell-border: rgba(255, 255, 255, 0.8);
  --shadow-soft: 0 18px 45px rgba(76, 60, 39, 0.14);
}

:where(html, body)[data-theme="rose"] {
  --page-background: #eadfe1;
  --panel-background: #fffafb;
  --sidebar-background: #f5ebed;
  --chat-background: #eadbdd;
  --chat-pattern: rgba(128, 82, 91, 0.09);
  --chat-glow-one: rgba(255, 255, 255, 0.5);
  --chat-glow-two: rgba(155, 103, 114, 0.15);
  --text-primary: #423337;
  --text-secondary: #816f73;
  --border-color: #e2d2d6;
  --accent-color: #a16f7a;
  --accent-color-dark: #7d525d;
  --accent-soft: #eedde1;
  --own-message-background: #e7cfd5;
  --partner-message-background: #fffafb;
  --danger-color: #a64754;
  --danger-soft: #f4dfe3;
  --surface-strong: #fffafb;
  --surface-soft: rgba(255, 250, 251, 0.78);
  --surface-floating: rgba(255, 250, 251, 0.84);
  --surface-floating-strong: rgba(255, 250, 251, 0.97);
  --input-background: #fffafb;
  --hover-background: #f2e5e8;
  --muted-button-background: #ece0e3;
  --date-background: rgba(255, 250, 251, 0.82);
  --shell-border: rgba(255, 255, 255, 0.8);
  --shadow-soft: 0 18px 45px rgba(72, 47, 54, 0.14);
}

:where(html, body)[data-theme="night"] {
  color-scheme: dark;
  --page-background: #111820;
  --panel-background: #202a34;
  --sidebar-background: #26323d;
  --chat-background: #18232d;
  --chat-pattern: rgba(153, 182, 203, 0.11);
  --chat-glow-one: rgba(110, 153, 184, 0.16);
  --chat-glow-two: rgba(49, 87, 116, 0.38);
  --text-primary: #edf2f5;
  --text-secondary: #aab8c2;
  --border-color: #3a4854;
  --accent-color: #6f94ad;
  --accent-color-dark: #9fc0d3;
  --accent-soft: #324858;
  --own-message-background: #35566a;
  --partner-message-background: #2a3944;
  --danger-color: #ef9299;
  --danger-soft: #4a3035;
  --surface-strong: #2a3944;
  --surface-soft: rgba(42, 57, 68, 0.82);
  --surface-floating: rgba(38, 50, 61, 0.9);
  --surface-floating-strong: rgba(32, 42, 52, 0.97);
  --input-background: #2a3944;
  --hover-background: #354753;
  --muted-button-background: #3a4854;
  --date-background: rgba(42, 57, 68, 0.88);
  --shell-border: rgba(255, 255, 255, 0.08);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.34);
}

:where(html, body)[data-theme="volcanic"] {
  color-scheme: dark;
  --page-background: #140905;
  --panel-background: #23110d;
  --sidebar-background: #1d0d0a;
  --chat-background: #160907;
  --chat-pattern: rgba(255, 143, 51, 0.12);
  --chat-glow-one: rgba(255, 187, 102, 0.12);
  --chat-glow-two: rgba(125, 38, 8, 0.36);
  --text-primary: #fff2e8;
  --text-secondary: #d9b09a;
  --border-color: #5f2d1b;
  --accent-color: #ff8a3d;
  --accent-color-dark: #ffc08b;
  --accent-soft: #4a2318;
  --own-message-background: #6a301d;
  --partner-message-background: #341915;
  --danger-color: #ff9c9c;
  --danger-soft: #4d292a;
  --surface-strong: #301714;
  --surface-soft: rgba(48, 23, 20, 0.84);
  --surface-floating: rgba(36, 18, 14, 0.92);
  --surface-floating-strong: rgba(29, 13, 10, 0.98);
  --input-background: #311713;
  --hover-background: #452017;
  --muted-button-background: #5a2b1d;
  --date-background: rgba(46, 20, 16, 0.9);
  --shell-border: rgba(255, 192, 139, 0.10);
  --shadow-soft: 0 18px 52px rgba(0, 0, 0, 0.44);
  --search-highlight-background: #ffc26e;
  --search-current-outline: #ff9a4b;
}

:where(html, body)[data-theme="omut"] {
  color-scheme: dark;
  --page-background: #061715;
  --panel-background: #0d2723;
  --sidebar-background: #0a211e;
  --chat-background: #071d1b;
  --chat-pattern: rgba(58, 225, 198, 0.09);
  --chat-glow-one: rgba(34, 205, 184, 0.13);
  --chat-glow-two: rgba(10, 77, 67, 0.42);
  --text-primary: #e8fffb;
  --text-secondary: #9bc8c0;
  --border-color: #24534d;
  --accent-color: #23cdb8;
  --accent-color-dark: #72e7d3;
  --accent-soft: #153e38;
  --own-message-background: #13564d;
  --partner-message-background: #17352f;
  --danger-color: #f08f98;
  --danger-soft: #472d31;
  --surface-strong: #17352f;
  --surface-soft: rgba(18, 54, 48, 0.84);
  --surface-floating: rgba(11, 39, 35, 0.93);
  --surface-floating-strong: rgba(8, 30, 27, 0.98);
  --input-background: #102f2a;
  --hover-background: #19453e;
  --muted-button-background: #1d4d45;
  --date-background: rgba(14, 47, 41, 0.9);
  --shell-border: rgba(104, 238, 216, 0.1);
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.42);
}
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

@supports (height: 100dvh) {
  :root {
    --app-viewport-height: 100dvh;
  }
}

body {
  min-width: 320px;
  margin: 0;
  padding: 16px;
  overflow: hidden;
  background: var(--page-background);
  color: var(--text-primary);
  font-family: Arial, sans-serif;
}

button,
select,
textarea {
  font: inherit;
}

button {
  border: none;
  cursor: pointer;
}

button:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(79, 127, 143, 0.28);
  outline-offset: 2px;
}

.app-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  width: min(1180px, 100%);
  height: calc(100vh - 32px);
  min-height: 560px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--panel-background);
  border: 1px solid var(--shell-border);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}

.app-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 16px 16px;
  background: var(--sidebar-background);
  border-right: 1px solid var(--border-color);
}

.brand-block {
  display: grid;
  align-items: center;
  grid-template-columns:
    46px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 0 8px 20px;
}

.brand-text {
  min-width: 0;
}

.sidebar-controls {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
}

.sidebar-control-button,
.sidebar-open-button {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border-radius: 9px;
  background: var(--hover-background);
  color: var(--accent-color-dark);
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

.sidebar-control-button:hover,
.sidebar-open-button:hover {
  background: var(--accent-soft);
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 25px;
}

.brand-logo img {
  display: block;
  width: 36px;
  height: 36px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(4, 31, 46, 0.28));
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 24px;
  line-height: 1.1;
}

.brand-block p {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 13px;
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}

.profile-avatar,
.chat-list-avatar,
.chat-header-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(145deg, #7aa6b1, #4f7f8f);
  color: #ffffff;
  font-weight: bold;
}

.profile-avatar {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: visible;
  border: none;
  font-size: 20px;
  line-height: 0;
}

.profile-avatar:hover {
  box-shadow: 0 0 0 4px rgba(79, 127, 143, 0.16);
}

#profile-avatar-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

#chat-header-avatar-image {
  position: absolute;
  inset: -1px;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  clip-path: circle(50% at 50% 50%);
}

#profile-avatar-image[hidden],
#profile-avatar-fallback[hidden],
#chat-header-avatar-image[hidden],
#chat-header-avatar-fallback[hidden] {
  display: none;
}

.profile-avatar-edit-mark {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 2px solid var(--sidebar-background);
  border-radius: 50%;
  background: var(--accent-color-dark);
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
}

.profile-controls {
  min-width: 0;
  flex: 1;
}

.profile-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.profile-summary-text {
  min-width: 0;
  flex: 1;
}

#profile-display-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#profile-status {
  display: block;
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#profile-status[hidden] {
  display: none;
}

.profile-summary-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.profile-edit-button {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent-color-dark);
  font-size: 17px;
  line-height: 1;
}

.profile-edit-button:hover {
  background: var(--accent-soft);
}

.profile-controls label {
  display: block;
  margin-bottom: 5px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: bold;
}

#user-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--text-primary);
  font-size: 15px;
}

.sidebar-section-title {
  padding: 0 8px 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chat-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.chat-list-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 11px;
  padding: 11px 10px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.chat-list-item:hover {
  background: var(--surface-soft);
}

.chat-list-item-active,
.chat-list-item-active:hover {
  /* Активный чат оформлен в том же спокойном стиле,
     что и карточка основного профиля в боковой панели. */
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--border-color);
}

.chat-list-item-unread:not(.chat-list-item-active) {
  background: var(--surface-soft);
  box-shadow:
    inset 3px 0 0 var(--accent-color);
}

.chat-list-item-unread:not(.chat-list-item-active):hover {
  background: var(--surface-strong);
}

.chat-list-item:disabled {
  cursor: wait;
  opacity: 0.72;
}

.chat-list-avatar {
  position: relative;
  width: 46px;
  height: 46px;
  font-size: 18px;
}

.chat-list-avatar-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.chat-list-item-direct .chat-list-avatar {
  box-shadow:
    0 0 0 2px var(--surface-strong),
    0 0 0 3px var(--accent-soft);
}

.chat-list-unread-badge-compact {
  display: none;
}

.chat-list-content {
  display: block;
  min-width: 0;
  flex: 1;
}

.chat-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 8px;
}

.chat-list-row strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-list-row > span,
.chat-list-preview {
  color: var(--text-secondary);
  font-size: 12px;
}

.chat-list-row > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.chat-list-time:empty {
  display: none;
}

.chat-list-unread-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
}

.chat-list-item-unread .chat-list-row strong,
.chat-list-item-unread .chat-list-preview {
  color: var(--text-primary);
  font-weight: bold;
}

.chat-list-preview {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-footer {
  padding: 14px 8px 0;
}

#connection-status,
#partner-status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: bold;
}

.status-online {
  background: #dcefdc;
  color: #256029;
}

.status-offline {
  background: #f5dddd;
  color: #8b2e2e;
}

.chat-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: var(--panel-background);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px 20px;
  background: var(--surface-floating-strong);
  border-bottom: 1px solid var(--border-color);
}

.sidebar-open-button {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 20px;
}

.sidebar-open-button[hidden] {
  display: none;
}

.chat-header-avatar {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  line-height: 0;
  cursor: default;
  transition:
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.chat-header-avatar:disabled {
  cursor: default;
  opacity: 1;
}

.chat-header-avatar-clickable {
  cursor: zoom-in;
}

.chat-header-avatar-clickable:hover {
  box-shadow: 0 0 0 4px rgba(79, 127, 143, 0.16);
  transform: scale(1.03);
}

.chat-header-avatar::after,
.mobile-compact-chat-avatar::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 4;
  width: 11px;
  height: 11px;
  border: 2px solid var(--surface-floating-strong);
  border-radius: 50%;
  background: #99a5aa;
  box-shadow: 0 1px 4px rgba(15, 35, 43, 0.24);
  opacity: 0;
  pointer-events: none;
  transition:
    background 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
  transform: scale(0.72);
}

.chat-header-avatar.avatar-presence-online::after,
.mobile-compact-chat-avatar.avatar-presence-online::after {
  background: #39b85a;
  opacity: 1;
  transform: scale(1);
}

.chat-header-avatar.avatar-presence-offline::after,
.mobile-compact-chat-avatar.avatar-presence-offline::after {
  background: #98a3a8;
  opacity: 1;
  transform: scale(1);
}

.mobile-room-switcher {
  display: none;
}

.chat-header-info {
  min-width: 0;
  flex: 1;
}

.chat-header-info h2 {
  font-size: 17px;
  line-height: 1.25;
}

.chat-header-statuses {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 27px;
  margin-top: 4px;
  overflow: hidden;
}

#partner-status {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-profile {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
}

.status-typing {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
}

.chat-header-room-actions {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
}

.chat-header-room-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 11px;
  background: var(--hover-background);
  color: var(--accent-color-dark);
  font-size: 23px;
  font-weight: bold;
  line-height: 1;
}

.chat-header-room-button:hover {
  background: var(--accent-soft);
}

.chat-header-room-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.room-actions-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1600;
  display: flex;
  width: 220px;
  padding: 7px;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-floating-strong);
  box-shadow: 0 16px 38px rgba(15, 34, 42, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.room-actions-menu[hidden] {
  display: none;
}

.room-actions-menu-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  gap: 7px;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
  text-align: left;
}

.room-actions-menu-item:hover {
  background: var(--hover-background);
}

.room-actions-menu-item[hidden] {
  display: none;
}

.room-actions-menu-item:disabled {
  cursor: default;
  opacity: 0.42;
}

.room-actions-menu-item > span:first-child {
  display: grid;
  place-items: center;
  color: var(--accent-color-dark);
  font-size: 17px;
}

.message-search-toggle-button {
  font-size: 17px;
}

.room-participants-button {
  color: var(--accent-color-dark);
}

.room-participants-icon {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-header-statuses[hidden],
.chat-header-avatar[hidden],
.mobile-compact-chat-avatar[hidden],
.mobile-compact-chat-subtitle[hidden] {
  display: none !important;
}

.message-search-toggle-button-active,
.message-search-toggle-button-active:hover {
  background: var(--accent-color);
  color: #ffffff;
}

.chat-workspace {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--chat-background);
}

/*
  Единый фоновый слой сохраняет исходную высоту окна чата.
  Мобильная клавиатура закрывает его нижнюю часть, но не
  уменьшает и не масштабирует изображение заново.
*/
.chat-workspace::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: var(--chat-wallpaper-height, 100%);
  min-height: 100%;
  pointer-events: none;
  background-position: center;
  background-repeat: repeat;
  transform: translateZ(0);
  backface-visibility: hidden;
}

:where(html, body)[data-chat-background="bubbles"]
  .chat-workspace::before {
  background-image:
    radial-gradient(
      circle at 15px 15px,
      var(--chat-pattern) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle at 45px 45px,
      var(--chat-pattern) 2px,
      transparent 2px
    );
  background-position: 0 0, 0 0;
  background-size: 60px 60px;
}

:where(html, body)[data-chat-background="waves"]
  .chat-workspace::before {
  background-image:
    radial-gradient(
      ellipse at 0 50%,
      transparent 0 18px,
      var(--chat-pattern) 19px 20px,
      transparent 21px
    ),
    radial-gradient(
      ellipse at 100% 50%,
      transparent 0 18px,
      var(--chat-pattern) 19px 20px,
      transparent 21px
    );
  background-position: 0 0, 26px 14px;
  background-size: 52px 28px;
}

:where(html, body)[data-chat-background="scales"]
  .chat-workspace::before {
  background-image:
    radial-gradient(
      circle at 50% 0,
      transparent 0 16px,
      var(--chat-pattern) 17px 18px,
      transparent 19px
    ),
    radial-gradient(
      circle at 50% 100%,
      transparent 0 16px,
      var(--chat-pattern) 17px 18px,
      transparent 19px
    );
  background-position: 0 0, 18px 18px;
  background-size: 36px 36px;
}

:where(html, body)[data-chat-background="mist"]
  .chat-workspace::before {
  background-image:
    radial-gradient(
      circle at 18% 22%,
      var(--chat-glow-one),
      transparent 36%
    ),
    radial-gradient(
      circle at 82% 72%,
      var(--chat-glow-two),
      transparent 42%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

:where(html, body)[data-chat-background="ripples"]
  .chat-workspace::before {
  background-image:
    repeating-radial-gradient(
      circle at 24px 24px,
      transparent 0 9px,
      var(--chat-pattern) 10px 11px,
      transparent 12px 24px
    );
  background-size: 48px 48px;
}

:where(html, body)[data-chat-background="current"]
  .chat-workspace::before {
  background-image:
    repeating-linear-gradient(
      145deg,
      transparent 0 18px,
      var(--chat-pattern) 19px 20px,
      transparent 21px 39px
    );
  background-size: 56px 56px;
}

:where(html, body)[data-chat-background="speckles"]
  .chat-workspace::before {
  background-image:
    radial-gradient(
      circle at 10px 14px,
      var(--chat-pattern) 1.5px,
      transparent 1.8px
    ),
    radial-gradient(
      circle at 31px 34px,
      var(--chat-pattern) 1px,
      transparent 1.4px
    ),
    radial-gradient(
      circle at 42px 9px,
      var(--chat-pattern) 1px,
      transparent 1.4px
    );
  background-size: 52px 44px;
}

:where(html, body)[data-chat-background="lights"]
  .chat-workspace::before {
  background-image:
    radial-gradient(
      circle at 20% 18%,
      var(--chat-glow-one),
      transparent 28%
    ),
    radial-gradient(
      circle at 76% 72%,
      var(--chat-glow-two),
      transparent 34%
    ),
    radial-gradient(
      circle at 52% 38%,
      var(--chat-pattern),
      transparent 18%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

:where(html, body)[data-chat-background="plain"]
  .chat-workspace::before {
  background-image: none;
}

:where(html, body)[data-chat-background="custom"]
  .chat-workspace::before {
  background-image:
    linear-gradient(
      rgb(
        0 0 0 /
        var(--custom-chat-background-overlay)
      ),
      rgb(
        0 0 0 /
        var(--custom-chat-background-overlay)
      )
    ),
    var(--custom-chat-background-image);
  background-position:
    center,
    center;
  background-repeat:
    no-repeat,
    no-repeat;
  background-size:
    100% 100%,
    var(--custom-chat-background-size);
  will-change: transform;
}

.chat-workspace > :not(.scroll-to-bottom-button) {
  position: relative;
  z-index: 1;
}

.message-search-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 14px 0;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-floating-strong);
  box-shadow: 0 5px 16px rgba(44, 72, 82, 0.11);
}

.message-search-panel[hidden] {
  display: none;
}

.message-search-field {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-background);
}

.message-search-field > span {
  flex: 0 0 auto;
  font-size: 14px;
}

#message-search-input {
  min-width: 0;
  min-height: 36px;
  flex: 1;
  padding: 7px 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
}

#message-search-input::placeholder {
  color: var(--text-secondary);
}

.message-search-field:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(79, 127, 143, 0.16);
}

.message-search-result {
  flex: 0 0 auto;
  min-width: 76px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.message-search-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.message-search-actions button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 9px;
  background: var(--hover-background);
  color: var(--accent-color-dark);
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

.message-search-actions button:hover:not(:disabled) {
  background: var(--accent-soft);
}

.message-search-actions button:disabled {
  cursor: default;
  opacity: 0.4;
}

#messages li.message-search-match {
  box-shadow:
    0 2px 6px rgba(41, 69, 79, 0.08),
    0 0 0 1px rgba(216, 155, 34, 0.52);
}

#messages li.message-search-current {
  outline: 3px solid var(--search-current-outline);
  outline-offset: 2px;
}

.message-search-highlight {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--search-highlight-background);
  color: inherit;
}



.message-context-menu {
  position: fixed;
  z-index: 1600;
  display: flex;
  width: max-content;
  min-width: 205px;
  max-width: calc(100vw - 20px);
  padding: 7px;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  background: var(--surface-floating-strong);
  box-shadow: 0 12px 34px rgba(26, 47, 56, 0.28);
  backdrop-filter: blur(14px);
}

.message-context-menu[hidden] {
  display: none;
}

.message-context-reactions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 1px 1px 3px;
}

.message-context-reactions[hidden],
.message-context-reaction-more[hidden],
.message-context-reactions[hidden] +
  .message-context-reaction-separator {
  display: none;
}

.message-context-reaction-quick,
.message-context-reaction-more {
  display: grid;
  grid-template-columns: repeat(5, 38px);
  justify-content: center;
  gap: 4px;
}

.message-context-reaction-more {
  grid-template-columns: repeat(4, 38px);
  padding-top: 2px;
}

.message-context-reaction-button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease;
}

.message-context-reaction-button:hover,
.message-context-reaction-button:focus-visible {
  background: var(--hover-background);
  transform: translateY(-1px);
}

.message-context-reaction-button.is-current {
  border-color: var(--accent-color);
  background: var(--accent-soft);
}

.message-context-reaction-more-toggle {
  color: var(--accent-color-dark);
  font-size: 24px;
  font-weight: 700;
}

.message-context-reaction-separator {
  margin-top: 1px;
}

.message-context-option {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.message-context-option:hover,
.message-context-option:focus-visible {
  background: var(--hover-background);
}

.message-context-separator {
  height: 1px;
  margin: 3px 5px;
  background: var(--border-color);
}

.message-context-separator[hidden],
.message-context-option[hidden] {
  display: none;
}

.message-context-danger {
  color: var(--danger-color);
}

#messages li.message-context-active {
  box-shadow:
    0 2px 6px rgba(41, 69, 79, 0.08),
    0 0 0 2px var(--accent-color);
}

#message-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 14px 0;
  padding: 9px 11px;
  background: var(--surface-floating-strong);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(44, 72, 82, 0.1);
}

#message-selection-bar[hidden] {
  display: none;
}

#message-selection-count {
  color: var(--accent-color-dark);
  font-size: 14px;
  font-weight: bold;
}

.message-selection-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  margin-left: auto;
}

#message-selection-bar button {
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 13px;
}

#message-selection-select-all {
  background: var(--muted-button-background);
  color: var(--text-primary);
}

#message-selection-select-all:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
}

#message-selection-delete-everyone {
  background: var(--danger-color);
}

#message-selection-bar button:disabled {
  background: #c3cdd1;
  color: #758289;
  cursor: default;
  opacity: 0.8;
}

#messages {
  min-height: 0;
  flex: 1;
  margin: 0;
  padding: 14px 18px 18px;
  overflow-y: auto;
  overflow-wrap: anywhere;
  list-style: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#messages::-webkit-scrollbar,
#message-input::-webkit-scrollbar,
.chat-list::-webkit-scrollbar {
  display: none;
}

.scroll-to-bottom-button {
  position: absolute;
  right: 24px;
  bottom: 88px;
  z-index: 45;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--surface-floating-strong);
  color: var(--accent-color-dark);
  box-shadow: 0 7px 22px rgba(32, 58, 68, 0.2);
  font-size: 25px;
  font-weight: bold;
  line-height: 1;
}

.scroll-to-bottom-icon {
  display: block;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(1px);
}

.scroll-to-bottom-button:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.scroll-to-bottom-button[hidden] {
  display: none;
}

#messages li {
  position: relative;
  width: fit-content;
  max-width: min(76%, 620px);
  margin-bottom: var(--message-spacing);
  padding: 9px 38px 8px 12px;
  overflow: visible;
  border-radius: var(--message-bubble-radius);
  font-family: var(--chat-message-font-family);
  font-size: var(--chat-message-font-size);
  box-shadow: 0 2px 6px rgba(41, 69, 79, 0.08);
  line-height: 1.4;
  white-space: pre-wrap;
}

/*
  Альбомы (Этап 2): сетка для сообщений одной пачки.
  Каждое фото внутри — по-прежнему полноценное сообщение
  (свой li, своё меню, своё удаление), контейнер отвечает
  только за раскладку.

  Важно: селекторы обязательно с префиксом #messages — иначе
  базовые правила пузыря (#messages li) перебивают их по весу,
  и плитки остаются с собственным фоном, отступами и своими
  пропорциями вместо аккуратной сетки.
*/
#messages .message-album-group {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 2px;
  width: min(76%, 420px);
  margin-bottom: var(--message-spacing);
  border-radius: var(--message-bubble-radius);
  overflow: hidden;
  /*
    Размер сетки не должен зависеть от того, успела ли
    загрузиться картинка внутри: иначе каждая догрузившаяся
    фотография меняет высоту блока и лента заметно дёргается.
  */
  contain: layout;
}

#messages .message-album-group-own {
  margin-left: auto;
}

/*
  При трёх файлах первая плитка занимает оба столбца — но тогда
  ей нужны и пропорции 2:1, иначе квадрат во всю ширину даёт
  огромную плитку и сетка выглядит поломанной.
*/
#messages
  .message-album-group[data-album-count="3"]
  > li:first-child,
#messages
  .message-album-group[data-album-count="3"]
  > .message-album-placeholder:first-child {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

#messages .message-album-group > li,
#messages
  .message-album-group
  > .message-album-placeholder {
  position: relative;
  margin: 0;
  padding: 0;
  max-width: none;
  width: auto;
  min-width: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

#messages
  .message-album-group
  .message-image,
#messages
  .message-album-group
  .message-attachment-image,
#messages
  .message-album-group
  .message-video-frame,
#messages
  .message-album-group
  .message-video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
}

#messages
  .message-album-group
  .message-video-attachment {
  width: 100%;
  height: 100%;
  margin: 0;
}

/*
  Внутри альбома имя автора показываем только у первого
  элемента, а время и галочки — только у последнего, иначе
  они повторялись бы на каждой плитке.
*/
#messages
  .message-album-group
  > li:not(:first-child)
  .message-author {
  display: none;
}

#messages
  .message-album-group
  > li:not(:last-child)
  .message-time {
  display: none;
}

#messages
  .message-album-group
  .message-author {
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

#messages
  .message-album-group
  .message-time {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

/*
  Внутри альбома у видео прячем подпись с именем файла,
  размером и кнопкой «Скачать»: в квадратную плитку она не
  помещается и наезжает на соседние видео. Всё это доступно
  при открытии видео на весь экран.
*/
/*
  В плитке альбома прячем только имя файла и его размер —
  в квадрат они не помещаются и наезжают на соседнее видео.
  Кнопку скачивания оставляем: в полноэкранном просмотре
  видео скачать нельзя, и без неё файл стал бы недоступен.
*/
#messages
  .message-album-group
  .message-attachment-caption
  > span,
#messages
  .message-album-group
  .message-attachment-caption
  > small,
#messages
  .message-album-group
  .message-video-lazy-play
  span:not(.message-video-lazy-play-icon) {
  display: none;
}

#messages
  .message-album-group
  .message-attachment-caption {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 3;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

#messages
  .message-album-group
  .message-video-download {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0;
}

#messages
  .message-album-group
  .message-video-download::before {
  content: '⤓';
  font-size: 16px;
  line-height: 1;
}

/*
  В плитке альбома значок воспроизведения не показываем вовсе:
  их получалось два (наш и собственный значок браузера поверх
  видео), они наслаивались и не центрировались. Видео в сетке —
  это просто превью; смотреть его открывают кнопкой
  «развернуть», в полноэкранном режиме есть и перемотка,
  и звук.
*/
#messages
  .message-album-group
  .message-video-lazy-play {
  display: none;
}

#messages
  .message-album-group
  .message-video::-webkit-media-controls,
#messages
  .message-album-group
  .message-video::-webkit-media-controls-enclosure,
#messages
  .message-album-group
  .message-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

#messages
  .message-album-group
  .message-video {
  pointer-events: none;
}

/*
  Кнопку «развернуть» оставляем: именно через неё открывается
  полноэкранный просмотр, где есть и перемотка, и скачивание.
  Внутри плитки просто уводим её в угол, чтобы не спорила со
  значком воспроизведения.
*/
#messages
  .message-album-group
  .message-video-expand {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 3;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

/*
  Превью видео в плитке-заглушке ведёт себя так же, как
  картинка: заполняет квадрат целиком, без своих элементов
  управления.
*/
#messages
  .message-album-placeholder
  video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  pointer-events: none;
}

/*
  Плитка-заглушка: показывается сразу после выбора файлов,
  на месте будущего фото, со своим прогрессом загрузки.
*/
#messages .message-album-placeholder {
  background: rgba(0, 0, 0, 0.25);
}

#messages
  .message-album-placeholder
  img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

#messages
  .message-album-placeholder-progress {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

#messages
  .message-album-placeholder-progress
  span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--accent-color);
  transition: width 0.2s ease;
}

#messages
  .message-album-placeholder-waiting
  .message-album-placeholder-progress {
  opacity: 0.45;
}

#messages li.message-pending-upload {
  align-self: flex-end;
  margin-left: auto;
  max-width: min(76%, 620px);
  margin-bottom: var(--message-spacing);
  padding: 9px 10px 9px 14px;
  border-radius: var(--message-bubble-radius);
  background: var(--own-message-background);
  background:
    color-mix(
      in srgb,
      var(--own-message-background)
        var(--own-message-opacity-percent),
      transparent
    );
  border: 1px dashed
    var(--accent-color);
  color: var(--text-secondary);
  font-size: 13px;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-pending-upload-text {
  white-space: pre-wrap;
  flex: 1 1 auto;
}

.message-pending-upload-cancel {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.12);
  color: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.message-pending-upload-cancel:hover,
.message-pending-upload-cancel:focus-visible {
  background: rgba(0, 0, 0, 0.22);
  outline: none;
}

#messages li.chat-empty-state {
  width: fit-content;
  max-width: min(88%, 430px);
  margin: 42px auto;
  padding: 10px 14px;
  background: var(--date-background);
  color: var(--text-secondary);
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(41, 69, 79, 0.08);
  font-size: 13px;
  text-align: center;
}

#messages li.chat-empty-state-clickable {
  cursor: pointer;
  color: var(--accent-color, var(--text-secondary));
  font-weight: 600;
  transition: transform 0.15s ease,
    box-shadow 0.15s ease;
}

#messages li.chat-empty-state-clickable:hover,
#messages li.chat-empty-state-clickable:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(41, 69, 79, 0.14);
  outline: none;
}

#messages li.message-anna,
#messages li.message-husband {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#messages li.message-anna {
  margin-left: auto;
  background: var(--own-message-background);
  background:
    color-mix(
      in srgb,
      var(--own-message-background)
        var(--own-message-opacity-percent),
      transparent
    );
  border: 1px solid
    color-mix(
      in srgb,
      var(--own-message-background)
        var(--own-message-opacity-percent),
      transparent
    );
  border-bottom-right-radius:
    var(--message-bubble-tail-radius);
}

#messages li.message-husband {
  margin-right: auto;
  background: var(--partner-message-background);
  background:
    color-mix(
      in srgb,
      var(--partner-message-background)
        var(--own-message-opacity-percent),
      transparent
    );
  border: 1px solid
    color-mix(
      in srgb,
      var(--partner-message-background)
        var(--own-message-opacity-percent),
      transparent
    );
  border-bottom-left-radius:
    var(--message-bubble-tail-radius);
}

.date-divider {
  width: fit-content;
  margin: 14px auto 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--date-background);
  color: var(--text-secondary);
  box-shadow: 0 2px 8px rgba(44, 72, 82, 0.08);
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

#messages > .date-divider:first-child {
  margin-top: 0;
}

.message-author {
  margin-bottom: 3px;
  color: var(--message-author-color);
  font-size: 12px;
  font-weight: bold;
}

.message-forwarded-label {
  margin-bottom: 4px;
  color: var(--accent-color-dark);
  font-size: 11px;
  font-style: italic;
  font-weight: bold;
}

.message-reply-reference {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin: 1px 0 7px;
  padding: 6px 9px 6px 11px;
  overflow: hidden;
  border: none;
  border-left: 3px solid var(--accent-color-dark);
  border-radius: 7px;
  /*
    Правка из списка: раньше тут стоял var(--accent-soft) —
    цвет из общей палитры темы, который не всегда сочетается
    с тёмным фоном/обоями чата (они настраиваются отдельно от
    палитры) и на части сочетаний выглядел как яркое светлое
    пятно поверх тёмного сообщения. currentColor уже равен
    цвету текста самого сообщения (он и так подстроен под
    пузырь), поэтому подложка на его основе всегда выглядит
    частью того же сообщения, а не наклейкой поверх него —
    и одинаково хорошо работает что на тёмных, что на светлых
    пузырях.
  */
  background:
    color-mix(
      in srgb,
      currentColor 14%,
      transparent
    );
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.message-reply-reference:hover,
.message-reply-reference:focus-visible {
  background:
    color-mix(
      in srgb,
      currentColor 22%,
      transparent
    );
}

.message-reply-author,
.message-reply-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-reply-author {
  color: var(--accent-color-dark);
  font-size: 12px;
  font-weight: 800;
}

.message-reply-text {
  margin-top: 1px;
  color: var(--text-secondary);
  font-size: 12px;
}

#messages li.message-reply-target-highlight {
  animation: message-reply-target-pulse 1.7s ease;
}

@keyframes message-reply-target-pulse {
  0%, 100% {
    box-shadow: var(--shadow-soft);
  }

  20%, 50% {
    box-shadow:
      0 0 0 3px
        color-mix(
          in srgb,
          var(--accent-soft) 55%,
          transparent
        ),
      var(--shadow-soft);
  }
}

#messages li.message-push-target-highlight {
  position: relative;
  z-index: 3;
  outline: 3px solid var(--accent-color);
  outline-offset: 3px;
  animation:
    message-push-target-pulse 3.8s ease;
}

@keyframes message-push-target-pulse {
  0% {
    outline-color: transparent;
    filter: brightness(1);
  }

  12%, 72% {
    outline-color: var(--accent-color);
    filter: brightness(1.08);
  }

  100% {
    outline-color: transparent;
    filter: brightness(1);
  }
}

#messages li.message-gallery-return-highlight {
  animation: message-gallery-return-pulse 1.7s ease;
}

@keyframes message-gallery-return-pulse {
  0%, 100% {
    box-shadow: 0 2px 6px rgba(41, 69, 79, 0.08);
  }

  35% {
    box-shadow:
      0 0 0 4px var(--accent-soft),
      0 5px 18px rgba(41, 69, 79, 0.16);
  }
}

.message-text {
  color: var(--message-text-color);
  line-height: 1.4;
  white-space: pre-wrap;
}

.message-time {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1;
  text-align: right;
}

.message-edited-status {
  margin-left: 5px;
  font-size: 10px;
  font-style: italic;
}

.message-read-status {
  margin-left: 5px;
  color: var(--accent-color-dark);
  font-size: 11px;
  font-weight: bold;
}

.message-reactions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 6px;
}

.message-husband .message-reactions {
  justify-content: flex-start;
}

.message-reaction-pill {
  display: inline-flex;
  min-width: 38px;
  height: 27px;
  padding: 2px 7px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--surface-floating);
  color: var(--text-primary);
  line-height: 1;
  cursor: pointer;
}

.message-reaction-pill:hover,
.message-reaction-pill:focus-visible {
  background: var(--hover-background);
}

.message-reaction-pill.is-mine {
  border-color: var(--accent-color);
  background: var(--accent-soft);
}

.message-reaction-emoji {
  font-size: 17px;
}

.message-reaction-count {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.message-image {
  display: block;
  width: min(340px, 62vw);
  max-width: 100%;
  max-height: 430px;
  margin-top: 6px;
  border-radius: 11px;
  object-fit: contain;
  cursor: zoom-in;
}

.message-smiley {
  width: auto;
  height: 52px;
  max-width: 128px;
  max-height: 72px;
  margin: 5px auto 1px;
  border-radius: 0;
  object-fit: contain;
  cursor: default;
}

.message-sticker {
  width: 420px;
  max-width: min(58vw, 420px);
  height: auto;
  max-height: 420px;
  margin: 2px auto 1px;
  border-radius: 0;
  object-fit: contain;
  cursor: default;
}

#messages li.message-with-smiley {
  min-width: 92px;
}

#messages li.message-with-sticker {
  min-width: min(438px, 62vw);
  padding-top: 7px;
}

/*
  Одиночный стикер рисуется без пузыря сообщения: исходный PNG
  сохраняет собственную прозрачность, а фон чата виден насквозь.
*/
#messages li.message-sticker-only,
#messages li.message-sticker-only.message-anna,
#messages li.message-sticker-only.message-husband {
  padding: 4px 8px 5px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.message-delete-area {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 20;
}

.message-delete-button {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font-size: 21px;
  line-height: 1;
  opacity: 0.62;
}

.message-delete-button:hover,
.message-delete-button:focus,
.message-delete-button[aria-expanded="true"] {
  background: rgba(79, 127, 143, 0.13);
  color: var(--accent-color-dark);
  opacity: 1;
}

.message-delete-menu {
  position: absolute;
  top: 30px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: max-content;
  min-width: 165px;
  padding: 6px;
  background: var(--surface-strong);
  border: 1px solid var(--border-color);
  border-radius: 11px;
  box-shadow: 0 9px 25px rgba(32, 58, 68, 0.19);
}

.message-delete-menu[hidden] {
  display: none;
}

.message-delete-option {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
}

.message-delete-option:hover {
  background: var(--hover-background);
}

.message-delete-everyone {
  color: var(--danger-color);
}

.message-husband .message-delete-menu {
  right: auto;
  left: 0;
}

.message-selection-checkbox {
  position: absolute;
  top: 50%;
  left:
    var(
      --message-selection-checkbox-left,
      -34px
    );
  z-index: 45;

  display: none;
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;

  appearance: none;
  -webkit-appearance: none;

  border: 2px solid
    color-mix(
      in srgb,
      var(--accent-color) 72%,
      var(--border-color)
    );
  border-radius: 50%;

  background:
    color-mix(
      in srgb,
      var(--surface-floating-strong) 90%,
      transparent
    );

  box-shadow:
    0 2px 8px rgba(18, 39, 47, 0.18);

  transform: translateY(-50%);

  pointer-events: none;
  cursor: default;
}

#messages.message-selection-mode
  li[data-message-id] {
  cursor: pointer;
}

/*
  Никакого padding-left: ширина и положение пузыря при входе в выбор
  теперь не меняются.
*/
#messages.message-selection-mode
  .message-selection-checkbox {
  display: block;
}

#messages.message-selection-mode
  .message-selection-checkbox:checked {
  border-color: var(--accent-color);
  background-color: var(--accent-color);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5 10.2 17 18.5 7.5' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 17px 17px;
}

/*
  В альбоме несколько сообщений расположены на одной высоте.
  Там галочка остаётся внутри конкретной плитки, иначе несколько
  кружков наложились бы друг на друга у левого края.
*/
#messages.message-selection-mode
  li.message-selection-album-item
  > .message-selection-checkbox {
  top: 8px;
  left: 8px;
  transform: none;
}

#messages.message-selection-mode
  .message-delete-area {
  display: none;
}

/*
  Интерактивное содержимое сообщения в selection mode не перехватывает
  тап: фото/видео/ссылка/реакция тоже просто выбирают сообщение.
*/
#messages.message-selection-mode
  li[data-message-id]
  :is(
    button,
    a,
    video,
    audio,
    input:not(.message-selection-checkbox)
  ) {
  pointer-events: none !important;
}

#messages.message-selection-mode
  li.message-selected {
  box-shadow:
    0 0 0 2px var(--accent-color),
    0 2px 6px rgba(41, 69, 79, 0.08);
}

.composer-area {
  position: relative;
  padding: 0 14px 14px;
}


.attachment-menu {
  position: absolute;
  left: 14px;
  bottom: calc(100% + 8px);
  z-index: 180;
  display: flex;
  width: min(290px, calc(100vw - 28px));
  padding: 7px;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  background: var(--surface-floating-strong);
  box-shadow: 0 14px 38px rgba(20, 44, 52, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.attachment-menu[hidden] {
  display: none;
}

.attachment-menu-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 7px 9px;
  gap: 9px;
  border-radius: 11px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.attachment-menu-item:hover,
.attachment-menu-item:focus-visible {
  background: var(--hover-background);
}

.attachment-menu-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--accent-color-dark);
}

.attachment-menu-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.attachment-menu-item > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.attachment-menu-item strong {
  font-size: 14px;
  line-height: 1.2;
}

.attachment-menu-item small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#image-button.image-button-menu-open {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
}

.smiley-picker-anchor {
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
}

#smiley-picker {
  position: absolute;
  left: -49px;
  bottom: calc(100% + 10px);
  z-index: 140;
  display: flex;
  width: var(
    --smiley-picker-desktop-width,
    min(560px, calc(100vw - 32px))
  );
  max-height: min(430px, 54vh);
  overflow: hidden;
  flex-direction: column;
  background: var(--surface-strong);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 14px 38px rgba(32, 58, 68, 0.24);
}

#smiley-picker[hidden] {
  display: none;
}

.smiley-picker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--border-color);
}

.smiley-picker-categories {
  display: flex;
  min-width: 0;
  flex: 1;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
}

.smiley-picker-categories::-webkit-scrollbar,
.smiley-grid::-webkit-scrollbar {
  display: none;
}

.smiley-category-button {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

.smiley-category-button:hover,
.smiley-category-button-active {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
}

.smiley-picker-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1;
}

.smiley-picker-close:hover {
  background: var(--hover-background);
  color: var(--text-primary);
}

.smiley-grid {
  display: grid;
  min-height: 190px;
  padding: 8px;
  overflow-y: auto;
  grid-template-columns:
    repeat(auto-fill, minmax(54px, 1fr));
  gap: 5px;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.smiley-grid.smiley-grid-emojis {
  grid-template-columns:
    repeat(auto-fill, minmax(52px, 1fr));
}

.smiley-grid.smiley-grid-stickers {
  grid-template-columns:
    repeat(auto-fill, minmax(90px, 1fr));
  gap: 7px;
}

.smiley-option {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 4px;
  border-radius: 11px;
  background: transparent;
  color: var(--text-primary);
}

.smiley-option:hover,
.smiley-option:focus-visible {
  background: var(--hover-background);
}

.smiley-emoji-option {
  font-size: 29px;
  line-height: 1;
}

.smiley-option img {
  display: block;
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  pointer-events: none;
}

.smiley-option.sticker-option {
  min-height: 92px;
  padding: 5px;
}

.smiley-option.sticker-option img {
  width: 84px;
  max-width: 100%;
  height: 84px;
  max-height: 84px;
}

.smiley-picker-message {
  grid-column: 1 / -1;
  align-self: center;
  padding: 24px 12px;
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
}

.smiley-picker-error {
  color: var(--danger-color);
}

.smiley-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  gap: 10px;
  padding: 6px 8px;
  border-top: 1px solid var(--border-color);
  background: var(--surface-floating-strong);
}

.smiley-picker-modes {
  display: flex;
  align-items: center;
  gap: 4px;
}

.smiley-picker-mode-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: bold;
}

.smiley-picker-mode-button:hover,
.smiley-picker-mode-button-active {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
}

.smiley-picker-mode-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.smiley-picker-credit {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reply-composer-preview {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  padding: 7px 8px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-floating-strong);
  box-shadow: var(--shadow-soft);
}

.reply-composer-preview[hidden] {
  display: none;
}

.edit-composer-preview {
  border-color: var(--accent-color);
}

.edit-composer-preview .reply-composer-accent {
  background: var(--accent-color);
}

.reply-composer-accent {
  align-self: stretch;
  border-radius: 999px;
  background: var(--accent-color-dark);
}

.reply-composer-content {
  min-width: 0;
}

#reply-composer-author,
#reply-composer-text,
#edit-composer-title,
#edit-composer-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#reply-composer-author,
#edit-composer-title {
  color: var(--accent-color-dark);
  font-size: 12px;
  font-weight: 800;
}

#reply-composer-text,
#edit-composer-text {
  margin-top: 1px;
  color: var(--text-secondary);
  font-size: 12px;
}

#reply-composer-cancel,
#edit-composer-cancel {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

#reply-composer-cancel:hover,
#reply-composer-cancel:focus-visible,
#edit-composer-cancel:hover,
#edit-composer-cancel:focus-visible {
  background: var(--accent-soft);
  color: var(--text-primary);
}

#selected-image-preview {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 8px auto;
  padding: 6px;
  background: var(--surface-strong);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 7px 22px rgba(32, 58, 68, 0.13);
}

#selected-image-preview[hidden] {
  display: none;
}

#selected-image-preview-image {
  display: block;
  width: auto;
  max-width: min(220px, 60vw);
  max-height: 180px;
  border-radius: 9px;
  object-fit: contain;
}

.selected-image-batch-count {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(8, 24, 28, 0.78);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  backdrop-filter: blur(5px);
}

.selected-image-batch-count[hidden] {
  display: none;
}

#selected-image-preview-image.selected-smiley-preview {
  min-width: 64px;
  max-width: 128px;
  height: 64px;
  border-radius: 0;
}

#selected-image-preview-image.selected-sticker-preview {
  width: 126px;
  max-width: min(42vw, 150px);
  height: 126px;
  max-height: 150px;
  border-radius: 0;
}

#selected-image-remove {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 29px;
  height: 29px;
  padding: 0;
  border-radius: 50%;
  background: var(--accent-color-dark);
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
}

#message-form {
  /*
    Якорь для полосы записи, которая ложится поверх поля ввода.
  */
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 8px;
  background: var(--surface-floating-strong);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 0 7px 22px rgba(32, 58, 68, 0.13);
}

#message-input {
  min-width: 0;
  max-height: 120px;
  flex: 1;
  padding: 10px 8px;
  overflow-y: auto;
  resize: none;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#message-input::placeholder {
  color: #8a9aa0;
}

#message-input:focus {
  outline: none;
}

#smiley-button,
#image-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
}

#smiley-button {
  width: 100%;
  height: 100%;
}

#smiley-button:hover,
#image-button:hover {
  background: var(--hover-background);
  color: var(--accent-color-dark);
}

#smiley-button[aria-expanded="true"],
#smiley-button.smiley-button-selected {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
  box-shadow: inset 0 0 0 2px var(--accent-color);
}

.smiley-button-icon {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.smiley-button-icon path:last-child {
  stroke-width: 2.6;
}

.attachment-icon-outline,
.attachment-selected-icon {
  display: grid;
  place-items: center;
}

.attachment-icon-outline svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.attachment-icon-mobile,
.attachment-selected-icon {
  display: none;
}

.attachment-selected-icon {
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
}

#image-button.image-button-selected {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
  box-shadow: inset 0 0 0 2px var(--accent-color);
}

#image-button.image-button-selected
  .attachment-icon-outline,
#image-button.image-button-selected
  .attachment-icon-mobile {
  display: none;
}

#image-button.image-button-selected
  .attachment-selected-icon {
  display: grid;
}

#smiley-button:disabled,
#image-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.send-button {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 12px;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
}

.send-button:hover {
  background: var(--accent-color-dark);
}

.send-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.send-button-text {
  display: none;
}

.send-button-icon {
  font-size: 18px;
  line-height: 1;
}

.profile-dialog {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(9, 17, 20, 0.58);
}

.profile-dialog[hidden] {
  display: none;
}

.profile-dialog-card {
  width: min(430px, 100%);
  padding: 20px;
  background: var(--surface-strong);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 0 20px 55px rgba(9, 28, 35, 0.28);
}

.profile-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.profile-dialog-header h2 {
  font-size: 20px;
}

.profile-dialog-header p {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.profile-dialog-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--hover-background);
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1;
}

.profile-dialog-card > label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: bold;
}

#profile-name-input,
#profile-status-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--surface-strong);
  color: var(--text-primary);
  font: inherit;
}

#profile-status-input {
  margin-bottom: 0;
}

#profile-name-input:focus,
#profile-status-input:focus {
  border-color: var(--accent-color);
  outline: 3px solid rgba(79, 127, 143, 0.18);
}

.profile-dialog-card > label[for="profile-status-input"] {
  margin-top: 14px;
}


.profile-public-username-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-soft);
}

.profile-public-username-field:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.profile-public-username-field > span {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-weight: 700;
}

.profile-public-username-field input {
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
}

.profile-status-note {
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.profile-name-error {
  min-height: 20px;
  margin-top: 7px;
  color: var(--danger-color);
  font-size: 12px;
}

.profile-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 10px;
}

.profile-dialog-actions button {
  min-height: 39px;
  padding: 0 15px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: bold;
}

.profile-dialog-cancel {
  background: var(--muted-button-background);
  color: var(--text-primary);
}

.profile-dialog-save {
  background: var(--accent-color);
  color: #ffffff;
}

.profile-dialog-save:hover {
  background: var(--accent-color-dark);
}

.profile-dialog-actions button:disabled,
.profile-dialog-close:disabled {
  cursor: default;
  opacity: 0.6;
}

.profile-avatar-editor {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(190px, 0.75fr);
  align-items: start;
  gap: 22px;
  padding: 8px 0 6px;
}

.profile-avatar-editor-main,
.profile-avatar-editor-side {
  min-width: 0;
}

.profile-avatar-editor-main {
  display: grid;
  place-items: center;
}

.profile-avatar-crop-stage,
.profile-avatar-crop-placeholder {
  width: min(100%, 360px);
  aspect-ratio: 1;
  border-radius: 18px;
}

.profile-avatar-crop-stage[hidden],
.profile-avatar-crop-placeholder[hidden],
.profile-avatar-crop-controls[hidden] {
  display: none;
}

.profile-avatar-crop-stage {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background:
    linear-gradient(45deg, rgba(127, 127, 127, 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(127, 127, 127, 0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(127, 127, 127, 0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(127, 127, 127, 0.08) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  box-shadow:
    inset 0 0 0 1px var(--border-color),
    0 12px 28px rgba(21, 42, 51, 0.12);
}

.profile-avatar-crop-stage:active {
  cursor: grabbing;
}

.profile-avatar-crop-stage-busy {
  cursor: wait;
}

#profile-avatar-crop-image {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-user-drag: none;
}

.profile-avatar-crop-shade,
.profile-avatar-crop-ring,
.profile-avatar-crop-hint {
  position: absolute;
  pointer-events: none;
}

.profile-avatar-crop-shade {
  width: 84%;
  aspect-ratio: 1;
  top: 8%;
  left: 8%;
  border-radius: 50%;
  box-shadow:
    0 0 0 999px rgba(12, 22, 28, 0.44);
}

.profile-avatar-crop-ring {
  width: 84%;
  aspect-ratio: 1;
  top: 8%;
  left: 8%;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.profile-avatar-crop-hint {
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10, 18, 23, 0.58);
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.profile-avatar-crop-placeholder {
  display: grid;
  place-items: center;
  padding: 26px;
  border: 1px dashed var(--border-color);
  background: var(--surface-soft);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
}

.profile-avatar-editor-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profile-avatar-preview-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-avatar-preview-label {
  color: var(--text-secondary);
  font-size: 12px;
}

.profile-avatar-preview {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 116px;
  width: 116px;
  height: 116px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #7aa6b1, #4f7f8f);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(32, 58, 68, 0.18);
  font-size: 42px;
  font-weight: bold;
}

#profile-avatar-preview-image,
#profile-avatar-preview-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

#profile-avatar-preview-image {
  object-fit: cover;
}

#profile-avatar-preview-image[hidden],
#profile-avatar-preview-canvas[hidden],
#profile-avatar-preview-fallback[hidden] {
  display: none;
}

.profile-avatar-editor-controls {
  min-width: 0;
  flex: 1;
}

.profile-avatar-choose {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 10px;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
}

.profile-avatar-choose:hover {
  background: var(--accent-color-dark);
}

.profile-avatar-crop-controls {
  margin-top: 15px;
}

.profile-avatar-zoom-row {
  display: grid;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

#profile-avatar-zoom {
  width: 100%;
  accent-color: var(--accent-color);
}

.profile-avatar-transform-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.profile-avatar-transform-actions button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--muted-button-background);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}

.profile-avatar-transform-actions button:hover {
  border-color: var(--accent-color);
}

.profile-avatar-editor-controls p {
  margin-top: 11px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.profile-avatar-actions {
  align-items: center;
}

.profile-avatar-remove {
  margin-right: auto;
  background: var(--danger-soft);
  color: var(--danger-color);
}

.profile-avatar-remove:disabled,
.profile-avatar-choose:disabled,
.profile-avatar-transform-actions button:disabled,
#profile-avatar-zoom:disabled {
  cursor: default;
  opacity: 0.55;
}

.appearance-dialog-card {
  width: min(650px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
}

.appearance-section + .appearance-section {
  margin-top: 20px;
}

.appearance-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.appearance-options {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(106px, 1fr));
  gap: 9px;
}

.appearance-option {
  display: flex;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  flex-direction: column;
  gap: 7px;
  background: var(--surface-strong);
  color: var(--text-primary);
  text-align: left;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.appearance-option:hover {
  border-color: var(--accent-color);
  transform: translateY(-1px);
}

.appearance-option-selected {
  border-color: var(--accent-color);
  box-shadow:
    0 0 0 2px var(--accent-soft);
}

.appearance-option strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-preview,
.background-preview {
  display: block;
  width: 100%;
  height: 50px;
  overflow: hidden;
  border-radius: 9px;
}

.theme-preview {
  display: grid;
  padding: 7px;
  grid-template-columns: 30% 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px;
}

.theme-preview i {
  display: block;
  border-radius: 5px;
}

.theme-preview i:first-child {
  grid-row: 1 / 3;
}

.theme-preview-aquarium {
  background: #dbe7eb;
}

.theme-preview-aquarium i:first-child {
  background: #eef4f6;
}

.theme-preview-aquarium i:nth-child(2) {
  background: #ffffff;
}

.theme-preview-aquarium i:nth-child(3) {
  background: #cfe5ec;
}

.theme-preview-ocean {
  background: #0b2028;
}

.theme-preview-ocean i:first-child {
  background: #132b34;
}

.theme-preview-ocean i:nth-child(2) {
  background: #183640;
}

.theme-preview-ocean i:nth-child(3) {
  background: #1c5260;
}

.theme-preview-coral {
  background: #f1dfd5;
}

.theme-preview-coral i:first-child {
  background: #f8eee8;
}

.theme-preview-coral i:nth-child(2) {
  background: #fffaf7;
}

.theme-preview-coral i:nth-child(3) {
  background: #f1cfc1;
}

.theme-preview-lavender {
  background: #e5def0;
}

.theme-preview-lavender i:first-child {
  background: #f1edf7;
}

.theme-preview-lavender i:nth-child(2) {
  background: #fdfbff;
}

.theme-preview-lavender i:nth-child(3) {
  background: #dcd0eb;
}

.theme-preview-graphite {
  background: #d9dee1;
}

.theme-preview-graphite i:first-child {
  background: #eaedef;
}

.theme-preview-graphite i:nth-child(2) {
  background: #f8f9fa;
}

.theme-preview-graphite i:nth-child(3) {
  background: #ced9df;
}

.theme-preview-sage {
  background: #dce6d8;
}

.theme-preview-sage i:first-child {
  background: #edf2e9;
}

.theme-preview-sage i:nth-child(2) {
  background: #fbfcf8;
}

.theme-preview-sage i:nth-child(3) {
  background: #d2e3cc;
}

.theme-preview-forest {
  background:
    radial-gradient(circle at 72% 22%, rgba(214, 245, 167, 0.18), transparent 30%),
    radial-gradient(circle at 36% 72%, rgba(80, 128, 68, 0.26), transparent 42%),
    #0a150d;
}

.theme-preview-forest i:first-child {
  background: #0f1c13;
}

.theme-preview-forest i:nth-child(2) {
  background: #183020;
}

.theme-preview-forest i:nth-child(3) {
  background: #2b5132;
  box-shadow: inset 0 0 0 1px #84b56c;
}

.theme-preview-sand {
  background: #e9dfcf;
}

.theme-preview-sand i:first-child {
  background: #f5eee3;
}

.theme-preview-sand i:nth-child(2) {
  background: #fffdf8;
}

.theme-preview-sand i:nth-child(3) {
  background: #ead7bc;
}

.theme-preview-rose {
  background: #eadbdd;
}

.theme-preview-rose i:first-child {
  background: #f5ebed;
}

.theme-preview-rose i:nth-child(2) {
  background: #fffafb;
}

.theme-preview-rose i:nth-child(3) {
  background: #e7cfd5;
}

.theme-preview-night {
  background: #18232d;
}

.theme-preview-night i:first-child {
  background: #26323d;
}

.theme-preview-night i:nth-child(2) {
  background: #2a3944;
}

.theme-preview-night i:nth-child(3) {
  background: #35566a;
}

.theme-preview-volcanic {
  background:
    radial-gradient(circle at 68% 22%, rgba(255, 193, 119, 0.16), transparent 28%),
    radial-gradient(circle at 42% 82%, rgba(140, 41, 11, 0.24), transparent 40%),
    #160907;
}

.theme-preview-volcanic i:first-child {
  background: #1d0d0a;
}

.theme-preview-volcanic i:nth-child(2) {
  background: #341915;
}

.theme-preview-volcanic i:nth-child(3) {
  background: #6a301d;
  box-shadow: inset 0 0 0 1px #ff8a3d;
}

.theme-preview-omut {
  background: #071d1b;
}

.theme-preview-omut i:first-child {
  background: #0a211e;
}

.theme-preview-omut i:nth-child(2) {
  background: #17352f;
}

.theme-preview-omut i:nth-child(3) {
  background: #13564d;
  box-shadow: inset 0 0 0 1px #23cdb8;
}

.saved-custom-theme-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--surface-soft);
}

.saved-custom-theme-copy {
  min-width: 0;
  flex: 1;
}

.saved-custom-theme-copy strong {
  display: block;
  font-size: 13px;
}

.saved-custom-theme-copy p {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.saved-custom-theme-status {
  display: block;
  margin-top: 6px;
  color: var(--accent-color-dark);
  font-size: 11px;
  font-weight: 650;
}

.saved-custom-theme-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 270px;
}

.saved-custom-theme-actions button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-color-dark);
  font-size: 12px;
  font-weight: 700;
}

.saved-custom-theme-actions button:hover:not(:disabled) {
  background: var(--accent-color);
  color: #ffffff;
}

.saved-custom-theme-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}

.saved-custom-theme-actions .saved-custom-theme-delete {
  background: transparent;
  color: var(--danger-color);
}

@media (max-width: 680px) {
  .saved-custom-theme-card {
    align-items: stretch;
    flex-direction: column;
  }

  .saved-custom-theme-actions {
    justify-content: stretch;
    max-width: none;
  }

  .saved-custom-theme-actions button {
    flex: 1 1 130px;
  }
}

.background-preview {
  background-color: var(--chat-background);
}

.background-preview-bubbles {
  background-image:
    radial-gradient(
      circle at 12px 12px,
      var(--chat-pattern) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle at 34px 34px,
      var(--chat-pattern) 2px,
      transparent 2px
    );
  background-size: 46px 46px;
}

.background-preview-waves {
  background-image:
    radial-gradient(
      ellipse at 0 50%,
      transparent 0 14px,
      var(--chat-pattern) 15px 16px,
      transparent 17px
    ),
    radial-gradient(
      ellipse at 100% 50%,
      transparent 0 14px,
      var(--chat-pattern) 15px 16px,
      transparent 17px
    );
  background-position: 0 0, 22px 12px;
  background-size: 44px 24px;
}

.background-preview-scales {
  background-image:
    radial-gradient(
      circle at 50% 0,
      transparent 0 12px,
      var(--chat-pattern) 13px 14px,
      transparent 15px
    ),
    radial-gradient(
      circle at 50% 100%,
      transparent 0 12px,
      var(--chat-pattern) 13px 14px,
      transparent 15px
    );
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
}

.background-preview-mist {
  background-image:
    radial-gradient(
      circle at 20% 22%,
      var(--chat-glow-one),
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 74%,
      var(--chat-glow-two),
      transparent 46%
    );
}

.background-preview-ripples {
  background-image:
    repeating-radial-gradient(
      circle at 18px 18px,
      transparent 0 7px,
      var(--chat-pattern) 8px 9px,
      transparent 10px 18px
    );
  background-size: 36px 36px;
}

.background-preview-current {
  background-image:
    repeating-linear-gradient(
      145deg,
      transparent 0 12px,
      var(--chat-pattern) 13px 14px,
      transparent 15px 27px
    );
  background-size: 40px 40px;
}

.background-preview-speckles {
  background-image:
    radial-gradient(
      circle at 8px 10px,
      var(--chat-pattern) 1.4px,
      transparent 1.7px
    ),
    radial-gradient(
      circle at 24px 27px,
      var(--chat-pattern) 1px,
      transparent 1.3px
    ),
    radial-gradient(
      circle at 34px 7px,
      var(--chat-pattern) 1px,
      transparent 1.3px
    );
  background-size: 42px 34px;
}

.background-preview-lights {
  background-image:
    radial-gradient(
      circle at 18% 20%,
      var(--chat-glow-one),
      transparent 35%
    ),
    radial-gradient(
      circle at 78% 72%,
      var(--chat-glow-two),
      transparent 42%
    );
}

.background-preview-plain {
  background-image: none;
}

.background-preview-custom {
  position: relative;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      135deg,
      var(--surface-soft),
      var(--chat-background)
    );
  color: var(--accent-color-dark);
  font-size: 29px;
  font-weight: normal;
}

.background-preview-custom img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.background-preview-custom img[hidden],
#profile-custom-background-option-fallback[hidden] {
  display: none;
}

.custom-background-controls {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-soft);
}

.custom-background-controls[hidden] {
  display: none;
}

.custom-background-editor {
  display: grid;
  grid-template-columns:
    minmax(190px, 1.2fr)
    minmax(170px, 0.8fr);
  gap: 13px;
}

.custom-background-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 145px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--chat-background);
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}

#profile-custom-background-preview-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#profile-custom-background-preview-image[hidden],
#profile-custom-background-preview-fallback[hidden] {
  display: none;
}

.background-preview-custom.custom-background-has-image::after,
.custom-background-preview.custom-background-has-image::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgb(
    0 0 0 /
    var(--custom-background-preview-overlay, 0.18)
  );
  content: "";
  pointer-events: none;
}

.background-preview-custom.custom-background-has-image::before,
.custom-background-preview.custom-background-has-image::before {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 3;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: #ffffff;
  content: attr(data-overlay-label);
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
}

.custom-background-editor-actions {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}

.custom-background-editor-actions button {
  width: 100%;
}

.profile-custom-background-remove {
  min-height: 40px;
  padding: 0 13px;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger-color);
  font-size: 13px;
  font-weight: bold;
}

.profile-custom-background-remove:disabled {
  cursor: default;
  opacity: 0.5;
}

.custom-background-editor-actions p {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.custom-background-fit {
  display: grid;
  margin: 14px 0 0;
  padding: 0;
  border: none;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.custom-background-fit legend {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  padding: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: bold;
}

.custom-background-fit label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--surface-strong);
  cursor: pointer;
}

.custom-background-fit input {
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--accent-color);
}

.custom-background-fit span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.custom-background-fit strong {
  font-size: 12px;
}

.custom-background-fit small {
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.35;
}

.custom-background-overlay {
  display: block;
  margin-top: 14px;
}

.custom-background-overlay > span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: bold;
}

#profile-custom-background-overlay-value {
  color: var(--accent-color-dark);
}

#profile-custom-background-overlay {
  width: 100%;
  accent-color: var(--accent-color);
}

.message-transparency-control {
  display: block;
}

.message-transparency-control > span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: bold;
}

#profile-own-message-transparency-value {
  color: var(--accent-color-dark);
}

#profile-own-message-transparency {
  width: 100%;
  accent-color: var(--accent-color);
}

.message-transparency-preview {
  display: flex;
  min-height: 112px;
  margin-top: 12px;
  padding: 12px;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background:
    radial-gradient(
      circle at 14px 14px,
      var(--chat-pattern) 2px,
      transparent 2px
    );
  background-color: var(--chat-background);
  background-size: 42px 42px;
}

.message-transparency-preview-bubble {
  max-width: 78%;
  padding: 9px 12px;
  color: var(--text-primary);
  box-shadow: 0 2px 6px rgba(41, 69, 79, 0.08);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-size: 13px;
}

.message-transparency-preview-partner {
  align-self: flex-start;
  border: 1px solid
    color-mix(
      in srgb,
      var(--partner-message-background)
        var(--own-message-opacity-percent),
      transparent
    );
  border-radius: 14px 14px 14px 5px;
  background: var(--partner-message-background);
  background:
    color-mix(
      in srgb,
      var(--partner-message-background)
        var(--own-message-opacity-percent),
      transparent
    );
}

.message-transparency-preview-own {
  align-self: flex-end;
  border: 1px solid
    color-mix(
      in srgb,
      var(--own-message-background)
        var(--own-message-opacity-percent),
      transparent
    );
  border-radius: 14px 14px 5px 14px;
  background: var(--own-message-background);
  background:
    color-mix(
      in srgb,
      var(--own-message-background)
        var(--own-message-opacity-percent),
      transparent
    );
}

.appearance-section-note {
  margin-top: 9px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.appearance-room-note {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.appearance-room-note[hidden] {
  display: none;
}

.appearance-section-unavailable
  .appearance-background-options,
.appearance-section-unavailable
  .message-transparency-control,
.appearance-section-unavailable
  .message-transparency-preview {
  opacity: 0.52;
}

.appearance-section-unavailable
  .appearance-background-option,
.appearance-section-unavailable
  .message-transparency-control {
  cursor: not-allowed;
}

.contacts-dialog-card {
  width: min(560px, 100%);
  max-height: min(720px, calc(100vh - 36px));
}


.contacts-search {
  display: block;
  margin-bottom: 10px;
}

.contacts-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  outline: 0;
  background: var(--surface-soft);
  color: var(--text-primary);
  font: inherit;
}

.contacts-search input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.contacts-list {
  display: flex;
  min-height: 0;
  max-height: min(430px, 52vh);
  padding: 2px;
  overflow-y: auto;
  flex-direction: column;
  gap: 7px;
}

.contact-list-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 68px;
  gap: 12px;
  padding: 10px 11px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--text-primary);
  text-align: left;
}

.contact-list-item:hover:not(:disabled),
.contact-list-item:focus-visible {
  border-color: var(--accent-color);
  background: var(--accent-soft);
}

.contact-list-item:disabled {
  cursor: wait;
  opacity: 0.68;
}

.contact-list-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  background:
    linear-gradient(
      145deg,
      #7aa6b1,
      #4f7f8f
    );
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}

.contact-list-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.contact-list-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.contact-list-text strong,
.contact-list-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-list-text strong {
  font-size: 15px;
}

.contact-list-text small {
  color: var(--text-secondary);
  font-size: 12px;
}

.contact-list-text .contact-list-username {
  color: var(--accent-color-dark);
  font-weight: 700;
}

.contact-list-action {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--accent-color-dark);
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
}

.contacts-empty {
  padding: 24px 12px;
  color: var(--text-secondary);
  text-align: center;
}

.contacts-empty[hidden] {
  display: none;
}

.contacts-dialog-actions {
  justify-content: space-between;
}

.contacts-dialog-actions
  #contacts-open-group-create[hidden] {
  display: none;
}

.room-dialog-card {
  width: min(580px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow-y: auto;
}

.room-title-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--surface-strong);
  color: var(--text-primary);
  font: inherit;
}

.room-title-input:focus {
  border-color: var(--accent-color);
  outline: 3px solid rgba(79, 127, 143, 0.18);
}

.room-members-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.room-members-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.room-members-heading h3 {
  margin: 0;
  font-size: 14px;
}

.room-members-heading p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.room-members-count {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-color-dark);
  font-size: 11px;
  white-space: nowrap;
}

.room-members-list {
  display: flex;
  max-height: 300px;
  padding: 2px;
  overflow-y: auto;
  flex-direction: column;
  gap: 7px;
  scrollbar-width: thin;
}

.room-member-option {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 44px minmax(0, 1fr) 28px;
  min-height: 60px;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--surface-soft);
  color: var(--text-primary);
  cursor: pointer;
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

.room-member-option:hover:not(.room-member-option-locked) {
  border-color: var(--accent-color);
}

.room-member-option-selected {
  border-color: color-mix(
    in srgb,
    var(--accent-color) 72%,
    var(--border-color)
  );
  background: color-mix(
    in srgb,
    var(--accent-soft) 58%,
    var(--surface-soft)
  );
  box-shadow:
    inset 3px 0 0 var(--accent-color);
}

.room-member-option-locked {
  cursor: default;
}

.room-member-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.room-member-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background:
    linear-gradient(
      145deg,
      var(--accent-color),
      var(--accent-color-dark)
    );
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}

.room-member-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.room-member-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.room-member-text strong,
.room-member-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-member-text strong {
  font-size: 14px;
}

.room-member-text small {
  color: var(--text-secondary);
  font-size: 11px;
}

.room-member-check {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--surface-strong);
  color: transparent;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}

.room-member-option-selected
  .room-member-check {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: #ffffff;
}

.room-members-empty,
.room-members-status {
  margin: 8px 0 0;
  padding: 12px;
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
}

.room-members-empty[hidden],
.room-members-status[hidden] {
  display: none;
}

.room-settings-members-section {
  margin-bottom: 4px;
}

.room-protected-note {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.room-protected-note[hidden] {
  display: none;
}

.room-settings-actions {
  align-items: center;
}

.room-delete-button {
  margin-right: auto;
  background: var(--danger-soft);
  color: var(--danger-color);
}

.room-delete-button:hover:not(:disabled) {
  filter: brightness(0.97);
}

.room-delete-button:disabled {
  cursor: default;
  opacity: 0.5;
}


.message-forward-dialog-card {
  width: min(520px, 100%);
  max-height: calc(100vh - 36px);
  overflow: hidden;
}

.message-forward-select-all {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.message-forward-select-all input,
.message-forward-room-option input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent-color);
  cursor: pointer;
}

.message-forward-room-list {
  display: flex;
  max-height: min(410px, 48vh);
  padding: 2px;
  overflow-y: auto;
  flex-direction: column;
  gap: 7px;
  scrollbar-width: thin;
}

.message-forward-room-option {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--surface-strong);
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}

.message-forward-room-option:hover {
  border-color: var(--accent-color);
  background: var(--hover-background);
}

.message-forward-room-option:has(input:checked) {
  border-color: var(--border-color);
  background: var(--surface-soft);
  box-shadow:
    inset 0 0 0 1px var(--border-color);
}

.message-forward-room-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
  background:
    linear-gradient(
      145deg,
      var(--accent-color),
      var(--accent-color-dark)
    );
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
}

.message-forward-room-avatar-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.message-forward-room-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.message-forward-room-text strong,
.message-forward-room-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-forward-room-text strong {
  color: var(--text-primary);
  font-size: 14px;
}

.message-forward-room-text small {
  color: var(--text-secondary);
  font-size: 11px;
}

#image-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 70px 20px 90px;
  overflow: auto;
  overscroll-behavior: contain;
  background: transparent;
  isolation: isolate;
}

#image-viewer::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(9, 17, 20, 0.9);
  opacity: 1;
  pointer-events: none;
}

#image-viewer.image-viewer-origin-opening::before {
  animation: image-viewer-backdrop-in 360ms ease-out both;
}

#image-viewer.image-viewer-origin-closing::before {
  animation: image-viewer-backdrop-out 360ms ease-in both;
}

@keyframes image-viewer-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes image-viewer-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

#image-viewer[hidden] {
  display: none;
}

#image-viewer.image-viewer-has-thumbnails {
  padding-top: 98px;
}

.image-viewer-thumbnails {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: 64px;
  left: 64px;
  z-index: 1003;
  width: min(
    760px,
    calc(100vw - 128px),
    var(--image-viewer-thumbnail-width, 760px)
  );
  height: 64px;
  margin: 0 auto;
  padding: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.58);
  box-shadow: 0 7px 24px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.image-viewer-thumbnails[hidden] {
  display: none;
}

/* Миниатюры готовятся вне глаз пользователя и появляются одной полосой,
   чтобы отдельные фото не "допрыгивали" в верхнюю ленту по мере загрузки. */
.image-viewer-thumbnails.image-viewer-thumbnails-pending {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.image-viewer-thumbnail-list {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.image-viewer-thumbnail-list::-webkit-scrollbar {
  display: none;
}

.image-viewer-thumbnail {
  position: relative;
  display: block;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  padding: 2px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  opacity: 0.64;
  scroll-snap-align: center;
  contain: layout style;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease,
    transform 0.16s ease;
}

.image-viewer-thumbnail:hover,
.image-viewer-thumbnail:focus-visible {
  opacity: 0.9;
  transform: translateY(-1px);
}

.image-viewer-thumbnail-active {
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 2px rgba(79, 127, 143, 0.9),
    0 4px 12px rgba(0, 0, 0, 0.34);
  opacity: 1;
}

.image-viewer-thumbnail-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

#image-viewer-image {
  display: block;
  flex: 0 0 auto;
  max-width: 95vw;
  max-height: 90vh;
  margin: auto;
  border-radius: 9px;
  object-fit: contain;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#image-viewer-image.is-dragging {
  cursor: grabbing;
}

#image-viewer.image-viewer-origin-opening #image-viewer-image,
#image-viewer.image-viewer-origin-closing #image-viewer-image {
  transition: none !important;
}

@media (hover: none) and (pointer: coarse) {
  #image-viewer.image-viewer-origin-opening::before,
  #image-viewer.image-viewer-origin-closing::before {
    animation-duration: 620ms;
  }
}

#image-viewer-close {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 1004;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 32px;
  line-height: 1;
}

#image-viewer-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

#image-viewer-controls {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: 1001;
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.65);
  transform: translateX(-50%);
}

#image-viewer-controls button {
  min-width: 44px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 20px;
}

#image-viewer-controls button:hover {
  background: rgba(255, 255, 255, 0.3);
}

#image-zoom-reset {
  min-width: 68px;
  font-size: 15px;
}

#image-download {
  min-width: 96px;
  font-size: 14px;
}

#image-viewer-close,
#image-viewer-controls,
.image-viewer-navigation,
.image-viewer-thumbnails {
  transition:
    opacity 0.2s ease,
    background 0.14s ease;
}

#image-viewer.image-viewer-origin-opening
  #image-viewer-close,
#image-viewer.image-viewer-origin-opening
  #image-viewer-controls,
#image-viewer.image-viewer-origin-opening
  .image-viewer-navigation,
#image-viewer.image-viewer-origin-opening
  .image-viewer-thumbnails,
#image-viewer.image-viewer-origin-closing
  #image-viewer-close,
#image-viewer.image-viewer-origin-closing
  #image-viewer-controls,
#image-viewer.image-viewer-origin-closing
  .image-viewer-navigation,
#image-viewer.image-viewer-origin-closing
  .image-viewer-thumbnails {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body.image-drag-active::before {
  content: "Отпустите фотографию, чтобы прикрепить";
  position: fixed;
  inset: 12px;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 3px dashed var(--accent-color);
  border-radius: 20px;
  background: rgba(239, 246, 248, 0.96);
  color: var(--accent-color-dark);
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  pointer-events: none;
}



/* Единое окно настроек профиля */
.profile-settings-button {
  font-size: 16px;
}

.profile-settings-card {
  display: flex;
  width: min(760px, 100%);
  height: min(
    760px,
    calc(var(--app-viewport-height, 100vh) - 36px)
  );
  max-height: min(
    760px,
    calc(var(--app-viewport-height, 100vh) - 36px)
  );
  padding: 0;
  overflow: hidden;
  flex-direction: column;
}

.profile-settings-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-color);
}

.profile-settings-summary {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.profile-settings-summary-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #7aa6b1, #4f7f8f);
  color: #ffffff;
  font-size: 22px;
  font-weight: bold;
}

#profile-settings-avatar-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#profile-settings-avatar-image[hidden],
#profile-settings-avatar-fallback[hidden] {
  display: none;
}

.profile-settings-summary-text {
  min-width: 0;
}

.profile-settings-summary-text h2 {
  overflow: hidden;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-settings-summary-text p {
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-settings-summary-text p.profile-status-empty {
  font-style: italic;
  opacity: 0.78;
}

.profile-settings-tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-color);
  scrollbar-width: none;
}

.profile-settings-tabs::-webkit-scrollbar {
  display: none;
}

.profile-settings-tab {
  flex: 1 0 auto;
  min-height: 39px;
  padding: 0 14px;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: bold;
}

.profile-settings-tab:hover,
.profile-settings-tab-active {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
}

.profile-settings-pages {
  min-height: 0;
  flex: 1 1 auto;
  padding: 18px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.profile-settings-page[hidden] {
  display: none;
}

.profile-settings-page > .profile-dialog-card {
  width: 100%;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-settings-page .profile-dialog-header {
  margin-bottom: 16px;
}

.profile-settings-page .profile-dialog-header .profile-dialog-close {
  display: none;
}

.profile-settings-page .profile-dialog-actions {
  padding-top: 4px;
}

.profile-settings-page .appearance-dialog-card {
  max-height: none;
}

.notification-settings-card {
  width: 100%;
  max-width: 680px;
}

.notification-settings-section {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.notification-settings-section:first-of-type {
  margin-top: 0;
}

.notification-push-card {
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-floating);
}

.notification-push-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.notification-push-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--accent-soft);
  font-size: 21px;
  line-height: 1;
}

.notification-push-heading-text {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.notification-push-heading-text strong {
  color: var(--text-primary);
  font-size: 15px;
}

.notification-push-heading-text small,
.notification-push-detail {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.notification-push-state {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 24px;
  color: var(--text-primary);
  font-size: 13px;
}

.notification-push-state-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-secondary);
  box-shadow:
    0 0 0 4px rgba(108, 127, 135, 0.14);
}

.notification-push-card[data-state="ready"]
  .notification-push-state-dot,
.notification-push-card[data-state="subscribed"]
  .notification-push-state-dot {
  background: #39b85a;
  box-shadow:
    0 0 0 4px rgba(57, 184, 90, 0.14);
}

.notification-push-card[data-state="unsupported"]
  .notification-push-state-dot,
.notification-push-card[data-state="error"]
  .notification-push-state-dot {
  background: var(--danger-color);
  box-shadow:
    0 0 0 4px rgba(168, 72, 72, 0.14);
}

.notification-push-detail {
  margin: 0;
}

.notification-push-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.notification-push-action-button {
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
}

.notification-push-action-button:hover:not(:disabled) {
  background: var(--accent-color-dark);
}

.notification-push-action-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.notification-push-test-button {
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--muted-button-background);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: bold;
}

.notification-push-test-button:hover:not(:disabled) {
  background: var(--hover-background);
}

.notification-push-test-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.notification-push-test-status {
  margin: -3px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.notification-push-test-status[data-state="success"] {
  color: var(--accent-color-dark);
}

.notification-push-test-status[data-state="error"] {
  color: var(--danger-color);
}

.notification-sound-setting {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-floating);
  cursor: pointer;
}

.notification-sound-setting:hover {
  background: var(--hover-background);
}

.notification-sound-setting:has(input:disabled) {
  cursor: default;
  opacity: 0.65;
}

.notification-sound-setting input,
.notification-sound-option input {
  width: 21px;
  height: 21px;
  margin: 1px 0 0;
  accent-color: var(--accent-color);
}

.notification-sound-setting-text {
  display: grid;
  gap: 5px;
}

.notification-sound-setting-text strong {
  color: var(--text-primary);
  font-size: 15px;
}

.notification-sound-setting-text small,
.notification-sound-option small,
.notification-sound-note,
.notification-sound-status {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.notification-sound-options {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.notification-sound-options legend {
  width: 100%;
  margin-bottom: 9px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 800;
}

.notification-sound-option {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-floating);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.notification-sound-option:hover {
  background: var(--hover-background);
}

.notification-sound-option:has(input:checked) {
  border-color: var(--accent-color);
  background: var(--accent-soft);
}

.notification-sound-option:has(input:disabled) {
  cursor: default;
  opacity: 0.52;
}

.notification-sound-option > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.notification-sound-option strong {
  color: var(--text-primary);
  font-size: 14px;
}

.notification-volume-control {
  display: grid;
  gap: 9px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-floating);
}

.notification-volume-control > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
}

.notification-volume-control output {
  color: var(--accent-color-dark);
}

.notification-volume-control input[type="range"] {
  width: 100%;
  accent-color: var(--accent-color);
}

.notification-volume-control:has(input:disabled) {
  opacity: 0.55;
}

.notification-sound-test-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notification-sound-test {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-floating);
  color: var(--text-primary);
  font-weight: 700;
}

.notification-sound-test:hover:not(:disabled) {
  background: var(--hover-background);
}

.notification-sound-test:disabled {
  cursor: default;
  opacity: 0.5;
}

.notification-sound-status {
  min-width: 0;
  margin: 0;
}

.notification-vibration-status {
  padding: 0 4px;
}

.notification-sound-note {
  margin: 14px 0 0;
}

@media (min-width: 821px) {
  .app-shell {
    transition:
      grid-template-columns 0.18s ease;
  }

  .app-sidebar {
    overflow: hidden;
    transition:
      padding 0.18s ease,
      opacity 0.14s ease;
  }

  html[data-sidebar-mode="compact"]
    .app-shell {
    grid-template-columns:
      94px minmax(0, 1fr);
  }

  html[data-sidebar-mode="compact"]
    .app-sidebar {
    padding: 14px 10px 12px;
  }

  html[data-sidebar-mode="compact"]
    .brand-block {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding: 0 0 15px;
  }

  html[data-sidebar-mode="compact"]
    .brand-text,
  html[data-sidebar-mode="compact"]
    .profile-controls,
  html[data-sidebar-mode="compact"]
    .sidebar-section-title,
  html[data-sidebar-mode="compact"]
    .chat-list-content,
  html[data-sidebar-mode="compact"]
    .sidebar-footer {
    display: none;
  }

  html[data-sidebar-mode="compact"]
    .sidebar-controls {
    width: 100%;
    justify-content: center;
    flex-direction: row;
    gap: 6px;
  }

  html[data-sidebar-mode="compact"]
    .sidebar-control-button {
    width: 30px;
    height: 30px;
  }

  html[data-sidebar-mode="compact"]
    .profile-card {
    justify-content: center;
    margin-bottom: 15px;
    padding: 9px;
  }

  html[data-sidebar-mode="compact"]
    .profile-avatar {
    flex-basis: 48px;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
  }

  html[data-sidebar-mode="compact"]
    .chat-list-item {
    position: relative;
    justify-content: center;
    gap: 0;
    padding: 9px 8px;
  }

  html[data-sidebar-mode="compact"]
    .chat-list-avatar {
    width: 48px;
    height: 48px;
  }

  html[data-sidebar-mode="compact"]
    .chat-list-unread-badge-compact {
    position: absolute;
    top: -5px;
    right: -7px;
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--sidebar-background);
    border-radius: 999px;
    background: var(--accent-color);
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
  }

  html[data-sidebar-mode="hidden"]
    .app-shell {
    grid-template-columns:
      0 minmax(0, 1fr);
  }

  html[data-sidebar-mode="hidden"]
    .app-sidebar {
    visibility: hidden;
    padding-right: 0;
    padding-left: 0;
    border-right: none;
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html,
  body {
    width: 100%;
    height: var(--app-viewport-height, 100dvh);
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body {
    position: fixed;
    top: var(--app-viewport-offset-top, 0px);
    right: 0;
    left: 0;
    height: var(--app-viewport-height, 100dvh);
    padding: 0;
  }

  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    border: none;
    border-radius: 0;
  }

  .chat-panel,
  .chat-workspace {
    min-height: 0;
    overflow: hidden;
  }

  .app-sidebar {
    display: grid;
    visibility: visible;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-controls,
  .sidebar-open-button {
    display: none !important;
  }

  .brand-block {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 0;
  }

  .brand-logo {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 13px;
    font-size: 21px;
  }

  h1 {
    font-size: 20px;
  }

  .brand-block p,
  .sidebar-section-title,
  .chat-list,
  .sidebar-footer,
  .profile-controls label {
    display: none;
  }

  .profile-card {
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
  }

  .profile-avatar {
  flex-basis: 38px;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  font-size: 15px;
}

  .profile-avatar-edit-mark {
    right: -5px;
    bottom: -5px;
    width: 19px;
    height: 19px;
    font-size: 9px;
  }

  .profile-summary {
    align-items: center;
  }

  #profile-display-name {
    max-width: 86px;
    font-size: 12px;
  }

  #profile-status {
    display: none;
  }


  .profile-summary-actions {
    gap: 2px;
  }

  .profile-edit-button {
    width: 22px;
    height: 22px;
    font-size: 15px;
  }

  #user-select {
    min-width: 92px;
    padding: 6px 8px;
    font-size: 13px;
  }

  .chat-header {
    min-height: 64px;
    padding: 9px 12px;
  }

  .chat-header-room-actions {
    gap: 4px;
  }

  .chat-header-room-button {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 20px;
  }

  .chat-header-avatar {
  flex-basis: 42px;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
}

  .chat-header-info h2 {
    display: none;
  }

  .mobile-room-switcher {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
  }

  .mobile-room-switcher > span {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: bold;
  }

  #mobile-room-select {
    width: min(220px, 100%);
    min-height: 30px;
    padding: 4px 28px 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--surface-strong);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: bold;
  }

  #partner-status {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 11px;
  }

  /*
    Личный статус и «печатает…» используют одну строку.
    Высота заголовка остаётся постоянной.
  */
  .chat-header-statuses {
    height: 22px;
    min-height: 22px;
    overflow: hidden;
  }

  #partner-status {
    line-height: 16px;
  }

  .message-search-panel {
    gap: 5px;
    margin: 8px 8px 0;
    padding: 6px;
  }

  .message-search-field {
    gap: 4px;
    padding: 0 7px;
  }

  .message-search-field > span {
    display: none;
  }

  #message-search-input {
    min-height: 34px;
    font-size: 13px;
  }

  .message-search-result {
    min-width: 54px;
    font-size: 11px;
  }

  .message-search-actions {
    gap: 3px;
  }

  .message-search-actions button {
    width: 31px;
    height: 32px;
    font-size: 16px;
  }

  #messages {
    min-height: 0;
    padding: 12px 10px 14px;
    overscroll-behavior: contain;
  }

  #messages li {
    max-width: 86%;
    -webkit-touch-callout: none;
  }

  .message-context-menu {
    min-width: 238px;
  }

  .message-context-reaction-quick {
    grid-template-columns: repeat(5, 40px);
  }

  .message-context-reaction-more {
    grid-template-columns: repeat(4, 40px);
  }

  .message-context-reaction-button {
    width: 40px;
    height: 40px;
    font-size: 23px;
  }

  .message-context-option {
    min-height: 46px;
    font-size: 15px;
  }

  .composer-area {
    position: relative;
    z-index: 30;
    min-width: 0;
    flex: 0 0 auto;
    padding:
      0 8px
      max(8px, env(safe-area-inset-bottom));
  }

  .attachment-menu {
    left: 8px;
    bottom: calc(100% + 7px);
    width: min(290px, calc(100vw - 16px));
  }

  .scroll-to-bottom-button {
    right: 14px;
    bottom: 80px;
    width: 42px;
    height: 42px;
  }

  #message-form {
    width: 100%;
    min-width: 0;
    gap: 3px;
    padding: 6px;
    border-radius: 16px;
  }

  #message-input {
    width: 0;
    min-width: 0;
    min-height: 40px;
    padding: 9px 5px;
  }

  .smiley-picker-anchor {
    flex: 0 0 38px;
    width: 38px;
    height: 40px;
  }

  #smiley-button,
  #image-button {
    width: 38px;
    height: 40px;
  }

  #smiley-picker {
    left: -45px;
    width: min(560px, calc(100vw - 16px));
  }

  .attachment-icon-outline {
    display: grid;
  }

  .attachment-icon-mobile {
    display: none;
  }

  .send-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
  }

  .send-button-text {
    display: none;
  }

  .send-button-icon {
    font-size: 18px;
  }
}


@media (max-width: 520px) {
  .message-forward-dialog-card {
    max-height: calc(100vh - 20px);
    padding: 16px;
  }

  .message-forward-room-list {
    max-height: min(360px, 46vh);
  }

  .message-forward-room-option {
    padding: 9px;
  }
}

@media (max-width: 520px) {
  .room-settings-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .room-delete-button {
    grid-column: 1 / -1;
    margin-right: 0;
  }
}

@media (max-width: 620px) {
  .appearance-options {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .appearance-dialog-card {
    max-height: calc(100vh - 20px);
    padding: 16px;
  }
}



@media (max-width: 620px) {
  #profile-settings-dialog {
    padding:
      max(8px, env(safe-area-inset-top))
      8px
      max(8px, env(safe-area-inset-bottom));
  }

  .profile-settings-card {
    width: 100%;
    height: calc(
      var(--app-viewport-height, 100dvh) -
      max(16px, env(safe-area-inset-top)) -
      max(16px, env(safe-area-inset-bottom))
    );
    max-height: calc(
      var(--app-viewport-height, 100dvh) -
      max(16px, env(safe-area-inset-top)) -
      max(16px, env(safe-area-inset-bottom))
    );
    border-radius: 18px;
  }

  .profile-settings-header {
    padding: 14px 15px 12px;
  }

  .profile-settings-summary-avatar {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
  }

  .profile-settings-pages {
    padding: 14px 15px 16px;
  }

  .profile-settings-tab {
    min-width: 108px;
  }

  .notification-sound-options {
    grid-template-columns: 1fr;
  }

  .notification-sound-test-row {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-sound-test {
    width: 100%;
  }

  .profile-avatar-editor {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .profile-avatar-editor-side {
    gap: 14px;
  }

  .profile-avatar-preview-block {
    justify-content: center;
  }

  .profile-avatar-crop-stage,
  .profile-avatar-crop-placeholder {
    width: min(100%, 340px);
  }
}

@media (max-width: 480px) {
  .custom-background-editor {
    grid-template-columns: 1fr;
  }

  .custom-background-fit {
    grid-template-columns: 1fr;
  }

  .profile-avatar-editor {
    text-align: left;
  }

  .profile-avatar-transform-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .profile-avatar-transform-actions button {
    width: 100%;
  }

  .profile-avatar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-avatar-remove {
    margin-right: 0;
    order: 3;
  }


  #message-selection-bar {
    margin: 8px 8px 0;
  }

  .message-selection-actions {
    width: 100%;
    justify-content: stretch;
  }

  #message-selection-bar button {
    flex: 1 1 auto;
  }

  #messages li {
    max-width: 91%;
  }

  .message-image {
    width: min(320px, 72vw);
  }

  #smiley-picker {
    max-height: 52vh;
    border-radius: 14px;
  }

  .smiley-picker-footer {
    gap: 4px;
    padding: 5px 6px;
  }

  .smiley-picker-mode-button {
    padding: 6px 8px;
  }

  .smiley-picker-credit {
    display: none;
  }

  .smiley-grid {
    min-height: 170px;
    grid-template-columns:
      repeat(auto-fill, minmax(48px, 1fr));
  }

  .smiley-option {
    min-height: 50px;
  }

  .smiley-grid.smiley-grid-stickers {
    grid-template-columns:
      repeat(auto-fill, minmax(76px, 1fr));
    gap: 6px;
  }

  .smiley-option.sticker-option {
    min-height: 78px;
  }

  .smiley-option.sticker-option img {
    width: 70px;
    height: 70px;
    max-height: 70px;
  }

  .message-sticker {
    width: 300px;
    max-width: 72vw;
    max-height: 330px;
  }

  #messages li.message-with-sticker {
    min-width: min(316px, 76vw);
  }

  #image-viewer-controls {
    max-width: calc(100vw - 16px);
    gap: 5px;
  }

  #image-viewer-controls button {
    min-width: 38px;
    padding: 0 9px;
  }

  #image-download {
    min-width: 84px;
  }
}


@media (hover: none) and (pointer: coarse) {
  #messages li[data-message-id] {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
}

@media
  (hover: none) and
  (pointer: coarse) and
  (orientation: landscape) and
  (max-height: 520px) {
  .app-shell {
    grid-template-rows: 54px minmax(0, 1fr);
  }

  .app-sidebar {
    padding: 6px 10px;
  }

  .brand-block {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
  }

  .brand-logo {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 11px;
    font-size: 18px;
  }

  h1 {
    font-size: 17px;
  }

  .brand-block p {
    display: none;
  }

  .profile-avatar {
    flex-basis: 34px;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
  }

  #profile-display-name {
    max-width: 74px;
  }

  #user-select {
    min-width: 82px;
    padding: 4px 7px;
  }

  .chat-header {
    min-height: 52px;
    padding: 5px 9px;
  }

  .chat-header-avatar {
    flex-basis: 36px;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
  }

  .chat-header-room-button {
    width: 32px;
    height: 32px;
  }

  .mobile-room-switcher > span,
  #partner-status {
    display: none;
  }

  #mobile-room-select {
    min-height: 32px;
  }


  #messages {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .composer-area {
    padding:
      0 6px
      max(5px, env(safe-area-inset-bottom));
  }

  .attachment-menu {
    left: 6px;
    width: min(286px, calc(100vw - 12px));
  }

  #message-form {
    padding: 4px;
  }

  .smiley-picker-anchor {
    flex-basis: 36px;
    width: 36px;
    height: 38px;
  }

  #smiley-button,
  #image-button {
    width: 36px;
    height: 38px;
  }

  #smiley-picker {
    left: -44px;
  }

  .send-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  #message-input {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}



/*
  FIX80 — web-gate продолжает новый нативный splash Омута.
  Android и WebView используют один фон и один логотип, поэтому между
  запуском Activity и готовым списком чатов нет белой/пустой вспышки.
*/
.mobile-startup-gate {
  display: none;
}

@media (
  max-width: 820px
), (hover: none) and (pointer: coarse) {
  .mobile-startup-gate {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    background: #0a1f1d;
    pointer-events: none;
    touch-action: none;
  }

  .mobile-startup-gate-logo {
    width: 112px;
    height: 112px;
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
  }

  .mobile-startup-gate.is-released {
    display: none;
  }
}

/* Этап 24: личные кабинеты и разделение пользователей */
.app-shell[aria-hidden="true"] {
  visibility: hidden;
}

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow-y: auto;
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 255, 255, 0.65),
      transparent 34%
    ),
    radial-gradient(
      circle at 82% 76%,
      rgba(79, 127, 143, 0.2),
      transparent 40%
    ),
    var(--page-background);
}

.auth-screen[hidden],
.auth-codes-dialog[hidden],
.auth-view[hidden] {
  display: none;
}

.auth-screen.auth-checking-pending
  .auth-card {
  visibility: hidden;
}

.auth-checking-view {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 18px 0 6px;
  text-align: center;
}

.auth-checking-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid var(--accent-soft);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: auth-checking-spin 0.8s linear infinite;
}

@keyframes auth-checking-spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-card {
  width: min(430px, 100%);
  padding: 24px;
  border: 1px solid var(--shell-border);
  border-radius: 22px;
  background: var(--surface-floating-strong);
  box-shadow: var(--shadow-soft);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 24px;
}

.auth-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 27px;
}

.auth-brand-logo img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(4, 31, 46, 0.3));
}

.auth-brand h1 {
  font-size: 24px;
}

.auth-brand p,
.auth-view-heading p {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.auth-view-heading {
  margin-bottom: 18px;
}

.auth-view-heading h2 {
  font-size: 20px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-form label,
#profile-account-password-form label {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: bold;
}

.auth-form input,
#profile-account-password-form input {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  outline: none;
  background: var(--input-background);
  color: var(--text-primary);
  font: inherit;
}

.auth-form input:focus,
#profile-account-password-form input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(79, 127, 143, 0.16);
}

.password-input-wrapper {
  position: relative;
  width: 100%;
}

.password-input-wrapper input {
  padding-right: 48px;
}

.password-visibility-toggle {
  position: absolute;
  top: 50%;
  right: 5px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  padding: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1;
  transform: translateY(-50%);
}

.password-visibility-toggle:hover:not(:disabled),
.password-visibility-toggle:focus-visible {
  background: var(--hover-background);
  color: var(--accent-color-dark);
}

.password-visibility-toggle:disabled {
  cursor: default;
  opacity: 0.45;
}

.auth-error {
  min-height: 19px;
  color: var(--danger-color);
  font-size: 12px;
  line-height: 1.4;
}

.auth-primary-button {
  min-height: 44px;
  margin-top: 3px;
  border-radius: 11px;
  background: var(--accent-color);
  color: #ffffff;
  font-weight: bold;
}

.auth-primary-button:hover:not(:disabled) {
  background: var(--accent-color-dark);
}

.auth-primary-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.auth-secondary-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.auth-secondary-actions button,
.auth-back-button {
  padding: 7px 3px;
  background: transparent;
  color: var(--accent-color-dark);
  font-size: 13px;
  font-weight: bold;
}

.auth-secondary-actions button:hover,
.auth-back-button:hover {
  text-decoration: underline;
}

.auth-back-button {
  margin-top: 12px;
}

.auth-codes-dialog {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(13, 27, 34, 0.62);
  backdrop-filter: blur(8px);
}

.auth-codes-card {
  width: min(510px, 100%);
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--surface-floating-strong);
  box-shadow: var(--shadow-soft);
}

.auth-codes-card h2 {
  font-size: 20px;
}

.auth-codes-card > p {
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

#auth-recovery-codes-text {
  width: 100%;
  height: 220px;
  margin-top: 16px;
  padding: 13px;
  resize: none;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  outline: none;
  background: var(--input-background);
  color: var(--text-primary);
  font-family: Consolas, monospace;
  font-size: 16px;
  line-height: 1.65;
  text-align: center;
}

.auth-codes-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.auth-codes-actions button {
  min-height: 39px;
  padding: 8px 13px;
  border-radius: 10px;
  background: var(--muted-button-background);
  color: var(--text-primary);
  font-weight: bold;
}

#auth-close-recovery-codes {
  background: var(--accent-color);
  color: #ffffff;
}

.auth-codes-status {
  min-height: 18px;
  margin-top: 8px;
  color: var(--accent-color-dark);
  font-size: 12px;
}

.account-settings-card {
  max-width: 640px;
}

.account-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
  padding: 12px 13px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-soft);
}

.account-login-row span {
  color: var(--text-secondary);
  font-size: 13px;
}

.account-login-row strong {
  overflow-wrap: anywhere;
}

#profile-account-password-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 7px;
}

.account-action-grid button {
  min-height: 42px;
  border-radius: 10px;
}

.account-security-note {
  margin-top: 13px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.account-logout-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}

.account-logout-row button {
  padding: 9px 13px;
  border-radius: 10px;
}

@media (max-width: 600px) {
  .auth-screen,
  .auth-codes-dialog {
    padding: 10px;
  }

  .auth-card,
  .auth-codes-card {
    padding: 18px;
    border-radius: 17px;
  }

  .auth-secondary-actions,
  .auth-codes-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .auth-secondary-actions button,
  .auth-codes-actions button {
    width: 100%;
  }

  .account-action-grid {
    grid-template-columns: 1fr;
  }
}

/* Этап 25.2 — панель системного администратора */
.profile-settings-tab[hidden],
.profile-settings-page[hidden],
.auth-codes-dialog[hidden] {
  display: none;
}

.admin-users-card {
  gap: 18px;
}

.admin-user-create-form {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  background: var(--surface-soft);
}

.admin-user-create-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-user-create-fields label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: bold;
}

.admin-user-create-fields input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  outline: none;
  background: var(--input-background);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
}

.admin-user-create-fields input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(79, 127, 143, 0.16);
}

.admin-users-note {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.admin-user-create-actions {
  margin-top: 12px;
}

.admin-users-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-users-list-heading h3 {
  margin: 0;
  font-size: 16px;
}

.admin-users-list-heading p {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
}

.admin-users-list-heading button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 9px;
}

.admin-users-list {
  display: flex;
  max-height: min(430px, 48vh);
  overflow-y: auto;
  flex-direction: column;
  gap: 10px;
  padding-right: 3px;
}

.admin-user-card {
  padding: 13px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-soft);
}

.admin-user-card-disabled {
  opacity: 0.78;
}

.admin-user-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-user-identity {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.admin-user-identity strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-identity span,
.admin-user-identity small {
  color: var(--text-secondary);
  font-size: 12px;
}

.admin-user-badges {
  display: flex;
  max-width: 52%;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.admin-user-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--muted-button-background);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
}

.admin-user-badge-active,
.admin-user-badge-online {
  background: #dcefdc;
  color: #256029;
}

.admin-user-badge-disabled {
  background: var(--danger-soft);
  color: var(--danger-color);
}

.admin-user-badge-setup {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
}

.admin-user-badge-admin {
  background: var(--accent-color);
  color: #ffffff;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 11px;
}

.admin-user-actions button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 12px;
}

.admin-users-empty {
  padding: 18px;
  border: 1px dashed var(--border-color);
  border-radius: 13px;
  color: var(--text-secondary);
  text-align: center;
}

.admin-setup-code-card {
  width: min(480px, calc(100vw - 28px));
}

.admin-setup-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-soft);
}

.admin-setup-login-row span {
  color: var(--text-secondary);
  font-size: 13px;
}

.admin-setup-login-row strong {
  overflow-wrap: anywhere;
}

#admin-setup-code-text {
  min-height: 72px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-align: center;
}

.admin-invite-create-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.admin-invite-create-fields label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: bold;
}

.admin-invite-create-fields input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  outline: none;
  background: var(--input-background);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
}

.admin-invite-create-fields input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(79, 127, 143, 0.16);
}

.admin-invite-link-card {
  width: min(520px, calc(100vw - 28px));
}

#admin-invite-link-text {
  min-height: 84px;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-align: left;
}

@media (max-width: 680px) {
  .admin-user-create-fields {
    grid-template-columns: 1fr;
  }

  .admin-user-summary {
    flex-direction: column;
  }

  .admin-user-badges {
    max-width: none;
    justify-content: flex-start;
  }

  .admin-user-actions {
    justify-content: stretch;
  }

  .admin-user-actions button {
    flex: 1 1 180px;
  }
}


@media (max-width: 620px) {
  .contacts-dialog-card {
    max-height: calc(
      var(--app-viewport-height, 100vh) - 16px
    );
  }

  .contacts-list {
    max-height: 56vh;
  }

  .contact-list-item {
    min-height: 62px;
    gap: 9px;
    padding: 8px;
  }

  .contact-list-avatar {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .contact-list-action {
    max-width: 116px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .contacts-dialog-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .contacts-dialog-actions button {
    width: 100%;
  }
}

/* Этап 25.3.3 — компактная мобильная шапка */
.mobile-compact-chat-header {
  display: none;
}

.mobile-chat-menu[hidden] {
  display: none;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .app-shell {
    grid-template-rows: minmax(0, 1fr);
  }

  .app-sidebar {
    display: none;
  }

  .chat-header {
    position: relative;
    z-index: 110;
    min-height: 56px;
    padding: 6px 9px;
    border-bottom:
      1px solid rgba(255, 255, 255, 0.12);
    background: var(--surface-floating);
    box-shadow: 0 5px 18px rgba(20, 43, 52, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .chat-header > .sidebar-open-button,
  .chat-header > .chat-header-avatar,
  .chat-header > .chat-header-info,
  .chat-header > .chat-header-room-actions {
    display: none !important;
  }

  .mobile-compact-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    gap: 8px;
  }

  .mobile-compact-chat-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
    gap: 9px;
  }

  .mobile-compact-chat-avatar {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: 50%;
    background:
      linear-gradient(145deg, #7aa6b1, #4f7f8f);
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    line-height: 1;
    cursor: default;
    transition:
      box-shadow 0.16s ease,
      transform 0.16s ease;
  }

  .mobile-compact-chat-avatar:disabled {
    opacity: 1;
  }

  .mobile-compact-chat-avatar-clickable {
    cursor: zoom-in;
  }

  .mobile-compact-chat-avatar-clickable:active {
    box-shadow:
      0 0 0 4px rgba(79, 127, 143, 0.18);
    transform: scale(0.97);
  }

  #mobile-chat-avatar-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  #mobile-chat-avatar-image[hidden],
  #mobile-chat-avatar-fallback[hidden] {
    display: none;
  }

  .mobile-compact-chat-text {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
  }

  #mobile-chat-title,
  #mobile-chat-subtitle {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mobile-chat-title {
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.15;
  }

  #mobile-chat-subtitle {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.2;
  }

  #mobile-chat-subtitle.mobile-chat-subtitle-typing {
    color: var(--accent-color-dark);
    font-weight: bold;
  }

  .mobile-chat-menu-anchor {
    position: relative;
    flex: 0 0 auto;
  }

  .mobile-chat-menu-button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--text-primary);
    font-size: 27px;
    line-height: 1;
  }

  .mobile-chat-menu-button[aria-expanded="true"] {
    background: var(--accent-soft);
    color: var(--accent-color-dark);
  }

  .mobile-chat-menu {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 1500;
    display: flex;
    width: min(310px, calc(100vw - 18px));
    padding: 8px;
    flex-direction: column;
    gap: 3px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--surface-floating-strong);
    box-shadow: 0 15px 38px rgba(15, 34, 42, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .mobile-menu-room-switcher {
    display: flex;
    padding: 5px 6px 7px;
    flex-direction: column;
    gap: 5px;
  }

  .mobile-menu-room-switcher > span {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: bold;
  }

  #mobile-room-select {
    width: 100%;
    min-height: 40px;
    padding: 7px 32px 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-background);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: bold;
  }

  .mobile-chat-menu-separator {
    height: 1px;
    margin: 2px 5px;
    background: var(--border-color);
  }

  .mobile-chat-menu-action {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-height: 43px;
    padding: 8px 10px;
    gap: 7px;
    border-radius: 11px;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
  }

  .mobile-chat-menu-action[hidden] {
    display: none;
  }

  .mobile-chat-menu-action > span:first-child {
    display: grid;
    place-items: center;
    color: var(--accent-color-dark);
    font-size: 18px;
  }

  .mobile-chat-menu-action:active {
    background: var(--hover-background);
  }

  .mobile-chat-menu-action:disabled {
    cursor: default;
    opacity: 0.42;
  }
}

/* Этап 25.3.3 — перелистывание фотографий */
.image-viewer-navigation {
  position: fixed;
  top: 50%;
  z-index: 1002;
  display: grid;
  place-items: center;
  width: 38px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
  font-size: 34px;
  line-height: 1;
  opacity: 0.58;
  transform: translateY(-50%);
  transition:
    opacity 0.14s ease,
    background 0.14s ease;
}

.image-viewer-navigation:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.52);
  opacity: 0.94;
}

.image-viewer-navigation:disabled {
  cursor: default;
  opacity: 0.14;
}

.image-viewer-navigation[hidden] {
  display: none;
}

.image-viewer-previous {
  left: 18px;
}

.image-viewer-next {
  right: 18px;
}

#image-viewer-image {
  will-change: transform, opacity;
  transition:
    transform 0.18s cubic-bezier(0.22, 0.75, 0.25, 1),
    opacity 0.18s ease;
}

#image-viewer-image.is-dragging {
  transition: none;
}

#image-viewer-image.image-viewer-transition-out-left {
  opacity: 0;
  transform: translateX(-34px);
}

#image-viewer-image.image-viewer-transition-out-right {
  opacity: 0;
  transform: translateX(34px);
}

#image-viewer-image.image-viewer-transition-enter-left {
  opacity: 0;
  transform: translateX(-34px);
  transition: none;
}

#image-viewer-image.image-viewer-transition-enter-right {
  opacity: 0;
  transform: translateX(34px);
  transition: none;
}

@media (hover: none) and (pointer: coarse) {
  .image-viewer-navigation {
    display: none !important;
  }

  .image-viewer-thumbnail:hover {
    opacity: 0.64;
    transform: none;
  }

  .image-viewer-thumbnail-active:hover {
    opacity: 1;
  }
}

@media (max-width: 520px) {
  #image-viewer.image-viewer-has-thumbnails {
    padding-top: 92px;
  }

  .image-viewer-thumbnails {
    right: 66px;
    left: 8px;
    width: auto;
    max-width: none;
    height: 60px;
    padding: 5px;
    border-radius: 14px;
  }

  .image-viewer-thumbnail {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 9px;
  }
}

@media (max-width: 520px) and (hover: hover) and (pointer: fine) {
  .image-viewer-navigation {
    width: 34px;
    height: 48px;
    border-radius: 12px;
  }

  .image-viewer-previous {
    left: 7px;
  }

  .image-viewer-next {
    right: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #image-viewer-image,
  #image-viewer-close,
  #image-viewer-controls,
  .image-viewer-navigation,
  .image-viewer-thumbnails,
  .image-viewer-thumbnail {
    transition: none !important;
  }
}

/* Этап 25.3.3 — ответ смахиванием сообщения влево */
#messages li[data-message-id] {
  transition: transform 0.16s ease;
}

#messages li.message-swipe-reply-active {
  z-index: 25;
  transform:
    translateX(
      var(--message-swipe-reply-offset, 0)
    );
  transition: none;
}

#messages li.message-swipe-reply-active::after {
  content: "↩";
  position: absolute;
  top: 50%;
  right: -39px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--surface-floating-strong);
  color: var(--accent-color-dark);
  box-shadow: 0 4px 12px rgba(20, 43, 52, 0.16);
  font-size: 18px;
  font-weight: bold;
  opacity:
    var(--message-swipe-reply-progress, 0);
  transform:
    translateY(-50%)
    scale(0.88);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

#messages li.message-swipe-reply-ready::after {
  border-color: var(--accent-color);
  background: var(--accent-soft);
  transform:
    translateY(-50%)
    scale(1);
}

@media (hover: none) and (pointer: coarse) {
  #messages li[data-message-id] {
    touch-action: pan-y;
  }
}

/* Этап 25.3.4.1 — мобильная панель чатов и плавающая шапка */
.mobile-chat-drawer-header,
.mobile-chat-drawer-search-panel,
.mobile-chat-drawer-empty,
.mobile-chat-drawer-footer,
.mobile-chat-drawer-backdrop,
.mobile-chat-drawer-open-button {
  display: none;
}

.chat-list-item[hidden] {
  display: none !important;
}

.chat-list-avatar-presence::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 5;
  width: 10px;
  height: 10px;
  border: 2px solid var(--sidebar-background);
  border-radius: 50%;
  background: #98a3a8;
  box-shadow: 0 1px 4px rgba(15, 35, 43, 0.22);
}

.chat-list-avatar-presence-online::after {
  background: #39b85a;
}

.chat-list-avatar-presence-offline::after {
  background: #98a3a8;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .app-shell {
    grid-template-rows: minmax(0, 1fr);
  }

  .chat-panel {
    position: relative;
  }

  .chat-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 110;
    min-height: 66px;
    padding:
      max(7px, env(safe-area-inset-top))
      9px
      5px;
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
  }

  .mobile-compact-chat-header {
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 8px;
    pointer-events: none;
  }

  .mobile-chat-drawer-open-button {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 0;
    border:
      1px solid
      color-mix(
        in srgb,
        var(--border-color) 68%,
        transparent
      );
    border-radius: 50%;
    background:
      color-mix(
        in srgb,
        var(--surface-floating-strong) 78%,
        transparent
      );
    color: var(--text-primary);
    box-shadow:
      0 5px 17px rgba(18, 39, 47, 0.14);
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    pointer-events: auto;
    transition:
      transform 0.14s ease,
      background 0.14s ease;
  }

  .mobile-chat-drawer-open-icon {
    display: block;
    width: 30px;
    height: 30px;
    overflow: visible;
  }

  .mobile-chat-drawer-open-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-chat-drawer-open-button:active {
    background: var(--accent-soft);
    color: var(--accent-color-dark);
    transform: scale(0.94);
  }

  .mobile-compact-chat-identity {
    display: flex;
    align-items: center;
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
    gap: 9px;
    padding: 5px 13px 5px 5px;
    border: 1px solid
      color-mix(
        in srgb,
        var(--border-color) 68%,
        transparent
      );
    border-radius: 999px;
    background:
      color-mix(
        in srgb,
        var(--surface-floating-strong) 78%,
        transparent
      );
    box-shadow:
      0 5px 17px rgba(18, 39, 47, 0.14);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    pointer-events: auto;
    cursor: default;
  }

  .mobile-compact-chat-avatar {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .mobile-chat-menu-anchor {
    pointer-events: auto;
  }

  .mobile-chat-menu-button {
    width: 48px;
    height: 48px;
    border:
      1px solid
      color-mix(
        in srgb,
        var(--border-color) 68%,
        transparent
      );
    background:
      color-mix(
        in srgb,
        var(--surface-floating-strong) 78%,
        transparent
      );
    box-shadow:
      0 5px 17px rgba(18, 39, 47, 0.14);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }

  .mobile-menu-room-switcher,
  .mobile-menu-room-switcher +
    .mobile-chat-menu-separator {
    display: none !important;
  }

  .chat-workspace {
    padding-top:
      calc(
        66px +
        env(safe-area-inset-top)
      );
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1800;
    display: flex;
    visibility: visible;
    width: min(87vw, 360px);
    height: var(
      --app-viewport-height,
      100dvh
    );
    min-height: 0;
    padding:
      max(12px, env(safe-area-inset-top))
      0
      max(10px, env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    border-right: 1px solid var(--border-color);
    border-bottom: none;
    background:
      color-mix(
        in srgb,
        var(--sidebar-background) 94%,
        transparent
      );
    box-shadow:
      16px 0 42px rgba(12, 31, 39, 0.24);
    opacity: 1;
    transform:
      translate3d(
        calc(-100% - 18px),
        0,
        0
      );
    transition:
      transform 0.25s
      cubic-bezier(0.22, 0.78, 0.2, 1);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    pointer-events: auto;
    touch-action: pan-y;
  }

  body.mobile-chat-drawer-open
    .app-sidebar {
    transform: translate3d(0, 0, 0);
  }

  /*
    FIX79 — первый мобильный экран выбора чата.
    Он готовится ещё пока appShell скрыт, поэтому при первом кадре
    пользователь сразу видит цельный список комнат, без старого чата
    под ним и без анимации выезда. После выбора комнаты класс снимается
    и следующие открытия снова используют обычные 87vw / 360px.
  */
  body.mobile-chat-drawer-initial
    .app-sidebar {
    width: 100vw;
    max-width: none;
    border-right: none;
    background: var(--sidebar-background);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.mobile-chat-drawer-initial.mobile-chat-drawer-open
    .app-sidebar {
    transform: translate3d(0, 0, 0);
    transition: none;
  }

  body.mobile-chat-drawer-initial:not(.mobile-chat-drawer-open)
    .app-sidebar {
    transition:
      transform 0.25s
      cubic-bezier(0.22, 0.78, 0.2, 1);
  }

  body.mobile-chat-drawer-initial
    .mobile-chat-drawer-backdrop {
    display: none !important;
  }

  body.mobile-chat-drawer-gesturing
    .app-sidebar {
    transition: none;
  }

  .app-sidebar > .brand-block,
  .app-sidebar > .profile-card,
  .app-sidebar > .sidebar-section-title,
  .app-sidebar > .sidebar-footer {
    display: none;
  }

  .mobile-chat-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: 10px;
    padding: 0 12px 10px 16px;
  }

  .mobile-chat-drawer-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-chat-drawer-header-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
  }

  .mobile-chat-drawer-icon-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1;
  }

  #mobile-chat-drawer-close {
    font-size: 27px;
  }

  .mobile-chat-drawer-search-icon {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-chat-drawer-icon-button:active,
  .mobile-chat-drawer-icon-button[
    aria-expanded="true"
  ] {
    background: var(--accent-soft);
    color: var(--accent-color-dark);
  }

  .mobile-chat-drawer-search-panel {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    margin: 0 10px 8px;
    padding: 5px 6px 5px 11px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--input-background);
  }

  .mobile-chat-drawer-search-panel[hidden] {
    display: none;
  }

  #mobile-chat-drawer-search-input {
    min-width: 0;
    min-height: 35px;
    flex: 1;
    padding: 6px 2px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
  }

  #mobile-chat-drawer-search-input::placeholder {
    color: var(--text-secondary);
  }

  #mobile-chat-drawer-search-clear {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    font-size: 22px;
    line-height: 1;
  }

  .app-sidebar .chat-list {
    display: block;
    min-height: 0;
    flex: 1 1 auto;
    padding: 3px 9px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .app-sidebar .chat-list-item {
    min-height: 68px;
    margin-bottom: 3px;
    padding: 9px 9px;
  }

  .app-sidebar .chat-list-avatar {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
  }

  .app-sidebar .chat-list-content {
    display: block;
  }

  .app-sidebar .chat-list-row strong {
    font-size: 15px;
  }

  .app-sidebar .chat-list-preview {
    margin-top: 5px;
    font-size: 12px;
  }

  .mobile-chat-drawer-empty {
    flex: 0 0 auto;
    margin: 12px;
    padding: 13px;
    border: 1px dashed var(--border-color);
    border-radius: 13px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
  }

  .mobile-chat-drawer-empty[hidden] {
    display: none;
  }

  .mobile-chat-drawer-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 0 0 auto;
    gap: 8px;
    padding: 9px 10px 0;
    border-top: 1px solid var(--border-color);
  }

  .mobile-chat-drawer-footer-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 13px;
    background: var(--surface-soft);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: bold;
  }

  .mobile-chat-drawer-footer-button >
    span:first-child {
    color: var(--accent-color-dark);
    font-size: 18px;
    line-height: 1;
  }

  .mobile-chat-drawer-footer-button-primary {
    background: var(--accent-color);
    color: #ffffff;
  }

  .mobile-chat-drawer-footer-button-primary >
    span:first-child {
    color: #ffffff;
  }

  .mobile-chat-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1750;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: rgba(5, 15, 19, 0.44);
    opacity: 0;
    transition: opacity 0.24s ease;
    pointer-events: none;
    touch-action: none;
  }

  .mobile-chat-drawer-backdrop[hidden] {
    display: none;
  }

  body.mobile-chat-drawer-open
    .mobile-chat-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.mobile-chat-drawer-gesturing
    .mobile-chat-drawer-backdrop {
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .mobile-chat-drawer-backdrop {
    transition: none !important;
  }
}

/* Этап 25.4 — инструменты: калькулятор, календарь и заметки */
.sidebar-tools-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(100% - 16px);
  min-height: 42px;
  margin: 10px 8px 0;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: bold;
}

.sidebar-tools-button:hover {
  border-color: var(--accent-color);
  background: var(--accent-soft);
  color: var(--accent-color-dark);
}

@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  html[data-sidebar-mode="compact"]
    .sidebar-tools-button {
    width: 72px;
    min-height: 48px;
    margin: 10px auto 0;
    padding: 7px 4px;
    border-radius: 14px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
  }
}

.tools-dialog {
  z-index: 1950;
}

.tools-dialog-card {
  display: flex;
  width: min(880px, 100%);
  height: min(
    760px,
    calc(var(--app-viewport-height, 100vh) - 36px)
  );
  max-height: min(
    820px,
    calc(var(--app-viewport-height, 100vh) - 36px)
  );
  padding: 0;
  overflow: hidden;
  flex-direction: column;
}

.tools-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-color);
}

.tools-dialog-header h2 {
  font-size: 21px;
}

.tools-dialog-header p {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.tools-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
}

.tools-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 43px;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 11px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: bold;
}

.tools-tab:hover,
.tools-tab-active {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
}

.tools-tab-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tools-pages {
  min-height: 0;
  flex: 1;
  padding: 18px 20px 20px;
  overflow-y: auto;
}

.tools-page[hidden] {
  display: none;
}

/* Калькулятор */
.calculator-shell {
  width: min(430px, 100%);
  margin: 0 auto;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--surface-soft);
  box-shadow: 0 10px 28px rgba(22, 48, 58, 0.1);
}

.calculator-screen {
  display: flex;
  min-height: 108px;
  margin-bottom: 13px;
  padding: 14px 16px;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  background: var(--input-background);
}

.calculator-expression {
  width: 100%;
  min-height: 20px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculator-display {
  display: block;
  width: 100%;
  margin-top: 6px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: clamp(30px, 7vw, 42px);
  font-weight: bold;
  line-height: 1.1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculator-keypad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.calculator-key {
  min-height: 56px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-strong);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: bold;
  transition:
    transform 0.1s ease,
    background 0.12s ease;
}

.calculator-key:hover,
.calculator-key:focus-visible {
  background: var(--hover-background);
}

.calculator-key:active {
  transform: scale(0.96);
}

.calculator-key-muted {
  background: var(--muted-button-background);
  color: var(--accent-color-dark);
}

.calculator-key-operation {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
  font-size: 24px;
}

.calculator-key-equals {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: #ffffff;
  font-size: 25px;
}

.calculator-key-equals:hover,
.calculator-key-equals:focus-visible {
  background: var(--accent-color-dark);
}

/* Календарь */
.calendar-shell {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: var(--surface-soft);
  box-shadow: 0 10px 28px rgba(22, 48, 58, 0.1);
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 9px;
}

.calendar-toolbar button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  background: var(--hover-background);
  color: var(--accent-color-dark);
  font-size: 28px;
  line-height: 1;
}

.calendar-toolbar button:hover {
  background: var(--accent-soft);
}

.calendar-month-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 19px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-today-button {
  display: block;
  min-height: 36px;
  margin: 10px auto 13px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--muted-button-background);
  color: var(--accent-color-dark);
  font-size: 13px;
  font-weight: bold;
}

.calendar-today-button:hover {
  background: var(--accent-soft);
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.calendar-weekdays {
  margin-bottom: 5px;
}

.calendar-weekdays span {
  padding: 4px 0;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: bold;
  text-align: center;
}

.calendar-day {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: bold;
}

.calendar-day:hover {
  border-color: var(--accent-color);
  background: var(--hover-background);
}

.calendar-day-outside {
  color: var(--text-secondary);
  opacity: 0.55;
}

.calendar-day-today {
  border-color: var(--accent-color);
}

.calendar-day-today::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-color);
}

.calendar-day-selected,
.calendar-day-selected:hover {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: #ffffff;
  opacity: 1;
}

.calendar-day-selected::after {
  background: #ffffff;
}

.calendar-day-number {
  position: relative;
  z-index: 1;
}

.calendar-day-note-count {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.calendar-day-selected
  .calendar-day-note-count {
  background: #ffffff;
  color: var(--accent-color-dark);
}

.calendar-day-outside
  .calendar-day-note-count {
  opacity: 0.8;
}

.calendar-selected-date {
  min-height: 42px;
  margin-top: 13px;
  padding: 11px 13px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--input-background);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}


.calendar-events {
  display: flex;
  margin-top: 8px;
  flex-direction: column;
  gap: 6px;
}

.calendar-events-heading {
  padding: 3px 2px 1px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: bold;
}

.calendar-events-empty {
  padding: 10px 12px;
  border: 1px dashed var(--border-color);
  border-radius: 11px;
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
}

.calendar-event-note {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: stretch;
  gap: 7px;
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--surface-strong);
  color: var(--text-primary);
}

.calendar-event-note:hover,
.calendar-event-note:focus-within {
  border-color: var(--accent-color);
}

.calendar-event-note-selected,
.calendar-event-note-selected:hover,
.calendar-event-note-selected:focus-within {
  border-color: var(--accent-color);
  background:
    color-mix(
      in srgb,
      var(--accent-color) 16%,
      var(--surface-strong)
    );
  box-shadow:
    inset 4px 0 0 var(--accent-color),
    0 2px 9px rgba(32, 58, 68, 0.1);
}

.calendar-event-note-main {
  display: flex;
  min-width: 0;
  min-height: 48px;
  flex: 1;
  padding: 5px 6px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.calendar-event-note-main:hover,
.calendar-event-note-main:focus-visible {
  background: var(--hover-background);
}

.calendar-event-note-main strong,
.calendar-event-note-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-event-note-main strong {
  font-size: 12px;
}

.calendar-event-note-main span {
  color: var(--text-secondary);
  font-size: 11px;
}

.calendar-event-note-selected
  .calendar-event-note-main span {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.35;
}

.calendar-event-note-hint {
  margin-top: 4px;
  color: var(--accent-color-dark);
  font-size: 10px;
  font-weight: bold;
}

.calendar-event-note-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.calendar-event-note-action {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  border-radius: 9px;
  background: var(--muted-button-background);
  color: var(--accent-color-dark);
}

.calendar-event-note-action:hover,
.calendar-event-note-action:focus-visible {
  background: var(--accent-soft);
}

.calendar-event-note-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-event-note-unlink {
  color: var(--danger-color);
}

.calendar-event-note-unlink:hover,
.calendar-event-note-unlink:focus-visible {
  background: var(--danger-soft);
}

/* Заметки */
.notes-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  gap: 12px;
  margin-bottom: 12px;
}

.notes-toolbar-main {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 9px;
}

.notes-toolbar-status {
  display: flex;
  min-width: 120px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.notes-search-field {
  display: flex;
  width: min(310px, 100%);
  min-width: 140px;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--input-background);
}

.notes-search-field:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(79, 127, 143, 0.14);
}

.notes-search-field svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#notes-search-input {
  min-width: 0;
  height: 38px;
  flex: 1;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
}

#notes-search-input::placeholder {
  color: var(--text-secondary);
}

#notes-search-input::-webkit-search-cancel-button {
  display: none;
}

#notes-search-clear {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
}

#notes-search-clear:hover {
  background: var(--hover-background);
  color: var(--accent-color-dark);
}

#notes-search-clear[hidden] {
  display: none;
}

.notes-search-status {
  min-height: 14px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: bold;
  text-align: right;
}

.notes-create-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  gap: 7px;
  padding: 0 14px;
  border-radius: 11px;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
}

.notes-create-button:hover {
  background: var(--accent-color-dark);
}

.notes-create-button > span:first-child {
  font-size: 19px;
  line-height: 1;
}

.notes-save-status {
  min-height: 18px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: bold;
  text-align: right;
}

.notes-workspace {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  height: min(430px, calc(100vh - 285px));
  min-height: 320px;
  /*
    Не используем overflow:hidden: браузер считает такой блок
    прокручиваемым и при фокусе на календаре мог сдвигать ВСЮ
    рабочую область вверх. overflow:clip обрезает содержимое,
    но принципиально не создаёт общий scroll-container.
  */
  overflow: clip;
  overflow-anchor: none;
  border: 1px solid var(--border-color);
  border-radius: 17px;
  background: var(--surface-soft);
}

.notes-list {
  min-width: 0;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scroll-padding: 7px;
  scrollbar-width: thin;
  border-right: 1px solid var(--border-color);
  background: var(--sidebar-background);
}

.notes-list-item {
  display: flex;
  width: 100%;
  min-width: 0;
  margin-bottom: 6px;
  padding: 10px;
  overflow: hidden;
  flex-direction: column;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.notes-list-item:hover {
  background: var(--surface-soft);
}

.notes-list-item-active,
.notes-list-item-active:hover {
  border-color: var(--accent-color);
  background:
    color-mix(
      in srgb,
      var(--accent-color) 22%,
      var(--surface-strong)
    );
  box-shadow:
    inset 4px 0 0 var(--accent-color),
    0 2px 9px rgba(32, 58, 68, 0.12);
}

.notes-list-item-active strong {
  color: var(--accent-color-dark);
}

.notes-list-item strong,
.notes-list-item span,
.notes-list-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes-list-item strong {
  font-size: 13px;
}

.notes-list-item span {
  color: var(--text-secondary);
  font-size: 11px;
}

.notes-list-item small {
  color: var(--text-secondary);
  font-size: 10px;
}

.notes-list-empty {
  padding: 20px 8px;
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
}

.notes-editor {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scrollbar-width: thin;
  background: var(--surface-strong);
}

.notes-empty {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 30px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.notes-empty[hidden],
.notes-fields[hidden] {
  display: none;
}

.notes-fields {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.notes-title-input,
.notes-content-input {
  width: 100%;
  border: 1px solid var(--border-color);
  background: var(--input-background);
  color: var(--text-primary);
  font: inherit;
}

.notes-title-input {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 16px;
  font-weight: bold;
}

.notes-content-input {
  min-height: 310px;
  flex: 1;
  margin-top: 10px;
  padding: 12px;
  resize: none;
  border-radius: 13px;
  font-size: 14px;
  line-height: 1.5;
}

.notes-title-input:focus,
.notes-content-input:focus {
  border-color: var(--accent-color);
  outline: 3px solid rgba(79, 127, 143, 0.16);
}

.notes-calendar-link {
  margin-top: 10px;
  padding: 9px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-soft);
}

.notes-calendar-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.notes-calendar-toggle {
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--muted-button-background);
  color: var(--accent-color-dark);
  font-size: 11px;
  font-weight: bold;
}

.notes-calendar-toggle:hover:not(:disabled) {
  background: var(--accent-soft);
}

.notes-calendar-toggle:disabled {
  cursor: default;
  opacity: 0.5;
}

.notes-calendar-toggle svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notes-calendar-current {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes-calendar-quick-remove {
  display: none !important;
  min-height: 30px;
  flex: 0 0 auto;
  padding: 0 9px;
  border-radius: 8px;
  background: transparent;
  color: var(--danger-color);
  font-size: 10px;
  font-weight: bold;
}

.notes-calendar-quick-remove:hover {
  background: var(--danger-soft);
}

.notes-calendar-quick-remove[hidden] {
  display: none;
}

.notes-calendar-controls {
  display: grid;
  grid-template-columns:
    auto minmax(145px, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.notes-calendar-controls[hidden] {
  display: none;
}

.notes-calendar-controls label {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: bold;
}

#notes-calendar-date {
  min-width: 0;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--input-background);
  color: var(--text-primary);
  font: inherit;
  font-size: 11px;
}

.notes-calendar-apply,
.notes-calendar-remove {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: bold;
}

.notes-calendar-apply {
  background: var(--accent-color);
  color: #ffffff;
}

.notes-calendar-remove {
  background: var(--danger-soft);
  color: var(--danger-color);
}

.notes-calendar-remove[hidden] {
  display: none;
}

.notes-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

#notes-updated-at {
  color: var(--text-secondary);
  font-size: 11px;
}

.notes-delete-button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger-color);
  font-size: 12px;
  font-weight: bold;
}

.notes-delete-button:hover {
  filter: brightness(0.97);
}

.notes-storage-note {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}


/* Инструменты → Список */
.lists-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.lists-create-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 11px;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
}

.lists-create-button:hover {
  background: var(--accent-color-dark);
}

.lists-create-button > span:first-child {
  font-size: 19px;
  line-height: 1;
}

.lists-save-status {
  min-height: 18px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: bold;
  text-align: right;
}

.lists-workspace {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 320px;
  overflow: clip;
  border: 1px solid var(--border-color);
  border-radius: 17px;
  background: var(--surface-soft);
}

.lists-collection {
  min-width: 0;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--border-color);
  background: var(--sidebar-background);
}

.lists-collection-empty,
.lists-items-empty {
  padding: 20px 10px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.lists-collection-item {
  display: flex;
  width: 100%;
  min-width: 0;
  margin-bottom: 6px;
  padding: 10px;
  overflow: hidden;
  flex-direction: column;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.lists-collection-item:hover {
  background: var(--surface-soft);
}

.lists-collection-item-active,
.lists-collection-item-active:hover {
  border-color: var(--accent-color);
  background:
    color-mix(
      in srgb,
      var(--accent-color) 22%,
      var(--surface-strong)
    );
  box-shadow:
    inset 4px 0 0 var(--accent-color),
    0 2px 9px rgba(32, 58, 68, 0.12);
}

.lists-collection-item strong,
.lists-collection-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lists-collection-item strong {
  font-size: 13px;
}

.lists-collection-item-active strong {
  color: var(--accent-color-dark);
}

.lists-collection-item span {
  color: var(--text-secondary);
  font-size: 11px;
}

.lists-editor {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-strong);
}

.lists-empty {
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: 30px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.lists-empty[hidden],
.lists-fields[hidden] {
  display: none;
}

.lists-fields {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.lists-title-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--input-background);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
  font-weight: bold;
}

.lists-title-input:focus,
#tools-list-new-item:focus,
.tools-list-item-text:focus {
  border-color: var(--accent-color);
  outline: 3px solid color-mix(in srgb, var(--accent-color) 17%, transparent);
}

.lists-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

#tools-list-new-item {
  min-width: 0;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-background);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
}

#tools-list-add-item {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--muted-button-background);
  color: var(--accent-color-dark);
  font-size: 12px;
  font-weight: bold;
}

#tools-list-add-item:hover {
  background: var(--accent-soft);
}

.lists-items {
  min-height: 180px;
  flex: 1 1 auto;
  margin-top: 10px;
  padding: 4px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lists-item-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 30px 32px;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-bottom: 6px;
  padding: 5px 6px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-soft);
}

.lists-item-check {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.lists-item-check span {
  opacity: 0;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.lists-item-row-complete .lists-item-check {
  border-color: var(--accent-color);
  background: var(--accent-color);
}

.lists-item-row-complete .lists-item-check span {
  opacity: 1;
}

.tools-list-item-text,
.tools-list-item-input {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
}

.tools-list-item-text {
  overflow-wrap: anywhere;
  cursor: default;
  user-select: text;
}

.tools-list-item-input {
  border-color: var(--accent-color);
  background: var(--surface-background);
  outline: none;
}

.lists-item-row-editing {
  border-color: var(--accent-color);
}

.lists-item-row-complete .tools-list-item-text,
.lists-item-row-complete .tools-list-item-input {
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.lists-item-edit,
.lists-item-remove {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  line-height: 1;
}

.lists-item-edit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lists-item-edit:hover {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
}

.lists-item-remove {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 19px;
  line-height: 1;
}

.lists-item-remove:hover {
  background: var(--danger-soft);
  color: var(--danger-color);
}

.lists-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

#tools-list-progress {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: bold;
}

.lists-footer-actions {
  display: flex;
  gap: 7px;
}

.lists-clear-completed,
.lists-delete-button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: bold;
}

.lists-clear-completed {
  background: var(--muted-button-background);
  color: var(--accent-color-dark);
}

.lists-clear-completed:disabled {
  cursor: default;
  opacity: 0.45;
}

.lists-delete-button {
  background: var(--danger-soft);
  color: var(--danger-color);
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .app-sidebar > .sidebar-tools-button {
    display: none;
  }

  .mobile-chat-drawer-footer-button-tools {
    grid-column: 1 / -1;
  }

  .tools-dialog {
    padding:
      max(8px, env(safe-area-inset-top))
      8px
      max(8px, env(safe-area-inset-bottom));
  }

  .tools-dialog-card {
    width: 100%;
    height: calc(
      var(--app-viewport-height, 100dvh) -
      max(16px, env(safe-area-inset-top)) -
      max(16px, env(safe-area-inset-bottom))
    );
    max-height: calc(
      var(--app-viewport-height, 100dvh) -
      max(16px, env(safe-area-inset-top)) -
      max(16px, env(safe-area-inset-bottom))
    );
    border-radius: 18px;
  }

  .tools-dialog-header {
    padding: 14px 15px 11px;
  }

  .tools-dialog-header h2 {
    font-size: 19px;
  }

  .tools-dialog-header p {
    font-size: 12px;
  }

  .tools-tabs {
    gap: 4px;
    padding: 8px;
  }

  .tools-tab {
    min-height: 54px;
    gap: 2px;
    padding: 5px 3px;
    flex-direction: column;
    font-size: 10px;
    line-height: 1.08;
    text-align: center;
  }

  .tools-tab > span {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tools-tab-icon {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }

  .tools-pages {
    padding: 12px;
  }

  .calculator-shell,
  .calendar-shell {
    padding: 11px;
    border-radius: 16px;
  }

  .calculator-screen {
    min-height: 92px;
    padding: 11px 13px;
  }

  .calculator-keypad {
    gap: 7px;
  }

  .calculator-key {
    min-height: 52px;
    border-radius: 12px;
  }

  .calendar-day {
    border-radius: 10px;
    font-size: 13px;
  }

  .calendar-event-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
  }

  .calendar-event-note-main {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .calendar-event-note-main strong,
  .calendar-event-note-main span {
    max-width: 100%;
  }

  .calendar-event-note-main span {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
  }

  .calendar-event-note-selected
    .calendar-event-note-main span {
    -webkit-line-clamp: 4;
  }

  .calendar-event-note-actions {
    align-self: center;
    gap: 3px;
  }

  .calendar-event-note-action {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .notes-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 9px;
  }

  .notes-toolbar-main {
    width: 100%;
    flex-wrap: wrap;
  }

  .notes-create-button {
    flex: 0 0 auto;
  }

  .notes-search-field {
    min-width: 170px;
    flex: 1;
  }

  .notes-toolbar-status {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .notes-search-status,
  .notes-save-status {
    text-align: left;
  }

  .notes-workspace {
    display: flex;
    min-height: 0;
    overflow: visible;
    flex-direction: column;
    border: none;
    background: transparent;
  }

  .notes-list {
    display: flex;
    min-height: 82px;
    max-height: 104px;
    gap: 7px;
    padding: 4px 2px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
  }

  .notes-list-item {
    flex: 0 0 155px;
    margin: 0;
    padding: 9px;
    border-color: var(--border-color);
    background: var(--surface-soft);
  }

  .notes-list-empty {
    width: 100%;
    padding: 22px 8px;
  }

  .notes-editor {
    min-height: 0;
    padding: 11px 0 0;
    background: transparent;
  }

  .notes-empty {
    min-height: 230px;
    border: 1px dashed var(--border-color);
    border-radius: 14px;
  }

  .notes-content-input {
    min-height: 250px;
    resize: vertical;
  }

  .notes-calendar-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .notes-calendar-toggle {
    width: 100%;
    justify-content: center;
  }

  .notes-calendar-current {
    width: 100%;
    text-align: center;
    white-space: normal;
  }

  .notes-calendar-quick-remove {
    width: 100%;
    min-height: 32px;
  }

  .notes-calendar-controls {
    grid-template-columns: 1fr 1fr;
  }

  .notes-calendar-controls label {
    grid-column: 1 / -1;
  }

  #notes-calendar-date {
    grid-column: 1 / -1;
  }

  .notes-calendar-apply,
  .notes-calendar-remove {
    width: 100%;
  }

  .notes-editor-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .notes-delete-button {
    align-self: stretch;
  }

  .lists-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 9px;
  }

  .lists-save-status {
    text-align: left;
  }

  .lists-workspace {
    display: flex;
    min-height: 0;
    overflow: visible;
    flex-direction: column;
    border: none;
    background: transparent;
  }

  .lists-collection {
    display: flex;
    min-height: 82px;
    max-height: 104px;
    gap: 7px;
    padding: 4px 2px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
  }

  .lists-collection-item {
    flex: 0 0 155px;
    margin: 0;
    padding: 9px;
    border-color: var(--border-color);
    background: var(--surface-soft);
  }

  .lists-collection-empty {
    width: 100%;
    padding: 22px 8px;
  }

  .lists-editor {
    min-height: 0;
    padding: 11px 0 0;
    background: transparent;
  }

  .lists-empty {
    min-height: 230px;
    border: 1px dashed var(--border-color);
    border-radius: 14px;
  }

  .lists-items {
    min-height: 210px;
  }

  .lists-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .lists-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .tools-tab {
    gap: 2px;
    padding-inline: 2px;
    font-size: 9.5px;
  }

  .tools-tab-icon {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  .notes-toolbar-main {
    flex-direction: column;
    align-items: stretch;
  }

  .notes-create-button,
  .notes-search-field {
    width: 100%;
    max-width: none;
  }

  .notes-create-button {
    justify-content: center;
  }

  .calendar-day-note-count {
    top: 2px;
    right: 2px;
    min-width: 14px;
    height: 14px;
    padding-inline: 3px;
    font-size: 8px;
  }

  .tools-tab {
    gap: 4px;
    padding-inline: 4px;
    font-size: 10px;
  }

  .tools-tab-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .calendar-shell {
    padding: 9px;
  }

  .calendar-weekdays,
  .calendar-grid {
    gap: 3px;
  }

  .calendar-day {
    border-radius: 9px;
    font-size: 12px;
  }

  .calendar-selected-date {
    font-size: 12px;
  }
}



/* Этап 25.5 — точная настройка внешнего вида чатов */
.advanced-appearance-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.advanced-appearance-heading p {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.advanced-appearance-reset {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--muted-button-background);
  color: var(--accent-color-dark);
  font-size: 12px;
  font-weight: bold;
}

.advanced-appearance-reset:hover {
  background: var(--accent-soft);
}

.advanced-appearance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.advanced-appearance-field,
.advanced-appearance-range {
  display: flex;
  min-width: 0;
  padding: 12px;
  flex-direction: column;
  gap: 9px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--surface-soft);
}

.advanced-appearance-field > span,
.advanced-appearance-range > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: bold;
}

.advanced-appearance-field select {
  width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-background);
  color: var(--text-primary);
}

.advanced-appearance-range output {
  color: var(--accent-color-dark);
  white-space: nowrap;
}

.advanced-appearance-range input[type="range"] {
  width: 100%;
  accent-color: var(--accent-color);
}

.appearance-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.appearance-color-control {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--surface-soft);
}

.appearance-color-control.appearance-color-custom {
  border-color: var(--accent-color);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}

.appearance-color-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.appearance-color-title strong {
  min-width: 0;
  font-size: 12px;
}

.appearance-color-title button {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 8px;
  background: var(--muted-button-background);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: bold;
}

.appearance-color-title button:hover {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
}

.appearance-color-inputs {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 9px;
  margin-top: 10px;
}

.appearance-color-inputs input[type="color"] {
  width: 52px;
  height: 42px;
  padding: 3px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-background);
  cursor: pointer;
}

.appearance-color-inputs input[type="text"] {
  min-width: 0;
  height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-background);
  color: var(--text-primary);
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
}

.appearance-color-inputs input.appearance-color-invalid {
  border-color: var(--danger-color);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.appearance-color-control output {
  display: block;
  min-height: 16px;
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 10px;
}

.advanced-appearance-preview {
  display: flex;
  min-height: 150px;
  margin-top: 13px;
  padding: 16px;
  flex-direction: column;
  justify-content: center;
  gap: var(--advanced-preview-spacing, 8px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 16px 16px,
      var(--chat-pattern) 2px,
      transparent 2px
    ),
    var(--chat-background);
  background-size: 54px 54px;
}

.advanced-preview-bubble {
  width: fit-content;
  max-width: 82%;
  padding: 9px 12px;
  border: 2px solid transparent;
  border-radius: var(--advanced-preview-radius, 15px);
  color: var(--advanced-preview-text-color);
  font-family: var(--advanced-preview-font-family);
  font-size: var(--advanced-preview-font-size);
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(41, 69, 79, 0.1);
}

.advanced-preview-nickname {
  display: block;
  margin-bottom: 3px;
  color: var(--advanced-preview-nickname-color);
  font-size: 0.8em;
  font-weight: 700;
}

.advanced-preview-partner {
  margin-right: auto;
  border-bottom-left-radius: 5px;
  background: var(--advanced-preview-partner-color);
}

.advanced-preview-own {
  margin-left: auto;
  border-color: var(--advanced-preview-accent-color);
  border-bottom-right-radius: 5px;
  background: var(--advanced-preview-own-color);
}

#message-input {
  font-family: var(--chat-message-font-family);
  font-size: var(--chat-message-font-size);
}

@media (max-width: 700px) {
  .advanced-appearance-heading {
    flex-direction: column;
  }

  .advanced-appearance-reset {
    align-self: stretch;
  }

  .advanced-appearance-grid,
  .appearance-color-grid {
    grid-template-columns: 1fr;
  }
}


.mobile-chat-drawer-footer-button-tools > span:first-child {
  color: inherit;
  font-size: 13px;
  line-height: inherit;
}


/* Этап 25.5.3 — единая встроенная палитра */
.appearance-color-swatch {
  position: relative;
  display: grid;
  width: 52px;
  height: 42px;
  padding: 3px;
  place-items: center;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-background);
  cursor: pointer;
}

.appearance-color-swatch > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  background: var(
    --appearance-swatch-color,
    #4f7f8f
  );
  box-shadow:
    inset 0 0 0 1px
      rgba(0, 0, 0, 0.12);
}

.appearance-color-swatch:hover,
.appearance-color-swatch:focus-visible {
  border-color: var(--accent-color);
  box-shadow:
    0 0 0 3px var(--accent-soft);
}

.appearance-custom-color-picker {
  position: relative;
  z-index: 12;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--surface-floating-strong);
  box-shadow: 0 12px 30px rgba(24, 46, 56, 0.18);
}

.appearance-custom-color-picker[hidden] {
  display: none;
}

.appearance-custom-color-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.appearance-custom-color-picker-header > div {
  min-width: 0;
}

.appearance-custom-color-picker-header strong,
.appearance-custom-color-picker-header small {
  display: block;
}

.appearance-custom-color-picker-header strong {
  font-size: 14px;
}

.appearance-custom-color-picker-header small {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 11px;
}

#appearance-custom-color-picker-close {
  display: grid;
  width: 31px;
  height: 31px;
  padding: 0;
  flex: 0 0 31px;
  place-items: center;
  border-radius: 9px;
  background: var(--muted-button-background);
  color: var(--text-secondary);
  font-size: 21px;
  line-height: 1;
}

#appearance-custom-color-picker-close:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.appearance-color-saturation-value {
  position: relative;
  width: 100%;
  height: 210px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background:
    linear-gradient(
      to top,
      #000000,
      transparent
    ),
    linear-gradient(
      to right,
      #ffffff,
      transparent
    ),
    var(
      --appearance-picker-hue-color,
      #ff0000
    );
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.appearance-color-saturation-value-thumb {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.65),
    0 2px 7px rgba(0, 0, 0, 0.32);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.appearance-custom-hue {
  display: block;
  margin-top: 12px;
}

.appearance-custom-hue > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: bold;
}

#appearance-color-hue {
  width: 100%;
  height: 24px;
  margin-top: 7px;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
}

#appearance-color-hue::-webkit-slider-runnable-track {
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  background:
    linear-gradient(
      to right,
      #ff0000,
      #ffff00,
      #00ff00,
      #00ffff,
      #0000ff,
      #ff00ff,
      #ff0000
    );
}

#appearance-color-hue::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -6px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.28);
}

#appearance-color-hue::-moz-range-track {
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  background:
    linear-gradient(
      to right,
      #ff0000,
      #ffff00,
      #00ff00,
      #00ffff,
      #0000ff,
      #ff00ff,
      #ff0000
    );
}

#appearance-color-hue::-moz-range-thumb {
  width: 19px;
  height: 19px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.28);
}

.appearance-custom-color-values {
  display: grid;
  grid-template-columns:
    46px minmax(0, 1fr)
    minmax(0, 1fr);
  gap: 9px;
  margin-top: 12px;
  align-items: end;
}

.appearance-custom-color-preview {
  display: block;
  width: 46px;
  height: 42px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px
      rgba(0, 0, 0, 0.12);
}

.appearance-custom-color-values label {
  min-width: 0;
}

.appearance-custom-color-values label > span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: bold;
}

.appearance-custom-color-values input {
  width: 100%;
  height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-background);
  color: var(--text-primary);
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  font-weight: bold;
}

.appearance-custom-color-values input[readonly] {
  color: var(--text-secondary);
}

.appearance-custom-color-values input.appearance-color-invalid {
  border-color: var(--danger-color);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.appearance-custom-color-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 13px;
}

.appearance-custom-color-actions button {
  min-width: 92px;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
}

#appearance-custom-color-cancel {
  background: var(--muted-button-background);
  color: var(--text-primary);
}

#appearance-custom-color-apply {
  background: var(--accent-color);
  color: #ffffff;
}

/* Этап 25.6.2 — прогресс и надёжное возобновление вложений */
.selected-attachment-upload-state {
  width: min(360px, 76vw);
  max-width: 100%;
  margin-top: 7px;
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--hover-background);
}

.selected-attachment-upload-state[hidden] {
  display: none;
}

.selected-attachment-upload-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: bold;
}

#selected-attachment-upload-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#selected-attachment-upload-percent {
  flex: 0 0 auto;
  color: var(--accent-color-dark);
  font-size: 12px;
}

.selected-attachment-upload-progress {
  height: 8px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px var(--border-color);
}

#selected-attachment-upload-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-color);
  transition: width 0.12s ease;
}

.selected-attachment-upload-state[data-state="processing"]
  #selected-attachment-upload-progress-bar,
.selected-attachment-upload-state[data-state="success"]
  #selected-attachment-upload-progress-bar,
.selected-attachment-upload-state[data-state="sending"]
  #selected-attachment-upload-progress-bar {
  background: #3a9a55;
}

.selected-attachment-upload-state[data-state="error"] {
  border-color: var(--danger-color);
  background: var(--danger-soft);
}

.selected-attachment-upload-state[data-state="error"]
  #selected-attachment-upload-status,
.selected-attachment-upload-state[data-state="error"]
  #selected-attachment-upload-percent {
  color: var(--danger-color);
}

.selected-attachment-upload-state[data-state="error"]
  #selected-attachment-upload-status {
  overflow: visible;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.selected-attachment-upload-state[data-state="error"]
  #selected-attachment-upload-progress-bar {
  background: var(--danger-color);
}

#selected-attachment-upload-retry {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  touch-action: manipulation;
}

#selected-attachment-upload-retry[hidden] {
  display: none;
}

#selected-attachment-upload-retry:disabled {
  cursor: wait;
  opacity: 0.65;
}

#selected-image-remove {
  z-index: 12;
  touch-action: manipulation;
}

/* Этап 25.6 — единая система вложений */
#selected-attachment-preview-video {
  display: block;
  width: min(260px, 68vw);
  max-height: 190px;
  border-radius: 9px;
  background: #000000;
  object-fit: contain;
}

#selected-attachment-preview-video[hidden],
#selected-attachment-preview-file[hidden],
#selected-image-preview-image[hidden] {
  display: none;
}

.selected-attachment-preview-file {
  display: flex;
  width: min(360px, 76vw);
  min-width: 230px;
  padding: 10px 40px 10px 10px;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: var(--hover-background);
}

.selected-attachment-preview-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  font-size: 22px;
}

.selected-attachment-preview-details {
  display: block;
  min-width: 0;
}

.selected-attachment-preview-details strong,
.selected-attachment-preview-details small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-attachment-preview-details strong {
  font-size: 13px;
}

.selected-attachment-preview-details small {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 10px;
}

.message-video-attachment {
  width: min(420px, 66vw);
  max-width: 100%;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-soft);
}

.message-video {
  display: block;
  width: 100%;
  max-height: 430px;
  background: transparent;
  object-fit: contain;
}

.message-video-frame {
  min-height: 190px;
  background:
    radial-gradient(
      circle at 50% 42%,
      color-mix(in srgb, var(--accent-color) 22%, transparent),
      transparent 52%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface-strong) 92%, #000000),
      color-mix(in srgb, var(--chat-background) 88%, #000000)
    );
}

.message-video-lazy-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  padding: 18px;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.message-video-lazy-play[hidden] {
  display: none;
}

.message-video-lazy-play-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding-left: 4px;
  border: 1px solid
    color-mix(in srgb, var(--accent-color) 62%, transparent);
  border-radius: 50%;
  background: color-mix(
    in srgb,
    var(--surface-floating-strong) 82%,
    transparent
  );
  color: var(--accent-color-dark);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-size: 24px;
  line-height: 1;
}

.message-video-lazy-play:hover
  .message-video-lazy-play-icon,
.message-video-lazy-play:focus-visible
  .message-video-lazy-play-icon {
  transform: scale(1.05);
  background: var(--accent-soft);
}

/*
  У видео используется только кнопка разворачивания «Омута».
  Встроенный fullscreen браузера скрыт, чтобы не появлялся
  второй полноэкранный режим, из которого неудобно выходить
  на телефоне.
*/
.message-video::-webkit-media-controls-fullscreen-button,
.message-video-viewer-player::-webkit-media-controls-fullscreen-button {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.message-video::-webkit-media-controls-picture-in-picture-button,
.message-video-viewer-player::-webkit-media-controls-picture-in-picture-button {
  display: none !important;
}

.message-attachment-caption {
  display: flex;
  min-width: 0;
  padding: 8px 10px;
  flex-direction: column;
  gap: 2px;
}

.message-attachment-caption span,
.message-attachment-caption small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-attachment-caption span {
  font-size: 12px;
  font-weight: bold;
}

.message-attachment-caption small {
  color: var(--text-secondary);
  font-size: 10px;
}

.message-video-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.message-video-attachment {
  position: relative;
}

.message-video-frame {
  position: relative;
  overflow: hidden;
}

.message-video-expand {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: rgba(15, 22, 26, 0.36);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.message-video-expand:hover,
.message-video-expand:focus-visible {
  background: rgba(15, 22, 26, 0.66);
}

.message-video-expand svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.message-video-expanded-open {
  overflow: hidden;
}

.message-video-viewer {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding:
    max(10px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  background: rgba(5, 9, 12, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.message-video-viewer[hidden] {
  display: none;
}

.message-video-viewer-player {
  display: block;
  width: min(1180px, 100%);
  max-width: 100%;
  height: min(86dvh, 820px);
  max-height: calc(100dvh - 20px);
  background: #000000;
  object-fit: contain;
}

.message-video-viewer-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 4;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(20, 24, 27, 0.48);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.message-video-viewer-close svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.message-video-viewer-close:hover,
.message-video-viewer-close:focus-visible,
.message-video-viewer-close:active {
  background: rgba(20, 24, 27, 0.68);
}

/*
  Кнопка скачивания в полноэкранном просмотре видео —
  рядом с крестиком, в том же оформлении.
*/
.message-video-viewer-download {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: calc(
    max(14px, env(safe-area-inset-right)) + 51px
  );
  z-index: 4;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(20, 24, 27, 0.48);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  text-decoration: none;
}

.message-video-viewer-download svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-video-viewer-download:hover,
.message-video-viewer-download:focus-visible,
.message-video-viewer-download:active {
  background: rgba(20, 24, 27, 0.68);
}

.message-video-viewer-download[hidden] {
  display: none;
}

.message-video-download {
  width: fit-content;
  margin-top: 5px;
  color: var(--accent-color-dark);
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
}

.message-video-download:hover,
.message-video-download:focus-visible {
  text-decoration: underline;
}

.message-file-attachment {
  display: flex;
  width: min(390px, 68vw);
  max-width: 100%;
  min-width: min(250px, 68vw);
  margin-top: 7px;
  padding: 10px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text-primary);
  text-decoration: none;
}

.message-file-attachment:hover,
.message-file-attachment:focus-visible {
  background: var(--hover-background);
  border-color: var(--accent-color);
}

.message-file-attachment-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: 23px;
}

.message-file-attachment-details {
  display: block;
  min-width: 0;
  flex: 1;
}

.message-file-attachment-details strong,
.message-file-attachment-details small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-file-attachment-details strong {
  font-size: 12px;
}

.message-file-attachment-details small {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 10px;
}

.message-file-attachment-download {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}

@media (max-width: 620px) {
  .appearance-color-grid {
    grid-template-columns: 1fr;
  }

  .appearance-color-saturation-value {
    height: 190px;
  }

  .appearance-custom-color-values {
    grid-template-columns:
      42px minmax(0, 1fr);
  }

  .appearance-custom-color-values label:last-child {
    grid-column: 2;
  }

  .appearance-custom-color-preview {
    width: 42px;
  }

  .message-video-attachment,
  .message-file-attachment {
    width: min(100%, 76vw);
  }

  .selected-attachment-preview-file {
    min-width: 0;
  }
}


/* =========================================================
   Этап 25.8 — галерея видео по модели фотогалереи
   ========================================================= */

.message-video-viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.message-video-viewer-gallery {
  z-index: 3;
  width: min(760px, calc(100vw - 96px));
  max-width: 100%;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  background: rgba(20, 24, 27, 0.5);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.message-video-viewer-gallery[hidden] {
  display: none;
}

.message-video-viewer-thumbnail-list {
  display: flex;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.message-video-viewer-thumbnail-list::-webkit-scrollbar {
  display: none;
}

.message-video-viewer-thumbnail {
  position: relative;
  display: block;
  flex: 0 0 82px;
  width: 82px;
  height: 52px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 9px;
  background: #080b0d;
  box-shadow: none;
  opacity: 0.7;
  scroll-snap-align: center;
  contain: layout style;
  transition:
    opacity 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.message-video-viewer-thumbnail:hover,
.message-video-viewer-thumbnail:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.message-video-viewer-thumbnail-active {
  border-color: rgba(255, 255, 255, 0.92);
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.34),
    0 3px 11px rgba(0, 0, 0, 0.28);
}

.message-video-viewer-thumbnail-preview {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: #000000;
  object-fit: cover;
}

.message-video-viewer-thumbnail-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding-left: 2px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(9, 13, 15, 0.55);
  color: rgba(255, 255, 255, 0.94);
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.message-video-viewer-has-gallery
  .message-video-viewer-player {
  height: min(74dvh, 740px);
  max-height: calc(100dvh - 106px);
}

.message-video-viewer-navigation {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 52px;
  padding: 0 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 13px;
  background: rgba(20, 24, 27, 0.46);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-50%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.message-video-viewer-navigation:hover:not(:disabled),
.message-video-viewer-navigation:focus-visible:not(:disabled) {
  background: rgba(20, 24, 27, 0.7);
}

.message-video-viewer-navigation:disabled {
  cursor: default;
  opacity: 0.25;
}

.message-video-viewer-navigation[hidden] {
  display: none;
}

.message-video-viewer-previous {
  left: max(12px, env(safe-area-inset-left));
}

.message-video-viewer-next {
  right: max(12px, env(safe-area-inset-right));
}

@media (max-width: 820px),
  (hover: none) and (pointer: coarse) {
  .message-video-viewer {
    gap: 8px;
  }

  .message-video-viewer-gallery {
    width: calc(100vw - 70px);
    padding: 5px;
    border-radius: 11px;
  }

  .message-video-viewer-thumbnail {
    flex-basis: 70px;
    width: 70px;
    height: 46px;
    border-radius: 8px;
  }

  .message-video-viewer-has-gallery
    .message-video-viewer-player {
    height: min(70dvh, 680px);
    max-height: calc(100dvh - 94px);
  }

  .message-video-viewer-navigation {
    width: 36px;
    height: 46px;
    border-radius: 11px;
    font-size: 34px;
  }

  .message-video-viewer-previous {
    left: max(6px, env(safe-area-inset-left));
  }

  .message-video-viewer-next {
    right: max(6px, env(safe-area-inset-right));
  }
}


/* Этап 8.1.6.4.1 — стабильная геометрия фотопросмотрщика.
   transform во время открытия/закрытия должен сохранять пропорции. */
#image-viewer-image {
  height: auto;
  aspect-ratio: auto;
}

/* Пакет A — интерфейс: заметки, невидимые скроллбары и бренд Омут */

/* Полосы прокрутки скрыты визуально во всём приложении.
   Сама прокрутка колесом, тачпадом, клавиатурой и касанием сохраняется. */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* На компьютере заметки занимают всё доступное место окна «Инструменты». */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  #tools-notes-panel:not([hidden]) {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
  }

  #tools-notes-panel .notes-toolbar {
    flex: 0 0 auto;
  }

  #tools-notes-panel .notes-workspace {
    height: auto;
    min-height: 320px;
    flex: 1 1 auto;
  }

  #tools-lists-panel:not([hidden]) {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
  }

  #tools-lists-panel .lists-toolbar {
    flex: 0 0 auto;
  }

  #tools-lists-panel .lists-workspace {
    min-height: 320px;
    flex: 1 1 auto;
  }
}

/* Логотип-водоворот без квадратной подложки. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .brand-logo img {
    width: 36px;
    height: 36px;
  }
}

@media
  (hover: none) and
  (pointer: coarse) and
  (orientation: landscape) and
  (max-height: 520px) {
  .brand-logo img {
    width: 32px;
    height: 32px;
  }
}


/* Список — рабочая область с собственной невидимой прокруткой пунктов. */
#tools-lists-panel:not([hidden]) {
  display: flex;
  min-height: 0;
  height: 100%;
  flex-direction: column;
}

#tools-lists-panel:not([hidden]) .lists-toolbar {
  flex: 0 0 auto;
}

#tools-lists-panel:not([hidden]) .lists-workspace {
  min-height: 0;
  flex: 1 1 auto;
}

#tools-lists-panel:not([hidden]) .lists-editor,
#tools-lists-panel:not([hidden]) .lists-fields {
  min-height: 0;
}

#tools-lists-panel:not([hidden]) .lists-fields {
  height: 100%;
}

#tools-lists-panel:not([hidden]) .lists-items {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#tools-lists-panel:not([hidden]) .lists-items::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  #tools-lists-panel:not([hidden]) .lists-workspace {
    display: flex;
    overflow: hidden;
    flex-direction: column;
  }

  #tools-lists-panel:not([hidden]) .lists-collection {
    flex: 0 0 auto;
  }

  #tools-lists-panel:not([hidden]) .lists-editor {
    display: flex;
    overflow: hidden;
    flex: 1 1 auto;
    flex-direction: column;
  }

  #tools-lists-panel:not([hidden]) .lists-fields {
    display: flex;
    overflow: hidden;
    flex: 1 1 auto;
    flex-direction: column;
  }

  #tools-lists-panel:not([hidden]) .lists-items {
    min-height: 0;
  }

  #tools-lists-panel:not([hidden]) .lists-footer {
    flex: 0 0 auto;
  }
}


/* 8.1 — Мобильные списки: каталог и редактор как два отдельных экрана. */
.lists-mobile-editor-header {
  display: none;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  /* В обычном состоянии вкладка «Список» показывает только каталог списков. */
  #tools-lists-panel:not([hidden]):not(.lists-mobile-editor-open) .lists-workspace {
    display: block;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #tools-lists-panel:not([hidden]):not(.lists-mobile-editor-open) .lists-workspace::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  #tools-lists-panel:not([hidden]):not(.lists-mobile-editor-open) .lists-collection {
    width: 100%;
    padding: 0;
    overflow: visible;
    border-right: 0;
    background: transparent;
  }

  #tools-lists-panel:not([hidden]):not(.lists-mobile-editor-open) .lists-collection-item {
    min-height: 66px;
    margin-bottom: 9px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    background: var(--surface-soft);
  }

  #tools-lists-panel:not([hidden]):not(.lists-mobile-editor-open) .lists-editor {
    display: none;
  }

  /* При открытии конкретного списка освобождаем максимум экрана. */
  .tools-dialog.tools-lists-mobile-editor-active .tools-dialog-header,
  .tools-dialog.tools-lists-mobile-editor-active .tools-tabs {
    display: none;
  }

  .tools-dialog.tools-lists-mobile-editor-active .tools-pages {
    padding: 0;
    overflow: hidden;
  }

  #tools-lists-panel.lists-mobile-editor-open:not([hidden]) {
    height: 100%;
  }

  #tools-lists-panel.lists-mobile-editor-open .lists-toolbar {
    display: none;
  }

  #tools-lists-panel.lists-mobile-editor-open .lists-workspace {
    display: block;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--surface-strong);
  }

  #tools-lists-panel.lists-mobile-editor-open .lists-collection {
    display: none;
  }

  #tools-lists-panel.lists-mobile-editor-open .lists-editor {
    display: flex;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    flex-direction: column;
  }

  #tools-lists-panel.lists-mobile-editor-open .lists-mobile-editor-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 42px;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    min-height: 58px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-strong);
  }

  .lists-mobile-editor-header > strong {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lists-mobile-back,
  .lists-mobile-close {
    min-height: 40px;
    border-radius: 11px;
    background: var(--muted-button-background);
    color: var(--text-primary);
    font-weight: bold;
  }

  .lists-mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    font-size: 12px;
  }

  .lists-mobile-back > span:first-child {
    font-size: 20px;
    line-height: 1;
  }

  .lists-mobile-close {
    width: 40px;
    padding: 0;
    font-size: 23px;
    line-height: 1;
  }

  /* Название, добавление, пункты и нижние действия — ОДНА прокручиваемая зона. */
  #tools-lists-panel.lists-mobile-editor-open .lists-fields {
    display: block;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    padding: 12px 12px max(26px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 14px;
    scroll-padding-bottom: 150px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #tools-lists-panel.lists-mobile-editor-open .lists-fields::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  #tools-lists-panel.lists-mobile-editor-open .lists-title-input {
    min-height: 48px;
  }

  #tools-lists-panel.lists-mobile-editor-open .lists-add-row {
    position: static;
    margin-top: 10px;
  }

  #tools-lists-panel.lists-mobile-editor-open .lists-items {
    min-height: 0;
    margin-top: 12px;
    padding: 0;
    overflow: visible;
  }

  #tools-lists-panel.lists-mobile-editor-open .lists-footer {
    margin-top: 12px;
    padding: 12px 0 0;
  }

  #tools-lists-panel.lists-mobile-editor-open .lists-item-row {
    grid-template-columns: 30px minmax(0, 1fr) 34px 34px;
    min-height: 50px;
    gap: 7px;
    margin-bottom: 8px;
  }

  #tools-lists-panel.lists-mobile-editor-open .lists-item-edit,
  #tools-lists-panel.lists-mobile-editor-open .lists-item-remove {
    width: 34px;
    height: 34px;
  }

  #tools-lists-panel.lists-mobile-editor-open .tools-list-item-input {
    min-height: 42px;
    font-size: 16px;
  }
}


/* Файлы и материалы текущей комнаты */
.room-materials-dialog-card {
  width: min(940px, calc(100vw - 34px));
  height: min(780px, calc(100dvh - 34px));
  max-height: calc(100dvh - 34px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.room-materials-header {
  flex: 0 0 auto;
}

.room-materials-search {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 3px 0 11px;
}

.room-materials-search-field {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
  gap: 8px;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--input-background);
}

.room-materials-search-field > span {
  flex: 0 0 auto;
  font-size: 14px;
}

#room-materials-search-input {
  min-width: 0;
  min-height: 40px;
  flex: 1;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
}

#room-materials-search-input::placeholder {
  color: var(--text-secondary);
}

.room-materials-search-field:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(79, 127, 143, 0.16);
}

.room-materials-search-clear {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 11px;
  background: var(--hover-background);
  color: var(--accent-color-dark);
  font-size: 22px;
  line-height: 1;
}

.room-materials-search-clear:hover {
  background: var(--accent-soft);
}

.room-materials-search-clear[hidden] {
  display: none;
}

.room-materials-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: 7px;
  padding: 3px 0 14px;
  border-bottom: 1px solid var(--border-color);
}

.room-materials-tab {
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 11px;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 700;
}

.room-materials-tab:hover {
  background: var(--hover-background);
  color: var(--text-primary);
}

.room-materials-tab-active,
.room-materials-tab-active:hover {
  background: var(--accent-soft);
  color: var(--accent-color-dark);
}

.room-materials-scroll-area {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 2px 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}

.room-materials-scroll-area::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.room-materials-status {
  padding: 18px 8px;
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
}

.room-materials-status[hidden] {
  display: none;
}

.room-materials-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.room-materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  align-items: start;
  gap: 10px;
}

.room-material-photo-card,
.room-material-video-card,
.room-material-file-card,
.room-material-link-card {
  min-width: 0;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-soft);
  overflow: hidden;
}

.room-material-photo-card {
  display: flex;
  flex-direction: column;
}

.room-material-photo-open {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.14);
}

.room-material-photo-open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-material-video-card {
  padding: 10px;
}

.room-material-video {
  display: block;
  width: 100%;
  max-height: 340px;
  border-radius: 10px;
  background: #000;
}

.room-material-title {
  display: block;
  margin-top: 9px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.room-material-details {
  display: block;
  margin-top: 3px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.room-material-file-card,
.room-material-link-card {
  padding: 10px 12px;
}

.room-material-file-link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.room-material-file-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: 21px;
}

.room-material-file-text {
  min-width: 0;
}

.room-material-file-text strong,
.room-material-file-text small {
  display: block;
  overflow-wrap: anywhere;
}

.room-material-file-text strong {
  color: var(--text-primary);
}

.room-material-file-text small {
  margin-top: 3px;
  color: var(--text-secondary);
}

.room-material-link-anchor {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  color: var(--accent-color-dark);
  text-decoration: none;
}

.room-material-link-anchor strong,
.room-material-link-anchor span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-material-link-anchor span {
  color: var(--text-secondary);
  font-size: 12px;
}

.room-material-link-preview {
  display: -webkit-box;
  margin: 8px 0 0;
  color: var(--text-primary);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.35;
}

.room-material-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 8px 10px 10px;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 11px;
}

.room-material-video-card > .room-material-meta,
.room-material-file-card > .room-material-meta,
.room-material-link-card > .room-material-meta {
  padding: 9px 0 0;
}

.room-material-meta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-material-goto-message {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--hover-background);
  color: var(--accent-color-dark);
  font-size: 11px;
  font-weight: 700;
}

.room-material-goto-message:hover {
  background: var(--accent-soft);
}

.room-materials-load-more {
  display: block;
  min-width: 160px;
  margin: 15px auto 4px;
  padding: 9px 15px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-color-dark);
  font-weight: 700;
}

.room-materials-load-more[hidden] {
  display: none;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .room-actions-menu {
    display: none !important;
  }

  .room-materials-dialog {
    padding: 8px;
  }

  .room-materials-dialog-card {
    width: 100%;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 15px;
    border-radius: 20px;
  }

  .room-materials-search {
    padding-bottom: 9px;
  }

  .room-materials-search-field {
    min-height: 40px;
  }

  #room-materials-search-input {
    min-height: 38px;
    font-size: 16px;
  }

  .room-materials-search-clear {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .room-materials-tabs {
    gap: 4px;
    padding-bottom: 10px;
  }

  .room-materials-tab {
    min-height: 39px;
    padding: 7px 5px;
    font-size: 12px;
  }

  .room-materials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .room-material-meta {
    align-items: flex-start;
    flex-direction: column;
    padding: 7px 8px 9px;
    gap: 5px;
  }

  .room-material-goto-message {
    width: 100%;
  }

  .room-material-video {
    max-height: 45dvh;
  }
}

/* Room files: on desktop keep sender + full date/time visible under photo cards. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) {
  .room-material-photo-card > .room-material-meta {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .room-material-photo-card > .room-material-meta > span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.35;
  }

  .room-material-photo-card > .room-material-meta > .room-material-goto-message {
    width: 100%;
  }
}

/* 2026-08-18: мягкий «пепельный» распад удаляемого сообщения. */
.message-ash-removing {
  pointer-events: none !important;
  will-change: transform, opacity, filter;
  transform-origin: center center;
  overflow: visible !important;
}

.message-ash-particles {
  position: fixed;
  inset: 0;
  z-index: 10020;
  pointer-events: none;
  overflow: hidden;
}

.message-ash-particle {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 45% 55% 35% 65%;
  background: color-mix(
    in srgb,
    var(--text-muted, #9aa7a4) 62%,
    #242d2b 38%
  );
  box-shadow: 0 0 3px rgba(182, 195, 190, 0.24), 0 0 2px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  animation-name: omut-message-ash-fly;
  animation-timing-function: cubic-bezier(0.18, 0.7, 0.28, 1);
  animation-fill-mode: forwards;
}

.message-ember-particle {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: #ffb04f;
  box-shadow:
    0 0 5px rgba(255, 211, 117, 0.98),
    0 0 11px rgba(255, 137, 42, 0.88),
    0 0 17px rgba(255, 82, 24, 0.42);
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  animation-name: omut-message-ember-fly;
  animation-timing-function: cubic-bezier(0.16, 0.72, 0.24, 1);
  animation-fill-mode: forwards;
}

@keyframes omut-message-ash-fly {
  0% {
    opacity: 0.42;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(.82);
  }

  10% {
    opacity: 0.94;
  }

  64% {
    opacity: 0.58;
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--ash-x), var(--ash-y), 0)
      rotate(var(--ash-r))
      scale(0.08);
  }
}

@keyframes omut-message-ember-fly {
  0% {
    opacity: 0.68;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.62);
  }

  12% {
    opacity: 1;
  }

  55% {
    opacity: 0.88;
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--ash-x), var(--ash-y), 0)
      rotate(var(--ash-r))
      scale(0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-ash-particles,
  .message-ember-particle {
    display: none !important;
  }
}


/* 2026-08-18 — мобильные нажатия без системной синей вспышки. */
@media (hover: none) and (pointer: coarse) {
  button,
  a,
  [role="button"],
  .room-material-photo-open,
  .chat-header-room-button {
    -webkit-tap-highlight-color: transparent;
  }

  #image-viewer,
  #image-viewer-image {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  #image-viewer-image {
    transform: translateZ(0);
    contain: paint;
  }
}


/* Варианты анимации удаления сообщений */
.delete-animation-options {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.delete-animation-option {
  min-height: 118px;
  align-items: flex-start;
  text-align: left;
}
.delete-animation-option small {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.delete-animation-preview {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 23px;
  font-weight: 800;
}
.delete-animation-preview-ash { color: #b7a89c; }
.delete-animation-preview-plane { color: #dff9ff; text-shadow: 0 0 8px rgba(162,238,255,.55); }
.delete-animation-preview-water { color: #78e9ff; font-size: 26px; text-shadow: 0 0 8px rgba(103,221,255,.55); }
.delete-animation-preview-fire { color: #ffd98d; font-size: 22px; text-shadow: 0 0 10px rgba(255,184,70,.65); }
.delete-animation-preview-stars { color: #fff4b9; text-shadow: 0 0 10px rgba(255,242,183,.72); }
.delete-animation-preview-none { color: var(--text-muted); }
.message-delete-origami-ghost,
.message-soap-bubble,
.message-bubble-particles,
.message-water-particles,
.message-fire-particles,
.message-star-particles {
  position: fixed;
  pointer-events: none;
  z-index: 10020;
}

.message-delete-origami-ghost {
  overflow: hidden !important;
  contain: paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity, clip-path, filter;
}

.message-bubble-particles,
.message-water-particles,
.message-fire-particles,
.message-star-particles {
  inset: 0;
  overflow: hidden;
}

.message-bubble-particles i,
.message-water-particles i,
.message-fire-particles i,
.message-star-particles i {
  opacity: 0;
  border-radius: 999px;
  background: radial-gradient(circle, #ffffff 0 16%, currentColor 30%, rgba(255,255,255,.52) 56%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 5px currentColor, 0 0 12px currentColor, 0 0 18px rgba(255,255,255,.34);
  animation-name: omut-delete-star-dust-flow;
  animation-timing-function: cubic-bezier(.18,.62,.22,1);
  animation-fill-mode: forwards;
  will-change: transform, opacity, filter;
}

@keyframes omut-delete-star-dust-flow {
  0% { opacity:0; filter:brightness(1.1); transform:translate3d(0,0,0) scale(.12); }
  12% { opacity:.98; filter:brightness(2.18); transform:translate3d(calc(var(--flow-mid-x) * .16),calc(var(--flow-mid-y) * .16),0) scale(1.04); }
  34% { opacity:1; filter:brightness(2.76); transform:translate3d(calc(var(--flow-mid-x) * .52),calc(var(--flow-mid-y) * .52),0) scale(1.06); }
  62% { opacity:.76; filter:brightness(1.48); transform:translate3d(var(--flow-mid-x),var(--flow-mid-y),0) scale(.72); }
  100% { opacity:0; filter:brightness(.88); transform:translate3d(var(--flow-x),var(--flow-y),0) scale(.08); }
}
  10% {
    opacity: .9;
    filter: brightness(2.3);
    transform: translate3d(0,0,0) scale(.78);
  }
  26% {
    opacity: 1;
    filter: brightness(2.9);
    transform: translate3d(calc(var(--star-mid-x) * .38),calc(var(--star-mid-y) * .38),0) scale(1.08);
  }
  46% {
    opacity: .7;
    filter: brightness(1.45);
    transform: translate3d(var(--star-mid-x),var(--star-mid-y),0) scale(.84);
  }
  62% {
    opacity: 1;
    filter: brightness(2.65);
  }
  78% {
    opacity: .62;
    filter: brightness(1.45);
  }
  90% {
    opacity: .9;
    filter: brightness(2.25);
  }
  100% {
    opacity: 0;
    filter: brightness(.88);
    transform: translate3d(var(--star-x),var(--star-y),0) scale(.05);
  }
}

.delete-animation-local-save {
  display: flex;
  justify-content: flex-start;
  margin-top: 12px;
}
.delete-animation-save-button { min-width: 130px; border-radius: 999px; padding-left: 24px; padding-right: 24px; }

@media (max-width: 820px) {
  .delete-animation-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delete-animation-option { min-height: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .message-delete-origami-ghost,
  .message-bubble-particles,
  .message-water-particles,
  .message-fire-particles,
  .message-star-particles { display: none !important; }
}


/* Delete animation V7: text-only cards. */
.delete-animation-preview { display: none !important; }
.delete-animation-option { align-content: center; }
.delete-animation-option strong { margin-top: 0; }

/* Delete animation clean reset */
.delete-animation-preview { display: none !important; }
.delete-animation-option {
  min-height: 84px;
  align-content: center;
}
.delete-animation-save-button {
  border-radius: 999px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}


/* 2026-08-18 — стихия «Огонь»: та же кинематика, что у Земли, но густая россыпь искр. */
.message-fire-element-removing {
  pointer-events: none !important;
  will-change: transform, opacity, filter;
  transform-origin: center center;
  overflow: visible !important;
}

.message-fire-element-particles {
  position: fixed;
  inset: 0;
  z-index: 10020;
  pointer-events: none;
  overflow: hidden;
}

.message-fire-element-spark {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    #fffdf0 0 18%,
    #ffe68a 28%,
    #ffb13f 52%,
    #ff6a22 76%,
    rgba(255, 74, 18, 0) 100%
  );
  box-shadow:
    0 0 4px rgba(255, 246, 196, 0.98),
    0 0 9px rgba(255, 190, 79, 0.95),
    0 0 15px rgba(255, 105, 34, 0.58);
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  animation-name: omut-message-fire-element-fly;
  animation-timing-function: cubic-bezier(0.16, 0.72, 0.24, 1);
  animation-fill-mode: forwards;
}

@keyframes omut-message-fire-element-fly {
  0% {
    opacity: 0.7;
    filter: brightness(1.35);
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.55);
  }
  10% {
    opacity: 1;
    filter: brightness(2.15);
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1.04);
  }
  48% {
    opacity: 0.92;
    filter: brightness(1.72);
  }
  78% {
    opacity: 0.58;
    filter: brightness(1.25);
  }
  100% {
    opacity: 0;
    filter: brightness(0.9);
    transform:
      translate3d(var(--fire-x), var(--fire-y), 0)
      rotate(var(--fire-r))
      scale(0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-fire-element-particles,
  .message-fire-element-spark {
    display: none !important;
  }
}


/* 2026-08-18 — стихия «Воздух» V3: лёгкий морозный снег, подхваченный порывом. */
.message-air-element-removing {
  pointer-events: none !important;
  will-change: transform, opacity, filter;
  transform-origin: center center;
  overflow: visible !important;
}

.message-air-element-particles {
  position: fixed;
  inset: 0;
  z-index: 10020;
  pointer-events: none;
  overflow: hidden;
}

.message-air-element-dust {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(255,255,255,1) 0 18%,
    rgba(247,252,255,.96) 30%,
    rgba(218,235,250,.72) 52%,
    rgba(180,207,230,.28) 72%,
    rgba(170,198,222,0) 100%
  );
  box-shadow:
    0 0 2px rgba(255,255,255,.92),
    0 0 5px rgba(230,243,255,.72),
    0 0 9px rgba(191,217,240,.24);
  opacity: 0;
  transform: translate3d(0,0,0) scale(.5);
  animation-name: omut-message-air-frost-wind-v3;
  animation-timing-function: cubic-bezier(.16,.72,.22,1);
  animation-fill-mode: forwards;
  will-change: transform, opacity, filter;
}

.message-air-element-sparkle {
  box-shadow:
    0 0 3px rgba(255,255,255,1),
    0 0 8px rgba(241,249,255,.96),
    0 0 15px rgba(198,223,245,.54);
}

@keyframes omut-message-air-frost-wind-v3 {
  0% {
    opacity: 0;
    filter: brightness(1.1);
    transform: translate3d(0,0,0) scale(.34);
  }
  8% {
    opacity: .9;
    filter: brightness(1.85);
    transform: translate3d(0,-1px,0) scale(.8);
  }
  22% {
    opacity: 1;
    filter: brightness(2.15);
    transform:
      translate3d(var(--air-curve1-x),var(--air-curve1-y),0)
      scale(1.02);
  }
  45% {
    opacity: .9;
    filter: brightness(1.62);
    transform:
      translate3d(var(--air-curve2-x),var(--air-curve2-y),0)
      scale(.86);
  }
  70% {
    opacity: .66;
    filter: brightness(1.3);
    transform:
      translate3d(var(--air-curve3-x),var(--air-curve3-y),0)
      scale(.58);
  }
  86% {
    opacity: .34;
    filter: brightness(1.08);
  }
  100% {
    opacity: 0;
    filter: brightness(.92);
    transform:
      translate3d(var(--air-x),var(--air-y),0)
      scale(.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-air-element-particles,
  .message-air-element-dust {
    display: none !important;
  }
}


/* 2026-08-18 — стихия «Вода»: круги по спокойной воде и мягкая рябь. */
.message-water-element-removing {
  pointer-events: none !important;
  will-change: transform, opacity, filter;
  transform-origin: center center;
  overflow: visible !important;
}

.message-water-element-ripples {
  position: fixed;
  inset: 0;
  z-index: 10020;
  pointer-events: none;
  overflow: hidden;
}

.message-water-element-ring {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(102, 242, 231, 0.68);
  box-shadow:
    0 0 0 1px rgba(51, 159, 171, 0.12) inset,
    0 0 10px rgba(69, 229, 215, 0.24),
    0 0 20px rgba(37, 153, 188, 0.16);
  background: radial-gradient(circle, rgba(109,248,238,.12) 0%, rgba(109,248,238,.06) 28%, rgba(109,248,238,0) 68%);
  opacity: 0;
  transform: translate3d(0,0,0) scale(.15);
  animation-name: omut-message-water-ring-expand;
  animation-timing-function: cubic-bezier(.16,.66,.22,1);
  animation-fill-mode: forwards;
}

.message-water-element-shimmer {
  position: absolute;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(84, 244, 229, 0.18) 0%, rgba(84, 244, 229, 0.08) 28%, rgba(84, 244, 229, 0) 64%),
    radial-gradient(circle at 32% 38%, rgba(58, 182, 207, 0.12) 0%, rgba(58, 182, 207, 0) 50%),
    linear-gradient(135deg, rgba(69, 221, 210, 0.06), rgba(35, 108, 151, 0.04));
  opacity: 0;
  filter: blur(0px);
  animation: omut-message-water-shimmer 2450ms cubic-bezier(.18,.7,.22,1) forwards;
}

@keyframes omut-message-water-ring-expand {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(.15); }
  12% { opacity: .72; }
  38% { opacity: .55; }
  72% { opacity: .22; }
  100% { opacity: 0; transform: translate3d(0,0,0) scale(var(--water-ring-scale)); }
}

@keyframes omut-message-water-shimmer {
  0% { opacity: 0; filter: blur(0px) brightness(1); }
  12% { opacity: .45; filter: blur(.2px) brightness(1.06); }
  38% { opacity: .34; filter: blur(.55px) brightness(1.08); }
  66% { opacity: .2; filter: blur(1px) brightness(1.02); }
  100% { opacity: 0; filter: blur(2px) brightness(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .message-water-element-ripples,
  .message-water-element-ring,
  .message-water-element-shimmer {
    display: none !important;
  }
}


/* 2026-08-18 — Вода V2: локальная мягкая рябь + солнечные блики. */
.message-water-element-ring {
  border-color: rgba(102, 242, 231, 0.22) !important;
  box-shadow:
    0 0 5px rgba(69, 229, 215, 0.10),
    0 0 9px rgba(37, 153, 188, 0.07) !important;
  background: radial-gradient(
    ellipse at center,
    rgba(109,248,238,.055) 0%,
    rgba(109,248,238,.025) 34%,
    rgba(109,248,238,0) 72%
  ) !important;
}

@keyframes omut-message-water-ring-expand {
  0% {
    opacity: 0;
    transform: translate3d(0,0,0) scaleX(.55) scaleY(.55);
  }
  14% {
    opacity: .24;
  }
  40% {
    opacity: .16;
  }
  72% {
    opacity: .08;
  }
  100% {
    opacity: 0;
    transform:
      translate3d(0,0,0)
      scaleX(var(--water-ring-scale-x))
      scaleY(var(--water-ring-scale-y));
  }
}

.message-water-element-shimmer {
  background:
    radial-gradient(circle at 46% 50%, rgba(84,244,229,.14) 0%, rgba(84,244,229,.055) 30%, rgba(84,244,229,0) 62%),
    radial-gradient(circle at 68% 34%, rgba(74,190,215,.09) 0%, rgba(74,190,215,0) 42%),
    linear-gradient(135deg, rgba(69,221,210,.045), rgba(35,108,151,.025)) !important;
}

.message-water-element-sparkle {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: #eaffff;
  box-shadow:
    0 0 4px rgba(240,255,255,.95),
    0 0 8px rgba(111,239,229,.72),
    0 0 13px rgba(52,169,201,.28);
  opacity: 0;
  animation-name: omut-message-water-sun-sparkle;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  will-change: transform, opacity, filter;
}

@keyframes omut-message-water-sun-sparkle {
  0% {
    opacity: 0;
    filter: brightness(1);
    transform: scale(.45);
  }
  26% {
    opacity: .78;
    filter: brightness(1.8);
    transform: scale(1);
  }
  52% {
    opacity: .34;
    filter: brightness(1.2);
    transform: scale(.82);
  }
  76% {
    opacity: .72;
    filter: brightness(1.65);
    transform: scale(.96);
  }
  100% {
    opacity: 0;
    filter: brightness(.9);
    transform: scale(.58);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-water-element-sparkle {
    display: none !important;
  }
}


/* 2026-08-18 — Вода V3: блики затухают вместе с сообщением. */
@keyframes omut-message-water-sun-sparkle {
  0% {
    opacity: 0;
    filter: brightness(1);
    transform: scale(.45);
  }
  22% {
    opacity: .74;
    filter: brightness(1.75);
    transform: scale(1);
  }
  48% {
    opacity: .36;
    filter: brightness(1.18);
    transform: scale(.82);
  }
  68% {
    opacity: .58;
    filter: brightness(1.52);
    transform: scale(.94);
  }
  86% {
    opacity: .18;
    filter: brightness(1.08);
    transform: scale(.72);
  }
  100% {
    opacity: 0;
    filter: brightness(.92);
    transform: scale(.52);
  }
}


/* 2026-08-18 — Вода V4: медленные естественные эллиптические круги. */
.message-water-element-ring {
  border-radius: 50% !important;
  border: 1px solid rgba(112, 239, 231, 0.34) !important;
  background: transparent !important;
  box-shadow:
    0 0 4px rgba(90, 231, 221, 0.12),
    0 0 8px rgba(45, 151, 185, 0.07) !important;
  transform-origin: 50% 50%;
  animation-timing-function: cubic-bezier(.18,.58,.22,1) !important;
}

@keyframes omut-message-water-ring-expand {
  0% {
    opacity: 0;
    transform: translate3d(0,0,0) scaleX(.78) scaleY(.78);
  }
  12% {
    opacity: .34;
  }
  34% {
    opacity: .3;
  }
  58% {
    opacity: .22;
  }
  78% {
    opacity: .13;
  }
  92% {
    opacity: .055;
  }
  100% {
    opacity: 0;
    transform:
      translate3d(0,0,0)
      scaleX(var(--water-ring-scale-x))
      scaleY(var(--water-ring-scale-y));
  }
}


/* 2026-08-18 — «Омут» V4: вид сверху, круглая дыра и явное втягивание сообщения в центр. */
.message-omut-removing {
  pointer-events: none !important;
  transform-origin: center center !important;
  will-change: transform, opacity, filter, clip-path;
  overflow: visible !important;
}

.message-omut-vortex {
  position: fixed;
  z-index: 10025;
  pointer-events: none;
  border-radius: 50%;
  transform-origin: center center;
  animation: omut-vortex-v5-wrap 2580ms cubic-bezier(.18,.7,.22,1) forwards;
}

.message-omut-vortex-glow {
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(96,255,244,.24) 0%,
    rgba(51,230,220,.15) 34%,
    rgba(0,92,105,.07) 58%,
    rgba(0,0,0,0) 76%);
  filter: blur(9px);
  animation: omut-vortex-v5-glow 2580ms ease-out forwards;
}

.message-omut-vortex-water {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0) 0 15%,
      rgba(0,12,20,.42) 22%,
      rgba(0,57,69,.32) 36%,
      rgba(44,224,213,.12) 55%,
      rgba(0,0,0,0) 74%);
  animation: omut-vortex-v5-water 2580ms cubic-bezier(.18,.7,.22,1) forwards;
}

.message-omut-vortex-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(94,250,239,.5);
  box-shadow: 0 0 6px rgba(59,232,223,.18);
  transform: translate(-50%,-50%);
  opacity: 0;
}
.message-omut-vortex-ring-1 { width: 34%; height: 34%; animation: omut-vortex-v5-ring1 2580ms ease-in-out forwards; }
.message-omut-vortex-ring-2 { width: 47%; height: 47%; animation: omut-vortex-v5-ring2 2580ms ease-in-out forwards; }
.message-omut-vortex-ring-3 { width: 61%; height: 61%; animation: omut-vortex-v5-ring3 2580ms ease-in-out forwards; }
.message-omut-vortex-ring-4 { width: 76%; height: 76%; animation: omut-vortex-v5-ring4 2580ms ease-in-out forwards; }
.message-omut-vortex-ring-5 { width: 92%; height: 92%; animation: omut-vortex-v5-ring5 2580ms ease-in-out forwards; }

.message-omut-vortex-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 31%;
  height: 31%;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at center,
    rgba(0,0,0,1) 0 46%,
    rgba(0,7,12,.99) 57%,
    rgba(0,21,28,.82) 72%,
    rgba(0,0,0,0) 100%);
  box-shadow:
    0 0 8px rgba(0,0,0,.42),
    0 0 16px rgba(66,255,240,.16),
    inset 0 0 10px rgba(0,0,0,.98);
  animation: omut-vortex-v5-core 2580ms cubic-bezier(.18,.7,.22,1) forwards;
}

@keyframes omut-vortex-v4-wrap {
  0% { opacity: 0; transform: scale(.62); }
  10% { opacity: 1; transform: scale(1); }
  68% { opacity: .96; transform: scale(.96); }
  88% { opacity: .76; transform: scale(.82); }
  100% { opacity: 0; transform: scale(.24); }
}
@keyframes omut-vortex-v4-glow {
  0% { opacity: 0; transform: scale(.68); }
  14% { opacity: .9; transform: scale(1); }
  66% { opacity: .44; transform: scale(.95); }
  88% { opacity: .22; transform: scale(.76); }
  100% { opacity: 0; transform: scale(.3); }
}
@keyframes omut-vortex-v4-water {
  0% { opacity: 0; transform: rotate(0deg) scale(1.04); filter: blur(.12px); }
  13% { opacity: 1; }
  50% { transform: rotate(-44deg) scale(.96); filter: blur(.28px); }
  78% { opacity: .86; transform: rotate(-112deg) scale(.72); filter: blur(.5px); }
  100% { opacity: 0; transform: rotate(-210deg) scale(.24); filter: blur(1.3px); }
}
@keyframes omut-vortex-v4-ring1 {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.86); }
  14% { opacity: .64; }
  55% { opacity: .5; transform: translate(-50%,-50%) rotate(-34deg) scale(.82); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-128deg) scale(.14); }
}
@keyframes omut-vortex-v4-ring2 {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.9); }
  16% { opacity: .5; }
  58% { opacity: .38; transform: translate(-50%,-50%) rotate(-28deg) scale(.82); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-112deg) scale(.18); }
}
@keyframes omut-vortex-v4-ring3 {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.93); }
  18% { opacity: .38; }
  60% { opacity: .28; transform: translate(-50%,-50%) rotate(-22deg) scale(.84); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-96deg) scale(.22); }
}
@keyframes omut-vortex-v4-ring4 {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.96); }
  20% { opacity: .28; }
  62% { opacity: .2; transform: translate(-50%,-50%) rotate(-17deg) scale(.86); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-80deg) scale(.26); }
}
@keyframes omut-vortex-v4-ring5 {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.98); }
  22% { opacity: .2; }
  64% { opacity: .14; transform: translate(-50%,-50%) rotate(-12deg) scale(.88); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-64deg) scale(.3); }
}
@keyframes omut-vortex-v4-core {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); }
  12% { opacity: .92; transform: translate(-50%,-50%) scale(.78); }
  42% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  92% { opacity: .78; transform: translate(-50%,-50%) scale(.72); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.12); }
}

@media (prefers-reduced-motion: reduce) {
  .message-omut-vortex,
  .message-omut-vortex-glow,
  .message-omut-vortex-water,
  .message-omut-vortex-ring,
  .message-omut-vortex-core {
    display: none !important;
  }
}


/* 2026-08-18 — «Омут» V5: заметнее, чуть быстрее закрывается, с солнечными каплями в финале. */
.message-omut-vortex-sparkle {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.3);
  background: rgba(244,255,255,.98);
  box-shadow:
    0 0 4px rgba(255,255,255,.96),
    0 0 8px rgba(116,255,241,.9),
    0 0 13px rgba(54,210,222,.46);
  opacity: 0;
  animation-name: omut-vortex-v5-sparkle;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  will-change: transform, opacity, filter;
}

@keyframes omut-vortex-v5-wrap {
  0% { opacity: 0; transform: scale(.58); }
  8% { opacity: 1; transform: scale(1.04); }
  88% { opacity: 1; transform: scale(1); }
  94% { opacity: 1; transform: scale(.98); }
  97% { opacity: .78; transform: scale(.58); }
  99% { opacity: .28; transform: scale(.18); }
  100% { opacity: 0; transform: scale(.03); }
}

@keyframes omut-vortex-v5-glow {
  0% { opacity: 0; transform: scale(.64); }
  11% { opacity: 1; transform: scale(1.04); }
  88% { opacity: .66; transform: scale(1); }
  94% { opacity: .54; transform: scale(.96); }
  98% { opacity: .16; transform: scale(.34); }
  100% { opacity: 0; transform: scale(.04); }
}

@keyframes omut-vortex-v5-water {
  0% { opacity: 0; transform: rotate(0deg) scale(1.06); filter: blur(.08px) brightness(1.08); }
  10% { opacity: 1; }
  64% { opacity: 1; transform: rotate(-74deg) scale(.99); filter: blur(.2px) brightness(1.12); }
  90% { opacity: .99; transform: rotate(-162deg) scale(.88); filter: blur(.4px) brightness(1.06); }
  94% { opacity: .96; transform: rotate(-188deg) scale(.78); filter: blur(.48px) brightness(1.02); }
  98% { opacity: .3; transform: rotate(-238deg) scale(.24); filter: blur(.95px) brightness(.82); }
  100% { opacity: 0; transform: rotate(-278deg) scale(.03); filter: blur(1.5px) brightness(.58); }
}

@keyframes omut-vortex-v5-ring1 {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.86); }
  12% { opacity: .82; }
  54% { opacity: .62; transform: translate(-50%,-50%) rotate(-38deg) scale(.8); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-136deg) scale(.12); }
}
@keyframes omut-vortex-v5-ring2 {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.9); }
  14% { opacity: .68; }
  57% { opacity: .5; transform: translate(-50%,-50%) rotate(-31deg) scale(.81); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-120deg) scale(.16); }
}
@keyframes omut-vortex-v5-ring3 {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.93); }
  16% { opacity: .54; }
  59% { opacity: .4; transform: translate(-50%,-50%) rotate(-25deg) scale(.83); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-103deg) scale(.2); }
}
@keyframes omut-vortex-v5-ring4 {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.96); }
  18% { opacity: .42; }
  61% { opacity: .3; transform: translate(-50%,-50%) rotate(-19deg) scale(.85); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-86deg) scale(.24); }
}
@keyframes omut-vortex-v5-ring5 {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(.98); }
  20% { opacity: .32; }
  63% { opacity: .22; transform: translate(-50%,-50%) rotate(-14deg) scale(.87); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-69deg) scale(.28); }
}

@keyframes omut-vortex-v5-core {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.28); }
  10% { opacity: 1; transform: translate(-50%,-50%) scale(.82); }
  44% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  90% { opacity: 1; transform: translate(-50%,-50%) scale(1.16); }
  94% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); }
  98% { opacity: .42; transform: translate(-50%,-50%) scale(.32); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.02); }
}

@keyframes omut-vortex-v5-sparkle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.24);
    filter: brightness(1);
  }
  24% {
    opacity: .98;
    transform: translate(
      calc(-50% + var(--omut-sparkle-x)),
      calc(-50% + var(--omut-sparkle-y))
    ) scale(1.15);
    filter: brightness(1.9);
  }
  58% {
    opacity: .72;
    transform: translate(
      calc(-50% + var(--omut-sparkle-x)),
      calc(-50% + var(--omut-sparkle-y))
    ) scale(.82);
    filter: brightness(1.45);
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--omut-sparkle-x)),
      calc(-50% + var(--omut-sparkle-y))
    ) scale(.34);
    filter: brightness(.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-omut-vortex-sparkle {
    display: none !important;
  }
}


/* 2026-08-18 — «Омут» V10: короткое захлопывание и отдельный финальный всплеск. */
.message-omut-snap-sparkles {
  position: fixed;
  z-index: 10028;
  width: 1px;
  height: 1px;
  pointer-events: none;
  overflow: visible;
}

.message-omut-snap-sparkle {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2);
  background: rgba(255,255,255,.99);
  box-shadow:
    0 0 4px rgba(255,255,255,1),
    0 0 8px rgba(116,255,242,.98),
    0 0 15px rgba(56,224,235,.7);
  opacity: 0;
  animation-name: omut-vortex-v10-snap-sparkle;
  animation-timing-function: cubic-bezier(.12,.72,.2,1);
  animation-fill-mode: forwards;
  will-change: transform, opacity, filter;
}

@keyframes omut-vortex-v10-snap-sparkle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.18);
    filter: brightness(1);
  }
  16% {
    opacity: 1;
    transform: translate(
      calc(-50% + var(--omut-snap-x) * .35),
      calc(-50% + var(--omut-snap-y) * .35)
    ) scale(1.35);
    filter: brightness(2.15);
  }
  46% {
    opacity: .96;
    transform: translate(
      calc(-50% + var(--omut-snap-x) * .72),
      calc(-50% + var(--omut-snap-y) * .72)
    ) scale(.92);
    filter: brightness(1.75);
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--omut-snap-x)),
      calc(-50% + var(--omut-snap-y))
    ) scale(.28);
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .message-omut-snap-sparkles {
    display: none !important;
  }
}

/* 2026-08-19 — микроэтап UI polish:
   автоприменение эффекта удаления и точное выравнивание desktop-кнопок. */

/* Локальная кнопка «Сохранить» под эффектами больше не нужна:
   выбранный эффект сохраняется сразу после нажатия на карточку. */
.appearance-delete-animation-section
  .delete-animation-local-save {
  display: none !important;
}

.delete-animation-option {
  position: relative;
  padding-right: 42px;
}

.delete-animation-option::after {
  content: "✓";
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  opacity: .72;
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    opacity .16s ease,
    transform .16s ease;
}

.delete-animation-option.appearance-option-selected::after {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: #ffffff;
  opacity: 1;
  transform: scale(1.04);
}

.delete-animation-options-saving
  .delete-animation-option {
  cursor: wait;
}

/* Верхние кнопки панели рисуем сами, а не полагаемся на
   проблемные текстовые символы: так они действительно стоят
   визуально по центру кнопки во всех шрифтах. */
#sidebar-width-button,
#sidebar-hide-button {
  position: relative;
  font-size: 0;
}

#sidebar-width-button::before,
#sidebar-width-button::after,
#sidebar-hide-button::before,
#sidebar-hide-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  pointer-events: none;
}

#sidebar-width-button::before,
#sidebar-width-button::after {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

#sidebar-width-button::before {
  margin-left: -6px;
}

#sidebar-width-button::after {
  margin-left: -1px;
}

html[data-sidebar-mode="compact"]
  #sidebar-width-button::before,
html[data-sidebar-mode="compact"]
  #sidebar-width-button::after {
  transform: rotate(-135deg);
}

html[data-sidebar-mode="compact"]
  #sidebar-width-button::before {
  margin-left: -5px;
}

html[data-sidebar-mode="compact"]
  #sidebar-width-button::after {
  margin-left: 0;
}

#sidebar-hide-button::before,
#sidebar-hide-button::after {
  width: 12px;
  height: 2px;
  margin-left: -6px;
  margin-top: -1px;
  border-radius: 999px;
  background: currentColor;
}

#sidebar-hide-button::before {
  transform: rotate(45deg);
}

#sidebar-hide-button::after {
  transform: rotate(-45deg);
}

/* На desktop шестерёнка профиля закреплена именно в правом
   верхнем углу карточки и больше не зависит от высоты имени/статуса. */
@media (min-width: 821px) and (hover: hover) {
  .profile-card {
    position: relative;
  }

  .profile-controls {
    padding-right: 28px;
  }

  .profile-summary-actions {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
  }

  #profile-settings-button {
    display: grid;
    place-items: center;
    margin: 0;
  }
}


/* Полноценные групповые комнаты — мобильная компоновка. */
@media (max-width: 620px) {
  .room-dialog-card {
    max-height: calc(
      var(--app-viewport-height, 100vh) - 16px
    );
  }

  .room-members-heading {
    align-items: flex-start;
  }

  .room-members-list {
    max-height: 38vh;
  }

  .room-member-option {
    grid-template-columns: 40px minmax(0, 1fr) 26px;
    min-height: 56px;
    gap: 9px;
    padding: 7px 8px;
  }

  .room-member-avatar {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .room-member-check {
    width: 24px;
    height: 24px;
  }
}

/* === Групповые комнаты: аватар, описание, роли и выход === */
.room-participants-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.room-participants-count {
  min-width: 15px;
  padding: 1px 4px;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--accent-soft) 78%,
    transparent
  );
  color: var(--accent-color-dark);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
}

.room-participants-count:empty {
  display: none;
}

.room-description-input {
  width: 100%;
  min-height: 62px;
  padding: 10px 12px;
  resize: vertical;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--surface-strong);
  color: var(--text-primary);
  font: inherit;
  line-height: 1.4;
}

.room-description-input:focus {
  border-color: var(--accent-color);
  outline: 3px solid color-mix(
    in srgb,
    var(--accent-color) 18%,
    transparent
  );
}

.room-description-input:disabled,
.room-title-input:disabled {
  cursor: default;
  opacity: 0.72;
}

.room-group-avatar-section {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-soft);
}

.room-group-avatar-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid color-mix(
    in srgb,
    var(--accent-color) 35%,
    var(--border-color)
  );
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    var(--accent-color),
    var(--accent-color-dark)
  );
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(32, 58, 68, 0.12);
  font-size: 24px;
  font-weight: 800;
}

.room-group-avatar-preview img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.room-group-avatar-preview img[hidden],
.room-group-avatar-preview span[hidden] {
  display: none;
}

.room-group-avatar-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.room-group-avatar-copy > strong {
  font-size: 14px;
}

.room-group-avatar-copy > small {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.room-group-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.room-group-avatar-actions button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.room-group-avatar-status {
  min-height: 1.35em;
  color: var(--accent-color-dark) !important;
}

.room-owner-tools-section {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}

.room-owner-tools-section[hidden] {
  display: none;
}

.room-owner-tools-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(120px, 0.8fr)
    auto;
  align-items: center;
  gap: 8px;
}

.room-settings-owner-section .room-owner-tools-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.room-owner-tools-select {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
}

.room-owner-tools-button {
  min-height: 38px;
  white-space: nowrap;
}

.room-leave-button {
  background: color-mix(
    in srgb,
    var(--danger-soft) 70%,
    var(--surface-strong)
  );
  color: var(--danger-color);
}

.room-leave-button:hover:not(:disabled) {
  filter: brightness(0.97);
}

.room-leave-button:disabled {
  cursor: default;
  opacity: 0.5;
}

#messages li.message-system-event {
  display: flex;
  width: fit-content;
  max-width: min(88%, 560px);
  margin: 10px auto;
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-secondary);
  font-family: var(--chat-message-font-family);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}

.message-system-event-text {
  padding: 5px 10px;
  border: 1px solid color-mix(
    in srgb,
    var(--border-color) 76%,
    transparent
  );
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--surface-floating-strong) 82%,
    transparent
  );
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.message-system-event-time {
  color: var(--text-secondary);
  font-size: 9px;
  opacity: 0.72;
}

@media (max-width: 620px) {
  .room-group-avatar-section {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 11px;
    padding: 12px;
  }

  .room-group-avatar-preview {
    width: 58px;
    height: 58px;
    font-size: 20px;
  }

  .room-owner-tools-row,
  .room-settings-owner-section .room-owner-tools-row {
    grid-template-columns: 1fr;
  }

  .room-owner-tools-button {
    width: 100%;
  }

  .room-group-avatar-actions {
    flex-direction: column;
  }

  .room-group-avatar-actions button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .room-settings-actions {
    grid-template-columns: 1fr 1fr;
  }

  .room-leave-button,
  .room-delete-button {
    grid-column: 1 / -1;
    margin-right: 0;
  }
}


/*
  Короткое всплывающее подтверждение (например, «Сохранено
  в Избранное»). Появляется внизу над полем ввода и само
  исчезает через пару секунд.
*/
.transient-hint {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 60;
  transform: translate(-50%, 12px);
  max-width: min(88vw, 420px);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(20, 24, 27, 0.88);
  color: #fff;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease,
    transform 0.2s ease;
}

.transient-hint-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/*
  Кнопка «Избранное» в диалоге контактов — вход в личный
  чат с самим собой.
*/
.contacts-favorites-button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--accent-soft);
  border-radius: 12px;
  background: var(--accent-soft);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.contacts-favorites-button:hover,
.contacts-favorites-button:focus-visible {
  background: var(--hover-background);
  outline: none;
}

.contacts-favorites-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-color);
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

.contacts-favorites-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contacts-favorites-text small {
  color: var(--text-secondary);
  font-size: 12px;
}

/*
  Кнопка отмены отправки пачки — поверх сетки-заглушки.
*/
#messages .message-album-group {
  position: relative;
}

.message-album-cancel {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(20, 24, 27, 0.62);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.message-album-cancel:hover,
.message-album-cancel:focus-visible {
  background: rgba(20, 24, 27, 0.82);
  outline: none;
}

/*
  «Избранное» — чат с самим собой. В его настройках не место
  аватару группы, участникам, ролям и кнопкам «покинуть» и
  «удалить комнату»: участник там один, и выйти из своих
  заметок нельзя.
*/
.room-settings-favorites .room-group-avatar-section,
.room-settings-favorites .room-settings-members-section,
.room-settings-favorites #room-settings-roles-section,
.room-settings-favorites #room-leave-button,
.room-settings-favorites #room-delete-button {
  display: none;
}

/*
  Голосовые сообщения: кнопка микрофона и полоса записи.
*/
/*
  Кнопка микрофона повторяет оформление кнопки смайликов:
  тот же размер, тот же контурный значок в тех же цветах.
*/
#voice-button {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--accent-color);
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.voice-button-icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.voice-button-recording {
  color: #d9534f;
}

.voice-recording-hint {
  color: var(--text-secondary);
  font-size: 13px;
}

#voice-button:hover:not(:disabled),
#voice-button:focus-visible {
  background: var(--hover-background);
  outline: none;
}

#voice-button:disabled {
  opacity: 0.45;
  cursor: default;
}

/*
  Полоса записи лежит ПОВЕРХ поля ввода, а не вместо него:
  так поле не теряет фокус, экранная клавиатура остаётся
  на месте и композер никуда не уезжает во время записи.
*/
.voice-recording-bar {
  position: absolute;
  left: 12px;
  /*
    Полоса не должна доходить до кнопок справа: раньше она
    накрывала микрофон, и палец отрывался уже от неё, а не от
    кнопки — команда «стоп» до кнопки не доходила, и запись
    не останавливалась.
  */
  right: 100px;
  /*
    И на всякий случай полоса вообще не ловит нажатия: она
    она лишь показывает время, нажимать по ней не нужно.
  */
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
}

.voice-recording-bar[hidden] {
  display: none;
}

.voice-recording-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d9534f;
  animation: voice-recording-pulse 1.2s
    ease-in-out infinite;
}

@keyframes voice-recording-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

#voice-recording-time {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}



/*
  Звуковое сообщение в ленте.
*/
.message-audio-attachment {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: min(260px, 60vw);
}

.message-audio {
  width: 100%;
  min-height: 40px;
}

/*
  Шапка с закреплённым сообщением. Узкая полоса над лентой:
  нажатие перелистывает к следующему закрепу, крестик
  справа — открепляет текущее.
*/
.pinned-bar {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0 14px 6px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface-floating-strong);
  border: 1px solid var(--border-color);
  box-shadow: 0 3px 12px rgba(32, 58, 68, 0.1);
}

.pinned-bar[hidden] {
  display: none;
}

.pinned-bar-open {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 8px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pinned-bar-open:hover,
.pinned-bar-open:focus-visible {
  background:
    color-mix(
      in srgb,
      currentColor 8%,
      transparent
    );
  outline: none;
}

.pinned-bar-accent {
  flex: 0 0 3px;
  align-self: stretch;
  min-height: 26px;
  border-radius: 999px;
  background: var(--accent-color-dark);
}

.pinned-bar-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pinned-bar-title {
  color: var(--accent-color-dark);
  font-size: 11px;
  font-weight: 800;
}

#pinned-bar-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 12px;
}

.pinned-bar-unpin {
  flex: 0 0 32px;
  width: 32px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.pinned-bar-unpin:hover,
.pinned-bar-unpin:focus-visible {
  background:
    color-mix(
      in srgb,
      currentColor 10%,
      transparent
    );
  outline: none;
}

/*
  Скрепка на самом закреплённом сообщении в ленте — чтобы
  было видно, что оно закреплено, а не только в шапке.
*/
#messages li.message-pinned::after {
  content: '📌';
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 11px;
  opacity: 0.75;
  pointer-events: none;
}


/* Huawei WebView 114:
   fallback для border + color-mix() */

#messages li.message-anna,
.message-transparency-preview-own {
  border-color: var(--own-message-background);
  border-color:
    color-mix(
      in srgb,
      var(--own-message-background)
        var(--own-message-opacity-percent),
      transparent
    );
}

#messages li.message-husband,
.message-transparency-preview-partner {
  border-color: var(--partner-message-background);
  border-color:
    color-mix(
      in srgb,
      var(--partner-message-background)
        var(--own-message-opacity-percent),
      transparent
    );
}

.mobile-chat-drawer-open-button,
.mobile-compact-chat-identity,
.mobile-chat-menu-button {
  border-color: var(--border-color);
  border-color:
    color-mix(
      in srgb,
      var(--border-color) 68%,
      transparent
    );
}

.message-video-lazy-play-icon {
  border-color: var(--accent-color);
  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 62%,
      transparent
    );
}

.room-group-avatar-preview {
  border-color: var(--border-color);
  border-color:
    color-mix(
      in srgb,
      var(--accent-color) 35%,
      var(--border-color)
    );
}

/* Этап 8.5 — мягкая мобильная шапка и более аккуратный композер */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .chat-workspace {
    padding-top: 0;
  }

  .chat-workspace::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: calc(78px + env(safe-area-inset-top));
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--surface-floating-strong) 22%, transparent) 0%,
      color-mix(in srgb, var(--surface-floating-strong) 8%, transparent) 58%,
      transparent 100%
    );
  }

  #messages {
    padding-top: calc(78px + env(safe-area-inset-top));
    padding-bottom: 10px;
  }

  .message-search-panel {
    margin-top: calc(78px + env(safe-area-inset-top));
  }

  .composer-area {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  #message-form {
    max-width: 100%;
    margin: 0 auto;
    gap: 2px;
    padding: 5px 6px;
    border-radius: 23px;
    background: color-mix(in srgb, var(--surface-floating-strong) 94%, transparent);
    box-shadow: 0 10px 26px rgba(18, 39, 47, 0.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .smiley-picker-anchor {
    flex-basis: 34px;
    width: 34px;
    height: 36px;
  }

  #smiley-button,
  #image-button {
    width: 34px;
    height: 36px;
    border-radius: 10px;
  }

  .send-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  #message-input {
    min-height: 36px;
    padding: 8px 6px 8px 4px;
  }
}

@media (max-width: 480px), (hover: none) and (pointer: coarse) {
  #messages {
    padding-top: calc(74px + env(safe-area-inset-top));
  }

  .message-search-panel {
    margin-top: calc(74px + env(safe-area-inset-top));
  }

  .composer-area {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(9px, env(safe-area-inset-bottom));
  }

  #message-form {
    padding: 4px 5px;
    border-radius: 25px;
  }

  #message-input {
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}


/* Этап 8.5 — fix10: плавающий композер + нативное сопровождение клавиатуры Android */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  /*
    В нативном Android-приложении размер WebView теперь меняет сама система
    (adjustResize). Не фиксируем body по visualViewport — именно двойное
    изменение высоты раньше давало рывки и светлую полосу при закрытии IME.
  */
  html.native-android-ime-resize,
  html.native-android-ime-resize body {
    width: 100%;
    height: 100% !important;
    min-height: 0;
  }

  html.native-android-ime-resize body {
    position: relative !important;
    top: 0 !important;
    right: auto;
    left: auto;
  }

  html.native-android-ime-resize .app-shell {
    height: 100% !important;
    max-height: 100% !important;
  }

  .chat-workspace {
    --mobile-composer-height: 58px;
  }

  /*
    Композер больше не занимает отдельную непрозрачную полосу внизу.
    Он плавает поверх ленты, поэтому сообщения могут уходить под него —
    так же, как сверху уходят под плавающую шапку.
  */
  .composer-area {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(9px, env(safe-area-inset-bottom));
    background: transparent;
    pointer-events: none;
  }

  .composer-area > * {
    pointer-events: auto;
  }

  #message-form {
    margin: 0 auto;
    border-radius: 25px;
    background:
      color-mix(
        in srgb,
        var(--surface-floating-strong) 90%,
        transparent
      );
    box-shadow: 0 7px 20px rgba(18, 39, 47, 0.14);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }

  /*
    Запас нужен только для последнего сообщения: оно может быть полностью
    поднято над строкой ввода, но при обычной прокрутке остальные сообщения
    видны и под плавающим композером, без резкого прямоугольного обрыва.
  */
  #messages {
    padding-bottom:
      calc(
        var(--mobile-composer-height, 58px) +
        10px
      );
    -webkit-overflow-scrolling: touch;
  }

  .scroll-to-bottom-button {
    bottom:
      calc(
        var(--mobile-composer-height, 58px) +
        12px
      );
  }
}

@media (max-width: 480px), (hover: none) and (pointer: coarse) {
  .composer-area {
    padding-left: max(13px, env(safe-area-inset-left));
    padding-right: max(13px, env(safe-area-inset-right));
    padding-bottom: max(9px, env(safe-area-inset-bottom));
  }
}


/* Этап 8.5 — fix11: немного поднять плавающую строку ввода */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .chat-workspace {
    --mobile-composer-lift: 7px;
  }

  .composer-area {
    bottom: var(--mobile-composer-lift);
  }

  #messages {
    padding-bottom:
      calc(
        var(--mobile-composer-height, 58px) +
        var(--mobile-composer-lift, 7px) +
        10px
      );
  }

  .scroll-to-bottom-button {
    bottom:
      calc(
        var(--mobile-composer-height, 58px) +
        var(--mobile-composer-lift, 7px) +
        12px
      );
  }
}


/* Этап 8.5 — fix12: нативная синхронизация IME + контекстное меню */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  :root {
    --native-ime-bottom: 0px;
    --native-ime-shift: 0px;
  }

  /*
    Android работает в adjustNothing: WebView остаётся неподвижным,
    клавиатура накрывает его снизу. Нативный WindowInsetsAnimation
    передаёт реальное положение IME на каждом кадре, а мы двигаем
    композер ровно на ту же величину.
  */
  html.native-android-ime-resize .composer-area {
    transform: translate3d(0, var(--native-ime-shift), 0);
    will-change: transform;
    backface-visibility: hidden;
  }

  html.native-android-ime-resize #messages {
    padding-bottom:
      calc(
        var(--mobile-composer-height, 58px) +
        var(--mobile-composer-lift, 7px) +
        var(--native-ime-bottom, 0px) +
        10px
      );
  }

  html.native-android-ime-resize .scroll-to-bottom-button {
    transform: translate3d(0, var(--native-ime-shift), 0);
    will-change: transform;
  }

  /* Скрепка и смайлик визуально центрируем в одноуровневой строке. */
  #image-button,
  .smiley-picker-anchor {
    transform: translateY(-2px);
  }

  /*
    Huawei WebView иногда всё равно запускает системное выделение
    при долгом нажатии, даже если оно запрещено на самом <li>.
    Запрещаем его на всём содержимом сообщения и в нашем меню.
  */
  #messages li[data-message-id],
  #messages li[data-message-id] *,
  #message-context-menu,
  #message-context-menu * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }
}


/* Этап 8.5 — fix13: фактическое приклеивание строки к IME на Huawei */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  :root {
    --effective-ime-bottom: 0px;
  }

  /*
    fix12 уже оставляет Android-клавиатуру поверх WebView (adjustNothing).
    На Huawei нативный callback IME может не отдавать промежуточную высоту.
    Поэтому fix13 использует объединённую высоту: native WindowInsets +
    visualViewport только как датчик. Сам размер WebView при этом НЕ меняем.
  */
  html.native-android-ime-resize .composer-area {
    transform: none !important;
    bottom:
      calc(
        var(--mobile-composer-lift, 7px) +
        var(--effective-ime-bottom, 0px)
      );
    will-change: bottom;
  }

  html.native-android-ime-resize #messages {
    padding-bottom:
      calc(
        var(--mobile-composer-height, 58px) +
        var(--mobile-composer-lift, 7px) +
        var(--effective-ime-bottom, 0px) +
        10px
      );
  }

  html.native-android-ime-resize .scroll-to-bottom-button {
    transform: none !important;
    bottom:
      calc(
        var(--mobile-composer-height, 58px) +
        var(--mobile-composer-lift, 7px) +
        var(--effective-ime-bottom, 0px) +
        12px
      );
    will-change: bottom;
  }
}


/* Этап 8.5 — fix15: синхронизация IME без очереди evaluateJavascript */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  :root {
    --ime-follow-bottom: 0px;
  }

  /*
    Android остаётся в adjustNothing. Нативная часть хранит актуальную
    высоту IME, а JS читает только последнее значение один раз за кадр.
    Двигаем композер и саму ленту transform-ом: это не запускает тяжёлый
    layout на каждом кадре и должно идти синхронно с системной анимацией.
  */
  html.native-android-ime-resize .composer-area {
    bottom: var(--mobile-composer-lift, 7px) !important;
    transform:
      translate3d(
        0,
        calc(0px - var(--ime-follow-bottom, 0px)),
        0
      ) !important;
    will-change: transform;
    backface-visibility: hidden;
  }

  html.native-android-ime-resize #messages {
    padding-bottom:
      calc(
        var(--mobile-composer-height, 58px) +
        var(--mobile-composer-lift, 7px) +
        10px
      ) !important;
    transform:
      translate3d(
        0,
        calc(0px - var(--ime-follow-bottom, 0px)),
        0
      ) !important;
    will-change: transform;
    backface-visibility: hidden;
  }

  html.native-android-ime-resize .scroll-to-bottom-button {
    bottom:
      calc(
        var(--mobile-composer-height, 58px) +
        var(--mobile-composer-lift, 7px) +
        12px
      ) !important;
    transform:
      translate3d(
        0,
        calc(0px - var(--ime-follow-bottom, 0px)),
        0
      ) !important;
    will-change: transform;
  }
}


/* Этап 8.5 — fix16: без «прыжка всей ленты», с опережением IME на Huawei */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  :root {
    --ime-follow-predicted: 0px;
  }

  /*
    Саму ленту больше НЕ двигаем transform-ом целиком: именно это вместе
    с постоянным scrollTop=scrollHeight давало эффект «мячика».
    Двигается только плавающий композер, а лента получает нижний запас.
  */
  html.native-android-ime-resize .composer-area {
    bottom: var(--mobile-composer-lift, 7px) !important;
    transform:
      translate3d(
        0,
        calc(0px - var(--ime-follow-predicted, 0px)),
        0
      ) !important;
    will-change: transform;
    backface-visibility: hidden;
  }

  html.native-android-ime-resize #messages {
    transform: none !important;
    padding-bottom:
      calc(
        var(--mobile-composer-height, 58px) +
        var(--mobile-composer-lift, 7px) +
        var(--ime-follow-predicted, 0px) +
        10px
      ) !important;
    will-change: auto;
  }

  html.native-android-ime-resize .scroll-to-bottom-button {
    bottom:
      calc(
        var(--mobile-composer-height, 58px) +
        var(--mobile-composer-lift, 7px) +
        12px
      ) !important;
    transform:
      translate3d(
        0,
        calc(0px - var(--ime-follow-predicted, 0px)),
        0
      ) !important;
    will-change: transform;
  }
}


/* Этап 8.5 — clean fix17r: системный adjustResize без ручного сопровождения IME */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html.native-android-ime-resize .composer-area {
    bottom: var(--mobile-composer-lift, 7px) !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  html.native-android-ime-resize #messages {
    transform: none !important;
    padding-bottom:
      calc(
        var(--mobile-composer-height, 58px) +
        var(--mobile-composer-lift, 7px) +
        10px
      ) !important;
    will-change: auto !important;
  }

  html.native-android-ime-resize .scroll-to-bottom-button {
    bottom:
      calc(
        var(--mobile-composer-height, 58px) +
        var(--mobile-composer-lift, 7px) +
        12px
      ) !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}


/* Этап 8.5 — proto27: нативный композер + закрытие тапом + цвета темы */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html.omut-native-composer-proto32,
  html.omut-native-composer-proto32 body {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  /* WebView остаётся полного размера: системный фон не раскрывается. */
  html.omut-native-composer-proto32 body {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }

  html.omut-native-composer-proto32 .app-shell {
    height: 100% !important;
    max-height: 100% !important;
  }

  /* DOM-композер остаётся источником состояния, но не рисуется. */
  html.omut-native-composer-proto32 .composer-area {
    display: none !important;
  }

  /* Место под нативную строку; лента двигается только GPU-анимацией. */
  html.omut-native-composer-proto32 #messages {
    padding-bottom: 78px !important;
    will-change: transform;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
  }

  html.omut-native-composer-proto32 .scroll-to-bottom-button {
    bottom: 82px !important;
    will-change: transform;
    backface-visibility: hidden;
  }
}


/* Этап 8.5 — proto30: плавающие меню для нативного композера */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html.omut-native-composer-proto32 .omut-native-composer-attachment-menu {
    position: fixed !important;
    left: 10px !important;
    right: auto !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    width: min(290px, calc(100vw - 20px)) !important;
    z-index: 10020 !important;
  }

  html.omut-native-composer-proto32 .omut-native-composer-smiley-picker {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: min(430px, 52vh) !important;
    z-index: 10020 !important;
  }
}


/* proto32 — бесшовное завершение загрузки фотографии в пачке.
   Плитка не меняет геометрию: локальное превью остаётся нижним
   слоем, а готовое серверное фото проявляется поверх него.
   Это убирает одно-кадровую вспышку WebView при прямой смене src. */
#messages .message-album-group > li.omut-album-upload-arrival {
  position: relative;
  overflow: hidden;
}

#messages .message-album-group > li.omut-album-upload-arrival .omut-album-upload-arrival-image {
  opacity: 0.55;
  filter: brightness(0.9) saturate(0.9);
  transition: none !important;
}

#messages .message-album-group > li.omut-album-upload-arrival .omut-album-upload-crossfade {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  opacity: 0;
  filter: brightness(0.9) saturate(0.9);
  pointer-events: none;
  transition:
    opacity 0.38s cubic-bezier(.2,.72,.22,1),
    filter 0.38s cubic-bezier(.2,.72,.22,1);
  will-change: opacity, filter;
  backface-visibility: hidden;
}

#messages .message-album-group > li.omut-album-upload-arrival .omut-album-upload-crossfade.omut-album-upload-crossfade-ready {
  opacity: 1;
  filter: brightness(1) saturate(1);
}

@media (prefers-reduced-motion: reduce) {
  #messages .message-album-group > li.omut-album-upload-arrival .omut-album-upload-crossfade {
    transition: none !important;
  }
}

/* fix39 — Poco F7 Pro / HyperOS: стабильное окно ленты.
   Safe-layout больше не должен пропадать на время IME-анимации.
   Отдельный неподвижный viewport обрезает только сообщения:
   сверху — по реальному нижнему краю системной status bar, а не по
   нашей плавающей шапке; снизу — по базовой позиции нативного composer.
   Поэтому сообщения могут красиво проходить под круглыми кнопками и
   овальной шапкой, но не залезают на системные часы. */
.messages-viewport-clip {
  display: contents;
}

.messages-viewport-clip > #messages {
  position: relative;
  z-index: 1;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html.omut-native-composer-proto32.omut-native-navigation-safe-layout
    .chat-panel,
  html.omut-native-composer-proto32.omut-native-navigation-safe-layout
    .chat-workspace {
    background-color: var(--chat-background);
  }

  html.omut-native-composer-proto32.omut-native-navigation-safe-layout
    .chat-workspace {
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom:
      calc(
        var(--native-chat-bottom-reserve, 78px) +
        var(--native-ime-bottom-reserve, 0px)
      );
    overflow: hidden;
  }

  html.omut-native-composer-proto32.omut-native-navigation-safe-layout
    .messages-viewport-clip {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 0;
    margin-top: var(--native-status-bar-top, 0px);
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    overflow: clip;
    contain: paint;
    background: transparent;
  }

  html.omut-native-composer-proto32.omut-native-navigation-safe-layout
    .messages-viewport-clip > #messages {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  html.omut-native-composer-proto32.omut-native-navigation-safe-layout
    .scroll-to-bottom-button {
    bottom:
      calc(
        var(--native-chat-bottom-reserve, 78px) +
        10px
      ) !important;
  }
}


/* fix41: IME уменьшает viewport safe-layout; пустой padding внутри ленты не создаётся. */


/* fix42 — Poco F7 Pro / HyperOS: один источник геометрии IME.
   Нативный composer уже двигается Android-ом на высоту IME. Web-часть
   больше не резервирует ту же высоту через padding родителя. Вместо этого
   окно сообщений имеет собственную физическую нижнюю границу, совпадающую
   с верхом нативного composer. Это исключает «вторую клавиатуру» пустотой. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html.omut-native-composer-proto32.omut-native-navigation-safe-layout
    .chat-workspace {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  html.omut-native-composer-proto32.omut-native-navigation-safe-layout
    .messages-viewport-clip {
    position: absolute !important;
    top: var(--native-status-bar-top, 0px) !important;
    right: 0 !important;
    bottom: var(--native-chat-bottom-reserve, 78px) !important;
    left: 0 !important;
    z-index: 1;
    display: flex !important;
    min-height: 0 !important;
    margin: 0 !important;
    flex: none !important;
    flex-direction: column;
    overflow: hidden !important;
    contain: paint;
    background: transparent;
  }

  html.omut-native-composer-proto32.omut-native-navigation-safe-layout
    .messages-viewport-clip > #messages {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    transform: none !important;
    will-change: auto !important;
  }
}


/* fix44 — Poco F7 Pro: safe-layout управляет только границей viewport.
   Сам #messages никогда не сдвигается на высоту IME второй раз. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html.omut-native-composer-proto32.omut-native-navigation-safe-layout
    .messages-viewport-clip > #messages {
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
  }
}


/* fix45 — Poco F7 Pro / HyperOS: visualViewport уже уменьшается при IME.
   Поэтому safe-layout НЕ вычитает высоту клавиатуры второй раз. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html.omut-native-composer-proto32.omut-native-navigation-safe-layout
    .messages-viewport-clip {
    bottom: var(--native-chat-bottom-reserve, 78px) !important;
  }

  html.omut-native-composer-proto32.omut-native-navigation-safe-layout
    .scroll-to-bottom-button {
    transform: none !important;
  }
}

/* fix50 — мобильный закреп под центральной шапкой чата.
   Панель закрепа абсолютная: сообщения продолжают листаться под ней,
   а сама панель остаётся доступной сразу под овалом имени/статуса. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .chat-workspace {
    --mobile-pinned-bar-top:
      calc(70px + env(safe-area-inset-top));
    --mobile-pinned-bar-left:
      max(14px, env(safe-area-inset-left));
    --mobile-pinned-bar-right:
      max(14px, env(safe-area-inset-right));
  }

  .pinned-bar {
    position: absolute !important;
    top: var(--mobile-pinned-bar-top) !important;
    right: var(--mobile-pinned-bar-right) !important;
    left: var(--mobile-pinned-bar-left) !important;
    z-index: 109 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 4px !important;
    border-radius: 13px;
    background:
      color-mix(
        in srgb,
        var(--surface-floating-strong) 96%,
        transparent
      );
    box-shadow: 0 5px 16px rgba(18, 39, 47, 0.16);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    pointer-events: auto;
  }

  .pinned-bar-open {
    min-height: 36px;
    padding: 4px 7px;
  }

  .pinned-bar-unpin {
    align-self: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
  }
}

/* fix50 — для нативного Android свайп-ответ обрабатывается touch-событиями.
   touch-action оставляет вертикальную прокрутку браузеру, а горизонтальный
   жест забираем только после явного движения влево. */
@media (hover: none) and (pointer: coarse) {
  #messages li[data-message-id] {
    touch-action: pan-y;
  }
}


/* fix51 — закреп шире, свайп-ответ легче активируется на Android WebView. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .pinned-bar {
    left: max(var(--mobile-pinned-bar-left, 14px), env(safe-area-inset-left)) !important;
    right: max(var(--mobile-pinned-bar-right, 14px), env(safe-area-inset-right)) !important;
  }

  #messages li[data-message-id] {
    touch-action: pan-y !important;
    overscroll-behavior-inline: contain;
  }
}


/* ============================================================
   FIX58 — Android WebView: убрать системный синий tap-highlight
   при открытии/закрытии мобильной боковой панели.

   mobile-chat-drawer-backdrop — полноэкранный <button>.
   Android WebView рисует свой системный tap highlight на всей
   площади нажатой кнопки, поэтому при закрытии он выглядел как
   большой голубой/бирюзовый всплеск. Такой же highlight был
   заметен квадратом вокруг круглой кнопки открытия.

   Здесь НЕ меняются:
   - transform/transition панели;
   - backdrop opacity;
   - blur;
   - геометрия чата;
   - native composer / IME;
   - закрепы, reply, пагинация.
   ============================================================ */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  .mobile-chat-drawer-open-button,
  .mobile-chat-drawer-backdrop,
  .mobile-chat-drawer-icon-button,
  .mobile-chat-drawer-footer-button,
  #mobile-chat-drawer-search-clear,
  .app-sidebar .chat-list-item {
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-chat-drawer-backdrop {
    -webkit-user-select: none;
    user-select: none;
  }
}


/* ============================================================
   Этап 59 — кликабельные ссылки и компактные link preview.
   ============================================================ */
.message-text-link {
  color: var(--accent-color-dark);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}

.message-text-link:visited {
  color: var(--accent-color-dark);
}

.message-link-preview {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  min-width: 0;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid
    color-mix(
      in srgb,
      var(--border-color) 78%,
      transparent
    );
  border-radius: 12px;
  background:
    color-mix(
      in srgb,
      var(--surface-floating-strong) 84%,
      transparent
    );
  color: inherit;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(20, 42, 48, 0.08);
  -webkit-tap-highlight-color: transparent;
}

.message-link-preview-without-image {
  grid-template-columns: minmax(0, 1fr);
}

.message-link-preview-image {
  display: block;
  width: 82px;
  height: 100%;
  min-height: 82px;
  max-height: 118px;
  object-fit: cover;
  background: var(--surface-soft);
}

.message-link-preview-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 9px 10px;
}

.message-link-preview-site {
  overflow: hidden;
  color: var(--accent-color-dark);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-link-preview-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--message-text-color);
  font-size: 12px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.message-link-preview-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 420px) {
  .message-link-preview {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .message-link-preview-image {
    width: 70px;
    min-height: 76px;
  }
}


/* ============================================================
   FIX64 — панель массового выбора заменяет закреплённую панель.

   На мобильном используется ТОТ ЖЕ top/left/right, который fix49/51
   уже вычисляет по реальному нижнему краю видимой шапки.
   Поэтому:
   - есть закреп -> при выборе он исчезает, действия встают на его место;
   - закрепа нет -> действия всё равно появляются сразу под шапкой;
   - после "Отмена" закреп возвращается.
   ============================================================ */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  #message-selection-bar {
    position: absolute !important;
    top: var(--mobile-pinned-bar-top) !important;
    right:
      max(
        var(--mobile-pinned-bar-right, 14px),
        env(safe-area-inset-right)
      ) !important;
    left:
      max(
        var(--mobile-pinned-bar-left, 14px),
        env(safe-area-inset-left)
      ) !important;
    z-index: 110 !important;

    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    gap: 6px !important;

    border-radius: 13px;
    background:
      color-mix(
        in srgb,
        var(--surface-floating-strong) 96%,
        transparent
      );
    box-shadow:
      0 5px 16px rgba(18, 39, 47, 0.16);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }

  #message-selection-count {
    flex: 0 0 auto;
    margin-right: 2px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .message-selection-actions {
    width: auto !important;
    min-width: 0;
    flex: 1 1 230px;
    margin-left: auto;
    gap: 5px !important;
    justify-content: flex-end !important;
  }

  #message-selection-bar button {
    min-height: 32px;
    padding: 5px 8px !important;
    flex: 1 1 auto !important;
    border-radius: 8px;
    font-size: 11px !important;
    line-height: 1.15;
  }
}


/* FIX65 — мобильная круглая галочка у левого края экрана/чата. */
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  #messages.message-selection-mode {
    cursor: pointer;
  }

  #messages.message-selection-mode
    .message-selection-checkbox {
    width: 26px;
    height: 26px;
  }

  #messages.message-selection-mode
    li[data-message-id] {
    -webkit-tap-highlight-color: transparent;
  }
}


/* ============================================================
   FIX66 — Telegram-like selection rail for incoming messages.
   В режиме выбора входящие пузыри плавно освобождают слева
   отдельную колонку для круглой галочки.
   ============================================================ */

#messages li.message-husband {
  transition:
    margin-left 180ms cubic-bezier(.2, .72, .24, 1),
    box-shadow 150ms ease;
}

/*
  Только обычные одиночные входящие сообщения.
  Альбомы оставляем с их отдельной логикой fix65, чтобы не ломать сетку.
*/
#messages.message-selection-mode
  li.message-husband:not(.message-selection-album-item) {
  margin-left: 38px;
}

/*
  После сдвига входящего пузыря кружок остаётся в освободившейся
  левой колонке, а не едет вместе с самим пузырём.
*/
#messages.message-selection-mode
  li.message-husband:not(.message-selection-album-item)
  > .message-selection-checkbox {
  left: -32px !important;
}

/*
  Убираем WebView/Android tap highlight и системное выделение текста.
  В selection mode вся строка и так является одной большой кнопкой.
*/
#messages.message-selection-mode,
#messages.message-selection-mode * {
  -webkit-tap-highlight-color: transparent !important;
}

#messages.message-selection-mode {
  -webkit-user-select: none;
  user-select: none;
}

#messages.message-selection-mode
  li[data-message-id] {
  -webkit-touch-callout: none;
  outline: none;
}

/*
  На телефоне чуть больше воздуха между левым краем и пузырём,
  чтобы круг визуально жил в собственной колонке.
*/
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  #messages.message-selection-mode
    li.message-husband:not(.message-selection-album-item) {
    margin-left: 40px;
  }

  #messages.message-selection-mode
    li.message-husband:not(.message-selection-album-item)
    > .message-selection-checkbox {
    left: -34px !important;
  }
}


/* ============================================================
   FIX67 — мягкое появление колонки выбора.
   Геометрия fix65/fix66 остаётся прежней; меняется только анимация.
   ============================================================ */

/*
  Checkbox всегда остаётся в layout, но вне selection mode полностью
  невидим. Благодаря этому браузер может анимировать opacity/scale,
  вместо мгновенного display:none -> display:block.
*/
.message-selection-checkbox {
  display: block !important;
  opacity: 0;
  visibility: hidden;

  transform:
    translateY(-50%)
    scale(.84);

  transition:
    opacity 110ms ease,
    transform 130ms cubic-bezier(.2, .72, .24, 1),
    border-color 120ms ease,
    background-color 120ms ease;

  will-change: opacity, transform;
}

#messages.message-selection-mode
  .message-selection-checkbox {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(-50%)
    scale(1);

  /*
    Небольшая задержка даёт fix65 один кадр на расчёт точной позиции
    у левого края. Кружок появляется уже там, где должен быть.
  */
  transition:
    opacity 155ms ease 35ms,
    transform 180ms cubic-bezier(.2, .72, .24, 1) 35ms,
    border-color 120ms ease,
    background-color 120ms ease;
}

/* Для элементов фотоальбома нет вертикального translateY. */
#messages.message-selection-mode
  li.message-selection-album-item
  > .message-selection-checkbox {
  transform: scale(1);
}

/*
  Чуть смягчаем уже существующий fix66-сдвиг входящих сообщений:
  сначала начинает освобождаться место, затем проявляется кружок.
*/
#messages li.message-husband {
  transition:
    margin-left 220ms cubic-bezier(.18, .72, .22, 1),
    box-shadow 150ms ease;
}

/* Выбранная галочка тоже меняет состояние без резкого щелчка. */
#messages.message-selection-mode
  .message-selection-checkbox:checked {
  transition:
    opacity 155ms ease 35ms,
    transform 180ms cubic-bezier(.2, .72, .24, 1) 35ms,
    border-color 120ms ease,
    background-color 120ms ease;
}


/* ============================================================
   FIX77 — Android WebView scroll performance
   Во время движения ленты временно отключаем только дорогой
   backdrop blur у самих прокручиваемых сообщений. Цвет, прозрачность,
   границы, тени и весь внешний вид после остановки остаются прежними.
   ============================================================ */
html.native-android-ime-resize
  #messages.omut-scroll-performance-active
  li.message-anna,
html.native-android-ime-resize
  #messages.omut-scroll-performance-active
  li.message-husband,
html.native-android-ime-resize
  #messages.omut-scroll-performance-active
  .message-system-event-text {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ============================================================
   FIX78.1 — drawer swipe on the whole message surface
   Раньше pan-y был только на отдельных li-сообщениях. Если свайп
   начинался на свободном фоне #messages, Android WebView мог забрать
   жест и оборвать touch-цепочку. Теперь вся лента сохраняет нативный
   вертикальный scroll, но горизонтальный жест остаётся JS.
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  #messages {
    touch-action: pan-y !important;
    overscroll-behavior-x: contain;
  }
}


/* =========================================================
   FIX83 — видеогалерея по модели фотогалереи
   ========================================================= */

.message-video-viewer-player {
  touch-action: pan-y;
  will-change: transform, opacity;
  transition:
    transform 0.14s ease,
    opacity 0.14s ease;
}

.message-video-viewer-thumbnail-list {
  width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  touch-action: pan-x;
}

.message-video-viewer-thumbnail {
  scroll-snap-align: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.message-video-viewer-thumbnail-preview {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}