:root{font-family:'DM Sans',sans-serif;color:#172f38;background:#f5f7f4;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}.hidden{display:none!important}
.app-shell{min-height:100vh;display:grid;grid-template-columns:260px 1fr}.sidebar{background:#112b39;color:#e6f0ed;padding:28px 19px;display:flex;flex-direction:column;gap:29px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;padding:0 8px;font:700 23px 'Outfit',sans-serif;letter-spacing:-.6px}.brand-mark{width:39px;height:39px;border-radius:14px;background:#d7ed7d;color:#193b3a;display:grid;place-items:center;font-size:22px}.family-chip{background:#1d3e4c;border:1px solid #2d5260;border-radius:16px;padding:14px 15px}.family-chip small{display:block;color:#a6c1c3;font-size:11px;text-transform:uppercase;letter-spacing:1.1px;margin-bottom:3px}.family-chip b{font-size:15px}.nav{display:grid;gap:6px}.nav button{border:0;background:transparent;color:#abc1c5;display:flex;align-items:center;gap:13px;width:100%;padding:12px 14px;border-radius:12px;text-align:left;font-weight:600}.nav button.active,.nav button:hover{background:#294b55;color:#fff}.nav .ico{font-size:19px;width:22px;text-align:center}.side-footer{margin-top:auto;padding:13px 8px;border-top:1px solid #2e4a54;display:flex;align-items:center;gap:10px}.avatar{width:37px;height:37px;border-radius:13px;background:#d7ed7d;color:#254246;display:grid;place-items:center;font-weight:800}.side-footer span{display:block;font-weight:700}.side-footer small{color:#a9c1c4}.main{max-width:1250px;width:100%;margin:0 auto;padding:33px 42px 42px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px}.eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.7px;color:#78939a;margin:0 0 8px}.topbar h1{font:700 34px 'Outfit',sans-serif;letter-spacing:-1.1px;margin:0}.top-actions{display:flex;align-items:center;gap:10px}.status-pill{border:1px solid #d8e3dc;background:#fff;border-radius:99px;padding:9px 14px;color:#507069;font-size:12px;font-weight:800;white-space:nowrap}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#69bc83;margin-right:7px}.card{background:#fff;border:1px solid #e4ebe6;box-shadow:0 7px 28px rgba(26,58,62,.035);border-radius:22px;padding:23px}.card h2{font:700 21px 'Outfit',sans-serif;margin:0}.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px;gap:10px}.muted{color:#819198}.small{font-size:13px}.grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}.stack{display:grid;gap:18px}.hero{min-height:205px;background:#dcebbb;border:0;position:relative;overflow:hidden;display:flex;align-items:center}.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.28)}.hero::before{width:250px;height:250px;right:78px;top:-120px}.hero::after{width:190px;height:190px;right:-45px;bottom:-110px}.hero-copy{position:relative;z-index:1;max-width:470px}.hero h2{font-size:31px;letter-spacing:-.8px;line-height:1.06;margin:3px 0 10px}.hero p{line-height:1.55;margin:0;color:#4e6754}.hero-icon{font-size:70px;position:absolute;right:42px;bottom:17px;transform:rotate(-10deg)}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}.metric{background:#fff;border:1px solid #e4ebe6;border-radius:18px;padding:18px}.metric strong{display:block;font:700 27px 'Outfit';margin:6px 0 2px}.metric span{color:#799099;font-size:12px;font-weight:700}.member-row,.activity-row,.location-row,.sos-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #edf0ed}.member-row:last-child,.activity-row:last-child,.location-row:last-child,.sos-row:last-child{border:0}.member-icon{width:42px;height:42px;border-radius:15px;background:#e9f0d9;display:grid;place-items:center;font-weight:800;color:#476b5f;flex:none}.member-icon.parent{background:#d8eae9;color:#21616c}.row-main{flex:1;min-width:0}.row-main b{display:block;font-size:14px}.row-main small{display:block;color:#8ba0a2;margin-top:3px}.row-end{font-size:12px;color:#789199;text-align:right}.btn{border:0;border-radius:12px;padding:11px 16px;background:#143a45;color:white;font-weight:800;font-size:13px;white-space:nowrap}.btn:hover{background:#245664}.btn.secondary{background:#edf3ed;color:#2c5b54}.btn.ghost{background:transparent;border:1px solid #dce5dd;color:#41615d}.btn.danger{background:#e95653;color:#fff}.btn.lime{background:#d4ec7e;color:#243c3c}.btn.small{padding:8px 11px;font-size:12px}.link{border:0;background:none;color:#397c77;font-weight:800;font-size:13px}.empty{color:#81949a;font-size:14px;line-height:1.5;padding:19px 0}.badge{display:inline-block;border-radius:99px;padding:5px 9px;background:#e9f4ec;color:#348262;font-size:11px;font-weight:800}.badge.alert{background:#ffe5e1;color:#be4242}.badge.blue{background:#e5f2f4;color:#397880}.alert-banner{background:#fff0ec;border:1px solid #ffd2c6;border-radius:18px;padding:17px 20px;display:flex;align-items:center;gap:14px;margin-bottom:18px}.alert-banner b{display:block;color:#ab383a}.alert-banner p{margin:3px 0 0;color:#965f5f;font-size:13px}.alert-banner .btn{margin-left:auto}
.chat-card{height:min(70vh,710px);min-height:490px;display:flex;flex-direction:column}.chat-feed{flex:1;overflow:auto;display:flex;flex-direction:column;gap:15px;padding:10px 3px 20px}.message{max-width:72%;align-self:flex-start}.message.self{align-self:flex-end}.message-meta{font-size:11px;color:#84969b;margin:0 0 5px 7px}.bubble{background:#eff4f0;border-radius:17px 17px 17px 5px;padding:12px 15px;line-height:1.45;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}.self .bubble{background:#dceebb;border-radius:17px 17px 5px 17px}.chat-form{display:flex;gap:10px;padding-top:16px;border-top:1px solid #edf0ed}.chat-form input{flex:1;border:1px solid #dae5df;border-radius:12px;padding:13px 15px;outline:0}.chat-form input:focus,.field input:focus{border-color:#8eb8a7;box-shadow:0 0 0 3px #e4f0e8}
.map-panel{height:410px;overflow:hidden;border-radius:18px;background:#dce8e3;position:relative}.tiles{position:absolute;inset:0;overflow:hidden}.tiles img{position:absolute;width:256px;height:256px;max-width:none}.map-pin{position:absolute;transform:translate(-50%,-100%);background:#193f4b;color:#fff;padding:8px 10px;border-radius:11px 11px 11px 2px;font-size:12px;font-weight:800;box-shadow:0 4px 12px #1b3e4f55;white-space:nowrap;z-index:2}.map-pin.self{background:#e96e59}.map-attrib{position:absolute;bottom:5px;right:7px;background:#ffffffd9;padding:3px 5px;font-size:10px;color:#456}.map-attrib a{color:#456}.map-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;color:#5a7c7e}.two-col{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}.usage-bar{height:7px;border-radius:99px;background:#edf2eb;margin-top:8px;overflow:hidden}.usage-bar span{display:block;height:100%;border-radius:99px;background:#b8d968}.sos-button{width:190px;height:190px;border:12px solid #ffdbd2;border-radius:50%;background:#e95d56;color:#fff;font:800 24px 'Outfit';box-shadow:0 15px 30px #df777255;display:grid;place-items:center;margin:20px auto}.sos-button small{display:block;font:600 13px 'DM Sans';margin-top:-35px}.sos-button:active{transform:scale(.97)}.sos-panel{text-align:center;padding:30px 15px}.sos-panel h2{font-size:26px}.sos-panel p{color:#789095;max-width:440px;margin:10px auto}.video{width:100%;max-height:420px;background:#17323d;border-radius:16px;margin-top:14px}.invite-code{font:800 26px 'Outfit';letter-spacing:3px;background:#f2f6ec;padding:18px;border-radius:14px;text-align:center;user-select:all}.field{display:grid;gap:7px;margin:15px 0}.field label{font-size:12px;font-weight:800;color:#60777a}.field input{width:100%;border:1px solid #dce6e2;border-radius:12px;padding:12px 14px;outline:0;background:#fff}.auth-page{min-height:100vh;display:grid;grid-template-columns:1fr 1.05fr;background:#f5f7f4}.auth-art{background:#153642;color:#eff8ed;padding:55px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.auth-art::after{content:'';position:absolute;width:540px;height:540px;border:1px solid #73949a66;border-radius:50%;bottom:-200px;left:-100px;box-shadow:0 0 0 90px #ffffff07,0 0 0 180px #ffffff05}.auth-art .brand{padding:0;z-index:1}.auth-copy{z-index:1;max-width:470px}.auth-copy h1{font:700 54px/1.05 'Outfit';letter-spacing:-2px;margin:0 0 20px}.auth-copy p{color:#b5cece;line-height:1.7;font-size:17px}.auth-note{z-index:1;color:#91adb2;font-size:12px}.auth-main{display:grid;place-items:center;padding:40px}.auth-box{width:min(100%,420px)}.auth-box h2{font:700 32px 'Outfit';letter-spacing:-1px;margin:0 0 8px}.auth-box>p{color:#81969b;margin:0 0 25px}.tabs{display:flex;background:#e8eeea;border-radius:13px;padding:4px;margin-bottom:25px}.tabs button{flex:1;border:0;border-radius:10px;background:transparent;padding:9px;color:#668087;font-weight:800}.tabs button.active{background:#fff;color:#193b42;box-shadow:0 2px 6px #193b4215}.auth-box .btn{width:100%;margin-top:10px;padding:14px}.auth-link{display:block;text-align:center;margin:22px auto 0}.server-field{margin-top:27px;border-top:1px solid #e2e9e3;padding-top:15px}.server-field summary{color:#7c9498;font-size:12px;cursor:pointer}.server-field input{font-size:12px}.info{background:#f0f6eb;border-radius:15px;padding:14px 17px;color:#567366;font-size:13px;line-height:1.5}.warning{background:#fff4ed;color:#95644c}.settings-list{display:grid;gap:13px}.setting-row{padding:15px;border:1px solid #e8eee9;border-radius:15px;display:flex;align-items:center;justify-content:space-between;gap:14px}.setting-row b{display:block;font-size:14px}.setting-row small{display:block;color:#8b9d9f;margin-top:4px;line-height:1.4}.mobile-nav{display:none}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(12px);opacity:0;visibility:hidden;pointer-events:none;background:#173c45;color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;box-shadow:0 9px 25px #0002;transition:transform .25s,opacity .25s;z-index:99;width:max-content;max-width:min(90vw,520px);overflow-wrap:anywhere}#toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.main{padding:28px 20px 92px}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e3eae4;z-index:50;justify-content:space-around;padding:8px 6px calc(8px + env(safe-area-inset-bottom))}.mobile-nav button{border:0;background:none;color:#8ba0a2;display:grid;gap:2px;justify-items:center;font-size:10px;font-weight:800;min-width:50px}.mobile-nav button.active{color:#246a65}.mobile-nav .ico{font-size:21px}.grid,.two-col{grid-template-columns:1fr}.auth-page{grid-template-columns:1fr}.auth-art{display:none}.auth-main{padding:36px 22px}.topbar h1{font-size:29px}}
@media(max-width:570px){.main{padding:22px 15px 90px}.topbar{align-items:flex-start}.top-actions{display:none}.hero{min-height:200px}.hero-icon{opacity:.3;right:15px}.metric-row{gap:8px}.metric{padding:14px 12px}.metric strong{font-size:22px}.card{padding:18px}.alert-banner{align-items:flex-start;flex-wrap:wrap}.alert-banner .btn{margin-left:0}.message{max-width:86%}.chat-card{height:calc(100vh - 187px);min-height:390px}.map-panel{height:350px}}
/* Family conversations, photo sharing and interactive map controls. */
select{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.chat-heading{align-items:flex-start}.conversation-choice{font-size:10px;letter-spacing:1px;font-weight:800;color:#60777a;display:grid;gap:6px;min-width:145px}.conversation-choice select{width:100%;max-width:220px;border:1px solid #dce6e2;border-radius:10px;padding:9px;color:#193b42;background:#fff;font-size:13px;letter-spacing:0}.chat-heading p{margin:6px 0 0;line-height:1.4}.chat-form input[name=body]{min-width:0}.photo-button{display:grid;place-items:center;cursor:pointer;flex:none;padding:9px 13px;font-size:22px}.photo-button:hover{background:#edf3ed}.chat-picture{display:block;max-width:100%;max-height:320px;border-radius:10px;object-fit:contain;margin-bottom:6px}.chat-picture:not([src]){display:none}.picture-loading{font-size:12px;color:#637b78}.bubble{white-space:normal}.message-text{white-space:pre-wrap}.photo-draft{display:flex;align-items:center;gap:10px;padding:10px;background:#f1f5ef;border-radius:12px}.photo-draft img{width:62px;height:62px;object-fit:cover;border-radius:9px}.photo-draft span{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px}.chat-error{margin:8px 0 0;color:#b3493f;min-height:16px}.map-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.zoom-buttons{display:flex;align-items:center;gap:8px}.zoom-buttons button{font-size:20px;padding:4px 12px;min-width:40px;min-height:40px}.zoom-buttons span{font-size:12px;color:#789199;min-width:18px;text-align:center}.family-map-marker{position:absolute;transform:translate(-50%,-100%);background:#193f4b;color:#fff;padding:8px 12px;border-radius:12px 12px 12px 2px;box-shadow:0 4px 12px #1b3e4f55;font:700 13px 'DM Sans',sans-serif;white-space:nowrap;border:2px solid white}.family-map-marker.self{background:#c35844}.map-panel.leaflet-container{z-index:1;font-family:'DM Sans',sans-serif}.leaflet-control-attribution{font-size:11px!important}.media-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0}.media-status{line-height:1.5;color:#5b7576}.video{min-height:180px}
@media(max-width:570px){.chat-heading{flex-direction:column;gap:14px}.conversation-choice{width:100%}.conversation-choice select{max-width:none}.chat-form{gap:6px}.chat-form input[name=body]{padding:11px 9px}.chat-form .btn{padding:9px 11px}.photo-button{padding:9px}.chat-card{height:calc(100dvh - 185px);min-height:440px}.card-head h2{font-size:19px}.map-panel{height:370px}}
/* Saved accounts and family video calling. */
.remembered-family{background:#edf4e7;color:#42665d;border-radius:12px;padding:13px;font-size:14px}.account-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:18px}.account-links .link{font-size:12px;padding:0}.chat-call-action{margin:-3px 0 10px}.call-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#e7f1df;border:1px solid #cee1bf;padding:16px 18px;border-radius:18px;margin-bottom:18px}.call-banner p{font-size:12px;margin:4px 0 0;color:#5d7b65}.call-row-actions{display:flex;gap:8px;flex-wrap:wrap}.call-list-row{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #edf0ed;padding:16px 0}.call-list-row:first-of-type{margin-top:14px}.call-list-row p{margin:5px 0 0}.call-people{margin-top:18px}.call-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0}.call-tile{position:relative;aspect-ratio:4/3;background:#193744;border-radius:18px;overflow:hidden;min-width:0}.call-tile video{display:block;width:100%;height:100%;object-fit:cover}.call-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#d8ecbd;font:700 48px Outfit}.call-caption{position:absolute;bottom:0;left:0;right:0;padding:26px 13px 12px;background:linear-gradient(transparent,#0d252ee6);color:#fff;display:flex;justify-content:space-between;align-items:end;gap:10px;font-size:13px}.call-caption span{font-size:11px;color:#d6e5e5}.call-controls{display:flex;gap:9px;flex-wrap:wrap}.call-room .card-head{align-items:flex-start}
@media(max-width:900px){.mobile-nav button{min-width:0;flex:1;font-size:9px;padding:3px 1px}.call-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.call-caption{display:grid;gap:4px;font-size:12px}.call-caption span{font-size:10px}}
@media(max-width:570px){.call-banner,.call-list-row{align-items:flex-start;flex-direction:column}.call-controls .btn{flex:1;padding:11px 10px}.call-tile{aspect-ratio:3/4}.call-room{padding:15px}.call-room .badge{font-size:9px}.call-grid{gap:9px}.call-placeholder{font-size:35px}.chat-card{min-height:480px}}

.install-page{max-width:560px;margin:70px auto;padding:32px}.fingerprint{display:block;white-space:normal;word-break:break-word;line-height:1.9;background:#f1f5f3;padding:12px;margin-top:12px}.device-row{display:flex;flex-direction:column;gap:10px;border-top:1px solid #e5eae6;padding:18px 0}.verify-device input{width:100%;margin:8px 0;padding:10px}.security-card details{margin:16px 0}.picture-download{display:block;margin-top:8px}.private-map-grid{background-color:#e8eee9;background-image:linear-gradient(#b9c9bf55 1px,transparent 1px),linear-gradient(90deg,#b9c9bf55 1px,transparent 1px);background-size:40px 40px}

.picture-open{display:block;padding:0;border:0;background:transparent;cursor:zoom-in;max-width:100%;border-radius:12px}.picture-open:focus-visible{outline:3px solid #26756e;outline-offset:3px}.photo-viewer{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:18px;border:0;background:#122d35;color:#fff}.photo-viewer[open]{display:flex;flex-direction:column;gap:14px}.photo-viewer::backdrop{background:#122d35}.photo-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}.photo-viewer-bar h2{font-size:17px;margin:0;overflow-wrap:anywhere;min-width:0}.photo-viewer-bar>div{display:flex;gap:8px;flex-shrink:0}.photo-viewer .btn.ghost{color:#fff;border-color:#829599}.photo-viewer-status{font-size:12px;line-height:1.5;color:#c2d2d5;margin:0}.photo-viewer-image{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center}.photo-viewer-image img{max-width:100%;max-height:100%;object-fit:contain}.sos-row{gap:10px}.sos-row .row-main{min-width:0;overflow-wrap:anywhere}@media(max-width:570px){.photo-viewer{padding:14px}.photo-viewer-bar{align-items:flex-start}.photo-viewer-bar>div{flex-direction:column}.sos-row .btn{flex-shrink:0}}
/* History gestures preserve vertical scrolling; buttons remain available for accessibility. */
.recording-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;min-width:0}.recording-actions .btn{white-space:normal}#live-sos-panel{scroll-margin-top:12px}
.history-row { touch-action:pan-y; transition:transform .16s ease; }
.history-row.swiping { transition:none; background:#ffe8e3; }
.pairing-dialog,.recording-dialog { border:0; border-radius:20px; padding:24px; max-width:560px; width:calc(100% - 32px); }
.pairing-dialog::backdrop,.recording-dialog::backdrop { background:#13261dc9; }
.pairing-dialog img { display:block; width:min(100%,360px); height:auto; margin:16px auto; }
.pairing-actions { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.pairing-token { display:block; box-sizing:border-box; width:100%; max-width:100%; margin:10px 0; padding:12px; border:1px solid #cbd6cf; border-radius:12px; font:inherit; overflow-wrap:anywhere; word-break:break-all; resize:vertical; }
.recording-dialog video { display:block; width:100%; max-height:65vh; background:#111; }
.recording-indicator { padding:10px; color:#922b1d; background:#ffe5e0; border-radius:10px; font-weight:600; }

/* Flexible tracks and wrapping keep long names, addresses and histories on screen. */
html,body,#app { width:100%; min-width:0; }
html,body { overflow-x:hidden; }
.app-shell { grid-template-columns:260px minmax(0,1fr); }
.main,.card,.stack,.grid,.two-col,.topbar>div,.card-head>div { min-width:0; }
.grid { grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.two-col { grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); }
.metric-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card { overflow:hidden; }
.eyebrow,.card h2,.row-main,.row-end,.setting-row,.info,.empty,.media-status,.chat-error { overflow-wrap:anywhere; }
.setting-row>div { flex:1; min-width:0; }
.setting-row>strong { min-width:0; overflow-wrap:anywhere; text-align:right; }
.setting-row>.btn,.card-head>.btn { flex-shrink:0; }
.call-list-row>div { min-width:0; overflow-wrap:anywhere; }
.call-caption b,.call-caption span { min-width:0; overflow-wrap:anywhere; }
.chat-form,.chat-feed,.chat-heading>div { min-width:0; }
.chat-feed { min-height:0; overflow-x:hidden; overscroll-behavior:contain; }
.message { min-width:0; }
.photo-viewer-bar>div { flex-wrap:wrap; }
.pairing-dialog,.recording-dialog { max-height:calc(100dvh - 32px); overflow:auto; overflow-wrap:anywhere; }

/* Messages opens to conversations, with a separate family contact picker. */
.chat-inbox,.chat-contact-picker { position:relative; display:flex; flex-direction:column; min-height:490px; height:min(70vh,710px); padding:0; }
.chat-inbox>.card-head,.chat-contact-picker>.card-head { flex:none; padding:22px 23px 12px; margin-bottom:0; }
.chat-inbox>.small,.chat-contact-picker>.small { margin:0; padding:0 23px 14px; }
.chat-search { flex:none; display:block; width:calc(100% - 46px); min-width:0; min-height:44px; margin:0 23px 8px; padding:10px 14px; border:1px solid #dce6df; border-radius:14px; outline:0; background:#f4f7f2; color:#172f38; font-size:16px; }
.chat-search::placeholder { color:#758b8d; }
.chat-search:focus { border-color:#8eb8a7; box-shadow:0 0 0 3px #e4f0e8; }
.chat-contact-picker>.card-head>div { flex:1; }
.chat-contact-picker>button { align-self:flex-start; flex:none; margin:4px 23px 8px; max-width:calc(100% - 46px); white-space:normal; }
.conversation-list { flex:1; min-height:0; overflow:auto; overflow-x:hidden; overscroll-behavior:contain; padding:4px 9px 10px; }
.conversation-row { display:flex; align-items:center; gap:14px; width:100%; min-width:0; min-height:85px; padding:14px; border:0; border-radius:16px; background:transparent; color:#172f38; text-align:left; }
.conversation-row:hover,.conversation-row:focus-visible { background:#f0f5ec; }
.conversation-row:focus-visible,.chat-contact-option:focus-within { outline:2px solid #377c70; outline-offset:-2px; }
.conversation-avatar { width:50px; height:50px; border-radius:50%; flex:none; display:grid; place-items:center; background:#d7e8d2; color:#315f48; font:700 22px 'Outfit',sans-serif; }
.conversation-row:nth-child(3n+2) .conversation-avatar { background:#d8eaf0; color:#275966; }
.conversation-row:nth-child(3n) .conversation-avatar { background:#f4e4cd; color:#80592b; }
.conversation-copy { flex:1; min-width:0; display:grid; gap:5px; }
.conversation-copy b,.conversation-copy strong { font-size:16px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-copy p,.conversation-copy small,.conversation-copy>span,.conversation-copy .muted { display:block; margin:0; font-size:13px; color:#758b8d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-time { flex:none; align-self:flex-start; margin-top:4px; max-width:75px; color:#758b8d; font-size:11px; line-height:1.4; text-align:right; }
.chat-start { position:absolute; right:21px; bottom:19px; z-index:3; min-height:52px; padding:13px 21px; border-radius:18px; box-shadow:0 5px 18px #18372c20; }
.chat-inbox-heading .chat-start { position:static; flex:none; min-height:43px; padding:11px 15px; border-radius:14px; }
.conversation-meta { flex:none; display:grid; justify-items:end; align-self:flex-start; gap:9px; padding-top:3px; max-width:75px; }
.conversation-meta time { font-size:11px; line-height:1.4; color:#758b8d; text-align:right; }
.conversation-unread { display:grid; place-items:center; min-width:21px; height:21px; padding:0 5px; border-radius:50%; color:#fff; background:#286d60; font-size:11px; font-weight:800; }
.group-avatar { font-size:23px; }
.chat-inbox>.chat-inbox-note { flex:none; padding:13px 23px; margin:0; border-top:1px solid #edf0ed; color:#758b8d; font-size:12px; line-height:1.5; }
.chat-inbox>.chat-error:empty,.chat-contact-picker>.chat-error:empty { display:none; }
.chat-inbox .empty,.chat-contact-picker .empty { padding:20px 23px; }
.contact-options { flex:1; min-height:0; overflow:auto; overflow-x:hidden; padding:6px 15px 18px; overscroll-behavior:contain; }
.chat-contact-option { display:flex; align-items:center; gap:13px; padding:13px 10px; border-radius:14px; cursor:pointer; min-width:0; }
.chat-contact-option:hover { background:#f0f5ec; }
.chat-contact-option input[type=checkbox] { width:20px; height:20px; margin:0; flex:none; accent-color:#216b5b; }
.chat-contact-option>span:not(.conversation-avatar),.chat-contact-option>div { flex:1; min-width:0; overflow-wrap:anywhere; }
.chat-contact-option b,.chat-contact-option small { display:block; }
.chat-contact-option small { font-size:12px; color:#758b8d; margin-top:4px; }
.chat-contact-picker>.call-row-actions,.chat-contact-picker>.chat-picker-actions { flex:none; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:15px 23px; border-top:1px solid #edf0ed; }
.chat-picker-actions>p { margin:0; min-width:0; overflow-wrap:anywhere; }
.chat-back { flex:none; width:42px; height:42px; border:0; border-radius:50%; background:#edf3ed; color:#2c5b54; font-size:22px; display:grid; place-items:center; }
.chat-back.btn { padding:0; font-size:22px; }
.chat-back:hover { background:#dfeadf; }
.chat-panel .chat-heading { justify-content:flex-start; align-items:center; gap:12px; }
.chat-panel .chat-heading>.chat-title { flex:1; }
.chat-panel .chat-heading>.chat-call-action { flex:none; margin:0; }
.chat-panel .chat-heading h2 { overflow-wrap:anywhere; }
.chat-panel .chat-heading p { font-size:12px; }

@media(max-width:900px) {
  /* Only the content scrolls; navigation stays in the visible app viewport. */
  .app-shell { position:fixed; inset:0; display:flex; flex-direction:column; height:100vh; height:100dvh; min-height:0; width:100%; overflow:hidden; }
  .main { flex:1; min-height:0; width:100%; max-width:100%; margin:0; padding:26px 20px 20px; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; }
  .mobile-nav { position:relative; inset:auto; flex:none; width:100%; display:flex; align-items:stretch; padding:7px max(4px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left)); }
  .mobile-nav button { flex:1 1 0; min-width:0; max-width:100%; min-height:48px; padding:3px 0; align-content:center; gap:4px; font-size:9px; line-height:1.1; overflow-wrap:anywhere; }
  .mobile-nav .ico { line-height:1; font-size:22px; }
  .grid,.two-col { grid-template-columns:minmax(0,1fr); }
  .main[data-screen=chat] { display:flex; flex-direction:column; overflow:hidden; }
  .main[data-screen=chat]>.topbar,.main[data-screen=chat]>#call-notice { flex:none; }
  .main[data-screen=chat]>.chat-inbox,.main[data-screen=chat]>.chat-contact-picker,.main[data-screen=chat]>.chat-panel { flex:1; height:auto; min-height:0; }
  .chat-panel .chat-heading { flex-direction:row; }
  .chat-panel .chat-feed { flex:1; min-height:0; }
  .chat-panel .chat-form,.chat-panel .chat-call-action,.chat-panel .photo-draft,.chat-panel .chat-error { flex:none; }
  #toast { bottom:calc(77px + env(safe-area-inset-bottom)); }
}
@media(max-width:570px) {
  .main { padding:19px 13px 14px; }
  .topbar { margin-bottom:19px; }
  .eyebrow { font-size:10px; letter-spacing:1.2px; }
  .topbar h1 { font-size:27px; }
  .chat-panel { padding:15px; }
  .chat-panel .card-head { margin-bottom:13px; }
  .chat-panel .chat-heading h2 { font-size:18px; }
  .chat-panel .chat-heading p { margin:3px 0 0; }
  .chat-panel .chat-call-action { margin:0 0 8px; }
  .chat-panel .chat-form { padding-top:11px; }
  .chat-panel .chat-form input[name=body] { font-size:16px; }
  .chat-panel .chat-error { font-size:12px; margin-bottom:0; min-height:0; }
  .chat-inbox>.card-head,.chat-contact-picker>.card-head { padding:18px 17px 10px; }
  .chat-inbox>.small,.chat-contact-picker>.small { padding:0 17px 12px; }
  .chat-search { width:calc(100% - 34px); margin-left:17px; margin-right:17px; }
  .chat-contact-picker>button { margin-left:17px; margin-right:17px; max-width:calc(100% - 34px); }
  .conversation-list { padding:0 4px 8px; }
  .conversation-row { gap:11px; padding:13px 11px; min-height:81px; }
  .conversation-avatar { width:45px; height:45px; font-size:20px; }
  .conversation-copy b,.conversation-copy strong { font-size:15px; }
  .conversation-time { max-width:60px; font-size:10px; }
  .conversation-meta { max-width:60px; }
  .conversation-meta time { font-size:10px; }
  .chat-inbox>.chat-inbox-note { padding:11px 17px; font-size:11px; }
  .chat-start { right:16px; bottom:15px; min-height:50px; padding:12px 18px; }
  .contact-options { padding:4px 8px 14px; }
  .chat-contact-picker>.call-row-actions,.chat-contact-picker>.chat-picker-actions { padding:12px 17px; }
  .map-tools { flex-wrap:wrap; }
  .card-head { flex-wrap:wrap; }
  .chat-panel .card-head { flex-wrap:nowrap; }
  .setting-row { gap:10px; padding:13px; }
  .setting-row>.btn { max-width:45%; white-space:normal; }
  .pairing-dialog,.recording-dialog { padding:18px; }
  .install-page { width:calc(100% - 26px); padding:23px; margin:28px auto; }
}
@media(max-width:360px) {
  .chat-panel .chat-heading { flex-wrap:wrap; }
  .chat-panel .chat-heading>.chat-title { min-width:calc(100% - 54px); }
  .chat-panel .chat-heading>.chat-call-action { margin-left:54px; }
}
@media(max-width:900px) and (max-height:540px) {
  .main { padding-top:10px; padding-bottom:10px; }
  .main[data-screen=chat] { overflow-y:auto; }
  .main[data-screen=chat]>.topbar { margin-bottom:10px; }
  .main[data-screen=chat] .eyebrow { display:none; }
  .main[data-screen=chat] .topbar h1 { font-size:21px; }
  .main[data-screen=chat]>.chat-panel { min-height:260px; }
}
/* Multiline composer: photo picker is a plain plus inside the message field. */
.chat-form { align-items:flex-end; }
.chat-compose-field { display:flex; align-items:flex-end; gap:8px; flex:1; min-width:0; border:1px solid #dce3df; border-radius:17px; padding:0 10px; background:#fff; }
.chat-compose-field:focus-within { border-color:#41796d; }
.chat-compose-field textarea { display:block; width:100%; min-width:0; height:44px; min-height:44px; max-height:260px; resize:none; border:0; outline:0; background:transparent; color:#17343e; font:16px/24px 'Outfit',sans-serif; padding:10px 0; margin:0; overflow-y:hidden; white-space:pre-wrap; }
.chat-add-photo { display:grid; place-items:center; flex:none; width:30px; height:44px; margin:0; border:0; border-radius:0; background:transparent; color:#315f56; cursor:pointer; font:400 29px/1 sans-serif; }
.chat-add-photo:focus-within { outline:2px solid #377c70; outline-offset:-2px; }
.chat-add-photo:hover { color:#183d36; }
.chat-form>.btn { flex:none; min-height:44px; }
.conversation-item { display:flex; align-items:center; min-width:0; width:100%; }
.conversation-item .conversation-row { flex:1; width:auto; }
.conversation-delete { flex:none; font-size:11px; padding:9px 7px; color:#60777a; }
.chat-panel .chat-heading { display:grid; grid-template-columns:42px minmax(0,1fr); }
.chat-panel .chat-heading .chat-back { grid-column:1; grid-row:1; }
.chat-panel .chat-title { grid-column:2; grid-row:1; }
.chat-panel .chat-heading>.chat-call-action { display:flex; flex-wrap:wrap; gap:8px; grid-column:2; margin:0; }
.chat-panel .chat-heading h2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media(max-width:570px) {
 .chat-compose-field { gap:5px; padding:0 8px; }
 .chat-form>.btn { padding:10px 12px; }
 .chat-panel .chat-heading>.chat-call-action { margin:0; }
 .conversation-item .conversation-row { padding-left:7px; padding-right:4px; gap:8px; }
 .conversation-item .conversation-meta { max-width:48px; }
}
@media(max-width:900px) and (max-height:600px) {
 .main[data-screen=chat] { overflow-y:auto; }
 .chat-panel .chat-form { scroll-margin-bottom:16px; }
 .main[data-screen=chat]>.chat-panel { flex:none; height:auto; min-height:260px; }
 .chat-panel .chat-feed { flex:none; height:120px; }
}

.delete-confirmation { width:calc(100% - 40px); max-width:390px; border:1px solid #ecddce; border-radius:26px; padding:27px; color:#523d32; background:#fff9f0; box-shadow:0 22px 80px #49362633; }
.delete-confirmation::backdrop { background:#392c2366; backdrop-filter:blur(3px); }
.delete-confirmation p { margin:0 0 26px; font-size:18px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.confirmation-actions { display:flex; justify-content:flex-end; gap:10px; }
.confirmation-delete,.selection-delete { background:#b7604d; color:white; border-color:#b7604d; }
.confirmation-actions .ghost { background:#f4e8dc; color:#795b47; }
.deletion-toolbar { display:flex; flex:none; position:sticky; top:0; z-index:5; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; margin:12px 0; border-radius:16px; background:#f6eadd; color:#634c3d; box-shadow:0 4px 14px #563e2410; }
.deletion-toolbar[hidden] { display:none!important; }
.deletion-toolbar>div { display:flex; gap:7px; }
[data-select-type] { position:relative; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.item-selection-mark { display:none; }
.selection-mode { user-select:none; -webkit-user-select:none; outline:1px solid #dbc5ad; border-radius:18px; }
.selection-mode .item-selection-mark { display:grid; position:absolute; top:10px; right:10px; z-index:2; width:24px; height:24px; border:2px solid #ba977a; border-radius:50%; background:#fffaf3; color:white; place-items:center; pointer-events:none; font-size:15px; font-weight:800; }
.item-selected { background:#f6e4d2!important; outline:2px solid #bc9473; }
.item-selected .item-selection-mark { background:#a67553; border-color:#a67553; }
.selection-mode.conversation-item { padding-right:30px; }
.selectable-recording.selection-mode { padding-right:40px; }
.history-row.selection-mode { padding-right:42px; }
.chat-title.selection-mode { padding:8px 36px 8px 9px; }
.message.selection-mode { padding:8px 38px 8px 8px; }
.conversation-list { padding:12px 16px 20px; }
.conversation-item { margin:0 0 12px; background:#fffaf3; border:1px solid #ebdfd0; border-radius:21px; box-shadow:0 4px 14px #70553709; overflow:hidden; }
.conversation-item:nth-child(3n+2) { background:#f6f7ed; border-color:#e3e6d5; }
.conversation-item:nth-child(3n) { background:#faf0e8; border-color:#eddfd3; }
.conversation-item .conversation-row { background:transparent; padding:17px 14px; border:0; }
.conversation-item .conversation-row:hover { background:#f1e5d54d; }
.photo-viewer .deletion-toolbar { flex:none; margin:0 16px 10px; }
.photo-viewer-image.selection-mode { outline-offset:-4px; }
.app-updates { background:#fffaf2; border-color:#ecdfcf; }
.app-updates .card-head { margin-bottom:10px; }
.app-updates .update-available { background:#e9edce; color:#4e643e; }
.app-update-actions { display:flex; flex-wrap:wrap; gap:10px; margin:17px 0 13px; }
.app-update-actions [hidden],.app-updates [hidden] { display:none!important; }
.app-update-notes { padding-left:21px; color:#65736b; font-size:13px; line-height:1.65; }
.app-update-progress { display:flex; align-items:center; gap:12px; margin:16px 0; font-size:12px; color:#687267; }
.app-update-progress progress { flex:1; min-width:0; height:11px; accent-color:#8b9c65; }
.app-update-help { margin-bottom:0; line-height:1.6; }