/* Tasko Mobile CSS — v41 — iPhone safe-area + perf + native-app */

/* ── NATIVE APP MODE (Capacitor wrapper on iOS/Android) ── */
html.is-native .kt-fab,
html.is-native .kt-fab-main,
html.is-native .pwa-install-banner,
html.is-native .ios-install-tip,
html.is-native [data-web-only="true"] {
    display:none !important;
}
html.is-native body {
    /* Native app handles its own status bar — no extra padding needed */
    padding-top: 0 !important;
}
html.is-native body::before {
    display:none !important;  /* navy strip handled by native StatusBar plugin */
}
/* Pull-to-refresh disabled in native (StatusBar plugin handles it) */
html.is-native, html.is-native body {
    overscroll-behavior: contain;
}


:root{
    --mob-nav-h: 47px;
    --mob-nav-total: calc(var(--mob-nav-h) + env(safe-area-inset-bottom, 0px));
    --chat-header-h: 50px;
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
}

/* iPhone X+ / iPhone 15 Pro — Dynamic Island, notch, home indicator */
@supports (padding: max(0px)) {
    @media(max-width:768px){
        body{
            padding-left: var(--safe-l);
            padding-right: var(--safe-r);
        }
        /* Header just gets side-safe padding; NO top — top safe-area handled
           differently in PWA standalone mode (see below) so that browser users
           don't get an ugly empty white strip under the status bar. */
        .kt-header{
            padding-left: max(12px, var(--safe-l)) !important;
            padding-right: max(12px, var(--safe-r)) !important;
        }
        .mobile-nav{
            padding-left: var(--safe-l);
            padding-right: var(--safe-r);
        }
        .page-content, main, .kt-main {
            padding-left: max(12px, var(--safe-l));
            padding-right: max(12px, var(--safe-r));
        }
        /* Sticky toolbars/pills also need it */
        .chat-pills, .my-filters, .kt-filters {
            padding-left: max(12px, var(--safe-l));
            padding-right: max(12px, var(--safe-r));
        }
    }

    /* ── PWA standalone mode (Add to Home Screen) ──
       Status bar overlays content, so we need a colored strip behind it
       matching the brand. In Safari browser this never triggers. */
    @media all and (display-mode: standalone) and (max-width:768px) {
        body::before{
            content:'';
            position:fixed;
            top:0; left:0; right:0;
            height: env(safe-area-inset-top, 0px);
            background:#1e3163;
            z-index:9999;
            pointer-events:none;
        }
        body{
            padding-top: env(safe-area-inset-top, 0px);
        }
    }
}

/* iOS tap optimizations — instant feedback */
@media(max-width:768px){
    a, button, input, select, textarea, [role="button"]{
        -webkit-tap-highlight-color: transparent;
    }
    button, [role="button"], a {
        touch-action: manipulation;
    }

    /* Stop iOS bounce/rubber-band that shifts mobile-nav up and down */
    html, body{
        overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch;
    }
    /* Use small viewport height so address-bar collapse doesn't shift layout */
    .mobile-nav{
        bottom: 0;
        /* keep nav glued to the very bottom on iOS, even when address bar shows */
    }
    /* Prevent body height "jumping" when iOS address bar shows/hides */
    body{
        min-height: 100svh;
    }
}

