/* Telega Messenger v5.4: unified, local-only 10-theme design tokens.
   UI/UX groundwork: no backend, messages, permissions or encryption changes. */
:root[data-theme="dark"] {
  color-scheme: dark; --bg-main: #0e1621; --bg-side: #17212b; --bg-active: #2b5278;
  --bg-msg-in: #182533; --bg-msg-out: #2b5278; --text-primary: #f5f5f5;
  --text-secondary: #b0c2d5; --accent: #5288c1; --border: #324353;
  --ui-focus: #8bcbff; --ui-button-text: #081725; --ui-surface-hover: #2b5278;
  --ui-panel: #17212b; --ui-muted: #182533; --ui-contrast-line: #324353;
}
:root[data-theme="light"] {
  color-scheme: light; --bg-main: #f1f5fa; --bg-side: #ffffff; --bg-active: #d5e7f7;
  --bg-msg-in: #ffffff; --bg-msg-out: #dcebf9; --text-primary: #172537;
  --text-secondary: #4b6075; --accent: #09619b; --border: #c5d3e1;
  --ui-focus: #09619b; --ui-button-text: #ffffff; --ui-surface-hover: #d5e7f7;
  --ui-panel: #ffffff; --ui-muted: #ffffff; --ui-contrast-line: #c5d3e1;
}
:root[data-theme="graphite"] {
  color-scheme: dark; --bg-main: #181b20; --bg-side: #242931; --bg-active: #374452;
  --bg-msg-in: #2a3039; --bg-msg-out: #394a55; --text-primary: #f2f5f8;
  --text-secondary: #bcc6d2; --accent: #6f9fc2; --border: #414b55;
  --ui-focus: #9ccef2; --ui-button-text: #111c27; --ui-surface-hover: #374452;
  --ui-panel: #242931; --ui-muted: #2a3039; --ui-contrast-line: #414b55;
}
:root[data-theme="ocean"] {
  color-scheme: dark; --bg-main: #062535; --bg-side: #08374b; --bg-active: #15566b;
  --bg-msg-in: #104157; --bg-msg-out: #12617c; --text-primary: #ecfaff;
  --text-secondary: #afd6e2; --accent: #147a9b; --border: #1d566b;
  --ui-focus: #75d8f6; --ui-button-text: #ffffff; --ui-surface-hover: #15566b;
  --ui-panel: #08374b; --ui-muted: #104157; --ui-contrast-line: #1d566b;
}
:root[data-theme="emerald"] {
  color-scheme: dark; --bg-main: #092a24; --bg-side: #133a30; --bg-active: #235e4e;
  --bg-msg-in: #164135; --bg-msg-out: #1d654e; --text-primary: #ecfff6;
  --text-secondary: #b8e1d1; --accent: #178563; --border: #285b4d;
  --ui-focus: #8cf2c8; --ui-button-text: #ffffff; --ui-surface-hover: #235e4e;
  --ui-panel: #133a30; --ui-muted: #164135; --ui-contrast-line: #285b4d;
}
:root[data-theme="lavender"] {
  color-scheme: light; --bg-main: #f3effc; --bg-side: #fdfaff; --bg-active: #e0d3f4;
  --bg-msg-in: #ffffff; --bg-msg-out: #e8ddf7; --text-primary: #312444;
  --text-secondary: #685878; --accent: #69429b; --border: #d9cbe8;
  --ui-focus: #69429b; --ui-button-text: #ffffff; --ui-surface-hover: #e0d3f4;
  --ui-panel: #fdfaff; --ui-muted: #ffffff; --ui-contrast-line: #d9cbe8;
}
:root[data-theme="sand"] {
  color-scheme: light; --bg-main: #f5efe4; --bg-side: #fffaf0; --bg-active: #e9dcc3;
  --bg-msg-in: #fffdf9; --bg-msg-out: #efdfbf; --text-primary: #3b3021;
  --text-secondary: #675746; --accent: #88602b; --border: #dbceb8;
  --ui-focus: #88602b; --ui-button-text: #ffffff; --ui-surface-hover: #e9dcc3;
  --ui-panel: #fffaf0; --ui-muted: #fffdf9; --ui-contrast-line: #dbceb8;
}
:root[data-theme="burgundy"] {
  color-scheme: dark; --bg-main: #270d1b; --bg-side: #381321; --bg-active: #5b2b40;
  --bg-msg-in: #462137; --bg-msg-out: #673049; --text-primary: #fff2f4;
  --text-secondary: #e0b9c7; --accent: #a94f73; --border: #60334a;
  --ui-focus: #f6b0cc; --ui-button-text: #ffffff; --ui-surface-hover: #5b2b40;
  --ui-panel: #381321; --ui-muted: #462137; --ui-contrast-line: #60334a;
}
:root[data-theme="midnight"] {
  color-scheme: dark; --bg-main: #090f29; --bg-side: #131d3d; --bg-active: #273568;
  --bg-msg-in: #192448; --bg-msg-out: #263f73; --text-primary: #f4f6ff;
  --text-secondary: #b3c3e8; --accent: #426fbe; --border: #303d65;
  --ui-focus: #96bcff; --ui-button-text: #ffffff; --ui-surface-hover: #273568;
  --ui-panel: #131d3d; --ui-muted: #192448; --ui-contrast-line: #303d65;
}
:root[data-theme="contrast"] {
  color-scheme: dark; --bg-main: #050505; --bg-side: #131313; --bg-active: #1f1f1f;
  --bg-msg-in: #101010; --bg-msg-out: #353535; --text-primary: #ffffff;
  --text-secondary: #ffffff; --accent: #ffda00; --border: #ffffff;
  --ui-focus: #ffda00; --ui-button-text: #000000; --ui-surface-hover: #1f1f1f;
  --ui-panel: #131313; --ui-muted: #101010; --ui-contrast-line: #ffffff;
}

