/* Sarab refined UI, v1. Presentation only; no viewport, transport, or crypto ownership.
 * This sheet loads after styles.css and is precached with the same immutable release.
 * The data-ui boundary leaves the weather cover and independently mounted vault alone.
 * Existing theme preferences are retained. Removing this sheet restores legacy styling.
 */
#chat-view[data-ui="refined"],
#chat-view[data-ui="refined"][data-palette] {
  --ui-accent: #dca48e;
  --ui-solid: #94513c;
  --ui-page: #111923;
  --ui-canvas: #17212d;
  --theme-text: #edf2f8;
  --theme-muted: #a6b4c6;
  --theme-border: #ffffff14;
  --theme-card: #1c2836;
  --theme-surface: #202d3d;
  --theme-surface-2: #293849;
  --theme-surface-glass: #202d3d;
  --theme-header: #111923;
  --theme-composer: #233141;
  --theme-in: #243141;
  --theme-in-text: var(--theme-text);
  --theme-out: color-mix(in srgb, var(--ui-solid) 32%, #263544);
  --theme-out-text: var(--theme-text);
  --theme-accent: var(--ui-accent);
  --theme-accent-2: var(--ui-solid);
  --theme-seen: #78d8c8;
  --theme-focus: var(--ui-accent);
  --theme-wallpaper: linear-gradient(var(--ui-canvas), var(--ui-canvas));
  --theme-profile-bg: var(--ui-page);
  --bubble-radius: 19px;
  --chat-header-height: 64px;
  --ui-radius: 18px;
  --ui-shadow: 0 1px 3px #00000012;
  --ui-viewer-bg: #0a1018;
  background: var(--ui-page);
  text-rendering: optimizeLegibility;
}
#chat-view[data-ui="refined"][data-palette="telegram"] { --ui-accent:#83c1f5; --ui-solid:#1768b2; }
#chat-view[data-ui="refined"][data-palette="whatsapp"] { --ui-accent:#76d8b5; --ui-solid:#08745c; }
#chat-view[data-ui="refined"][data-palette="violet"] { --ui-accent:#c2adf4; --ui-solid:#6846b1; }
#chat-view[data-ui="refined"][data-palette="midnight"] { --ui-accent:#afc4e4; --ui-solid:#435f8c; }
#chat-view[data-ui="refined"][data-theme="light"] {
  --ui-accent: #94513c;
  --ui-page: #f7f9fc;
  --ui-canvas: #eef2f7;
  --theme-text: #1e2b3b;
  --theme-muted: #526174;
  --theme-border: #21344c14;
  --theme-card: #ffffff;
  --theme-surface: #eef2f7;
  --theme-surface-2: #e6ecf3;
  --theme-surface-glass: #edf1f6;
  --theme-header: #f7f9fc;
  --theme-composer: #ffffff;
  --theme-in: #ffffff;
  --theme-out: color-mix(in srgb, var(--ui-solid) 12%, #ffffff);
  --theme-seen: #116c79;
}
#chat-view[data-ui="refined"][data-theme="light"][data-palette="telegram"] { --ui-accent:#1768b2; }
#chat-view[data-ui="refined"][data-theme="light"][data-palette="whatsapp"] { --ui-accent:#08745c; }
#chat-view[data-ui="refined"][data-theme="light"][data-palette="violet"] { --ui-accent:#6846b1; }
#chat-view[data-ui="refined"][data-theme="light"][data-palette="midnight"] { --ui-accent:#435f8c; }

/* List: quiet surfaces, readable hierarchy, no heavy glass layers. */
#chat-view[data-ui="refined"] #list-screen,
#chat-view[data-ui="refined"] .settings-screen { background:var(--ui-page); }
#chat-view[data-ui="refined"] .list-header,
#chat-view[data-ui="refined"] .chat-header,
#chat-view[data-ui="refined"] .settings-header {
  background:var(--theme-header); color:var(--theme-text); border-color:var(--theme-border);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
