/* ══════════════════════════════════════════════════════ MOBİL DÜZELTMELER — üst üste binen öğeleri düzeltir ══════════════════════════════════════════════════════ */ /* — MESAJ BALONU GENİŞLİK HATASI (tüm ekranlarda) — Bazı mobil tarayıcılar iç içe flex kutularında min-width ayarı olmayınca balonu içeriğe göre değil neredeyse sıfır genişliğe göre hesaplıyor, bu da kelimelerin tek tek alt alta yazılmasına sebep oluyor. Standart flexbox düzeltmesi: */ /* — ANDROID CHROME OTOMATİK YAZI BÜYÜTME KAPAT — Chrome dar flex kutularını "okunması zor" sanıp içindeki yazıyı kendiliğinden 2-3 kat büyütüyor (font boosting / text autosizer). Kutu normal genişlikte ama şişen yazı yüzünden her 2-3 harfte satır kırılıyormuş gibi görünüyor. */ html{ -webkit-text-size-adjust:none !important; text-size-adjust:none !important; } .bubble, .message, .mi, body{ -webkit-text-size-adjust:none !important; text-size-adjust:none !important; } .message, .mi, .bubble{ min-width:0; } .av-logo-img{ width:100%;height:100%;object-fit:cover;border-radius:50%; } .av.ai{ padding:0;overflow:hidden;background:#0c0c14; } .bubble{ flex:0 1 auto; width:fit-content; max-width:100%; } .av{ flex:0 0 auto; } @media (max-width: 660px) { /* — SIDEBAR: bazı telefon tarayıcılarında blur efekti düzgün render edilmiyor ve altındaki sohbet metni sızıp üst üste biniyor. Mobilde blur'u kaldırıp tam opak arka plan kullan — */ .sidebar{ width:82vw;min-width:0;max-width:320px; background:#0a0a10; } .sb-inner{ background:#0a0a10 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .overlay{ background:rgba(0,0,0,.88) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* kapalıyken tamamen devre dışı — altındaki sohbetle asla çakışmasın */ .sidebar:not(.open){ visibility:hidden; pointer-events:none; } /* — TOPBAR: ikonlar taşıp üst üste binmesin — */ .topbar{ padding-left:10px;padding-right:10px; gap:6px; } .tb-r{ gap:4px; flex-shrink:0; } .model-pill{ min-width:0; overflow:hidden; } .tb-r .ib, .tb-r .settings-btn, .tb-r .voice-trigger-btn{ width:32px;height:32px;flex-shrink:0; } /* — SETTINGS PANEL: ekranın dışına taşmasın — */ .settings-panel{ top:56px;right:10px;left:10px;width:auto;max-width:none; } /* — INPUT ALANI: ikonlar sıkışmasın — */ .input-zone{padding:10px 12px 14px} .input-actions{gap:5px;flex-wrap:nowrap} .input-box{min-width:0} /* — MESAJ BALONLARI: taşan içerik (kod, uzun link) kutuyu kırmasın — */ .bubble, .mi, .message{ max-width:92vw !important; } .bubble pre, pre{ max-width:100%;overflow-x:auto; } .bubble img{max-width:100%;height:auto} /* — SESLİ SOHBET OVERLAY: dar ekranda kontroller sıkışmasın — */ .vo-controls{gap:18px} .vo-center{max-width:92vw} .vo-transcript{max-width:88vw} /* — KOMUT PALETİ / DİĞER TAŞAN PANELLER — */ .cmd-palette{ left:10px;right:10px;width:auto;max-width:none; } /* — TOAST: kenarlara taşmasın — */ .toast{ max-width:90vw;white-space:normal;text-align:center; } /* — GENEL GÜVENLİK AĞI: hiçbir öğe ekran genişliğini aşmasın — */ body, .main, .chat-area{ overflow-x:hidden; max-width:100vw; } } @media (max-width: 380px) { .tb-r .ib, .tb-r .settings-btn, .tb-r .voice-trigger-btn{ width:29px;height:29px; } .model-pill span, .mbadge{font-size:11px} } /* ══════════════════════════════════════════════════════ AYNI KURALLAR — JS'İN 'is-mobile' SINIFI İÇİN Bazı uygulama-içi tarayıcılar (WhatsApp vb.) sayfayı masaüstü genişliğinde render edip küçülttüğü için @media(max-width) hiç tetiklenmeyebiliyor. JS bu cihazı ayrıca User-Agent ile algılayıp etiketine 'is-mobile' sınıfı ekliyor — aşağıdaki kurallar o sınıf üzerinden, ekran genişliğinden bağımsız olarak uygulanır. ══════════════════════════════════════════════════════ */ html.is-mobile .sidebar{ width:82vw !important;min-width:0 !important;max-width:320px !important; background:#0a0a10 !important; position:fixed !important;top:0 !important;left:0 !important;height:100% !important; transform:translateX(-100%) !important;z-index:200 !important; } html.is-mobile .sidebar.open{ transform:translateX(0) !important; } html.is-mobile .sidebar:not(.open){ visibility:hidden !important; pointer-events:none !important; } html.is-mobile .sb-inner{ background:#0a0a10 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } html.is-mobile .overlay{ background:rgba(0,0,0,.88) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } html.is-mobile .menu-btn{ display:flex !important; } html.is-mobile .main{ width:100% !important; } html.is-mobile .topbar{ padding-left:10px !important;padding-right:10px !important; gap:6px !important;flex-wrap:nowrap !important;overflow:hidden !important; } html.is-mobile .tb-r{ gap:4px !important;flex-shrink:0 !important; } html.is-mobile .model-pill{ min-width:0 !important;overflow:hidden !important;flex-shrink:1 !important; } html.is-mobile .tb-r .ib, html.is-mobile .tb-r .settings-btn, html.is-mobile .tb-r .voice-trigger-btn{ width:32px !important;height:32px !important;flex-shrink:0 !important; } html.is-mobile .settings-panel{ top:56px !important;right:10px !important;left:10px !important;width:auto !important;max-width:none !important; } html.is-mobile .input-zone{padding:10px 12px 14px !important} html.is-mobile .input-actions{gap:5px !important;flex-wrap:nowrap !important} html.is-mobile .input-box{min-width:0 !important} html.is-mobile .bubble, html.is-mobile .mi, html.is-mobile .message{ max-width:92vw !important; } html.is-mobile .bubble pre, html.is-mobile pre{ max-width:100% !important;overflow-x:auto !important; } html.is-mobile .bubble img{max-width:100% !important;height:auto !important} html.is-mobile .vo-controls{gap:18px !important} html.is-mobile .vo-center{max-width:92vw !important} html.is-mobile .vo-transcript{max-width:88vw !important} html.is-mobile .cmd-palette{ left:10px !important;right:10px !important;width:auto !important;max-width:none !important; } html.is-mobile .toast{ max-width:90vw !important;white-space:normal !important;text-align:center !important; } html.is-mobile body, html.is-mobile .main, html.is-mobile .chat-area{ overflow-x:hidden !important; max-width:100vw !important; } /* — HERO/WELCOME EKRANI: dev/büyük öğeler ve dizilim taşması — */ html.is-mobile .hero-logo-img{ max-width:120px !important; } html.is-mobile .hero-title{ font-size:clamp(24px,7vw,34px) !important; } html.is-mobile .init-letter{ font-size:clamp(16px,5.5vw,24px) !important; letter-spacing:1px !important; } html.is-mobile .init-label{ flex-wrap:wrap !important; padding:0 12px !important; } html.is-mobile .marquee{ width:100% !important; } html.is-mobile .cards{ grid-template-columns:1fr 1fr !important; gap:10px !important; } html.is-mobile .card{ padding:14px !important; } html.is-mobile .welcome{ padding-left:14px !important;padding-right:14px !important; } @media (max-width: 380px) { html.is-mobile .tb-r .ib, html.is-mobile .tb-r .settings-btn, html.is-mobile .tb-r .voice-trigger-btn{ width:29px !important;height:29px !important; } html.is-mobile .model-pill span, html.is-mobile .mbadge{font-size:11px !important} }