/* 2.0 — Liquid Glass. Presentation only; shared layout constraints remain intact. */
:root {
  color-scheme: light dark;
  --bg: #eaf0f8;
  --panel: rgba(255, 255, 255, .66);
  --panel-soft: rgba(255, 255, 255, .58);
  --text: #1b263b;
  --muted: #5c6b83;
  --line: rgba(114, 139, 171, .15);
  --primary: #007aff;
  --primary-dark: #0064dc;
  --accent: #007aff;
  --danger: #ce3045;
  --glass-border: rgba(255, 255, 255, .8);
  --glass-shadow: 0 8px 28px rgba(56, 82, 124, .08), inset 0 1px 0 rgba(255, 255, 255, .96);
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse at 5% 10%, rgba(175, 217, 255, .8), transparent 48%),
    radial-gradient(ellipse at 98% 28%, rgba(205, 196, 248, .55), transparent 48%),
    radial-gradient(ellipse at 38% 100%, rgba(196, 235, 224, .58), transparent 50%),
    linear-gradient(145deg, #eef4fb, #e9ecf5 62%, #e9f3f1);
  background-attachment: fixed;
}
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { transition: background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
::selection { background: rgba(0, 122, 255, .2); }
.chat-shell { padding: 14px; gap: 12px; grid-template-columns: 304px minmax(0, 1fr); }
.sidebar, .main-chat {
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  box-shadow: 0 16px 55px rgba(58, 78, 113, .08), inset 0 1px 0 #fff;
}
.sidebar {
  background: linear-gradient(155deg, rgba(255,255,255,.68), rgba(255,255,255,.38));
  -webkit-backdrop-filter: blur(34px) saturate(150%);
  backdrop-filter: blur(34px) saturate(150%);
}
.main-chat { background: rgba(255,255,255,.28); }
.profile, .chat-header {
  height: 80px; min-height: 80px;
  padding: 18px;
  border-bottom: 0;
}
.profile { z-index: 3; }
.chat-header {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.chat-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -12px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05) 70%, transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
.chat-header[data-overflow="true"]::before { opacity: 1; }
.profile strong, .chat-header h2 { font-size: 15px; font-weight: 650; letter-spacing: -.25px; }
.profile-role, .chat-header p { font-size: 12px; color: var(--muted); }
.profile-edit { border-radius: 16px; }
.profile-edit:hover { background: rgba(255,255,255,.23); }
.user-avatar { border: 1px solid rgba(255,255,255,.94); box-shadow: 0 3px 10px rgba(66,91,131,.08), inset 0 1px 2px #fff; }
.icon-button, .add-member {
  border-radius: 50%; border: 1px solid var(--glass-border);
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.44));
  box-shadow: var(--glass-shadow); color: #526783;
}
.icon-button:hover, .add-member:hover { background: rgba(255,255,255,.96); color: var(--primary); }
.icon-button:active, .add-member:active, .tool-icon:active { transform: scale(.94); }
.tool-row {
  margin: 8px 18px 4px; padding: 5px; gap: 5px;
  border: 1px solid var(--glass-border); border-radius: 999px;
  background: linear-gradient(160deg, rgba(255,255,255,.64), rgba(255,255,255,.28));
  box-shadow: var(--glass-shadow);
}
.tool-icon { height: 39px; border-radius: 999px; color: #61748b; }
.tool-icon svg { width: 21px; height: 21px; stroke-width: 1.65; }
.tool-icon:hover { background: rgba(255,255,255,.45); }
.tool-icon[aria-pressed="true"] {
  color: #0074ed;
  background: linear-gradient(150deg, rgba(255,255,255,.98), rgba(238,247,255,.72));
  box-shadow: 0 2px 8px rgba(64,102,149,.1), inset 0 1px 0 #fff;
}
.tool-badge { top: 0; right: 5px; border: 1px solid rgba(255,255,255,.85); }
.panel-heading { min-height: 48px; padding: 8px 22px; }
.panel-heading h2 { color: #60728b; font-size: 12px; font-weight: 600; }
.panel-heading h2 span { display: inline-block; background: rgba(255,255,255,.6); padding: 1px 7px; border-radius: 9px; font-size: 11px; }
.conversation-list, .user-list { gap: 5px; padding: 0 10px 14px; scrollbar-width: thin; scrollbar-color: rgba(105,125,151,.25) transparent; }
.conversation, .user-item { border: 1px solid transparent; border-radius: 19px; }
.conversation { min-height: 68px; padding: 10px; }
.conversation-copy strong { font-size: 14px; font-weight: 600; }
.conversation-copy small { font-size: 12px; line-height: 1.5; color: #60728a; }
.conversation.active {
  background: linear-gradient(130deg, rgba(255,255,255,.84), rgba(224,240,255,.7));
  border-color: rgba(255,255,255,.95);
  box-shadow: 0 4px 14px rgba(61,101,148,.07), inset 0 1px 0 #fff;
}
.conversation:hover, .user-item:hover { background-color: rgba(255,255,255,.46); }
.user-item { min-height: 52px; padding: 10px 12px; font-size: 14px; }
.conversation b { min-width: 20px; height: 20px; font-size: 11px; background: #007aff; }
.messages { padding: 24px 26px; gap: 18px; scrollbar-width: thin; scrollbar-color: rgba(105,125,151,.25) transparent; }
.message { max-width: min(660px, 88%); gap: 9px; }
.message > .user-avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: 24px; }
.message-meta { margin: 0 0 6px 5px; font-size: 11px; line-height: 1.4; color: #617087; }
.message.mine .message-meta { margin-right: 5px; }
.bubble {
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.9); border-radius: 21px;
  border-top-left-radius: 7px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.7));
  color: #223148; font-size: 14px; line-height: 1.65;
  box-shadow: 0 4px 14px rgba(65,91,130,.045), inset 0 1px 0 #fff;
}
.message.mine .bubble {
  color: #fff; border-color: rgba(255,255,255,.42);
  border-radius: 21px; border-top-right-radius: 7px;
  background: linear-gradient(155deg, #0874e8, #0064d9);
  box-shadow: 0 5px 16px rgba(0,112,235,.16), inset 0 1px 0 rgba(255,255,255,.35);
}
.composer {
  margin: 8px 18px 18px; padding: 7px; gap: 7px;
  border: 1px solid rgba(255,255,255,.94); border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.83), rgba(255,255,255,.51));
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 8px 28px rgba(67,100,142,.1), inset 0 1px 0 #fff;
}
.composer textarea {
  border: 0; background: transparent; border-radius: 23px;
  padding: 12px 14px; font-size: 14px; color: var(--text);
}
.composer textarea:focus { box-shadow: none; }
.composer { position: relative; z-index: 2; grid-template-columns: 38px minmax(0, 1fr) auto; }
.emoji-toggle { width: 38px; height: 38px; align-self: center; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; color: var(--muted); border-radius: 50%; }
.emoji-toggle:hover, .emoji-toggle[aria-expanded="true"] { color: var(--primary); background: var(--panel-soft); }
.emoji-toggle svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.emoji-picker {
  position: absolute; bottom: calc(100% + 10px); left: 0;
  width: min(340px, 100%); max-height: min(290px, calc(100dvh - 180px));
  overflow-y: auto; overscroll-behavior: contain; padding: 12px;
  background: #f3f7fd; color: var(--text); border: 1px solid var(--glass-border);
  border-radius: 22px; box-shadow: 0 8px 30px rgba(34, 57, 89, .15);
}
.emoji-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; font-size: 12px; color: var(--muted); }
.emoji-heading button { width: 28px; height: 28px; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.emoji-grid button { min-width: 0; padding: 7px 0; border-radius: 10px; background: transparent; font-size: 24px; line-height: 1.2; }
.emoji-grid button:hover, .emoji-heading button:hover { background: var(--panel-soft); }
.composer:focus-within { border-color: rgba(134,186,255,.9); box-shadow: 0 8px 28px rgba(67,100,142,.1), 0 0 0 3px rgba(0,122,255,.07); }
.composer textarea::placeholder { color: #78889e; font-size: 13px; }
.primary {
  border-radius: 999px; border: 1px solid rgba(255,255,255,.38);
  background: linear-gradient(150deg, #0874e8, #0064d9);
  color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,122,255,.17), inset 0 1px 0 rgba(255,255,255,.3);
}
.primary:hover { background: linear-gradient(150deg, #006be0, #005bc8); }
.primary:active { transform: scale(.97); }
.composer .primary { padding: 0 20px; min-height: 46px; }
#older-messages, #new-messages {
  justify-self: center; max-width: calc(100% - 36px); padding: 8px 16px; margin: 8px 0;
  border: 1px solid var(--glass-border); border-radius: 999px;
  color: #0768ce; font-size: 12px; background: rgba(255,255,255,.8); box-shadow: var(--glass-shadow);
}
#send-feedback { color: #556b87; padding: 0 26px; font-size: 12px; }
#retry-message { border-radius: 12px; padding: 5px 9px; color: var(--primary); background: rgba(255,255,255,.7); }
.connection-icon[data-status="connected"] { box-shadow: 0 0 0 3px rgba(22,163,74,.08); }
.account-menu, dialog, .login-panel {
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(246,250,255,.83));
  -webkit-backdrop-filter: blur(40px) saturate(170%);
  backdrop-filter: blur(40px) saturate(170%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 18px 55px rgba(51,75,113,.17), inset 0 1px 0 #fff;
}
.account-menu { border-radius: 19px; padding: 7px; }
.account-menu button { border-radius: 12px; font-size: 13px; }
.account-menu button:hover { background: rgba(205,227,255,.45); }
dialog { border-radius: 28px; padding: 26px; max-height: calc(100dvh - 32px); overflow-y: auto; }
dialog::backdrop { background: rgba(47,66,97,.17); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog h2 { margin: 0; font-size: 22px; letter-spacing: -.5px; }
dialog .stack { margin-top: 0; gap: 16px; }
dialog .muted { font-size: 13px; line-height: 1.65; margin: 0; }
label { color: #4a5a72; font-size: 13px; font-weight: 500; }
input, .stack select {
  border: 1px solid rgba(255,255,255,.96); border-radius: 14px;
  background: rgba(255,255,255,.72); box-shadow: inset 0 1px 3px rgba(59,83,117,.035);
  font-size: 14px; color: var(--text);
}
input { height: 46px; padding: 0 14px; }
input:focus, .stack select:focus { outline: 0; border-color: rgba(92,161,255,.6); box-shadow: 0 0 0 3px rgba(0,122,255,.1); }
.dialog-actions button:not(.primary) {
  border-radius: 999px; background: rgba(255,255,255,.7); color: #526783;
  padding: 11px 18px; border: 1px solid rgba(255,255,255,.9);
}
.error { color: #ba233d; font-size: 13px; }
.avatar-preview { text-align: center; padding: 4px 0; }
.toast {
  border-radius: 18px; background: rgba(32,47,72,.9); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 10px 35px rgba(28,46,77,.2); font-size: 13px;
}
.login-shell { background: none; }
.login-panel { border-radius: 32px; padding: 36px; }
.login-panel h1 { letter-spacing: -.9px; font-size: 29px; font-weight: 650; }
.login-panel .muted { font-size: 14px; }
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; }
@media (max-width: 760px) {
  .composer { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .emoji-toggle { width: 34px; height: 34px; }
  .chat-shell { padding: 0; gap: 0; grid-template-columns: minmax(0,1fr); }
  .sidebar, .main-chat { border: 0; border-radius: 0; box-shadow: none; }
  .sidebar { background: rgba(255,255,255,.4); }
  .main-chat { background: rgba(255,255,255,.2); }
  .chat-header { padding: 14px 16px; gap: 10px; }
  .back-to-list { padding: 6px 9px; min-height: 34px; border-radius: 999px; background: rgba(255,255,255,.66); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
  .messages { padding: 20px 16px; gap: 18px; }
  .message { max-width: 94%; }
  .composer { margin: 8px 12px max(12px,env(safe-area-inset-bottom)); padding: 6px; }
  .composer .primary { padding: 0 17px; }
  .profile strong, .chat-header h2 { font-size: 16px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-header[data-overflow="true"] { background: #f5f8fd; }
  .sidebar, .main-chat, .account-menu, dialog, .login-panel, .composer { background: rgba(247,250,255,.97); }
}
@media (prefers-reduced-transparency: reduce) {
  .chat-header[data-overflow="true"] { background: #f5f8fd; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sidebar, .main-chat, .account-menu, dialog, .login-panel, .composer { background: #f5f8fd; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-header::before { transition: none; }
  button { transition: none; }
  button:active { transform: none; }
}

/* Separate navigation from creation. */
.sidebar-tools { display: flex; align-items: center; gap: 10px; margin: 8px 18px 4px; flex-shrink: 0; }
.sidebar-tools .tool-row { flex: 1; min-width: 0; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.new-room-action { flex: 0 0 51px; width: 51px; height: 51px; border-radius: 50%;
  border: 1px solid var(--glass-border); background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.38));
  box-shadow: var(--glass-shadow); color: var(--primary); }
.new-room-action:hover { background: rgba(255,255,255,.92); }
/* Native radio selection stays inside the dialog; no browser popup can overflow it. */
.avatar-picker { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.avatar-picker legend { margin-bottom: 10px; padding: 0; color: #4a5a72; font-size: 13px; }
.avatar-options { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 7px; }
.avatar-choice, .avatar-default { position: relative; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.94); background: rgba(255,255,255,.52); cursor: pointer; }
.avatar-choice { aspect-ratio: 1; min-width: 0; border-radius: 50%; font-size: 25px; line-height: 1; }
.avatar-default { min-height: 42px; margin-bottom: 10px; border-radius: 14px; gap: 8px; font-size: 13px; }
.avatar-default > span:first-of-type { font-size: 23px; }
.avatar-picker input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; padding: 0; clip-path: inset(50%); overflow: hidden; }
.avatar-choice:has(input:checked), .avatar-default:has(input:checked) { border-color: #2688ed;
  background: rgba(222,239,255,.85); box-shadow: 0 0 0 2px rgba(0,122,255,.12), inset 0 1px 0 #fff; }
.avatar-choice:focus-within, .avatar-default:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.avatar-choice:hover, .avatar-default:hover { background-color: rgba(255,255,255,.95); }
.profile-actions button { flex: 1; }
.profile-dialog .error:empty { display: none; }
.profile-dialog { overflow-x: hidden; }
@media (max-width: 480px) {
  .avatar-options { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .profile-dialog { padding: 22px; }
  .profile-dialog .stack { gap: 13px; }
}

/* Balanced narrow-screen titles, independent of the back button's width. */
.chat-identity { display: contents; }
dialog h2 { text-align: center; }
.add-member { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; flex-shrink: 0; }
.add-member svg { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
@media (max-width: 760px) {
  .chat-header { grid-template-columns: 40px minmax(0,1fr) 40px; gap: 8px; }
  .chat-header::after { content: ""; grid-column: 3; grid-row: 1; width: 40px; }
  .back-to-list { grid-column: 1; grid-row: 1; width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; }
  .back-to-list svg { width: 26px; height: 26px; stroke-width: 2; }
  .chat-identity { display: flex; grid-column: 2; grid-row: 1; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
  .chat-identity .header-avatar { width: 36px; flex: 0 0 36px; }
  .chat-identity .user-avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: 25px; }
  .chat-identity .chat-heading { flex: 0 1 auto; min-width: 0; text-align: center; }
  .chat-identity .chat-title-row { justify-content: center; }
  .panel-heading { position: relative; justify-content: center; }
  .panel-heading .add-member { position: absolute; right: 18px; top: 0; bottom: 0; margin-block: auto; }
}

/* A stable 2×2 member mosaic identifies group chats without a subtitle row. */
.group-avatar { width: 40px; height: 40px; flex: 0 0 40px; display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr));
  gap: 2px; padding: 4px; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(255,255,255,.95);
  background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(211,230,250,.7));
  box-shadow: 0 3px 10px rgba(66,91,131,.08), inset 0 1px 2px #fff; }
.group-avatar-tile { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--group-avatar-font,13px); line-height: 1; border-radius: 50%; background: rgba(224,235,249,.7); }
.group-avatar-tile:nth-child(2) { background: rgba(242,227,234,.75); }
.group-avatar-tile:nth-child(3) { background: rgba(230,239,218,.75); }
.group-avatar-tile:nth-child(4) { background: rgba(234,229,246,.75); }
@media (max-width: 760px) {
  .chat-identity .group-avatar { width: 36px; height: 36px; flex-basis: 36px; --group-avatar-font: 11px; }
}

.profile-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.profile-name-row #profile-name { flex: 0 1 auto; min-width: 0; }
.admin-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 18px; flex: 0 0 16px; color: var(--primary); }
.admin-badge svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nickname-hint { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.6; }

.nickname-count { font-size: 11px; color: var(--muted); font-weight: 400; text-align: right; line-height: 1.5; }
.nickname-count.over-limit { color: var(--danger); }
.user-item { grid-template-columns: 28px minmax(0,1fr); }
.member-name { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.message-meta { max-width: 240px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation-search { padding: 0 18px 12px; flex-shrink: 0; }
.conversation-search input { height: 36px; font-size: 13px; border-radius: 999px; }
.chat-header { grid-template-columns: 44px minmax(0, 1fr) auto; }
.conversation-manage { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; letter-spacing: 1px; }
.conversation-detail-name { overflow-wrap: anywhere; }
:root { --wallpaper-veil: rgba(246, 249, 255, .18); }
:root[data-wallpaper="custom"] body, .wallpaper-preview {
  background-image: linear-gradient(var(--wallpaper-veil), var(--wallpaper-veil)), var(--chat-wallpaper, none);
  background-size: cover; background-position: center;
}
:root[data-wallpaper="custom"] body { background-attachment: fixed; }
.wallpaper-preview { height: 160px; border-radius: 18px; border: 1px solid var(--glass-border); padding: 18px; display: flex; align-items: center; justify-content: center; background-color: var(--bg); }
.wallpaper-sample { padding: 12px 16px; border-radius: 18px; background: var(--panel); color: var(--text); font-size: 14px; }
.wallpaper-presets { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.wallpaper-presets legend { padding: 0 0 10px; font-size: 13px; color: var(--muted); }
.wallpaper-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wallpaper-preset { position: relative; min-width: 0; text-align: center; font-size: 12px; font-weight: 400; cursor: pointer; }
.wallpaper-swatch { height: 44px; border: 2px solid var(--glass-border); border-radius: 12px; }
.wallpaper-preset input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; margin: 0; }
.wallpaper-preset:has(input:checked) .wallpaper-swatch { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(0, 122, 255, .16); }
.wallpaper-preset:has(input:focus-visible) .wallpaper-swatch { outline: 2px dashed var(--primary); outline-offset: 4px; }
dialog [data-reset] { padding: 11px 16px; border-radius: 14px; background: var(--panel-soft); color: var(--text); }
.wallpaper-title { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.wallpaper-title h2 { grid-column: 2; }
.wallpaper-title h2:focus { outline: none; }
.wallpaper-title .wallpaper-reset { grid-column: 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.wallpaper-reset svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wallpaper-dialog .error:empty { display: none; }
input[type="file"] { height: auto; min-width: 0; padding: 8px; font-size: 12px; }
input[type="file"]::file-selector-button { border: 0; border-radius: 10px; padding: 8px 10px; margin-right: 8px; background: var(--panel-soft); color: var(--text); cursor: pointer; }
dialog [data-action] { padding: 12px 16px; border-radius: 14px; background: var(--panel-soft); color: var(--text); }
dialog .danger-action { color: var(--danger); }
@media (max-width: 760px) {
  .chat-header { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .chat-header::after { display: none; }
  .conversation-manage { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* CSS media queries update immediately when the system appearance changes. */
@media (prefers-color-scheme: dark) {
  :root { --wallpaper-veil: rgba(9, 15, 25, .54); }
  .emoji-picker { background: #1b283b; box-shadow: 0 8px 30px rgba(0, 0, 0, .32); }
  .chat-header::before {
    background: linear-gradient(to bottom, rgba(143, 173, 215, .045), rgba(143, 173, 215, .015) 70%, transparent);
  }
  :root {
    --bg: #0c111a;
    --panel: rgba(32, 42, 58, .84);
    --panel-soft: rgba(59, 75, 98, .55);
    --text: #edf2fa;
    --muted: #aab9ce;
    --line: rgba(174, 195, 224, .18);
    --primary: #69b1ff;
    --primary-dark: #409aff;
    --accent: #69b1ff;
    --danger: #ff8798;
    --glass-border: rgba(196, 216, 245, .18);
    --glass-shadow: 0 8px 28px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(222, 235, 255, .1);
  }
  body {
    background:
      radial-gradient(ellipse at 5% 10%, rgba(28, 62, 103, .4), transparent 48%),
      radial-gradient(ellipse at 98% 28%, rgba(60, 42, 94, .3), transparent 48%),
      radial-gradient(ellipse at 38% 100%, rgba(23, 64, 61, .28), transparent 50%),
      linear-gradient(145deg, #0b121d, #10121c 62%, #0c1918);
    background-attachment: fixed;
  }
  ::selection { background: rgba(73, 155, 255, .35); }
  .sidebar, .main-chat {
    box-shadow: 0 16px 55px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(222, 235, 255, .1);
  }
  .sidebar { background: linear-gradient(155deg, rgba(27, 38, 54, .76), rgba(17, 25, 38, .6)); }
  .main-chat { background: rgba(10, 17, 28, .44); }
  .profile-edit:hover, .tool-icon:hover { background: rgba(178, 207, 245, .09); }
  .user-avatar { border-color: rgba(207, 225, 249, .3); box-shadow: 0 3px 10px rgba(0, 0, 0, .16); }
  .icon-button, .add-member, .new-room-action, .tool-row {
    background: linear-gradient(145deg, rgba(68, 86, 111, .7), rgba(37, 50, 70, .7));
  }
  .icon-button, .add-member, .tool-icon { color: #c2d1e5; }
  .icon-button:hover, .add-member:hover, .new-room-action:hover { background: rgba(77, 100, 132, .8); color: var(--primary); }
  .tool-icon[aria-pressed="true"] {
    color: #aed6ff;
    background: linear-gradient(150deg, rgba(83, 115, 156, .78), rgba(44, 72, 109, .82));
    box-shadow: var(--glass-shadow);
  }
  .tool-badge { border-color: rgba(184, 213, 255, .3); }
  .panel-heading h2, .conversation-copy small, .message-meta, #send-feedback { color: var(--muted); }
  .panel-heading h2 span { background: rgba(137, 167, 204, .15); }
  .conversation.active {
    background: linear-gradient(130deg, rgba(67, 93, 128, .73), rgba(40, 65, 99, .77));
    border-color: rgba(164, 202, 253, .24);
    box-shadow: var(--glass-shadow);
  }
  .conversation:hover, .user-item:hover { background-color: rgba(166, 198, 240, .1); }
  .conversation-list, .user-list, .messages { scrollbar-color: rgba(170, 193, 224, .3) transparent; }
  .bubble {
    color: var(--text); border-color: rgba(181, 205, 238, .18);
    background: linear-gradient(145deg, rgba(53, 68, 89, .94), rgba(37, 50, 70, .88));
    box-shadow: var(--glass-shadow);
  }
  .composer {
    border-color: var(--glass-border);
    background: linear-gradient(145deg, rgba(48, 64, 86, .88), rgba(30, 43, 62, .8));
    box-shadow: var(--glass-shadow);
  }
  .composer textarea::placeholder { color: var(--muted); }
  .composer:focus-within { border-color: rgba(105, 177, 255, .7); box-shadow: var(--glass-shadow), 0 0 0 3px rgba(71, 151, 255, .14); }
  #older-messages, #new-messages, #retry-message { color: #aed6ff; background: rgba(47, 70, 100, .94); }
  .account-menu, dialog, .login-panel {
    background: linear-gradient(145deg, rgba(39, 52, 73, .96), rgba(26, 37, 55, .94));
    box-shadow: 0 18px 55px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(222, 235, 255, .1);
  }
  .account-menu button:hover { background: rgba(125, 174, 239, .16); }
  dialog::backdrop { background: rgba(0, 5, 15, .5); }
  label, .avatar-picker legend { color: #c4d2e5; }
  input, .stack select {
    border-color: rgba(181, 205, 238, .24); background: rgba(16, 26, 42, .7);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
  }
  input::placeholder { color: var(--muted); }
  .dialog-actions button:not(.primary) {
    background: rgba(76, 96, 124, .45); color: var(--text); border-color: var(--glass-border);
  }
  .error { color: var(--danger); }
  .avatar-choice, .avatar-default { background: rgba(103, 129, 164, .15); border-color: var(--glass-border); }
  .avatar-choice:has(input:checked), .avatar-default:has(input:checked) {
    background: rgba(57, 111, 177, .46); border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(105, 177, 255, .18);
  }
  .avatar-choice:hover, .avatar-default:hover { background-color: rgba(126, 164, 216, .25); }
  .group-avatar { border-color: var(--glass-border); background: linear-gradient(145deg, #3b4f6d, #24364e); box-shadow: var(--glass-shadow); }
  .group-avatar-tile { background: #435c7b; }
  .group-avatar-tile:nth-child(2) { background: #6a4c60; }
  .group-avatar-tile:nth-child(3) { background: #4b6244; }
  .group-avatar-tile:nth-child(4) { background: #5a5074; }
  .toast { background: rgba(39, 53, 75, .96); }
  @media (max-width: 760px) {
    .sidebar { background: rgba(17, 26, 40, .78); }
    .main-chat { background: rgba(10, 17, 28, .46); }
    .sidebar, .main-chat { box-shadow: none; }
    .back-to-list { color: var(--text); background: rgba(76, 96, 124, .45); }
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .chat-header[data-overflow="true"] { background: #182335; }
    .sidebar, .main-chat, .account-menu, dialog, .login-panel, .composer { background: #182335; }
  }
  @media (prefers-reduced-transparency: reduce) {
    .chat-header[data-overflow="true"] { background: #182335; }
    .sidebar, .main-chat, .account-menu, dialog, .login-panel, .composer { background: #182335; }
  }
}

/* A restrained accent palette follows the wallpaper; filled surfaces retain white-text contrast. */
:root {
  --accent-ink-light: #316c9f;
  --accent-ink-dark: #a7cfef;
  --accent-fill: #3975ad;
  --accent-fill-end: #286292;
  --primary: var(--accent-ink-light);
  --primary-dark: var(--accent-fill-end);
  --accent: var(--primary);
  --accent-tint: color-mix(in srgb, var(--primary) 12%, transparent);
  --accent-ring: color-mix(in srgb, var(--primary) 26%, transparent);
}
:root[data-accent-theme="lavender"] { --accent-ink-light: #705b98; --accent-ink-dark: #c9b6ef; --accent-fill: #7864a0; --accent-fill-end: #625088; }
:root[data-accent-theme="mint"] { --accent-ink-light: #276f63; --accent-ink-dark: #9bd8c7; --accent-fill: #2f7a6f; --accent-fill-end: #246459; }
:root[data-accent-theme="rose"] { --accent-ink-light: #954b6c; --accent-ink-dark: #efb1c8; --accent-fill: #a35877; --accent-fill-end: #8c4565; }
:root[data-accent-theme="apricot"] { --accent-ink-light: #8e592d; --accent-ink-dark: #efc295; --accent-fill: #9d6539; --accent-fill-end: #84512b; }
:root[data-accent-theme="slate"] { --accent-ink-light: #49667e; --accent-ink-dark: #bbccdc; --accent-fill: #526d83; --accent-fill-end: #40596e; }
.message.mine .bubble, .primary {
  background: linear-gradient(150deg, var(--accent-fill), var(--accent-fill-end));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-fill-end) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
}
.primary:hover { background: var(--accent-fill-end); }
.tool-icon { color: color-mix(in srgb, var(--primary) 45%, var(--muted)); }
.tool-icon[aria-pressed="true"] {
  color: var(--primary);
  background: linear-gradient(150deg, rgba(255,255,255,.85), var(--accent-tint));
  box-shadow: var(--glass-shadow);
}
.new-room-action, .new-room-action:hover { color: var(--primary); }
.conversation.active {
  background: linear-gradient(130deg, rgba(255,255,255,.6), var(--accent-tint));
  border-color: var(--accent-ring);
}
.conversation b, .tool-badge { background: var(--accent-fill-end); color: #fff; }
.composer:focus-within { border-color: var(--accent-ring); box-shadow: var(--glass-shadow), 0 0 0 3px var(--accent-tint); }
input:focus, .stack select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-tint); }
.avatar-choice:has(input:checked), .avatar-default:has(input:checked) { border-color: var(--primary); background: var(--accent-tint); box-shadow: 0 0 0 2px var(--accent-ring); }
.wallpaper-preset:has(input:checked) .wallpaper-swatch { box-shadow: 0 0 0 2px var(--accent-ring); }
#older-messages, #new-messages, #retry-message { color: var(--primary); }
::selection { background: var(--accent-ring); }
@media (prefers-color-scheme: dark) {
  :root { --primary: var(--accent-ink-dark); }
  .tool-icon { color: color-mix(in srgb, var(--primary) 48%, var(--muted)); }
  .new-room-action { color: var(--primary); }
  .tool-icon[aria-pressed="true"] { background: linear-gradient(150deg, var(--accent-tint), rgba(255,255,255,.035)); }
  .conversation.active { background: linear-gradient(130deg, var(--accent-tint), rgba(255,255,255,.035)); }
}

/* Real mobile viewports include browser chrome, keyboard and safe-area insets. */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .chat-shell {
    position: fixed; inset-inline: 0; top: var(--app-viewport-top, 0px);
    height: var(--app-viewport-height, 100dvh);
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  }
  .profile, .chat-header {
    height: calc(72px + env(safe-area-inset-top)); min-height: calc(72px + env(safe-area-inset-top));
    padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: 12px;
  }
  .chat-header { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; padding-inline: 12px; }
  .back-to-list, .conversation-manage, .icon-button, .add-member { min-width: 44px; width: 44px; height: 44px; min-height: 44px; }
  .sidebar-tools { margin-inline: 14px; }
  .tool-icon { min-height: 44px; }
  .panel-heading { min-height: 52px; }
  .user-item { min-height: 56px; }
  .conversation-search input, .composer textarea, input, .stack select { font-size: 16px; }
  .conversation-search input { height: 44px; }
  .composer { grid-template-columns: 44px minmax(0, 1fr) auto; margin-inline: 8px; gap: 3px; }
  .emoji-toggle { width: 44px; height: 44px; }
  .composer textarea { padding-inline: 8px; line-height: 22px; }
  .composer textarea::placeholder { font-size: 14px; }
  .composer .primary { padding-inline: 14px; }
  .messages, .conversation-list, .user-list { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .bubble { font-size: 16px; padding: 10px 13px; }
  .message { max-width: 96%; }
  .messages { padding: 16px 12px; gap: 16px; }
  .message-meta { max-width: min(240px, 62vw); }
  .emoji-picker { max-height: min(290px, calc(var(--app-viewport-height, 100dvh) - 180px)); }
  .emoji-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .emoji-grid button { min-height: 44px; padding-block: 7px; }
  dialog {
    top: calc(var(--app-viewport-top, 0px) + var(--app-viewport-height, 100dvh) / 2);
    bottom: auto; margin-block: 0; transform: translateY(-50%);
    width: min(420px, calc(100% - 24px)); padding: 22px;
    max-height: calc(var(--app-viewport-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
    overscroll-behavior-y: contain;
  }
  .emoji-heading button { min-width: 44px; min-height: 44px; }
  .login-shell { min-height: var(--app-viewport-height, 100dvh); padding: 16px; }
  .login-panel { padding: 26px; }
}
@media (max-width: 360px) {
  .composer .primary { padding-inline: 10px; min-width: 52px; }
  .profile, .chat-header { padding-inline: 10px; }
  .avatar-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Files share the existing composer and retry flow. */
.composer { grid-template-columns: 38px 38px minmax(0, 1fr) auto; }
.attachment-draft { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 20px; background: var(--panel-soft); color: var(--text); }
.attachment-draft img { width: 64px; height: 48px; object-fit: contain; border-radius: 8px; }
.attachment-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.attachment-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.attachment-copy small { font-size: 11px; opacity: .8; }
.attachment-draft button { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: 24px; }
.composer:has(#attachment-draft:not([hidden])) > :is(.emoji-toggle, textarea, .primary) { grid-row: 2; }
.message-attachment { max-width: min(270px, 65vw); }
.bubble > div + .message-attachment { margin-top: 10px; }
.message-image { display: block; }
.message-image img { display: block; width: 260px; max-width: 100%; height: 180px; object-fit: contain; border-radius: 12px; background: rgba(128,128,128,.12); }
.attachment-download { display: flex; align-items: center; gap: 10px; padding: 10px 4px 2px; color: inherit; text-decoration: none; min-height: 44px; }
.attachment-download:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .composer { grid-template-columns: 44px 44px minmax(0, 1fr) auto; }
  .attachment-copy strong { font-size: 14px; }
}
.attachment-menu { position: absolute; bottom: calc(100% + 10px); left: 44px; width: min(225px, calc(100% - 50px)); padding: 7px; border: 1px solid var(--glass-border); border-radius: 20px; background: #f3f7fd; box-shadow: var(--glass-shadow); }
.attachment-menu button { display: block; width: 100%; min-height: 60px; padding: 10px 14px; border-radius: 14px; text-align: left; color: var(--text); background: transparent; font-size: 15px; }
.attachment-menu button:hover, .attachment-menu button:focus-visible { background: var(--accent-tint); }
.attachment-menu small { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.attachment-draft video { width: 64px; height: 48px; object-fit: contain; border-radius: 8px; }
.message-video { display: block; width: 260px; max-width: 100%; height: 180px; border-radius: 12px; background: #111; }
@media (prefers-color-scheme: dark) { .attachment-menu { background: #1b283b; } }

/* Conversation details keep primary actions in one compact icon row. */
.conversation-summary { display: flex; gap: 12px; align-items: center; min-width: 0; }
.conversation-details-dialog h2:focus { outline: none; }
.conversation-summary > div { min-width: 0; }
.conversation-summary .conversation-detail-name { display: block; font-size: 16px; line-height: 1.5; }
.conversation-summary .muted { margin: 2px 0 0; }
.conversation-details-dialog .detail-meta { font-size: 12px; overflow-wrap: anywhere; }
.room-name-row, .history-search-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.room-name-row input, .history-search-row input { flex: 1; min-width: 0; }
.room-name-row button, .history-search-row button { flex-shrink: 0; min-height: 46px; padding-inline: 16px; }
.conversation-action-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; padding: 8px 0; }
.conversation-action-bar button, .conversation-details-dialog .conversation-action-bar [data-action] { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; background: var(--panel-soft); color: var(--primary); }
.conversation-action-bar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.conversation-details-dialog .conversation-action-bar .danger-action { color: var(--danger); }
.conversation-details-dialog .error:empty { display: none; }
.search-conversation-name { overflow-wrap: anywhere; text-align: center; }
.history-search-results { max-height: min(360px, 45dvh); overflow-y: auto; overscroll-behavior: contain; }
.history-search-record { padding: 14px 4px; border-bottom: 1px solid var(--line); }
.history-search-record:first-child { padding-top: 0; }
.history-search-record > div { display: flex; flex-wrap: wrap; gap: 5px 10px; justify-content: space-between; }
.history-search-record strong { font-size: 13px; overflow-wrap: anywhere; }
.history-search-record time { font-size: 11px; color: var(--muted); }
.history-search-record p { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }
.history-search-record a { display: block; margin-top: 8px; font-size: 13px; color: var(--primary); overflow-wrap: anywhere; }
.message-search-dialog [data-more] { padding: 10px; border-radius: 14px; background: var(--panel-soft); color: var(--primary); }
@media (max-width: 760px) {
  .history-search-results { max-height: max(100px, calc(var(--app-viewport-height, 100dvh) - 300px)); }
  .history-search-record p { font-size: 16px; }
}

/* Shared dialog navigation, including the in-app image viewer. */
.dialog-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 4px; }
.dialog-header h2 { grid-column: 2; grid-row: 1; text-align: center; min-width: 0; font-size: 20px; }
.dialog-header h2:focus { outline: none; }
.dialog-header .dialog-back { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(128,148,175,.12); color: var(--text); border: 1px solid var(--glass-border); }
.dialog-back svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dialog-actions:not(:has(button)) { display: none; }
button.message-image { padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: zoom-in; max-width: 100%; }
.image-preview-dialog { width: min(960px, calc(100vw - 32px)); }
.image-preview-stage { min-height: 0; display: flex; align-items: center; justify-content: center; }
.image-preview-stage img { display: block; max-width: 100%; max-height: calc(var(--app-viewport-height, 100dvh) - 250px); object-fit: contain; border-radius: 12px; }
.image-preview-name { text-align: center; overflow-wrap: anywhere; }
.image-preview-download { justify-self: center; color: var(--primary); padding: 8px 16px; }

/* Name guidance shares a compact line; all form actions match the profile action. */
.name-guidance { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.name-guidance .nickname-hint { font-size: 11px; }
.name-guidance .nickname-count { flex: 0 0 auto; white-space: nowrap; }
dialog .dialog-actions { width: 100%; }
dialog .dialog-actions > .primary, dialog form.stack > .primary { flex: 1; width: 100%; min-height: 46px; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; }

/* Search floats below the chat header and leaves the conversation mounted. */
.main-chat { position: relative; }
.chat-history-search { display: flex; flex-direction: column; position: absolute; z-index: 4; top: 80px; left: 16px; right: 16px; max-height: calc(100% - 96px); padding: 12px; border: 1px solid var(--glass-border); border-radius: 20px; background: rgba(247,250,255,.96); box-shadow: 0 10px 32px rgba(28,46,77,.16); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); overflow: hidden; }
.chat-history-search .stack { margin: 0; gap: 10px; min-height: 0; overflow: hidden; }
.chat-history-search form { display: flex; flex-direction: column; }
.chat-history-search [data-status] { margin: 0; font-size: 12px; }
.chat-history-search .history-search-row { flex: 0 0 auto; gap: 4px; }
.chat-history-search .history-search-row input { font-size: 16px; }
.chat-history-search .history-search-row button { width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-tint); color: var(--primary); }
.chat-history-search .history-search-close { background: transparent !important; color: var(--muted) !important; }
.chat-history-search svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.chat-history-search .history-search-results { min-height: 0; max-height: min(360px, calc(var(--app-viewport-height, 100dvh) - 300px)); }
.chat-history-search [data-more] { flex: 0 0 auto; min-height: 40px; border-radius: 12px; background: var(--accent-tint); color: var(--primary); }
@media (prefers-color-scheme: dark) { .chat-history-search { background: rgba(20,30,46,.97); } }
@media (prefers-reduced-transparency: reduce) { .chat-history-search { -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (max-width: 760px) {
  .chat-history-search { top: calc(72px + env(safe-area-inset-top)); left: 10px; right: 10px; max-height: calc(100% - 84px - env(safe-area-inset-top)); padding: 10px; }
}

/* Mirror the composer with a compact search capsule; results open beneath it. */
.chat-history-search { left: 18px; right: 18px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.chat-history-search .stack { gap: 8px; }
.chat-history-search .history-search-row { padding: 7px; gap: 7px; border: 1px solid rgba(255,255,255,.94); border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.83), rgba(255,255,255,.51)); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); box-shadow: 0 8px 28px rgba(67,100,142,.1), inset 0 1px 0 #fff; }
.chat-history-search .history-search-row input { height: 46px; padding: 12px 14px; border: 0; border-radius: 23px; background: transparent; box-shadow: none; }
.chat-history-search .history-search-row input:focus { outline: none; box-shadow: none; }
.chat-history-search .history-search-row button { width: 38px; height: 38px; min-height: 38px; background: transparent; color: var(--muted); }
.chat-history-search .history-search-row:focus-within { border-color: var(--primary); }
.chat-history-search .history-search-results, .chat-history-search [data-status]:not([hidden]) { border-radius: 22px; padding: 10px; background: rgba(247,250,255,.97); box-shadow: 0 8px 28px rgba(28,46,77,.12); }
button.history-search-record { display: block; width: 100%; text-align: left; background: transparent; color: var(--text); border-radius: 14px; padding: 12px; }
button.history-search-record:first-child { padding-top: 12px; }
button.history-search-record:hover, button.history-search-record:focus-visible { background: var(--accent-tint); }
.search-record-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px 10px; }
.search-record-body { display: block; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 8px; font-size: 14px; }
.search-record-file { display: block; margin-top: 8px; color: var(--primary); overflow-wrap: anywhere; }
.search-message-highlight .bubble { animation: search-message-pulse 2.4s ease-out; outline: 2px solid transparent; }
@keyframes search-message-pulse { 0%, 55% { outline-color: var(--primary); box-shadow: 0 0 0 5px var(--accent-tint); } 100% { outline-color: transparent; box-shadow: none; } }
@media (prefers-color-scheme: dark) {
  .chat-history-search { background: transparent; }
  .chat-history-search .history-search-row { background: rgba(20,32,49,.88); border-color: var(--glass-border); box-shadow: var(--glass-shadow); }
  .chat-history-search .history-search-results, .chat-history-search [data-status]:not([hidden]) { background: rgba(20,30,46,.97); }
}
@media (max-width: 760px) {
  .chat-history-search { left: 8px; right: 8px; }
  .chat-history-search .history-search-row button { width: 44px; height: 44px; min-height: 44px; }
  .chat-history-search .history-search-row input { height: 44px; }
  .search-record-body { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .search-message-highlight .bubble { animation: none; outline-color: var(--primary); } }

/* Live search: clear text inside the capsule, close the search outside it. */
.history-search-toolbar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; }
.chat-history-search .history-search-row { flex: 1; min-width: 0; gap: 0; height: 44px; padding: 0; border-radius: 22px; }
.chat-history-search .history-search-row input { height: 42px; min-height: 0; padding: 9px 12px; border-radius: 21px; }
.history-search-symbol { flex: 0 0 20px; margin-left: 10px; color: var(--muted); }
.chat-history-search .history-search-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border-radius: 50%; color: var(--muted) !important; background: var(--panel-soft) !important; border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.chat-history-search .history-search-close:hover { color: var(--primary) !important; background: var(--accent-tint) !important; }

/* Destructive confirmation has its own explicit action, separate from the icon row. */
.dissolve-confirmation { padding: 18px; border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--danger) 9%, var(--panel)); text-align: center; }
.dissolve-confirmation:focus { outline: 2px solid var(--danger); outline-offset: 3px; }
.dissolve-warning-icon { display: flex; justify-content: center; color: var(--danger); margin-bottom: 10px; }
.dissolve-warning-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dissolve-confirmation h3 { margin: 0 0 8px; font-size: 18px; color: var(--danger); }
.dissolve-group-name { display: block; overflow-wrap: anywhere; font-size: 16px; }
.dissolve-confirmation p { margin: 10px 0 16px; font-size: 13px; line-height: 1.7; color: var(--text); }
.dissolve-confirm-actions { display: flex; gap: 10px; }
.dissolve-confirm-actions button { flex: 1; min-width: 0; min-height: 46px; padding: 10px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--panel-soft); color: var(--text); }
.dissolve-confirm-actions .dissolve-confirm-button { background: var(--danger); color: #fff; }

.remove-confirmation { border-color: var(--accent-ring); background: color-mix(in srgb, var(--primary) 7%, var(--panel)); }
.remove-confirmation:focus { outline-color: var(--primary); }
.remove-confirmation h3 { color: var(--text); }
.dissolve-confirm-actions .remove-confirm-button { background: var(--accent-fill-end); color: #fff; }

#account-menu-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border-color: transparent; box-shadow: none; }
#account-menu-toggle svg { display: block; width: 21px; height: 21px; stroke-width: 1.65; }

#account-menu-toggle:hover, #account-menu-toggle:focus-visible, #account-menu-toggle[aria-expanded="true"] { background: var(--panel-soft); border-color: var(--glass-border); box-shadow: var(--glass-shadow); }
#account-menu button { display: flex; align-items: center; gap: 9px; }
#account-menu button svg { display: block; flex: 0 0 18px; width: 18px; height: 18px; stroke-width: 1.65; }

/* Header navigation and reset controls share pointer, touch and keyboard feedback. */
.wallpaper-title .wallpaper-reset { background: rgba(128,148,175,.12); color: var(--text); border: 1px solid var(--glass-border); }
.dialog-header .dialog-back, .back-to-list, .wallpaper-title .wallpaper-reset {
  border-radius: 50%;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .dialog-header .dialog-back:not(:disabled):hover, .back-to-list:not(:disabled):hover, .wallpaper-title .wallpaper-reset:not(:disabled):hover {
    color: var(--primary); background: var(--accent-tint); border-color: var(--accent-ring);
    box-shadow: 0 3px 10px var(--accent-tint);
  }
}
.dialog-header .dialog-back:not(:disabled):active, .back-to-list:not(:disabled):active, .wallpaper-title .wallpaper-reset:not(:disabled):active {
  transform: scale(.92); color: var(--primary); background: var(--accent-tint); border-color: var(--primary);
  box-shadow: inset 0 1px 4px var(--accent-tint);
}
.dialog-header .dialog-back:focus-visible, .back-to-list:focus-visible, .wallpaper-title .wallpaper-reset:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 50%;
  color: var(--primary); background: var(--accent-tint); border-color: var(--accent-ring);
}
@media (prefers-reduced-motion: reduce) {
  .dialog-header .dialog-back, .back-to-list, .wallpaper-title .wallpaper-reset { transition: none; }
  .dialog-header .dialog-back:not(:disabled):active, .back-to-list:not(:disabled):active, .wallpaper-title .wallpaper-reset:not(:disabled):active { transform: none; }
}

/* Give every modal the same breathing room below its title. */
dialog .dialog-header { margin-bottom: 8px; }
.conversation-details-dialog .conversation-action-bar [data-action][aria-pressed="true"] {
  background: var(--accent-tint); color: var(--primary);
  outline: 2px solid var(--primary); outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--accent-tint);
}
.conversation-details-dialog .conversation-action-bar [data-action="delete"][aria-pressed="true"] {
  background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger);
  outline-color: var(--danger); box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 10%, transparent);
}

/* Feedback stays centered in the visible viewport, clear of the composer. */
.toast {
  position: fixed; inset: auto; left: 50%;
  top: calc(var(--app-viewport-top, 0px) + max(16px, env(safe-area-inset-top)));
  transform: translateX(-50%); margin: 0; z-index: 10000;
  width: max-content; max-width: min(420px, calc(100vw - 32px));
  text-align: center; line-height: 1.5; overflow-wrap: anywhere; pointer-events: none;
}