#chat-view[data-ui="refined"] .list-header {
  min-height:calc(80px + var(--chat-safe-top));
  padding-inline:max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-left));
  border-bottom:0;
  gap:12px;
}
#chat-view[data-ui="refined"] .app-title { order:-1; flex:1; gap:5px; color:var(--theme-text); }
#chat-view[data-ui="refined"] .app-title strong { font-size:1.6rem; font-weight:750; letter-spacing:-.04em; }
#chat-view[data-ui="refined"] .app-title small { font-size:.75rem; font-weight:400; }
#chat-view[data-ui="refined"] .list-header .icon-btn {
  width:44px; height:44px; flex:0 0 44px;
  background:var(--theme-surface); color:var(--ui-accent); border:0; border-radius:15px;
}
#chat-view[data-ui="refined"] .list-header #admin-btn { margin:0; }
#chat-view[data-ui="refined"] .search-wrap { padding:4px 16px 12px; }
#chat-view[data-ui="refined"] .search-icon { inset-inline-start:30px; top:calc(50% - 4px); transform:translateY(-50%); }
#chat-view[data-ui="refined"] #user-search {
  min-height:48px; border:1px solid transparent; border-radius:15px;
  background:var(--theme-surface-glass); box-shadow:none;
}
#chat-view[data-ui="refined"] #user-search:focus { border-color:var(--ui-accent); }
#chat-view[data-ui="refined"] .section-label { padding:8px 20px; font-size:.75rem; font-weight:650; letter-spacing:0; }
#chat-view[data-ui="refined"] #chat-list,
#chat-view[data-ui="refined"] #search-results { padding-inline:10px; }
#chat-view[data-ui="refined"] .chat-item {
  min-height:84px; padding:12px 8px; gap:12px; border-radius:16px;
}
#chat-view[data-ui="refined"] .chat-item .avatar { width:54px; height:54px; flex-basis:54px; box-shadow:none; }
#chat-view[data-ui="refined"] .chat-item .ci-main { position:relative; gap:7px; }
#chat-view[data-ui="refined"] .chat-item .ci-bottom { padding-inline-end:28px; }
#chat-view[data-ui="refined"] .chat-item .online-dot.off { display:none; }
#chat-view[data-ui="refined"] .chat-item .ci-name { font-size:1rem; font-weight:650; line-height:1.3; }
#chat-view[data-ui="refined"] .chat-item .ci-preview { font-size:.84rem; }
#chat-view[data-ui="refined"] .chat-item .ci-time { font-size:.71rem; opacity:1; }
#chat-view[data-ui="refined"] .chat-item .ci-badge { position:absolute; inset-inline-end:0; bottom:0; background:var(--ui-solid); color:#fff; box-shadow:none; }
#chat-view[data-ui="refined"] .chat-item.active { background:color-mix(in srgb, var(--ui-accent) 12%, var(--ui-page)); box-shadow:none; }
#chat-view[data-ui="refined"] .chat-item:hover { transform:none; }
#chat-view[data-ui="refined"] .bottom-nav { box-shadow:none; background:var(--theme-header); }
#chat-view[data-ui="refined"] .bottom-nav-item { border-radius:16px; font-weight:500; gap:5px; color:var(--theme-muted); }
#chat-view[data-ui="refined"] .bottom-nav-item.active { background:transparent; color:var(--ui-accent); font-weight:700; }
#chat-view[data-ui="refined"] .bottom-nav-item.active .bottom-nav-icon {
  background:color-mix(in srgb, var(--ui-accent) 12%, transparent);
}
#chat-view[data-ui="refined"] .bottom-nav-icon { width:52px; height:29px; border-radius:12px; }
#chat-view[data-ui="refined"] .bottom-nav-icon svg { width:23px; height:23px; }

