/* ==========================================================================
   Help desk chat (assets/js/tickets.js) — the conversation gets the room
   --------------------------------------------------------------------------
   While a ticket is open (#tickets-modal.tkt-in-thread):
   - the ticket tabs hide (the back arrow returns to the list);
   - on phones the pop-up fills the screen below the status bar;
   - the reply area is one messaging row: a box that grows with the message
     and a round send button beside it;
   - the "staff has taken over" notice is a slim line.
   ========================================================================== */

/* taller pop-up everywhere */
#tickets-modal { height: 92dvh; max-height: 92dvh; }
@media (min-width: 768px) {
    #tickets-modal { height: min(90dvh, 880px); max-height: min(90dvh, 880px); width: min(720px, 94vw); max-width: min(720px, 94vw); }
}
@media (max-width: 767px) {
    #tickets-modal.tkt-in-thread {
        height: calc(100dvh - 8px - env(safe-area-inset-top, 0px));
        max-height: calc(100dvh - 8px - env(safe-area-inset-top, 0px));
    }
    #tickets-modal.tkt-in-thread .modal-handle { display: none; }
    #tickets-modal.tkt-in-thread .modal-header { padding: 10px 14px; }
}

/* inside a conversation the tabs are noise */
#tickets-modal.tkt-in-thread .tkt-tabs { display: none; }

/* compact thread header */
#tickets-modal .tkt-thread-header { padding: 8px 12px; gap: 10px; }

/* messages: soft canvas so bubbles read clearly */
#tickets-modal .tkt-thread-scroll { padding: 12px 12px 8px; background: #f8fafc; }

/* reply area: one row */
#tickets-modal .tkt-reply-box {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e2e8f0;
}
#tickets-modal .tkt-compose { display: flex; align-items: flex-end; gap: 8px; }
#tickets-modal .tkt-compose .tkt-textarea {
    flex: 1 1 auto; min-width: 0;
    min-height: 44px; max-height: 132px; height: 44px;
    margin: 0; padding: 11px 14px;
    resize: none; overflow-y: auto;
    border-radius: 22px; border: 1px solid #cbd5e1; background: #f8fafc;
    font-size: 15px; line-height: 1.4; color: #000;
}
#tickets-modal .tkt-compose .tkt-textarea:focus { background: #fff; border-color: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, .14); outline: none; }
#tickets-modal .tkt-send {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
    display: grid; place-items: center;
    color: #fff; font-size: 18px;
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 8px 16px -10px rgba(4, 120, 87, .8);
    transition: transform .12s ease, opacity .15s ease;
}
#tickets-modal .tkt-send:active { transform: scale(.92); }
#tickets-modal .tkt-send:disabled { opacity: .6; cursor: default; }
#tickets-modal .tkt-send:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }

/* "Request human support" + notices: slim */
#tickets-modal .tkt-human-btn { height: 34px; margin-bottom: 8px; font-size: .8rem; }
#tickets-modal .tkt-human-banner { margin-bottom: 8px; padding: 6px 10px; font-size: .76rem; }
#tickets-modal .tkt-human-banner i { font-size: .9rem; }

@media (prefers-reduced-motion: reduce) { #tickets-modal .tkt-send { transition: none; } }