.yw-login{min-height:100dvh;background:#f7f5f3;color:#111b21;padding:40px clamp(24px,6vw,100px);box-sizing:border-box;font-family:Roboto,'Segoe UI',Arial,sans-serif}.yw-login[hidden],.yw-modal [hidden]{display:none!important}.yw-login>header{display:flex;align-items:center;gap:12px;color:#128c5e;font-size:27px;margin:0 auto 40px;max-width:1040px}.yw-login svg,.yw-modal svg,.wa-list-menu [data-web-link] svg{width:24px;height:24px;flex-shrink:0;vertical-align:middle}.yw-card{max-width:1040px;margin:auto;background:white;border:1px solid #d8dcd9;border-radius:24px;padding:56px;display:grid;grid-template-columns:1fr 280px;gap:50px;box-shadow:0 2px 2px #00000005}.yw-instructions h1{font-size:30px;font-weight:500;line-height:1.3;margin:0 0 16px}.yw-instructions>p{color:#54656f;font-size:17px}.yw-instructions ol{padding-left:24px;font-size:17px;line-height:1.65;margin:28px 0}.yw-instructions li{padding-left:8px;margin-bottom:14px}.yw-note{display:flex;gap:10px;color:#667781;font-size:13px;line-height:1.5}.yw-code{text-align:center}.yw-qr{width:272px;height:272px;padding:12px;background:white;display:grid;place-items:center;box-sizing:border-box;border:1px solid #e9edef;border-radius:12px}.yw-qr img,.yw-qr canvas{max-width:100%}.yw-count{font-size:13px;color:#667781;min-height:20px}.yw-refresh{display:inline-flex;align-items:center;gap:8px;border:0;background:#e6f4e9;color:#075e54;padding:10px 16px;border-radius:22px;cursor:pointer}.yw-error{color:#b3261e;font-size:14px;line-height:1.5}.yw-login footer{font-size:13px;text-align:center;color:#667781;margin-top:32px}.yw-modal{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:20px;background:#111b2170;box-sizing:border-box}.yw-modal>section{background:white;border-radius:24px;width:min(460px,100%);max-height:90dvh;overflow:auto;color:#111b21;padding:24px;box-sizing:border-box}.yw-modal header{display:flex;align-items:center;gap:10px}.yw-modal h2{font-size:23px;flex:1;margin:0}.yw-close{border:0;background:#f0f2f5;border-radius:50%;width:36px;height:36px;display:grid;place-items:center}.yw-content{line-height:1.55}.yw-content h3{font-size:18px;margin:24px 0 12px}.yw-content p{font-size:15px;color:#54656f}.yw-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;background:#1daa61;color:white;border:0;border-radius:25px;font:600 16px inherit;cursor:pointer}.yw-device{display:flex;align-items:center;gap:12px;justify-content:space-between;border-bottom:1px solid #e9edef;padding:16px 0;font-size:14px}.yw-device button{border:0;border-radius:18px;background:#fce8e6;color:#b3261e;padding:9px 12px}.yw-camera{position:relative;background:#111b21;border-radius:18px;overflow:hidden;aspect-ratio:1}.yw-camera video{height:100%;width:100%;object-fit:cover}.yw-camera span{position:absolute;inset:15%;border:3px solid #25d366;border-radius:12px;pointer-events:none}
html.desktop-device .desktop-closed,html.desktop-device #welcomeScreen,html.desktop-device #screenLock{display:none!important}
html.desktop-device:not(.yasko-web-linked) #chatApp,html.desktop-device:not(.yasko-web-linked) #yaskoBottomNav{display:none!important}
html.desktop-device.yasko-web-linked #chatApp:not([hidden]){position:fixed!important;inset:0 0 0 68px!important;width:calc(100% - 68px)!important;max-width:none!important;height:100dvh!important;min-height:0!important;margin:0!important;display:grid!important;grid-template-columns:360px minmax(0,1fr)!important;border-radius:0!important;padding:0!important;overflow:hidden}
html.desktop-device.yasko-web-linked .sidebar{display:flex!important;position:relative!important;width:360px!important;max-width:none!important;height:100%!important;min-height:0;grid-column:1;border-right:1px solid #e9edef;border-radius:0;overflow:hidden}
html.desktop-device.yasko-web-linked .conversation{display:flex!important;position:relative!important;grid-column:2;width:100%!important;height:100%!important;inset:auto!important;padding:0!important;min-height:0;overflow:hidden}
html.desktop-device.yasko-web-linked .conversation-active:not([hidden]),html.desktop-device.yasko-web-linked #conversationActive:not([hidden]){display:flex;height:100%;width:100%;flex-direction:column;min-height:0}
html.desktop-device.yasko-web-linked #conversationEmpty:not([hidden]){display:flex!important;flex-direction:column;justify-content:center;align-items:center;width:100%;background:#f0f2f5}
html.desktop-device.yasko-web-linked #conversationEmpty[hidden],html.desktop-device.yasko-web-linked #conversationActive[hidden]{display:none!important}
html.desktop-device.yasko-web-linked body #yaskoBottomNav{display:flex!important;position:fixed!important;inset:0 auto 0 0!important;width:68px!important;height:100dvh!important;min-height:0!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:16px;padding:18px 4px!important;box-sizing:border-box;border:0;border-right:1px solid #dce1e4;background:#f0f2f5;z-index:500}
html.desktop-device.yasko-web-linked #yaskoBottomNav button{flex:0 0 48px;width:56px;min-height:48px;padding:8px 0!important;gap:4px;font-size:10px}html.desktop-device.yasko-web-linked #yaskoBottomNav button::before{width:44px;height:44px}html.desktop-device.yasko-web-linked #yaskoBottomNav button>span:last-child{display:none}html.desktop-device.yasko-web-linked #yaskoBottomNav #navProfile{margin-top:auto}html.desktop-device #yaskoBottomNav .nav-create{position:static!important;box-shadow:none!important}
html.desktop-device.yasko-web-linked .group-conversation{left:428px!important;right:0!important;top:0!important;bottom:0!important;width:calc(100% - 428px)!important;height:100dvh!important;padding-bottom:0!important}
html.desktop-device.yasko-web-linked .modal:not([hidden]),html.desktop-device.yasko-web-linked .toast:not([hidden]){display:flex!important}
html.desktop-device.yasko-web-linked .yasko-page:not([hidden]){display:flex!important;left:68px!important;right:0!important;width:calc(100% - 68px)!important;padding-bottom:0!important}
html.desktop-device.yasko-web-linked .message-list{min-height:0;flex:1;overflow-y:auto}html.desktop-device .chat-composer{flex-shrink:0}html.desktop-device #exitButton{display:none}html.desktop-device .sidebar-brand strong{font-size:23px}html.desktop-device .sidebar-brand strong:after{content:' Web'}
@media(max-width:1000px){.yw-card{padding:32px;gap:28px;grid-template-columns:1fr 272px}.yw-login{padding:28px}.yw-instructions h1{font-size:25px}html.desktop-device.yasko-web-linked #chatApp:not([hidden]){grid-template-columns:300px minmax(0,1fr)!important}html.desktop-device.yasko-web-linked .sidebar{width:300px!important}html.desktop-device.yasko-web-linked .group-conversation{left:368px!important;width:calc(100% - 368px)!important}}

html.desktop-device{--yasko-nav-height:0px!important}html.desktop-device body{padding-bottom:0!important}

html.desktop-device body{font-family:Roboto,"Segoe UI",Arial,sans-serif!important}html.desktop-device .brand-lockup strong:after{content:" Web"}html.desktop-device.yasko-web-linked #yaskoBottomNav button{font-size:0!important}

html.desktop-device.yasko-web-linked body[data-yasko-conversation] nav#yaskoBottomNav{display:flex!important}

.yw-modal{z-index:40000}html.desktop-device:not(.yasko-web-linked) .group-conversation,html.desktop-device:not(.yasko-web-linked) .yasko-page,html.desktop-device:not(.yasko-web-linked) .chat-feature-dialog,html.desktop-device:not(.yasko-web-linked) .yw-modal{display:none!important}
/* Linked devices is a full page; QR scanning remains a separate action. */
.yw-linked-page{position:fixed;inset:0;z-index:15000;display:flex;flex-direction:column;background:#fff;color:#111b21;font-family:Roboto,"Segoe UI",Arial,sans-serif;box-sizing:border-box}
.yw-linked-head{display:flex;align-items:center;gap:20px;min-height:64px;padding:8px 16px;border-bottom:1px solid #f0f2f5;box-sizing:border-box;flex-shrink:0}
.yw-linked-head h1{font-size:23px;font-weight:400;margin:0}
.yw-linked-head button{display:grid;place-items:center;width:32px;height:40px;padding:0;border:0;background:transparent;color:#111b21;cursor:pointer}
.yw-linked-head svg{width:26px;height:26px}
.yw-linked-scroll{flex:1;min-height:0;overflow:auto;padding:24px 18px max(32px,env(safe-area-inset-bottom));box-sizing:border-box}
.yw-device-hero{text-align:center;margin:0 auto 30px;max-width:550px}
.yw-device-hero>svg{display:block;width:min(280px,85%);height:auto;margin:0 auto 18px}
.yw-device-hero>p{font-size:15px;line-height:1.5;color:#667781;margin:0}
.yw-more-info{background:transparent;border:0;padding:2px 8px;font:600 15px/1.5 Roboto,"Segoe UI",Arial,sans-serif;color:#16805b;cursor:pointer}
.yw-device-hero .yw-link-help{margin-top:12px;padding:12px;background:#f4f7f5;border-radius:12px}
.yw-linked-page .yw-scan{display:flex;width:100%;max-width:550px;min-height:45px;margin:0 auto 32px;padding:11px 20px;gap:10px;background:#1aaa62;font-family:inherit;font-size:16px;font-weight:600;border-radius:28px}
.yw-linked-page .yw-scan svg{width:22px;height:22px;flex-shrink:0}
.yw-linked-page [hidden]{display:none!important}
.yw-device-status{max-width:550px;margin:auto;border-top:1px solid #e9edef;padding-top:26px}
.yw-device-status h2{font-size:13px;font-weight:500;color:#667781;margin:0 0 6px}
.yw-device-status>p{font-size:15px;line-height:1.5;color:#667781;margin:0 0 16px}
.yw-device-status .yw-devices{font-size:15px;color:#667781}
.yw-linked-device{display:flex;align-items:center;gap:17px;width:100%;padding:14px 0;border:0;background:transparent;color:#111b21;text-align:left;cursor:pointer;font-family:inherit}
.yw-device-emblem{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:#459a92;color:#fff}
.yw-device-emblem svg{width:25px;height:25px}
.yw-linked-device>span:last-child{min-width:0}
.yw-linked-device strong{display:block;font-size:18px;font-weight:400;overflow-wrap:anywhere}
.yw-linked-device small{display:block;font-size:14px;color:#667781;margin-top:5px;line-height:1.4}
.yw-disconnect{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:0;border-radius:22px;background:#fff1f3;color:#c12447;font:500 16px Roboto,"Segoe UI",Arial,sans-serif;cursor:pointer}
body.yw-devices-open{overflow:hidden}
body.yw-devices-open .new-chat-fab{display:none}
html.desktop-device.yasko-web-linked .yw-linked-page{left:68px}
@media(min-width:700px){.yw-linked-scroll{padding-top:32px}.yw-device-hero>svg{width:300px}}

/* Message cards travel from the phone into the laptop in a continuous loop. */
.yw-transfer{transform-box:view-box;transform-origin:0 0;animation:yw-device-transfer 4.8s linear infinite;opacity:0}
.yw-transfer-message{animation-delay:0s}
.yw-transfer-heart{animation-delay:-1.6s}
.yw-transfer-note{animation-delay:-3.2s}
@keyframes yw-device-transfer{
  0%{transform:translate(70px,91px) scale(.45);opacity:0}
  12%{transform:translate(91px,91px) scale(.85);opacity:1}
  25%{transform:translate(116px,91px) scale(1);opacity:1}
  72%{transform:translate(211px,91px) scale(1);opacity:1}
  88%{transform:translate(241px,91px) scale(.75);opacity:1}
  100%{transform:translate(258px,91px) scale(.35);opacity:0}
}
@media(prefers-reduced-motion:reduce){
 .yw-transfer{animation:none;opacity:1}
 .yw-transfer-message{transform:translate(105px,91px)}
 .yw-transfer-heart{transform:translate(168px,91px)}
 .yw-transfer-note{transform:translate(231px,91px)}
}

/* Leave the navigation area available while the devices page is open. */
html.mobile-device .yw-linked-page{bottom:var(--yasko-nav-height,82px)}

/* Device scanning, approval and details use the same full-page navigation. */
.yw-action-page{padding:0;background:#fff;display:flex;align-items:stretch;justify-content:stretch}
.yw-action-page>section{width:100%;height:100%;max-height:none;border-radius:0;padding:0;display:flex;flex-direction:column;overflow:hidden}
.yw-action-page header{min-height:64px;padding:max(8px,env(safe-area-inset-top)) 16px 8px;box-sizing:border-box;border-bottom:1px solid #e9edef;flex-shrink:0;gap:20px}
.yw-action-page .yw-close{background:transparent;border-radius:0;width:32px;height:40px;padding:0;flex:0 0 32px;cursor:pointer;color:#111b21}
.yw-action-page h2{font-size:23px;font-weight:400}
.yw-action-page .yw-content{flex:1;min-height:0;overflow:auto;box-sizing:border-box;padding:20px max(18px,calc((100% - 550px)/2)) max(24px,env(safe-area-inset-bottom));overflow-wrap:anywhere}
.yw-action-page .yw-camera{max-width:420px;margin:18px auto}
html.desktop-device.yasko-web-linked .yw-linked-page,html.desktop-device.yasko-web-linked .yw-action-page{left:68px}
