:root {
  --green: #168cff;
  --green-dark: #0876e8;
  --bubble: #b9dcff;
  --ink: #162033;
  --muted: #8290a5;
  --line: rgba(31, 91, 153, .09);
  --canvas: #dfeaf5;
  --sidebar: #edf4fa;
  --panel: #fff;
  --rail: #101c32;
  --shadow: 0 24px 70px rgba(36, 91, 151, .18);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  background: #c8d8e7;
  font-family: Inter, "SF Pro Text", "Segoe UI", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
button, input, textarea { outline: 0; }
button:focus-visible, input:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(22, 140, 255, .16);
}
.fluent-icon {
  font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets", "Microsoft YaHei UI", sans-serif;
}
.ui-icon {
  width: 1em;
  height: 1em;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hidden { display: none !important; }
.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 22px;
}

/* Authentication */
.is-auth {
  background:
    radial-gradient(circle at 20% 10%, rgba(22,140,255,.16), transparent 36rem),
    linear-gradient(145deg, #f4faff, #e3f1ff);
}
.auth {
  width: min(900px, 100%);
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 90px;
  align-items: center;
}
.brand .logo {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 21px;
  color: #fff;
  background: linear-gradient(145deg, #42b8ff, #176fff);
  box-shadow: 0 18px 38px rgba(22,140,255,.26);
  font-size: 26px;
  font-weight: 700;
}
.brand h1 {
  margin: 30px 0 12px;
  font-size: clamp(48px, 7vw, 74px);
  font-weight: 720;
  letter-spacing: -.08em;
}
.brand p { margin: 0; color: #6f7973; font-size: 19px; }
.auth-card {
  padding: 30px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 26px 70px rgba(25,41,32,.12);
  backdrop-filter: blur(18px);
}
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 26px;
  padding: 4px;
  border-radius: 11px;
  background: #edf5fc;
}
.tab {
  height: 38px;
  border: 0;
  border-radius: 8px;
  color: #7c847f;
  background: transparent;
}
.tab.active {
  color: #222;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20,30,24,.07);
  font-weight: 600;
}
.auth-card label {
  display: grid;
  gap: 8px;
  margin: 17px 0;
  color: #4d554f;
  font-size: 13px;
  font-weight: 600;
}
.auth-card input {
  height: 48px;
  padding: 0 14px;
  border: 1px solid #dbe7f2;
  border-radius: 14px;
  background: #fbfcfb;
  transition: border-color .15s, box-shadow .15s;
}
.auth-card input:focus { border-color: rgba(22,140,255,.55); background: #fff; }
.primary {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--green);
  font-weight: 650;
  transition: background .15s, transform .12s;
}
.primary:hover { background: var(--green-dark); }
.primary:active { transform: translateY(1px); }
.form-message { min-height: 20px; margin: 12px 0 0; color: #cf4b4b; text-align: center; font-size: 12px; }

/* Application frame */
.is-chat { overflow: hidden; }
.chat-app {
  width: min(1260px, 100%);
  height: min(840px, calc(100vh - 44px));
  height: min(840px, calc(100dvh - 44px));
  min-height: 560px;
  display: grid;
  grid-template-columns: 64px 310px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(44,91,140,.22);
  border-radius: 16px;
  background: var(--panel);
  box-shadow:
    0 30px 80px rgba(19,55,94,.25),
    0 8px 24px rgba(24,70,116,.13),
    inset 0 1px 0 rgba(255,255,255,.72);
}
.app-rail {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 8px 12px;
  background: linear-gradient(180deg, #162844, #0c1729);
}
.rail-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #52b9ff, #2874df);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  font-size: 16px;
  font-weight: 700;
  border: 0;
  padding: 0;
  overflow: hidden;
}
.rail-avatar img, .avatar img, .msg-avatar img, .friend-avatar img, .profile-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.rail-user {
  width: 46px;
  margin: -3px 0 8px;
  overflow: hidden;
  color: #8e9691;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.rail-btn {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  color: #878e89;
  background: transparent;
  font-size: 20px;
  transition: color .15s, background .15s, transform .12s;
}
button.rail-btn:hover { color: #fff; background: rgba(255,255,255,.07); }
button.rail-btn:active { transform: scale(.92); }
.rail-btn.active { color: #54b8ff; background: rgba(22,140,255,.15); }
.rail-notice {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 12px;
  height: 12px;
  border: 2px solid #152640;
  border-radius: 50%;
  background: #ff3b4f;
  box-shadow:
    0 0 5px rgba(255,59,79,.95),
    0 0 12px rgba(255,59,79,.78),
    0 0 20px rgba(255,59,79,.45);
  animation: notice-in .2s ease-out both, notice-pulse 1.8s ease-in-out .2s infinite;
}
.rail-notice::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(255,86,101,.72);
  border-radius: 50%;
  animation: notice-ring 1.8s ease-out .2s infinite;
}
.rail-btn.has-notice .ui-icon {
  color: #fff;
  filter: drop-shadow(0 0 5px rgba(78,178,255,.55));
}
@keyframes notice-in {
  from { opacity: 0; transform: scale(.35); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes notice-pulse {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}
@keyframes notice-ring {
  0% { opacity: .9; transform: scale(.55); }
  70%,100% { opacity: 0; transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .rail-notice, .rail-notice::after { animation: none; }
}
.rail-btn.active::before {
  content: "";
  position: absolute;
  left: -8px;
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: #42aaff;
}
.rail-spacer { flex: 1; }
.rail-message-badge {
  position: absolute;
  z-index: 3;
  top: -3px;
  right: -5px;
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
}
.rail-message-badge svg { width: 24px; height: 24px; display: block; overflow: visible; }
.rail-message-badge circle {
  fill: #ff4054;
  stroke: #fff;
  stroke-width: 1.6;
  filter: drop-shadow(0 2px 5px rgba(224,45,66,.45));
}
.rail-message-badge text {
  fill: #fff;
  stroke: none;
  text-anchor: middle;
  dominant-baseline: middle;
  font: 750 9.5px "Segoe UI", sans-serif;
}.h5-nav { display: none; }
.h5-message-badge{display:none}
.h5-section{display:none}
.h5-new-friends{display:none}
.h5-logout{display:none}

/* Conversation list */
.sidebar {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--sidebar);
}
.side-head {
  flex: 0 0 auto;
  padding: 20px 16px 14px;
  border-bottom: 1px solid rgba(20,28,23,.045);
}
.side-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.side-title strong { font-size: 21px; font-weight: 680; letter-spacing: -.02em; }
.h5-page-brand>img,.h5-page-brand small,.h5-chat-subtitle{display:none}
.add-contact {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: #4d5650;
  background: #e7f1fa;
  transition: background .15s, transform .12s;
}
.add-contact:hover { background: #d8eafa; }
.add-contact:active { transform: scale(.94); }
.search {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  overflow: hidden;
  color: #8e9691;
  background: #e9f2fa;
  transition: border-color .15s, background .15s;
}
.search:focus-within { border-color: rgba(22,140,255,.38); background: #fff; }
.search > .ui-icon { width: 16px; height: 16px; }
.search input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  font-size: 13px;
}
.search input:focus { outline: 0; box-shadow: none; }
.search input::placeholder { color: #9da39f; }
.contacts {
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}
.contact {
  width: 100%;
  min-height: 70px;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  transition: background .12s;
  cursor: pointer;
}
.contact:hover { background: rgba(255,255,255,.58); }
.contact.active,
.contact.pinned.active {
  color: #fff;
  background: linear-gradient(135deg, #269cff, #147bea);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 7px 18px rgba(24,112,201,.23);
}
.contact.active .contact-copy small,
.contact.active time,
.contact.pinned.active .contact-copy small,
.contact.pinned.active time { color: rgba(255,255,255,.76); }
.contact.active time,
.contact.pinned.active time {
  font-size: 12px;
  font-weight: 550;
}
.contact.active .contact-muted,
.contact.pinned.active .contact-muted {
  color: #fff;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.contact.active .pinned-label,
.contact.pinned.active .pinned-label {
  color: #fff;
  background: rgba(255,255,255,.2);
}
.avatar, .msg-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #64bfff, #3479df);
  filter: hue-rotate(var(--avatar-hue, 0deg));
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.avatar.has-image, .msg-avatar.has-image { padding: 0; overflow: hidden; filter: none; }
.avatar-button { padding: 0; border: 0; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.avatar-button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,28,23,.12); }
.avatar { width: 46px; height: 46px; font-size: 16px; }
.contact-copy { min-width: 0; display: grid; gap: 6px; }
.contact-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 620; }
.contact-copy small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.contact time {
  align-self: start;
  display: grid;
  justify-items: end;
  gap: 6px;
  padding-top: 2px;
  color: #a4aaa6;
  font-size: 10px;
}
.contact time span { white-space: nowrap; }
.pinned-label {
  padding: 2px 6px;
  border-radius: 5px;
  color: #4d7398;
  background: #deedfb;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.4;
}
.contact.pinned { background: rgba(215,232,247,.78); }
.contact.manual-unread .contact-copy strong { font-weight: 750; }
.contact-muted {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  margin-left: 7px;
  border-radius: 7px;
  color: #607a94;
  background: #dce9f4;
  vertical-align: -6px;
}
.contact-muted svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.unread-dot {
  width: 7px; height: 7px; display: inline-block; margin-right: 5px;
  border-radius: 50%; background: #ef5b55; box-shadow: 0 0 0 2px rgba(239,91,85,.12);
}
.unread-badge { width: 25px; height: 25px; display: block; }
.unread-badge svg { width: 25px; height: 25px; display: block; overflow: visible; }
.unread-badge circle {
  fill: #ff4054;
  stroke: rgba(255,255,255,.9);
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 4px rgba(224,45,66,.34));
}
.unread-badge text {
  fill: #fff;
  stroke: none;
  text-anchor: middle;
  dominant-baseline: middle;
  font: 700 11px "Segoe UI",sans-serif;
}

/* Chat */
.conversation {
  min-width: 0;
  min-height: 0;
  background: var(--canvas);
  box-shadow:
    inset 12px 0 24px -22px rgba(18,54,92,.72),
    inset 0 1px 0 rgba(255,255,255,.48);
}
.welcome {
  height: 100%;
  display: grid;
  place-content: center;
  color: #8d9590;
  text-align: center;
}
.welcome-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin: auto;
  border-radius: 22px;
  color: #9fa6a2;
  background: rgba(255,255,255,.52);
  box-shadow: inset 0 0 0 1px rgba(20,28,23,.04);
  font-size: 28px;
}
.welcome-icon.brand-bird { overflow: hidden; padding: 7px; background: rgba(255,255,255,.68); }
.welcome-icon.brand-bird img { width: 100%; height: 100%; display: block; object-fit: cover; mix-blend-mode: multiply; }
.welcome h2 { margin: 20px 0 7px; color: #59615c; font-size: 18px; font-weight: 650; }
.welcome p { margin: 0; font-size: 13px; }
.chat-panel {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 92px minmax(0,1fr) auto;
  background:
    radial-gradient(circle at 78% 18%, rgba(82,174,255,.09), transparent 34%),
    linear-gradient(145deg, #e8f1f9 0%, #dce8f3 100%);
}
.chat-head {
  height: 92px;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 24px;
  z-index: 2;
  border-bottom: 1px solid rgba(44,91,140,.14);
  background: rgba(241,247,252,.88);
  box-shadow:
    0 8px 20px rgba(37,83,129,.08),
    inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
}
.chat-head .avatar { width: 38px; height: 38px; border-radius: 11px; font-size: 14px; }
.chat-head > div:last-child { display: grid; gap: 3px; }
.peer-heading {
  min-width: 0;
  flex: 1;
  display: grid !important;
  grid-template-columns: max-content max-content max-content max-content;
  grid-template-rows: 34px 28px;
  align-items: center;
  column-gap: 18px !important;
  row-gap: 5px !important;
  overflow: hidden;
}
.peer-heading strong {
  flex: 0 0 auto;
  padding-right: 3px;
  color: #17263a;
  font-size: 16px;
  font-weight: 700;
}
.peer-heading > span {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #5f7892;
  background: transparent;
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.25;
}
.peer-heading > span:not(#peerBio)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -9px;
  width: 1px;
  height: 13px;
  background: rgba(65,105,145,.18);
  transform: translateY(-50%);
}
.peer-heading #peerIp { color: #3975aa; }
.peer-heading #peerLocation {
  max-width: 250px;
  overflow: hidden;
  color: #337f93;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peer-heading #peerLastLogin { color: #526f8b; }
.peer-heading #peerBio {
  min-width: 0;
  max-width: 100%;
  grid-column: 2 / -1;
  grid-row: 2;
  overflow: hidden;
  padding-left: 14px;
  border-left: 1px solid rgba(65,105,145,.18);
  color: #708397;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.peer-account {
  height: 28px;
  min-width: 0;
  max-width: 190px;
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 1;
  grid-row: 2;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  color: #597b9c;
  background: transparent;
  font-size: 12px;
  font-weight: 550;
}
.peer-account:hover { color: #126fc8; }
.peer-account.copied { color: #16845f; }
.peer-account .ui-icon { width: 14px; height: 14px; }
.peer-account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-entry {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid rgba(45,107,166,.12);
  border-radius: 10px;
  color: #3975aa;
  background: rgba(255,255,255,.48);
  font-size: 12px;
  font-weight: 600;
}
.history-entry:hover { color: #126fc8; background: #fff; box-shadow: 0 4px 12px rgba(40,99,155,.1); }
.history-entry .ui-icon { width: 17px; height: 17px; }
.back {
  display: none;
  border: 0;
  color: #414844;
  background: transparent;
  font-size: 30px;
}
.messages {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 30px;
  background:
    linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,0) 22%),
    radial-gradient(circle at 12% 82%, rgba(62,153,239,.055), transparent 31%);
}
.message-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 15px 0;
  animation: message-in .18s ease-out both;
}
.load-history {
  display: block;
  margin: 0 auto 18px;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  color: #758079;
  background: rgba(255,255,255,.72);
  font-size: 11px;
}
.load-history:hover { background: #fff; }
.recalled .bubble {
  min-height: 0;
  padding: 6px 10px;
  border: 0;
  color: #969d98;
  background: rgba(255,255,255,.45);
  box-shadow: none;
  font-size: 11px;
  font-style: italic;
}
.recalled .bubble::before, .recalled .bubble time { display: none; }
.edited-mark { display: inline-block; margin-left: 8px; color: rgba(35,43,38,.58); font-size: 11px; font-weight: 500; line-height: 1.25; }
.bubble.inline-editing,
.mine .bubble.inline-editing {
  width: min(440px,68vw);
  max-width: 68vw;
  padding: 9px;
  border: 1px solid rgba(22,140,255,.3);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20,28,23,.1);
}
.bubble.inline-editing::before { display: none; }
.inline-edit-input {
  width: 100%;
  min-height: 52px;
  max-height: 160px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid #dfe4e1;
  border-radius: 9px;
  color: #252b27;
  background: #fafcfb;
  line-height: 1.55;
}
.inline-edit-input:focus { border-color: rgba(22,140,255,.5); box-shadow: 0 0 0 3px rgba(22,140,255,.09); }
.inline-edit-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 8px; }
.inline-edit-actions button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--green);
  font-size: 11px;
}
.inline-edit-actions button:disabled { opacity: .62; }
.inline-edit-actions .ghost { color: #69716c; background: #edf0ee; }
.messages.selecting .message-row { padding-left: 38px; }
.batch-check {
  position: absolute;
  z-index: 3;
  top: 7px;
  left: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #cbd1cd;
  border-radius: 50%;
  color: transparent;
  background: #fff;
  font-size: 12px;
}
.batch-check.selected { border-color: var(--green); color: #fff; background: var(--green); }
.batch-bar {
  position: absolute;
  z-index: 20;
  right: 20px;
  bottom: 176px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 34px rgba(20,28,23,.15);
  backdrop-filter: blur(12px);
  font-size: 11px;
}
.batch-bar > span { margin-right: 3px; }
.batch-bar button { height: 30px; padding: 0 11px; border: 0; border-radius: 8px; color: #626b65; background: #edf0ee; font-size: 11px; }
.batch-bar .danger { color: #fff; background: #e55353; }
.message-row.mine { flex-direction: row-reverse; }
.msg-avatar { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }
.message-row.mine .msg-avatar { background: linear-gradient(145deg, #69798e, #425064); }
.bubble {
  position: relative;
  max-width: min(68%, 540px);
  min-height: 38px;
  padding: 10px 13px 8px;
  border: 1px solid rgba(49,91,132,.08);
  border-radius: 9px;
  background: #fff;
  box-shadow:
    0 5px 14px rgba(38,75,112,.11),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(43,91,137,.035);
  line-height: 1.58;
  white-space: pre-wrap;
  word-break: break-word;
}
.bubble::before {
  content: "";
  position: absolute;
  top: 12px;
  left: -7px;
  width: 8px;
  height: 12px;
  background: #fff;
  clip-path: polygon(100% 0, 100% 100%, 0 28%);
  filter: drop-shadow(-1px 1px 0 rgba(43,91,137,.08));
}
.mine .bubble {
  background: var(--bubble);
  box-shadow:
    0 5px 13px rgba(45,108,170,.13),
    inset 0 1px 0 rgba(255,255,255,.42),
    0 0 0 1px rgba(42,119,191,.05);
}
.mine .bubble::before {
  right: -7px;
  left: auto;
  background: var(--bubble);
  clip-path: polygon(0 0, 100% 28%, 0 100%);
  filter: drop-shadow(1px 1px 0 rgba(42,119,191,.09));
}
.bubble time {
  display: block;
  margin-top: 5px;
  color: rgba(35,43,38,.56);
  text-align: right;
  font-size: 11px;
  line-height: 1.25;
}
.attachment-bubble { min-height: 0; padding: 5px; border-radius: 9px; overflow: visible; }
.attachment-bubble::before { display: none; }
.image-bubble,
.mine .image-bubble {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none;
}
.image-bubble time {
  display: none;
}
.image-bubble.has-quote,
.mine .image-bubble.has-quote {
  padding: 6px;
  border-radius: 9px;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 5px 14px rgba(38,75,112,.1) !important;
}
.mine .image-bubble.has-quote { background: var(--bubble) !important; }
.image-message {
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: transparent;
  background: transparent;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  text-decoration: none !important;
}
.image-message:link,
.image-message:visited,
.image-message:hover,
.image-message:active {
  color: transparent;
  text-decoration: none !important;
}
.image-message:focus,
.image-message:focus-visible {
  outline: 0;
  box-shadow: none;
}
.image-message img {
  display: block;
  width: auto;
  max-width: min(380px,100%);
  max-height: 340px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}
.file-message {
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border-radius: 6px;
  color: #222;
  background: #fff;
  text-decoration: none;
}
.file-message:hover { background: #f8faf8; }
.file-message > span:last-child { min-width: 0; display: grid; gap: 4px; }
.file-message strong { max-width: 270px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.file-message small { color: #929994; font-size: 10px; }
.file-icon, .pending-file-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #3aaeff, #197bea);
  font-size: 18px;
}
.file-icon .ui-icon, .pending-file-icon .ui-icon { width: 20px; height: 20px; }

/* Composer */
.compose-area {
  position: relative;
  min-width: 0;
  z-index: 3;
  border-top: 1px solid rgba(52,101,148,.16);
  background: rgba(238,245,251,.94);
  box-shadow:
    0 -12px 28px rgba(31,75,118,.1),
    inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter: blur(18px);
}
.composer {
  min-height: 158px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 72px;
  grid-template-rows: 44px minmax(86px,auto);
  column-gap: 10px;
  align-items: end;
  padding: 7px 22px 18px;
}
.compose-tools {
  grid-column: 1 / 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 3px;
}
.tool-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: #4f5752;
  background: transparent;
  font-size: 20px;
  transition: background .12s, transform .12s;
}
.tool-btn:hover { background: #e9ecea; }
.tool-btn:active { transform: scale(.92); }
.message-field {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  min-width: 0;
  align-self: stretch;
}
.composer textarea {
  width: 100%;
  height: 100%;
  min-height: 86px;
  max-height: 112px;
  overflow-y: auto;
  resize: none;
  padding: 13px 42px 13px 14px;
  border: 1px solid #e0e4e1;
  border-radius: 13px;
  background: #fff;
  caret-color: var(--green);
  line-height: 1.55;
}
.clear-message {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #8d9590;
  background: #edf0ee;
  font-size: 18px;
  line-height: 1;
  transition: color .12s, background .12s, transform .12s;
}
.clear-message:hover { color: #555d58; background: #e1e6e3; }
.clear-message:active { transform: scale(.92); }
.composer textarea::placeholder { color: #afb5b1; }
.composer textarea:focus {
  border-color: rgba(22,140,255,.46);
  box-shadow: 0 0 0 3px rgba(22,140,255,.09);
}
.send {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  width: 72px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--green);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, transform .12s, opacity .15s;
}
.send:not(:disabled):hover { background: var(--green-dark); }
.send:not(:disabled):active { transform: scale(.97); }
.send:disabled { cursor: not-allowed; color: #9aa09c; background: #e5e8e6; }
.emoji-panel {
  position: absolute;
  z-index: 10;
  bottom: calc(100% - 4px);
  left: 20px;
  width: min(400px, calc(100vw - 28px));
  max-height: min(360px, 60vh);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(8,minmax(38px,1fr));
  gap: 5px;
  padding: 14px;
  border: 1px solid #dfe3e0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(20,28,23,.16);
}
.emoji {
  min-width: 0;
  width: 100%;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 3px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 24px;
  line-height: 1;
}
.emoji:hover { background: #f0f3f1; }
.upload-status { padding: 9px 22px 0; color: #7f8782; font-size: 11px; }
.reply-preview {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 22px 0;
  padding: 8px 10px 8px 12px;
  border-left: 3px solid var(--green);
  border-radius: 8px;
  color: #4e6479;
  background: rgba(255,255,255,.72);
}
.reply-preview > div { min-width: 0; display: grid; gap: 3px; }
.reply-preview strong { color: #287ac8; font-size: 12px; }
.reply-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.reply-preview button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  color: #6f8295;
  background: #e8f0f7;
}
.reply-preview button .ui-icon { width: 15px; height: 15px; }
.quoted-message {
  min-width: 120px;
  display: grid;
  gap: 2px;
  margin: -2px -4px 8px;
  padding: 6px 8px;
  border-left: 3px solid rgba(38,117,191,.55);
  border-radius: 5px;
  color: #5b6f82;
  background: rgba(219,233,245,.68);
}
.mine .quoted-message { background: rgba(255,255,255,.28); }
.quoted-message strong { color: #2676bd; font-size: 11px; }
.quoted-message span { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.pending-attachment {
  position: relative;
  width: fit-content;
  max-width: calc(100% - 44px);
  display: flex;
  align-items: center;
  margin: 10px 22px 0;
  padding: 7px 38px 7px 7px;
  border: 1px solid #dfe3e0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(20,28,23,.06);
}
.pending-attachment > div { min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.pending-attachment img { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; }
.pending-attachment span { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-attachment > button {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: #7f8782;
  background: #f0f2f1;
  font-size: 17px;
}
.empty-small { padding: 36px 12px; color: #969d98; text-align: center; font-size: 12px; }
.contacts, .messages { scrollbar-width: thin; scrollbar-color: #c9cecb transparent; }
.contacts::-webkit-scrollbar, .messages::-webkit-scrollbar { width: 6px; }
.contacts::-webkit-scrollbar-thumb, .messages::-webkit-scrollbar-thumb { border-radius: 8px; background: #c9cecb; }
@keyframes message-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Profile and friends */
.modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16,22,18,.42);
  backdrop-filter: blur(5px);
}
.modal-card {
  position: relative;
  width: min(460px,100%);
  max-height: min(720px,calc(100dvh - 40px));
  overflow-y: auto;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15,24,19,.24);
}
.modal-card h2 { margin: 0 0 22px; font-size: 22px; }
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: #747c77;
  background: #f0f2f1;
  font-size: 21px;
}
.modal-close .ui-icon { width: 17px; height: 17px; }
.modal-card label { display: grid; gap: 7px; margin: 15px 0; color: #555e58; font-size: 12px; font-weight: 600; }
.modal-card input, .modal-card textarea, .modal-card select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #dfe4e1;
  border-radius: 11px;
  background: #fafbfa;
  resize: none;
}
.modal-card select { height: 42px; appearance: auto; }
.modal-card input:focus, .modal-card textarea:focus, .modal-card select:focus { border-color: rgba(22,140,255,.5); box-shadow: 0 0 0 3px rgba(22,140,255,.09); }
.modal-card input:disabled { color: #929995; background: #f0f2f1; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profile-grid label { margin: 0 0 15px; }
.avatar-editor { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.profile-avatar, .friend-avatar {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg,#64bfff,#3479df);
  font-size: 22px;
  font-weight: 700;
}
.avatar-editor > div:last-of-type { display: grid; gap: 6px; }
.avatar-editor small { color: #969d99; font-size: 10px; }
.secondary-btn { width: fit-content; padding: 8px 12px; border: 0; border-radius: 9px; background: #edf1ee; }
.action-primary { margin-top: 2px; }
.modal-message { min-height: 18px; margin: 8px 0; color: #7e8681; font-size: 11px; }
.friends-card { width: min(600px,100%); }
.friend-tabs { display: flex; gap: 22px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.friend-tab { padding: 0 2px 11px; border: 0; border-bottom: 2px solid transparent; color: #858d88; background: transparent; }
.friend-tab.active { border-bottom-color: var(--green); color: #202521; font-weight: 650; }
.modal-search { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.modal-search button, .friend-add, .friend-actions button {
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--green);
  font-size: 12px;
  font-weight: 600;
}
.modal-search button:hover, .friend-add:not(:disabled):hover, .friend-actions button:hover { background: var(--green-dark); }
.friend-results { min-height: 120px; margin-top: 12px; }
.friend-item {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.friend-avatar { width: 46px; height: 46px; border-radius: 12px; font-size: 15px; }
.friend-item > div:nth-child(2) { min-width: 0; display: grid; gap: 5px; }
.friend-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.friend-item small { overflow: hidden; color: #929995; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.friend-add { min-width: 68px; height: 34px; }
.friend-add:disabled { color: #979e99; background: #ecefed; }
.friend-actions { display: flex; gap: 6px; }
.friend-actions button { height: 34px; }
.friend-actions .ghost { color: #727a75; background: #ecefed; }
.user-profile-card { width: min(390px,100%); text-align: center; }
.profile-hero-avatar {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  margin: 8px auto 18px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(145deg,#64bfff,#3479df);
  font-size: 36px;
  font-weight: 700;
  cursor: zoom-in;
}
.profile-hero-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-hero-avatar:not(.has-image) { cursor: default; }
.user-profile-card h2 { margin-bottom: 6px; }
.profile-account { margin: 0; color: #929995; font-size: 12px; }
.profile-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0 0;
}
.profile-details > div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #e5e9e6;
  border-radius: 11px;
  background: #f8faf9;
  text-align: left;
}
.profile-details span { color: #989f9b; font-size: 10px; }
.profile-details strong { color: #4f5852; font-size: 13px; font-weight: 600; }
.profile-bio { margin: 22px 0; padding: 14px; border-radius: 12px; color: #626a65; background: #f3f5f4; line-height: 1.55; text-align: left; }
.avatar-lightbox {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  background: rgba(9,12,10,.88);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
}
.avatar-lightbox img {
  max-width: min(720px,90vw);
  max-height: 86vh;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  object-fit: contain;
}
.avatar-lightbox > button {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.12);
  font-size: 26px;
}
.message-menu, .contact-menu {
  position: fixed;
  z-index: 160;
  width: 148px;
  padding: 6px;
  border: 1px solid rgba(20,28,23,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 38px rgba(20,28,23,.18);
  backdrop-filter: blur(14px);
}
.contact-menu { width: 196px; }
.message-menu button, .contact-menu button {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font-size: 12px;
}
.message-menu button:hover, .contact-menu button:hover { background: #f0f3f1; }
.message-menu button span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #1973d2;
  background: #e9f3ff;
  font-size: 10px;
  font-weight: 750;
}
.contact-menu button > span:first-child {
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 7px; color: #2377c9; background: #eaf4ff; font-size: 13px;
}
.contact-menu button.danger { color: #d64a45; }
.contact-menu button.danger span:first-child { color: #d64a45; background: #fff0ef; }
.profile-delete-friend {
  width: 100%; height: 48px; margin-top: 8px; border: 0; border-radius: 10px;
  color: #d64a45; background: #fff0ef;
  font-weight: 650;
}
.profile-delete-friend:hover { background: #ffe7e5; }
.profile-remark-friend {
  width: 100%;
  height: 42px;
  margin-top: 12px;
  border: 1px solid #d8e6f2;
  border-radius: 10px;
  color: #287ac8;
  background: #edf6ff;
  font-weight: 600;
}
.profile-remark-friend:hover { background: #e2f1ff; }
.remark-card { width: min(420px,100%); }
.remark-card p { margin: -6px 0 14px; color: var(--muted); font-size: 12px; }
.remark-card > input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid #d7e4f0;
  border-radius: 11px;
  background: #f9fcff;
}
.remark-card > input:focus { border-color: rgba(22,140,255,.5); box-shadow: 0 0 0 3px rgba(22,140,255,.09); }
.remark-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.remark-actions button { height: 38px; padding: 0 18px; border: 0; border-radius: 9px; background: #e9f0f6; }
.remark-actions #remarkSave { color: #fff; background: var(--green); }
.history-card {
  width: min(720px,100%);
  overflow: hidden;
}
.history-search {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid #d8e5f0;
  border-radius: 11px;
  background: #f6faff;
}
.history-search .ui-icon { width: 17px; height: 17px; color: #7490aa; }
.history-search input { min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; }
.history-search input:focus { box-shadow: none; }
.history-results {
  height: min(570px,62vh);
  margin-top: 14px;
  overflow-y: auto;
  padding: 20px 22px;
  border: 1px solid rgba(42,100,158,.1);
  border-radius: 13px;
  background: linear-gradient(145deg,#e8f1f9,#dce8f3);
  overscroll-behavior: contain;
}
.history-loading { padding: 10px; color: #8191a1; text-align: center; font-size: 12px; }
.history-message-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 15px 0;
}
.history-message-row.mine { flex-direction: row-reverse; }
.history-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg,#64bfff,#3479df);
  font-size: 12px;
  font-weight: 700;
}
.history-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.history-bubble {
  position: relative;
  max-width: min(68%,460px);
  padding: 9px 12px 7px;
  border: 1px solid rgba(49,91,132,.08);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(38,75,112,.1);
  color: #26384a;
  line-height: 1.58;
  white-space: pre-wrap;
  word-break: break-word;
}
.history-message-row.mine .history-bubble {
  background: var(--bubble);
  box-shadow: 0 5px 13px rgba(45,108,170,.13),inset 0 1px 0 rgba(255,255,255,.42);
}
.history-bubble::before {
  content: "";
  position: absolute;
  top: 11px;
  left: -7px;
  width: 8px;
  height: 12px;
  background: #fff;
  clip-path: polygon(100% 0,100% 100%,0 28%);
}
.history-message-row.mine .history-bubble::before {
  right: -7px;
  left: auto;
  background: var(--bubble);
  clip-path: polygon(0 0,100% 28%,0 100%);
}
.history-bubble time {
  display: block;
  margin-top: 5px;
  color: rgba(51,70,88,.58);
  text-align: right;
  font-size: 11px;
}
.history-recalled { color: #87929e; background: rgba(255,255,255,.56); font-style: italic; }
.history-image { display: block; max-width: 220px; max-height: 180px; border-radius: 9px; object-fit: cover; }
.history-image-bubble { padding: 0; overflow: hidden; background: transparent; }
.history-message-row.mine .history-image-bubble { background: transparent; }
.history-image-bubble::before { display: none; }
.history-image-bubble time { margin: 0; padding: 4px 7px; background: rgba(255,255,255,.84); }
.history-file { display: flex; align-items: center; gap: 9px; color: #347bbb; }
.history-file > span { display: grid; gap: 2px; }
.history-file small { color: #8b99a7; font-size: 10px; }
.history-file .ui-icon { width: 18px; height: 18px; }
.ai-draft-row { display: flex; justify-content: center; margin: 14px 0; animation: message-in .18s ease-out both; }
.ai-draft-card {
  width: min(520px,88%);
  overflow: hidden;
  border: 1px solid rgba(39,123,214,.18);
  border-radius: 14px;
  background: rgba(248,252,255,.94);
  box-shadow: 0 8px 24px rgba(34,104,180,.08);
}
.ai-draft-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-bottom: 1px solid rgba(39,123,214,.1); }
.ai-draft-card header strong { color: #176fc9; font-size: 12px; }
.ai-draft-card header span { color: #8b9bab; font-size: 10px; }
.ai-draft-card p { margin: 0; padding: 14px; color: #34404a; line-height: 1.65; white-space: pre-wrap; }
.ai-draft-card footer { display: flex; justify-content: flex-end; gap: 7px; padding: 0 12px 12px; }
.ai-draft-card footer button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; color: #fff; background: #1688f8; font-size: 11px; }
.ai-draft-card footer .ghost { color: #68747e; background: #e9eef1; }
.ai-draft-card.error { border-color: rgba(207,75,75,.2); background: #fffafa; }
.ai-draft-card.error header strong { color: #c24b4b; }
.confirm-layer {
  position: fixed;
  z-index: 240;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18,24,20,.36);
  backdrop-filter: blur(4px);
}
.confirm-card {
  width: min(360px,100%);
  padding: 25px 24px 20px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 18px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 26px 70px rgba(15,24,19,.24);
  animation: confirm-in .16s ease-out both;
}
.confirm-card h3 { margin: 0 0 10px; color: #202521; font-size: 17px; font-weight: 680; }
.confirm-card p { margin: 0; color: #737b76; font-size: 13px; line-height: 1.65; }
.confirm-card > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}
.confirm-card.has-alternate { width: min(430px,100%); }
.confirm-card.has-alternate > div { grid-template-columns: .8fr 1.1fr 1.1fr; }
.confirm-card button.confirm-alternate { color: #176fc9; background: #e7f2fd; }
.confirm-card button.confirm-alternate:hover { background: #d9eafb; }.confirm-card button {
  height: 40px;
  border: 0;
  border-radius: 10px;
  color: #5e6761;
  background: #edf0ee;
  font-size: 13px;
  font-weight: 600;
}
.confirm-card button:not(.danger):hover { background: #e3e7e4; }
.confirm-card button.danger { color: #fff; background: #e65353; }
.confirm-card button.danger:hover { background: #d74747; }
@keyframes confirm-in {
  from { opacity: 0; transform: scale(.96) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 860px) {
  .shell { height: 100vh; height: 100dvh; min-height: 0; padding: 0; }
  .auth { grid-template-columns: 1fr; gap: 28px; padding: 26px; }
  .brand { text-align: center; }
  .brand .logo { margin: auto; }
  .brand h1 { margin-top: 18px; font-size: 48px; }
  .brand p { font-size: 16px; }
  .auth-card { width: min(410px,100%); margin: auto; }
  .chat-app {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    grid-template-columns: minmax(0,1fr);
    border: 0;
    border-radius: 0;
  }
  .app-rail { display: none; }
  .conversation { display: none; }
  .chat-app.chat-open .sidebar { display: none; }
  .chat-app.chat-open .conversation { display: block; }
  .side-head { padding: 16px 14px 12px; }
  .chat-panel { height: 100vh; height: 100dvh; grid-template-rows: 88px minmax(0,1fr) auto; }
  .chat-head { height: 88px; min-height: 88px; padding: 8px 12px; }
  .back { display: block; }
  .messages { padding: 20px 12px; }
  .msg-avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
  .bubble { max-width: 78%; }
  .compose-area { background: #f3f5f4; }
  .composer {
    min-height: 0;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 9px 10px max(9px, env(safe-area-inset-bottom));
  }
  .compose-tools { flex: 0 0 auto; gap: 1px; }
  .tool-btn { width: 34px; height: 42px; }
  .composer textarea {
    width: auto;
    min-width: 0;
    min-height: 42px;
    max-height: 100px;
    flex: 1;
    padding: 10px;
    border: 1px solid #dfe3e0;
    border-radius: 13px;
    background: #fff;
  }
  .message-field { flex: 1; align-self: stretch; }
  .message-field textarea { width: 100%; }
  .send { width: 54px; height: 42px; flex: 0 0 auto; }
  .emoji-panel {
    right: 10px;
    left: 10px;
    width: auto;
    grid-template-columns: repeat(7,minmax(36px,1fr));
    padding: 12px;
  }
  .pending-attachment { max-width: calc(100% - 20px); margin: 9px 10px 0; }
  .image-message img { max-width: 100%; max-height: 290px; }
  .file-message { min-width: min(225px,65vw); }
  .batch-bar { right: 10px; bottom: 72px; }
}

@media (max-width: 430px) {
  .auth { padding: 20px; }
  .brand .logo { width: 56px; height: 56px; border-radius: 17px; }
  .brand h1 { font-size: 40px; }
  .auth-card { padding: 22px; border-radius: 18px; }
  .chat-head .avatar { display: none; }
  .chat-head > div:last-child { margin-left: 2px; }
  .message-row { gap: 8px; }
  .bubble { max-width: 80%; }
  .compose-tools .tool-btn { width: 30px; }
  .send { width: 50px; }
}

/* 飞享IM · sky-tech authentication */
.is-auth {
  --auth-blue: #1688f8;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(242,248,255,.05), rgba(247,251,255,.22)),
    url("assets/feixiang-login-tech.png") center center / cover no-repeat;
}
.is-auth::before,
.is-auth::after {
  content: "";
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.is-auth::before {
  top: -18vw;
  right: -10vw;
  width: 48vw;
  height: 48vw;
  background: radial-gradient(circle, rgba(82,174,255,.18), rgba(82,174,255,0) 68%);
  animation: auth-glow-one 14s ease-in-out infinite alternate;
}
.is-auth::after {
  bottom: -24vw;
  left: 28vw;
  width: 52vw;
  height: 52vw;
  background: radial-gradient(circle, rgba(74,214,255,.14), rgba(74,214,255,0) 70%);
  animation: auth-glow-two 18s ease-in-out infinite alternate;
}
.is-auth .shell { position: relative; z-index: 1; }
.is-auth .auth {
  width: min(1220px,100%);
  grid-template-columns: minmax(0,1fr) 430px;
  gap: 70px;
}
.is-auth .auth-card { grid-column: 2; }
.is-auth .brand {
  align-self: end;
  width: fit-content;
  margin: 0 0 26px 6px;
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 20px;
  background: rgba(255,255,255,.48);
  box-shadow: 0 14px 40px rgba(50,110,177,.1);
  backdrop-filter: blur(14px);
  animation: auth-rise .7s cubic-bezier(.2,.8,.2,1) both;
}
.is-auth .brand .logo { display: none; }
.is-auth .brand h1 {
  margin: 0 0 6px;
  color: #126ed0;
  font-size: 38px;
  font-weight: 760;
  letter-spacing: -.05em;
}
.is-auth .brand p { color: #547594; font-size: 15px; }
.is-auth .auth-card {
  padding: 34px 36px 30px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  box-shadow:
    0 30px 80px rgba(36,98,166,.16),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(22px) saturate(120%);
  animation: auth-card-in .68s cubic-bezier(.2,.8,.2,1) both;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.login-brand > img {
  width: 58px;
  height: 58px;
  display: block;
  border-radius: 13px;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.login-brand > div { display: grid; gap: 3px; }
.login-brand strong { color: #152b42; font-size: 24px; letter-spacing: -.03em; }
.login-brand small { color: #8aa0b5; font-size: 11px; }
.is-auth .tabs { margin-bottom: 24px; background: #eef5fc; }
.is-auth .tab { color: #7890a7; }
.is-auth .tab.active { color: #1678df; box-shadow: 0 3px 10px rgba(48,117,188,.09); }
.is-auth .auth-card label { color: #49627a; }
.is-auth .auth-card input {
  border-color: #dae7f3;
  background: rgba(249,252,255,.92);
}
.is-auth .auth-card input:focus {
  border-color: rgba(22,136,248,.58);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(22,136,248,.08);
}
.is-auth .primary {
  background: linear-gradient(90deg,#1599f5,#2c67f4);
  box-shadow: 0 10px 24px rgba(32,113,242,.2);
}
.is-auth .primary:hover { background: linear-gradient(90deg,#118be4,#245de5); }
@keyframes auth-card-in {
  from { opacity: 0; transform: translate3d(28px,10px,0) scale(.985); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes auth-rise {
  from { opacity: 0; transform: translate3d(0,14px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes auth-glow-one {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(-3vw,4vh,0) scale(1.08); }
}
@keyframes auth-glow-two {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(4vw,-3vh,0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .is-auth::before, .is-auth::after, .is-auth .brand, .is-auth .auth-card { animation: none !important; }
}
@media (max-width: 860px) {
  .is-auth { background-position: 36% center; }
  .is-auth .auth { grid-template-columns: 1fr; gap: 18px; }
  .is-auth .auth-card { grid-column: 1; }
  .is-auth .brand { align-self: auto; margin: 0 auto; padding: 12px 18px; text-align: center; }
  .is-auth .brand h1 { font-size: 28px; }
  .is-auth .brand p { display: none; }
  .is-auth .auth-card { padding: 28px; }
}
@media (max-width: 480px) {
  .is-auth .shell { overflow-y: auto; padding: 18px; }
  .is-auth .brand { display: none; }
  .is-auth .auth-card { padding: 24px 20px; border-radius: 20px; }
  .login-brand { margin-bottom: 22px; }
}
.captcha-field{display:grid;grid-template-columns:1fr 126px;gap:10px;align-items:center}
.captcha-field img{width:126px;height:44px;border:1px solid #d9e6f3;border-radius:12px;background:#f4f9ff;cursor:pointer;object-fit:cover}
.auth-link,.auth-back{border:0;background:transparent;color:#2688db;cursor:pointer;font:inherit}
.auth-link{display:block;margin:12px auto 0}
.auth-back{padding:0;margin:0 0 18px}
.auth-reset h3,.auth-result h3{margin:0 0 8px;color:#183550;font-size:20px}
.auth-reset label{display:grid;gap:7px;margin:14px 0;color:#4d6680;font-size:14px}
.auth-reset input{height:46px;border:1px solid #d9e6f3;border-radius:12px;padding:0 14px;font:inherit;outline:0}
.auth-reset input:focus{border-color:#55acec;box-shadow:0 0 0 3px rgba(64,161,229,.12)}
.auth-result{text-align:center;padding:12px 0 4px}
.auth-result p{color:#6d8195;line-height:1.6;margin:0 0 18px}
.recovery-code{display:block;width:100%;padding:13px;border:1px dashed #52a9e8;border-radius:12px;background:#edf8ff;color:#0878c7;font:700 18px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1px;cursor:pointer;margin:0 0 16px}
.security-entry{width:100%;height:43px;margin-top:10px;border:1px solid #cfe0ee;border-radius:12px;background:#f7fbfe;color:#347aa9;font:inherit;cursor:pointer}
.security-card{width:min(680px,calc(100vw - 28px));max-height:min(820px,calc(100vh - 36px));overflow:auto}
.security-card>h2{margin-bottom:16px}
.security-section{padding:17px 0;border-top:1px solid #e6eef5}
.security-section:first-of-type{border-top:0}
.security-section h3{margin:0 0 9px;color:#203c55;font-size:15px}
.security-section p{margin:0 0 12px;color:#71869a;font-size:13px;line-height:1.5}
.security-form{display:grid;grid-template-columns:1fr 1fr auto;gap:9px}
.security-inline{display:grid;grid-template-columns:1fr auto;gap:9px}
.security-form input,.security-inline input{min-width:0;height:40px;border:1px solid #d5e2ed;border-radius:10px;padding:0 12px;font:inherit;outline:0}
.security-form input:focus,.security-inline input:focus{border-color:#54a9e7;box-shadow:0 0 0 3px rgba(70,158,220,.1)}
.security-form button,.security-inline button,.security-heading button,.session-item button,.danger-zone>button{border:0;border-radius:10px;padding:0 15px;min-height:40px;background:#218ddd;color:#fff;font:inherit;cursor:pointer}
.security-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.security-heading h3{margin-bottom:4px}
.security-heading p{margin:0}
.session-list{display:grid;gap:8px;margin-top:12px}
.session-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border:1px solid #e0eaf2;border-radius:12px;background:#f9fcfe}
.session-item>div{min-width:0;display:grid;gap:4px}
.session-item strong{color:#263f55;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-item strong em{display:inline-block;margin-left:7px;padding:2px 6px;border-radius:8px;background:#dff3ff;color:#1682c8;font:normal 11px/1.3 inherit}
.session-item span,.session-item small{color:#71879a;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-item button{min-height:32px;background:#eaf4fb;color:#3181b8}
.danger-zone h3{color:#c64f55}
.danger-zone>button,.security-form button.danger{background:#fff0f0;color:#c8444b;border:1px solid #f0cacc}
.danger-zone .security-form{margin-top:11px}
@media(max-width:650px){
  .captcha-field{grid-template-columns:1fr 112px}
  .captcha-field img{width:112px}
  .security-form{grid-template-columns:1fr}
  .security-inline{grid-template-columns:1fr}
  .security-heading{align-items:flex-start}
}

/* 飞享IM H5 */
@media (max-width: 860px) {
  html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
  .shell{width:100%;height:100%;height:var(--h5-height,100dvh);overflow:hidden;overscroll-behavior:none}
  body.is-chat .shell{position:fixed;top:var(--h5-offset-top,0px);right:0;bottom:auto;left:0}
  .is-auth .shell{display:flex;align-items:center;justify-content:center;padding:14px}
  .is-auth .auth{width:100%;max-width:100%;display:block;padding:0}
  .is-auth .auth-card{width:min(100%,400px);margin:0 auto;background:rgba(255,255,255,.96)}
  body{-webkit-tap-highlight-color:transparent}
  button{touch-action:manipulation}
  .chat-app{position:relative;height:100%;grid-template-rows:minmax(0,1fr) calc(62px + env(safe-area-inset-bottom));background:#edf5fb}
  .sidebar{grid-row:1;min-height:0;border:0}
  .side-head{padding:calc(14px + env(safe-area-inset-top)) 16px 12px;background:rgba(239,247,253,.94);backdrop-filter:blur(18px)}
  .side-title{margin-bottom:12px}
  .h5-page-brand{display:flex;align-items:center;gap:10px}
  .h5-page-brand>img{width:38px;height:38px;display:block;border-radius:12px;object-fit:cover;mix-blend-mode:multiply;filter:drop-shadow(0 5px 9px rgba(32,111,171,.13))}
  .h5-page-brand>div{display:grid;gap:1px}
  .h5-page-brand strong{font-size:20px;color:#18334d;line-height:1.15}
  .h5-page-brand small{display:block;color:#86a0b5;font-size:10px;letter-spacing:.08em}
  .add-contact{width:38px;height:38px;border-radius:12px;color:#187fc8;background:#dceffc}
  .search{height:44px;border-radius:14px;background:#fff;box-shadow:0 3px 14px rgba(40,93,137,.06)}
  .contacts{padding-bottom:8px;overscroll-behavior:contain}
  .contact{min-height:76px;padding:11px 15px;border-radius:0;border-bottom:1px solid rgba(64,105,137,.07);transition:background .12s,transform .12s}
  .contact:active{background:#dcecf8;transform:scale(.992)}
  .contact.active{color:#fff;background:linear-gradient(135deg,#2298ed,#2478e8);box-shadow:0 8px 22px rgba(34,126,221,.2)}
  .contact.active .contact-copy strong{color:#fff}
  .contact.active .contact-copy small,
  .contact.active time>span{color:rgba(255,255,255,.78)}
  .contact.active .pinned-label{color:#fff;background:rgba(255,255,255,.18)}
  .contact.active .contact-muted{color:rgba(255,255,255,.9)}
  .contact.active .unread-dot{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
  .contact .avatar{width:52px;height:52px;border-radius:16px;box-shadow:0 5px 14px rgba(33,82,120,.12)}
  .contact-copy strong{font-size:16px}
  .contact-copy small{margin-top:6px;font-size:13px}
  .contact time>span{font-size:12px}
  .contact .unread-badge,.contact .unread-badge svg{width:24px;height:24px}
  .contact .unread-badge circle{fill:#ff4054;stroke:#fff;stroke-width:1.7}
  .contact .unread-badge text{fill:#fff;font-size:11px;font-weight:750}
  .h5-new-friends{display:block;flex:0 0 auto;padding:10px 10px 5px;background:#edf5fb}
  .h5-new-friend-card,.h5-new-friends-entry{width:100%;min-height:66px;display:flex;align-items:center;gap:10px;padding:9px 11px;border:0;border-radius:15px;background:#fff;box-shadow:0 5px 18px rgba(32,75,109,.06);text-align:left}
  .h5-new-friend-card>div,.h5-new-friends-entry>span:nth-child(2){min-width:0;display:grid;gap:4px;flex:1}
  .h5-new-friend-card strong,.h5-new-friends-entry strong{overflow:hidden;color:#203649;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
  .h5-new-friend-card small,.h5-new-friends-entry small{overflow:hidden;color:#8b9aa7;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
  .h5-new-friend-avatar{width:43px;height:43px;display:grid;place-items:center;flex:0 0 43px;overflow:hidden;border-radius:13px;color:#fff;background:linear-gradient(145deg,#53b8f9,#2b7ddd);font-weight:700}
  .h5-new-friend-avatar img{width:100%;height:100%;object-fit:cover}
  .h5-new-friend-card>button{height:32px;flex:0 0 auto;padding:0 10px;border:0;border-radius:9px;font-size:12px;font-weight:600}
  .h5-new-friend-card>button.accept{color:#fff;background:#218de0}
  .h5-new-friend-card>button.ignore{color:#6f7f8c;background:#edf2f5}
  .h5-new-friend-card>button:disabled{opacity:.55}
  .h5-new-friends-icon{width:43px;height:43px;display:grid!important;place-items:center;flex:0 0 43px!important;border-radius:13px;color:#fff;background:linear-gradient(145deg,#44b783,#2d9c69)}
  .h5-new-friends-icon .ui-icon{width:23px;height:23px}
  .h5-request-avatars{display:flex!important;flex:0 0 auto!important;padding-left:12px}
  .h5-request-avatars .h5-new-friend-avatar{width:29px;height:29px;flex:0 0 29px;margin-left:-10px;border:2px solid #fff;border-radius:9px;font-size:9px}
  .h5-new-friends-entry>b{min-width:20px;height:20px;padding:0 5px;border-radius:10px;color:#fff;background:#ff4357;text-align:center;font-size:11px;line-height:20px}
  .h5-new-friends-entry>.arrow{width:15px;height:15px;flex:0 0 auto;color:#a8b4bd}
  .h5-new-friends-entry:active{background:#f3f7f9}
  .h5-nav{grid-row:2;display:grid;grid-template-columns:repeat(4,1fr);padding:5px 10px max(5px,env(safe-area-inset-bottom));border-top:1px solid rgba(36,86,128,.1);background:rgba(250,253,255,.97);box-shadow:0 -10px 28px rgba(32,76,112,.08);backdrop-filter:blur(20px);z-index:20}
  .h5-nav>button{position:relative;display:grid;place-items:center;align-content:center;gap:3px;border:0;border-radius:15px;color:#8295a6;background:transparent;font-size:11px;transition:color .15s,background .15s,transform .12s}
  .h5-nav>button:active{transform:scale(.92)}
  .h5-nav .ui-icon{width:23px;height:23px}
  .h5-nav>button.active{color:#1688e2;background:linear-gradient(180deg,rgba(55,166,239,.1),rgba(55,166,239,.025))}
  .h5-icon-wrap{position:relative;display:grid}
  .h5-message-badge{position:absolute;z-index:3;top:-9px;right:-13px;width:25px;height:25px;display:block;pointer-events:none}
  .h5-message-badge svg{width:25px;height:25px;display:block;overflow:visible}
  .h5-message-badge circle{fill:#ff4054;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 2px 5px rgba(224,45,66,.42))}
  .h5-message-badge text{fill:#fff;stroke:none;text-anchor:middle;dominant-baseline:middle;font:700 10.5px "Segoe UI",sans-serif}
  .h5-icon-wrap i{position:absolute;top:-3px;right:-6px;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#ff4056;box-shadow:0 0 8px rgba(255,64,86,.75)}
  .h5-mini-avatar{width:24px;height:24px;display:grid;place-items:center;overflow:hidden;border-radius:8px;color:#fff;background:linear-gradient(145deg,#4eb7fb,#2577dc);font-size:11px;font-weight:700}
  .h5-mini-avatar img{width:100%;height:100%;object-fit:cover}
  .h5-logout{display:block;width:100%;height:44px;margin-top:22px;border:1px solid #e1e7ec;border-radius:12px;color:#b9565d;background:#f8fafb;font-weight:600}
  .h5-section{grid-row:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#f2f5f7}
  .h5-section-head{flex:0 0 auto;padding:calc(18px + env(safe-area-inset-top)) 18px 14px;background:rgba(248,251,253,.96);border-bottom:1px solid rgba(46,86,118,.07)}
  .h5-section-head h1{margin:0;color:#172d40;font-size:23px;line-height:1.2}
  .h5-section-body{min-height:0;flex:1;overflow-y:auto;padding:14px 12px calc(20px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  .h5-profile-hero{width:100%;min-height:108px;display:flex;align-items:center;gap:15px;padding:17px;border:0;border-radius:17px;background:#fff;box-shadow:0 6px 24px rgba(30,67,97,.06);text-align:left}
  .h5-profile-avatar{width:68px;height:68px;display:grid;place-items:center;flex:0 0 68px;overflow:hidden;border-radius:18px;color:#fff;background:linear-gradient(145deg,#4db7fb,#2879df);font-size:23px;font-weight:700;box-shadow:0 8px 20px rgba(42,116,181,.17)}
  .h5-profile-avatar img{width:100%;height:100%;object-fit:cover}
  .h5-profile-copy{min-width:0;display:grid;gap:8px;flex:1}
  .h5-profile-copy strong{overflow:hidden;color:#172c3f;text-overflow:ellipsis;white-space:nowrap;font-size:21px}
  .h5-profile-copy small{overflow:hidden;color:#7c8f9f;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
  .h5-menu-group{margin-top:14px;overflow:hidden;border-radius:15px;background:#fff;box-shadow:0 5px 20px rgba(31,68,98,.045)}
  .h5-menu-group>button{width:100%;min-height:58px;display:flex;align-items:center;gap:12px;padding:8px 14px;border:0;border-bottom:1px solid #edf1f4;background:#fff;text-align:left;font-size:15px}
  .h5-menu-group>button:last-child{border-bottom:0}
  .h5-menu-group>button:active{background:#f1f5f7}
  .h5-menu-group>button>span:nth-child(2){flex:1;color:#243747}
  .h5-menu-group>button>small{color:#9aa8b3;font-size:12px}
  .h5-menu-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:10px;color:#fff}
  .h5-menu-icon .ui-icon{width:19px;height:19px}
  .h5-menu-icon.blue{background:#3c9eef}.h5-menu-icon.green{background:#35b77b}.h5-menu-icon.purple{background:#8474e8}.h5-menu-icon.amber{background:#efa943}.h5-menu-icon.gray{background:#7d8c99}
  .h5-section .arrow,.h5-settings-list .ui-icon{width:17px;height:17px;flex:0 0 auto;color:#abb7c0}
  .h5-settings-list{overflow:hidden;border:1px solid #e8edf1;border-radius:14px;background:#fff}
  .h5-settings-list>button{width:100%;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border:0;border-bottom:1px solid #edf1f4;background:#fff;font-size:15px}
  .h5-settings-list>button:last-child{border-bottom:0}
  .h5-settings-list>button:active{background:#f2f5f7}
  .conversation{position:absolute;inset:0;z-index:30;display:block!important;height:100%;visibility:hidden;transform:translate3d(100%,0,0);transition:transform .26s cubic-bezier(.22,.8,.24,1),visibility 0s linear .26s;will-change:transform;box-shadow:-14px 0 34px rgba(30,72,107,.13);touch-action:pan-y}
  .chat-app.chat-open{grid-template-rows:minmax(0,1fr)}
  .chat-app.chat-open .sidebar{display:flex}
  .chat-app.chat-open .h5-nav{display:none}
  .chat-app.chat-open .conversation{grid-row:1;height:100%;visibility:visible;transform:translate3d(var(--h5-swipe-x,0px),0,0);transition:transform .26s cubic-bezier(.22,.8,.24,1),visibility 0s}
  .chat-panel{height:100%;grid-template-rows:calc(56px + env(safe-area-inset-top)) minmax(0,1fr) auto}
  .chat-head{position:relative;height:calc(56px + env(safe-area-inset-top));min-height:calc(56px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) 58px 0;border-bottom:1px solid rgba(40,88,127,.08);background:rgba(248,252,255,.98);box-shadow:0 3px 12px rgba(35,75,108,.045)}
  .back{position:absolute;bottom:2px;left:5px;width:44px;height:52px;margin:0;color:#263d50;font-size:27px}
  .chat-head .avatar{display:none!important}
  .peer-heading{width:100%;min-width:0;display:block!important;grid-template-columns:none!important;grid-template-rows:none!important;text-align:center;overflow:hidden}
  .peer-heading strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;color:#172e43;font-size:17px;font-weight:700;line-height:56px}
  .peer-heading .h5-chat-subtitle{display:none!important}
  .peer-heading>span,.peer-heading>.peer-account{display:none!important}
  .history-entry{position:absolute;right:7px;bottom:7px;width:42px;height:42px;padding:0;display:grid;place-items:center;border:0;border-radius:12px;color:#3978aa;background:transparent;box-shadow:none}
  .history-entry:active{background:#e5f1fa}
  .history-entry span{display:none}
  .history-entry .ui-icon{width:21px;height:21px}
  .back:active,.history-entry:active,.tool-btn:active,.send:active{transform:scale(.9)}
  .messages{padding:16px 11px max(18px,env(safe-area-inset-bottom));overscroll-behavior:contain}
  .message-row{width:100%;max-width:100%;margin:12px 0;gap:8px}
  .msg-avatar{width:36px;height:36px;flex:0 0 36px;border-radius:11px}
  .bubble{min-width:0;max-width:calc(76% - 4px);flex:0 1 auto;font-size:15px;line-height:1.55}
  .bubble:not(.attachment-bubble){border-radius:14px}
  .text-bubble{padding:10px 13px;border-radius:14px}
  .bubble time{margin-top:3px;font-size:10px}
  .bubble.emoji-only{min-width:44px;min-height:44px;padding:9px 11px 7px;text-align:center;font-size:20px;line-height:1.2}
  .bubble.emoji-only time{display:none}
  .quoted-message{max-width:min(62vw,260px);padding:7px 8px;margin:-2px 0 7px}
  .quoted-message span{display:block;max-width:100%;font-size:12px}
  .attachment-bubble{max-width:calc(100% - 52px)}
  .image-message img{width:auto!important;max-width:min(72vw,320px)!important;max-height:44vh!important;height:auto!important;object-fit:contain}
  .image-bubble.has-quote{max-width:min(76vw,330px)}
  .image-bubble.has-quote .image-message img{max-width:100%!important}
  .file-message{width:min(66vw,280px);min-width:0}
  .composer{padding:7px 8px max(8px,env(safe-area-inset-bottom));gap:5px;background:rgba(239,246,251,.97)}
  body.is-chat.h5-keyboard-open .composer{padding-bottom:7px}
  .compose-tools{gap:0}
  .tool-btn{width:38px;height:44px}
  .message-field{overflow:hidden;border:1px solid #d8e3ec;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(35,77,110,.04);transition:border-color .15s,box-shadow .15s}
  .message-field:focus-within{border-color:#70b7eb;box-shadow:0 0 0 3px rgba(43,151,229,.1)}
  .composer textarea{min-height:44px;max-height:112px;padding:10px 34px 10px 12px;border:0!important;border-radius:0;background:transparent;font-size:16px;box-shadow:none!important}
  .composer textarea:focus{border:0!important;box-shadow:none!important}
  .clear-message{top:8px;right:6px}
  .send{width:54px;height:44px;border-radius:12px}
  .emoji-panel{bottom:calc(64px + env(safe-area-inset-bottom));max-height:min(310px,42vh);overflow-y:auto;grid-template-columns:repeat(7,1fr);border-radius:18px}
  .pending-attachment,.reply-preview{margin-left:8px;margin-right:8px}
  .modal{align-items:end;padding:0;background:rgba(17,35,52,.42)}
  .modal-card{width:100%!important;max-width:none;max-height:calc(92dvh - env(safe-area-inset-top));margin:0;padding:22px 18px max(20px,env(safe-area-inset-bottom));border-radius:22px 22px 0 0;overflow-y:auto;animation:h5-sheet-in .22s ease-out}
  .modal-card::before{content:"";display:block;width:38px;height:4px;margin:-10px auto 15px;border-radius:3px;background:#d5dde4}
  input,textarea,select,
  .modal-card input,.modal-card textarea,.modal-card select,
  .auth-card input,.auth-reset input,.composer textarea{font-size:16px!important}
  .history-card{height:calc(94dvh - env(safe-area-inset-top));display:flex;flex-direction:column}
  .history-results{min-height:0;flex:1}
  .avatar-lightbox{padding:16px}
  .message-menu,.contact-menu{position:fixed!important;right:10px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;left:10px!important;top:auto!important;width:auto;grid-template-columns:repeat(3,1fr);padding:10px;border-radius:18px}
  .message-menu button,.contact-menu button{min-height:54px;justify-content:center}
  .confirm-layer{align-items:end;padding:12px 12px max(12px,env(safe-area-inset-bottom))}
  .confirm-card{width:100%;border-radius:20px}
}
@media (max-width: 380px) {
  .compose-tools .tool-btn{width:34px}
  .send{width:50px}
  .emoji-panel{grid-template-columns:repeat(6,1fr)}
  .message-menu,.contact-menu{grid-template-columns:repeat(2,1fr)}
}
@keyframes h5-sheet-in{from{opacity:.5;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}