/* Conversation: keep existing viewport and keyboard anchoring as the single owner. */
#chat-view[data-ui="refined"] .chat-header { border-bottom:1px solid var(--theme-border); gap:4px; }
#chat-view[data-ui="refined"] .chat-header .head-title { font-size:1rem; font-weight:650; }
#chat-view[data-ui="refined"] .chat-header .presence-text { font-size:.73rem; margin-top:4px; color:var(--theme-muted); }
#chat-view[data-ui="refined"] .chat-header .presence-text.online,
#chat-view[data-ui="refined"] .chat-header #enc-status { color:var(--theme-seen); }
#chat-view[data-ui="refined"] .chat-header .avatar.profile-avatar-trigger { box-shadow:none; }
#chat-view[data-ui="refined"] .chat-header #call-btn { color:var(--ui-accent); }
#chat-view[data-ui="refined"] #messages { gap:3px; background:var(--ui-canvas); }
#chat-view[data-ui="refined"] #messages li .b {
  border:1px solid var(--theme-border); box-shadow:var(--ui-shadow);
  padding:9px 12px 7px; font-size:1rem; line-height:1.55; letter-spacing:0;
}
#chat-view[data-ui="refined"] #messages li:not(.self) .b { background:var(--theme-in); color:var(--theme-in-text); box-shadow:var(--ui-shadow); }
#chat-view[data-ui="refined"] #messages li.self .b { background:var(--theme-out); color:var(--theme-out-text); box-shadow:var(--ui-shadow); }
#chat-view[data-ui="refined"] #messages li .b.has-rich-content { padding:4px; }
#chat-view[data-ui="refined"] #messages li .b > .meta {
  margin-top:5px; gap:3px; font-size:.69rem; line-height:1.3; opacity:1; color:var(--theme-muted);
}
#chat-view[data-ui="refined"] #messages li .b.has-rich-content > .meta { padding:3px 6px; }
#chat-view[data-ui="refined"] #messages li .q { border-radius:11px; padding:8px 10px; background:color-mix(in srgb, var(--ui-accent) 9%, transparent); }
#chat-view[data-ui="refined"] #messages li .q::before { background:var(--ui-accent); }
#chat-view[data-ui="refined"] #messages li .q-text { font-size:.81rem; }
#chat-view[data-ui="refined"] #messages li.message-date-separator time {
  color:var(--theme-muted); background:var(--theme-header); box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; font-size:.72rem; padding:6px 12px;
}
#chat-view[data-ui="refined"] .attachment-card { border-radius:15px; }
#chat-view[data-ui="refined"] .attachment-image { border-radius:13px; }
#chat-view[data-ui="refined"] .voice-message { border-radius:15px; box-shadow:none; }
#chat-view[data-ui="refined"] .voice-play-toggle { background:var(--ui-solid); color:#fff; box-shadow:none; }
#chat-view[data-ui="refined"] #messages li.self .voice-subline,
#chat-view[data-ui="refined"] .voice-subline,
#chat-view[data-ui="refined"] .attachment-info small { color:var(--theme-muted); }
#chat-view[data-ui="refined"] .voice-speed { background:var(--theme-in); color:var(--ui-accent); }
#chat-view[data-ui="refined"] .voice-wave-bars i { background:color-mix(in srgb, var(--theme-muted) 45%, transparent); }
#chat-view[data-ui="refined"] .voice-wave-progress { color:var(--ui-accent); }
#chat-view[data-ui="refined"] .message-vault-save { margin-top:6px; border-radius:12px; background:transparent; }
#chat-view[data-ui="refined"] .reaction-chip { color:var(--theme-text); }
#chat-view[data-ui="refined"] .reaction-chip::before,
#chat-view[data-ui="refined"] #messages li.self .reaction-chip::before {
  border-color:var(--theme-border); background:var(--theme-in); box-shadow:none;
}
#chat-view[data-ui="refined"] .reaction-chip.mine::before,
#chat-view[data-ui="refined"] #messages li.self .reaction-chip.mine::before {
  border-color:color-mix(in srgb, var(--ui-accent) 40%, transparent);
  background:color-mix(in srgb, var(--ui-accent) 15%, var(--theme-in));
}
#chat-view[data-ui="refined"] .reaction-picker-title { font-size:.8rem; }
#chat-view[data-ui="refined"] .reaction-pick-button,
#chat-view[data-ui="refined"] .reaction-more { box-shadow:none; }

