:root { --app-viewport-height: 100dvh; --app-viewport-top: 0px; --chat-keyboard-open: 0; --safe-area-top: env(safe-area-inset-top); }
html { height: 100%; min-height: 100%; background-color: #d9d0ff; background-image: url('../assets/daymode.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
:root[data-theme="dark"] html { background-color: #080416; background-image: url('../assets/darkmode.jpg'); }
html.standalone-pwa, html.standalone-pwa body, html.standalone-pwa .app-shell { height: 100lvh; min-height: 100lvh; }
body { height: var(--app-viewport-height, 100dvh); min-height: 100svh; }
.app-shell { height: var(--app-viewport-height, 100dvh); min-height: 100svh; }
.app-content-scroll { min-height: 0; padding-bottom: calc(82px + max(12px, env(safe-area-inset-bottom))); }
.bottom-nav { bottom: max(12px, env(safe-area-inset-bottom)); }
.app-update-button { position: relative; display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--glass-border)); border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--glass-strong) 84%, transparent); box-shadow: 0 8px 22px rgba(74, 55, 148, .2), inset 0 1px rgba(255,255,255,.75); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); }
.app-update-button[hidden] { display: none !important; }
.app-update-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-update-button[data-state="checking"] svg, .app-update-button[data-state="installing"] svg { animation: app-update-spin .8s linear infinite; }
.app-update-button[data-state="available"] { color: white; background: linear-gradient(145deg, var(--accent-2), var(--accent)); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent); }
.app-update-button[data-state="available"]::after { content: ""; position: absolute; inset: 2px; border: 2px solid color-mix(in srgb, var(--cyan) 75%, white); border-radius: 50%; pointer-events: none; }
.app-update-button:disabled { cursor: wait; opacity: .75; }
.settings-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 5px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.notification-row { width: 100%; text-align: left; color: inherit; border: 0; cursor: pointer; }
.notification-chevron { flex: 0 0 auto; margin-left: 8px; color: var(--muted); transition: transform .18s; }
.notification-row[aria-expanded="true"] .notification-chevron { transform: rotate(180deg); }
.notification-options[hidden] { display: none !important; }
.notification-options .settings-row { border-top: 1px solid var(--line); }
.settings-logout { margin-top: 24px; }
@keyframes app-update-spin { to { transform: rotate(360deg); } }
.app-update-button { position: relative; display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--glass-border)); border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--glass-strong) 84%, transparent); box-shadow: 0 8px 22px rgba(74, 55, 148, .2), inset 0 1px rgba(255,255,255,.75); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); }
.app-update-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-update-button[data-state="checking"] svg, .app-update-button[data-state="installing"] svg { animation: app-update-spin .8s linear infinite; }
.app-update-button[data-state="available"] { color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent)); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 38%, transparent); }
.app-update-button[data-state="available"]::after { content: ""; position: absolute; inset: 2px; border: 2px solid color-mix(in srgb, var(--cyan) 75%, #fff); border-radius: 50%; pointer-events: none; }
.app-update-button:disabled { cursor: wait; opacity: .75; }
.settings-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 5px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
@keyframes app-update-spin { to { transform: rotate(360deg); } }
.filter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 8px 12px; width: 100%; align-items: end; }
.filter-row > label { display: grid; grid-template-rows: auto 44px; gap: 4px; min-width: 0; width: 100%; }
.filter-row > .filter-category { grid-column: 1 / -1; }
.filter-row > .filter-date span { color: var(--muted); font-size: 12px; line-height: 16px; }
.filter-row select, .filter-row input { display: block; box-sizing: border-box; min-width: 0; width: 100%; max-width: 100%; height: 44px; padding-inline: 11px; font-size: 16px; }

body.chat-open .topbar { display: none !important; }
body.chat-open #appContentScroll { overflow: hidden; overscroll-behavior: none; padding: 0; }
body.chat-open .topbar { display: none !important; }
body.chat-open #chatScreen {
  position: fixed; z-index: 4; top: calc(var(--chat-viewport-top, 0px) + var(--safe-area-top));
  bottom: auto; left: 0; right: 0;
  width: min(100%, 720px); height: calc(var(--chat-viewport-height, 100dvh) - var(--chat-viewport-top, 0px) - var(--safe-area-top) - var(--chat-nav-clearance, calc(80px + max(12px, env(safe-area-inset-bottom))))); min-height: 0; margin-inline: auto;
  padding: 10px 16px 0; overflow: hidden; display: flex; flex-direction: column;
  background: transparent; overscroll-behavior: none;
}
body.chat-open #chatScreen > .page-heading { flex: 0 0 auto; margin: 0 0 6px; padding: 2px 4px; }
body.chat-open #chatScreen > .page-heading h2 { margin: 0; font-size: clamp(19px, 5vw, 22px); line-height: 1.2; }
body.chat-open #chatScreen > .page-heading h2 { margin: 0; font-size: clamp(19px, 5vw, 22px); line-height: 1.2; }
body.chat-open .chat-panel {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; height: 100%;
  padding: 0 8px 8px; gap: 8px; overflow: hidden;
  border: 0; border-radius: 0; box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.chat-open .chat-toolbar { flex: 0 0 auto; min-height: 26px; }
body.chat-open .chat-messages {
  flex: 1 1 0; min-height: 0; max-height: none; width: 100%; padding: 8px 4px 12px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; scrollbar-width: thin; overflow-anchor: none;
}
@media (max-height: 700px) { body.chat-open #chatScreen { padding-top: 4px; } body.chat-open #chatScreen > .page-heading { margin-bottom: 2px; } body.chat-open .chat-toolbar { min-height: 22px; } body.chat-open .chat-panel { gap: 5px; } }
body.chat-open .chat-message { flex-shrink: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
body.chat-open .chat-message.gesture-active { transition: transform .1s ease-out; }
body.chat-open .chat-composer {
  flex: 0 0 auto; flex-wrap: wrap; width: 100%; margin: 0; gap: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--glass-border));
  background: color-mix(in srgb, var(--glass-strong) 86%, rgba(221, 214, 255, .48));
  color: var(--ink); box-shadow: 0 8px 26px rgba(60, 48, 120, .13), inset 0 1px rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(24px) saturate(155%); backdrop-filter: blur(24px) saturate(155%);
}
body.chat-open .chat-composer input#chatText { min-width: 0; flex: 1 1 90px; min-height: 42px; font-size: 16px; color: var(--ink); caret-color: var(--accent); }
body.chat-open .chat-composer input#chatText::placeholder { color: color-mix(in srgb, var(--muted) 80%, #9990ae); opacity: 1; }
body.chat-open .chat-composer .chat-attach, body.chat-open .chat-composer button { flex: 0 0 38px; }
body.chat-open #shareExpense, body.chat-open .chat-attach { background: color-mix(in srgb, var(--accent) 9%, var(--glass-strong)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent); }
body.chat-open #sendChat { background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: #fff; }
body.chat-open .chat-hint { flex: 0 0 auto; padding-bottom: 2px; }
body.chat-open .bottom-nav { z-index: 12; bottom: max(12px, env(safe-area-inset-bottom)); }
body.chat-keyboard-open.chat-open #chatScreen { top: calc(var(--chat-viewport-top, 0px) + var(--safe-area-top)); height: calc(var(--chat-viewport-height, 100dvh) - var(--chat-viewport-top, 0px) - var(--safe-area-top)); padding-top: 4px; }
body.chat-keyboard-open.chat-open #chatScreen > .page-heading { min-height: 30px; margin-bottom: 3px; }
body.chat-keyboard-open.chat-open .bottom-nav,
body.chat-keyboard-open.chat-open #addFab,
body.chat-keyboard-open.chat-open #actionMenu { display: none !important; }
body.chat-keyboard-open.chat-open .chat-panel { padding-bottom: 4px; }
body.chat-keyboard-open.chat-open .chat-hint { display: none; }
body.chat-keyboard-open.chat-open .chat-messages { overscroll-behavior: none; }

.chat-composer #chatText { background: transparent !important; }
.reply-preview { display: flex; flex: 1 0 100%; min-width: 0; align-items: center; gap: 10px; padding: 7px 10px; border-left: 3px solid var(--accent); border-radius: 9px; background: color-mix(in srgb, var(--accent) 7%, var(--glass-strong)); }
.reply-preview[hidden] { display: none !important; }
.reply-preview-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.reply-preview-copy strong, .reply-preview-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview-copy strong { font-size: .75rem; color: var(--accent); }
.reply-preview-copy span { font-size: .78rem; color: var(--muted); }
.cancel-reply { border: 0; border-radius: 50%; width: 30px; height: 30px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--ink); }
.chat-message { position: relative; }
.chat-message { background: rgba(130, 111, 175, .20); }
.chat-message.mine { background: rgba(111, 83, 222, .27); }
.message-reply-quote { display: grid; gap: 2px; margin: 0 0 7px; padding: 6px 8px; border-left: 3px solid var(--accent); border-radius: 7px; background: color-mix(in srgb, var(--accent) 8%, var(--glass-strong)); }
.message-reply-quote strong { color: var(--accent); font-size: .7rem; }
.message-reply-quote span { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-action-sheet { position: fixed; inset: auto; width: min(82vw, 310px); max-width: none; max-height: min(65dvh, 280px); margin: 0; padding: 12px; border: 1px solid var(--glass-border); border-radius: 22px; color: var(--ink); background: color-mix(in srgb, var(--glass-strong) 92%, transparent); box-shadow: 0 20px 56px rgba(30, 20, 73, .22), var(--shadow); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); overflow: auto; }
.chat-action-sheet::backdrop { background: rgba(21, 14, 47, .26); backdrop-filter: blur(3px); }
.chat-action-sheet h2 { margin: 5px 8px 12px; font-size: 1rem; }
.chat-action-sheet button { width: 100%; min-height: 48px; border: 0; border-radius: 13px; color: var(--ink); background: color-mix(in srgb, var(--accent) 7%, var(--glass-strong)); font-size: 1rem; }
.chat-action-sheet button + button { margin-top: 6px; }
.chat-action-sheet .delete-message-action { color: var(--danger); }
.chat-action-sheet button[hidden] { display: none !important; }
:root[data-theme="dark"] body.chat-open .chat-composer { background: color-mix(in srgb, var(--glass-strong) 88%, rgba(23, 14, 59, .52)); border-color: var(--glass-border); box-shadow: 0 8px 26px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.12); }
:root[data-theme="dark"] .app-update-button { background: color-mix(in srgb, var(--glass-strong) 90%, #080416); border-color: var(--glass-border); box-shadow: 0 8px 22px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.12); }
:root[data-theme="dark"] .app-update-button[data-state="available"] { background: linear-gradient(145deg, var(--accent-2), var(--accent)); }
:root[data-theme="dark"] body.chat-open .chat-message { background: rgba(133, 112, 193, .23); }
:root[data-theme="dark"] body.chat-open .chat-message.mine { background: rgba(102, 80, 201, .31); }
:root[data-theme="dark"] body.chat-open .chat-composer input#chatText::placeholder { color: #c7bee9; }
:root[data-theme="dark"] .chat-action-sheet { background: color-mix(in srgb, var(--glass-strong) 94%, #080416); }
:root[data-theme="dark"] .app-update-button { background: color-mix(in srgb, var(--glass-strong) 90%, #080416); border-color: var(--glass-border); box-shadow: 0 8px 22px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.12); }
:root[data-theme="dark"] .app-update-button[data-state="available"] { background: linear-gradient(145deg, var(--accent-2), var(--accent)); }
@media (max-width: 380px) { body.chat-open #chatScreen { padding-inline: 10px; } body.chat-open .chat-panel { padding-inline: 3px; } }
@media (prefers-reduced-motion: reduce) { .chat-message.gesture-active { transition: none !important; } }
@media (max-height: 700px) { body.chat-open #chatScreen { padding-top: 4px; } body.chat-open #chatScreen > .page-heading { margin-bottom: 2px; } body.chat-open .chat-toolbar { min-height: 22px; } body.chat-open .chat-panel { gap: 5px; } }