/* MilkyWay calls & chat search: sleek search bar on the Chats screen, call-alert banner and the ringing call card. */

/* ---- Chat search bar --------------------------------------------------- */
.wa-inbox .mw-chat-search{position:sticky;top:0;z-index:3;padding:10px 12px 8px;background:linear-gradient(180deg,var(--wa-panel) 70%,transparent);border-bottom:0}
.wa-inbox .mw-chat-searchbox{min-height:44px;padding:0 6px 0 14px;border-radius:999px;background:color-mix(in srgb,var(--wa-field) 78%,transparent);border:1px solid color-mix(in srgb,var(--wa-text) 12%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 18px rgba(3,10,32,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.wa-inbox .mw-chat-searchbox svg{flex:0 0 auto;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wa-inbox .mw-chat-searchbox:focus-within{border-color:var(--wa-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wa-accent) 28%,transparent),0 8px 24px rgba(3,10,32,.24);background:var(--wa-field)}
.wa-inbox .mw-chat-searchbox:focus-within>svg{color:var(--wa-accent)}
.wa-inbox .mw-chat-search .mw-chat-searchbox input{height:42px;min-height:0!important;font-size:.95rem;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.wa-inbox .mw-chat-searchbox input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.wa-inbox .mw-chat-search .mw-chat-search-clear{min-height:0!important;box-shadow:none!important}
.mw-chat-search-clear{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--wa-text) 10%,transparent);color:var(--wa-text);cursor:pointer}
.mw-chat-search-clear:hover,.mw-chat-search-clear:focus-visible{background:color-mix(in srgb,var(--wa-text) 18%,transparent);outline:0}
.mw-chat-search-clear svg{width:16px!important;height:16px!important}
.mw-chat-search-empty{margin:10px 6px 0;color:var(--wa-muted);font-size:.86rem;text-align:center}
.wa-inbox .mw-chat-search .dm-people-results:empty{display:none}
.wa-inbox .mw-chat-search .dm-people-results .wa-section{margin:10px 4px 2px!important}
.wa-inbox .mw-chat-search .dm-people-results{max-height:min(45vh,360px)}
.wa-inbox .dm-people-results .wa-avatar{flex:0 0 auto;width:42px;height:42px;font-size:1rem}
.mw-people-chat{display:grid;place-items:center;margin-left:auto;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--wa-accent) 18%,transparent);color:var(--wa-accent)}
.mw-people-chat svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.wa-inbox .wa-chat-row[hidden],.wa-inbox .wa-section[hidden],.wa-inbox .wa-chat-list.mw-search-miss{display:none!important}
@media(max-width:440px){.wa-inbox .mw-chat-search{padding:8px 10px 6px}.wa-inbox .mw-chat-searchbox{min-height:42px}}