/* Composer: stable controls; no changes to focus or pointer handlers. */
#chat-view[data-ui="refined"] #chat-form {
  background:var(--theme-header); box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  padding-top:8px;
}
#chat-view[data-ui="refined"] .composer-pill { border-radius:25px; box-shadow:none; border:1px solid var(--theme-border); background:var(--theme-composer); color:var(--theme-text); }
#chat-view[data-ui="refined"] .composer-pill:focus-within { box-shadow:0 0 0 2px color-mix(in srgb, var(--ui-accent) 18%, transparent); }
#chat-view[data-ui="refined"] #image-btn.composer-side-btn {
  color:var(--ui-accent); border:0; background:transparent; box-shadow:none;
}
#chat-view[data-ui="refined"] #composer-action { background:var(--ui-solid); box-shadow:none; }
#chat-view[data-ui="refined"] #chat-input { line-height:1.5; font-size:16px; color:var(--theme-text); }
#chat-view[data-ui="refined"] .composer-emoji-panel {
  border-radius:var(--ui-radius); background:var(--theme-card); box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
#chat-view[data-ui="refined"] .composer-upload-state { padding:8px 12px; border-radius:12px; font-size:.78rem; }
#chat-view[data-ui="refined"] .reply-bar { box-shadow:none; }
#chat-view[data-ui="refined"] .record-panel { background:transparent; }
#chat-view[data-ui="refined"] .record-card { border-radius:20px; box-shadow:none; padding:10px 12px; }
#chat-view[data-ui="refined"] .record-track { background:transparent; border:0; padding:4px 0; }
#chat-view[data-ui="refined"] .record-timer { font-size:1.1rem; font-weight:500; }
#chat-view[data-ui="refined"] .record-controls { gap:10px; }
#chat-view[data-ui="refined"] .record-action { min-height:48px; border-radius:16px; }
#chat-view[data-ui="refined"] .record-action small { font-size:.7rem; }
#chat-view[data-ui="refined"] .record-action.send { background:var(--ui-solid); box-shadow:none; }
#chat-view[data-ui="refined"] .record-slide-cancel { font-size:.75rem; }
#chat-view[data-ui="refined"] .record-wave i { background:var(--ui-accent); }
#chat-view[data-ui="refined"] .record-live,
#chat-view[data-ui="refined"] .record-action.cancel,
#chat-view[data-ui="refined"] .record-action.stop { color:#ff8f9b; }
#chat-view[data-ui="refined"][data-theme="light"] .record-live,
#chat-view[data-ui="refined"][data-theme="light"] .record-action.cancel,
#chat-view[data-ui="refined"][data-theme="light"] .record-action.stop { color:#b42340; }
#chat-view[data-ui="refined"] .voice-mini-player { border-radius:17px; box-shadow:0 4px 18px #00000018; }
#chat-view[data-ui="refined"] .voice-mini-toggle { background:var(--ui-solid); }

/* Shared action surfaces. Keep privacy and destructive actions visibly distinct. */
#chat-view[data-ui="refined"] .sheet-box,
#chat-view[data-ui="refined"] .attachment-sheet-box { background:var(--theme-card); border-radius:24px 24px 0 0; }
#chat-view[data-ui="refined"] .menu { background:var(--theme-card); border-radius:18px; box-shadow:0 10px 40px #00000026; }
#chat-view[data-ui="refined"] .attachment-option { border-radius:16px; background:var(--theme-surface); }
#chat-view[data-ui="refined"] .settings-card,
#chat-view[data-ui="refined"] .profile-hero-card,
#chat-view[data-ui="refined"] .peer-details-card,
#chat-view[data-ui="refined"] .peer-shared-section { box-shadow:none; }
#chat-view[data-ui="refined"] .settings-primary,
#chat-view[data-ui="refined"] .new-messages-btn,
#chat-view[data-ui="refined"] .ephemeral-send-btn { background:var(--ui-solid); color:#fff; box-shadow:0 3px 10px #00000018; }
#chat-view[data-ui="refined"] .peer-profile-header { background:var(--theme-header); -webkit-backdrop-filter:none; backdrop-filter:none; }
#chat-view[data-ui="refined"] .peer-quick-actions button { box-shadow:none; border-radius:16px; }
#chat-view[data-ui="refined"] .peer-shared-tabs button[aria-selected="true"] { background:var(--ui-solid); color:#fff; box-shadow:none; }

