/* ChatWave UX polish layer (v4.21). Loaded last; uses the theme variables so every palette keeps working.
   Only adds: readable contrast, comfortable touch targets, no iOS zoom-on-focus, clearer focus/active/disabled states. */

/* Contrast: muted text on the light background was just under 4.5:1 */
html:not(.dark){--muted:#586861}

/* Touch devices: inputs under 16px make iOS Safari zoom the page on focus */
@media (pointer:coarse){
  html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),
  html body textarea,
  html body select{font-size:16px}
  .icon-btn{min-width:44px;min-height:44px}
  .home-tab,.story-icon-btn{min-height:44px}

}

/* Small labels were 9–11px */
.bn-item{font-size:12px}
.bn-badge,.bell-badge,.unread-badge,.tab-badge{font-size:11px}

/* Bottom bar: soft blur and a non-colour marker for the current page */
.bottom-nav{background:color-mix(in srgb,var(--panel) 90%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.bn-item{position:relative}
.bn-item.active:not(.bn-add)::after{content:"";position:absolute;top:0;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:0 0 3px 3px;background:var(--accent)}

/* Focus: wrapped inputs showed no focus indicator because the input outline is removed */
.search-wrap:focus-within,.np-cap:focus-within{box-shadow:var(--ring);border-color:var(--accent)}

/* Buttons: pressed and disabled states */
.primary{transition:transform .12s,opacity .15s,box-shadow .15s}
.primary:active:not(:disabled){transform:scale(.98)}
.primary:disabled,.post-submit:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

/* Forms: no empty gap when there is no error */
.form-error:empty{display:none}

/* Scrolling lists should not chain into the page behind them */
.feed-body,.messages,.conversation-list{overscroll-behavior:contain}

/* Typography */
h1,h2,h3{text-wrap:balance}
p,.password-hint,.set-hint{text-wrap:pretty}

/* Reusable skeleton placeholder for loading states */
.cw-skel{border-radius:var(--r-sm,10px);background:linear-gradient(90deg,var(--panel-2) 25%,var(--border) 37%,var(--panel-2) 63%);background-size:400% 100%;animation:cwSkel 1.3s ease infinite}
@keyframes cwSkel{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.cw-skel{animation:none}.bn-item:active,.primary:active{transform:none}}