.ptt-intro{margin-bottom:16px;background:linear-gradient(145deg,#fff,#f1f8ff)}
.ptt-intro h2{margin-top:5px}.ptt-hint{margin:0;color:#6a7a89;font-size:13px}
.user-actions{display:flex;gap:8px}.ptt-user-btn{border:1px solid #1373b5;border-radius:12px;background:#eaf6ff;color:#0e5d96;padding:9px 13px;font-weight:900;cursor:pointer}.ptt-user-btn[disabled]{opacity:.45;cursor:not-allowed}
.ptt-panel{position:fixed;inset:0;z-index:45;background:rgba(4,25,42,.86);backdrop-filter:blur(8px);display:grid;place-items:center;padding:18px}.ptt-panel[hidden]{display:none}
.ptt-sheet{position:relative;width:min(430px,100%);background:linear-gradient(155deg,#fff,#eaf5ff);border-radius:28px;padding:28px 24px 30px;text-align:center;box-shadow:0 24px 80px #0008}.ptt-close{position:absolute;right:16px;top:13px;width:40px;height:40px;border:0;border-radius:50%;background:#dceaf4;color:#173d59;font-size:28px}
.ptt-sheet .avatar{margin:20px auto 10px;width:84px;height:84px;font-size:27px}.ptt-sheet h2{margin:6px 0 12px;color:#102f49}.ptt-sheet>p{color:#688095;min-height:20px}
.ptt-state{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:8px 13px;font-weight:900}.ptt-state i{width:11px;height:11px;border-radius:50%;background:#20a563;box-shadow:0 0 0 4px #d5f4e4}.ptt-state.talking{background:#ffe5e5;color:#a51d1d}.ptt-state.talking i{background:#e23838;box-shadow:0 0 0 4px #ffcaca}.ptt-state.listening{background:#e5f2ff;color:#125e96}.ptt-state.listening i{background:#1686d0;box-shadow:0 0 0 4px #c9e7fb}
.ptt-talk{width:210px;height:210px;border:0;border-radius:50%;margin-top:18px;background:linear-gradient(145deg,#e73737,#b91526);color:#fff;box-shadow:0 14px 0 #841221,0 24px 45px #ab203c55;touch-action:none;user-select:none;-webkit-user-select:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}.ptt-talk strong{font-size:20px;max-width:160px}.ptt-talk small{margin-top:9px;opacity:.82;line-height:1.25}.ptt-talk:disabled{filter:grayscale(.7);opacity:.55;box-shadow:0 9px 0 #6d7780}.ptt-talk.transmitting{transform:translateY(9px);box-shadow:0 5px 0 #841221,0 12px 24px #ab203c55;background:linear-gradient(145deg,#ff3c3c,#991222)}
.count.ptt-talking{background:#ffe3e3;color:#a51d1d}.count.ptt-listening{background:#e3f1ff;color:#125e96}.count.ptt-available{background:#e7f6ee;color:#147443}
@media(max-width:650px){.call-btn,.ptt-user-btn{padding:9px 10px}.user-actions{gap:5px}.ptt-panel{padding-bottom:max(24px,env(safe-area-inset-bottom))}.ptt-talk{width:190px;height:190px}}

/* Android/WebView: evita que nombre + PTT + Llamar ensanchen la tarjeta. */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  .page,.card,.users,.user,.user-info{min-width:0;max-width:100%}
  .user{display:grid;grid-template-columns:45px minmax(0,1fr);column-gap:12px;row-gap:10px;align-items:center}
  .user>.avatar{grid-column:1;grid-row:1;margin:0}
  .user-info{grid-column:2;grid-row:1;overflow:hidden}
  .user-info strong{font-size:15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
  .user-actions{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%;min-width:0}
  .call-btn,.ptt-user-btn{width:100%;min-width:0;max-width:100%;padding:10px 8px;font-size:14px;text-align:center}
}

@media(max-width:390px){
  .page{padding-left:10px;padding-right:10px}
  .card{padding-left:10px;padding-right:10px}
  .user{padding-left:9px;padding-right:9px;grid-template-columns:42px minmax(0,1fr);column-gap:9px}
  .user>.avatar{width:42px;height:42px}
}