/* =========
   Base & Variables
   (Скомбинировано из ваших двух файлов. Светлая тема — по умолчанию)
   ========= */
:root {
  --primary: #111111;
  --accent: #FBBC05;
  --bg: #FFFFFF;
  --text: #202124;
  --muted: #5F6368;
  --card: rgba(255,255,255,0.85);
  --shadow: 0 10px 25px rgba(0,0,0,0.08);
  --hairline: rgba(0,0,0,0.14);
  --hairline-strong: rgba(0,0,0,0.20);

  /* iOS layer defaults (light) */
  --ios-bg-1: #FBFBFD;
  --ios-bg-2: #FFFFFF;
  --ios-text: #0A0A0A;
  --ios-muted: #6E6E73;
  --ios-border: var(--hairline);
  --ios-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --ios-shadow-strong: 0 12px 28px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.10);
  --ios-blue: #0A84FF;
  --ios-green: #34C759;
  --ios-green-2: #30D158;
}

/* Dark theme variables (из dark файла) */
html[data-theme="dark"] {
  --bg: #000000;
  --text: rgba(255,255,255,0.9);
  --muted: #8E8E93;
  --card: rgba(28,28,30,0.85);
  --hairline: rgba(255,255,255,0.15);
  --hairline-strong: rgba(255,255,255,0.25);

  --ios-bg-1: #000000;
  --ios-bg-2: #1C1C1E;
  --ios-text: rgba(255,255,255,0.9);
  --ios-muted: #8E8E93;
  --ios-border: var(--hairline);
  --ios-shadow: 0 6px 20px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15);
  --ios-shadow-strong: 0 12px 32px rgba(0,0,0,0.3), 0 3px 10px rgba(0,0,0,0.25);
}

/* Global */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Inter, Ubuntu, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--ios-text);
  background: linear-gradient(180deg, var(--ios-bg-1) 0%, var(--ios-bg-2) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
.muted { color: var(--muted); }

/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
.grid { display:grid; gap:14px; }
main { padding:42px 0 60px; }

header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  background: rgba(255,255,255,0.9);
  border-bottom: 0.5px solid var(--hairline);
}
html[data-theme="dark"] header {
  background: rgba(28, 28, 30, 0.7);
}

.nav { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; }
.user { display:flex; align-items:center; gap:12px; }
.actions { display:flex; align-items:center; gap:8px; }
.actions .btn { padding:8px 10px; border-radius:10px; }

/* Header chat icon (paper plane) */
.chat-icon { display:inline-flex; align-items:center; justify-content:center; padding:0; margin:0; border:0; background:transparent; color: var(--ios-text); line-height: 1; }
.chat-icon svg { width: 20px; height: 20px; display:block; }
.chat-icon:hover { opacity: .9; }

/* Buttons */
.btn { border:0; padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer; }
.btn-primary { background: var(--primary); color:#fff; border: 1px solid transparent; }
.btn-ghost { background: transparent; border:1px solid var(--hairline); color: var(--ios-text); }
html[data-theme="dark"] .btn-primary { background:#FFFFFF; color:#000000; }
html[data-theme="dark"] .btn-ghost { background: rgba(255,255,255,0.08); }
.btn-ghost:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.08); }

.badge { display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--ios-border); font-size:12px; color: var(--muted); }

.avatar { width:36px; height:36px; border-radius:50%; background: var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; 
  background-size: cover; background-position: center; }

