*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,"Hiragino Sans",sans-serif;background:#e8f6fd;color:#222}
.hidden{display:none!important}
.topbar{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,#00aff0,#0078d4);color:#fff;padding:10px 16px}
.brand{font-size:22px;font-weight:700}.cloud{background:#fff;color:#00aff0;border-radius:50%;padding:2px 7px}
.top-right{display:flex;gap:8px;align-items:center;font-size:13px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot-on{background:#7fba00}.dot-off{background:#ccc}
button{border:1px solid #bcd;border-radius:20px;padding:7px 14px;background:#fff;cursor:pointer}
button.primary{background:#00aff0;color:#fff;border-color:#00aff0;font-weight:700}
button.danger{background:#e81123;color:#fff;border-color:#e81123}
button.ghost{background:transparent;color:#fff;border-color:#ffffff88}
button.wide{width:100%}.grow{flex:1}
.setup{display:flex;justify-content:center;padding:48px 16px}
.setup-card{background:#fff;border-radius:16px;padding:32px;max-width:460px;text-align:center;box-shadow:0 8px 30px #0078d422}
.big-cloud{font-size:56px;color:#00aff0}
.setup-card input{width:100%;padding:12px;border-radius:10px;border:1px solid #ccd;margin:12px 0;font-size:16px}
.app{display:flex;height:calc(100vh - 53px)}
.sidebar{width:300px;background:#fff;border-right:1px solid #dce;padding:14px;overflow:auto}
.me{display:flex;gap:10px;align-items:center}.me-name{font-weight:700}.me-sub{font-size:11px;color:#888}
.avatar{width:42px;height:42px;border-radius:50%;background:#00aff0;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.avatar.big{width:72px;height:72px;font-size:28px;margin:0 auto}
.pair-box{margin:14px 0;border:1px solid #e3eef5;border-radius:12px;padding:10px}
.pair-box .row{display:flex;gap:6px;margin-top:8px}.pair-box input{flex:1;min-width:0;padding:8px;border-radius:8px;border:1px solid #ccd;font-size:16px;letter-spacing:2px}.pair-box .row button{flex-shrink:0}
.code{font-size:28px;font-weight:800;letter-spacing:6px;text-align:center;color:#0078d4;padding:8px}
.contacts{list-style:none;padding:0}.contacts li{display:flex;gap:10px;align-items:center;padding:9px;border-radius:10px;cursor:pointer}
.contacts li:hover,.contacts li.active{background:#e8f6fd}.contacts .dot{margin-left:auto}
.hint{font-size:12px;color:#888}
.chatpane{flex:1;display:flex;flex-direction:column;background:#f4fafd}
.empty{margin:auto;color:#888}
#chatMain{display:flex;flex-direction:column;height:100%}
.chat-head{display:flex;gap:10px;align-items:center;background:#fff;padding:10px 14px;border-bottom:1px solid #dce}
.messages{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:65%;padding:9px 13px;border-radius:16px;white-space:pre-wrap;word-break:break-word}
.msg.me{align-self:flex-end;background:#d9f2fd;border-bottom-right-radius:4px}
.msg.peer{align-self:flex-start;background:#fff;border:1px solid #e2ebf0;border-bottom-left-radius:4px}
.msg .t{display:block;font-size:10px;color:#999;margin-top:3px}
.sendrow{display:flex;gap:8px;padding:12px;background:#fff;border-top:1px solid #dce}
.sendrow input{flex:1;min-width:0;padding:11px;border-radius:20px;border:1px solid #ccd}
.callui{position:fixed;inset:0;background:#111;z-index:30}
.callui #remoteVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.callui #localVideo{position:absolute;right:16px;bottom:96px;width:180px;border-radius:12px;border:2px solid #fff}
.call-info{position:absolute;top:18px;left:0;right:0;text-align:center;color:#fff;text-shadow:0 1px 4px #000}
#callPeer{font-size:22px;font-weight:700}
.call-controls{position:absolute;bottom:22px;left:0;right:0;display:flex;gap:10px;justify-content:center}
.call-controls .hangup{background:#e81123;color:#fff;border-color:#e81123}
.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;z-index:40}
.modal-card{background:#fff;border-radius:18px;padding:28px;text-align:center;min-width:280px}
.modal-card .row{display:flex;gap:10px}.modal-card .center{justify-content:center}
.back-btn{display:none;font-size:20px;padding:6px 12px}
.app{height:calc(100vh - 53px);height:calc(100dvh - 53px)}
@media(max-width:720px){
  .topbar{padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top))}
  .brand{font-size:19px}
  .app{flex-direction:column}
  .sidebar{width:100%;flex:1;border-right:none;display:block}
  .chatpane{width:100%;flex:1;display:none}
  .app.show-chat .sidebar{display:none}
  .app.show-chat .chatpane{display:flex}
  .app:not(.show-chat) .chatpane{display:none}
  #noPeer{display:none}
  .app.show-chat #noPeer{display:none}
  .back-btn{display:block}
  .msg{max-width:85%}
  button{min-height:44px}
  .sendrow{padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .sendrow input{font-size:16px}
  #msgInput{font-size:16px}
  .pair-box input{font-size:16px}
  .contacts li{padding:12px 9px}
  .callui #localVideo{width:108px;bottom:calc(110px + env(safe-area-inset-bottom))}
  .call-controls{flex-wrap:wrap;padding:0 10px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .call-controls button{flex:1 1 40%;min-height:48px}
  .modal-card{margin:0 16px;width:calc(100% - 32px)}
  .setup{padding:24px 12px}
  .setup-card{padding:24px 18px;width:100%}
}