@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#f4f3f8;background:#100f15;font-synthesis:none;text-rendering:optimizeLegibility;--surface:#191820;--muted:#9693a1;--accent:#b88cff;--line:rgba(255,255,255,.09)}
*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 50% -18%,rgba(147,99,201,.16),transparent 42%),#100f15}button,input{font:inherit}button{color:inherit}
.app-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center}.app-content{width:min(100%,560px);flex:1;display:flex;flex-direction:column;padding:0 24px 18px}.chat-page,.profile-page{display:flex;flex:1;flex-direction:column;min-height:calc(100vh - 90px)}
.chat-header{height:88px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);flex:none}.brand-mark{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#d3adff,#8f5bd1);color:#201529;font:800 28px 'Manrope',sans-serif;box-shadow:0 5px 18px #a36ddb2b}.header-copy{flex:1}.eyebrow{display:block;color:#aaa5b4;font-size:9px;letter-spacing:.18em;font-weight:700;margin-bottom:2px}.header-copy h1{font:700 20px 'Manrope',sans-serif;margin:0;letter-spacing:-.025em}
.icon-button{width:38px;height:38px;border:1px solid var(--line);border-radius:13px;background:#ffffff06;display:grid;place-items:center;cursor:pointer;font-size:24px;color:#c9c6d0}.icon-button svg,.attach-button svg,.send-button svg,.nav-item svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.conversation{flex:1;min-height:320px;display:flex;flex-direction:column;padding:20px 0;overflow:auto}.conversation-intro{text-align:center;padding:24px 0 21px;color:var(--muted)}.conversation-intro h2{color:#f4f3f8;font:700 18px 'Manrope',sans-serif;margin:10px 0 4px}.conversation-intro p{margin:0;font-size:13px}.avatar{border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#e6d2ff,#a873e0);color:#2a1c37;font:800 17px 'Manrope',sans-serif}.avatar-large{width:58px;height:58px;margin:auto;box-shadow:0 8px 28px #a36ddb28}.date-divider{display:flex;align-items:center;gap:12px;color:#777381;font-size:9px;letter-spacing:.16em;font-weight:700;margin:8px 0 20px}.date-divider:before,.date-divider:after{content:"";height:1px;background:var(--line);flex:1}
.message-row{display:flex;margin:5px 0}.message-row.outgoing{justify-content:flex-end}.message-bubble{max-width:82%;padding:11px 13px 8px;border:1px solid #b88cff30;border-radius:16px 16px 5px 16px;background:linear-gradient(145deg,#382843,#28202f);box-shadow:0 7px 22px #0002}.message-bubble p{margin:0 0 5px;overflow-wrap:anywhere}.message-bubble time{display:block;text-align:right;color:#bbb0c6;font-size:10px}.message-media{display:block;max-width:100%;max-height:320px;object-fit:cover;border-radius:10px;margin:0 0 7px}.message-media:only-child{margin-bottom:0}
.composer{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(255,255,255,.12);background:#191820;border-radius:19px;box-shadow:0 12px 35px #0003}.attach-button{flex:none;width:38px;height:38px;display:grid;place-items:center;color:#c5a3ef;border-radius:12px;background:#b88cff12;cursor:pointer;transition:background .15s}.attach-button:hover{background:#b88cff25}.file-picker{display:none}.message-input{min-width:0;flex:1;color:#f5f2f8;background:transparent;border:0;outline:0;font-size:14px}.message-input::placeholder{color:#85818e}.send-button{width:38px;height:38px;flex:none;display:grid;place-items:center;color:#241832;background:#c49af2;border:0;border-radius:12px;cursor:pointer;transition:opacity .15s,transform .15s}.send-button:hover:not(:disabled){transform:translateY(-1px);background:#d2b3f5}.send-button:disabled{opacity:.38;cursor:default}.composer-hint{text-align:center;color:#716d79;font-size:10px;margin:9px 0 0}
.media-draft{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:8px;border:1px solid var(--line);border-radius:14px;background:#191820}.media-draft img,.media-draft video{width:48px;height:48px;object-fit:cover;border-radius:9px;background:#0f0e13}.draft-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}.draft-copy strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draft-copy span{font-size:11px;color:var(--muted)}.upload-notice{display:flex;align-items:center;gap:12px;justify-content:space-between;color:#ffd4d4;background:#5b242c;border:1px solid #a5414e;border-radius:12px;padding:10px 12px;margin:0 0 10px;font-size:12px}.upload-notice button{border:0;background:none;font-size:19px;cursor:pointer}
.bottom-nav{width:min(calc(100% - 32px),512px);height:72px;flex:none;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 16px 18px;padding:7px;border:1px solid rgba(255,255,255,.11);border-radius:22px;background:rgba(27,25,34,.94);box-shadow:0 12px 38px #0005;backdrop-filter:blur(16px)}.nav-item{height:100%;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:#8e8a98;border-radius:15px;font-size:12px;font-weight:600;transition:background .15s,color .15s}.nav-item.active{color:#dfc9fa;background:#b88cff17}.nav-item.active svg{color:#c39beb}
.profile-page{min-height:calc(100vh - 90px)}.profile-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px}.profile-avatar{width:96px;height:96px;border-radius:30px;display:grid;place-items:center;color:#c5a0f0;background:linear-gradient(145deg,#b88cff20,#b88cff08);border:1px solid #b88cff32}.profile-avatar svg{width:43px;height:43px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.profile-placeholder h2{font:700 19px 'Manrope',sans-serif;margin:18px 0 0}
#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;right:0;padding:12px;background:#7b2222;color:white;z-index:10}
.header-actions{display:flex;align-items:center;gap:7px}.call-action{width:36px;height:36px;display:grid;place-items:center;border:1px solid #c49af235;border-radius:12px;background:#b88cff12;color:#d8bafa;cursor:pointer}.call-action svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.page-rail{width:min(calc(100% - 32px),512px);height:72px;flex:none;display:flex;gap:8px;margin:0 16px 18px;padding:7px;border:1px solid rgba(255,255,255,.11);border-radius:22px;background:rgba(27,25,34,.94);box-shadow:0 12px 38px #0005;backdrop-filter:blur(16px)}.page-tab{height:100%;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:#8e8a98;border-radius:15px;font-size:12px;font-weight:600}.page-tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.page-tab.active{color:#dfc9fa;background:#b88cff17}
.calls-page{display:flex;flex:1;flex-direction:column;min-height:calc(100vh - 90px)}.history-count{min-width:28px;height:28px;padding:0 8px;border-radius:20px;display:grid;place-items:center;background:#b88cff16;color:#dec7fa;font-size:11px}.call-history{flex:1;padding:16px 0}.empty-history{min-height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.history-icon{width:64px;height:64px;border:1px solid #b88cff30;border-radius:22px;display:grid;place-items:center;color:#cda8f6;background:#b88cff10;font-size:33px}.empty-history h2{font:700 17px 'Manrope',sans-serif;margin:18px 0 7px}.empty-history p{margin:0;color:var(--muted);font-size:13px}.empty-history span{margin-top:18px;padding:7px 11px;border-radius:20px;background:#ffffff08;color:#aaa5b4;font-size:11px}.history-row{display:flex;align-items:center;gap:12px;padding:13px 5px;border-bottom:1px solid var(--line)}.history-row .avatar{width:44px;height:44px}.history-copy{display:flex;flex-direction:column;gap:4px;flex:1}.history-copy strong{font-size:14px}.history-copy span{color:var(--muted);font-size:11px}.history-direction{color:#cba8f2}
.call-overlay{flex:1;min-height:0;display:flex;flex-direction:column;padding:18px 0}.voice-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.voice-stage h2{font:700 21px 'Manrope',sans-serif;margin:17px 0 5px}.voice-stage p{color:var(--muted);font-size:12px}.video-stage{position:relative;flex:1;min-height:280px;display:grid;gap:8px;overflow:hidden;border-radius:23px;background:#08080b;padding:9px}.remote-placeholder{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;min-height:130px;border:1px solid #ffffff12;border-radius:18px;background:radial-gradient(ellipse at 50% 40%,#34243f,#16141a 72%);color:#c6c1cf;font-size:12px}.video-stage.video-one{grid-template-columns:1fr}.video-stage.video-two{grid-template-columns:1fr 1fr}.video-stage.video-three{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.video-stage.video-three .remote-placeholder:first-of-type{grid-column:1/3}.video-stage.video-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr}.local-video{position:absolute;z-index:2;right:17px;top:17px;width:26%;max-height:30%;aspect-ratio:3/4;object-fit:cover;border:1px solid #ffffff55;border-radius:14px;background:#121116}.video-stage.local-main .local-video{inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);max-height:none;aspect-ratio:auto;border-radius:18px}.video-stage.local-main .remote-placeholder{position:absolute;right:17px;top:17px;width:25%;height:27%;z-index:3;min-height:0;border-radius:14px}.call-toolbar{display:flex;align-items:center;justify-content:center;gap:clamp(9px,4vw,22px);padding:20px 0 5px}.call-control{min-width:54px;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;color:#e7e0f1;font-size:21px;cursor:pointer}.call-control small{font-size:9px;color:#aaa5b4}.call-control:disabled{opacity:.4;cursor:default}.hangup-button{width:57px;height:57px;border:0;border-radius:50%;background:#e24b62;color:white;font-size:25px;transform:rotate(135deg);cursor:pointer;box-shadow:0 7px 22px #e24b6238}
@media(min-width:700px){.app-content{padding-top:10px}.chat-page,.profile-page,.calls-page{min-height:calc(100vh - 112px)}.page-rail{margin-bottom:24px}.video-stage{min-height:380px}}
.call-timer{display:block;margin-top:4px;color:#fff;font-variant-numeric:tabular-nums;font-size:15px;font-weight:700}
.auth-panel{width:100%;max-width:390px;min-height:60vh;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.auth-panel h1{margin:4px 0 0;font:700 25px 'Manrope',sans-serif}.auth-panel p{margin:0 0 10px;color:var(--muted);font-size:13px}.auth-form{width:100%;display:flex;flex-direction:column;gap:10px}.auth-form input{height:46px;padding:0 13px;border:1px solid var(--line);border-radius:13px;background:#191820;color:#f4f3f8;outline:none}.auth-form input:focus{border-color:#b88cff88}.auth-form .send-button{width:100%;height:44px;border-radius:13px;font-weight:700}.auth-secondary{border:0;background:none;color:#cda8f6;padding:10px;cursor:pointer}.empty-history .send-button{display:inline-flex;align-items:center;justify-content:center;width:auto;padding:0 15px;margin-top:16px;text-decoration:none;border-radius:12px;font-size:13px;font-weight:700}
.remote-media{position:absolute;inset:9px;z-index:1;display:grid;gap:8px;grid-template-columns:1fr;grid-template-rows:1fr}.remote-tile{position:relative;min-width:0;min-height:0;overflow:hidden}.remote-tile video{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:16px;background:#17151b}.remote-name{position:absolute;left:10px;bottom:9px;padding:5px 8px;border-radius:10px;background:#08080bb8;color:#fff;font-size:11px}.video-stage.video-one .remote-media:empty:after{content:'Esperando a que se unan';position:absolute;inset:0;display:grid;place-items:center;color:#aaa5b4;font-size:13px}.video-stage.video-two .remote-media{grid-template-columns:1fr}.video-stage.video-three .remote-media{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.video-stage.video-four .remote-media{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.video-stage.video-four .remote-tile:first-child{grid-column:1/3}.video-stage.video-grid .remote-media{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.video-stage.local-main .remote-media{inset:17px 17px auto auto;width:25%;height:27%;grid-template-columns:1fr;grid-template-rows:repeat(4,1fr)}.video-stage.local-main .remote-tile{border-radius:14px}.video-stage.local-main .remote-tile video{border-radius:14px}.video-stage.local-main .remote-media:empty{display:none}.remote-audio{display:none}.remote-audio-tile{display:none}.call-status{position:absolute;z-index:3;left:18px;top:17px;max-width:70%;padding:6px 9px;border:1px solid #ffffff14;border-radius:10px;background:#09080dbd;color:#d9d0e4;font-size:10px;overflow-wrap:anywhere}.voice-stage p{max-width:100%;text-align:center;overflow-wrap:anywhere}