/* ════════════════════════════════════════════════════════
zunexa-touch.css
طبقة اللمس الموحّدة (Mobile Touch Layer) + نظام Auto-Fit
لصفوف الأزرار (fit-1 → fit-4). نُقلت هنا حرفياً من ai.html
بدون أي تغيير فالمنطق — فقط الموقع الفيزيائي تغيّر.
تحمّل عبر:
════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════
MOBILE TOUCH LAYER — applies to every button/toggle on
the page (2026-09-04 pass). Three problems fixed globally
instead of per-component:
1) Touch targets < 44x44px on phones.
2) The gray tap-highlight flash + accidental text selection
when a button/toggle is tapped repeatedly on mobile.
3) `:hover` effects that only make sense with a mouse now
also fire an immediate `:active` state on touch, and
`:hover` itself is scoped to hover-capable pointers so it
doesn't "stick" after a tap on touchscreens.
════════════════════════════════════════════════════════ */
button,
.btn, [class*="-btn"], [class$="btn"],
.mode-chip, .model-sel-item, .persona-act-btn,
.toggle, [role="switch"], [role="button"],
input[type="checkbox"], input[type="radio"] {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
}
/* Guaranteed ≥44x44 hit area on phones/tablets, even for icon-only
buttons that are visually smaller — via an invisible ::after overlay
so the visible shape/size of the control never changes. */
@media (max-width: 1024px) {
button, .btn, [class*="-btn"], [class$="btn"],
.mode-chip, .model-sel-item, .persona-act-btn,
.toggle, [role="switch"], [role="button"] {
position: relative;
}
button::after, .btn::after, [class*="-btn"]::after, [class$="btn"]::after,
.mode-chip::after, .model-sel-item::after, .persona-act-btn::after,
.toggle::after, [role="switch"]::after, [role="button"]::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: max(100%, 44px);
height: max(100%, 44px);
pointer-events: none;
}
}
/* Hover only where a real hover device exists; touch gets an instant
:active response instead so nothing feels unresponsive on tap. */
@media (hover: hover) and (pointer: fine) {
button:hover, .btn:hover, [class*="-btn"]:hover, [class$="btn"]:hover,
.mode-chip:hover, .model-sel-item:hover, .persona-act-btn:hover,
.toggle:hover, [role="switch"]:hover, [role="button"]:hover {
filter: brightness(1.06);
}
}
@media (hover: none), (pointer: coarse) {
button:active, .btn:active, [class*="-btn"]:active, [class$="btn"]:active,
.mode-chip:active, .model-sel-item:active, .persona-act-btn:active,
.toggle:active, [role="switch"]:active, [role="button"]:active {
filter: brightness(0.92);
transform: scale(0.97);
}
}
/* ════════════════════════════════════════════════════════
AUTO-FIT BUTTON ROWS (2026-09-04) — driven by fitButtonRows()
in