.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);padding:14px 0 max(18px, env(safe-area-inset-bottom,0px));z-index:200;box-shadow:0 -2px 12px rgba(0,0,0,0.06);box-sizing:border-box}
.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;text-decoration:none;color:var(--text3);font-size:11px;font-weight:600;padding:2px 0}
.mobile-nav-item i{font-size:20px}
.mobile-nav-item.active,.mobile-nav-item.active i{color:var(--accent)}
.mobile-badge{position:absolute;top:-4px;right:50%;transform:translateX(14px);background:#ef4444;color:#fff;font-size:8px;padding:1px 4px;border-radius:8px;font-weight:700}

@media(min-width:769px){
    .mobile-nav{display:none !important}
    .chat-toggle-btn{display:none !important}
    .chat-pills{display:none !important}
}

@media(max-width:768px){
    html{
        touch-action:manipulation;
        -webkit-text-size-adjust:100%;
        height:auto !important;
        max-width:100% !important;
        overflow-x:hidden !important;
        overflow-y:scroll !important;
        -webkit-overflow-scrolling:touch
    }
    body{
        height:auto !important;
        min-height:100vh !important;
        max-width:100% !important;
        overflow:visible !important;
        position:static !important;
        display:block !important
    }
    /* Override footer.php's body{display:flex} on mobile so html is the scrollport */
    .kt-main{
        flex:none !important
    }
    
    *, *::before, *::after {
        box-sizing: border-box !important;
    }
    
    /* === HEADER LOGO === */
    .kt-logo img {
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 9px !important;
        object-fit: cover !important;
    }
    
    input,select,textarea{font-size:16px !important}
    .mobile-nav{display:flex}
    .kt-header{height:56px;padding:0 14px}body{padding-top:56px !important}
    .kt-nav{display:none !important}
    .kt-user{display:none !important}
    .kt-logo{font-size:16px}
    .kt-main{padding:12px;padding-bottom:75px}
    .kt-footer{display:none}
    .kt-stats{grid-template-columns:repeat(2,1fr);gap:8px}
    .kt-stat{padding:12px}.kt-stat-value{font-size:22px}
    .kt-team-grid{grid-template-columns:1fr 1fr;gap:8px}
    .kt-filters{flex-direction:column;align-items:stretch;gap:6px;padding:10px}
    .kt-add-btn{margin-left:0;justify-content:center}
    .kt-task{flex-direction:column;align-items:stretch;padding:12px}
    .kt-task-actions{justify-content:flex-end;margin-top:8px}
    .kt-form-row{grid-template-columns:1fr}
    .d-nums{gap:6px;flex-wrap:wrap}
    .d-num{padding:10px 12px;min-width:calc(50% - 6px);flex:none}.d-num strong{font-size:20px}
    .d-today{padding:14px}.d-today-grid{grid-template-columns:1fr}.d-today-card{padding:10px 12px}
    .d-week{padding:14px;overflow-x:auto}.d-week-table{min-width:500px}
    .d-members{gap:6px}.d-member{min-width:calc(50% - 6px);flex:none;padding:8px 10px}
    .d-row{grid-template-columns:1fr}.d-form{padding:14px}
    .d-task{flex-wrap:wrap;padding:10px 12px}.d-filters{gap:4px;flex-wrap:wrap}
    .d-bulk-bar{flex-wrap:wrap;padding:8px 12px}.d-field textarea{min-height:120px}

    /* ============================================
       CHAT WRAP — FULL SCREEN (KEYBOARD SAFE)
       ============================================ */
    .kt-main:has(.chat-wrap){
        padding:0 !important;
        overflow:hidden !important;
        max-width:100vw !important
    }
    .chat-wrap{
        position:fixed !important;
        top:var(--chat-header-h) !important;
        left:0 !important;
        right:0 !important;
        bottom:var(--mob-nav-total) !important;
        height:auto !important;
        width:100% !important;
        max-width:100vw !important;
        border-radius:0 !important;
        border:none !important;
        box-shadow:none !important;
        flex-direction:column;
        z-index:50;
        background:#fff;
        overflow:hidden !important;
        display:flex !important
    }

    .chat-pills,
    #chatPills{
        display:none !important;
        visibility:hidden !important;
        position:absolute !important;
        pointer-events:none !important
    }

    /* ============================================
       SIDEBAR
       ============================================ */
    .chat-sidebar{
        display:flex !important;
        width:100% !important;
        position:absolute !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        z-index:60;
        background:#fff;
        flex-direction:column;
        border:none !important;
        overflow:hidden !important
    }
    .chat-sidebar.hidden{
        display:none !important
    }

    .chat-sidebar-head{
        padding:14px 16px;
        font-size:18px;
        font-weight:700;
        color:#1a1a2e;
        position:sticky;
        top:0;
        background:#fff;
        z-index:5;
        border-bottom:1px solid rgba(0,0,0,0.08);
        display:flex;
        align-items:center;
        gap:10px
    }
    .chat-sidebar-head i{
        font-size:16px;
        color:#1e3163
    }

    .chat-list{
        flex:1;
        padding:0;
        overflow-y:auto;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch;
        background:#fff
    }

    .chat-item-divider{
        padding:10px 16px 6px;
        font-size:11px;
        font-weight:700;
        color:#1e3163;
        text-transform:uppercase;
        letter-spacing:0.5px;
        background:#f8f9fb
    }

    /* ============================================
       CHAT ITEM
       ============================================ */
    .chat-item{
        display:flex;
        align-items:center;
        gap:12px;
        padding:10px 16px;
        cursor:pointer;
        border-radius:0;
        transition:background .15s;
        margin:0;
        position:relative;
        border-bottom:1px solid rgba(0,0,0,0.05)
    }
    .chat-item:hover,
    .chat-item:active{
        background:rgba(30,49,99,0.06)
    }
    .chat-item.active{
        background:rgba(30,49,99,0.1)
    }

    .chat-item-ava{
        width:52px !important;
        height:52px !important;
        min-width:52px !important;
        max-width:52px !important;
        min-height:52px !important;
        max-height:52px !important;
        border-radius:50% !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        font-weight:700;
        font-size:18px;
        color:#fff;
        flex-shrink:0 !important;
        overflow:hidden !important;
        position:relative !important
    }
    .chat-item-ava img{
        width:100% !important;
        height:100% !important;
        border-radius:50% !important;
        object-fit:cover !important;
        display:block !important;
        position:absolute !important;
        top:0 !important;
        left:0 !important
    }

    .chat-item-info{
        flex:1;
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:2px;
        overflow:hidden
    }
    .chat-item-name{
        font-size:15px;
        font-weight:600;
        color:#1a1a2e;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        padding-right:50px
    }
    .chat-item-role{
        font-size:13px;
        color:#64748b;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        padding-right:30px
    }
    .chat-item-badge{
        position:absolute;
        right:16px;
        top:50%;
        transform:translateY(-50%);
        background:#1e3163;
        color:#fff;
        font-size:11px;
        font-weight:700;
        min-width:20px;
        height:20px;
        border-radius:10px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 6px
    }

    .chat-empty{
        display:none !important
    }

    /* ============================================
       CHAT HEADER
       ============================================ */
    .chat-header{
        display:flex !important;
        padding:10px 14px;
        gap:10px;
        background:#fff;
        border-bottom:1px solid rgba(0,0,0,0.08);
        align-items:center;
        flex-shrink:0
    }
    .chat-back{
        display:flex !important;
        align-items:center;
        justify-content:center;
        font-size:20px;
        padding:6px;
        cursor:pointer;
        color:#1e3163
    }
    .chat-header-ava{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        border-radius:50% !important;
        overflow:hidden !important;
        position:relative !important
    }
    .chat-header-ava img{
        width:100% !important;
        height:100% !important;
        border-radius:50% !important;
        object-fit:cover !important;
        position:absolute !important;
        top:0 !important;
        left:0 !important
    }
    .chat-header-name{
        font-size:15px;
        font-weight:700
    }
    .chat-header-status{
        font-size:11px;
        color:#1e3163
    }

    /* ============================================
       CHAT MAIN — FLEX LAYOUT (NO ABSOLUTE!)
       ============================================ */
    .chat-main{
        flex:1;
        display:flex !important;
        flex-direction:column;
        min-height:0 !important;
        overflow:hidden !important;
        width:100% !important;
        max-width:100% !important;
        position:relative
    }

    /* ============================================
       CHAT BODY — MESSAGES (FLEX GROW)
       ============================================ */
    .chat-body,
    .chat-messages{
        flex:1 1 0 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        padding:10px 12px !important;
        padding-bottom:8px !important;
        display:flex;
        flex-direction:column;
        gap:2px;
        -webkit-overflow-scrolling:touch;
        min-height:0 !important;
        background:#fff;
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important
    }

    /* ============================================
       MESSAGE ROW
       ============================================ */
    .msg-row{
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;
        align-items:flex-end;
        gap:6px;
        max-width:80% !important;
        width:fit-content;
        margin-bottom:2px;
        position:relative
    }
    .msg-row.me{
        align-self:flex-end;
        flex-direction:row-reverse
    }
    .msg-row.other{
        align-self:flex-start
    }

    .msg-ava{
        width:24px !important;
        height:24px !important;
        min-width:24px !important;
        max-width:24px !important;
        min-height:24px !important;
        max-height:24px !important;
        border-radius:50% !important;
        overflow:hidden !important;
        position:relative !important;
        flex-shrink:0 !important;
        font-size:10px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important
    }
    .msg-ava img{
        width:100% !important;
        height:100% !important;
        border-radius:50% !important;
        object-fit:cover !important;
        position:absolute !important;
        top:0 !important;
        left:0 !important
    }
    .msg-ava.hidden-ava{
        visibility:hidden
    }

    .msg-content{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        max-width:100%;
        overflow:visible !important
    }

    .msg-sender{
        display:block !important;
        visibility:visible !important;
        font-size:10px !important;
        color:#64748b;
        margin-bottom:2px;
        padding-left:2px
    }

    /* ============================================
       MSG BUBBLE
       ============================================ */
    .msg-bubble{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        font-size:14px !important;
        line-height:1.5 !important;
        padding:10px 14px !important;
        word-break:break-word !important;
        max-width:100% !important;
        overflow-wrap:break-word !important;
        min-height:auto !important;
        height:auto !important;
        position:relative !important
    }
    
    .msg-row.me .msg-bubble{
        background:linear-gradient(135deg, #1e3163, #152448) !important;
        color:#fff !important;
        border-radius:18px 18px 4px 18px !important;
        border:none !important
    }
    
    .msg-row.other .msg-bubble{
        background:#f0f2f5 !important;
        color:#1a1a2e !important;
        border-radius:18px 18px 18px 4px !important;
        border:none !important
    }

    .msg-time{
        display:block !important;
        visibility:visible !important;
        font-size:10px !important;
        color:#94a3b8 !important;
        margin-top:2px;
        padding-left:4px
    }

    .msg-status{
        display:none !important
    }
    .msg-row.me:last-child .msg-status{
        display:flex !important;
        font-size:10px !important;
        margin-top:1px
    }

    .msg-reactions{
        display:flex;
        flex-wrap:wrap;
        gap:2px;
        margin-top:2px
    }
    .msg-react-badge{
        font-size:11px;
        padding:2px 6px
    }

    /* ============================================
       IMAGES & MEDIA
       ============================================ */
    .msg-bubble img.chat-img{
        display:block !important;
        max-width:240px !important;
        max-height:240px !important;
        width:auto !important;
        height:auto !important;
        border-radius:12px !important;
        cursor:pointer
    }
    .msg-bubble .gif-img{
        display:block !important;
        max-width:180px;
        max-height:140px;
        border-radius:8px
    }

    .chat-video-wrap{
        width:240px !important;
        height:160px !important;
        border-radius:12px !important
    }

    .msg-reply-quote{
        display:block !important;
        visibility:visible !important;
        padding:6px 10px !important;
        margin-bottom:4px !important;
        font-size:11px !important;
        border-radius:8px !important;
        background:rgba(0,0,0,0.08) !important
    }
    .msg-row.me .msg-reply-quote{
        background:rgba(0,0,0,0.15) !important
    }
    .msg-reply-quote .rq-name{
        display:block !important;
        font-weight:700 !important;
        color:#1e3163 !important;
        margin-bottom:2px !important
    }
    .msg-row.me .msg-reply-quote .rq-name{
        color:#b2f5ea !important
    }
    .msg-reply-quote .rq-text{
        display:block !important;
        color:inherit !important;
        opacity:0.8 !important
    }

    /* Caption for photos */
    .chat-caption{
        display:block !important;
        visibility:visible !important;
        margin-top:8px !important;
        padding-top:6px !important;
        border-top:1px solid rgba(255,255,255,0.15) !important;
        font-size:13px !important;
        line-height:1.4 !important
    }
    .msg-row.other .chat-caption{
        border-top-color:rgba(0,0,0,0.08) !important
    }

    /* ============================================
       CHAT-MAIN — flexbox column with proper scroll containment
       (min-height:0 აუცილებელია chat-body-ის სქროლისთვის)
       ============================================ */
    .chat-main,
    .chat-wrap .chat-main,
    #chatMain {
        flex:1 1 0 !important;
        display:flex !important;
        flex-direction:column !important;
        min-height:0 !important;
        min-width:0 !important;
        overflow:hidden !important;
        height:100% !important
    }

    /* ============================================
       INPUT AREA — relative + flex-shrink
       (sticky არ გვჭირდება — flexbox თვითონ დააწყობს ბოლოში)
       ============================================ */
    .chat-input-area,
    .chat-wrap .chat-input-area,
    .chat-main .chat-input-area,
    #chatInputArea {
        position:relative !important;
        flex-shrink:0 !important;
        padding:8px 10px !important;
        margin:0 !important;
        background:#fff !important;
        border-top:1px solid rgba(0,0,0,0.08) !important;
        z-index:100 !important;
        box-sizing:border-box !important;
        width:100% !important
    }

    .chat-input-row{
        display:flex;
        align-items:center;
        gap:6px
    }
    .chat-input-row .chat-tool-btn.mob-hide{
        display:none !important
    }
    .chat-input-row input[type=text],
    #chatInput {
        flex:1;
        padding:10px 14px !important;
        border:none !important;
        background:#f0f2f5 !important;
        font-size:16px !important;
        border-radius:22px !important;
        min-width:0;
        outline:none !important
    }
    .chat-input-row input[type=text]:focus,
    #chatInput:focus {
        background:#e4e6e9 !important
    }
    .chat-tool-btn{
        width:36px;
        height:36px;
        min-width:36px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:18px;
        color:#64748b;
        background:transparent;
        border:none;
        cursor:pointer;
        flex-shrink:0
    }
    .chat-send-btn{
        width:38px;
        height:38px;
        min-width:38px;
        min-height:38px;
        font-size:16px;
        border-radius:50%;
        background:linear-gradient(135deg, #1e3163, #152448);
        color:#fff;
        border:none;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0
    }
    #micBtn{
        width:36px;
        height:36px;
        min-width:36px;
        font-size:16px
    }

    /* Panels */
    .emoji-panel{left:8px;right:8px;width:auto;bottom:calc(100% + 4px)}
    .gif-panel{left:8px;right:8px;width:auto;bottom:calc(100% + 4px)}
    .msg-ctx-menu{max-width:280px;min-width:250px;border-radius:14px}
    .ctx-react-row{padding:10px 10px;gap:6px}
    .ctx-react-row span{font-size:26px;padding:4px 5px}
    .msg-ctx-menu div:not(.ctx-react-row){font-size:15px !important;padding:12px 16px !important}
    
    /* Hide hover reaction on mobile — use long-press context menu */
    .msg-react-trigger{display:none !important}
    .reply-preview{padding:6px 10px}
    .voice-rec{padding:6px 10px !important}
    .pin-banner{font-size:11px;padding:6px 10px}
    .search-panel{padding:8px 10px}
    .mention-dropdown{left:8px;right:8px}
    
    /* Attach menu mobile */
    .attach-menu{
        left:auto !important;
        right:0 !important;
        transform:none !important;
        min-width:200px
    }
    @keyframes attachFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
    
    /* Reaction picker mobile */
    .msg-react-picker{
        width:220px !important;
        left:0 !important;
        transform:none !important
    }
    .msg-row.me .msg-react-picker{
        left:auto !important;
        right:0 !important
    }
    
    /* Scroll to bottom button */
    .scroll-bottom-btn{
        position:absolute !important;
        bottom:60px !important;
        right:12px !important;
        width:36px !important;
        height:36px !important;
        font-size:14px !important;
        box-shadow:0 2px 8px rgba(0,0,0,0.15) !important
    }

    .chat-date-div{
        text-align:center;
        margin:10px 0;
        font-size:11px;
        color:#94a3b8
    }
    .chat-date-div span{
        background:#fff;
        padding:4px 12px;
        border-radius:12px;
        box-shadow:0 1px 3px rgba(0,0,0,0.08)
    }

    .profile-modal-overlay{
        padding:20px
    }
    .profile-modal{
        width:100%;
        max-width:340px;
        max-height:85vh
    }

    /* ============================================
       CHAT INFO MODAL — FULLSCREEN ON MOBILE
       ============================================ */
    .grp-info-overlay{
        z-index:500 !important;
        padding:0 !important
    }
    .grp-info-panel{
        width:100% !important;
        max-width:100% !important;
        max-height:100% !important;
        height:100% !important;
        border-radius:0 !important
    }
    .grp-info-header{
        padding:12px 14px;
        position:sticky;
        top:0;
        background:#fff;
        z-index:5
    }
    .grp-info-header .gi-title{
        font-size:16px
    }
    .grp-info-cover{
        padding:20px 16px
    }
    .grp-info-cover .gi-avatar{
        width:60px;
        height:60px;
        font-size:24px
    }
    .grp-info-cover .gi-name{
        font-size:16px
    }
    .grp-info-tabs .gi-tab{
        padding:10px 6px;
        font-size:11px
    }
    .grp-info-tabs .gi-tab i{
        font-size:16px
    }
    .gi-member{
        padding:10px 14px
    }
    .gi-member-ava{
        width:44px;
        height:44px
    }
    .gi-member-name{
        font-size:15px
    }
    .gi-photo-grid{
        grid-template-columns:repeat(3,1fr);
        gap:2px;
        padding:2px
    }
    .gi-file{
        padding:10px 14px
    }
    .gi-link{
        padding:10px 14px
    }

    /* ============================================
       TASKO AI
       ============================================ */
    body:has(.gw) .kt-header{display:none !important}
    body:has(.gw) .mobile-nav{z-index:200}
    .kt-main:has(.gw){padding:0 !important;overflow:hidden !important;margin:0 !important;max-width:none !important}
    .gw{position:fixed !important;top:0;left:0;right:0;bottom:58px;height:auto !important;flex-direction:column;z-index:50;overflow:hidden}
    .gs{position:fixed;left:0;top:0;bottom:58px;z-index:300;width:85vw;max-width:300px;transform:translateX(-100%);transition:transform .25s ease;box-shadow:4px 0 24px rgba(0,0,0,0.15)}
    .gs.open{transform:translateX(0)}
    .gs-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:299}
    .gs-ov.show{display:block}
    .gm-hdr{height:46px;padding:0 14px}
    .gm-hl{font-size:14px;gap:6px}
    .gm-spark{width:26px;height:26px;font-size:12px;border-radius:7px}
    .gm-badge{font-size:9px;padding:2px 6px}
    .gm-hr{display:none}
    .gm-e{padding:20px 16px}
    .gm-logo{width:56px;height:56px;font-size:22px;border-radius:16px}
    .gm-e h2{font-size:18px}.gm-e p{font-size:13px}
    .gm-q{gap:6px;margin-top:14px}
    .gm-qb{padding:8px 14px;font-size:12px;border-radius:12px}
    .gm-msgs{padding:10px 0}
    .mu{padding:4px 12px}
    .mu-bbl{max-width:85%;padding:10px 14px;font-size:13px;border-radius:16px 16px 4px 16px}
    .mu-acts{gap:0;margin-right:4px}.mu-ab{width:26px;height:26px;font-size:11px}
    .mm{padding:10px 12px}
    .mm-ava{width:26px;height:26px;border-radius:8px;font-size:11px}
    .mm-in{gap:8px}.mm-name{font-size:11px}
    .mm-txt{font-size:13px;line-height:1.7}
    .mm-txt pre{margin:8px 0}.mm-txt pre code{padding:10px;font-size:11px}
    .mm-txt pre .ct{padding:5px 10px;font-size:10px}.mm-txt pre .ct button{padding:3px 8px;font-size:10px}
    .mm-acts{margin-top:6px}.mm-ab{font-size:10px;padding:3px 6px}
    .gi-w{padding:4px 8px;flex-shrink:0}
    .gi-row{border-radius:20px;padding:3px 3px 3px 10px}
    .gi-row textarea{font-size:14px !important;padding:8px 6px}
    .gi-ic{width:30px;height:30px;font-size:13px;margin-bottom:2px}
    .gi-send,.gi-stop{width:36px;height:36px;font-size:14px}
    .gi-hint{font-size:9px;margin-top:3px}
    .gi-fp{padding:4px 10px 0}.gi-ft{width:36px;height:36px}
    .gm-mob{display:flex !important;position:fixed;top:8px;left:10px;width:34px;height:34px;border-radius:10px;font-size:14px;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.1);bottom:auto}
}