/* Override legacy hard-coded styling with a common palette for high-visibility components. */
html, body { background:var(--bg-main);color:var(--text-primary); }
.chat-swipe-row > .chat-item { background:var(--bg-side); }
.chat-swipe-row > .chat-item.active { background:var(--bg-active);box-shadow:inset 4px 0 0 var(--ui-focus); }
@media(hover:hover){.chat-swipe-row > .chat-item:not(.active):hover{background:var(--ui-surface-hover);}}
.message-author,.message-forward-box,.reply-quote-author,.pinned-msg-title {color:var(--accent);}
.reply-quote{border-left-color:var(--accent);}
.pinned-msg-bar {background:var(--bg-side);border-color:var(--border);}
.pinned-msg-text,.reply-quote-text {color:var(--text-secondary);}
.btn-header-action,.mobile-action-trigger,.chat-swipe-action,.btn-font-size,
.btn-empty-action,.btn-modal-action,.v4-action,.v41-button {
  color:var(--text-primary); background:var(--bg-active);
}
#btnSidebarNewChat,.btn-empty-action,.v41-main-action,.v41-button.primary,
.v4-pill.active {background:var(--accent);color:var(--ui-button-text);}
.btn-font-size.active{background:var(--bg-active)!important;color:var(--text-primary)!important;border-color:var(--accent)!important;}
.btn-font-size{background:var(--bg-main)!important;color:var(--text-primary)!important;border-color:var(--border)!important;}
.font-settings-drawer{background:var(--bg-side)!important;border-color:var(--accent)!important;}
.v4-sidebar-search button {background:var(--accent);color:var(--ui-button-text);}
.modal-box,.bottom-sheet-box,.chess-dialog,.v4-dialog,.v41-panel {background:var(--bg-side);color:var(--text-primary);}
input:not([type=checkbox]),textarea,select {color:var(--text-primary);}
button:focus-visible,[role="button"]:focus-visible,input:focus-visible,select:focus-visible{
 outline:3px solid var(--ui-focus);outline-offset:2px;
}
.btn-icon,.btn-header-action,.btn-modal-action,.chess-button,.v41-button,.theme-choice{
 min-height:44px;touch-action:manipulation;
}
#themePicker {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;}
.theme-choice {display:flex;align-items:center;gap:10px;padding:10px;border:2px solid var(--border);border-radius:12px;background:var(--bg-main);color:var(--text-primary);text-align:left;cursor:pointer;}
.theme-choice[aria-pressed="true"] {border-color:var(--ui-focus);outline:2px solid var(--ui-focus);}
.theme-swatch {width:31px;height:31px;border-radius:8px;border:1px solid var(--border);flex-shrink:0;}
.theme-label {font-size:13px;font-weight:650;}
.theme-group-title{font-size:14px;font-weight:700;margin:12px 0 4px;}
@media(max-width:410px){#themePicker{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.theme-choice{padding:7px;gap:6px}.theme-swatch{width:25px;height:25px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* UI/UX sweep: large reliable navigation targets on desktop and touchscreens. */
#btnBackToList{
  flex:0 0 48px;min-width:48px;min-height:48px;
  border-radius:12px;color:var(--accent);touch-action:manipulation;
}
#btnBackToList:focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px;}
.sidebar-header .btn-icon,.input-bar .btn-attach,
.input-bar .btn-send,.input-bar .btn-mic{
  min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  touch-action:manipulation;
}
@media(max-width:768px){
  .chat-header{padding-left:max(5px,env(safe-area-inset-left));
    padding-right:max(8px,env(safe-area-inset-right));gap:6px;}
  .chat-header-info{min-width:0;overflow:hidden;}
  .chat-header-title{overflow:hidden;text-overflow:ellipsis;}
  .input-bar{padding-left:max(9px,env(safe-area-inset-left));
    padding-right:max(9px,env(safe-area-inset-right));}
}

/* Profile remains usable on desktop and Safari/PWA even with 10 choices. */
#profileModal .modal-box{max-height:min(90dvh,820px);overflow-y:auto;overscroll-behavior:contain;}
#themePicker .theme-choice{min-height:48px;}
.modal-box input:not([type=checkbox]),.auth-tab.active{color:var(--text-primary)!important;}
.btn-modal-action{color:var(--ui-button-text);}
@media(max-width:768px){#profileModal .modal-box{max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));}}