/* Profile dropdown */
.profile-menu { position: relative; display: flex; align-items: center; }
.profile-menu .avatar { cursor: pointer; }
.profile-menu .menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 200px; padding: 6px;
  background: rgba(255,255,255,0.96);
  border: 0.5px solid var(--ios-border);
  border-radius: 12px; box-shadow: var(--ios-shadow);
  display: none; z-index: 50;
}
/* Показ меню по клику */
.profile-menu.is-open .menu, .profile-menu:focus-within .menu { display: block; }
.profile-menu .menu-item {
  display: flex; align-items: center; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--ios-text);
  height: 44px; padding: 0 12px; border-radius: 8px; cursor: pointer; text-decoration: none; font-weight: 600;
  line-height: 1; box-sizing: border-box; font-size: 16px;
  -webkit-appearance: none; appearance: none; margin: 0; font-family: inherit;
}
.profile-menu .menu-item:focus-visible { outline: 2px solid rgba(0,0,0,0.2); outline-offset: 2px; }
.profile-menu .menu-item:hover { background: rgba(0,0,0,0.04); }
/* Dark dropdown should be opaque for readability */
html[data-theme="dark"] .profile-menu .menu { background: #1C1C1E; border-color: rgba(255,255,255,0.18); box-shadow: 0 12px 32px rgba(0,0,0,0.55); }
html[data-theme="dark"] .profile-menu .menu-item:hover { background: rgba(255,255,255,0.08); }

/* Tiles & cards (из ваших файлов) */
.tiles { grid-template-columns: repeat(4, 1fr); }
.tile {
  border-radius: 16px; padding: 16px;
  border: 0.5px solid var(--ios-border);
  background: #FFFFFF;
  box-shadow: var(--ios-shadow);
  display:flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 120px; text-align:center;
}
.tile h3 { margin:0; font-size:18px; }

/* iOS-style accent tiles (светлый) */
.tile.tile-action {
  background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F7 100%);
  color: var(--ios-text);
  border: 0.5px solid var(--hairline);
  border-radius: 22px;
  box-shadow: var(--ios-shadow);
  min-height: 110px;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.tile.tile-action:hover { transform: translateY(-1px); box-shadow: var(--ios-shadow-strong); filter: brightness(1.02); }

/* В тёмной теме экшн-плитки становятся нейтральными (как в dark файле) */
html[data-theme="dark"] .tile { background:#1C1C1E; color: var(--ios-text); }
html[data-theme="dark"] .tile.tile-action {
  background:#1C1C1E;
  border: 0.5px solid var(--hairline);
  box-shadow: var(--ios-shadow);
}

/* KPI */
.kpi-wrap { margin-top:18px; }
.kpi { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.kpi .item { padding:12px; border-radius:12px; border: 0.5px solid var(--ios-border); background:#fff; text-align:center; box-shadow: var(--ios-shadow); }
.kpi .num { font-weight:800; font-size:22px; }
.kpi .lbl { color: var(--muted); }
html[data-theme="dark"] .kpi .item { background:#1C1C1E; color: var(--ios-text); }

/* Sections & cards */
.sections { grid-template-columns: 2fr 1.2fr; margin-top:18px; }
.card {
  background: rgba(255,255,255,0.72);
  border: 0.5px solid var(--ios-border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--ios-shadow);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}
html[data-theme="dark"] .card {
  background: rgba(255,255,255,0.06);
  border-color: var(--hairline);
  color: var(--ios-text);
}
.list { list-style:none; padding:0; margin:0; }
.list li { display:flex; justify-content: space-between; padding:10px 0; border-bottom: 0.5px solid var(--hairline); }
.list li:last-child { border-bottom: 0; }

.row.gap { margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }

/* Footer */
footer { border-top: 0.5px solid var(--hairline); padding:20px 0; color: var(--muted); }

/* Theme switcher (UI) */
.theme-switch { display:flex; align-items:center; gap:10px; }
.theme-switch input { display:none; }
.theme-switch .slider {
  width: 46px; height: 26px; border-radius: 999px;
  position: relative; display:inline-block;
  background: var(--hairline-strong);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
  transition: background .2s ease;
}
.theme-switch .slider::before {
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform .2s ease;
}
.theme-switch input:checked + .slider { background: #3b3b3b; }
.theme-switch input:checked + .slider::before { transform: translateX(20px); }
.theme-switch .theme-label { font-size: 14px; color: var(--muted); }

/* Responsive */
@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .sections { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
}

/* --- Forms & Inputs (minimal, iOS-like) --- */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.label { font-weight:600; font-size:14px; color: var(--muted); }
.input, .select, .textarea {
  width:100%; padding:12px 12px; border-radius:12px;
  border: 0.5px solid var(--ios-border);
  background:#fff; color: var(--ios-text);
  box-shadow: var(--ios-shadow);
}
.textarea { min-height: 110px; }
html[data-theme="dark"] .input, 
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea { background:#1C1C1E; color: var(--ios-text); }

.form-row { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 720px) { .form-row { grid-template-columns: 1fr; } }

/* Simple tabs-nav */
.navmenu { display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 18px; }
.navmenu a {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; text-decoration:none; font-weight:600;
  border: 1px solid var(--hairline);
  color: var(--ios-text);
  background: rgba(255,255,255,0.8);
  box-shadow: var(--ios-shadow);
}
html[data-theme="dark"] .navmenu a { background: rgba(255,255,255,0.06); }
.navmenu a.active { border-color: var(--primary); }

/* Simple table */
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:12px; border-bottom: 0.5px solid var(--hairline); text-align:left; }
.table th { font-size: 13px; color: var(--muted); font-weight:700; }
.table tr:hover td { background: rgba(0,0,0,0.03); }
html[data-theme="dark"] .table tr:hover td { background: rgba(255,255,255,0.05); }

/* Placeholder blocks */
.placeholder {
  height: 180px; border-radius: 14px; border: 0.5px solid var(--ios-border);
  background: rgba(255,255,255,0.7); display:flex; align-items:center; justify-content:center;
  color: var(--muted); box-shadow: var(--ios-shadow);
}
html[data-theme="dark"] .placeholder { background: rgba(255,255,255,0.06); }

/* Utility */
.spacer { height: 8px; }

/* === Strict grayscale adjustments === */
.navmenu { display:none !important; } /* hide top menu completely */
.tile-action { /* neutral action tile */
  background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F7 100%);
}
html[data-theme="dark"] .tile-action { background:#1C1C1E; }

/* Buttons: strict */
.btn-primary { background: var(--primary); color:#fff; }
html[data-theme="dark"] .btn-primary { background:#FFFFFF; color:#000000; }

/* Mobile tuning */
@media (max-width: 480px) {
  header .user .btn { display:none; } /* keep header clean on mobile */
  .container { padding: 12px; }
  .btn { padding: 12px 14px; border-radius: 14px; }
  h1 { font-size: 20px; }
}

/* No underlines on links (strict) */
a { text-decoration: none; color: inherit; }
a:hover, a:focus { text-decoration: none; }
.btn { text-decoration: none; }
.tile h3 { text-decoration: none; }

/* Sun/Moon icons for theme switch */
.theme-switch { gap:8px; }
.theme-switch .icon { font-size:14px; line-height:1; width:18px; text-align:center; user-select:none; }
.theme-switch .sun { display:inline-block; }
.theme-switch .moon { display:none; }
.theme-switch input:checked ~ .sun { display:none; }
.theme-switch input:checked ~ .moon { display:inline-block; }

/* Inline sun/moon icons inside the knob */
:root {
  --icon-sun: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/></svg>");
  --icon-moon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/></svg>");
}

.theme-switch .slider::before {
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:#fff center/14px 14px no-repeat;
  background-image: var(--icon-sun);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform .2s ease, background-image .2s ease, background-color .2s ease;
}

.theme-switch input:checked + .slider::before {
  transform: translateX(20px);
  background-image: var(--icon-moon);
}

/* Hide any leftover external icon spans if present */
.theme-switch .icon { display:none !important; }

/* --- Chat layout --- */

/* Telegram-like shell: left nav, middle list, right conversation */
.tg-shell { display:grid; gap:14px; margin-top:14px; grid-template-columns: 60px 360px 1fr; }
.tg-nav { padding:8px; display:flex; justify-content:space-between; }
.tg-nav .nav-stack { display:flex; flex-direction:column; gap:8px; width:100%; align-items:center; }
.tg-nav .nav-btn { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; border:1px solid var(--hairline); background: transparent; text-decoration:none; font-size:18px; }
.tg-nav .nav-btn:hover { background: rgba(0,0,0,0.04); }
html[data-theme="dark"] .tg-nav .nav-btn:hover { background: rgba(255,255,255,0.08); }

.tg-list { display:flex; flex-direction:column; }
.tg-list-header { display:flex; align-items:center; justify-content:space-between; padding:6px 2px 10px; border-bottom: 0.5px solid var(--hairline); }
.tg-list-header .title { font-weight:800; }

.chat-list { list-style:none; padding:0; margin:0; }
.chat-item { padding:8px 10px; border-radius:10px; cursor:pointer; font-weight:600; }
.chat-item:hover, .chat-item.active { background: rgba(0,0,0,0.04); }
html[data-theme="dark"] .chat-item:hover, html[data-theme="dark"] .chat-item.active { background: rgba(255,255,255,0.08); }

/* Chat list row like Telegram */
.chat-row { display:flex; align-items:center; gap:10px; }
.avatar.sm { width:36px; height:36px; font-size:14px; }
.chat-row .meta { flex:1; min-width:0; }
.chat-row .top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.chat-row .name { font-weight:700; }
.chat-row .time { font-size:12px; color: var(--muted); white-space:nowrap; }
.chat-row .bottom { display:flex; align-items:center; gap:6px; }
.chat-row .preview { color: var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge.unread { display:inline-block; width:8px; height:8px; border-radius:50%; background: var(--ios-blue); }

.chat-conversation { display:flex; flex-direction:column; min-height: 60vh; }
.chat-header { display:flex; align-items:center; gap:8px; padding: 8px 8px; border-bottom: 0.5px solid var(--hairline); margin-bottom: 6px; }
.chat-peer { display:flex; align-items:center; gap:10px; }
.chat-peer .peer-title { font-weight:800; }
.chat-peer .peer-sub { font-size:12px; color: var(--muted); }
.chat-messages { padding: 8px 10px 76px; display:flex; flex-direction:column; gap:8px; overflow:auto; flex:1; }
.chat-composer { display:flex; gap:10px; margin-top: 10px; }

.msg { display:flex; padding:2px 0; }
.msg .bubble { position:relative; max-width: 75%; background: rgba(0,0,0,0.04); border-radius: 14px; padding: 8px 10px; }
.msg .bubble .time { position:absolute; bottom:6px; right:10px; font-size:11px; color: var(--muted); }
.msg .attachments { margin-top: 6px; display:flex; gap:6px; flex-wrap:wrap; }
.msg .attachments img { max-width: 240px; max-height: 180px; border-radius: 10px; display:block; }
.msg .attachments a { font-size: 13px; color: var(--ios-text); border: 1px solid var(--hairline); padding:4px 8px; border-radius: 10px; }
.msg .author { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.msg.own { justify-content: flex-end; }
.msg.own .bubble { background: #111; color:#fff; }
html[data-theme="dark"] .msg .bubble { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .msg.own .bubble { background: #fff; color:#000; }

.day-sep { align-self:center; font-size:12px; color: var(--muted); padding:4px 10px; border-radius:999px; border:1px solid var(--hairline); margin:6px 0; background: rgba(255,255,255,0.7); }
html[data-theme="dark"] .day-sep { background: rgba(255,255,255,0.06); }

@media (max-width: 920px) { .chat-wrap { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .tg-shell { grid-template-columns: 60px 1fr; } .tg-conv { grid-column: span 1; }
  .tg-list { display:none; } }
@media (max-width: 720px) { .tg-shell { grid-template-columns: 1fr; } .tg-nav { display:none; } }

/* --- Home dashboard layout --- */
.home-grid { display:grid; gap:32px; grid-template-columns: 420px 1fr; align-items:start; margin-top:18px; }

.home-left { display:flex; flex-direction:column; gap: 8px; }
.home-left .actions-grid { margin-top: 12px; }
@media (max-width: 1000px) { .home-grid { grid-template-columns: 1fr; } }

.actions-grid { display:grid; gap:14px; grid-template-columns: 1fr 1fr; }
.actions-grid .tile { min-height: 120px; }

/* Dashboard window with tabs */
.dash-card { padding-top: 12px; display:flex; flex-direction:column; border-radius: 20px; align-self:flex-start; }
.dash-top { display:flex; align-items:center; justify-content:flex-end; margin-bottom: 10px; }
.dash-now { font-weight:800; font-size:16px; color: var(--ios-text); }
.dash-tabs { display:flex; width:100%; background: rgba(0,0,0,0.06); border: 1px solid var(--hairline); border-radius: 999px; padding:6px; gap:6px; }
html[data-theme="dark"] .dash-tabs { background: rgba(255,255,255,0.06); }
.dash-tab { border:0; background: transparent; padding:8px 14px; border-radius: 999px; font-weight:700; cursor:pointer; color: var(--ios-text); -webkit-text-fill-color: var(--ios-text); }
.dash-tab.active { background:#fff; box-shadow: var(--ios-shadow); color: var(--ios-text); -webkit-text-fill-color: var(--ios-text); }
html[data-theme="dark"] .dash-tab.active { background:#1C1C1E; }
/* Ensure tab labels readable in dark */
html[data-theme="dark"] .dash-tab { color: rgba(255,255,255,0.95); }

/* --- Mobile adaptations --- */
@media (max-width: 720px) {
  .container { padding: 12px; }
  .home-grid { grid-template-columns: 1fr; gap: 16px; }
  .dash-card { width: 100%; max-width: none; }
  .dash-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dash-tabs::-webkit-scrollbar { display: none; }
  .tile.tile-action { min-height: 96px; }
  /* Chat screen */
  .page-chat .tg-shell { grid-template-columns: 1fr !important; border-left: 0; border-right: 0; border-radius: 0; }
  .page-chat .chat-header { position: sticky; top: 0; z-index: 3; }
  .page-chat .chat-composer { position: sticky; bottom: 0; z-index: 3; }
  .page-chat .composer-pending { position: sticky; top: 48px; z-index: 2; }
  .page-chat .chat-messages { padding: 8px 10px 76px; display:flex; flex-direction:column; gap:8px; overflow:auto; flex:1; }
}
.dash-views { margin-top: 14px; padding-right: 6px; }
.dash-view { display:none; }
.dash-view.active { display:block; }

/* Mini chat in dashboard */
.mini-chat { display:flex; flex-direction:column; gap:8px; }
.mini-messages { max-height: 320px; overflow:auto; display:flex; flex-direction:column; gap:6px; }
.mini-composer { display:flex; gap:8px; }
.mini-msg { display:flex; }
.mini-msg .bubble { position:relative; max-width: 80%; background: rgba(0,0,0,0.04); border-radius: 12px; padding: 8px 10px; }
.mini-msg .bubble .time { display:none; }
.mini-msg .time-line { font-size: 10px; color: var(--muted); margin: 2px 6px 6px; align-self: flex-end; }
.mini-msg.own { justify-content:flex-end; }
.mini-msg.own .bubble { background: #111; color:#fff; }
html[data-theme="dark"] .mini-msg .bubble { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .mini-msg.own .bubble { background:#fff; color:#000; }

/* Notifications: only red accent */
.notif-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; font-size:12px; border-radius:999px; background:#D93025; color:#fff; }
.notif-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#D93025; }
.notif-card .list li { align-items:center; }
/* Narrow notification view */
.notif-narrow { max-width: 540px; }

/* Screen reader only */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0; }

/* Chip button */
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius: 999px; border:1px solid var(--hairline); background: rgba(255,255,255,0.9); color: inherit; text-decoration:none; font-weight:700; }
html[data-theme="dark"] .chip { background: rgba(255,255,255,0.08); }

/* --- Layout overrides (from VisBug intent, stabilized) --- */
/* Make left actions wider and push dashboard further right with a fixed width */
.home-grid { grid-template-columns: 640px 514px; gap: 44px; }
.home-left { max-width: 640px; }
.home-left .actions-grid { margin-top: 36px; }

/* Keep dashboard within a comfy width; internal content still scrolls */
.dash-card { width: 514px; max-width: 514px; }
.dash-tabs .dash-tab { flex: 0 0 auto; min-width: 112px; }
/* small nudge so time string doesn’t touch tabs */
.dash-now { margin-right: 12px; }

/* Toolbar rows inside views: align consistently */
#view-schedule .row,
#view-chat .row,
#view-notifications .row { align-items: center; justify-content: space-between; }

/* Small breathing space for the calendar chip */
.chip { margin-top: 6px; }

@media (max-width: 1000px) {
  .home-grid { grid-template-columns: 1fr; gap: 16px; }
  .dash-card { max-width: none; }
}
.dash-tabs { width: auto; align-self: flex-start; max-width: 360px; }

/* --- Chat layout (overrides to Telegram-like) --- */
:root {
  --tg-own: #3390EC;
  --tg-other: #FFFFFF;
  --tg-bg: #E7EBF0;
  --tg-list-bg: #FFFFFF;
}
html[data-theme="dark"] {
  --tg-bg: #0F0F10;
  --tg-list-bg: #1C1C1E;
}

.tg-shell { display:grid; gap:0 !important; margin-top:14px; grid-template-columns: 360px 1fr !important; min-height: calc(100vh - 220px); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
.tg-list { border-right: 1px solid var(--hairline); padding: 12px; background: var(--tg-list-bg); }
.tg-list.card { border-radius: 0; box-shadow: none; backdrop-filter: none; }
.tg-list .tg-list-header { display:flex; align-items:center; justify-content:space-between; padding: 4px 2px; border-bottom: 1px solid var(--hairline); }
.tg-list .chat-list { margin-top: 8px; max-height: calc(100vh - 320px); overflow:auto; }
.tg-list .chat-item { cursor:pointer; padding:10px 8px; border-radius: 12px; }
.tg-list .chat-item:hover { background: rgba(0,0,0,0.04); }
html[data-theme="dark"] .tg-list .chat-item:hover { background: rgba(255,255,255,0.06); }
.tg-list .chat-row { display:flex; gap:10px; align-items:center; }
.tg-list .avatar.sm { width: 44px; height: 44px; font-size: 14px; }
.tg-list .meta { flex: 1; display:flex; flex-direction:column; gap:4px; }
.tg-list .top { display:flex; align-items:center; justify-content:space-between; font-weight:700; }
.tg-list .time { font-size: 12px; color: var(--muted); }
.tg-list .bottom { display:flex; align-items:center; gap:6px; color: var(--muted); font-size: 13px; }
.tg-list .badge.unread { width: 10px; height: 10px; border-radius: 50%; background: var(--ios-text); border: 0; }

.tg-conv.card { border-radius: 0; box-shadow: none; backdrop-filter: none; padding:0; display:flex; flex-direction:column; background: linear-gradient(180deg, var(--tg-bg) 0%, var(--bg) 100%); }
.chat-header { display:flex; align-items:center; justify-content:space-between; padding: 8px 10px; border-bottom: 1px solid var(--hairline); background: var(--tg-list-bg); position: sticky; top: 0; z-index: 3; }
.chat-peer { display:flex; align-items:center; gap:10px; }
.peer-title { font-weight:800; }
.peer-sub { color: var(--muted); font-size: 12px; }
.chat-actions .btn { padding:8px 10px; border-radius: 10px; }

.chat-messages { padding: 8px 10px 76px; display:flex; flex-direction:column; gap:8px; overflow:auto; flex:1; }
.msg { display:flex; }
.msg .bubble { position:relative; max-width: 68%; background: var(--tg-other); border-radius: 14px; padding: 8px 12px; box-shadow: var(--ios-shadow); }
.msg .bubble .time { display:none; }
.msg .time-line { font-size: 11px; color: var(--muted); margin: 2px 6px 6px; }
.msg.own { justify-content: flex-end; }
.msg.own .bubble { background: rgba(0,0,0,0.10); color: var(--ios-text); box-shadow: var(--ios-shadow); border: 1px solid var(--hairline-strong); }
html[data-theme="dark"] .msg .bubble { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .msg.own .bubble { background: #FFFFFF; color:#000; border: 0; }
.msg .attachments { margin-top:6px; }
.msg .attachments img { max-width: 220px; border-radius: 10px; display:block; }
.msg .attachments a { font-size: 13px; color: var(--ios-text); border: 1px solid var(--hairline); padding:4px 8px; border-radius: 10px; }

.day-sep { align-self:center; font-size:12px; color: var(--muted); padding:4px 10px; border-radius:999px; border:1px solid var(--hairline); margin:10px 0; background: rgba(255,255,255,0.7); }
html[data-theme="dark"] .day-sep { background: rgba(255,255,255,0.06); }

.chat-composer { display:flex; gap:8px; padding: 10px; border-top: 1px solid var(--hairline); background: var(--tg-list-bg); position: sticky; bottom: 0; z-index: 3; }
.chat-composer .input { flex:1; }
.composer-pending { display:flex; gap:8px; flex-wrap:wrap; padding: 8px 10px; border-top: 1px solid var(--hairline); background: var(--tg-list-bg); }
.composer-pending .pend { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; border:1px solid var(--hairline); background: rgba(0,0,0,0.03); }
.composer-pending .pend .x { cursor:pointer; opacity:0.8; }
.composer-pending img { max-height: 64px; border-radius: 8px; display:block; }

/* Page-level full-screen adjustments for chat */
.page-chat main { padding: 0; }
.page-chat .container { max-width: 100%; padding: 0; }
.page-chat .tg-shell { min-height: calc(100vh - 72px); }
.page-chat .tg-conv { height: calc(100vh - 72px); display:flex; flex-direction:column; }
.page-chat .tg-list { height: calc(100vh - 72px); display:flex; flex-direction:column; }
.page-chat .tg-list .chat-list { flex: 1 1 auto; overflow:auto; max-height: none; }

/* Mobile master-detail behavior */
@media (max-width: 780px) {
  .mobile-back { display: inline-flex !important; }
  .page-chat .tg-shell { grid-template-columns: 1fr !important; }
  /* default: show list */
  .page-chat .tg-list { display: block; }
  .page-chat .tg-list.card { display: block !important; }
  .page-chat .tg-conv { display: none; }
  .page-chat .tg-conv.chat-conversation.card { display: none !important; }
  /* when conversation open */
  .page-chat.mobile-conv-open .tg-list { display: none; }
  .page-chat.mobile-conv-open .tg-list.card { display: none !important; }
  .page-chat.mobile-conv-open .tg-conv { display: flex; }
  .page-chat.mobile-conv-open .tg-conv.chat-conversation.card { display: flex !important; }
}
.page-chat .container > a.btn.btn-ghost:first-child,
.page-chat h1 { display: none; }

/* Chat-specific: fit three tabs in 360px column */
.page-chat .tg-list .dash-tabs { width: 100%; max-width: none; padding: 4px; gap: 4px; box-sizing: border-box; }
.page-chat .tg-list .dash-tabs .dash-tab { flex: 1 1 auto; min-width: 100px; padding: 8px 12px; }

/* Floating top tabs */
.tg-top-tabs { position: sticky; top: 0; z-index: 2; padding: 6px; background: var(--tg-list-bg); display:flex; gap:6px; overflow-x:auto; }
.tg-shell { position: relative; }
.tg-tab { border: 1px solid var(--hairline); background: var(--tg-list-bg); padding:6px 10px; border-radius: 999px; font-weight:700; cursor:pointer; margin-right: 6px; color: inherit; }
.tg-tab.active { background: #fff; box-shadow: var(--ios-shadow); }
html[data-theme="dark"] .tg-tab.active { background: #1C1C1E; }

@media (max-width: 1100px) {
  .tg-shell { grid-template-columns: 1fr !important; }
  .tg-list { display:none; }
}
@media (max-width: 720px) {
  .tg-shell { grid-template-columns: 1fr !important; }
}

/* Minor refinements */
.tg-tab.home { padding:6px 10px; font-weight:800; }
.chat-messages .msg .bubble .time { opacity: 0.85; }
html[data-theme="dark"] .tg-list .time { color: #A1A1A6; }
html[data-theme="dark"] .peer-sub { color: #A1A1A6; }

/* Improved dark theme contrast for chat */
html[data-theme="dark"] .tg-conv.card { background: linear-gradient(180deg, #0F0F10 0%, #131316 100%); }
html[data-theme="dark"] .chat-header { background: #1C1C1E; }
html[data-theme="dark"] .chat-composer { background: #1C1C1E; }
html[data-theme="dark"] .msg .bubble { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.92); }
html[data-theme="dark"] .msg .bubble .time { color: #C7C7CC; opacity: 0.9; }
html[data-theme="dark"] .tg-list .chat-item:hover { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .tg-list .badge.unread { background: #4EA3FF; }
.chat-actions .btn-home { font-weight: 700; }

/* Dark theme: tabs text white and clear active state */
html[data-theme="dark"] .tg-tab { color: #FFFFFF; background: #1C1C1E; border-color: rgba(255,255,255,0.18); }
html[data-theme="dark"] .tg-tab.active { background: #2C2C2E; border-color: #4EA3FF; color: #FFFFFF; box-shadow: 0 0 0 1px rgba(78,163,255,0.35); }
html[data-theme="dark"] .tg-tab.back { background: #2C2C2E; }

/* --- Calendar --- */
.cal-card { padding: 0; overflow: hidden; }
.cal-toolbar { padding: 12px; border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,0.9); }
html[data-theme="dark"] .cal-toolbar { background: rgba(255,255,255,0.06); }
.cal-title { font-size: 18px; }

.cal-grid { position: relative; }
.cal-grid.is-week { display: grid; grid-auto-rows: auto; }
.cal-row { display: grid; grid-template-columns: 72px repeat(7, 1fr); border-bottom: 1px solid var(--hairline); min-height: 60px; }
.cal-header-row { position: sticky; top: 0; z-index: 2; background: inherit; border-bottom: 1px solid var(--hairline); }
.cal-time-head { border-right: 1px solid var(--hairline); }
.cal-day-head { text-align: center; font-weight: 700; padding: 8px 0; border-right: 1px solid var(--hairline); }
.cal-day-head.is-today { color: var(--ios-blue); }

.cal-time { padding: 8px; font-size: 12px; color: var(--muted); border-right: 1px solid var(--hairline); }
.cal-cell { position: relative; border-right: 1px solid var(--hairline); }
.cal-cell::after { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background: var(--hairline); opacity: .5; }
.cal-events { position:absolute; left:0; right:0; top:0; bottom: calc(0px - 0px); pointer-events: none; }
.cal-event { position:absolute; background: rgba(10,132,255,0.12); color: var(--ios-text); border: 1px solid rgba(10,132,255,0.35); border-left-width: 4px; border-radius: 10px; padding: 6px 8px; box-sizing: border-box; overflow:hidden; cursor:pointer; pointer-events: auto; }
.cal-event-title { font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event-time { font-size: 12px; color: var(--muted); }
html[data-theme="dark"] .cal-event { background: rgba(78,163,255,0.18); color: rgba(255,255,255,0.92); border-color: rgba(78,163,255,0.55); }

/* All-day row */
.cal-allday-row { min-height: unset; }
.cal-allday-head { font-weight: 700; padding-top: 8px; }
.cal-allday { padding: 6px; border-right: 1px solid var(--hairline); min-height: 40px; }
.cal-allday.is-today { background: rgba(10,132,255,0.06); }
.cal-badge { display:inline-block; max-width: 100%; padding: 4px 8px; background: rgba(10,132,255,0.12); border: 1px solid rgba(10,132,255,0.35); border-radius: 999px; font-size: 12px; font-weight: 700; margin: 2px; cursor:pointer; }
html[data-theme="dark"] .cal-badge { background: rgba(78,163,255,0.18); border-color: rgba(78,163,255,0.55); color: rgba(255,255,255,0.92); }

/* Now line */
.cal-now { position:absolute; left:0; right:0; height:2px; background: #D93025; z-index: 1; box-shadow: 0 0 0 1px rgba(217,48,37,0.3); }

/* Month view */
.is-month { padding: 0 0 8px; }
.cal-month { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 120px; }
.cal-month-cell { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 6px; position: relative; }
.cal-month-cell.is-out { opacity: 0.6; }
.cal-month-cell.is-today { outline: 2px solid rgba(10,132,255,0.5); outline-offset: -2px; }
.cal-month-head { font-weight: 800; font-size: 12px; color: var(--muted); }
.cal-month-list { margin-top: 6px; display:flex; flex-direction:column; gap:4px; }
.cal-chip { display:inline-block; max-width: 100%; padding: 4px 8px; background: rgba(10,132,255,0.12); border: 1px solid rgba(10,132,255,0.35); border-radius: 8px; font-size: 12px; font-weight: 700; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; cursor:pointer; }
html[data-theme="dark"] .cal-chip { background: rgba(78,163,255,0.18); border-color: rgba(78,163,255,0.55); color: rgba(255,255,255,0.92); }

/* Day view simplifies to 1 day column; reuse same grid, we still render 7 but show 1 */
.cal-grid:not(.is-week) .cal-row { grid-template-columns: 72px 1fr; }
.cal-grid:not(.is-week) .cal-row > :nth-child(n+3) { display:none; }
.cal-grid:not(.is-week) .cal-header-row > :nth-child(n+3) { display:none; }

/* --- Mobile hard overrides (final) --- */
@media (max-width: 780px) {
  .home-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .home-left { max-width: none !important; }
  .actions-grid { grid-template-columns: 1fr !important; }
  .actions-grid .tile { min-height: 88px !important; }
  .dash-card { width: auto !important; max-width: none !important; }
  .dash-tabs .dash-tab { min-width: 96px !important; padding: 8px 10px !important; }
  #greeting, h1 { font-size: 20px; line-height: 1.25; }
}

/* --- Chat polish --- */
.day-sep {
  align-self: center;
  background: rgba(0,0,0,0.06);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--hairline);
}
html[data-theme="dark"] .day-sep { background: rgba(255,255,255,0.06); color: #A1A1A6; }

.chat-messages { padding: 8px 10px 76px; display:flex; flex-direction:column; gap:8px; overflow:auto; flex:1; }
.msg { padding: 2px 0; }
.msg .bubble {
  max-width: min(86vw, 560px);
  background: var(--tg-other);
  border: 1px solid var(--hairline);
  border-radius: 16px 16px 16px 8px;
  box-shadow: var(--ios-shadow);
}
.msg.own .bubble {
  border: 0;
  border-radius: 16px 16px 8px 16px;
}
.msg .author { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
html[data-theme="dark"] .msg .author { color: #A1A1A6; }
.msg .time-line { font-size: 11px; color: var(--muted); margin: 2px 6px 6px; }
html[data-theme="dark"] .msg .time-line { font-size: 11px; color: var(--muted); margin: 2px 6px 6px; }

/* Chat header/tabs compact */
.tg-top-tabs { position: sticky; top: 0; z-index: 2; padding: 6px; background: var(--tg-list-bg); display:flex; gap:6px; overflow-x:auto; }
.tg-top-tabs .tg-tab { white-space: nowrap; }
@media (max-width: 780px) {
  .tg-top-tabs { position: sticky; top: 0; z-index: 2; padding: 6px; background: var(--tg-list-bg); display:flex; gap:6px; overflow-x:auto; }
}

/* Composer safe-area support */
.chat-composer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

/* Back button only on mobile */
#back-button { display:none; }
@media (max-width: 900px) { #back-button { display:inline-flex; } }

/* Mobile chat modes (list vs conv) */
@media (max-width: 900px) {
  .page-chat .tg-shell { grid-template-columns: 1fr !important; }
  .page-chat .tg-list { display: none; }
  .page-chat .tg-conv { display: none; }
  #chat-root.mode-list .tg-list { display:block; }
  #chat-root.mode-conv .tg-conv { display:flex; flex-direction:column; }
}

@media (max-width: 900px) { #chat-root.mode-conv .tg-top-tabs { display:none; } }