/* =====================================================================
   In-phone LegalConnect app UI.
   Everything is sized in em off a container-relative root, so the same
   screens render crisply in the 3D phone and in the flat devices.
   ===================================================================== */

.screen-host { container-type: inline-size; }
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  font-size: 4.05cqw; line-height: 1.3; color: var(--text);
  background: linear-gradient(#0e0c15 0%, #0a0810 50%, #0e0c15 100%);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s;
}
.screen.is-active { opacity: 1; visibility: visible; transition: opacity .2s; }
.screen .i { stroke-width: 2.2; }

/* status bar */
.sb { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; height: 3.9em; padding: .9em 1.9em 0 2.2em; font-size: .92em; font-weight: 600; flex: none; }
.sb--over { position: absolute; top: 0; left: 0; right: 0; }
.sb__icons { display: flex; align-items: center; gap: .35em; }
.sig { width: 1.05em; height: .68em; background: linear-gradient(90deg, currentColor 0 19%, transparent 19% 27%, currentColor 27% 46%, transparent 46% 54%, currentColor 54% 73%, transparent 73% 81%, currentColor 81%); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.wifi { width: .95em; height: .7em; border-radius: 1em 1em 0 0; background: currentColor; clip-path: polygon(50% 100%, 0 20%, 100% 20%); }
.bat { position: relative; width: 1.55em; height: .72em; border-radius: .22em; border: 1px solid rgba(245, 243, 238, .5); }
.bat::before { content: ""; position: absolute; inset: 1.5px; right: 22%; border-radius: .1em; background: currentColor; }
.bat::after { content: ""; position: absolute; right: -.18em; top: 30%; width: .1em; height: 40%; border-radius: 0 1px 1px 0; background: rgba(245, 243, 238, .5); }

/* ---------- feed ---------- */
.ah { display: flex; align-items: center; gap: .7em; padding: .6em 1.3em .7em; }
.ah__av { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: linear-gradient(135deg, #ffd5b3, #e6834c); color: var(--ink); font-weight: 700; }
.ah__who { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.ah__who small { font-size: .62em; letter-spacing: .16em; color: var(--text-faint); font-weight: 600; }
.ah__who b { font-size: 1.12em; font-weight: 600; letter-spacing: -0.02em; }
.ah__bell { position: relative; display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: rgba(255, 255, 255, .05); border: 1px solid var(--border); color: rgba(255, 255, 255, .85); }
.ah__bell i { position: absolute; top: .45em; right: .5em; width: .45em; height: .45em; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 0 2px #0e0c15; }

.seg { display: flex; margin: 0 1.1em; padding: .25em; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); font-size: .86em; font-weight: 600; }
.seg span { flex: 1; text-align: center; padding: .55em; border-radius: 999px; color: var(--text-faint); }
.seg span.is-on { background: linear-gradient(120deg, rgba(230, 131, 76, .9), rgba(204, 96, 92, .85)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }

.srch { display: flex; align-items: center; gap: .55em; margin: .7em 1.1em 0; padding: .55em .6em; border-radius: .9em; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); font-size: .8em; color: var(--text-faint); }
.chip-xs { padding: .3em .6em; border-radius: .5em; background: rgba(255, 255, 255, .08); color: var(--text); font-weight: 600; font-size: .9em; }
.tools { display: flex; gap: .5em; margin: .6em 1.1em .3em; font-size: .74em; font-weight: 600; }
.tools span { display: inline-flex; align-items: center; gap: .4em; padding: .45em .75em; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, .03); }
.tools b { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--brand-2); color: #fff; font-size: .85em; }

.feed { display: flex; flex-direction: column; gap: .55em; padding: .4em 1.1em 6em; overflow: hidden; flex: 1; }
.cc { padding: .8em .9em; border-radius: 1.05em; background: var(--glass); border: 1px solid var(--border); display: flex; flex-direction: column; gap: .4em; }
.cc__top { display: flex; align-items: center; gap: .5em; }
.cc__top b { font-size: 1.02em; font-weight: 600; letter-spacing: -0.02em; flex: 1; }
.cc__chev { color: var(--text-faint); font-size: .9em; }
.cc__inst { display: flex; align-items: center; gap: .45em; font-size: .78em; color: var(--text-dim); }
.cc__inst .i { color: var(--brand-3); }
.cc__chips { display: flex; gap: .35em; flex-wrap: wrap; }
.cc__chips span { display: inline-flex; align-items: center; gap: .35em; padding: .25em .55em; border-radius: 999px; border: 1px solid var(--border-strong); font-size: .66em; color: var(--text-dim); }
.cc__by { display: flex; align-items: center; gap: .5em; font-size: .68em; color: var(--text-faint); }
.cc__by .firm { font-size: .95em; }
.cc__meta { display: flex; align-items: center; gap: .8em; font-size: .66em; color: var(--text-dim); }
.cc__meta span { display: inline-flex; align-items: center; gap: .3em; }
.cc__meta .i { color: var(--brand); }
.cc__meta .ref { margin-left: auto; font-size: .95em; }

.tabbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: flex-end; padding: .7em .6em 1.5em; background: rgba(20, 18, 29, .92); border-top: 1px solid var(--border); }
.tabbar span { display: flex; flex-direction: column; align-items: center; gap: .3em; font-size: .56em; color: rgba(255, 255, 255, .45); font-weight: 600; }
.tabbar span .i { font-size: 2.3em; }
.tabbar span.is-on { color: var(--brand); }
.tabbar__post i { display: grid; place-items: center; width: 3.8em; height: 3.8em; margin-top: -1.2em; border-radius: 50%; background: var(--grad-btn); color: var(--ink); box-shadow: 0 .6em 1.6em -.5em rgba(230, 131, 76, .8); }
.tabbar__post i .i { font-size: 1.9em; }

/* ---------- map ---------- */
.screen--map { background: #0d0b14; }
.map { position: absolute; inset: 0; }
.map__svg { width: 100%; height: 100%; }
.map__me { position: absolute; left: 47%; top: 41.5%; width: 1.1em; height: 1.1em; translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .3em var(--brand), 0 0 1.4em var(--brand); }
.map__me::after { content: ""; position: absolute; inset: -1.2em; border-radius: 50%; border: 1.5px solid var(--brand); animation: ping 2.2s var(--ease) infinite; }
.pin { position: absolute; z-index: 1; display: grid; place-items: center; width: 2.1em; height: 2.1em; translate: -50% -115%; font-size: .82em; font-weight: 700; color: var(--ink); }
.pin::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--pc); box-shadow: 0 .4em 1em rgba(0, 0, 0, .5); }
.pin--a { --pc: linear-gradient(120deg, #ffc28a, #e6834c 50%, #e64c86); width: 2.6em; height: 2.6em; z-index: 2; }
.pin--b { --pc: var(--brand-2); color: #fff; }
.pin--c { --pc: var(--brand-3); }
.map__call { position: absolute; left: 47%; top: 31%; translate: -50% calc(-100% - 3.6em); z-index: 3; display: flex; flex-direction: column; gap: .3em; padding: .6em .8em; border-radius: .9em; white-space: nowrap; background: rgba(20, 18, 29, .95); border: 1px solid var(--border-strong); box-shadow: 0 1em 2em rgba(0, 0, 0, .6); }
.map__call b { font-size: .8em; font-weight: 600; }
.map__call > span { display: flex; align-items: center; gap: .5em; font-size: .64em; color: var(--text-dim); }
.mtop { position: absolute; z-index: 3; top: 3.9em; left: 0; right: 0; padding: .4em 1.1em; display: flex; flex-direction: column; gap: .55em; }
.mtop__bar { display: flex; align-items: center; gap: .6em; padding: .7em .8em; border-radius: 1em; background: rgba(20, 18, 29, .95); border: 1px solid var(--border-strong); font-size: .86em; font-weight: 600; }
.mtop__bar span { flex: 1; }
.mtop__bar .i:last-child { color: var(--brand-3); }
.mtop__chips { display: flex; gap: .4em; }
.mtop__chips span { padding: .4em .75em; border-radius: 999px; font-size: .7em; font-weight: 600; background: rgba(20, 18, 29, .9); border: 1px solid var(--border-strong); color: var(--text-dim); }
.mtop__chips span.is-on { background: var(--grad-btn); color: var(--ink); border-color: transparent; }
.sheet { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: .7em 1.2em 1.8em; border-radius: 1.6em 1.6em 0 0; background: #14121d; border-top: 1px solid var(--border-strong); box-shadow: 0 -1em 3em rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: .45em; }
.sheet__grab { align-self: center; width: 3em; height: .3em; border-radius: 999px; background: rgba(255, 255, 255, .2); margin-bottom: .3em; }
.sheet__title { font-size: .66em; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--text-faint); margin-bottom: .2em; }
.opt { display: flex; align-items: center; gap: .7em; padding: .75em .8em; border-radius: .9em; font-size: .86em; font-weight: 600; border: 1px solid var(--border); color: var(--text-dim); }
.opt .i { color: var(--text-faint); }
.opt .radio { margin-left: auto; width: 1.2em; height: 1.2em; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.opt.is-on { color: var(--text); border-color: rgba(230, 131, 76, .5); background: var(--grad-soft); }
.opt.is-on .i { color: var(--brand-3); }
.opt.is-on .radio { border: .35em solid var(--brand); background: #fff; }
.sheet__btn, .wz__btn { margin-top: .4em; display: grid; place-items: center; height: 3.3em; border-radius: 999px; background: var(--grad-btn); color: var(--ink); font-weight: 600; font-size: .9em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

/* ---------- chat ---------- */
.ch { display: flex; align-items: center; gap: .65em; padding: .4em 1.1em .7em; border-bottom: 1px solid var(--border); }
.ch > .i:first-child { color: var(--text-dim); }
.ch__av { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: linear-gradient(135deg, #e64c86, #e6834c); font-size: .85em; font-weight: 700; color: #fff; }
.ch__who { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.ch__who b { font-weight: 600; letter-spacing: -0.01em; }
.ch__who small { font-size: .7em; color: var(--text-faint); }
.ch__more { color: var(--text-faint); }
.ctx { display: flex; align-items: center; gap: .5em; margin: .7em 1.1em .2em; padding: .55em .7em; border-radius: .8em; background: var(--grad-soft); border: 1px solid rgba(230, 131, 76, .3); font-size: .66em; color: var(--text-dim); }
.ctx span:nth-child(2) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx .ref { color: var(--brand-3); }
.ctx .bdg { font-size: .85em; }
.msgs { flex: 1; display: flex; flex-direction: column; gap: .5em; padding: .7em 1.1em; overflow: hidden; }
.msg { max-width: 80%; padding: .6em .85em; border-radius: 1.1em; font-size: .78em; line-height: 1.35; }
.msg--in { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: .3em; }
.msg--out { align-self: flex-end; background: var(--grad-btn); color: var(--ink); border-bottom-right-radius: .3em; font-weight: 500; }
.sys { align-self: center; display: inline-flex; align-items: center; gap: .4em; padding: .35em .75em; border-radius: 999px; font-size: .62em; color: var(--text-dim); background: rgba(255, 255, 255, .04); border: 1px solid var(--border); }
.sys .i { color: var(--brand-3); }
.sys--ok { color: var(--brand-3); border-color: rgba(230, 131, 76, .35); background: rgba(230, 131, 76, .08); }
.typing { align-self: flex-start; display: flex; gap: .25em; padding: .7em .85em; border-radius: 1.1em; background: var(--surface-2); }
.typing i { width: .4em; height: .4em; border-radius: 50%; background: var(--text-dim); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-.15em); } }
.cin { display: flex; align-items: center; gap: .6em; margin: 0 1.1em 1.8em; padding: .4em .4em .4em 1em; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--border-strong); font-size: .8em; color: var(--text-faint); }
.cin span { flex: 1; }
.cin i { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--grad-btn); color: var(--ink); }

/* chat messages pop in when the screen activates */
.screen--chat .msgs > * { opacity: 0; transform: translateY(.8em) scale(.97); }
.screen--chat.is-active .msgs > * { animation: msgIn .55s var(--ease) forwards; }
.screen--chat.is-active .msgs > :nth-child(1) { animation-delay: .35s; }
.screen--chat.is-active .msgs > :nth-child(2) { animation-delay: .8s; }
.screen--chat.is-active .msgs > :nth-child(3) { animation-delay: 1.4s; }
.screen--chat.is-active .msgs > :nth-child(4) { animation-delay: 2s; }
.screen--chat.is-active .msgs > :nth-child(5) { animation-delay: 2.6s; }
.screen--chat.is-active .msgs > :nth-child(6) { animation-delay: 3.2s; }
.screen--chat.is-active .msgs > :nth-child(7) { animation-delay: 3.7s; }
@keyframes msgIn { to { opacity: 1; transform: none; } }

/* ---------- post wizard ---------- */
.wz { flex: 1; display: flex; flex-direction: column; padding: .4em 1.2em 1.6em; }
.wz__head { display: flex; align-items: center; gap: .7em; }
.wz__head b { flex: 1; font-weight: 600; font-size: 1.05em; letter-spacing: -0.02em; }
.wz__head small { font-size: .68em; color: var(--text-faint); }
.wz__prog { height: .3em; margin: .9em 0 .4em; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.wz__prog i { display: block; width: 50%; height: 100%; background: var(--grad-btn); border-radius: inherit; }
.wz__lbl { margin: .9em 0 .45em; font-size: .62em; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--text-faint); }
.wz__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; }
.wz__grid span, .wz__seg span { display: flex; align-items: center; justify-content: center; gap: .3em; padding: .65em .3em; border-radius: .7em; font-size: .7em; font-weight: 600; border: 1px solid var(--border); color: var(--text-dim); background: rgba(255, 255, 255, .02); }
.wz__grid span.is-on, .wz__seg span.is-on { color: var(--text); border-color: rgba(230, 131, 76, .55); background: var(--grad-soft); }
.wz__grid span.is-on .i { color: var(--brand-3); }
.wz__seg { display: flex; gap: .35em; }
.wz__seg span { flex: 1; }
.wz__select { display: flex; align-items: center; gap: .55em; padding: .7em .8em; border-radius: .8em; border: 1px solid var(--border-strong); font-size: .78em; font-weight: 600; background: rgba(255, 255, 255, .03); }
.wz__select .i:first-child { color: var(--brand-3); }
.wz__select .i:last-child { margin-left: auto; color: var(--text-faint); }
.wz__btn { margin-top: auto; }

/* ---------- interested list ---------- */
.toast { position: absolute; z-index: 6; top: 3.4em; left: 1em; right: 1em; display: flex; align-items: center; gap: .7em; padding: .7em .8em; border-radius: 1.1em; background: rgba(28, 26, 38, .97); border: 1px solid var(--border-strong); box-shadow: 0 1em 2em rgba(0, 0, 0, .6); animation: toast 5.5s var(--ease) infinite; }
.toast > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.toast b { font-size: .8em; } .toast small { font-size: .66em; color: var(--text-faint); }
.toast__ico { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .7em; background: var(--grad-btn); color: var(--ink); }
@keyframes toast { 0%, 8% { transform: translateY(-160%); opacity: 0; } 16%, 70% { transform: none; opacity: 1; } 80%, 100% { transform: translateY(-160%); opacity: 0; } }
.it, .dn { flex: 1; display: flex; flex-direction: column; gap: .7em; padding: .6em 1.1em 1.6em; }
.it__head { display: flex; align-items: center; gap: .6em; }
.it__head .ref { flex: 1; font-size: .85em; color: var(--text); }
.it__head > .i { color: var(--text-dim); }
.it__case { display: grid; grid-template-columns: 1fr auto; gap: .3em; padding: .8em .9em; border-radius: 1em; background: var(--glass); border: 1px solid var(--border); }
.it__case b { font-weight: 600; } .it__case p { grid-column: 1 / -1; font-size: .72em; color: var(--text-dim); }
.it__lbl { display: flex; align-items: center; gap: .7em; margin-top: .3em; font-size: .64em; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); }
.it__lbl .live-dot { width: .6em; height: .6em; }
.it__list { display: flex; flex-direction: column; gap: .45em; }
.it__list li { display: flex; align-items: center; gap: .6em; padding: .6em .7em; border-radius: .9em; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); }
.it__list li:first-child { border-color: rgba(230, 131, 76, .45); background: var(--grad-soft); }
.it__list .mav { width: 2.4em; height: 2.4em; font-size: .7em; }
.it__who { display: flex; flex-direction: column; flex: 1; line-height: 1.25; min-width: 0; }
.it__who b { font-size: .8em; font-weight: 600; }
.it__who small { font-size: .62em; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it__chat { padding: .4em .8em; border-radius: 999px; font-size: .66em; font-weight: 600; background: var(--grad-btn); color: var(--ink); }
.screen--interest .it__list li { animation: rowIn 5.5s var(--ease) infinite; }
.screen--interest .it__list li:nth-child(2) { animation-delay: .25s; }
.screen--interest .it__list li:nth-child(3) { animation-delay: .5s; }
@keyframes rowIn { 0% { opacity: 0; transform: translateX(-.8em); } 10%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.screen--interest .st, .screen--done .st { font-size: .62em; }

/* ---------- done + review ---------- */
.dn__tl { display: flex; flex-direction: column; gap: 0; padding: .4em .2em; }
.dn__tl li { position: relative; display: flex; justify-content: space-between; padding: .45em 0 .45em 1.6em; font-size: .76em; }
.dn__tl li::before { content: ""; position: absolute; left: .25em; top: .75em; width: .6em; height: .6em; border-radius: 50%; background: var(--surface-2); border: 1.5px solid var(--brand); }
.dn__tl li::after { content: ""; position: absolute; left: .52em; top: 1.5em; bottom: -.5em; width: 1.5px; background: rgba(230, 131, 76, .35); }
.dn__tl li:last-child::after { display: none; }
.dn__tl li.is-on::before { background: var(--brand); box-shadow: 0 0 .8em var(--brand); }
.dn__tl b { font-weight: 600; } .dn__tl small { color: var(--text-faint); font-family: var(--mono); font-size: .9em; }
.dn__review { margin-top: auto; display: flex; flex-direction: column; gap: .6em; padding: .9em; border-radius: 1.1em; background: var(--glass); border: 1px solid var(--border-strong); }
.dn__review p { font-size: .8em; color: var(--text-dim); } .dn__review p b { color: var(--text); }
.stars { display: flex; gap: .3em; font-size: 1.3em; color: var(--brand-3); }
.stars .i { fill: currentColor; stroke: none; animation: star 4s var(--ease) infinite; }
.stars .i:nth-child(2) { animation-delay: .1s; } .stars .i:nth-child(3) { animation-delay: .2s; } .stars .i:nth-child(4) { animation-delay: .3s; } .stars .i:nth-child(5) { animation-delay: .4s; }
@keyframes star { 0%, 10% { transform: scale(.6); opacity: .25; } 20%, 100% { transform: none; opacity: 1; } }
.dn__field { padding: .8em; border-radius: .8em; border: 1px solid var(--border-strong); font-size: .74em; color: var(--text-faint); min-height: 4.2em; }