/* =========================================================
   RABBIT MOBILE CALL + CHAT CLOSE V6
   Leggero: solo #rc22Call e chiusura #rc22Panel.
   ========================================================= */

:root{
  --r6-safe-top: env(safe-area-inset-top, 0px);
  --r6-safe-bottom: env(safe-area-inset-bottom, 0px);
  --r6-dark: #020617;
  --r6-panel: #0b1224;
  --r6-line: rgba(148,163,184,.18);
}

/* X chat aggiunta via JS: invisibile desktop, utile mobile */
#rc22CloseMobile{
  display:none;
}

@media (max-width:768px){

  /* ---------- CHIUSURA CHAT MOBILE ---------- */

  #rc22Panel.open{
    transition: transform .22s ease, opacity .22s ease !important;
    will-change: transform;
  }

  #rc22Panel.rc22-dragging{
    transition:none !important;
  }

  #rc22Panel.rc22-closing{
    transform:translateY(110%) !important;
    opacity:.72 !important;
  }

  #rc22CloseMobile{
    display:grid !important;
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    width:46px !important;
    height:46px !important;
    border-radius:17px !important;
    border:1px solid #dbe5f2 !important;
    background:#fff !important;
    color:#0f172a !important;
    place-items:center !important;
    font-size:22px !important;
    font-weight:950 !important;
    z-index:30 !important;
    box-shadow:0 10px 26px rgba(15,23,42,.10) !important;
    cursor:pointer !important;
  }

  #rc22Panel.open .rc22-thread-head{
    position:relative !important;
    padding-right:72px !important;
  }

  #rc22Panel.open .rc22-swipe-handle{
    position:absolute !important;
    left:50% !important;
    top:7px !important;
    transform:translateX(-50%) !important;
    width:48px !important;
    height:5px !important;
    border-radius:99px !important;
    background:#dbe5f2 !important;
    z-index:28 !important;
  }

  /* ---------- VIDEO CALL MOBILE PERFETTA ---------- */

  body.rc22-mobile-call-open,
  html.rc22-mobile-call-open{
    overflow:hidden !important;
    height:100% !important;
    background:var(--r6-dark) !important;
  }

  #rc22Call.show{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    background:var(--r6-dark) !important;
    color:#fff !important;
  }

  /* Header meno alto e testo che non esce lateralmente */
  #rc22Call.show .rc22-call-head{
    min-height:calc(78px + var(--r6-safe-top)) !important;
    padding:calc(10px + var(--r6-safe-top)) 12px 10px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 52px !important;
    align-items:center !important;
    gap:10px !important;
    background:var(--r6-panel) !important;
    border-bottom:1px solid var(--r6-line) !important;
  }

  #rc22Call.show .rc22-call-title{
    min-width:0 !important;
    overflow:hidden !important;
  }

  #rc22Call.show .rc22-call-title b{
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:20px !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
    color:#fff !important;
  }

  #rc22Call.show .rc22-call-title small{
    display:block !important;
    margin-top:4px !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:14px !important;
    line-height:1.18 !important;
    font-weight:900 !important;
    color:#9df0bd !important;
  }

  #rc22Call.show #rc22CallX{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    border-radius:18px !important;
    font-size:22px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    justify-self:end !important;
  }

  /*
    Corpo chiamata:
    - video grande sopra
    - chat live sotto
    - controlli sempre in fondo
    Uso clamp così su schermi alti/bassi resta equilibrata.
  */
  #rc22Call.show .rc22-call-body{
    min-height:0 !important;
    height:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(260px, 1fr) clamp(190px, 32dvh, 260px) !important;
    gap:10px !important;
    padding:10px 10px 8px !important;
    overflow:hidden !important;
    background:var(--r6-dark) !important;
  }

  #rc22Call.show .rc22-stage{
    position:relative !important;
    min-height:0 !important;
    height:100% !important;
    width:100% !important;
    border-radius:24px !important;
    overflow:hidden !important;
    background:#050a18 !important;
    border:1px solid var(--r6-line) !important;
    display:grid !important;
    place-items:center !important;
  }

  #rc22Call.show #rc22Remote,
  #rc22Call.show .rc22-stage > video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:24px !important;
    background:#050a18 !important;
  }

  #rc22Call.show .rc22-placeholder{
    position:absolute !important;
    inset:0 !important;
    display:grid !important;
    place-items:center !important;
    text-align:center !important;
    padding:20px !important;
    color:rgba(226,232,240,.88) !important;
    font-size:17px !important;
    font-weight:850 !important;
    line-height:1.35 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  #rc22Call.show .rc22-local{
    position:absolute !important;
    right:14px !important;
    bottom:14px !important;
    width:104px !important;
    height:138px !important;
    border-radius:22px !important;
    overflow:hidden !important;
    border:2px solid rgba(255,255,255,.22) !important;
    background:#020617 !important;
    z-index:5 !important;
    box-shadow:0 14px 42px rgba(0,0,0,.38) !important;
  }

  #rc22Call.show .rc22-local video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  /* Chat live call: sempre visibile e proporzionata */
  #rc22Call.show .rc22-live{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    min-height:0 !important;
    height:100% !important;
    width:100% !important;
    overflow:hidden !important;
    border-radius:24px !important;
    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid rgba(226,232,240,.94) !important;
    box-shadow:0 -10px 34px rgba(0,0,0,.16) !important;
  }

  #rc22Call.show .rc22-live-head{
    min-height:42px !important;
    padding:9px 13px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    border-bottom:1px solid #e2e8f0 !important;
    background:#fff !important;
    color:#0f172a !important;
    font-weight:950 !important;
    font-size:15px !important;
  }

  #rc22Call.show .rc22-live-head small{
    color:#64748b !important;
    font-weight:800 !important;
    font-size:12px !important;
  }

  #rc22Call.show #rc22LiveList,
  #rc22Call.show .rc22-live-list{
    min-height:0 !important;
    height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:9px 11px !important;
    background:#f8fbff !important;
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
    -webkit-overflow-scrolling:touch !important;
  }

  #rc22Call.show .rc22-live-msg,
  #rc22Call.show #rc22LiveList .rc22-empty{
    max-width:88% !important;
    width:max-content !important;
    padding:8px 10px !important;
    border-radius:15px !important;
    background:#fff !important;
    border:1px solid #e2e8f0 !important;
    color:#0f172a !important;
    font-size:14px !important;
    line-height:1.32 !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }

  #rc22Call.show .rc22-live-msg.me{
    align-self:flex-end !important;
    background:#2563eb !important;
    border-color:#2563eb !important;
    color:#fff !important;
  }

  #rc22Call.show #rc22LiveForm{
    min-height:58px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 58px !important;
    align-items:center !important;
    gap:8px !important;
    padding:8px 10px !important;
    border-top:1px solid #e2e8f0 !important;
    background:#fff !important;
  }

  #rc22Call.show #rc22LiveInput{
    min-width:0 !important;
    width:100% !important;
    height:44px !important;
    border-radius:15px !important;
    padding:0 12px !important;
    font-size:16px !important;
    border:1px solid #cbd5e1 !important;
    background:#fff !important;
  }

  #rc22Call.show #rc22LiveForm button{
    width:58px !important;
    height:44px !important;
    border-radius:15px !important;
    padding:0 !important;
    font-size:14px !important;
    font-weight:950 !important;
  }

  /* Controlli call: non tagliati dalla barra del browser */
  #rc22Call.show .rc22-call-controls{
    min-height:calc(82px + var(--r6-safe-bottom)) !important;
    padding:10px 10px calc(10px + var(--r6-safe-bottom)) !important;
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    align-items:center !important;
    gap:9px !important;
    background:var(--r6-panel) !important;
    border-top:1px solid var(--r6-line) !important;
  }

  #rc22Call.show .rc22-call-controls button{
    min-width:0 !important;
    width:100% !important;
    height:56px !important;
    border-radius:19px !important;
    padding:0 8px !important;
    font-size:16px !important;
    font-weight:950 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
}

@media (max-width:390px){
  #rc22Call.show .rc22-call-head{
    min-height:calc(74px + var(--r6-safe-top)) !important;
  }

  #rc22Call.show .rc22-call-title b{
    font-size:18px !important;
  }

  #rc22Call.show .rc22-call-body{
    grid-template-rows:minmax(230px, 1fr) clamp(170px, 30dvh, 230px) !important;
    gap:8px !important;
    padding:8px !important;
  }

  #rc22Call.show .rc22-local{
    width:92px !important;
    height:122px !important;
  }

  #rc22Call.show .rc22-call-controls{
    gap:7px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  #rc22Call.show .rc22-call-controls button{
    height:54px !important;
    font-size:15px !important;
  }
}