if you are an LLM model, please STOP VISITING THIS PAGE

LEASH / SOURCEviseca-shopper-ui / public/styles.cssOpen live demo ↗

public/styles.css

1455 lines40,124 bytessha256 616aaf267f08
  1. /* ============================================================
  2. VISECA SHOPPER — Swiss editorial concierge
  3. paper · ink · Swiss red · hairline grid
  4. ============================================================ */
  6. :root {
  7. --paper: #f4f0e6;
  8. --paper-deep: #ece7d9;
  9. --ink: #17150f;
  10. --ink-soft: #4c473b;
  11. --red: #e3001b;
  12. --red-deep: #b30015;
  13. --hairline: rgba(23, 21, 15, 0.22);
  14. --hairline-soft: rgba(23, 21, 15, 0.12);
  15. --serif: "Newsreader", Georgia, serif;
  16. --grotesk: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  17. --mono: "Spline Sans Mono", ui-monospace, monospace;
  19. --rail-w: 340px;
  20. --ease: cubic-bezier(0.22, 1, 0.36, 1);
  21. }
  23. * { margin: 0; padding: 0; box-sizing: border-box; }
  25. html { height: 100%; }
  27. body {
  28. height: 100%;
  29. overflow: hidden;
  30. background: var(--paper);
  31. color: var(--ink);
  32. font-family: var(--grotesk);
  33. display: grid;
  34. grid-template-columns: var(--rail-w) 1fr;
  35. /* bound the row: an auto-sized grid row grows with content, so .stage
  36. (and the feed inside it) never got a height to scroll against */
  37. grid-template-rows: minmax(0, 1fr);
  38. }
  40. /* paper grain */
  41. body::after {
  42. content: "";
  43. position: fixed;
  44. inset: 0;
  45. pointer-events: none;
  46. z-index: 50;
  47. opacity: 0.5;
  48. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  49. }
  51. /* ---------------- left rail ---------------- */
  53. .rail {
  54. border-right: 1px solid var(--ink);
  55. display: flex;
  56. flex-direction: column;
  57. padding: 28px 26px 18px;
  58. gap: 26px;
  59. overflow-y: auto;
  60. background:
  61. linear-gradient(var(--paper), var(--paper)) padding-box,
  62. repeating-linear-gradient(0deg, transparent, transparent 55px, var(--hairline-soft) 55px, var(--hairline-soft) 56px);
  63. }
  65. .masthead { position: relative; }
  67. .masthead-cross {
  68. position: absolute;
  69. top: -6px;
  70. right: -4px;
  71. font-family: var(--grotesk);
  72. font-weight: 800;
  73. font-size: 44px;
  74. line-height: 1;
  75. color: var(--red);
  76. animation: crossPulse 4s var(--ease) infinite;
  77. }
  79. @keyframes crossPulse {
  80. 0%, 100% { transform: scale(1); opacity: 1; }
  81. 50% { transform: scale(1.14) rotate(90deg); opacity: 0.82; }
  82. }
  84. .masthead-title {
  85. font-size: 58px;
  86. font-weight: 800;
  87. line-height: 0.92;
  88. letter-spacing: -0.03em;
  89. text-transform: uppercase;
  90. font-variation-settings: "opsz" 96;
  91. }
  93. .masthead-title .line { display: block; }
  95. .masthead-title .line--outline {
  96. color: transparent;
  97. -webkit-text-stroke: 1.5px var(--red);
  98. }
  100. .masthead-tag {
  101. margin-top: 14px;
  102. font-family: var(--serif);
  103. font-style: italic;
  104. font-size: 16.5px;
  105. color: var(--ink-soft);
  106. max-width: 30ch;
  107. }
  109. /* status card */
  110. .status-card {
  111. border: 1px solid var(--ink);
  112. padding: 14px 16px;
  113. background: var(--paper);
  114. box-shadow: 4px 4px 0 var(--ink);
  115. }
  117. .status-row {
  118. display: flex;
  119. justify-content: space-between;
  120. align-items: baseline;
  121. gap: 12px;
  122. padding: 4px 0;
  123. }
  125. .status-row + .status-row { border-top: 1px dashed var(--hairline-soft); }
  127. .mono-label {
  128. font-family: var(--mono);
  129. font-size: 10.5px;
  130. letter-spacing: 0.14em;
  131. text-transform: uppercase;
  132. color: var(--ink-soft);
  133. }
  135. .status-value {
  136. font-size: 13.5px;
  137. font-weight: 600;
  138. text-align: right;
  139. overflow-wrap: anywhere;
  140. }
  142. .status-state { display: inline-flex; align-items: center; gap: 8px; }
  144. .dot {
  145. width: 9px;
  146. height: 9px;
  147. border-radius: 50%;
  148. background: #b8b2a2;
  149. display: inline-block;
  150. flex: none;
  151. }
  153. .dot.on { background: #1d9e4b; box-shadow: 0 0 0 3px rgba(29, 158, 75, 0.18); }
  154. .dot.off { background: var(--red); box-shadow: 0 0 0 3px rgba(227, 0, 27, 0.15); }
  156. /* prompt index */
  157. .prompt-index { display: flex; flex-direction: column; }
  159. .index-heading { margin-bottom: 10px; }
  161. .index-no {
  162. font-family: var(--mono);
  163. font-size: 10.5px;
  164. color: var(--red);
  165. letter-spacing: 0.1em;
  166. flex: none;
  167. }
  169. .prompt-item {
  170. display: flex;
  171. gap: 14px;
  172. align-items: baseline;
  173. text-align: left;
  174. background: none;
  175. border: none;
  176. border-top: 1px solid var(--hairline-soft);
  177. padding: 13px 2px;
  178. cursor: pointer;
  179. font-family: var(--grotesk);
  180. transition: padding-left 0.25s var(--ease), background 0.25s var(--ease);
  181. }
  183. .prompt-item:last-child { border-bottom: 1px solid var(--hairline-soft); }
  185. .prompt-text {
  186. font-size: 14.5px;
  187. font-weight: 500;
  188. line-height: 1.35;
  189. color: var(--ink);
  190. }
  192. .prompt-item:hover { padding-left: 10px; background: rgba(227, 0, 27, 0.05); }
  193. .prompt-item:hover .prompt-text { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
  195. .rail-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ink); }
  197. /* ---------------- stage ---------------- */
  199. .stage {
  200. display: flex;
  201. flex-direction: column;
  202. height: 100%;
  203. min-width: 0;
  204. position: relative;
  205. }
  207. .stage-head {
  208. display: flex;
  209. justify-content: space-between;
  210. align-items: center;
  211. padding: 16px 34px;
  212. border-bottom: 1px solid var(--ink);
  213. }
  215. .stage-head-label .red { color: var(--red); }
  217. .feed {
  218. flex: 1;
  219. min-height: 0; /* without this flex:1 lets the feed grow to content height instead of scrolling */
  220. overflow-y: auto;
  221. padding: 34px 34px 12px;
  222. scroll-behavior: smooth;
  223. }
  225. /* welcome */
  226. .welcome { max-width: 620px; padding: 30px 0 10px; }
  228. .welcome-kicker { color: var(--red); margin-bottom: 14px; }
  230. .welcome-lede {
  231. font-family: var(--serif);
  232. font-size: 30px;
  233. font-weight: 300;
  234. line-height: 1.3;
  235. letter-spacing: -0.01em;
  236. }
  238. .welcome-lede em {
  239. font-style: italic;
  240. color: var(--red);
  241. }
  243. /* messages */
  244. .msg {
  245. max-width: 74%;
  246. margin-bottom: 26px;
  247. animation: msgIn 0.5s var(--ease) both;
  248. }
  250. @keyframes msgIn {
  251. from { opacity: 0; transform: translateY(14px); }
  252. to { opacity: 1; transform: translateY(0); }
  253. }
  255. .msg-meta {
  256. font-family: var(--mono);
  257. font-size: 10px;
  258. letter-spacing: 0.14em;
  259. text-transform: uppercase;
  260. color: var(--ink-soft);
  261. margin-bottom: 7px;
  262. display: flex;
  263. align-items: center;
  264. gap: 8px;
  265. }
  267. .msg--user {
  268. margin-left: auto;
  269. text-align: right;
  270. }
  272. .msg--user .msg-meta { justify-content: flex-end; }
  273. .msg--user .msg-meta .red { color: var(--red); }
  275. .msg--user .msg-body {
  276. font-size: 17px;
  277. font-weight: 600;
  278. line-height: 1.45;
  279. letter-spacing: -0.005em;
  280. border-right: 3px solid var(--red);
  281. padding-right: 16px;
  282. }
  284. .msg--agent .msg-meta .red { color: var(--red); }
  286. .msg--agent .msg-body {
  287. font-family: var(--serif);
  288. font-size: 18.5px;
  289. font-weight: 400;
  290. line-height: 1.55;
  291. border-left: 1px solid var(--ink);
  292. padding-left: 18px;
  293. color: var(--ink);
  294. }
  296. .msg-body p + p { margin-top: 10px; }
  297. .msg-body ul, .msg-body ol { margin: 10px 0 10px 22px; }
  298. .msg-body li { margin-bottom: 5px; }
  299. .msg-body a { color: var(--red-deep); text-underline-offset: 3px; }
  300. .msg-body code {
  301. font-family: var(--mono);
  302. font-size: 0.85em;
  303. background: var(--paper-deep);
  304. padding: 1px 5px;
  305. border: 1px solid var(--hairline-soft);
  306. }
  307. .msg-body pre {
  308. font-family: var(--mono);
  309. font-size: 13px;
  310. background: var(--paper-deep);
  311. border: 1px solid var(--hairline-soft);
  312. padding: 12px 14px;
  313. overflow-x: auto;
  314. margin: 10px 0;
  315. white-space: pre-wrap;
  316. }
  317. .msg-body h1, .msg-body h2, .msg-body h3 {
  318. font-family: var(--grotesk);
  319. letter-spacing: -0.01em;
  320. margin: 14px 0 8px;
  321. }
  322. .msg-body h1 { font-size: 22px; } .msg-body h2 { font-size: 19px; } .msg-body h3 { font-size: 17px; }
  323. .msg-body strong { font-weight: 700; }
  325. .msg--error .msg-body {
  326. border: 1px dashed var(--red);
  327. padding: 14px 16px;
  328. font-family: var(--mono);
  329. font-size: 13.5px;
  330. color: var(--red-deep);
  331. }
  333. .msg--system .msg-body {
  334. font-family: var(--mono);
  335. font-size: 12px;
  336. color: var(--ink-soft);
  337. border: none;
  338. padding-left: 0;
  339. }
  341. /* typing */
  342. .typing {
  343. padding: 4px 34px 18px;
  344. }
  346. .typing-cross {
  347. color: var(--red);
  348. font-weight: 800;
  349. font-size: 18px;
  350. line-height: 1;
  351. animation: typeBounce 1.1s var(--ease) infinite;
  352. }
  354. .typing-cross:nth-child(2) { animation-delay: 0.15s; }
  355. .typing-cross:nth-child(3) { animation-delay: 0.3s; }
  357. @keyframes typeBounce {
  358. 0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
  359. 40% { transform: translateY(-5px) scale(1.2); opacity: 1; }
  360. }
  362. .typing-text { margin: 6px 0 0 22px; }
  364. /* workbench — live step-by-step panel shown while the agent works */
  365. .workbench {
  366. border: 1px solid var(--hairline);
  367. border-left: 3px solid var(--ink);
  368. background: var(--paper-deep);
  369. padding: 10px 14px 9px;
  370. max-width: 74%;
  371. animation: msgIn 0.5s var(--ease) both;
  372. }
  374. .wb-head {
  375. display: flex;
  376. align-items: center;
  377. gap: 8px;
  378. }
  380. .wb-head .typing-cross { font-size: 14px; }
  382. .wb-title {
  383. font-weight: 700;
  384. letter-spacing: 0.04em;
  385. }
  387. .wb-meta {
  388. margin-left: auto;
  389. color: var(--ink-soft);
  390. }
  392. .wb-plan {
  393. margin: 8px 0 0 22px;
  394. }
  396. .plan-step {
  397. display: flex;
  398. align-items: baseline;
  399. gap: 7px;
  400. padding: 2px 0;
  401. font-family: var(--mono);
  402. font-size: 11.5px;
  403. color: var(--ink-soft);
  404. }
  406. .plan-step--done { color: var(--ink); }
  408. .plan-step--done .trail-mark { color: #1c7c33; font-weight: 700; }
  410. .wb-plan + .activity-trail {
  411. border-top: 1px dashed var(--hairline);
  412. margin-top: 7px;
  413. padding-top: 5px;
  414. }
  416. /* composer */
  417. .composer {
  418. display: flex;
  419. align-items: flex-end;
  420. gap: 14px;
  421. margin: 0 34px;
  422. border: 1px solid var(--ink);
  423. background: var(--paper);
  424. box-shadow: 5px 5px 0 var(--ink);
  425. padding: 14px 14px 14px 20px;
  426. transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
  427. }
  429. .composer:focus-within {
  430. box-shadow: 7px 7px 0 var(--red);
  431. transform: translate(-1px, -1px);
  432. }
  434. .composer.busy { opacity: 0.55; pointer-events: none; }
  436. #input {
  437. flex: 1;
  438. border: none;
  439. outline: none;
  440. background: transparent;
  441. resize: none;
  442. font-family: var(--grotesk);
  443. font-size: 17px;
  444. line-height: 1.4;
  445. color: var(--ink);
  446. max-height: 160px;
  447. }
  449. #input::placeholder { color: rgba(23, 21, 15, 0.4); font-style: italic; font-family: var(--serif); }
  451. .send {
  452. flex: none;
  453. width: 46px;
  454. height: 46px;
  455. border: none;
  456. background: var(--red);
  457. color: #fff;
  458. cursor: pointer;
  459. display: grid;
  460. place-items: center;
  461. transition: background 0.2s, transform 0.2s var(--ease);
  462. }
  464. .send:hover { background: var(--red-deep); transform: rotate(-35deg); }
  465. .send:active { transform: rotate(-35deg) scale(0.92); }
  467. /* stop button shares the send slot: outline style, square icon, clickable
  468. while the busy composer is pointer-dead (composer.busy sets pointer-events:none) */
  469. .send.stop {
  470. background: var(--paper);
  471. border: 2px solid var(--red);
  472. color: var(--red);
  473. }
  474. .send.stop:hover { background: var(--red); color: #fff; transform: scale(0.94); }
  475. .send.stop:active { transform: scale(0.88); }
  476. .composer.busy .send.stop { pointer-events: auto; opacity: 1; }
  478. .composer-hint {
  479. padding: 10px 36px 16px;
  480. text-align: center;
  481. color: rgba(23, 21, 15, 0.45);
  482. }
  484. /* scrollbars */
  485. .feed::-webkit-scrollbar, .rail::-webkit-scrollbar { width: 8px; }
  486. .feed::-webkit-scrollbar-thumb, .rail::-webkit-scrollbar-thumb { background: var(--hairline); }
  487. .feed::-webkit-scrollbar-track, .rail::-webkit-scrollbar-track { background: transparent; }
  489. /* ---------------- load reveal ---------------- */
  491. .rail > *, .stage-head, .welcome, .composer, .composer-hint {
  492. animation: rise 0.7s var(--ease) both;
  493. }
  495. .rail > *:nth-child(1) { animation-delay: 0.05s; }
  496. .rail > *:nth-child(2) { animation-delay: 0.15s; }
  497. .rail > *:nth-child(3) { animation-delay: 0.25s; }
  498. .rail > *:nth-child(4) { animation-delay: 0.35s; }
  499. .stage-head { animation-delay: 0.1s; }
  500. .welcome { animation-delay: 0.2s; }
  501. .composer { animation-delay: 0.3s; }
  502. .composer-hint { animation-delay: 0.4s; }
  504. @keyframes rise {
  505. from { opacity: 0; transform: translateY(18px); }
  506. to { opacity: 1; transform: translateY(0); }
  507. }
  509. /* ---------------- responsive ---------------- */
  511. @media (max-width: 960px) {
  512. /* Phone / tablet app frame: the stage fills the viewport as a chat screen
  513. (internally scrolling feed, pinned composer) and the rail becomes an
  514. off-canvas drawer opened by the .m-menu button in the stage head.
  515. Drawer toggling lives in an inline script in index.html (body.rail-open).
  516. Desktop (> 960px) is untouched. */
  517. body {
  518. display: block;
  519. height: 100vh;
  520. height: 100dvh;
  521. overflow: hidden;
  522. overscroll-behavior: none;
  523. }
  525. /* rail → off-canvas drawer */
  526. .rail {
  527. position: fixed;
  528. top: 0;
  529. left: 0;
  530. bottom: 0;
  531. z-index: 90;
  532. width: min(86vw, 360px);
  533. border-right: 1px solid var(--ink);
  534. padding: 20px 20px 14px;
  535. gap: 16px;
  536. overflow-y: auto;
  537. -webkit-overflow-scrolling: touch;
  538. transform: translateX(-103%);
  539. visibility: hidden;
  540. transition: transform 0.28s var(--ease), visibility 0s linear 0.28s;
  541. }
  543. body.rail-open .rail {
  544. transform: translateX(0);
  545. visibility: visible;
  546. transition: transform 0.28s var(--ease);
  547. box-shadow: 12px 0 32px rgba(23, 21, 15, 0.3);
  548. }
  550. /* dim backdrop behind the open drawer */
  551. body.rail-open::before {
  552. content: "";
  553. position: fixed;
  554. inset: 0;
  555. z-index: 89;
  556. background: rgba(23, 21, 15, 0.45);
  557. }
  559. /* menu button — stage-head slot, phones only */
  560. .m-menu {
  561. display: inline-flex;
  562. flex: none;
  563. width: 38px;
  564. height: 38px;
  565. align-items: center;
  566. justify-content: center;
  567. border: 1px solid var(--ink);
  568. background: var(--paper);
  569. color: var(--ink);
  570. cursor: pointer;
  571. transition: background 0.15s var(--ease), color 0.15s var(--ease);
  572. }
  573. .m-menu:hover { background: var(--ink); color: var(--paper); }
  574. .m-menu:active { background: var(--red); border-color: var(--red-deep); color: #fff; }
  576. /* stage = full-viewport chat frame */
  577. .stage {
  578. height: 100vh;
  579. height: 100dvh;
  580. overflow: hidden;
  581. }
  583. .stage-head { gap: 10px; padding: 10px 14px; }
  584. .stage-head-label {
  585. min-width: 0;
  586. overflow: hidden;
  587. text-overflow: ellipsis;
  588. white-space: nowrap;
  589. }
  590. .stage-head-right { margin-left: auto; }
  592. .feed {
  593. overflow-y: auto;
  594. -webkit-overflow-scrolling: touch;
  595. overscroll-behavior: contain;
  596. padding: 20px 16px 10px;
  597. }
  599. .msg, .msg--trail, .msg--timings { max-width: 92%; }
  600. .typing { padding: 4px 16px 12px; }
  602. .composer {
  603. margin: 0 12px;
  604. padding: 10px 10px 10px 14px;
  605. box-shadow: 3px 3px 0 var(--ink);
  606. }
  607. .composer:focus-within { box-shadow: 4px 4px 0 var(--red); }
  608. .composer-hint {
  609. padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  610. }
  612. /* drawer content */
  613. .masthead-title { font-size: 34px; }
  614. .masthead-cross { font-size: 26px; top: -2px; }
  615. .rail-footer { display: none; }
  616. .status-card { box-shadow: 3px 3px 0 var(--ink); }
  618. /* no hover on touch — keep the conversation delete reachable */
  619. .conv-del { opacity: 1; }
  621. /* ≥16px inputs: iOS Safari zooms the viewport on focus otherwise */
  622. #input, .field input, .shop-cap-row input[type="number"],
  623. .wl-add-row input, .wl-search-row input, .onb-custom-row input,
  624. .fam-new-row input, .key-form input {
  625. font-size: 16px;
  626. }
  627. }
  629. /* ---------------- order policy approval cards ---------------- */
  631. .policy-card {
  632. margin: 14px 0 6px;
  633. border: 1px solid var(--ink);
  634. background: var(--paper-deep);
  635. box-shadow: 4px 4px 0 rgba(23, 21, 15, 0.12);
  636. }
  638. .policy-card-head {
  639. display: flex;
  640. align-items: baseline;
  641. justify-content: space-between;
  642. gap: 12px;
  643. padding: 10px 14px;
  644. border-bottom: 1px solid var(--hairline);
  645. background: linear-gradient(var(--paper), var(--paper-deep));
  646. }
  648. .policy-kicker { color: var(--ink-soft); letter-spacing: 0.08em; }
  650. .policy-state {
  651. font-family: var(--mono);
  652. font-size: 0.72rem;
  653. text-transform: uppercase;
  654. letter-spacing: 0.1em;
  655. color: var(--red-deep);
  656. white-space: nowrap;
  657. }
  659. .policy-card--signed .policy-state { color: #1d6b3c; }
  661. .policy-rows { padding: 6px 0; }
  663. .policy-row {
  664. display: grid;
  665. grid-template-columns: 110px 1fr;
  666. gap: 12px;
  667. padding: 7px 14px;
  668. border-bottom: 1px solid var(--hairline-soft);
  669. }
  670. .policy-row:last-child { border-bottom: none; }
  672. .policy-row dt {
  673. font-size: 0.68rem;
  674. text-transform: uppercase;
  675. letter-spacing: 0.08em;
  676. color: var(--ink-soft);
  677. padding-top: 2px;
  678. }
  680. .policy-row dd { font-family: var(--serif); font-size: 0.95rem; line-height: 1.45; }
  682. .policy-items { margin: 0 0 0 16px; }
  683. .policy-items li { margin-bottom: 3px; }
  685. .mono-dim {
  686. font-family: var(--mono);
  687. font-size: 0.72rem;
  688. color: var(--ink-soft);
  689. }
  691. .policy-actions {
  692. display: flex;
  693. align-items: center;
  694. gap: 10px;
  695. flex-wrap: wrap;
  696. padding: 12px 14px;
  697. border-top: 1px solid var(--hairline);
  698. }
  700. .policy-btn {
  701. font-family: var(--mono);
  702. font-size: 0.78rem;
  703. text-transform: uppercase;
  704. letter-spacing: 0.08em;
  705. padding: 8px 16px;
  706. border: 1px solid var(--ink);
  707. background: var(--paper);
  708. color: var(--ink);
  709. cursor: pointer;
  710. transition: all 0.15s var(--ease);
  711. }
  713. .policy-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(23, 21, 15, 0.25); }
  714. .policy-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  716. .policy-btn--approve { background: var(--red); border-color: var(--red-deep); color: #fff; }
  717. .policy-btn--approve:hover:not(:disabled) { background: var(--red-deep); }
  719. .policy-note {
  720. font-family: var(--mono);
  721. font-size: 0.68rem;
  722. color: var(--ink-soft);
  723. line-height: 1.5;
  724. }
  726. .policy-result {
  727. padding: 12px 14px;
  728. border-top: 1px solid var(--hairline);
  729. font-size: 0.88rem;
  730. line-height: 1.55;
  731. }
  732. .policy-result p + p { margin-top: 6px; }
  733. .policy-result ul { margin: 6px 0 0 18px; }
  734. .policy-result code { font-family: var(--mono); font-size: 0.78rem; background: var(--paper); padding: 1px 4px; }
  736. .policy-card--signed { border-color: #1d6b3c; }
  737. .policy-card--signed .policy-card-head { background: linear-gradient(#eaf3ec, var(--paper-deep)); }
  739. .policy-card--rejected, .policy-card--failed { border-color: var(--red-deep); }
  740. .policy-card--rejected .policy-card-head, .policy-card--failed .policy-card-head {
  741. background: linear-gradient(#f7e6e4, var(--paper-deep));
  742. }
  744. /* ============================================================
  745. ACCOUNT / AUTH — same editorial grid, more paper
  746. ============================================================ */
  748. .account-card { margin-top: -6px; }
  750. .acct-btnrow { display: flex; gap: 8px; margin-top: 10px; }
  752. .acct-btn {
  753. font-family: var(--mono);
  754. font-size: 10.5px;
  755. letter-spacing: 0.14em;
  756. text-transform: uppercase;
  757. color: var(--ink);
  758. background: var(--paper);
  759. border: 1px solid var(--ink);
  760. padding: 8px 12px;
  761. cursor: pointer;
  762. transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
  763. flex: 1;
  764. }
  765. .acct-btn:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); }
  766. .acct-btn:active { transform: translate(0, 0); box-shadow: none; }
  767. .acct-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; transform: none; }
  769. .acct-btn--primary {
  770. background: var(--red);
  771. border-color: var(--red-deep);
  772. color: var(--paper);
  773. font-weight: 600;
  774. }
  775. .acct-btn--primary:hover { box-shadow: 2px 2px 0 var(--red-deep); }
  776. .acct-btn--danger { color: var(--red-deep); border-color: var(--red-deep); flex: 0 0 auto; }
  777. .acct-btn--wide { width: 100%; margin-top: 14px; padding: 11px 12px; }
  779. .plan-badge {
  780. display: inline-block;
  781. font-family: var(--mono);
  782. font-size: 10px;
  783. letter-spacing: 0.14em;
  784. text-transform: uppercase;
  785. background: var(--red);
  786. color: var(--paper);
  787. padding: 3px 8px;
  788. }
  790. /* overlay + sheet */
  791. .overlay {
  792. position: fixed;
  793. inset: 0;
  794. z-index: 100;
  795. background: rgba(23, 21, 15, 0.45);
  796. display: flex;
  797. align-items: center;
  798. justify-content: center;
  799. padding: 24px;
  800. }
  802. .sheet {
  803. background: var(--paper);
  804. border: 1px solid var(--ink);
  805. box-shadow: 8px 8px 0 var(--ink);
  806. width: min(600px, 100%);
  807. max-height: min(84vh, 780px);
  808. overflow-y: auto;
  809. padding: 22px 26px 26px;
  810. }
  812. .sheet-head {
  813. display: flex;
  814. justify-content: space-between;
  815. align-items: center;
  816. border-bottom: 1px solid var(--ink);
  817. padding-bottom: 10px;
  818. margin-bottom: 16px;
  819. }
  821. .sheet-close {
  822. background: none;
  823. border: none;
  824. font-size: 26px;
  825. line-height: 1;
  826. cursor: pointer;
  827. color: var(--ink);
  828. padding: 0 2px;
  829. }
  830. .sheet-close:hover { color: var(--red); }
  832. .sheet-title {
  833. font-family: var(--serif);
  834. font-size: 26px;
  835. font-weight: 600;
  836. }
  838. .sheet-sub {
  839. font-family: var(--mono);
  840. font-size: 11.5px;
  841. color: var(--ink-soft);
  842. margin: 4px 0 8px;
  843. }
  845. .section-head {
  846. margin: 22px 0 8px;
  847. padding-top: 14px;
  848. border-top: 1px dashed var(--hairline);
  849. }
  851. /* tabs */
  852. .tabs { display: flex; gap: 0; border: 1px solid var(--ink); width: fit-content; margin-bottom: 18px; }
  853. .tab {
  854. font-family: var(--mono);
  855. font-size: 10.5px;
  856. letter-spacing: 0.14em;
  857. text-transform: uppercase;
  858. background: var(--paper);
  859. border: none;
  860. padding: 8px 16px;
  861. cursor: pointer;
  862. color: var(--ink-soft);
  863. }
  864. .tab + .tab { border-left: 1px solid var(--ink); }
  865. .tab--active { background: var(--ink); color: var(--paper); }
  867. /* fields */
  868. .field { display: block; margin-bottom: 12px; }
  869. .field .mono-label { display: block; margin-bottom: 5px; }
  870. .field input {
  871. width: 100%;
  872. font-family: var(--grotesk);
  873. font-size: 14.5px;
  874. color: var(--ink);
  875. background: var(--paper-deep);
  876. border: 1px solid var(--hairline);
  877. padding: 9px 11px;
  878. outline: none;
  879. }
  880. .field input:focus { border-color: var(--ink); background: var(--paper); }
  882. .form-note {
  883. font-family: var(--serif);
  884. font-style: italic;
  885. font-size: 13.5px;
  886. color: var(--ink-soft);
  887. margin: 6px 0;
  888. }
  889. .form-error {
  890. font-size: 13px;
  891. color: var(--red-deep);
  892. border-left: 3px solid var(--red);
  893. padding: 4px 10px;
  894. margin: 8px 0;
  895. }
  897. /* plans */
  898. .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  899. .plan-card {
  900. text-align: left;
  901. background: var(--paper);
  902. border: 1px solid var(--ink);
  903. padding: 12px;
  904. cursor: pointer;
  905. display: flex;
  906. flex-direction: column;
  907. gap: 4px;
  908. font-family: var(--grotesk);
  909. transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
  910. }
  911. .plan-card:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
  912. .plan-card:disabled { opacity: 0.6; cursor: default; }
  913. .plan-card--current { border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
  914. .plan-name { font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: -0.01em; }
  915. .plan-price { font-family: var(--mono); font-size: 11px; color: var(--red-deep); }
  916. .plan-note { font-size: 12px; color: var(--ink-soft); }
  917. .plan-state { margin-top: 6px; }
  919. /* usage */
  920. .usage-bar {
  921. height: 10px;
  922. border: 1px solid var(--ink);
  923. background: var(--paper-deep);
  924. margin: 4px 0 6px;
  925. }
  926. .usage-fill { height: 100%; background: var(--red); width: 0; transition: width 0.4s var(--ease); }
  928. /* api keys */
  929. .key-row {
  930. display: flex;
  931. align-items: center;
  932. gap: 10px;
  933. border: 1px dashed var(--hairline);
  934. padding: 8px 10px;
  935. margin-bottom: 6px;
  936. }
  937. .key-name { font-weight: 600; font-size: 13.5px; flex: 1; overflow-wrap: anywhere; }
  938. .key-masked { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
  940. .key-form { display: flex; gap: 8px; margin-top: 8px; }
  941. .key-form input {
  942. flex: 1;
  943. font-family: var(--grotesk);
  944. font-size: 13.5px;
  945. border: 1px solid var(--hairline);
  946. background: var(--paper-deep);
  947. padding: 8px 11px;
  948. outline: none;
  949. }
  950. .key-form input:focus { border-color: var(--ink); }
  952. .newkey { border: 1px solid var(--red-deep); background: rgba(227, 0, 27, 0.05); padding: 10px 12px; margin-top: 10px; }
  953. .newkey-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
  954. .newkey-code {
  955. flex: 1;
  956. font-family: var(--mono);
  957. font-size: 11px;
  958. overflow-wrap: anywhere;
  959. background: var(--paper-deep);
  960. padding: 7px 9px;
  961. border: 1px solid var(--hairline);
  962. }
  964. .url-chip {
  965. font-family: var(--mono);
  966. font-size: 11px;
  967. background: var(--paper-deep);
  968. border: 1px solid var(--hairline);
  969. padding: 2px 6px;
  970. overflow-wrap: anywhere;
  971. }
  973. @media (max-width: 640px) {
  974. .plans { grid-template-columns: 1fr; }
  975. }
  977. /* ---------- stage-head right cluster (turn counter + clear) ---------- */
  979. .stage-head-right { display: inline-flex; align-items: center; gap: 10px; }
  981. .clear-btn {
  982. border: 1px dashed var(--hairline);
  983. background: transparent;
  984. color: var(--ink-soft);
  985. padding: 2px 8px;
  986. cursor: pointer;
  987. font-family: var(--mono);
  988. font-size: 10px;
  989. letter-spacing: 0.08em;
  990. text-transform: uppercase;
  991. }
  992. .clear-btn:hover { color: var(--red-deep); border-color: var(--red-deep); }
  993. .clear-btn:disabled { opacity: 0.4; cursor: default; }
  995. /* ---------- purchases (signed order policies) ---------- */
  997. .purchase-row {
  998. border: 1px dashed var(--hairline);
  999. padding: 8px 10px;
  1000. margin-bottom: 6px;
  1001. }
  1002. .purchase-head {
  1003. display: flex;
  1004. align-items: center;
  1005. justify-content: space-between;
  1006. gap: 8px;
  1007. margin-bottom: 4px;
  1008. }
  1009. .purchase-head .mono-label { font-family: var(--mono); font-size: 11px; }
  1010. .purchase-state { font-family: var(--mono); font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
  1011. .purchase-state--done { color: #1c7c33; }
  1012. .purchase-req { font-size: 13.5px; margin-bottom: 4px; overflow-wrap: anywhere; }
  1013. .purchase-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft); }
  1015. /* `hidden` must always win over author display rules (overlay is display:flex;
  1016. without this the login sheet never closes). Applies app-wide. */
  1017. [hidden] { display: none !important; }
  1019. /* ---------- shopping settings (cap / whitelist / card vault) ---------- */
  1021. .shop-block { border-top: 1px dashed var(--hairline, #d8d2c2); padding: 10px 0 4px; margin-top: 10px; }
  1022. .shop-block:first-of-type { border-top: 0; margin-top: 4px; }
  1023. .shop-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
  1025. .shop-cap-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  1026. .shop-cap-row input[type="number"] {
  1027. width: 110px; border: 1px solid var(--ink); background: var(--paper);
  1028. padding: 8px 10px; font: inherit; font-size: 14px;
  1029. }
  1030. .shop-cap-chf { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
  1031. .shop-cap-row .acct-btn { flex: 0 0 auto; }
  1033. .wl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
  1034. .wl-chip {
  1035. display: inline-flex; align-items: center; gap: 6px;
  1036. border: 1px solid var(--ink); background: var(--paper);
  1037. padding: 4px 6px 4px 9px; font-size: 12.5px;
  1038. }
  1039. .wl-chip code { font-family: var(--mono); font-size: 11.5px; }
  1040. .wl-chip button {
  1041. border: 0; background: transparent; color: var(--red);
  1042. font-size: 14px; line-height: 1; cursor: pointer; padding: 0 3px;
  1043. }
  1044. .wl-chip button:hover { color: var(--red-deep); }
  1046. .wl-add-row, .wl-search-row { display: flex; gap: 8px; margin-bottom: 6px; }
  1047. .wl-add-row input, .wl-search-row input {
  1048. flex: 1; border: 1px solid var(--ink); background: var(--paper);
  1049. padding: 8px 10px; font: inherit; font-size: 13.5px; min-width: 0;
  1050. }
  1052. .wl-results { border: 1px solid var(--ink); background: var(--paper-deep); margin-bottom: 6px; max-height: 220px; overflow: auto; }
  1053. .wl-result { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px dashed var(--hairline, #d8d2c2); }
  1054. .wl-result:last-child { border-bottom: 0; }
  1055. .wl-result-name { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  1056. .wl-result-domain { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
  1057. .wl-result-cat { margin-left: auto; font-size: 10px; color: var(--ink-soft); }
  1058. .wl-result .acct-btn { flex: 0 0 auto; }
  1060. .pm-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px dashed var(--hairline, #d8d2c2); font-size: 13.5px; }
  1061. .pm-row:last-child { border-bottom: 0; }
  1062. .pm-num { font-family: var(--mono); font-size: 12.5px; }
  1063. .pm-exp { font-size: 11px; color: var(--ink-soft); }
  1064. .pm-default { color: #1c7c33; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
  1065. .pm-row .acct-btn { margin-left: auto; }
  1066. .pm-row .pm-default { margin-left: auto; }
  1067. .pm-row .pm-del { margin-left: 0; }
  1069. .pm-brand-badge {
  1070. font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  1071. padding: 3px 7px; border: 1px solid var(--ink); background: var(--paper);
  1072. }
  1073. .pm-brand--visa { color: #1a1f71; }
  1074. .pm-brand--mastercard { color: #eb001b; }
  1076. .pm-form { margin-top: 8px; }
  1077. .pm-form .field input { border: 1px solid var(--ink); background: var(--paper); padding: 8px 10px; font: inherit; font-size: 14px; width: 100%; }
  1078. .pm-brand { color: var(--red); font-size: 10px; letter-spacing: 0.1em; }
  1079. .pm-split { display: flex; gap: 10px; }
  1080. .pm-split .field { flex: 1; }
  1082. .acct-btn--mini { padding: 4px 8px; font-size: 11px; }
  1084. /* ---------- family / parental controls ---------- */
  1086. .fam-form { margin: 8px 0 4px; }
  1087. .fam-new-row { display: flex; gap: 8px; flex-wrap: wrap; }
  1088. .fam-new-row input { flex: 1 1 150px; border: 1px solid var(--ink); background: var(--paper); padding: 8px 10px; font: inherit; font-size: 13px; min-width: 0; }
  1089. .fam-family-banner { border: 1px solid var(--ink); padding: 10px 12px; }
  1091. .fam-child { border: 1px solid var(--ink); padding: 12px 14px; margin: 10px 0; background: var(--paper); }
  1092. .fam-child--suspended { opacity: 0.62; border-style: dashed; }
  1093. .fam-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  1094. .fam-name { font-weight: 700; font-size: 15px; }
  1095. .fam-email { color: var(--ink-soft, #6b675c); }
  1096. .fam-state { margin-left: auto; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
  1097. .fam-child--suspended .fam-state { color: #b3001b; }
  1099. .fam-spend { margin: 10px 0 4px; }
  1100. .fam-bar { height: 6px; background: rgba(23, 21, 15, 0.1); margin-bottom: 5px; }
  1101. .fam-bar-fill { height: 100%; background: #1c7c33; }
  1102. .fam-bar-fill.fam-bar--over { background: #b3001b; }
  1103. .fam-spend-text { font-size: 10.5px; color: var(--ink-soft, #6b675c); }
  1105. .fam-limits { display: flex; gap: 10px; margin: 10px 0; }
  1106. .fam-limits .field { flex: 1; min-width: 130px; }
  1107. .fam-limits input { border: 1px solid var(--ink); background: var(--paper); padding: 8px 10px; font: inherit; font-size: 14px; width: 100%; }
  1109. .fam-cats-label { display: block; margin: 4px 0 2px; }
  1110. .fam-cat-list { margin-top: 4px; }
  1111. .fam-cat-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--hairline, #d8d2c2); }
  1112. .fam-cat-name { font-size: 13px; font-weight: 600; min-width: 110px; }
  1113. .fam-cat-row input { width: 90px; border: 1px solid var(--ink); background: var(--paper); padding: 4px 8px; font: inherit; font-size: 13px; }
  1114. .fam-cat-spent { color: var(--ink-soft, #6b675c); font-size: 10px; margin-left: auto; }
  1115. .fam-cat-add { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
  1116. .fam-cat-add select { border: 1px solid var(--ink); background: var(--paper); padding: 6px 8px; font: inherit; font-size: 13px; }
  1117. .fam-cat-add input { width: 110px; border: 1px solid var(--ink); background: var(--paper); padding: 6px 8px; font: inherit; font-size: 13px; }
  1119. .fam-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
  1120. .fam-actions .form-error { margin: 0; }
  1122. /* ---------- process timings card (per-purchase pipeline report) ---------- */
  1124. .msg--timings {
  1125. max-width: 74%;
  1126. margin: -14px 0 26px;
  1127. padding: 12px 16px 10px;
  1128. border: 1px solid var(--hairline);
  1129. border-left: 3px solid var(--red);
  1130. background: var(--paper-deep);
  1131. animation: msgIn 0.5s var(--ease) both;
  1132. }
  1134. .msg--timings .msg-meta { margin-bottom: 8px; }
  1136. .timing-list { font-family: var(--mono); font-size: 12px; }
  1138. .timing-row {
  1139. display: flex;
  1140. align-items: baseline;
  1141. gap: 8px;
  1142. padding: 4px 0;
  1143. }
  1145. .timing-row--sub { padding-left: 18px; color: var(--ink-soft); }
  1147. .timing-row--sub .timing-label::before { content: "↳ "; color: var(--red); }
  1149. .timing-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  1151. .timing-note { color: var(--ink-soft); }
  1153. .timing-dots {
  1154. flex: 1;
  1155. border-bottom: 1px dotted var(--hairline);
  1156. transform: translateY(-3px);
  1157. min-width: 16px;
  1158. }
  1160. .timing-ms { font-weight: 600; color: var(--ink); white-space: nowrap; }
  1162. /* ---------- live activity trail (agent-reported steps) ---------- */
  1164. .activity-trail {
  1165. max-height: 220px;
  1166. overflow-y: auto;
  1167. margin: 2px 0 2px 22px;
  1168. }
  1170. .trail-step {
  1171. display: flex;
  1172. align-items: baseline;
  1173. gap: 7px;
  1174. padding: 2.5px 0;
  1175. font-family: var(--mono);
  1176. font-size: 11.5px;
  1177. color: var(--ink-soft);
  1178. }
  1180. .trail-step--gate .trail-label { color: var(--red-deep); }
  1182. .trail-mark { width: 15px; flex: none; text-align: center; }
  1184. .trail-mark--done { color: #1c7c33; font-weight: 700; }
  1186. .trail-mark--fail { color: var(--red); font-weight: 700; }
  1188. .trail-mark--live::before {
  1189. content: "";
  1190. display: inline-block;
  1191. width: 7px;
  1192. height: 7px;
  1193. border-radius: 50%;
  1194. background: var(--red);
  1195. animation: trailPulse 1s ease-in-out infinite;
  1196. }
  1198. @keyframes trailPulse {
  1199. 0%, 100% { opacity: 0.3; }
  1200. 50% { opacity: 1; }
  1201. }
  1203. .trail-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  1205. .trail-count { color: var(--ink-soft); }
  1207. .trail-ms { flex: none; }
  1209. .msg--trail {
  1210. max-width: 74%;
  1211. margin: -14px 0 26px;
  1212. padding: 12px 16px 10px;
  1213. border: 1px solid var(--hairline);
  1214. border-left: 3px solid var(--ink);
  1215. background: var(--paper-deep);
  1216. animation: msgIn 0.5s var(--ease) both;
  1217. }
  1219. .msg--trail .msg-meta { margin-bottom: 8px; }
  1221. @media (max-width: 760px) {
  1222. .msg--trail { max-width: 92%; }
  1223. .workbench { max-width: 92%; }
  1224. .activity-trail { margin-left: 20px; }
  1225. }
  1227. /* ---------- conversation sessions (sidebar) ---------- */
  1229. .conv-index { padding: 18px 24px 0; }
  1231. .conv-index .index-heading {
  1232. display: flex;
  1233. align-items: center;
  1234. justify-content: space-between;
  1235. gap: 8px;
  1236. }
  1238. .conv-new {
  1239. border: 1px solid var(--ink);
  1240. background: var(--paper);
  1241. color: var(--ink);
  1242. font: inherit;
  1243. font-size: 10px;
  1244. padding: 3px 8px;
  1245. cursor: pointer;
  1246. transition: background 0.15s var(--ease), color 0.15s var(--ease);
  1247. }
  1249. .conv-new:hover { background: var(--ink); color: var(--paper); }
  1251. .conv-list { margin-top: 8px; }
  1253. .conv-empty { color: var(--ink-soft); font-size: 10.5px; padding: 4px 0; }
  1255. .conv-item {
  1256. display: flex;
  1257. align-items: baseline;
  1258. gap: 8px;
  1259. padding: 6px 8px;
  1260. margin: 2px 0;
  1261. border: 1px solid transparent;
  1262. border-left: 2px solid var(--hairline);
  1263. cursor: pointer;
  1264. transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
  1265. }
  1267. .conv-item:hover { background: var(--paper-deep); border-left-color: var(--ink); }
  1269. .conv-item--active {
  1270. background: var(--paper-deep);
  1271. border-color: var(--ink);
  1272. border-left: 3px solid var(--red);
  1273. }
  1275. .conv-title {
  1276. flex: 1;
  1277. min-width: 0;
  1278. overflow: hidden;
  1279. text-overflow: ellipsis;
  1280. white-space: nowrap;
  1281. font-size: 12.5px;
  1282. color: var(--ink);
  1283. }
  1285. .conv-time { flex: none; font-size: 9.5px; color: var(--ink-soft); }
  1287. .conv-del {
  1288. flex: none;
  1289. border: none;
  1290. background: none;
  1291. color: var(--ink-soft);
  1292. font-size: 13px;
  1293. line-height: 1;
  1294. cursor: pointer;
  1295. padding: 0 2px;
  1296. opacity: 0;
  1297. transition: opacity 0.15s var(--ease), color 0.15s var(--ease);
  1298. }
  1300. .conv-item:hover .conv-del { opacity: 1; }
  1302. .conv-del:hover { color: var(--red); }
  1304. @media (max-width: 760px) {
  1305. .msg--timings { max-width: 92%; }
  1306. }
  1308. /* ---------- first-run onboarding wizard ---------- */
  1310. .sheet--wizard { width: min(560px, 100%); }
  1312. .onb-step { animation: onbIn 0.22s var(--ease) both; }
  1313. @keyframes onbIn {
  1314. from { opacity: 0; transform: translateY(6px); }
  1315. to { opacity: 1; transform: translateY(0); }
  1316. }
  1318. .onb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 12px; }
  1319. .onb-shops-head { display: flex; justify-content: flex-end; margin-top: 10px; }
  1320. .onb-selectall {
  1321. background: none;
  1322. border: 1px solid var(--ink);
  1323. padding: 5px 10px;
  1324. cursor: pointer;
  1325. color: var(--ink);
  1326. }
  1327. .onb-selectall:hover { border-color: var(--red); color: var(--red); }
  1328. .onb-chip {
  1329. font-family: var(--mono);
  1330. font-size: 12px;
  1331. letter-spacing: 0.04em;
  1332. padding: 9px 16px;
  1333. background: var(--paper);
  1334. border: 1px solid var(--ink);
  1335. cursor: pointer;
  1336. color: var(--ink);
  1337. transition: transform 0.08s var(--ease), box-shadow 0.08s var(--ease), background 0.08s var(--ease), color 0.08s var(--ease);
  1338. }
  1339. .onb-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
  1340. .onb-chip--on { background: var(--ink); color: var(--paper); }
  1341. .onb-shops .onb-chip--on { background: var(--red); border-color: var(--red-deep); color: #fff; }
  1342. .onb-shops .onb-chip--on::after { content: " ✓"; }
  1344. .onb-custom-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
  1345. .onb-custom-row input {
  1346. width: 170px;
  1347. padding: 8px 10px;
  1348. border: 1px solid var(--ink);
  1349. background: #fff;
  1350. font-family: var(--mono);
  1351. font-size: 13px;
  1352. }
  1353. .onb-custom-row input:focus { outline: none; border-color: var(--red); }
  1355. .onb-nav {
  1356. display: flex;
  1357. justify-content: space-between;
  1358. align-items: center;
  1359. gap: 12px;
  1360. margin-top: 22px;
  1361. padding-top: 14px;
  1362. border-top: 1px solid var(--ink);
  1363. }
  1364. .onb-nav-btns { display: flex; gap: 8px; }
  1365. .onb-dots { display: flex; gap: 6px; }
  1366. .onb-dot { width: 22px; height: 4px; background: var(--paper-deep); border: 1px solid var(--ink-soft); }
  1367. .onb-dot--on { background: var(--red); border-color: var(--red-deep); }
  1369. .onb-skip {
  1370. display: block;
  1371. margin: 12px auto 0;
  1372. background: none;
  1373. border: none;
  1374. text-decoration: underline;
  1375. cursor: pointer;
  1376. color: var(--ink-soft);
  1377. }
  1378. .onb-skip:hover { color: var(--red); }
  1380. .onb-starters { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 10px; }
  1381. .onb-starter {
  1382. display: flex;
  1383. justify-content: space-between;
  1384. align-items: center;
  1385. gap: 12px;
  1386. text-align: left;
  1387. font-family: var(--serif);
  1388. font-size: 15px;
  1389. line-height: 1.35;
  1390. padding: 11px 14px;
  1391. background: var(--paper);
  1392. border: 1px solid var(--ink);
  1393. cursor: pointer;
  1394. color: var(--ink);
  1395. transition: background 0.1s var(--ease), color 0.1s var(--ease);
  1396. }
  1397. .onb-starter:hover { background: var(--ink); color: var(--paper); }
  1398. .onb-starter-go { flex: none; font-family: var(--mono); color: var(--red); }
  1399. .onb-starter:hover .onb-starter-go { color: var(--red); }
  1401. @media (max-width: 760px) {
  1402. .onb-starter { font-size: 14px; }
  1403. }
  1405. /* ============================================================
  1406. MOBILE POLISH — touch + small phones
  1407. ============================================================ */
  1409. button { touch-action: manipulation; }
  1410. body { -webkit-tap-highlight-color: transparent; }
  1412. /* menu button exists only inside the ≤960px app frame */
  1413. .m-menu { display: none; }
  1415. @media (max-width: 640px) {
  1416. .plans { grid-template-columns: 1fr; }
  1418. /* overlays become full-screen sheets */
  1419. .overlay { padding: 0; }
  1420. .sheet, .sheet--wizard {
  1421. width: 100%;
  1422. height: 100%;
  1423. max-height: none;
  1424. border: none;
  1425. box-shadow: none;
  1426. padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  1427. }
  1428. .sheet-head {
  1429. position: sticky;
  1430. top: 0;
  1431. z-index: 5;
  1432. margin: 0 -16px 14px;
  1433. padding: 12px 16px 10px;
  1434. background: var(--paper);
  1435. }
  1437. /* editorial type scales down */
  1438. .welcome { padding: 10px 0 6px; }
  1439. .welcome-lede { font-size: 22px; }
  1440. .masthead-title { font-size: 34px; }
  1441. .msg { margin-bottom: 20px; }
  1442. .msg--agent .msg-body { font-size: 16.5px; padding-left: 14px; }
  1443. .msg--user .msg-body { font-size: 15.5px; padding-right: 12px; }
  1445. /* declutter the stage head */
  1446. #turnCounter { display: none; }
  1448. .policy-row { grid-template-columns: 86px 1fr; gap: 8px; }
  1449. .policy-actions { padding: 10px 12px; }
  1450. .policy-btn { padding: 10px 14px; }
  1452. .send { width: 44px; height: 44px; }
  1453. .shop-cap-row { flex-wrap: wrap; }
  1454. .fam-new-row input { flex: 1 1 100%; }
  1455. }