@media(max-width:380px){
    .chat-item{padding:8px 14px}
    .chat-item-ava{
        width:46px !important;
        height:46px !important;
        min-width:46px !important;
        max-width:46px !important
    }
    .chat-item-name{font-size:14px}
    .chat-item-role{font-size:12px}
    .msg-row{max-width:85% !important}
    .msg-bubble{font-size:13px !important;padding:8px 12px !important}
    .msg-ava{
        width:20px !important;
        height:20px !important;
        min-width:20px !important;
        font-size:8px !important
    }
    .msg-bubble img.chat-img{
        max-width:200px !important;
        max-height:200px !important
    }
}

/* ===== FAB (+) — chat გვერდზე იმალება, რომ input-ს არ დაფაროს ===== */
@media(max-width:768px){
    body.page-chat .kt-fab,
    body:has(.chat-wrap) .kt-fab{
        display:none !important
    }
}

/* ===== NOTIFICATION DROPDOWN — mobile fix (centered, fits screen) ===== */
@media(max-width:768px){
    .kt-notif-dropdown{
        position:fixed !important;
        top:calc(var(--chat-header-h) + 6px) !important;
        left:8px !important;
        right:8px !important;
        width:auto !important;
        max-width:calc(100vw - 16px) !important;
        max-height:calc(100vh - var(--chat-header-h) - var(--mob-nav-total) - 16px) !important;
        overflow-y:auto !important;
        border-radius:14px !important;
        box-shadow:0 12px 40px rgba(0,0,0,0.18) !important
    }
    .kt-notif-item{
        padding:12px 14px !important;
        gap:10px !important
    }
    .kt-notif-info strong{
        font-size:14px !important
    }
    .kt-notif-info span{
        font-size:12px !important;
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:initial !important
    }
}