/* ---- Call alerts banner ------------------------------------------------- */
.mw-call-alerts{display:flex;align-items:center;gap:10px;margin:2px 12px 6px;padding:10px 8px 10px 12px;border-radius:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--wa-accent) 22%,transparent),rgba(120,92,255,.16));border:1px solid color-mix(in srgb,var(--wa-accent) 35%,transparent);color:var(--wa-text);font-size:.84rem;line-height:1.35}
.mw-call-alerts[hidden]{display:none!important}
.mw-call-alerts>svg{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:var(--wa-accent);stroke-width:2;stroke-linejoin:round}
.mw-call-alerts span{flex:1;min-width:0}
.mw-call-alerts button{flex:0 0 auto;margin:0;padding:7px 13px;border:0;border-radius:999px;background:var(--wa-accent);color:var(--wa-accent-ink);font:inherit;font-weight:700;cursor:pointer}
.mw-call-alerts button:disabled{opacity:.6}
.mw-call-alerts .mw-call-alerts-close{display:grid;place-items:center;width:30px;height:30px;padding:0;background:transparent;color:var(--wa-muted)}
.mw-call-alerts .mw-call-alerts-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ---- Ringing call card -------------------------------------------------- */
.mw-call-incoming.mw-call-ringing{z-index:260;top:calc(14px + env(safe-area-inset-top,0px));bottom:auto;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"face who" "answer answer";align-items:center;gap:14px 14px;width:min(420px,calc(100% - 20px));padding:16px 16px 18px;border-radius:26px;background:linear-gradient(150deg,rgba(20,32,70,.72),rgba(36,18,64,.7))!important;color:#f1f5ff!important;border:1px solid rgba(190,210,255,.28)!important;box-shadow:0 24px 70px rgba(2,6,22,.55),inset 0 1px 0 rgba(255,255,255,.12)!important;-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);animation:mw-call-drop .38s cubic-bezier(.2,.9,.3,1.2) both}
.mw-call-ringer{grid-area:face;position:relative;width:58px;height:58px}
.mw-call-ringer i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(64,224,170,.65);animation:mw-call-wave 1.8s ease-out infinite}
.mw-call-ringer i+i{animation-delay:.9s}
.mw-call-face{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(140deg,#3b5bdb,#9c36b5);font-size:1.4rem;font-weight:800;color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.mw-call-face img{width:100%;height:100%;object-fit:cover}
.mw-call-who{grid-area:who;display:flex;flex-direction:column;gap:4px;min-width:0}
.mw-call-who strong{flex-basis:auto!important;overflow:hidden;font-size:1.08rem;text-overflow:ellipsis;white-space:nowrap}
.mw-call-who span{display:flex;align-items:center;gap:6px;color:rgba(225,233,255,.78);font-size:.86rem}
.mw-call-who svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.mw-call-answer{grid-area:answer;display:flex;justify-content:space-around;gap:16px}
.mw-call-incoming.mw-call-ringing .mw-call-answer button{flex:0 0 auto!important;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0!important;border:0!important;background:none!important;color:#f1f5ff!important;font:inherit;cursor:pointer}
.mw-call-answer button>svg{box-sizing:content-box;width:26px;height:26px;padding:15px;border-radius:50%;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;transition:transform .15s ease}
.mw-call-answer button:active>svg{transform:scale(.92)}
.mw-call-answer button:disabled{opacity:.55;cursor:wait}
.mw-call-answer small{color:#e6ecff;font-size:.8rem;font-weight:650}
.mw-call-accept>svg{background:linear-gradient(145deg,#22c55e,#0f9f6e);box-shadow:0 8px 24px rgba(16,185,129,.45);animation:mw-call-nudge 1.3s ease-in-out infinite}
.mw-call-decline>svg{background:linear-gradient(145deg,#f43f5e,#be123c);box-shadow:0 8px 24px rgba(244,63,94,.4);transform:rotate(135deg)}
.mw-call-decline:active>svg{transform:rotate(135deg) scale(.92)}
.mw-call-answer button:focus-visible>svg{outline:3px solid #fff;outline-offset:3px}
@keyframes mw-call-wave{from{transform:scale(1);opacity:.9}to{transform:scale(1.75);opacity:0}}
@keyframes mw-call-nudge{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(14deg)}50%{transform:rotate(0)}}
@keyframes mw-call-drop{from{transform:translate(-50%,-24px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media(prefers-reduced-motion:reduce){.mw-call-incoming.mw-call-ringing,.mw-call-ringer i,.mw-call-accept>svg{animation:none}}
@media(prefers-reduced-transparency:reduce){.mw-call-incoming.mw-call-ringing{background:#141c3a!important;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---- Active call panel: high-contrast controls -------------------------- */
/* The premium theme forces a white panel while the galaxy text colour is light, which hid the labels; the panel is pinned dark here. */
.mw-call-panel{background:linear-gradient(160deg,#0b1430 0%,#120c2b 100%)!important;color:#f8fafc!important;border:1px solid rgba(148,163,184,.35)!important;box-shadow:0 28px 90px rgba(0,0,0,.6)!important}
.mw-call-panel header strong{color:#fff!important;font-size:1.15rem;font-weight:800}
.mw-call-panel #mwCallStatus{color:#cbd5e1!important;font-weight:600}
.mw-call-panel .mw-call-controls{display:flex;flex-wrap:nowrap;justify-content:center;gap:14px;margin-top:20px;padding:14px 10px 4px;border-top:1px solid rgba(148,163,184,.22)}
.mw-call-panel .mw-call-controls button{flex:0 1 84px;min-width:64px;display:flex!important;flex-direction:column;align-items:center;gap:7px;margin:0;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:#fff!important;font:inherit;font-size:.8rem!important;font-weight:700;line-height:1.2;text-align:center;opacity:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mw-call-panel .mw-call-controls button[hidden]{display:none!important}
.mw-call-panel .mw-call-controls button svg{box-sizing:content-box;width:24px;height:24px;padding:16px;border-radius:50%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;background:#334155;color:#fff;border:2px solid rgba(255,255,255,.55);box-shadow:0 8px 20px rgba(0,0,0,.45);transition:transform .14s ease,background .14s ease}
.mw-call-panel .mw-call-controls button span{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap}
.mw-call-panel .mw-call-controls button:active svg{transform:scale(.92)}
.mw-call-panel .mw-call-controls button:focus-visible{outline:0}
.mw-call-panel .mw-call-controls button:focus-visible svg{outline:3px solid #facc15;outline-offset:3px}
/* Mic / camera switched off: inverted white tile, like a native call screen */
.mw-call-panel .mw-call-controls button[aria-pressed="false"] svg{background:#f8fafc;color:#0f172a;border-color:#fff}
.mw-call-panel #mwCallSound svg{background:#2563eb;border-color:#93c5fd}
.mw-call-panel #mwCallHangup svg{background:#dc2626;border-color:#fca5a5;box-shadow:0 8px 24px rgba(220,38,38,.55)}
.mw-call-panel .mw-call-controls button:disabled{cursor:not-allowed}
.mw-call-panel .mw-call-controls button:disabled svg{background:#1e293b;color:#94a3b8;border-color:#475569}
.mw-call-panel .mw-call-controls button:disabled span{color:#cbd5e1!important}
@media(max-width:440px){.mw-call-panel .mw-call-controls{gap:8px}.mw-call-panel .mw-call-controls button svg{width:22px;height:22px;padding:14px}.mw-call-panel .mw-call-controls button{font-size:.74rem!important}}
/* Phone number search in Chats: a found account with Connect / Message, or invite options */
.mw-phone-hit{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:12px;flex-wrap:wrap}
.mw-phone-hit>img,.mw-phone-hit>.wa-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.mw-phone-who{flex:1 1 120px;min-width:0}.mw-phone-who b,.mw-phone-who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-phone-actions{display:flex;gap:6px;flex-wrap:wrap}
.mw-phone-actions .btn{min-height:36px;padding:6px 12px;font-size:.85rem;text-decoration:none;display:inline-flex;align-items:center}
.mw-phone-invite{padding:6px}.mw-phone-invite p{margin:0 0 8px}
.mw-auth-hint{display:block;margin:4px 0 6px;font-size:.74rem;line-height:1.35}
/* Missed call: stays on screen until the person calls back or dismisses it */
.mw-call-missed{position:fixed;z-index:255;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));width:min(420px,calc(100% - 20px));display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:20px;background:linear-gradient(150deg,rgba(20,32,70,.86),rgba(54,18,48,.84));color:#f1f5ff;border:1px solid rgba(251,113,133,.45);box-shadow:0 18px 50px rgba(2,6,22,.5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:mw-call-drop .32s ease both}
.mw-call-missed-face{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#334155;font-weight:800;box-shadow:0 0 0 2px #fb7185}
.mw-call-missed-face img{width:100%;height:100%;object-fit:cover}
.mw-call-missed-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mw-call-missed-who b{font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-call-missed-who small{font-size:.74rem;color:#fda4af;display:flex;align-items:center;gap:4px}
.mw-call-missed-who small:last-child{color:#cbd5e1}
.mw-call-missed-who svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.mw-call-missed-actions{display:flex;align-items:center;gap:6px}
.mw-call-missed-back{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:0!important;padding:6px 10px!important;border:0!important;border-radius:14px!important;background:#22c55e!important;color:#fff!important;font:inherit;font-weight:800;cursor:pointer}
.mw-call-missed-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.mw-call-missed-back small{font-size:.66rem}
.mw-call-missed-close{width:30px;height:30px;min-height:0!important;padding:0!important;border:0!important;border-radius:50%!important;background:rgba(255,255,255,.12)!important;color:#fff!important;font-size:1.1rem;cursor:pointer}

/* Video calls: one large view plus a small picture-in-picture. Tap the small video (or Swap videos) to choose which one is large. */
.mw-call-media.mw-call-pip-layout{display:block!important;position:relative;min-height:min(55dvh,420px)}
.mw-call-media.mw-call-pip-layout video.is-main{display:block;width:100%;height:min(60dvh,520px);max-height:none;object-fit:cover;border-radius:18px;background:#09142a}
.mw-call-media.mw-call-pip-layout video.is-pip{position:absolute;right:10px;bottom:10px;z-index:2;width:clamp(92px,28%,168px);height:auto;aspect-ratio:3/4;max-height:44%;object-fit:cover;border-radius:14px;border:2px solid rgba(255,255,255,.75);box-shadow:0 10px 28px rgba(0,0,0,.55);cursor:pointer;transition:scale .15s ease}
.mw-call-media.mw-call-pip-layout video.is-pip:active{scale:.96}
.mw-call-media.mw-call-pip-layout video:focus-visible{outline:3px solid #facc15;outline-offset:2px}
.mw-call-media .mw-call-swap{position:absolute;left:10px;top:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.4)!important;background:rgba(8,12,32,.72)!important;color:#fff!important;font-weight:700;font-size:.85rem;cursor:pointer;backdrop-filter:blur(8px)}
@media(prefers-reduced-motion:reduce){.mw-call-media.mw-call-pip-layout video.is-pip{transition:none}}
.mw-profile-country .mw-country-value{opacity:.85;cursor:default}
.mw-birth{display:grid;grid-template-columns:1fr 1.6fr 1.2fr;gap:6px}
.mw-birth select,.mw-details select{min-width:0;width:100%}
.auth .mw-details select{margin:5px 0;padding:12px 8px}