/* ═══ SAL V2 · the phone app (2026-09-29) ═══ Loaded ONLY when the V2 bar is on (public/chat/partials/sal-v2.php). Every rule is scoped to the V2 panels (.s2 / #ln-chat-box .s2-*) so the old widget cannot change by a pixel. Looks picked by the founder from real apps: Today = Headspace + weather apps + colour rings; How to = Headspace library in our look; Orders = the Shop app's tracking in our look. */ /* ONE lettering on both doors (F37, 2026-09-29): Inter for the text, Plus Jakarta Sans for the headings (the rules below name it). chat.css sets Montserrat on every element of the box; in V2 each element inherits instead, so a heading's words stay in the heading's face. The faces load from sal-v2.php's font link. */ #ln-chat-box.ln-v2 { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } #ln-chat-box.ln-v2 *, #ln-chat-box.ln-v2 *::before, #ln-chat-box.ln-v2 *::after { font-family: inherit; } #ln-chat-box.ln-v2 .ln-tracking-number { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } #ln-chat-box { --s2-bg: #f6f4ef; --s2-card: #ffffff; --s2-ink: #171c1d; --s2-muted: #5b6570; --s2-soft: #8a929b; --s2-line: #ebe7df; --s2-chip: #eeeae2; --s2-green: #2e7d32; --s2-green-b: #3f9a4a; --s2-orange: #e8801a; --s2-blue: #2f6fe4; --s2-purple: #7c55d9; --s2-yellow: #f2b01e; --s2-red: #c62f3f; } #ln-chat-box .ln-panel.s2 { padding: 0; overflow-y: auto; overflow-x: hidden; background: var(--s2-bg); font: 15px/1.45 Inter, system-ui, sans-serif; color: var(--s2-ink); -webkit-font-smoothing: antialiased; } #ln-chat-box .s2 * { box-sizing: border-box; } /* the reset carries no class weight (:where), so every .s2-* rule below wins over it */ #ln-chat-box :where(.s2) :where(button) { font: inherit; color: inherit; } #ln-chat-box .s2 [hidden], #ln-chat-box .s2-sheet [hidden] { display: none !important; } #ln-chat-box .s2-body { padding: 12px 14px 26px; flex: none; } #ln-chat-box .s2 svg { flex: none; } /* the site layout caps every svg at 64px (templates/layouts/main.php, a first-paint guard); the app's drawings are sized here */ #ln-chat-box .s2 svg, #ln-chat-box .s2-sheet svg, #ln-chat-box .s2-player svg { max-width: none; max-height: none; } /* section titles, cards, buttons */ #ln-chat-box .s2-title { margin: 8px 2px 2px; font: 800 26px/1.1 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.6px; } #ln-chat-box .s2-sub { margin: 0 2px; font-size: 13.5px; color: var(--s2-muted); } #ln-chat-box .s2-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 22px 2px 10px; } #ln-chat-box .s2-sec b { font: 800 18px/1.2 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.3px; } #ln-chat-box .s2-sec span { font-size: 12.5px; color: var(--s2-muted); } #ln-chat-box .s2-card { background: var(--s2-card); border-radius: 22px; padding: 16px; box-shadow: 0 1px 2px rgba(23,28,29,.05), 0 10px 26px -16px rgba(23,28,29,.22); } #ln-chat-box .s2-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 14px; background: var(--s2-green); color: #fff; font-weight: 700; font-size: 14.5px; min-height: 46px; padding: 0 16px; cursor: pointer; text-decoration: none; } #ln-chat-box .s2-btn:hover { background: #1b5e20; } #ln-chat-box .s2-btn:disabled { opacity: .4; cursor: default; } #ln-chat-box .s2-btn svg { width: 18px; height: 18px; } #ln-chat-box .s2-btn.ghost { background: #fff; color: var(--s2-ink); box-shadow: inset 0 0 0 1.5px #cfc9bd; } #ln-chat-box .s2-btn.wide { width: 100%; } #ln-chat-box .s2-ans { display: flex; gap: 10px; margin-top: 12px; } #ln-chat-box .s2-ans .s2-btn { flex: 1; } #ln-chat-box .s2-link { border: 0; background: transparent; color: var(--s2-green); font-weight: 700; font-size: 13.5px; min-height: 40px; padding: 0 2px; cursor: pointer; } #ln-chat-box .s2-links { padding: 4px 16px; } #ln-chat-box .s2-links .s2-row { min-height: 60px; } #ln-chat-box .s2-links .s2-row > svg { width: 24px; height: 24px; } #ln-chat-box .s2-links .s2-row .chev { width: 18px; height: 18px; margin-left: auto; } #ln-chat-box .s2-foot, #ln-chat-box .s2-lib, #ln-chat-box .s2-label { margin: 16px 2px 2px; font-size: 12.5px; color: var(--s2-muted); text-align: center; } #ln-chat-box .s2-lib { text-align: left; margin-top: 8px; } #ln-chat-box .s2-empty { font-size: 14px; color: var(--s2-muted); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } /* ── the living sky (drawn by sal-v2.js from the live reading) ── */ #ln-chat-box .s2-sky { position: relative; border-radius: 24px; overflow: hidden; color: #fff; padding: 16px 18px 0; min-height: 150px; cursor: pointer; background: linear-gradient(180deg, #34495e 0%, #46607a 100%); transition: background .6s; } #ln-chat-box .s2-sky.w-clear-day, #ln-chat-box .s2-scard.w-clear-day { background: linear-gradient(180deg, #2a64a8 0%, #2c67aa 65%, #2f6cae 100%); } #ln-chat-box .s2-sky.w-clear-night, #ln-chat-box .s2-scard.w-clear-night { background: linear-gradient(180deg, #0f2442 0%, #1a426c 65%, #245680 100%); } #ln-chat-box .s2-sky.w-cloudy, #ln-chat-box .s2-scard.w-cloudy { background: linear-gradient(180deg, #45596f 0%, #4d6178 65%, #54687f 100%); } #ln-chat-box .s2-sky.w-rain, #ln-chat-box .s2-scard.w-rain { background: linear-gradient(180deg, #2f3e51 0%, #405268 65%, #52667c 100%); } #ln-chat-box .s2-sky.w-storm, #ln-chat-box .s2-scard.w-storm { background: linear-gradient(180deg, #191e2b 0%, #283248 65%, #36425a 100%); } #ln-chat-box .s2-sky.w-snow, #ln-chat-box .s2-scard.w-snow { background: linear-gradient(180deg, #4e6179 0%, #52667e 65%, #566a82 100%); } #ln-chat-box .s2-sky.w-fog, #ln-chat-box .s2-scard.w-fog { background: linear-gradient(180deg, #4a5663 0%, #525e6b 65%, #58636f 100%); } #ln-chat-box .s2-sky > :not(.wx):not(.s2-lawn) { position: relative; } #ln-chat-box .s2-sky-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: #dbe6f1; } #ln-chat-box .s2-sky-top svg { width: 14px; height: 14px; flex: none; } #ln-chat-box .s2-loc { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ln-chat-box .s2-hello { margin-top: 12px; font-size: 13.5px; color: #dbe6f1; } #ln-chat-box .s2-sentence { font: 700 29px/1.13 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.6px; margin-top: 4px; max-width: 280px; } #ln-chat-box .s2-sky.compact .s2-sentence { font-size: 26px; margin-top: 12px; } #ln-chat-box .s2-sky.night::before, #ln-chat-box .s2-scard.night::before { content: ""; position: absolute; inset: 0; background: rgba(6,14,30,.38); pointer-events: none; } #ln-chat-box .s2-vchip { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 7px 12px 7px 9px; border-radius: 999px; font: 700 13.5px/1 Inter, sans-serif; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); } #ln-chat-box .s2-vchip i { width: 8px; height: 8px; border-radius: 50%; } #ln-chat-box .s2-chiprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; } #ln-chat-box .s2-sky .s2-chiprow .s2-vchip { margin-top: 0 !important; } #ln-chat-box .s2-scorelink { display: inline-flex; align-items: center; gap: 2px; padding: 7px 8px 7px 11px; border-radius: 999px; font: 700 12.5px/1 Inter, sans-serif; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.26); } #ln-chat-box .s2-scorelink svg { width: 14px; height: 14px; } #ln-chat-box .s2-sky.compact .s2-chiprow { margin-top: 10px; } #ln-chat-box .s2-why { margin: 9px 0 0; font-size: 13.5px; line-height: 1.45; color: #dbe6f1; max-width: 290px; } #ln-chat-box .s2-why a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(255,255,255,.55); white-space: nowrap; cursor: pointer; } #ln-chat-box .s2-conds { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px -18px 0; padding: 11px 18px 28px; border-top: 1px solid rgba(255,255,255,.14); } #ln-chat-box .s2-conds > div { display: flex; align-items: center; gap: 8px; } #ln-chat-box .s2-conds svg { width: 20px; height: 20px; } #ln-chat-box .s2-conds b { display: block; font: 700 15px/1.1 'Plus Jakarta Sans', Inter, sans-serif; } #ln-chat-box .s2-conds span { display: block; font-size: 11.5px; color: #cfdcea; } #ln-chat-box .s2-lawn { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 22px; display: block; } #ln-chat-box .s2-sky.windy .s2-lawn, #ln-chat-box .s2-scard.windy .s2-lawn { transform-origin: 50% 100%; animation: s2sway 1.8s ease-in-out infinite; } #ln-chat-box .s2-sky .wx, #ln-chat-box .s2-scard .wx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } #ln-chat-box .s2-sky .wx i, #ln-chat-box .s2-sky .wx svg, #ln-chat-box .s2-scard .wx i, #ln-chat-box .s2-scard .wx svg { position: absolute; display: block; } #ln-chat-box .wx .star { width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: s2twinkle 3s ease-in-out infinite; } #ln-chat-box .wx .sun { right: 16px; top: 50px; width: 50px; height: 50px; } #ln-chat-box .wx .sun .rays { transform-origin: 25px 25px; animation: s2spin 24s linear infinite; } #ln-chat-box .wx .moon { right: 18px; top: 104px; width: 46px; height: 46px; } #ln-chat-box .s2-sky.compact .wx .moon { top: 50px; } #ln-chat-box .wx .cloud { animation: s2drift linear infinite; } #ln-chat-box .wx .drop { top: -24px; width: 2px; border-radius: 2px; background: rgba(206,228,255,.75); animation: s2fall linear infinite; } #ln-chat-box .wx .splash { bottom: 14px; width: 10px; height: 3px; border-radius: 50%; border: 1px solid rgba(206,228,255,.7); opacity: 0; animation: s2splash 1.1s ease-out infinite; } #ln-chat-box .wx .flake { top: -10px; border-radius: 50%; background: #fff; opacity: .9; animation: s2snow linear infinite; } #ln-chat-box .wx .streak { height: 2px; border-radius: 2px; background: rgba(255,255,255,.33); opacity: 0; animation: s2gust ease-in-out infinite; } #ln-chat-box .wx .leaf { width: 9px; height: 5px; border-radius: 60% 0; background: #7dcf6a; opacity: 0; animation: s2leaf linear infinite; } #ln-chat-box .wx .mist { left: -30%; width: 160%; height: 26px; border-radius: 50%; background: rgba(255,255,255,.16); animation: s2mist ease-in-out infinite alternate; } #ln-chat-box .s2-sky.w-storm .wx::after, #ln-chat-box .s2-scard.w-storm .wx::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; animation: s2flash 7s infinite; } @keyframes s2twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } @keyframes s2spin { to { transform: rotate(360deg); } } @keyframes s2drift { from { transform: translateX(-160px); } to { transform: translateX(460px); } } @keyframes s2fall { to { transform: translate3d(var(--dx, 0px), 330px, 0); } } @keyframes s2splash { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: .9; } 100% { opacity: 0; transform: scale(1.6); } } @keyframes s2snow { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(8px, 80px, 0); } 50% { transform: translate3d(-6px, 160px, 0); } 75% { transform: translate3d(7px, 240px, 0); } 100% { transform: translate3d(-4px, 320px, 0); } } @keyframes s2gust { 0% { opacity: 0; transform: translateX(-140px); } 15% { opacity: .9; } 70% { opacity: .6; } 100% { opacity: 0; transform: translateX(460px); } } @keyframes s2leaf { 0% { opacity: 0; transform: translate(-40px, 0) rotate(0); } 10% { opacity: 1; } 50% { transform: translate(200px, -5px) rotate(300deg); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(430px, 2px) rotate(620deg); } } @keyframes s2mist { from { transform: translateX(-40px); } to { transform: translateX(40px); } } @keyframes s2flash { 0%, 90%, 94%, 100% { opacity: 0; } 91% { opacity: .2; } 93% { opacity: .12; } } @keyframes s2sway { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-4deg); } } /* score-weather (2026-09-29): the drawing never takes a tap, the retry clears the lawn, a long place ends in "…", and the words read on every sky (a soft shadow; the small text a touch lighter; a fainter chip on sunny and cloudy) */ #ln-chat-box .s2-sky .s2-lawn, #ln-chat-box .s2-scard .s2-lawn { pointer-events: none; } #ln-chat-box .s2-sky.s2-nosky, #ln-chat-box .s2-sky.compact.s2-nosky { padding-bottom: 30px; } #ln-chat-box .s2-sky .s2-why a.off { opacity: .55; cursor: default; } #ln-chat-box .s2-loc .s2-loc-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ln-chat-box .s2-sky-top > span:last-child { white-space: nowrap; flex: none; } #ln-chat-box .s2-sky .s2-sky-top, #ln-chat-box .s2-sky .s2-hello, #ln-chat-box .s2-sky .s2-sentence, #ln-chat-box .s2-sky .s2-why, #ln-chat-box .s2-sky .s2-conds, #ln-chat-box .s2-sky .s2-vchip, #ln-chat-box #s2-scard .lbl, #ln-chat-box #s2-scard .sub, #ln-chat-box #s2-scard .legend { text-shadow: 0 1px 2px rgba(6,14,30,.35); } #ln-chat-box .s2-sky .s2-sky-top, #ln-chat-box .s2-sky .s2-hello, #ln-chat-box .s2-sky .s2-why, #ln-chat-box .s2-sky .s2-conds span, #ln-chat-box #s2-scard .sub, #ln-chat-box #s2-scard .legend { color: #e6edf5; } #ln-chat-box .s2-sky.w-clear-day .s2-vchip, #ln-chat-box .s2-sky.w-cloudy .s2-vchip, #ln-chat-box .s2-sky.w-snow .s2-vchip, #ln-chat-box .s2-sky.w-fog .s2-vchip { background: rgba(255,255,255,.1); } #ln-chat-box.ln-v2 .ln-collapsed-status-dot.s2-none { background: #9aa3ab; box-shadow: none; } /* ONE vocabulary (F33, founder default 2026-09-29): the dial and its legend say what the sky chip says. The dial's words take two lines at most (sal-v2.js shrinks them further only for a larger text setting, F81) */ #ln-chat-box .s2-dial .zone { font-size: 21px; line-height: 1.12; letter-spacing: -.3px; text-wrap: balance; } #ln-chat-box .s2-scard .legend { flex-wrap: wrap; column-gap: 14px; row-gap: 6px; line-height: 1.25; } /* ── next up: a compact path ── */ #ln-chat-box .s2-path { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; } #ln-chat-box .s2-path::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: 26px; border-left: 2px dashed #cfc9bd; } #ln-chat-box .s2-path li { position: relative; } #ln-chat-box .s2-path li[data-s2go] { cursor: pointer; } #ln-chat-box .s2-path .dot { position: absolute; left: -28px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--s2-bg); border: 2px solid #cfc9bd; display: flex; align-items: center; justify-content: center; } #ln-chat-box .s2-path .fact .dot { background: var(--s2-green); border-color: var(--s2-green); } #ln-chat-box .s2-path .fact .dot::after { content: ""; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); } #ln-chat-box .s2-path .note .dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9aa3ab; } #ln-chat-box .s2-path .now .dot { border-color: var(--s2-ink); background: #fff; } #ln-chat-box .s2-path .now .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s2-ink); } #ln-chat-box .s2-path .prow { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 4px 2px; } #ln-chat-box .s2-path .prow svg { width: 24px; height: 24px; } #ln-chat-box .s2-path .prow b { font-weight: 600; font-size: 14.5px; } #ln-chat-box .s2-path .prow span { margin-left: auto; font-size: 13px; color: var(--s2-muted); white-space: nowrap; } #ln-chat-box .s2-pcard { background: var(--s2-card); border-radius: 20px; padding: 16px; margin: 6px 0 10px; box-shadow: 0 1px 2px rgba(23,28,29,.05), 0 10px 26px -16px rgba(23,28,29,.22); } #ln-chat-box .s2-pcard .eyebrow { font-size: 12px; font-weight: 700; color: var(--s2-green); letter-spacing: .02em; } #ln-chat-box .s2-pcard b { display: block; font: 800 20px/1.25 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.3px; margin-top: 2px; } #ln-chat-box .s2-pcard p { margin: 4px 0 0; font-size: 14px; color: var(--s2-muted); line-height: 1.4; } /* ── rings ── */ #ln-chat-box .s2-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; } #ln-chat-box .s2-ring { display: flex; flex-direction: column; align-items: center; cursor: pointer; } #ln-chat-box .s2-ring .rw { position: relative; width: 84px; height: 84px; } #ln-chat-box .s2-ring svg { width: 84px; height: 84px; transform: rotate(-90deg); } #ln-chat-box .s2-ring circle { fill: none; stroke-width: 9; } #ln-chat-box .s2-ring .bgc { stroke: #efebe3; } #ln-chat-box .s2-ring .fg { stroke-linecap: round; stroke-dasharray: 226.2; stroke-dashoffset: 226.2; } #ln-chat-box .s2-ring.anim .fg { transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); } #ln-chat-box .s2-ring.g .fg { stroke: var(--s2-green-b); } #ln-chat-box .s2-ring.b .fg { stroke: var(--s2-blue); } #ln-chat-box .s2-ring .sg { fill: none; stroke: #efebe3; stroke-width: 9; stroke-linecap: round; } #ln-chat-box .s2-ring .sg.on { stroke: #e0a100; } #ln-chat-box .s2-ring .rv { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 23px/1 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.5px; } #ln-chat-box .s2-ring .rv small { font-size: 14px; font-weight: 700; color: var(--s2-muted); margin-left: 1px; } #ln-chat-box .s2-ring .rv small:only-child { margin-left: 0; } #ln-chat-box .s2-ring .rl { margin-top: 8px; font-size: 13px; font-weight: 600; color: #39434d; line-height: 1.25; } #ln-chat-box .s2-insight { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--s2-line); font-size: 14px; line-height: 1.45; color: #39434d; } #ln-chat-box .s2-insight svg { width: 22px; height: 22px; margin-top: 1px; } #ln-chat-box .s2-insight b { color: var(--s2-ink); } /* ── shortcut chips ── */ #ln-chat-box .s2-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #ln-chat-box .s2-chips button { display: flex; align-items: center; gap: 10px; border: 0; border-radius: 16px; background: var(--s2-chip); min-height: 52px; padding: 8px 14px; font: 700 14.5px/1.15 'Plus Jakarta Sans', Inter, sans-serif; cursor: pointer; text-align: left; } #ln-chat-box .s2-chips button:hover { background: #e6e1d7; } #ln-chat-box .s2-chips svg { width: 22px; height: 22px; } /* ── signed out ── */ #ln-chat-box .s2-ask, #ln-chat-box .s2-keep { margin-top: 12px; } #ln-chat-box .s2-ask .h { display: block; font: 800 20px/1.25 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.3px; } #ln-chat-box .s2-ask p, #ln-chat-box .s2-keep p { margin: 4px 0 0; color: var(--s2-muted); font-size: 14px; } #ln-chat-box .s2-keep h3 { margin: 0; font: 800 20px/1.2 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.3px; } #ln-chat-box .s2-keep .s2-btn { margin-top: 10px; } #ln-chat-box .s2-keep .s2-rows { margin-top: 4px; } #ln-chat-box .s2-keep .s2-row { min-height: 38px; padding: 3px 2px; border-top: 0; } #ln-chat-box .s2-keep .s2-row .k { font-weight: 600; font-size: 14px; } #ln-chat-box .s2-sky.compact { min-height: 0; } #ln-chat-box .s2-sky.compact .s2-conds { margin-top: 12px; padding-top: 9px; padding-bottom: 24px; } #ln-chat-box .s2-today .s2-ask .s2-ans { margin-top: 10px; } /* ── rows ── */ #ln-chat-box .s2-rows { margin-top: 8px; } #ln-chat-box .s2-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 2px; border-top: 1px solid var(--s2-line); color: inherit; text-decoration: none; } #ln-chat-box .s2-rows .s2-row:first-child, #ln-chat-box .s2-card > .s2-row:first-child { border-top: 0; } #ln-chat-box .s2-row > svg { width: 20px; height: 20px; } #ln-chat-box .s2-row .k { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; } #ln-chat-box .s2-row .k small { display: block; font-weight: 500; font-size: 12.5px; color: var(--s2-muted); } #ln-chat-box .s2-row .v { font-size: 14px; color: var(--s2-muted); text-align: right; } #ln-chat-box .s2-row .d { width: 48px; font-size: 13px; color: var(--s2-muted); flex: none; } #ln-chat-box .s2-log .s2-row .v { color: var(--s2-ink); font-weight: 500; text-align: left; flex: 1; } #ln-chat-box .s2-add { border: 0; background: transparent; color: var(--s2-green); font-weight: 700; font-size: 14px; cursor: pointer; min-height: 44px; padding: 0 4px; } /* ── yard ── */ #ln-chat-box .s2-weeds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #ln-chat-box .s2-weed { position: relative; border-radius: 20px; min-height: 168px; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 13px; cursor: pointer; background: #3f7a44 center/cover no-repeat; } #ln-chat-box .s2-weed::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,16,12,0) 30%, rgba(10,16,12,.78) 100%); } #ln-chat-box .s2-weed.nophoto { background-color: #2e7d32; } #ln-chat-box .s2-weed > * { position: relative; z-index: 1; } #ln-chat-box .s2-weed b { font: 800 17px/1.15 'Plus Jakarta Sans', Inter, sans-serif; } #ln-chat-box .s2-weed small { font-size: 12.5px; color: #eef2ea; margin-top: 2px; } #ln-chat-box .s2-weed .tag { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; background: #fff; border-radius: 999px; padding: 4px 9px 4px 6px; font: 700 11.5px/1 Inter, sans-serif; z-index: 2; } #ln-chat-box .s2-weed .tag svg { width: 14px; height: 14px; } #ln-chat-box .s2-weed .tag.now { color: #9a4f00; } #ln-chat-box .s2-weed .tag.now i { width: 8px; height: 8px; border-radius: 50%; background: var(--s2-orange); } #ln-chat-box .s2-weed .tag.care { color: #a51d32; } #ln-chat-box .s2-weed .tag.won { color: #704a00; } #ln-chat-box .s2-weed.cleared::after { content: ""; position: absolute; inset: 0; background: rgba(246,244,239,.5); } #ln-chat-box .s2-weed.cleared::before { background: none; } #ln-chat-box .s2-weed.cleared b, #ln-chat-box .s2-weed.cleared small { color: var(--s2-ink); } #ln-chat-box .s2-file { display: flex; gap: 16px; align-items: center; } #ln-chat-box .s2-file .s2-ring .rw, #ln-chat-box .s2-file .s2-ring svg { width: 72px; height: 72px; } #ln-chat-box .s2-file .s2-ring .rv { font-size: 20px; } #ln-chat-box .s2-file p { margin: 0; font-size: 13.5px; color: var(--s2-muted); line-height: 1.45; } #ln-chat-box .s2-file p b { display: block; font: 800 18px/1.25 'Plus Jakarta Sans', Inter, sans-serif; color: var(--s2-ink); } /* ── orders (look A) ── */ #ln-chat-box .s2-top { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; } #ln-chat-box .s2-icon { width: 40px; height: 40px; border-radius: 12px; border: 0; background: #ebe7df; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } #ln-chat-box .s2-icon svg { width: 18px; height: 18px; } #ln-chat-box .s2-otitle { flex: 1; font: 800 22px/1.2 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.3px; } #ln-chat-box .s2-tcard { background: var(--s2-card); border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgba(23,28,29,.05), 0 10px 26px -16px rgba(23,28,29,.22); } #ln-chat-box .s2-tmap { position: relative; height: 140px; background: #e7efe3; overflow: hidden; } #ln-chat-box .s2-tmap .streets { position: absolute; inset: 0; width: 100%; height: 100%; } #ln-chat-box .s2-tmap .bagchip { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 64px; height: 80px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px -6px rgba(23,28,29,.35); display: flex; align-items: center; justify-content: center; } #ln-chat-box .s2-tmap .bagchip img { height: 70px; } #ln-chat-box .s2-tmap .pin { position: absolute; left: 50%; top: 94px; width: 26px; height: 26px; margin-left: -13px; } #ln-chat-box .s2-tbody { padding: 14px 16px 16px; } #ln-chat-box .s2-tbody .pname { font-size: 13px; color: var(--s2-muted); font-weight: 600; } #ln-chat-box .s2-tbody .head { font: 800 22px/1.2 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.4px; margin-top: 2px; } #ln-chat-box .s2-tbody .head.done { color: var(--s2-green); } #ln-chat-box .s2-tbody .sub { font-size: 13.5px; color: var(--s2-muted); margin-top: 2px; } #ln-chat-box .s2-tbar { position: relative; height: 8px; border-radius: 6px; background: #ebe7df; margin: 14px 26px 4px 0; } #ln-chat-box .s2-tbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--s2-green); } #ln-chat-box .s2-tbar .endcheck { position: absolute; right: -26px; top: -7px; width: 22px; height: 22px; border-radius: 50%; background: #ebe7df; display: flex; align-items: center; justify-content: center; } #ln-chat-box .s2-tbar .endcheck.on { background: var(--s2-green); } #ln-chat-box .s2-tbar .endcheck svg { width: 12px; height: 12px; } #ln-chat-box .s2-tsteps { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--s2-soft); margin: 6px 26px 0 0; } #ln-chat-box .s2-tsteps span.on { color: var(--s2-ink); } #ln-chat-box .s2-carrier { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 16px; background: var(--s2-bg); } #ln-chat-box .s2-carrier .logo { width: 36px; height: 36px; border-radius: 10px; background: #4b2e1e; color: #ffc233; font: 900 11px/36px Inter, sans-serif; text-align: center; flex: none; } #ln-chat-box .s2-carrier .ct { flex: 1; min-width: 0; } #ln-chat-box .s2-carrier .ct b { display: block; font-weight: 700; font-size: 14px; } #ln-chat-box .s2-carrier .ct span { display: block; font-size: 12.5px; color: var(--s2-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ln-chat-box .s2-carrier button, #ln-chat-box .s2-carrier a { width: 36px; height: 36px; border: 0; border-radius: 10px; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: inset 0 0 0 1px #e3ded4; flex: none; } #ln-chat-box .s2-carrier svg { width: 17px; height: 17px; } #ln-chat-box .s2-tline { position: relative; margin: 0; padding: 0; list-style: none; } #ln-chat-box .s2-tline li { position: relative; display: flex; gap: 12px; padding: 9px 0 9px 2px; } #ln-chat-box .s2-tline li::before { content: ""; position: absolute; left: 12px; top: 30px; bottom: -9px; border-left: 2px solid #ebe7df; } #ln-chat-box .s2-tline li:last-child::before { display: none; } #ln-chat-box .s2-tline .ic { position: relative; z-index: 1; width: 22px; height: 22px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: inset 0 0 0 2px #d6d0c5; } #ln-chat-box .s2-tline .ic svg { width: 12px; height: 12px; } #ln-chat-box .s2-tline li.done .ic { background: var(--s2-green); box-shadow: none; } #ln-chat-box .s2-tline .tx b { display: block; font-size: 14px; font-weight: 700; } #ln-chat-box .s2-tline .tx span { font-size: 12.5px; color: var(--s2-muted); } #ln-chat-box .s2-tline li.todo .tx b { color: var(--s2-soft); font-weight: 600; } #ln-chat-box .s2-nudge { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 20px; color: #fff; background: #285bc5; cursor: pointer; } #ln-chat-box .s2-nudge svg { width: 34px; height: 34px; } #ln-chat-box .s2-nudge b { display: block; font: 800 16px/1.25 'Plus Jakarta Sans', Inter, sans-serif; } #ln-chat-box .s2-nudge span { font-size: 13px; opacity: .92; } /* ── how to (look A) ── */ #ln-chat-box .s2-feature { margin-top: 14px; border-radius: 24px; overflow: hidden; background: #fff; cursor: pointer; box-shadow: 0 1px 2px rgba(23,28,29,.05), 0 10px 26px -16px rgba(23,28,29,.22); } #ln-chat-box .s2-feature .poster { position: relative; aspect-ratio: 16 / 9; background: #eeeae2 url('/cdn-cgi/image/format=auto,quality=82,width=720/assets/media/videos/how-to-use-salacia-16x9-poster.jpg') center/cover no-repeat; } #ln-chat-box .s2-feature .play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(23,28,29,.78); color: #fff; display: flex; align-items: center; justify-content: center; } #ln-chat-box .s2-feature .play svg { width: 24px; height: 24px; margin-left: 3px; } #ln-chat-box .s2-feature .dur { position: absolute; right: 10px; bottom: 10px; background: rgba(23,28,29,.78); color: #fff; font: 700 12px/1 Inter, sans-serif; padding: 5px 8px; border-radius: 8px; } #ln-chat-box .s2-feature .meta { padding: 14px 16px 16px; } #ln-chat-box .s2-feature .eyebrow { font-size: 12px; font-weight: 700; color: var(--s2-green); letter-spacing: .02em; } #ln-chat-box .s2-feature .meta b { display: block; font: 800 19px/1.25 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.3px; margin-top: 3px; } #ln-chat-box .s2-feature .meta p { margin: 4px 0 0; font-size: 13.5px; color: var(--s2-muted); } #ln-chat-box .s2-dots { display: inline-flex; gap: 5px; vertical-align: middle; margin-left: 6px; } #ln-chat-box .s2-dots i { width: 7px; height: 7px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px #bdb6a9; } #ln-chat-box .s2-dots i.on { background: var(--s2-green); box-shadow: none; } #ln-chat-box .s2-dots i.cur { box-shadow: inset 0 0 0 2px var(--s2-green); } #ln-chat-box .s2-collect { display: flex; flex-direction: column; gap: 10px; } #ln-chat-box .s2-step { display: flex; align-items: center; gap: 14px; min-height: 94px; border-radius: 22px; padding: 14px 14px 14px 16px; color: #fff; overflow: hidden; cursor: pointer; } #ln-chat-box .s2-step .n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; font: 800 15px/1 'Plus Jakarta Sans', Inter, sans-serif; } #ln-chat-box .s2-step.learned .n { background: #fff; border-color: #fff; color: var(--s2-green); } #ln-chat-box .s2-step .t { flex: 1; min-width: 0; } #ln-chat-box .s2-step .t b { display: block; font: 800 17px/1.2 'Plus Jakarta Sans', Inter, sans-serif; } #ln-chat-box .s2-step .t span { display: block; font-size: 13px; opacity: .92; margin-top: 3px; line-height: 1.35; } #ln-chat-box .s2-step .art { flex: none; width: 70px; height: 70px; } #ln-chat-box .s2-step .art svg { width: 70px; height: 70px; } #ln-chat-box .s2 .s1 { background: #a94d0b; } #ln-chat-box .s2 .s2s { background: #6940bb; } #ln-chat-box .s2 .s3 { background: #285bc5; } #ln-chat-box .s2-ready { display: none; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(23,28,29,.05), 0 10px 26px -16px rgba(23,28,29,.22); } #ln-chat-box .s2-ready.on { display: flex; } #ln-chat-box .s2-ready svg { width: 38px; height: 38px; } #ln-chat-box .s2-ready b { display: block; font: 800 16px/1.25 'Plus Jakarta Sans', Inter, sans-serif; } #ln-chat-box .s2-ready span { font-size: 13px; color: var(--s2-muted); } /* ── lesson + games ── */ #ln-chat-box .s2-top .lt { flex: 1; font-weight: 700; font-size: 14px; color: var(--s2-muted); } #ln-chat-box .s2-lwatch { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--s2-line); cursor: pointer; } #ln-chat-box .s2-lwatch .thumb { flex: none; width: 52px; height: 68px; border-radius: 10px; background: #1b5e20 center / cover no-repeat; display: grid; place-items: center; } #ln-chat-box .s2-lwatch .thumb svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); } #ln-chat-box .s2-lwatch .k { flex: 1; min-width: 0; } #ln-chat-box .s2-lwatch .k b { display: block; font: 800 15px/1.2 'Plus Jakarta Sans', Inter, sans-serif; color: var(--s2-ink); } #ln-chat-box .s2-lwatch .k small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--s2-muted); } #ln-chat-box .s2-lhero { position: relative; overflow: hidden; border-radius: 24px; padding: 20px; color: #fff; min-height: 116px; display: flex; flex-direction: column; justify-content: flex-end; } #ln-chat-box .s2-lhero b { position: relative; z-index: 1; max-width: 230px; font: 800 25px/1.15 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.4px; } #ln-chat-box .s2-lhero .art { position: absolute; right: 12px; top: 12px; width: 96px; height: 96px; } #ln-chat-box .s2-lhero .art svg { width: 96px; height: 96px; } #ln-chat-box .s2-rate { padding: 12px 2px; border-top: 1px solid var(--s2-line); } #ln-chat-box .s2-rate:first-child { border-top: 0; } #ln-chat-box .s2-rate { display: flex; gap: 12px; align-items: flex-start; } #ln-chat-box .s2-ratetxt { flex: 1; min-width: 0; } #ln-chat-box .s2-scoopic { flex: none; width: 44px; height: 44px; } #ln-chat-box .s2-scoopic svg { width: 44px; height: 44px; } #ln-chat-box .s2-game .mc-n .s2-scoopic { width: 42px; height: 42px; align-self: center; } #ln-chat-box .s2-rate .lab { display: inline-block; font: 800 11.5px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--s2-green); } #ln-chat-box .s2-rate .lab.warn { color: var(--s2-red); } #ln-chat-box .s2-rate .line { margin: 6px 0 0; font-size: 15px; font-weight: 600; } #ln-chat-box .s2-rate .line strong { font: 800 24px/1 'Plus Jakarta Sans', Inter, sans-serif; margin-right: 4px; } #ln-chat-box .s2-rate p { margin: 5px 0 0; font-size: 14px; color: #39434d; line-height: 1.45; } #ln-chat-box .s2-lfoot { margin: 10px 2px 0; font-size: 13px; color: var(--s2-muted); } #ln-chat-box .s2-blist { margin: 0; padding: 0; list-style: none; } #ln-chat-box .s2-blist li { display: flex; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--s2-line); font-size: 14.5px; line-height: 1.45; color: #2b3238; } #ln-chat-box .s2-blist li:first-child { border-top: 0; } #ln-chat-box .s2-blist li svg { width: 20px; height: 20px; flex: none; margin-top: 1px; } #ln-chat-box .s2-game { margin-top: 12px; } #ln-chat-box .s2-game h5 { margin: 0; font: 800 17px/1.25 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.2px; } #ln-chat-box .s2-game .gsub { margin: 3px 0 0; font-size: 13.5px; color: var(--s2-muted); } #ln-chat-box .s2-game .gmode { display: inline-flex; margin-top: 12px; background: var(--s2-chip); border-radius: 12px; padding: 3px; } #ln-chat-box .s2-game .gmode button { border: 0; background: transparent; font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 9px; cursor: pointer; color: #4a5560; } #ln-chat-box .s2-game .gmode button.on { background: #fff; color: var(--s2-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); } #ln-chat-box .s2-game .stage2 { display: flex; align-items: center; gap: 16px; margin-top: 12px; } #ln-chat-box .s2-game .gctl { flex: 1; min-width: 0; } #ln-chat-box .s2-game .gcount { font: 800 26px/1.1 'Plus Jakarta Sans', Inter, sans-serif; } #ln-chat-box .s2-game .gcount small { display: block; font: 600 13px/1.3 Inter, sans-serif; color: var(--s2-muted); margin-top: 2px; } #ln-chat-box .s2-game .gctl .s2-btn { margin-top: 10px; } #ln-chat-box .s2-game .gfeed { margin-top: 12px; padding: 11px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; background: var(--s2-chip); color: #2b3238; display: flex; gap: 8px; align-items: flex-start; } #ln-chat-box .s2-game .gfeed svg { width: 18px; height: 18px; margin-top: 1px; } #ln-chat-box .s2-game .gfeed.good { background: #fff; box-shadow: inset 0 0 0 2px var(--s2-green); } #ln-chat-box .s2-game .gfeed.warn { background: #fff; box-shadow: inset 0 0 0 2px var(--s2-red); } #ln-chat-box .s2-game .gfeed.good b { color: var(--s2-green); } #ln-chat-box .s2-game .gfeed.warn b { color: var(--s2-red); } #ln-chat-box .s2-game .gactions { display: flex; gap: 8px; align-items: center; margin-top: 10px; } #ln-chat-box .s2-game .glink { border: 0; background: transparent; color: var(--s2-muted); font-weight: 700; font-size: 13px; cursor: pointer; padding: 6px 2px; } #ln-chat-box .s2-game .weedsvg { width: 100%; max-width: 250px; display: block; margin: 12px auto 0; } #ln-chat-box .s2-game .meter { height: 10px; border-radius: 6px; background: #efebe3; overflow: hidden; margin-top: 10px; } #ln-chat-box .s2-game .meter i { display: block; height: 100%; width: 0%; background: var(--s2-blue); border-radius: 6px; transition: width .08s linear; } #ln-chat-box .s2-game .mlabels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--s2-muted); margin-top: 4px; font-weight: 600; } #ln-chat-box .s2-game .holdbtn { width: 100%; margin-top: 12px; user-select: none; -webkit-user-select: none; touch-action: none; } #ln-chat-box .s2-game .q { margin-top: 12px; font-weight: 700; font-size: 15px; line-height: 1.4; } #ln-chat-box .s2-game .opts2 { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } #ln-chat-box .s2-game .opts2 button { text-align: left; border: 0; border-radius: 14px; background: var(--s2-chip); min-height: 48px; padding: 10px 14px; font: 600 14.5px/1.35 Inter, sans-serif; cursor: pointer; color: var(--s2-ink); } #ln-chat-box .s2-game .opts2 button.right { background: #fff; box-shadow: inset 0 0 0 2px var(--s2-green); } #ln-chat-box .s2-game .opts2 button.wrong { background: #fff; box-shadow: inset 0 0 0 2px var(--s2-red); } /* ── application score (V2) ── */ #ln-chat-box .s2-sloc { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ln-chat-box .s2-pill { border: 0; background: #ebe7df; border-radius: 999px; padding: 8px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; } #ln-chat-box .s2-zip { margin-bottom: 12px; } #ln-chat-box .s2-zip label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; } #ln-chat-box .s2-zip .zr { display: flex; gap: 8px; } #ln-chat-box .s2-zip input { flex: 1; min-width: 0; height: 44px; border: 1.5px solid #d8d3c9; border-radius: 12px; padding: 0 12px; font: 600 16px Inter, sans-serif; letter-spacing: .08em; } #ln-chat-box .s2-scard { position: relative; border-radius: 26px; overflow: hidden; color: #fff; padding: 18px 18px 30px; transition: background .6s; text-align: center; background: linear-gradient(180deg, #102744 0%, #1b4570 70%, #22527e 100%); } /* the score card wears Today's sky: its content above the weather layer; the sun and moon sit beside the dial */ #ln-chat-box .s2-scard > :not(.wx):not(.s2-lawn) { position: relative; } #ln-chat-box .s2-scard .wx .sun, #ln-chat-box .s2-scard .wx .moon { top: 168px; right: 12px; } #ln-chat-box .s2-scard .lbl { font: 800 13px/1 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #dbe6f1; } #ln-chat-box .s2-scard .sub { margin: 6px auto 0; max-width: 270px; font-size: 13.5px; color: #cfdcea; line-height: 1.4; } #ln-chat-box .s2-mode { display: inline-flex; margin-top: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 3px; } #ln-chat-box .s2-mode button { border: 0; background: transparent; color: #dbe6f1; font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 9px; cursor: pointer; } #ln-chat-box .s2-mode button.on { background: #fff; color: var(--s2-ink); } #ln-chat-box .s2-dial { position: relative; width: 236px; height: 214px; margin: 12px auto 0; } #ln-chat-box .s2-dial svg { width: 236px; height: 236px; } #ln-chat-box .s2-dial .band { fill: none; stroke-width: 6; opacity: .95; } #ln-chat-box .s2-dial .track { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 13; stroke-linecap: round; } #ln-chat-box .s2-dial .prog { fill: none; stroke-width: 13; stroke-linecap: round; transition: stroke-dashoffset 2.2s cubic-bezier(.25,.8,.25,1), stroke .3s; } #ln-chat-box .s2-dial .knob { transition: transform 2.2s cubic-bezier(.25,.8,.25,1); } #ln-chat-box .s2-dial .mid { position: absolute; left: 34px; right: 34px; top: 88px; text-align: center; } #ln-chat-box .s2-dial .calc { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; color: #dbe6f1; } #ln-chat-box .s2-dial .calc i { width: 9px; height: 9px; border-radius: 50%; background: #ffad1f; animation: s2pulse 1s ease-in-out infinite; } @keyframes s2pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } } #ln-chat-box .s2-dial .zone { font: 800 26px/1 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.5px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; } #ln-chat-box .s2-dial .zone small { display: block; margin-top: 7px; font: 600 12.5px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #cfdcea; } #ln-chat-box .s2-dial.done .zone { opacity: 1; transform: none; } #ln-chat-box .s2-dial.done .calc { display: none; } #ln-chat-box .s2-scard .legend { display: flex; justify-content: center; gap: 16px; margin-top: 2px; font-size: 12px; color: #cfdcea; font-weight: 600; } #ln-chat-box .s2-scard .legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; } #ln-chat-box .s2-frow { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 2px; border-top: 1px solid var(--s2-line); } #ln-chat-box .s2-frow:first-child { border-top: 0; } #ln-chat-box .s2-frow > svg { width: 24px; height: 24px; } #ln-chat-box .s2-frow .k { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; } #ln-chat-box .s2-frow .k small { display: block; font-weight: 500; font-size: 12.5px; color: var(--s2-muted); margin-top: 1px; } #ln-chat-box .s2-frow .val { font: 800 17px/1 'Plus Jakarta Sans', Inter, sans-serif; text-align: right; } #ln-chat-box .s2-frow .val em { display: block; font: 700 11.5px/1 Inter, sans-serif; font-style: normal; margin-top: 5px; } #ln-chat-box .s2-frow .ok { color: var(--s2-green); } #ln-chat-box .s2-frow .adj { color: #b36b00; } #ln-chat-box .s2-frow .bad { color: var(--s2-red); } #ln-chat-box .s2-tip { display: flex; gap: 12px; align-items: flex-start; padding: 11px 2px; border-top: 1px solid var(--s2-line); font-size: 14px; line-height: 1.45; color: #39434d; } #ln-chat-box .s2-tip:first-child { border-top: 0; } #ln-chat-box .s2-tip svg { width: 22px; height: 22px; margin-top: 1px; } /* ── sheets, toast, player ── */ #ln-chat-box .s2-scrim { position: absolute; inset: 0; background: rgba(12,16,18,.42); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; } #ln-chat-box .s2-scrim.on { opacity: 1; pointer-events: auto; } /* A closed sheet is not rendered at all: parked below the fold it counted as overflow, and any scroll-into-view nudged the panels up and showed it (live 2026-09-29: an empty "Save" box on every tab). */ #ln-chat-box .s2-sheet { display: none; position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - 8px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 26px 26px 0 0; padding: 10px 18px calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 41; font: 15px/1.45 Inter, system-ui, sans-serif; color: var(--s2-ink); box-shadow: 0 -12px 30px -18px rgba(23,28,29,.35); } #ln-chat-box .s2-sheet.on { display: block; animation: s2up .26s cubic-bezier(.2,.8,.2,1); } @keyframes s2up { from { transform: translateY(100%); } to { transform: none; } } /* QA shell-nav: sheets, dimming and toast are children of the box now (sal-v2.js wireShell): the dimming covers the header and the tab bar (QA F92). The title leaves room for the × every sheet carries; the toast keeps its place above the tab bar. */ #ln-chat-box .s2-sheet > h4 { padding-right: 40px; } #ln-chat-box.ln-v2 > .s2-toast { bottom: 150px; } /* anything hosted beside the toast (the writes lane's stale-sign-in banner, top: 10px of its host) keeps its place under the header now that the host is the box */ #ln-chat-box.ln-v2 > .s2-stale { top: 67px; } #ln-chat-box .s2-sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: #dcd7cc; margin: 2px auto 12px; } #ln-chat-box .s2-sheet h4 { margin: 0; font: 800 20px/1.25 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.3px; } #ln-chat-box .s2-sheet p { margin: 5px 0 0; font-size: 14px; color: var(--s2-muted); } #ln-chat-box .s2-sheet .opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; } #ln-chat-box .s2-sheet .opts button { min-height: 52px; border: 0; border-radius: 14px; background: var(--s2-chip); font: 800 15px/1.1 'Plus Jakarta Sans', Inter, sans-serif; cursor: pointer; } #ln-chat-box .s2-sheet .opts button small { display: block; font: 600 11px/1.2 Inter, sans-serif; color: var(--s2-muted); } #ln-chat-box .s2-sheet .acts { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } #ln-chat-box .s2-sheet .acts .s2-btn { width: 100%; } #ln-chat-box .s2-sheet .fine { margin-top: 12px; font-size: 12px; text-align: center; } #ln-chat-box .s2-sheet input { width: 100%; height: 48px; border: 1.5px solid #d8d3c9; border-radius: 14px; padding: 0 14px; font: 500 16px Inter, sans-serif; margin-top: 14px; } #ln-chat-box .s2-danger { border: 0; background: transparent; color: var(--s2-red); font-weight: 700; font-size: 14.5px; min-height: 44px; cursor: pointer; } #ln-chat-box .s2-toast { position: absolute; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: var(--s2-ink); color: #fff; font: 600 13.5px/1.2 Inter, sans-serif; padding: 10px 16px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 42; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; } #ln-chat-box .s2-toast.on { opacity: 1; transform: translate(-50%, 0); } #ln-chat-box .s2-player { position: absolute; inset: 0; background: #0b0e10; z-index: 43; display: none; flex-direction: column; } #ln-chat-box .s2-player.on { display: flex; } #ln-chat-box .s2-player video { flex: 1; width: 100%; min-height: 0; background: #000; object-fit: contain; } /* signed-out Today fits a phone in Safari WITH the full "Keep your yard with Sal" block (founder 09-29: the awkward little scroll to reach Sign in, then "that block was nice, now there's a big empty space") */ #ln-chat-box .s2-today .s2-body { padding-top: 10px; padding-bottom: 6px; } #ln-chat-box .s2-today .s2-ask, #ln-chat-box .s2-today .s2-keep { margin-top: 8px; padding: 12px 16px; } #ln-chat-box .s2-today .s2-ask .h { font-size: 18px; } #ln-chat-box .s2-today .s2-ask p { font-size: 13.5px; margin-top: 3px; } #ln-chat-box .s2-today .s2-ask .s2-ans { margin-top: 10px; } #ln-chat-box .s2-keep h3 { font-size: 18px; } #ln-chat-box .s2-keep .s2-rows { margin-top: 4px; } #ln-chat-box .s2-keep .s2-row { min-height: 28px; padding: 1px 2px; border-top: 0; gap: 10px; } #ln-chat-box .s2-keep .s2-row > svg { width: 19px; height: 19px; } #ln-chat-box .s2-keep .s2-row .k { font-weight: 600; font-size: 14px; } #ln-chat-box .s2-keep .s2-btn { margin-top: 8px; } #ln-chat-box .s2-sky.compact { padding-top: 14px; } #ln-chat-box .s2-sky.compact .s2-sentence { font-size: 24px; margin-top: 8px; } #ln-chat-box .s2-sky.compact .s2-vchip { margin-top: 10px; } #ln-chat-box .s2-sky.compact .s2-conds { margin-top: 10px; padding-top: 8px; padding-bottom: 18px; } /* very short screens (iPhone SE in Safari): the sentence and the chip carry the sky; the block keeps its button */ /* signed out, Today FILLS the screen (founder 09-29: "big empty space at the bottom, fill it"): the sky takes whatever height is left, its conditions row sits on the lawn, the two cards stay packed above the tab bar */ #ln-chat-box .s2-today.s2-out .s2-body { flex: 1 0 auto; display: flex; flex-direction: column; } #ln-chat-box .s2-today.s2-out .s2-keep { flex: 1 0 auto; display: flex; flex-direction: column; } #ln-chat-box .s2-today.s2-out .s2-keep .s2-rows { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-evenly; } #ln-chat-box .s2-keep .s2-keep-p { margin: 4px 0 2px; font-size: 13.5px; line-height: 1.4; color: var(--s2-muted); } #ln-chat-box .s2-keep .s2-row .k small { display: block; font-weight: 500; font-size: 12.5px; color: var(--s2-muted); margin-top: 1px; } #ln-chat-box.ln-v2 .ln-panels { container-type: size; } @container (max-height: 680px) { #ln-chat-box .s2-keep .s2-keep-p { display: none; } } @container (max-height: 610px) { #ln-chat-box .s2-keep .s2-row .k small { display: none; } } @container (max-height: 570px) { #ln-chat-box .s2-today .s2-ask p { display: none; } } @container (max-height: 530px) { #ln-chat-box .s2-sky.compact .s2-conds { display: none; } #ln-chat-box .s2-sky.compact { padding-bottom: 26px; } } @container (max-height: 480px) { #ln-chat-box .s2-keep .s2-rows, #ln-chat-box .s2-today.s2-out .s2-keep .s2-rows { display: none; } #ln-chat-box .s2-today.s2-out .s2-keep { flex: 0 0 auto; } #ln-chat-box .s2-today.s2-out .s2-sky { flex: 1 0 auto; } } /* phone heights: each step keeps Sign in on screen without a scroll (live 09-29: iPhone Safari ~659, Android ~640) */ @media (max-height: 800px) { #ln-chat-box .s2-keep .s2-keep-p { display: none; } } @media (max-height: 730px) { #ln-chat-box .s2-keep .s2-row .k small { display: none; } } @media (max-height: 690px) { #ln-chat-box .s2-today .s2-ask p { display: none; } } @media (max-height: 650px) { #ln-chat-box .s2-sky.compact .s2-conds { display: none; } #ln-chat-box .s2-sky.compact { padding-bottom: 26px; } } @media (max-height: 600px) { #ln-chat-box .s2-sky.compact .s2-conds { display: none; } #ln-chat-box .s2-sky.compact { padding-bottom: 26px; } #ln-chat-box .s2-today .s2-ask p { display: none; } #ln-chat-box .s2-keep .s2-rows, #ln-chat-box .s2-today.s2-out .s2-keep .s2-rows { display: none; } #ln-chat-box .s2-today.s2-out .s2-keep { flex: 0 0 auto; } #ln-chat-box .s2-today.s2-out .s2-sky { flex: 1 0 auto; } } /* ── the ONE sign-in box, opened where you are (the widget's own pill, hosted here) ── */ #ln-chat-box .s2-si { padding: 10px 20px 22px; } #ln-chat-box .s2-si-x { position: sticky; top: 6px; z-index: 2; width: 44px; height: 44px; margin: 0 -8px -44px auto; padding: 0; border: 0; border-radius: 12px; background: #ebe7df; color: #171c1d; display: flex; align-items: center; justify-content: center; cursor: pointer; } #ln-chat-box .s2-si-x svg { width: 16px; height: 16px; } #ln-chat-box .s2-si .ln-signin-pill { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; animation: none; } #ln-chat-box.ln-v2 .s2-si .ln-signin-pill { box-shadow: none; border-radius: 0; background: transparent; } /* a flat form: beats the chat-card rule below (QA F51) */ #ln-chat-box .s2-si .ln-plan-card__head { padding-right: 46px; min-height: 38px; } #ln-chat-box .s2-si .ln-plan-card__toggle { pointer-events: none; padding: 0; margin: 0; background: none; border: 0; gap: 10px; } #ln-chat-box .s2-si .ln-plan-card__toggle > span { font: 800 22px/1.2 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.4px; color: #171c1d; white-space: normal; overflow: visible; } #ln-chat-box .s2-si .ln-plan-card__toggle > svg:first-child { width: 22px; height: 22px; color: #2e7d32; } #ln-chat-box .s2-si .ln-plan-card__chev, #ln-chat-box .s2-si .ln-plan-card__x, #ln-chat-box .s2-si .ln-plan-card__dismiss { display: none; } #ln-chat-box .s2-si .ln-plan-card__body { display: block; margin-top: 4px; animation: none; } #ln-chat-box .s2-si .ln-plan-card__sub { font-size: 14.5px; color: #5b6570; line-height: 1.45; } #ln-chat-box .s2-si .ln-plan-card__fields { margin-top: 14px; gap: 10px; } #ln-chat-box .s2-si .ln-plan-card__input { width: 100%; height: 50px; border: 1.5px solid #d8d3c9; border-radius: 14px; padding: 0 14px; font: 500 16px Inter, sans-serif; background: #fff; color: #171c1d; } #ln-chat-box .s2-si .ln-plan-card__input:focus { border-color: #2e7d32; outline: 0; box-shadow: 0 0 0 3px rgba(46,125,50,.12); } #ln-chat-box .s2-si .ln-plan-card__input[data-sp="code"] { letter-spacing: .3em; font-size: 20px; text-align: center; } #ln-chat-box .s2-si .ln-plan-card__input[data-sp="code"]::placeholder { letter-spacing: normal; font-size: 16px; } /* reads "6-digit code" (QA F65) */ #ln-chat-box .s2-si .ln-plan-card__btn { width: 100%; min-height: 50px; margin-top: 12px; border: 0; border-radius: 14px; background: #2e7d32; color: #fff; font: 700 15.5px Inter, sans-serif; cursor: pointer; } #ln-chat-box .s2-si .ln-plan-card__btn:hover { background: #1b5e20; } #ln-chat-box .s2-si .ln-plan-card__fine { font-size: 13px; margin-top: 8px; } #ln-chat-box .s2-si-help { display: flex; justify-content: space-between; margin-top: 4px; } #ln-chat-box .s2-si-help .s2-link:disabled { color: var(--s2-muted); cursor: default; } /* "Resend in 30s" (QA F41) */ #ln-chat-box .s2-si-trigger { margin-top: 12px; min-height: 42px; } /* lesson 1: the mix calculator (tank size + the job -> provided scoops for the whole tank) */ #ln-chat-box .s2-game .mc-lbl { margin-top: 14px; font: 700 12.5px/1.2 Inter, sans-serif; color: var(--s2-muted); letter-spacing: .02em; } #ln-chat-box .s2-game .mc-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; } #ln-chat-box .s2-game .mc-sizes button { min-height: 46px; border: 0; border-radius: 14px; background: var(--s2-chip); font: 800 15px/1 'Plus Jakarta Sans', Inter, sans-serif; color: var(--s2-ink); cursor: pointer; } #ln-chat-box .s2-game .mc-sizes button.on { background: #fff; box-shadow: inset 0 0 0 2px var(--s2-green); color: var(--s2-green); } #ln-chat-box .s2-game .mc-other { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--s2-muted); } #ln-chat-box .s2-game .mc-other label { font-weight: 600; color: #39434d; } #ln-chat-box .s2-game .mc-other input { width: 92px; height: 44px; border: 1.5px solid #d8d3c9; border-radius: 12px; padding: 0 12px; font: 600 16px Inter, sans-serif; color: var(--s2-ink); background: #fff; } #ln-chat-box .s2-game .mc-other input:focus { outline: 0; border-color: var(--s2-green); box-shadow: 0 0 0 3px rgba(46,125,50,.12); } #ln-chat-box .s2-game .gmode { margin-top: 8px; } #ln-chat-box .s2-game .mc-out { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--s2-chip); } #ln-chat-box .s2-game .mc-out.on { background: #fff; box-shadow: inset 0 0 0 2px var(--s2-green); } #ln-chat-box .s2-game .mc-out.on.kill { box-shadow: inset 0 0 0 2px var(--s2-red); } #ln-chat-box .s2-game .mc-hint { font-size: 14px; color: var(--s2-muted); } #ln-chat-box .s2-game .mc-n { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } #ln-chat-box .s2-game .mc-n b { font: 800 40px/1 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -1px; color: var(--s2-green); } #ln-chat-box .s2-game .mc-out.kill .mc-n b { color: var(--s2-red); } #ln-chat-box .s2-game .mc-n span { font: 700 16px/1.2 'Plus Jakarta Sans', Inter, sans-serif; color: var(--s2-ink); } #ln-chat-box .s2-game .mc-n .mc-bag { width: 40px; height: 54px; object-fit: contain; align-self: center; max-width: none; } #ln-chat-box .s2-game .mc-out.bags .mc-n b { font-size: 26px; letter-spacing: -.3px; line-height: 1.1; } #ln-chat-box .s2-game .mc-sub { margin-top: 4px; font: 700 14px/1.3 'Plus Jakarta Sans', Inter, sans-serif; color: var(--s2-ink); } #ln-chat-box .s2-game .mc-for { margin-top: 6px; font-size: 13.5px; color: #39434d; } #ln-chat-box .s2-game .mc-fine { margin-top: 8px; font-size: 13px; color: var(--s2-muted); } #ln-chat-box .s2-game .mc-warn { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: #2b3238; } #ln-chat-box .s2-game .mc-warn svg { width: 18px; height: 18px; flex: none; margin-top: 1px; } /* the shower test: droplets leave the nozzle along the wand; water percolates while the soil soaks */ #ln-chat-box .s2-game .weedsvg.shw { max-width: 320px; margin-top: 10px; } #ln-chat-box .s2-game .shw .sp { opacity: 0; } #ln-chat-box .s2-game .shw .cone { opacity: 0; transition: opacity .15s; } #ln-chat-box .s2-game .shw.spraying .cone { opacity: .35; } #ln-chat-box .s2-game .shw.spraying .sp { animation: s2spr .5s linear infinite; } @keyframes s2spr { 0% { opacity: 0; transform: translate(4px, 0); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)); } } #ln-chat-box .s2-game .shw .perc { stroke-dasharray: 3 8; opacity: 0; transition: opacity .2s; } #ln-chat-box .s2-game .shw .shword { font: 800 30px/1 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.5px; fill: #d5e6d2; } #ln-chat-box .s2-game .mlabels span { transition: color .2s; } #ln-chat-box .s2-game .holdbtn.again { background: #fff; color: var(--s2-ink); box-shadow: inset 0 0 0 1.5px #cfc9bd; } #ln-chat-box .s2-game .gtip { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--s2-line); font-size: 13.5px; line-height: 1.45; color: #39434d; } #ln-chat-box .s2-game .gtip svg { width: 20px; height: 20px; flex: none; margin-top: 1px; } #ln-chat-box .s2-game .mlabels span.on { color: var(--s2-green); } #ln-chat-box .s2-game .shw.soaking .perc { opacity: .85; animation: s2perc .6s linear infinite; } @keyframes s2perc { to { stroke-dashoffset: -22; } } @media (prefers-reduced-motion: reduce) { #ln-chat-box .s2-sheet.on { animation: none; } #ln-chat-box .s2-game .shw .sp, #ln-chat-box .s2-game .shw .perc { animation: none !important; } #ln-chat-box .s2-game .shw.spraying .sp { opacity: .8; } #ln-chat-box .wx *, #ln-chat-box .s2-sky.windy .s2-lawn, #ln-chat-box .s2-scard.windy .s2-lawn, #ln-chat-box .s2-sky.w-storm .wx::after, #ln-chat-box .s2-dial .calc i { animation: none !important; } #ln-chat-box .s2-ring.anim .fg, #ln-chat-box .s2-dial .prog, #ln-chat-box .s2-dial .knob { transition: none !important; } } /* ═══ THE CHAT, IN THE APP'S LOOK (founder 2026-09-29: "it's a whole… make everything seamless") ═══ Same layout as the live chat, no revamp: only its colours, type and shapes follow the app screens. Scoped to #ln-chat-box.ln-v2 (sal-v2.js sets the class), so the old widget does not change. */ #ln-chat-box.ln-v2 { --ln-primary: #2e7d32; --ln-primary-light: #3f9a4a; --ln-secondary: #2e7d32; --ln-accent: #3f9a4a; --ln-bg-primary: #f6f4ef; --ln-bg-secondary: #ffffff; --ln-bg-tertiary: #ebe7df; --ln-glass-bg: #f6f4ef; --ln-glass-bg-hover: #f1eee7; --ln-glass-bg-solid: #f6f4ef; --ln-glass-border: #ebe7df; --ln-text-primary: #171c1d; --ln-text-secondary: #5b6570; --ln-text-tertiary: #8a929b; --ln-text-quaternary: #a9b0b7; --ln-card-bg: #ffffff; --ln-input-bg: #ffffff; background: #f6f4ef; font-family: Inter, system-ui, sans-serif; } #ln-chat-box.ln-v2 .ln-header { background: #f6f4ef; border-bottom-color: #ebe7df; backdrop-filter: none; -webkit-backdrop-filter: none; } #ln-chat-box.ln-v2 .ln-header-text h3 { font: 800 15px/1.2 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.3px; } #ln-chat-box.ln-v2 .ln-header-btn { background: #ebe7df; color: #171c1d; border-radius: 12px; min-width: 40px; height: 40px; margin: -3px 0; } #ln-chat-box.ln-v2 .ln-header-btn:hover { background: #e2ddd2; color: #171c1d; } /* QA shell-nav: 40 px targets at the header's old height (F79): the negative margin gives back what the button grew (the row was 34 px in the desktop box, the avatar; 36 px on a phone, the old buttons). The green marks the signed-in state (F14); "New conversation" only on Chat (F13). */ @media (max-width: 480px) { #ln-chat-box.ln-v2 .ln-header-btn { margin: -2px 0; } } #ln-chat-box.ln-v2 .ln-header-btn:not(#ln-account-btn) { width: 40px; } #ln-chat-box.ln-v2 .ln-header-btn.ln-signed-in { color: #2e7d32; } #ln-chat-box.ln-v2 .ln-header-btn.ln-signed-in:hover { color: #1b5e20; } #ln-chat-box.ln-v2.s2-not-chat #ln-reset-btn { display: none; } #ln-chat-box.ln-v2 .ln-panels, #ln-chat-box.ln-v2 .ln-chat-panel, #ln-chat-box.ln-v2 .ln-messages { background: #f6f4ef; } /* the strip above the conversation: the sky's little sibling (same verdict, opens the score) */ #ln-chat-box.ln-v2 .ln-conditions-preview, #ln-chat-box.ln-v2 .ln-conditions-preview:hover, #ln-chat-box.ln-v2 .ln-conditions-preview.status-ideal, #ln-chat-box.ln-v2 .ln-conditions-preview.status-fair, #ln-chat-box.ln-v2 .ln-conditions-preview.status-poor { background: linear-gradient(180deg, #16324f 0%, #22527e 100%); border: 0; border-radius: 18px; box-shadow: 0 10px 22px -16px rgba(16,39,68,.9); transform: none; } #ln-chat-box.ln-v2 .ln-conditions-preview-icon { background: rgba(255,255,255,.14); border-radius: 12px; } #ln-chat-box.ln-v2 .ln-conditions-preview-icon svg { color: #ffe27a; } #ln-chat-box.ln-v2 .ln-conditions-preview-text h4 { color: #cfdcea; font: 800 10.5px/1.2 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; } #ln-chat-box.ln-v2 .ln-conditions-preview-text p { color: #fff; font: 700 14px/1.3 'Plus Jakarta Sans', Inter, sans-serif; margin-top: 3px; } #ln-chat-box.ln-v2 .ln-widgets-collapsed { border-bottom-color: #ebe7df; } /* welcome: the same title, chip and button language as Today */ #ln-chat-box.ln-v2 .ln-welcome h4 { font: 800 20px/1.2 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.4px; color: #171c1d; } #ln-chat-box.ln-v2 .ln-welcome p { font-size: 14px; color: #5b6570; } #ln-chat-box.ln-v2 .ln-welcome-icon, #ln-chat-box.ln-v2 .ln-header-avatar, #ln-chat-box.ln-v2 .ln-header-avatar-inner, #ln-chat-box.ln-v2 .ln-message-avatar { background: #2e7d32; } #ln-chat-box.ln-v2 .ln-welcome-icon::after, #ln-chat-box.ln-v2 .ln-header-avatar::after { border-color: rgba(46,125,50,.28); } #ln-chat-box.ln-v2 .ln-welcome-chips { gap: 10px; } #ln-chat-box.ln-v2 .ln-welcome-chip, #ln-chat-box.ln-v2 .ln-followup-chip { background: #eeeae2; border: 0; border-radius: 14px; color: #171c1d; font: 700 13.5px/1.2 'Plus Jakarta Sans', Inter, sans-serif; padding: 10px 14px; min-height: 42px; } #ln-chat-box.ln-v2 .ln-welcome-chip:hover, #ln-chat-box.ln-v2 .ln-followup-chip:hover { background: #e6e1d7; border: 0; transform: none; } #ln-chat-box.ln-v2 .ln-welcome-chip svg { color: #2f6fe4; width: 18px; height: 18px; } #ln-chat-box.ln-v2 .ln-powered-by-welcome span { color: #2e7d32; } /* the conversation: white answer cards, green questions (the app's two surfaces) */ #ln-chat-box.ln-v2 .ln-messages { gap: 12px; } #ln-chat-box.ln-v2 .ln-message-content { font-size: 14.5px; line-height: 1.5; border-radius: 20px; } #ln-chat-box.ln-v2 .ln-bot .ln-message-content { background: #fff; border: 0; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(23,28,29,.05), 0 10px 26px -18px rgba(23,28,29,.28); } #ln-chat-box.ln-v2 .ln-user .ln-message-content { background: #2e7d32; border-bottom-right-radius: 6px; } #ln-chat-box.ln-v2 .ln-message-content a:not(.ln-checkout-btn) { color: #2e7d32; font-weight: 600; } #ln-chat-box.ln-v2 .ln-message-content strong, #ln-chat-box.ln-v2 .ln-message-content b { color: #171c1d; } #ln-chat-box.ln-v2 .ln-user .ln-message-content strong, #ln-chat-box.ln-v2 .ln-user .ln-message-content b { color: #fff; } #ln-chat-box.ln-v2 .ln-message-content h3, #ln-chat-box.ln-v2 .ln-message-content h4 { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 800; letter-spacing: -.2px; } #ln-chat-box.ln-v2 .ln-typing { background: #fff; border: 0; border-radius: 20px; box-shadow: 0 1px 2px rgba(23,28,29,.05), 0 10px 26px -18px rgba(23,28,29,.28); } #ln-chat-box.ln-v2 .ln-checkout-btn { background: #2e7d32; border-radius: 14px; box-shadow: none; font-weight: 700; } #ln-chat-box.ln-v2 .ln-checkout-btn:hover { background: #1b5e20; } #ln-chat-box.ln-v2 .ln-igauge-card, #ln-chat-box.ln-v2 .ln-plan-card { background: #fff; border: 0; border-radius: 20px; box-shadow: 0 1px 2px rgba(23,28,29,.05), 0 10px 26px -18px rgba(23,28,29,.28); } #ln-chat-box.ln-v2 .ln-scroll-pill { background: #171c1d; color: #fff; border-radius: 999px; } /* composer: a white field on cream, green send */ #ln-chat-box.ln-v2 .ln-input-area { background: #f6f4ef; border-top-color: #ebe7df; backdrop-filter: none; -webkit-backdrop-filter: none; } #ln-chat-box.ln-v2 .ln-composer { background: #fff; border: 1.5px solid #e3ded4; border-radius: 18px; box-shadow: 0 1px 2px rgba(23,28,29,.04); } #ln-chat-box.ln-v2 .ln-composer:focus-within { border-color: #2e7d32; box-shadow: 0 0 0 3px rgba(46,125,50,.12); } #ln-chat-box.ln-v2 .ln-composer .ln-send-btn { background: #2e7d32; box-shadow: none; } /* the bar: the app's green marks where you are */ #ln-chat-box.ln-v2 .ln-navbar { background: #fff; border-top-color: #ebe7df; } #ln-chat-box.ln-v2 .ln-nav-item { color: #8a929b; } #ln-chat-box.ln-v2 .ln-nav-item.active { color: #2e7d32; background: rgba(46,125,50,.1); } #ln-chat-box.ln-v2 .ln-nav-item.active::after { background: #2e7d32; } #ln-chat-box.ln-v2 .ln-nav-item span { font-size: 10px; font-weight: 700; } #ln-chat-box.ln-v2 .ln-nav-item svg { width: 20px; height: 20px; } /* the + menu lives on (it escapes the box's blur), so it is scoped by the page flag */ html.ln-v2-app .ln-composer-popover { background: #fff; border: 0; border-radius: 18px; box-shadow: 0 16px 40px -18px rgba(23,28,29,.35); } html.ln-v2-app .ln-popover-item-label { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 700; color: #171c1d; } /* a score card inside a reply: the sky's words, live (sal-v2.js repaints it on every reading) */ #ln-chat-box.ln-v2 .ln-igauge-card.s2-ig { background: linear-gradient(180deg, #16324f 0%, #22527e 100%); color: #fff; border: 0; border-radius: 18px; padding: 14px 16px; cursor: pointer; box-shadow: 0 10px 22px -16px rgba(16,39,68,.9); } #ln-chat-box.ln-v2 .s2-ig .s2-ig-lbl { font: 800 10.5px/1.2 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #cfdcea; } #ln-chat-box.ln-v2 .s2-ig .s2-ig-top { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 800 17px/1.2 'Plus Jakarta Sans', Inter, sans-serif; } #ln-chat-box.ln-v2 .s2-ig .s2-ig-top i { width: 9px; height: 9px; border-radius: 50%; flex: none; } #ln-chat-box.ln-v2 .s2-ig .s2-ig-nums { margin-top: 4px; font-size: 13px; color: #dbe6f1; } #ln-chat-box.ln-v2 .s2-ig .s2-ig-link { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 13px; color: #fff; border-bottom: 1.5px solid rgba(255,255,255,.55); } #ln-chat-box.ln-v2 .ln-conditions-preview-score { display: none; } /* the decorative rainbow bar: the words carry the verdict now */ /* ═══ TALK (2026-09-29) · the Talk screen (A) + the call pill (C). V2 only (#ln-chat-box.ln-v2 sets the class); colour = meaning, red on End call only ═══ */ #ln-chat-box .s2-talk .s2-talk-body { display: flex; flex-direction: column; align-items: center; min-height: 100%; padding: 14px 16px 18px; } #ln-chat-box .s2-talk-head { text-align: center; } #ln-chat-box .s2-talk-head b { display: block; font: 800 22px/1.15 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.4px; } #ln-chat-box .s2-talk-head span { display: block; margin-top: 3px; font-size: 13px; color: var(--s2-muted); } #ln-chat-box .s2-talk-status { text-align: center; min-height: 44px; } #ln-chat-box .s2-talk-status b { display: block; font: 800 20px/1.2 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.3px; } #ln-chat-box .s2-talk-status span { display: block; margin-top: 3px; font-size: 13px; color: var(--s2-muted); min-height: 18px; } #ln-chat-box .s2-caps { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } #ln-chat-box .s2-cap { background: #fff; border-radius: 18px; padding: 10px 14px; box-shadow: 0 1px 2px rgba(23,28,29,.05), 0 10px 26px -18px rgba(23,28,29,.28); } #ln-chat-box .s2-cap small { display: block; font: 700 11px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--s2-soft); margin-bottom: 5px; } #ln-chat-box .s2-cap p { margin: 0; font-size: 14.5px; line-height: 1.4; max-height: 5.6em; overflow-y: auto; -webkit-overflow-scrolling: touch; } #ln-chat-box .s2-cap.live p { color: #39434d; } #ln-chat-box .s2-cap.cut p::after { content: " (cut off)"; color: var(--s2-muted); font-size: 12.5px; } #ln-chat-box .s2-cap-you { background: var(--s2-green); color: #fff; } #ln-chat-box .s2-cap-you small { color: #d9ead6; } #ln-chat-box .s2-cap-you.live p { color: #eef7ec; } #ln-chat-box .s2-talk-time { margin-top: 10px; font: 700 13px/1 Inter, sans-serif; color: var(--s2-muted); font-variant-numeric: tabular-nums; } #ln-chat-box .s2-talk-idle { width: 100%; margin-top: 14px; text-align: center; } #ln-chat-box .s2-talk-note { margin: 10px 0 0; font-size: 12.5px; color: var(--s2-muted); } #ln-chat-box .s2-talk-fail { margin: 10px 0 0; font-size: 13.5px; color: var(--s2-red); font-weight: 600; line-height: 1.4; } #ln-chat-box .s2-talk-live { display: flex; gap: 12px; width: 100%; margin-top: 14px; } #ln-chat-box .s2-tbtn { flex: 1; min-height: 50px; border: 0; border-radius: 16px; background: #fff; color: var(--s2-ink); font: 700 14.5px/1 Inter, sans-serif; box-shadow: inset 0 0 0 1.5px #cfc9bd; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; } #ln-chat-box .s2-tbtn svg { width: 20px; height: 20px; } #ln-chat-box .s2-tbtn[aria-pressed="true"] { background: var(--s2-chip); color: var(--s2-ink); box-shadow: inset 0 0 0 2px var(--s2-ink); } /* pressed = the chip tone + an ink ring: no new colour */ #ln-chat-box .s2-tbtn.end { background: var(--s2-red); color: #fff; box-shadow: none; } #ln-chat-box .s2-tbtn:disabled { opacity: .4; cursor: default; } /* the call pill: its own row between the screens and the tab bar (sal-v2.js moves it there), so it can never cover content or the composer */ #ln-chat-box .s2-callbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border-top: 1px solid var(--s2-line); flex-shrink: 0; font: 15px/1.3 Inter, system-ui, sans-serif; color: var(--s2-ink); } #ln-chat-box .s2-callbar[hidden] { display: none; } #ln-chat-box .s2-callbar * { box-sizing: border-box; } #ln-chat-box .s2-cb-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 2px 4px; text-align: left; cursor: pointer; font: inherit; color: inherit; } #ln-chat-box .s2-cb-main .t { min-width: 0; } #ln-chat-box .s2-cb-main b { display: block; font: 800 14px/1.2 'Plus Jakarta Sans', Inter, sans-serif; font-variant-numeric: tabular-nums; } #ln-chat-box .s2-cb-main small { display: block; font-size: 12px; color: var(--s2-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ln-chat-box .s2-cb-btn { min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: #fff; color: var(--s2-ink); font: 700 13px/1 Inter, sans-serif; box-shadow: inset 0 0 0 1.5px #cfc9bd; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; } #ln-chat-box .s2-cb-btn svg { width: 16px; height: 16px; flex: none; } #ln-chat-box .s2-cb-btn[aria-pressed="true"] { background: var(--s2-chip); color: var(--s2-ink); box-shadow: inset 0 0 0 2px var(--s2-ink); } #ln-chat-box .s2-cb-btn.end { background: var(--s2-red); color: #fff; box-shadow: none; } #ln-chat-box .s2-cb-btn:disabled { opacity: .4; cursor: default; } #ln-chat-box .ln-call-group { display: flex; flex-direction: column; gap: 12px; } #ln-chat-box .ln-call-head { margin-top: 4px; } #ln-chat-box .ln-call-turn .ln-message-content { border-left: 3px solid var(--s2-green-b); } #ln-chat-box .ln-call-turn.ln-user .ln-message-content { border-left: 0; border-right: 3px solid #b8e6a8; } @container (max-height: 540px) { #ln-chat-box .s2-cap p { max-height: 2.8em; } #ln-chat-box .s2-talk-head span { display: none; } } /* ═══ TALK LIVES IN THE CHAT (2026-09-30) · BEGIN ═══ The voice button sits in the Chat composer (ChatGPT, Gemini, Claude, Perplexity); a call turns Chat into the call: the visual on top, the words in the thread, Mute and End call where the composer was. V2 only (#ln-chat-box.ln-v2, set by sal-v2.js); phone, small widget and computer alike. The Talk tab is gone from the bar. */ #ln-chat-box.ln-v2 #ln-nav-talk { display: none !important; } #ln-chat-box.ln-v2 .ln-composer .s2-voice-btn { width: 34px; height: 34px; flex-shrink: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #171c1d; display: grid; place-items: center; cursor: pointer; transition: background .15s, box-shadow .15s; } #ln-chat-box.ln-v2 .ln-composer .s2-voice-btn:hover { background: #ebe7df; } #ln-chat-box.ln-v2 .ln-composer .s2-voice-btn:focus-visible { outline: 2px solid #2e7d32; outline-offset: 2px; } #ln-chat-box.ln-v2 .ln-composer .s2-voice-btn svg { width: 20px; height: 20px; } #ln-chat-box.ln-v2 .ln-composer.is-active .s2-voice-btn { margin-left: auto; } /* two icons in the folded box: its hint stays on one line (an ellipsis on the narrowest phones), never a clipped second line */ #ln-chat-box.ln-v2 .ln-composer:not(.is-active) .ln-input-field, #ln-chat-box.ln-v2 .ln-composer:not(.is-active) .ln-input-field::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ln-chat-box.ln-v2 .ln-composer .s2-voice-btn.s2-ready { background: rgba(46,125,50,.12); color: #2e7d32; box-shadow: 0 0 0 3px rgba(46,125,50,.25); } #ln-chat-box.ln-v2.s2-incall #ln-panel-chat .ln-input-area, #ln-chat-box.ln-v2.s2-incall #ln-panel-chat .ln-widgets-area { display: none; } #ln-chat-box .s2-callband[hidden], #ln-chat-box .s2-callctl[hidden], #ln-chat-box .s2-voice-note[hidden] { display: none; } #ln-chat-box .s2-callband { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 16px 10px; text-align: center; background: #f6f4ef; border-bottom: 1px solid #ebe7df; font: 15px/1.3 Inter, system-ui, sans-serif; } #ln-chat-box .s2-callband b { font: 800 17px/1.2 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.3px; color: #171c1d; } #ln-chat-box .s2-callband span { min-height: 17px; font-size: 12.5px; color: #5b6570; font-variant-numeric: tabular-nums; } #ln-chat-box .s2-callctl { flex: none; display: flex; gap: 12px; padding: 12px 16px 16px; background: #f6f4ef; border-top: 1px solid #ebe7df; font: 15px/1.3 Inter, system-ui, sans-serif; } #ln-chat-box .ln-call-turn.s2-live .ln-message-content { color: #5b6570; } #ln-chat-box .s2-voice-note { margin: 0 2px 8px; font: 600 13px/1.4 Inter, system-ui, sans-serif; color: #c62f3f; } /* ═══ TALK LIVES IN THE CHAT · END ═══ */ /* V2 · no plan-email card: the plan lives in the Yard (founder 2026-09-30) */ #ln-chat-box.ln-v2 .ln-plan-card:not(.ln-signin-pill) { display: none !important; } /* the sign-in box is a plan card too: it stays (fix86) */ /* ═══ DESK · SAL V2 ON A COMPUTER (2026-09-30) · BEGIN ═══ /intelligence mounts THIS widget full screen (templates/pages/intelligence-desk.php) in the founder's layout L1, "Sal beside the screen": the phone's tabs down the left, the screen you chose in the middle, Sal's conversation docked on the right, always there. Same panels, cards, sky, sheets and chat as the phone: only the frame moves. Every selector sits under html.ln-desk-app or #ln-chat-box.ln-desk (classes only the desktop page sets), so the phone and the small widget cannot change by a pixel. Ship check: the-computer-sal-is-the-phone-sal. Under 1200 px the rail becomes an icon strip and the Sal column slides over the screen from the "Sal" button. */ html.ln-desk-app, html.ln-desk-app body { margin: 0; height: 100%; overflow: hidden; background: #f6f4ef; } html.ln-desk-app .ln-chat-launcher { display: none !important; } /* ── the frame: brand + tabs on the left, the top buttons at the top right, the screens below them ── */ #ln-chat-box.ln-desk { --desk-rail: 232px; --desk-sal: 420px; --desk-colw: 680px; --desk-top: 68px; --desk-sal-now: var(--desk-sal); position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; border: 0; border-radius: 0 !important; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none !important; transition: none; overflow: hidden; display: grid; grid-template-columns: var(--desk-rail) minmax(0, 1fr); grid-template-rows: var(--desk-top) minmax(0, 1fr); grid-template-areas: "brand top" "rail main"; background: #f6f4ef; } @media (min-width: 1600px) { #ln-chat-box.ln-desk { --desk-rail: 248px; --desk-sal: 460px; --desk-colw: 760px; } } @media (max-width: 1365.98px) { #ln-chat-box.ln-desk { --desk-rail: 208px; --desk-sal: 400px; --desk-colw: 640px; } } html.ln-desk-hide #ln-chat-box.ln-desk { --desk-sal-now: 0px; } #ln-chat-box.ln-desk > .ln-header { display: contents; } #ln-chat-box.ln-desk .ln-header-info { grid-area: brand; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 14px 16px 0 22px; background: #fff; border-right: 1px solid #ebe7df; } #ln-chat-box.ln-desk .ln-header-avatar { width: 40px; height: 40px; flex: none; } #ln-chat-box.ln-desk .ln-header-avatar img { width: 22px; height: 22px; } #ln-chat-box.ln-desk .ln-header-text { min-width: 0; } #ln-chat-box.ln-desk .ln-header-text h3 { font: 800 17px/1.2 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.3px; } #ln-chat-box.ln-desk .ln-header-role { font-size: 12.5px; white-space: nowrap; } #ln-chat-box.ln-desk .ln-header-actions { grid-area: top; justify-self: end; align-self: center; display: flex; align-items: center; gap: 8px; padding: 0 22px; } #ln-chat-box.ln-desk .ln-header-btn { height: 38px; min-width: 38px; border-radius: 12px; font-family: Inter, system-ui, sans-serif; } #ln-chat-box.ln-desk .ln-header-btn:focus-visible, #ln-chat-box.ln-desk .ln-nav-item:focus-visible { outline: 2px solid #2e7d32; outline-offset: 2px; } /* the widget's close would hide the whole page and its expand would shrink it: here one control, with its word */ #ln-chat-box.ln-desk #ln-close-btn { display: none; } #ln-chat-box.ln-desk #ln-fullscreen-btn { width: auto; padding: 0 14px 0 12px; gap: 7px; font: 700 13px/1 Inter, system-ui, sans-serif; } #ln-chat-box.ln-desk #ln-fullscreen-btn::after { content: "Minimize"; } /* the "Sal" button: shows or hides the conversation column (under 1200 px: slides it over the screen) */ #ln-chat-box.ln-desk #ln-desk-sal { width: auto; padding: 0 13px 0 11px; gap: 7px; font: 700 13px/1 Inter, system-ui, sans-serif; } #ln-chat-box.ln-desk #ln-desk-sal svg { width: 17px; height: 17px; } #ln-chat-box.ln-desk #ln-desk-sal[aria-expanded="true"] { background: rgba(46,125,50,.12); color: #2e7d32; } /* the account pill: the initial in a circle, never a padlock (founder 2026-09-29) */ #ln-chat-box.ln-desk #ln-account-btn { padding: 0 13px 0 7px !important; gap: 8px !important; font: 600 13px/1 Inter, system-ui, sans-serif; } #ln-chat-box.ln-desk #ln-account-btn > svg { display: none; } #ln-chat-box.ln-desk .ln-desk-initial { order: -1; width: 26px; height: 26px; flex: none; border-radius: 50%; background: #2e7d32; color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 800 13px/1 'Plus Jakarta Sans', Inter, sans-serif; } #ln-chat-box.ln-desk .ln-desk-initial svg { width: 15px; height: 15px; display: block; } #ln-chat-box.ln-desk #ln-account-btn[data-signin] .ln-desk-initial { background: #fff; color: #5b6570; box-shadow: inset 0 0 0 1.5px #cfc9bd; } /* "New conversation" belongs to the conversation: shown while the column shows it */ html.ln-desk-app #ln-chat-box.ln-desk #ln-reset-btn { display: flex; } html.ln-desk-app.ln-desk-hide #ln-chat-box.ln-desk #ln-reset-btn { display: none; } /* a call runs in the Sal column (the composer's voice button): the Sal button carries a live dot while it lasts */ html.ln-desk-incall #ln-chat-box.ln-desk #ln-desk-sal::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3ecf5a; box-shadow: 0 0 0 3px rgba(62,207,90,.2); } /* ── the rail: the phone's own tabs, the same green for the screen in the middle ── */ #ln-chat-box.ln-desk > .ln-navbar { grid-area: rail; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 4px; min-height: 0; padding: 14px 14px 18px; margin: 0; border: 0; border-right: 1px solid #ebe7df; background: #fff; overflow-y: auto; } #ln-chat-box.ln-desk .ln-navbar .ln-nav-item { flex: none; flex-direction: row; justify-content: flex-start; align-items: center; gap: 13px; min-height: 48px; padding: 0 16px; border-radius: 14px; color: #6b7480; background: transparent; } #ln-chat-box.ln-desk .ln-navbar .ln-nav-item span { font: 700 15px/1.2 'Plus Jakarta Sans', Inter, sans-serif; } #ln-chat-box.ln-desk .ln-navbar .ln-nav-item svg { width: 22px; height: 22px; } #ln-chat-box.ln-desk .ln-navbar .ln-nav-item:hover { background: #f1eee7; color: #39434d; } /* .active is the widget's one-panel pointer; on a computer two things are on screen, so the rail reads these instead */ #ln-chat-box.ln-desk .ln-navbar .ln-nav-item.active { background: transparent; color: #6b7480; } #ln-chat-box.ln-desk .ln-navbar .ln-nav-item.active::after { display: none; } #ln-chat-box.ln-desk .ln-navbar .ln-nav-item.ln-desk-on { color: #2e7d32; } #ln-chat-box.ln-desk .ln-navbar .ln-nav-item.ln-desk-on::before { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #3ecf5a; box-shadow: 0 0 0 3px rgba(62,207,90,.18); } #ln-chat-box.ln-desk .ln-navbar .ln-nav-item.ln-desk-cur { background: rgba(46,125,50,.1); color: #2e7d32; } #ln-chat-box.ln-desk .ln-navbar .ln-nav-item.ln-desk-cur::after { content: ""; display: block; position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px; height: auto; transform: none; border-radius: 0 3px 3px 0; background: #2e7d32; } #ln-chat-box.ln-desk > .s2-callbar { display: none !important; } /* the call runs in the Sal column, always on screen: no pill */ /* ── the screens: who is on screen is decided by the desk classes, not by .active ── */ #ln-chat-box.ln-desk > .ln-panels { grid-area: main; position: relative; overflow: hidden; min-width: 0; min-height: 0; container-type: normal; background: #f6f4ef; } #ln-chat-box.ln-desk .ln-panels > .ln-panel { inset: 0 var(--desk-sal-now) 0 0; opacity: 0; visibility: hidden; transition: none; } #ln-chat-box.ln-desk .ln-panels > .ln-panel.ln-desk-mid, #ln-chat-box.ln-desk .ln-panels > .ln-panel.ln-desk-side { opacity: 1; visibility: visible; } #ln-chat-box.ln-desk .ln-panels > #ln-panel-chat { left: auto; right: 0; width: var(--desk-sal); border-left: 1px solid #ebe7df; background: #f6f4ef; z-index: 2; } html.ln-desk-hide #ln-chat-box.ln-desk .ln-panels > .ln-panel.ln-desk-side { opacity: 0; visibility: hidden; } /* the phone-height trims (sal-v2.css @media max-height; the @container ones are off above) never apply on a computer */ #ln-chat-box.ln-desk .s2-keep .s2-keep-p, #ln-chat-box.ln-desk .s2-today .s2-ask p { display: block; } #ln-chat-box.ln-desk .s2-keep .s2-row .k small { display: block; } #ln-chat-box.ln-desk .s2-sky.compact .s2-conds { display: grid; } #ln-chat-box.ln-desk .s2-today.s2-out .s2-keep .s2-rows { display: flex; } /* one screen, centred in the middle, the phone's sizes a notch up for reading distance */ #ln-chat-box.ln-desk .ln-panel.s2 .s2-body { width: 100%; max-width: var(--desk-colw); margin: 0 auto; padding: 22px 28px 64px; } #ln-chat-box.ln-desk .s2-today .s2-body, #ln-chat-box.ln-desk .s2-score .s2-body { display: block; } #ln-chat-box.ln-desk .s2-title { font-size: 30px; letter-spacing: -.7px; } #ln-chat-box.ln-desk .s2-sub { font-size: 14.5px; } #ln-chat-box.ln-desk .s2-sec { margin-top: 26px; } #ln-chat-box.ln-desk .s2-sec b { font-size: 19px; } #ln-chat-box.ln-desk .s2-sky { min-height: 0; padding: 20px 26px 0; border-radius: 26px; } #ln-chat-box.ln-desk .s2-sky-top { font-size: 13px; } #ln-chat-box.ln-desk .s2-hello { font-size: 14.5px; margin-top: 14px; } #ln-chat-box.ln-desk .s2-sentence { font-size: 38px; letter-spacing: -1px; max-width: 470px; } #ln-chat-box.ln-desk .s2-sky.compact .s2-sentence { font-size: 34px; margin-top: 12px; } #ln-chat-box.ln-desk .s2-why { font-size: 14.5px; max-width: 470px; } #ln-chat-box.ln-desk .s2-vchip { font-size: 14px; padding: 8px 13px 8px 10px; } #ln-chat-box.ln-desk .s2-conds { margin: 18px -26px 0; padding: 12px 26px 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); } #ln-chat-box.ln-desk .s2-conds b { font-size: 16px; } #ln-chat-box.ln-desk .s2-sky.compact .s2-conds { margin-top: 18px; padding-top: 12px; padding-bottom: 30px; } #ln-chat-box.ln-desk .s2-sky .wx .sun { right: 34px; top: 38px; width: 74px; height: 74px; } #ln-chat-box.ln-desk .s2-sky .wx .moon, #ln-chat-box.ln-desk .s2-sky.compact .wx .moon { right: 38px; top: 44px; width: 64px; height: 64px; } #ln-chat-box.ln-desk .wx .cloud { animation-name: s2deskdrift; } #ln-chat-box.ln-desk .wx .streak { animation-name: s2deskgust; } @keyframes s2deskdrift { from { transform: translateX(-180px); } to { transform: translateX(820px); } } @keyframes s2deskgust { 0% { opacity: 0; transform: translateX(-140px); } 15% { opacity: .9; } 70% { opacity: .6; } 100% { opacity: 0; transform: translateX(820px); } } #ln-chat-box.ln-desk .s2-lawn { height: 26px; } #ln-chat-box.ln-desk .s2-pcard b { font-size: 20px; } #ln-chat-box.ln-desk .s2-today .s2-ask, #ln-chat-box.ln-desk .s2-today .s2-keep { margin-top: 14px; padding: 18px 20px; } #ln-chat-box.ln-desk .s2-today .s2-ask .h, #ln-chat-box.ln-desk .s2-keep h3 { font-size: 20px; } #ln-chat-box.ln-desk .s2-today .s2-ask p, #ln-chat-box.ln-desk .s2-keep .s2-keep-p { font-size: 14.5px; } #ln-chat-box.ln-desk .s2-keep .s2-row { min-height: 38px; } #ln-chat-box.ln-desk .s2-keep .s2-row .k { font-size: 14.5px; } /* signed out, Today is packed from the top on a computer (the phone stretches it to its own height) */ #ln-chat-box.ln-desk .s2-today.s2-out .s2-body { flex: 0 0 auto; display: block; } #ln-chat-box.ln-desk .s2-today.s2-out .s2-sky { min-height: 0; } #ln-chat-box.ln-desk .s2-today.s2-out .s2-keep { flex: 0 0 auto; } #ln-chat-box.ln-desk .s2-today.s2-out .s2-keep .s2-rows { flex: 0 0 auto; flex-direction: column; justify-content: flex-start; gap: 4px; margin: 10px 0 6px; } #ln-chat-box.ln-desk .s2-weeds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #ln-chat-box.ln-desk .s2-weed { min-height: 200px; } #ln-chat-box.ln-desk .s2-tmap { height: 170px; } /* big screens: repeated items gain columns (the weed photos, the shortcuts, the tools); the sky, rows and forms never widen */ @media (min-width: 1600px) { #ln-chat-box.ln-desk .s2-weeds, #ln-chat-box.ln-desk .s2-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } #ln-chat-box.ln-desk .s2-weed { min-height: 190px; } } /* ── the Sal column: the phone's own conversation, docked on the right ── */ /* a computer has the height: the conditions strip stays open above the conversation (the phone folds it after a message) */ #ln-chat-box.ln-desk .ln-widgets-area.collapsed .ln-widgets-collapsed { display: none; } #ln-chat-box.ln-desk .ln-widgets-area.collapsed .ln-widgets-expanded { display: block; } #ln-chat-box.ln-desk .ln-widgets-area.animating .ln-widgets-expanded { animation: none; } #ln-chat-box.ln-desk #ln-panel-chat .ln-messages { padding: 16px 20px 22px; } #ln-chat-box.ln-desk #ln-panel-chat .ln-input-area { padding: 12px 18px 16px; } #ln-chat-box.ln-desk #ln-panel-chat .ln-ai-disclosure { margin-bottom: 0; } #ln-chat-box.ln-desk #ln-panel-chat .ln-voice-controls { padding-left: 18px; padding-right: 18px; } #ln-chat-box.ln-desk .s2-callband { padding: 16px 18px 12px; } #ln-chat-box.ln-desk > #ln-scroll-pill { grid-area: main; left: auto; right: calc(var(--desk-sal) / 2); bottom: 132px; transform: translateX(50%) translateY(10px); } #ln-chat-box.ln-desk > #ln-scroll-pill.ln-visible { transform: translateX(50%) translateY(0); } html.ln-desk-hide #ln-chat-box.ln-desk > #ln-scroll-pill { display: none; } /* ── sheets are centred cards over the whole app; the video and the toast follow ── */ #ln-chat-box.ln-desk .s2-scrim { position: fixed; inset: 0; z-index: 60; } #ln-chat-box.ln-desk .s2-sheet { position: fixed; left: 50%; top: 50%; right: auto; bottom: auto; z-index: 61; width: min(460px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow-y: auto; transform: translate(-50%, -50%); border-radius: 24px; padding: 22px 26px 26px; box-shadow: 0 30px 80px -30px rgba(12,16,18,.55); } #ln-chat-box.ln-desk .s2-sheet .grab { display: none; } #ln-chat-box.ln-desk .s2-sheet.on { animation: s2deskpop .18s ease-out; } @keyframes s2deskpop { from { opacity: 0; transform: translate(-50%, -47%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } #ln-chat-box.ln-desk .s2-sheet h4 { padding-right: 44px; } #ln-chat-box.ln-desk .s2-si { padding: 22px 26px 26px; } #ln-chat-box.ln-desk .s2-toast { left: calc((100% - var(--desk-sal-now)) / 2); bottom: 40px; z-index: 63; } #ln-chat-box.ln-desk .s2-player { position: fixed; inset: 0; z-index: 62; background: rgba(12,16,18,.8); } #ln-chat-box.ln-desk .s2-player.on { display: grid; place-content: center; grid-template-columns: auto; padding: 32px; } #ln-chat-box.ln-desk .s2-player video { flex: none; display: block; width: auto; height: auto; min-width: 320px; min-height: 0; max-width: min(1100px, calc(100vw - 96px)); max-height: calc(100vh - 150px); border-radius: 18px 18px 0 0; background: #000; } #ln-chat-box.ln-desk .s2-player .pbar { background: #0b0e10; border-radius: 0 0 18px 18px; padding: 12px 16px; } /* the account sheet (the pill's): who is signed in, the yard, Sign out */ #ln-chat-box.ln-desk .s2-acct-id { display: flex; align-items: center; gap: 14px; padding-right: 44px; } #ln-chat-box.ln-desk .s2-acct-av { width: 46px; height: 46px; flex: none; border-radius: 50%; background: #2e7d32; color: #fff; display: flex; align-items: center; justify-content: center; font: 800 20px/1 'Plus Jakarta Sans', Inter, sans-serif; } #ln-chat-box.ln-desk .s2-acct-who { margin: 0; font: 600 15.5px/1.4 Inter, system-ui, sans-serif; color: #171c1d; overflow-wrap: anywhere; } #ln-chat-box.ln-desk .s2-acct-who b { font-weight: 800; } #ln-chat-box.ln-desk .s2-acct-who span { color: #5b6570; font-weight: 500; } #ln-chat-box.ln-desk .s2-acct .acts { margin-top: 20px; } #ln-chat-box.ln-desk .s2-desk-out { margin-top: 18px; text-align: center; overflow-wrap: anywhere; } #ln-chat-box.ln-desk .s2-desk-out .s2-link { min-height: 32px; font-size: 12.5px; padding: 0 2px; } /* ── under 1200 px: an icon strip, one screen, and Sal slides over it from the "Sal" button ── */ @media (max-width: 1199.98px) { #ln-chat-box.ln-desk { --desk-rail: 92px; --desk-sal: min(420px, calc(100vw - 92px)); --desk-sal-now: 0px; } #ln-chat-box.ln-desk .ln-header-info { justify-content: center; padding: 14px 0 0; } #ln-chat-box.ln-desk .ln-header-text { display: none; } #ln-chat-box.ln-desk > .ln-navbar { padding: 14px 10px 18px; } #ln-chat-box.ln-desk .ln-navbar .ln-nav-item { flex-direction: column; justify-content: center; gap: 5px; min-height: 64px; padding: 8px 2px; } #ln-chat-box.ln-desk .ln-navbar .ln-nav-item span { font-size: 11.5px; } #ln-chat-box.ln-desk .ln-navbar .ln-nav-item.ln-desk-cur::after { display: none; } #ln-chat-box.ln-desk .ln-navbar .ln-nav-item.ln-desk-on::before { right: 12px; top: 10px; margin-top: 0; } #ln-chat-box.ln-desk .ln-panels > .ln-panel.ln-desk-side { opacity: 1; visibility: hidden; transform: translateX(100%); box-shadow: -24px 0 60px -30px rgba(12,16,18,.45); transition: transform .22s ease, visibility 0s linear .22s; } html.ln-desk-drawer #ln-chat-box.ln-desk .ln-panels > .ln-panel.ln-desk-side { visibility: visible; transform: none; transition: transform .22s ease; } html.ln-desk-app:not(.ln-desk-drawer) #ln-chat-box.ln-desk #ln-reset-btn, html.ln-desk-app:not(.ln-desk-drawer) #ln-chat-box.ln-desk > #ln-scroll-pill { display: none; } } @media (prefers-reduced-motion: reduce) { #ln-chat-box.ln-desk .s2-sheet.on { animation: none; } #ln-chat-box.ln-desk .ln-panels > .ln-panel.ln-desk-side { transition: none !important; } } /* desk · Today breathes to fill the window, never scrolls (founder 2026-09-30) */ /* the whole screen is the canvas: the body is at least the panel's height, and every gap and size follows the window height */ #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-body { min-height: 100%; padding-top: clamp(14px, 3.2vh, 36px); padding-bottom: clamp(12px, 3vh, 34px); } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-sec { margin-top: clamp(12px, 3vh, 34px); } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-sky { padding: clamp(14px, 2.6vh, 28px) 26px 0; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-hello { margin-top: clamp(4px, 1.2vh, 14px); } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-sky .s2-sentence, #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-sky.compact .s2-sentence { font-size: clamp(28px, 4.4vh, 44px); } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-sky .s2-conds { padding-top: clamp(8px, 1.8vh, 18px); padding-bottom: clamp(10px, 2vh, 20px); } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-path .prow { min-height: clamp(32px, 5.4vh, 56px); padding: 2px 2px; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-path .dot { top: calc(clamp(32px, 5.4vh, 56px) / 2 - 10px); } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-pcard { padding: clamp(12px, 2vh, 20px) 16px; margin: clamp(2px, .8vh, 10px) 0 clamp(4px, 1vh, 12px); } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-ring .rw, #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-ring svg { width: clamp(54px, 12vh, 124px); height: clamp(54px, 12vh, 124px); } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-ring .rv { font-size: clamp(16px, 3.1vh, 32px); } /* a computer is wide: below the sky, "Next up" and "This season" side by side, both reaching the bottom of the window */ #ln-chat-box.ln-desk .s2-today:not(.s2-out) .s2-body:has(> .s2-path) { max-width: 980px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(20px, 2.2vw, 32px); align-content: stretch; } #ln-chat-box.ln-desk .s2-today:not(.s2-out) .s2-body:has(> .s2-path) > .s2-sky { grid-column: 1 / -1; grid-row: 1; } #ln-chat-box.ln-desk .s2-today:not(.s2-out) .s2-body:has(> .s2-path) > .s2-sec:has(+ .s2-path) { grid-column: 1; grid-row: 2; } #ln-chat-box.ln-desk .s2-today:not(.s2-out) .s2-body:has(> .s2-path) > .s2-path { grid-column: 1; grid-row: 3; align-self: start; } #ln-chat-box.ln-desk .s2-today:not(.s2-out) .s2-body:has(> .s2-path) > .s2-sec:has(+ .s2-card) { grid-column: 2; grid-row: 2; } #ln-chat-box.ln-desk .s2-today:not(.s2-out) .s2-body:has(> .s2-path) > .s2-card { grid-column: 2; grid-row: 3; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1.6vh, 18px); } /* short laptop windows (768-820 px tall): the same layout, tighter, so it still never scrolls */ @media (max-height: 820px) { #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-body { padding-top: 10px; padding-bottom: 6px; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-sec { margin-top: 10px; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-sky { padding-top: 12px; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-hello { margin-top: 2px; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-sky .s2-sentence, #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-sky.compact .s2-sentence { font-size: 28px; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-sky .s2-conds { padding-top: 8px; padding-bottom: 10px; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-path .prow { min-height: 32px; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-path .dot { top: 6px; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-pcard { padding: 10px 14px; margin: 2px 0 4px; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-pcard b { font-size: 18px; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-pcard p { margin-top: 2px; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-ring .rw, #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-ring svg { width: 56px; height: 56px; } #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-ring .rv { font-size: 16px; } } /* the Shortcuts row repeats the three questions the Sal column already shows beside it */ #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-chips, #ln-chat-box.ln-desk .ln-panel.s2.s2-today .s2-sec:has(+ .s2-chips) { display: none; } /* whatever could still overflow on a very short window scrolls without a heavy bar next to the Sal column */ #ln-chat-box.ln-desk .ln-panel.s2 { scrollbar-width: thin; scrollbar-color: #d9d4c9 transparent; } /* ═══ DESK · SAL V2 ON A COMPUTER · END ═══ */ /* ── F27 (2026-09-29): the sign-in ended / the page is out of date. A banner inside the box, above sheets, toast and player, that stays until Reload is tapped (a signed-in page has no sign-in door, so Reload is the way back). ── */ #ln-chat-box .s2-stale { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 45; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--s2-ink); color: #fff; font: 600 14px/1.35 Inter, system-ui, sans-serif; box-shadow: 0 12px 28px -12px rgba(12,16,18,.55); } #ln-chat-box .s2-stale[hidden] { display: none; } #ln-chat-box .s2-stale span { flex: 1; min-width: 0; } #ln-chat-box .s2-stale .s2-btn { flex: none; min-height: 40px; padding: 0 16px; background: #fff; color: var(--s2-ink); } #ln-chat-box .s2-stale .s2-btn:hover { background: var(--s2-chip); } /* ═══ today-yard cluster (2026-09-29) ═══ */ /* F26: every weed has a card; past 8, the rest wait behind 'Show all N weeds' */ #ln-chat-box .s2-weeds.clip > .s2-weed:nth-child(n+9) { display: none; } #ln-chat-box .s2-allweeds { display: block; margin: 6px auto 0; } /* F60: the named-weed row opens its sheet, like the order row opens Orders */ #ln-chat-box .s2-path li[data-s2weed] { cursor: pointer; } /* F67: NEXT's two answers keep their equal halves when they fit, and stack when they don't (never overflow) */ #ln-chat-box #s2-next .s2-ans { flex-wrap: wrap; } /* F70: 'Download' is the row's action, green like Add / Edit */ #ln-chat-box .s2-row .v.dl { color: var(--s2-green); font-weight: 700; } /* F96: the insight's inline 'Cancel it' */ #ln-chat-box .s2-insight .s2-cilink { border: 0; background: none; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--s2-green); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } #ln-chat-box .s2-insight .s2-cilink:disabled { cursor: default; } /* ═══ howto-orders cluster (2026-09-29) ═══ */ /* the rate lines carry a real space after the number now (copy/paste, screen readers): that space is the gap, the look stays */ #ln-chat-box .s2-rate .line strong { margin-right: 0; } /* an earlier order with a tracking number opens the carrier's page: its chevron says so */ #ln-chat-box .s2-orders a.s2-row .chev { width: 18px; height: 18px; flex: none; } /* ═══ layout-type cluster (2026-09-29) ═══ */ /* F7 · the floating box never runs off the top of a short laptop window: chat.css parks it 96px above the bottom, 16 more stay clear at the top; the panels scroll and Today's container queries fold the rest */ @media (min-width: 481px) { #ln-chat-box.ln-v2:not(.ln-fullscreen) { max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); } } /* F16 · Yard details: the label keeps its width; a long value wraps in its own column beside the button */ #ln-chat-box .s2-row:has(> .s2-add[data-s2detail]) > .k { flex: 0 0 auto; min-width: 84px; } #ln-chat-box .s2-row:has(> .s2-add[data-s2detail]) > .v { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; text-align: right; } #ln-chat-box .s2-row:has(> .s2-add[data-s2detail]) > .s2-add { margin-left: auto; flex: none; } /* F39 · a long weed name wraps inside its sheet button */ #ln-chat-box .s2-sheet .acts .s2-btn { white-space: normal; text-align: center; line-height: 1.25; padding: 10px 16px; } /* F50 · the thumbs row under each reply records nothing: no dead 24px gap (the live chat's row is in the V2 launch bundle) */ #ln-chat-box.ln-v2 .ln-message-feedback { display: none; } /* F73 · a toast wraps onto a second line instead of losing its end */ #ln-chat-box .s2-toast { white-space: normal; width: max-content; max-width: calc(100% - 32px); border-radius: 18px; line-height: 1.3; text-align: center; text-wrap: balance; overflow: visible; text-overflow: clip; } /* F74 · on a lesson, or over a sheet too tall to clear, sal-v2.js puts it at the top: it slides down from there */ #ln-chat-box .s2-toast.at-top { transform: translate(-50%, -20px); } #ln-chat-box .s2-toast.at-top.on { transform: translate(-50%, 0); } /* F75 · two buttons share a row while they fit, wrap their words, then stack */ #ln-chat-box .s2-ans { flex-wrap: wrap; } #ln-chat-box .s2-ans .s2-btn { flex: 1 1 130px; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; } /* F78 · small grey text at 4.5:1 or better (the words on the sky belong to the score-weather lane) */ #ln-chat-box { --s2-soft: #6b7480; } #ln-chat-box.ln-v2 .ln-nav-item { color: #6b7480; } #ln-chat-box.ln-v2 .ln-ai-disclosure, #ln-chat-box.ln-v2 .ln-message-time, #ln-chat-box.ln-v2 .ln-powered-by-welcome { color: #646c77; } #ln-chat-box.ln-v2 .ln-ai-disclosure a { color: #5b6570; } /* F79 · 44px tap targets that keep today's drawing: a transparent border is the extra reach, the background stays clipped to the old size, a negative margin keeps every neighbour where it was */ #ln-chat-box .s2-pill { border: solid transparent; border-width: 5px 0; margin: -5px 0; background-clip: padding-box; } #ln-chat-box .s2-mode button, #ln-chat-box .s2-mode button.on, #ln-chat-box .s2-game .gmode button, #ln-chat-box .s2-game .gmode button.on { border: solid transparent; border-width: 5px 0; margin: -5px 0; border-radius: 9px / 14px; background-clip: padding-box; } #ln-chat-box .s2-game .gmode button.on { box-shadow: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.08)); } #ln-chat-box .s2-carrier button, #ln-chat-box .s2-carrier a { width: 44px; height: 44px; border: 4px solid transparent; margin: -4px; border-radius: 14px; background-clip: padding-box; } #ln-chat-box .s2-add { min-width: 44px; } #ln-chat-box.ln-v2 .ln-ai-disclosure a { display: inline-block; padding: 6px 2px 8px; margin: -6px -2px -8px; } /* F81 · larger text: the dial's words shrink to fit it (sal-v2.js sets --s2-fit; 21px = F33's size) */ #ln-chat-box .s2-dial .zone { font-size: calc(var(--s2-fit, 1) * 21px); } /* F81 + fix86 regression 4 · the tracking number reads in full on ONE line at every width and text size: never "…", never split. It gets its own line under the carrier's name, as wide as the card (the logo beside both, the buttons beside the name). Still plain text: it can be selected, and the copy button copies it. */ #ln-chat-box .s2-carrier { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 2px; align-items: center; } #ln-chat-box .s2-carrier .logo { grid-column: 1; grid-row: 1 / span 2; } #ln-chat-box .s2-carrier .ct { display: contents; } #ln-chat-box .s2-carrier .ct b { grid-column: 2; grid-row: 1; min-width: 0; } #ln-chat-box .s2-carrier .ct span { grid-column: 2 / -1; grid-row: 2; white-space: nowrap; overflow: visible; text-overflow: clip; } #ln-chat-box .s2-carrier > button { grid-column: 3; grid-row: 1; } #ln-chat-box .s2-carrier > a { grid-column: 4; grid-row: 1; } /* F82 · the composer hint stays on one line (it ends in … only if a large text size needs it) */ #ln-chat-box.ln-v2 .ln-input-field::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* F99 · no one-word last lines; the shortcut chips wrap evenly */ #ln-chat-box .s2-sheet p, #ln-chat-box .s2-scard .sub, #ln-chat-box .s2-game .gsub, #ln-chat-box .s2-step .t span { text-wrap: pretty; } #ln-chat-box .s2-chips button { text-wrap: balance; } /* F37 · the + menu lives on , outside the box: the same lettering */ html.ln-v2-app .ln-composer-popover { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* ═══ fix86 · the account, on the phone (founder 2026-09-29): the initial in a circle, the desk's sheet in the phone's ═══ */ #ln-chat-box.ln-v2 #ln-account-btn.s2-has-initial { gap: 7px; } #ln-chat-box.ln-v2 #ln-account-btn.s2-has-initial > svg { display: none; } #ln-chat-box.ln-v2 .s2-acct-initial { order: -1; width: 24px; height: 24px; flex: none; border-radius: 50%; background: #2e7d32; color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 800 12.5px/1 'Plus Jakarta Sans', Inter, sans-serif; } #ln-chat-box .s2-acct-id { display: flex; align-items: center; gap: 14px; padding-right: 44px; margin-top: 4px; } #ln-chat-box .s2-acct-av { width: 46px; height: 46px; flex: none; border-radius: 50%; background: #2e7d32; color: #fff; display: flex; align-items: center; justify-content: center; font: 800 20px/1 'Plus Jakarta Sans', Inter, sans-serif; } #ln-chat-box .s2-acct-who { margin: 0; font: 600 15.5px/1.4 Inter, system-ui, sans-serif; color: #171c1d; overflow-wrap: anywhere; } #ln-chat-box .s2-acct-who b { font-weight: 800; } #ln-chat-box .s2-acct-who span { color: #5b6570; font-weight: 500; } #ln-chat-box .s2-acct .acts { margin-top: 20px; } /* ═══ fix86 · the lesson video and the player (founder 2026-09-30) ═══ */ /* lesson 1's video is a card you cannot miss (How to's feature card): the poster cropped on the plant, a big play, 1:11 */ #ln-chat-box .s2-lfeature { margin-top: 12px; } #ln-chat-box .s2-lfeature .poster { aspect-ratio: auto; height: 220px; background-color: #f3e2c6; background-repeat: no-repeat; background-size: 573px auto; background-position: calc(50% + 34px) 50%; } #ln-chat-box .s2-lfeature .play { width: 64px; height: 64px; margin: -32px 0 0 -32px; box-shadow: 0 6px 18px rgba(0,0,0,.28); } #ln-chat-box .s2-lfeature .play svg { width: 26px; height: 26px; } #ln-chat-box .s2-lfeature .meta b { font-size: 18px; margin-top: 0; } #ln-chat-box .s2-lfeature:focus-visible { outline: 3px solid var(--s2-green); outline-offset: 3px; } /* the player: the video fills it, black around it; one round × at the top right (no bottom bar) */ #ln-chat-box .s2-player { background: #000; } #ln-chat-box .s2-player .s2-pclose { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); z-index: 2; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(12,16,18,.6); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } #ln-chat-box .s2-player .s2-pclose svg { width: 20px; height: 20px; } #ln-chat-box .s2-player .s2-pclose:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } #ln-chat-box .s2-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* on a computer (the desk) the player is the page's overlay: every corner of the video is round now the bar is gone */ html.ln-desk-app #ln-chat-box.ln-desk .s2-player video { border-radius: 18px; } /* ═══ 11 · the shower test's sound button (founder 2026-09-30: a little game music while you hold) ═══ */ #ln-chat-box #s2-shower, #ln-chat-box #s2-order { position: relative; } #ln-chat-box #s2-shower > h5, #ln-chat-box #s2-shower > .gsub, #ln-chat-box #s2-order > h5, #ln-chat-box #s2-order > .gsub { padding-right: 46px; } /* the title and its line keep clear of the button */ #ln-chat-box .s2-game .s2-sfx { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--s2-chip); color: var(--s2-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; } #ln-chat-box .s2-game .s2-sfx svg { width: 19px; height: 19px; } #ln-chat-box .s2-game .s2-sfx.off { color: #8a939b; } #ln-chat-box .s2-game .s2-sfx:focus-visible { outline: 2px solid var(--s2-green); outline-offset: 2px; } /* ═══ 12 · the 3 steps, rebuilt (founder 2026-09-30): let it work closes step 2; step 3 = go all out, then take the ground back ═══ */ #ln-chat-box .s2 .s3 { background: #2e7d32; } #ln-chat-box #s2-wait { margin-top: 20px; } #ln-chat-box .s2-game svg.s2-ord { display: block; width: 100%; max-width: none; height: auto; max-height: none; margin-top: 12px; } #ln-chat-box .s2-ord g { transition: opacity .5s ease; } #ln-chat-box .s2-ord .w-dead, #ln-chat-box .s2-ord .bare, #ln-chat-box .s2-ord .seeds, #ln-chat-box .s2-ord .drops, #ln-chat-box .s2-ord .sprouts { opacity: 0; } #ln-chat-box .s2-ord:not([data-st="0"]) .w-live { opacity: 0; } #ln-chat-box .s2-ord[data-st="1"] .w-dead { opacity: 1; } #ln-chat-box .s2-ord[data-st="2"] .bare, #ln-chat-box .s2-ord[data-st="3"] .bare, #ln-chat-box .s2-ord[data-st="3"] .seeds { opacity: 1; } #ln-chat-box .s2-ord[data-st="4"] .bare { opacity: .55; } #ln-chat-box .s2-ord[data-st="4"] .drops, #ln-chat-box .s2-ord[data-st="4"] .sprouts { opacity: 1; } #ln-chat-box .s2-ord .drops path { opacity: 0; } #ln-chat-box .s2-ord[data-st="4"] .drops path { animation: s2drop 1s ease-in 2 both; } @keyframes s2drop { 0% { opacity: 0; transform: translateY(-12px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(18px); } } #ln-chat-box .s2-ord .sprouts path { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.08); transition: transform 1s ease .6s; } #ln-chat-box .s2-ord[data-st="4"] .sprouts path { transform: scaleY(1); } #ln-chat-box .s2-game .opts2.ord button { display: flex; align-items: center; gap: 10px; } #ln-chat-box .s2-game .opts2.ord button .on { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--s2-green); color: #fff; font: 800 13px/24px Inter, sans-serif; text-align: center; } #ln-chat-box .s2-game .opts2.ord button:disabled { opacity: 1; cursor: default; color: var(--s2-ink); } #ln-chat-box .s2-game .opts2.ord button.wrong { animation: s2shake .32s ease; } @keyframes s2shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @media (prefers-reduced-motion: reduce) { #ln-chat-box .s2-ord *, #ln-chat-box .s2-game .opts2.ord button { animation: none !important; transition: none !important; } } /* ═══ TALK · SKY AND GROUND (2026-09-30) · the call without an orb · BEGIN ═══ Founder 2026-09-30: "kill the orb". Direction E: no object on screen. Sal's light comes down from the top of the chat, the customer's rises from the bottom (#s2-callsky: a canvas layer under the call, drawn by sal-v2.js, TALKSKY), and a thin horizon line in the call band (#s2-hz, where the orb was, at the orb's own heights) bends up for Sal and down for the customer. While a call is on (.s2-incall) the chat panel isolates its layers and the band, the thread and the call controls let the light through; nothing in the layout moves. The pill on the other tabs carries the same line, small. V2 only. The computer keeps its taller band (scoped to #ln-chat-box.ln-desk). Ship check: talk-v2-one-call-machine. */ #ln-chat-box .s2-callsky { display: none; } #ln-chat-box.ln-v2.s2-incall #ln-panel-chat { isolation: isolate; } #ln-chat-box.ln-v2.s2-incall #ln-panel-chat > .s2-callsky { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } #ln-chat-box .s2-callsky canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; max-width: none; max-height: none; } #ln-chat-box.ln-v2.s2-incall #ln-panel-chat .ln-messages, #ln-chat-box.ln-v2.s2-incall #ln-panel-chat .s2-callband, #ln-chat-box.ln-v2.s2-incall #ln-panel-chat .s2-callctl { background: transparent; } #ln-chat-box #s2-hz { width: 100%; height: 96px; display: block; max-width: none; max-height: none; } #ln-chat-box #s2-hz-mini { width: 40px; height: 28px; flex: none; display: block; max-width: none; max-height: none; } @container (max-height: 540px) { #ln-chat-box #s2-hz { height: 64px; } } #ln-chat-box.ln-desk #s2-hz { height: 112px; } /* ═══ TALK · SKY AND GROUND · END ═══ */ /* ═══ 14 · the call is one seamless sky on the phone (founder 2026-09-30: "remove the line separation... it's cutting off the green logo") ═══ */ #ln-chat-box.ln-v2.s2-incall:not(.s2-not-chat):not(.ln-desk) { isolation: isolate; } #ln-chat-box.ln-v2.s2-incall:not(.s2-not-chat):not(.ln-desk) > .s2-callsky { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 64px; z-index: -1; overflow: hidden; pointer-events: none; background: #f6f4ef; border-radius: inherit; } #ln-chat-box.ln-v2.s2-incall:not(.s2-not-chat):not(.ln-desk) > .ln-header { background: transparent; border-bottom-color: transparent; box-shadow: none; } #ln-chat-box.ln-v2.s2-incall:not(.s2-not-chat):not(.ln-desk) > .ln-panels, #ln-chat-box.ln-v2.s2-incall:not(.s2-not-chat):not(.ln-desk) #ln-panel-chat, #ln-chat-box.ln-v2.s2-incall:not(.s2-not-chat):not(.ln-desk) .ln-chat-panel { background: transparent; } #ln-chat-box.ln-v2.s2-incall #ln-panel-chat .s2-callband { border-bottom-color: transparent; } #ln-chat-box.ln-v2.s2-incall #ln-panel-chat .s2-callctl { border-top-color: transparent; } /* ═══ 16 · spray windows (founder 2026-09-30): the next 7 days, morning and afternoon, under the score ═══ */ #ln-chat-box .s2-sky .s2-chiprow { flex-wrap: wrap; } #ln-chat-box .s2-winchip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.17); color: #fff; font: 600 13px/1.2 Inter, sans-serif; cursor: pointer; } #ln-chat-box .s2-winchip b { font-weight: 800; } #ln-chat-box .s2-win { padding: 14px 12px 12px; } #ln-chat-box .s2-win .wgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } #ln-chat-box .s2-win .wday { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 0 10px; border: 0; border-radius: 14px; background: var(--s2-chip); cursor: pointer; font: 700 12px/1 Inter, sans-serif; color: var(--s2-ink); min-width: 0; } #ln-chat-box .s2-win .wday.sel { background: #fff; box-shadow: inset 0 0 0 2px var(--s2-ink); } #ln-chat-box .s2-win .wday.far { opacity: .6; } #ln-chat-box .s2-win i { display: block; width: 14px; height: 14px; border-radius: 50%; flex: none; } #ln-chat-box .s2-win .z-green { background: #2e9e4f; } #ln-chat-box .s2-win .z-yellow { background: #f2b01e; } #ln-chat-box .s2-win .z-red { background: #e5534b; } #ln-chat-box .s2-win .z-past, #ln-chat-box .s2-win .z-none { background: transparent; box-shadow: inset 0 0 0 2px #d6d0c4; } #ln-chat-box .s2-win .wkey { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 12px; color: var(--s2-muted); } #ln-chat-box .s2-win .wkey span { display: inline-flex; align-items: center; gap: 5px; } #ln-chat-box .s2-win .wkey i { width: 10px; height: 10px; } #ln-chat-box .s2-win .wbest { margin-top: 12px; font-size: 15px; color: var(--s2-ink); } #ln-chat-box .s2-win .wdet { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: #2b3238; } #ln-chat-box .s2-win .wfine { margin: 10px 0 0; font-size: 12px; color: var(--s2-muted); } /* ═══ 17 · How to opens on the welcome video (founder approved 2026-09-30): its 9:16 poster, framed on Hank and the bag ═══ */ #ln-chat-box .s2-feature[data-s2video="howto"] .poster { background-image: url('/cdn-cgi/image/format=auto,quality=82,width=720/assets/media/videos/welcome-card-9x16-poster.jpg'); background-position: center 29%; } /* ═══ 19 · spray windows: one dot per day (founder 2026-09-30: "why just not one dot?") ═══ */ #ln-chat-box .s2-win .wday { gap: 8px; padding: 10px 0 12px; } #ln-chat-box .s2-win .wday i { width: 18px; height: 18px; } /* ═══ 21 · the lesson title block, tight and centered (founder 2026-09-30) ═══ */ #ln-chat-box .s2-lhero { min-height: 92px; padding: 16px 104px 16px 20px; justify-content: center; } #ln-chat-box .s2-lhero b { max-width: none; } #ln-chat-box .s2-lhero .art { top: 50%; right: 14px; width: 76px; height: 76px; transform: translateY(-50%); } #ln-chat-box .s2-lhero .art svg { width: 76px; height: 76px; } /* ═══ 22 · lesson 2's video (founder approved 2026-10-01): its poster framed on the balance dial ═══ */ #ln-chat-box .s2-lfeature[data-s2video="test1"] .poster { background-size: 372px auto; background-position: 50% 45%; } /* ═══ 27 · the computer page's Minimize keeps its label (founder 2026-10-01: "got squished"): outranks the 40 px header-button rule ═══ */ html.ln-desk-app #ln-chat-box.ln-desk #ln-fullscreen-btn { width: auto; } /* Sal's app buttons in a reply (2026-09-29), and no plan email in the app (todo #340) */ #ln-chat-box.ln-v2 .s2-act { margin-top: 10px; } #ln-chat-box.ln-v2 a.s2-act { text-decoration: none; display: inline-flex; align-items: center; } /* a site page as a button */ html.ln-v2-app #ln-popover-recap { display: none !important; } /* ═══ 29 · signed in: one smooth step (founder 2026-10-01) ═══ */ .s2-welcome { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; background: #f6f4ef; opacity: 0; transition: opacity .2s ease; } .s2-welcome.on { opacity: 1; } .s2-welcome-in { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 28px; max-width: 440px; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } .s2-welcome-check svg { display: block; width: 64px; height: 64px; } .s2-welcome-check circle { fill: #2e7d32; } .s2-welcome-check path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: s2-welcome-draw .42s .1s ease-out forwards; } .s2-welcome-in b { display: block; margin: 18px 0 0; font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 800; font-size: 25px; line-height: 1.2; letter-spacing: -.01em; color: #171c1d; } .s2-welcome-in p { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: #5b6570; } .s2-welcome-bar { display: block; width: 132px; height: 4px; margin-top: 24px; border-radius: 2px; background: #ebe7df; overflow: hidden; } .s2-welcome-bar i { display: block; width: 0; height: 100%; border-radius: 2px; background: #2e7d32; animation: s2-welcome-fill .95s ease-in-out forwards; } @keyframes s2-welcome-draw { to { stroke-dashoffset: 0; } } @keyframes s2-welcome-fill { to { width: 100%; } } @media (prefers-reduced-motion: reduce) { .s2-welcome { transition: none; } .s2-welcome-check path { animation: none; stroke-dashoffset: 0; } .s2-welcome-bar i { animation: none; width: 100%; } } /* ═══ 30, revised by 35 (founder 2026-10-01: "Why is the chat body empty?"): the welcome block hides only DURING a voice call, where the call status clipped its logo; an empty chat shows it again ═══ */ #ln-chat-box.ln-v2.s2-incall .ln-welcome { display: none !important; } /* ═══ 34 · Chat first (founder 2026-10-01): the first tab, at every width ═══ */ #ln-chat-box.ln-v2 .ln-navbar .ln-nav-item[data-tab="chat"] { order: -1; } /* ═══ 37 · the header name follows the room (founder 2026-10-01): the computer app has room for the full name ═══ */ html.ln-desk-app .ln-header-role .ln-role-long { display: inline !important; } html.ln-desk-app .ln-header-role .ln-role-short { display: none; }