/* ===== KEYBOARD-OPEN STATE (set by chat-keyboard-fix.js) ===== */
@media(max-width:768px){
    body.kb-open .mobile-nav{
        display:none !important
    }
    body.kb-open .chat-wrap{
        bottom:0 !important
    }
    body.kb-open .chat-input-area,
    body.kb-open #chatInputArea {
        padding-bottom:8px !important
    }
}

/* ===== VOICE RECORDING — TELEGRAM/WHATSAPP STYLE ===== */
@media(max-width:768px){
    /* Mic button — recording state */
    #micBtn{
        position:relative;
        z-index:auto;
        transition:transform .15s ease, background .15s ease, color .15s ease
    }
    #micBtn.recording{
        background:#ef4444 !important;
        color:#fff !important;
        transform:scale(1.15)
    }
    /* Voice rec UI — flex item above input (display:none by default, .show makes it flex) */
    .voice-rec{
        position:relative !important;
        flex-shrink:0 !important;
        z-index:101 !important;
        padding:10px 14px !important;
        background:#fff !important;
        border-top:1px solid rgba(0,0,0,0.08) !important;
        animation:vrSlideUp .2s ease
    }
    @keyframes vrSlideUp{
        from{opacity:0;transform:translateY(8px)}
        to{opacity:1;transform:translateY(0)}
    }
    .voice-rec .vr-wave{
        flex:1;
        height:30px;
        gap:2px
    }
    .voice-rec .vr-wave .vw-bar{
        background:#1e3163;
        transition:height .08s ease
    }
    /* Voice hint toast */
    .voice-hint{
        position:fixed;
        bottom:calc(var(--mob-nav-total) + 70px);
        left:50%;
        transform:translateX(-50%) translateY(20px);
        background:rgba(20,20,30,0.92);
        color:#fff;
        font-size:12px;
        font-weight:500;
        padding:8px 14px;
        border-radius:18px;
        opacity:0;
        pointer-events:none;
        transition:opacity .2s, transform .2s;
        z-index:9999;
        white-space:nowrap;
        box-shadow:0 4px 14px rgba(0,0,0,0.2)
    }
    .voice-hint.show{
        opacity:1;
        transform:translateX(-50%) translateY(0)
    }
}