File size: 8.14Kb
/* ========================================
TOUCH DEVICE OPTIMIZATIONS
======================================== */
/* Prevent text selection on touch devices */
@media (hover: none) and (pointer: coarse) {
* {
-webkit-tap-highlight-color: rgba(157, 78, 221, 0.2);
-webkit-touch-callout: none;
user-select: none;
}
/* Allow text selection in inputs and messages */
input, textarea, .message p {
-webkit-touch-callout: default;
user-select: text;
}
}
/* Larger touch targets (minimum 44x44px) */
@media (hover: none) and (pointer: coarse) {
.icon-btn {
min-width: 52px;
min-height: 52px;
width: 52px;
height: 52px;
}
.room-item {
min-height: 52px;
padding: 14px 18px;
margin-bottom: 10px;
}
.room-action-btn {
min-width: 44px;
min-height: 44px;
padding: 10px;
font-size: 1.3rem;
}
.audio-btn {
min-width: 44px;
min-height: 44px;
width: 44px;
height: 44px;
}
.create-room button {
min-width: 48px;
min-height: 48px;
width: 48px;
height: 48px;
}
.create-room input {
min-height: 48px;
height: 48px;
font-size: 16px; /* Prevent zoom on iOS */
}
.input-area input {
min-height: 48px;
font-size: 16px; /* Prevent zoom on iOS */
padding: 14px 20px;
}
form input {
min-height: 48px;
font-size: 16px; /* Prevent zoom on iOS */
padding: 16px 20px;
}
form button {
min-height: 52px;
padding: 16px;
font-size: 1rem;
}
}
/* Touch-friendly hover states */
@media (hover: none) and (pointer: coarse) {
/* Remove hover effects, use active states instead */
.room-item:hover {
transform: none;
}
.room-item:active {
background: rgba(255, 255, 255, 0.12);
transform: scale(0.98);
}
.icon-btn:hover {
transform: none;
}
.icon-btn:active {
transform: scale(0.92);
}
.room-action-btn:hover {
transform: none;
}
.room-action-btn:active {
transform: scale(0.9);
color: #fff;
}
/* Always show room actions on touch devices */
.room-item .room-actions {
display: flex !important;
}
}
/* Smooth scrolling with momentum */
@media (hover: none) and (pointer: coarse) {
.messages-area,
.rooms-list,
.sidebar {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
}
/* Prevent pull-to-refresh on messages area */
@media (hover: none) and (pointer: coarse) {
.messages-area {
overscroll-behavior-y: contain;
}
body {
overscroll-behavior-y: none;
}
}
/* Better spacing for touch */
@media (hover: none) and (pointer: coarse) {
.message-row {
margin-bottom: 12px;
}
.message {
padding: 14px 20px;
font-size: 1rem;
line-height: 1.6;
}
.messages-area {
gap: 8px;
padding: 20px 16px;
}
}
/* Optimize input area for touch keyboards */
@media (hover: none) and (pointer: coarse) {
.input-area {
padding: 16px;
gap: 12px;
/* Add safe area for notched devices */
padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.chat-header {
/* Add safe area for notched devices */
padding-top: max(1.5rem, env(safe-area-inset-top));
}
}
/* Improve sidebar touch experience */
@media (hover: none) and (pointer: coarse) {
.sidebar {
/* Add safe areas for notched devices */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.sidebar-header {
padding: max(20px, calc(20px + env(safe-area-inset-top))) 20px 20px;
}
}
/* Better modal experience on touch */
@media (hover: none) and (pointer: coarse) {
.modal-overlay {
/* Prevent background scroll when modal is open */
position: fixed;
overflow: hidden;
}
.profile-card,
.auth-container {
/* Prevent accidental dismissal */
touch-action: pan-y;
}
}
/* Optimize auth pages for touch */
@media (hover: none) and (pointer: coarse) {
.auth-container {
padding: 2.5rem 2rem;
/* Add safe areas */
padding-top: max(2.5rem, calc(2.5rem + env(safe-area-inset-top)));
padding-bottom: max(2.5rem, calc(2.5rem + env(safe-area-inset-bottom)));
}
.lang-switcher a {
padding: 8px 12px;
margin: 0 4px;
display: inline-block;
}
}
/* Improve button feedback */
@media (hover: none) and (pointer: coarse) {
button, .btn, a[role="button"] {
transition: transform 0.1s ease, background 0.2s ease;
}
button:active, .btn:active, a[role="button"]:active {
transform: scale(0.95);
}
}
/* Better audio player for touch */
@media (hover: none) and (pointer: coarse) {
.custom-audio-player {
padding: 10px 16px 10px 10px;
min-width: 200px;
}
.audio-track {
height: 6px; /* Larger touch target */
cursor: pointer;
}
.audio-track::after {
content: '';
position: absolute;
top: -8px;
bottom: -8px;
left: 0;
right: 0;
/* Invisible larger touch area */
}
}
/* Optimize quote/reply for touch */
@media (hover: none) and (pointer: coarse) {
.quote-block {
padding: 12px 16px;
margin-bottom: 10px;
min-height: 44px;
}
.reply-preview-bar {
padding: 16px 20px;
min-height: 60px;
}
.close-reply {
padding: 12px;
font-size: 1.5rem;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}
/* Prevent zoom on double-tap */
@media (hover: none) and (pointer: coarse) {
* {
touch-action: manipulation;
}
/* Allow pinch-zoom on images */
img {
touch-action: pinch-zoom;
}
/* Allow scroll on scrollable areas */
.messages-area,
.rooms-list {
touch-action: pan-y;
}
}
/* Better avatar interaction on touch */
@media (hover: none) and (pointer: coarse) {
.avatar-container {
min-width: 40px;
min-height: 40px;
width: 40px;
height: 40px;
}
.msg-avatar {
width: 100%;
height: 100%;
}
.avatar-container .status-dot {
width: 14px;
height: 14px;
border-width: 3px;
}
}
/* Optimize header for touch */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) {
.chat-header {
padding: 1rem;
min-height: 70px;
}
.chat-header h3 {
font-size: 1.1rem;
}
#toggleBotBtn, #editRoomBtn {
min-height: 36px;
padding: 8px 12px !important;
font-size: 0.75rem !important;
}
}
/* Better file input for touch */
@media (hover: none) and (pointer: coarse) {
input[type="file"] {
min-height: 48px;
padding: 12px;
font-size: 16px;
}
}
/* Improve typing indicator visibility */
@media (hover: none) and (pointer: coarse) {
.typing-indicator {
font-size: 0.9rem;
top: -35px;
left: 20px;
}
}
/* Better recording overlay for touch */
@media (hover: none) and (pointer: coarse) {
.recording-overlay {
font-size: 1rem;
padding: 0 20px;
}
.rec-dot {
width: 14px;
height: 14px;
}
#cancelRec {
padding: 8px 16px;
font-size: 0.9rem;
min-height: 44px;
display: inline-flex;
align-items: center;
}
}