/* Viewer stays dark in both themes so image colours remain unaffected.
 * No filter, opacity or blend mode is applied to image/video pixels.
 * Header/footer occupy real layout space: controls never overlap the safe areas.
 */
#chat-view[data-ui="refined"] .lightbox { background:var(--ui-viewer-bg); }
#chat-view[data-ui="refined"] .lightbox-head {
  min-height:64px; gap:12px; border-bottom:1px solid #ffffff0d;
  padding:10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
}
#chat-view[data-ui="refined"] .lightbox-identity { line-height:1.5; }
#chat-view[data-ui="refined"] .lightbox-identity strong { font-size:.9rem; font-weight:600; }
#chat-view[data-ui="refined"] .lightbox-identity small { font-size:.75rem; color:#a9b8cc; }
#chat-view[data-ui="refined"] .lightbox-close {
  width:44px; height:44px; min-height:44px; border:1px solid #ffffff1a; border-radius:50%;
  background:#1c2736; color:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;
}
#chat-view[data-ui="refined"] .lightbox-nav { width:44px; height:44px; background:#111923d9; }
#chat-view[data-ui="refined"] .lightbox-status { font-size:.75rem; color:#a9b8cc; padding-top:12px; }
#chat-view[data-ui="refined"] .lightbox-toolbar {
  gap:12px; padding:12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
#chat-view[data-ui="refined"] .lightbox-toolbar button { min-width:104px; min-height:60px; font-size:.75rem; background:#1c2736; border:1px solid #ffffff12; border-radius:17px; }
#chat-view[data-ui="refined"] .lightbox-toolbar button[aria-pressed="true"] { color:#bcdcff; background:#234568; }

@media (max-width:600px) {
  #chat-view[data-ui="refined"] .search-wrap { padding-inline:max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-left)); }
  #chat-view[data-ui="refined"] .chat-header .head-meta { min-width:0; }
}
@media (max-width:350px) {
  #chat-view[data-ui="refined"] .chat-header { gap:0; }
  #chat-view[data-ui="refined"] .chat-header .head-title { font-size:.94rem; }
  #chat-view[data-ui="refined"] .chat-header .presence-text { font-size:.69rem; }
  #chat-view[data-ui="refined"] .chat-item { gap:10px; }
  #chat-view[data-ui="refined"] .record-card { padding:8px; }
  #chat-view[data-ui="refined"] .record-action small { display:block; font-size:.67rem; }
}
@media (min-width:900px) {
  #chat-view[data-ui="refined"] > #list-screen { box-shadow:none; }
  #chat-view[data-ui="refined"] .sheet-box { border-radius:24px; }
  #chat-view[data-ui="refined"] .chat-item { min-height:80px; }
}
@media (orientation:landscape) and (max-height:500px) {
  #chat-view[data-ui="refined"] .list-header { min-height:calc(54px + var(--chat-safe-top)); }
  #chat-view[data-ui="refined"] .app-title strong { font-size:1.2rem; }
  #chat-view[data-ui="refined"] .app-title small { display:none; }
  #chat-view[data-ui="refined"] .lightbox-head { min-height:48px; padding-block:2px; }
  #chat-view[data-ui="refined"] .lightbox-toolbar { padding-block:4px max(4px, env(safe-area-inset-bottom)); }
  #chat-view[data-ui="refined"] .lightbox-toolbar button { min-height:44px; flex-direction:row; }
  #chat-view[data-ui="refined"] .record-card { padding:5px 8px; }
}
@media (prefers-reduced-motion:reduce) {
  #chat-view[data-ui="refined"] *, #chat-view[data-ui="refined"] *::before { scroll-behavior:auto; transition:none; animation:none; }
}
@media (prefers-contrast:more) {
  #chat-view[data-ui="refined"] { --theme-border:currentColor; }
}
@media (forced-colors:active) {
  #chat-view[data-ui="refined"] button { border:1px solid ButtonText; }
  #chat-view[data-ui="refined"] .reaction-chip::before { border:1px solid ButtonText; }
}