mattrguerra.comHouston area
Matt Guerra
  1. 01AI & Automation
  2. 02Photography
  3. 03Design
  4. 04About
  5. 05Notes
  6. 06Contact
Back to the systems

mattrguerra/cortexmainPrivate on GitHub, published here in full

app.css

CSS22.0 KB1243 lines

src/styles/app.css

  1. /* ---- surfaces ------------------------------------------------------------ */
  2. .glass {
  3. background: var(--glass);
  4. border: 1px solid var(--glass-border);
  5. box-shadow: var(--shadow);
  6. }
  7. .glass-strong {
  8. background: var(--glass-strong);
  9. border: 1px solid var(--glass-border);
  10. box-shadow: var(--shadow-pop);
  11. -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
  12. backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
  13. }
  14. .glass-tint {
  15. background: var(--glass-tint);
  16. border: 1px solid var(--glass-border);
  17. }
  18. /* Where there is no native frost, the page frosts its own panels. */
  19. :root[data-vibrancy='none'] .glass {
  20. -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
  21. backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
  22. }
  24. /* ---- controls ------------------------------------------------------------ */
  25. button {
  26. border: 0;
  27. background: none;
  28. border-radius: var(--radius-sm);
  29. padding: 6px 12px;
  30. line-height: 20px;
  31. transition:
  32. background 120ms var(--ease),
  33. opacity 120ms;
  34. }
  35. button:disabled {
  36. opacity: 0.45;
  37. }
  38. button.primary {
  39. background: var(--accent);
  40. color: var(--accent-text);
  41. font-weight: 600;
  42. }
  43. button.primary:hover:not(:disabled) {
  44. filter: brightness(1.06);
  45. }
  46. button.ghost:hover:not(:disabled),
  47. button.pill:hover {
  48. background: var(--accent-soft);
  49. }
  50. button.small {
  51. padding: 2px 8px;
  52. font-size: 12px;
  53. }
  54. button.icon {
  55. padding: 6px;
  56. display: inline-grid;
  57. place-items: center;
  58. }
  59. button.link {
  60. padding: 0;
  61. color: var(--accent);
  62. text-decoration: underline;
  63. text-underline-offset: 2px;
  64. }
  65. button.danger,
  66. .danger {
  67. color: var(--danger);
  68. }
  69. button.pill {
  70. border: 1px solid var(--hairline);
  71. border-radius: 999px;
  72. padding: 3px 11px;
  73. font-size: 12px;
  74. color: var(--text-2);
  75. }
  76. button.pill.on {
  77. background: var(--accent);
  78. border-color: var(--accent);
  79. color: var(--accent-text);
  80. }
  81. input,
  82. textarea,
  83. select {
  84. background: var(--glass-tint);
  85. border: 1px solid var(--hairline);
  86. border-radius: var(--radius-sm);
  87. padding: 7px 10px;
  88. min-width: 0;
  89. user-select: text;
  90. -webkit-user-select: text;
  91. }
  92. input:focus,
  93. textarea:focus,
  94. select:focus {
  95. outline: none;
  96. border-color: var(--accent);
  97. box-shadow: var(--focus);
  98. }
  99. kbd {
  100. font-family: var(--font);
  101. font-size: 11px;
  102. color: var(--text-3);
  103. border: 1px solid var(--hairline);
  104. border-radius: 5px;
  105. padding: 0 5px;
  106. }
  107. .row {
  108. display: flex;
  109. gap: 8px;
  110. align-items: center;
  111. }
  112. .row.end {
  113. justify-content: flex-end;
  114. }
  115. .row.wrap {
  116. flex-wrap: wrap;
  117. }
  118. .grow {
  119. flex: 1;
  120. }
  121. .spacer {
  122. flex: 1;
  123. }
  124. .muted {
  125. color: var(--text-2);
  126. }
  127. .small {
  128. font-size: 12px;
  129. }
  130. .mono {
  131. font-family: var(--mono);
  132. font-size: 12px;
  133. }
  134. .pad {
  135. padding: 8px 12px;
  136. }
  138. /* ---- layout -------------------------------------------------------------- */
  139. .app {
  140. display: grid;
  141. grid-template-columns: var(--sidebar) 1fr;
  142. height: 100%;
  143. gap: 10px;
  144. padding: 10px;
  145. }
  146. .app.loading {
  147. display: block;
  148. }
  149. .fatal {
  150. padding: 40px;
  151. color: var(--danger);
  152. }
  154. /* ---- sidebar ------------------------------------------------------------- */
  155. .sidebar {
  156. display: flex;
  157. flex-direction: column;
  158. min-height: 0;
  159. border-radius: var(--radius-lg);
  160. overflow: hidden;
  161. }
  162. .sidebar-top {
  163. padding: 14px 12px 8px;
  164. display: grid;
  165. gap: 8px;
  166. }
  167. .sidebar-top.traffic {
  168. padding-top: 40px; /* room for the macOS window buttons */
  169. }
  170. .new-chat {
  171. width: 100%;
  172. padding: 8px;
  173. }
  174. .search-trigger {
  175. display: flex;
  176. align-items: center;
  177. gap: 8px;
  178. width: 100%;
  179. color: var(--text-2);
  180. border: 1px solid var(--hairline);
  181. background: var(--glass-tint);
  182. text-align: left;
  183. }
  184. .search-trigger span {
  185. flex: 1;
  186. }
  187. .conv-list {
  188. flex: 1;
  189. overflow-y: auto;
  190. padding: 4px 8px 12px;
  191. }
  192. .conv-list h2 {
  193. font-size: 11px;
  194. font-weight: 600;
  195. text-transform: uppercase;
  196. letter-spacing: 0.06em;
  197. color: var(--text-3);
  198. margin: 14px 8px 4px;
  199. }
  200. .conv-list ul {
  201. list-style: none;
  202. margin: 0;
  203. padding: 0;
  204. }
  205. .conv {
  206. width: 100%;
  207. display: flex;
  208. gap: 8px;
  209. align-items: baseline;
  210. text-align: left;
  211. padding: 7px 8px;
  212. }
  213. .conv:hover {
  214. background: var(--accent-soft);
  215. }
  216. .conv.active {
  217. background: var(--glass-strong);
  218. box-shadow: inset 0 0 0 1px var(--glass-border);
  219. }
  220. .conv-title {
  221. flex: 1;
  222. min-width: 0;
  223. white-space: nowrap;
  224. overflow: hidden;
  225. text-overflow: ellipsis;
  226. }
  227. .conv-cost {
  228. font-size: 11px;
  229. color: var(--text-3);
  230. font-variant-numeric: tabular-nums;
  231. }
  232. .sidebar-foot {
  233. border-top: 1px solid var(--hairline);
  234. padding: 10px 12px 12px;
  235. display: grid;
  236. gap: 6px;
  237. }
  238. .sidebar-foot .row {
  239. justify-content: space-between;
  240. }
  241. .spend {
  242. display: grid;
  243. gap: 5px;
  244. text-align: left;
  245. width: 100%;
  246. padding: 8px;
  247. }
  248. .spend:hover {
  249. background: var(--accent-soft);
  250. }
  251. .spend-row {
  252. display: flex;
  253. justify-content: space-between;
  254. font-size: 12px;
  255. color: var(--text-2);
  256. }
  257. .spend-row strong {
  258. color: var(--text-1);
  259. font-variant-numeric: tabular-nums;
  260. }
  261. .spend-sub {
  262. font-size: 11px;
  263. color: var(--text-3);
  264. }
  265. .bar {
  266. height: 5px;
  267. border-radius: 5px;
  268. background: var(--hairline);
  269. overflow: hidden;
  270. }
  271. .bar span {
  272. display: block;
  273. height: 100%;
  274. background: linear-gradient(90deg, var(--teal), var(--accent));
  275. border-radius: 5px;
  276. }
  277. .spend.level-1 .bar span {
  278. background: var(--warn);
  279. }
  280. .spend.level-2 .bar span {
  281. background: var(--danger);
  282. }
  284. /* ---- main column --------------------------------------------------------- */
  285. .main {
  286. display: flex;
  287. flex-direction: column;
  288. min-width: 0;
  289. min-height: 0;
  290. position: relative;
  291. }
  292. .chat-header {
  293. display: flex;
  294. align-items: center;
  295. gap: 12px;
  296. padding: 8px 6px 8px 14px;
  297. min-height: 48px;
  298. }
  299. .title-wrap {
  300. flex: 1;
  301. min-width: 0;
  302. display: flex;
  303. align-items: baseline;
  304. gap: 10px;
  305. }
  306. .chat-title {
  307. font-size: 15px;
  308. font-weight: 600;
  309. margin: 0;
  310. white-space: nowrap;
  311. overflow: hidden;
  312. text-overflow: ellipsis;
  313. }
  314. .title-input {
  315. font-size: 15px;
  316. font-weight: 600;
  317. width: min(420px, 100%);
  318. }
  319. .chat-total {
  320. font-size: 12px;
  321. color: var(--text-3);
  322. font-variant-numeric: tabular-nums;
  323. white-space: nowrap;
  324. }
  325. .header-actions {
  326. display: flex;
  327. gap: 4px;
  328. align-items: center;
  329. }
  330. .anchor {
  331. position: relative;
  332. }
  333. .model-button {
  334. display: flex;
  335. align-items: baseline;
  336. gap: 8px;
  337. border-radius: 999px;
  338. padding: 5px 12px;
  339. max-width: 340px;
  340. }
  341. .model-button-name {
  342. font-weight: 600;
  343. white-space: nowrap;
  344. overflow: hidden;
  345. text-overflow: ellipsis;
  346. }
  347. .model-button-price {
  348. font-size: 11px;
  349. color: var(--text-3);
  350. white-space: nowrap;
  351. }
  353. /* ---- popovers and menus -------------------------------------------------- */
  354. .popover {
  355. position: absolute;
  356. top: calc(100% + 6px);
  357. right: 0;
  358. z-index: 30;
  359. border-radius: var(--radius);
  360. padding: 6px;
  361. animation: pop 140ms var(--ease);
  362. }
  363. @keyframes pop {
  364. from {
  365. opacity: 0;
  366. transform: translateY(-4px) scale(0.98);
  367. }
  368. }
  369. .menu {
  370. min-width: 190px;
  371. display: grid;
  372. }
  373. .menu button {
  374. text-align: left;
  375. padding: 6px 10px;
  376. }
  377. .menu button:hover {
  378. background: var(--accent-soft);
  379. }
  380. .menu button.checked::before {
  381. content: '\2713';
  382. margin-right: 6px;
  383. }
  384. .menu hr {
  385. border: 0;
  386. border-top: 1px solid var(--hairline);
  387. margin: 4px 0;
  388. }
  389. .model-picker {
  390. width: min(560px, calc(100vw - 40px));
  391. display: grid;
  392. gap: 8px;
  393. padding: 10px;
  394. }
  395. .search-input {
  396. width: 100%;
  397. font-size: 14px;
  398. }
  399. .search-input.big {
  400. font-size: 17px;
  401. padding: 12px 14px;
  402. border: 0;
  403. border-bottom: 1px solid var(--hairline);
  404. border-radius: 0;
  405. background: transparent;
  406. box-shadow: none;
  407. }
  408. .filters {
  409. display: flex;
  410. gap: 6px;
  411. flex-wrap: wrap;
  412. }
  413. .model-head,
  414. .model-row {
  415. display: grid;
  416. grid-template-columns: 1fr 128px 56px;
  417. gap: 10px;
  418. align-items: center;
  419. }
  420. .model-head {
  421. font-size: 11px;
  422. color: var(--text-3);
  423. padding: 0 8px;
  424. text-transform: uppercase;
  425. letter-spacing: 0.05em;
  426. }
  427. .model-list {
  428. list-style: none;
  429. margin: 0;
  430. padding: 0;
  431. max-height: 360px;
  432. overflow-y: auto;
  433. }
  434. .model-row {
  435. padding: 6px 8px;
  436. border-radius: var(--radius-sm);
  437. }
  438. .model-row.cursor {
  439. background: var(--accent-soft);
  440. }
  441. .model-row.selected .model-id {
  442. color: var(--accent);
  443. font-weight: 600;
  444. }
  445. .model-name {
  446. display: flex;
  447. align-items: center;
  448. gap: 6px;
  449. min-width: 0;
  450. }
  451. .model-id {
  452. white-space: nowrap;
  453. overflow: hidden;
  454. text-overflow: ellipsis;
  455. }
  456. .model-price,
  457. .model-ctx {
  458. font-size: 12px;
  459. color: var(--text-2);
  460. font-variant-numeric: tabular-nums;
  461. text-align: right;
  462. }
  463. .star {
  464. padding: 0 2px;
  465. color: var(--hairline);
  466. font-size: 13px;
  467. }
  468. .star.on {
  469. color: #e0a526;
  470. }
  471. .tag {
  472. font-size: 10px;
  473. padding: 0 6px;
  474. border-radius: 999px;
  475. background: var(--accent-soft);
  476. color: var(--text-2);
  477. white-space: nowrap;
  478. }
  479. .tag.local {
  480. background: rgba(15, 125, 114, 0.15);
  481. }
  482. .picker-foot {
  483. display: flex;
  484. justify-content: space-between;
  485. align-items: center;
  486. gap: 8px;
  487. }
  488. .empty-row {
  489. padding: 12px;
  490. color: var(--text-3);
  491. list-style: none;
  492. }
  494. /* ---- the thread ---------------------------------------------------------- */
  495. .chat-scroll {
  496. flex: 1;
  497. overflow-y: auto;
  498. min-height: 0;
  499. }
  500. .thread {
  501. max-width: 780px;
  502. margin: 0 auto;
  503. padding: 12px 24px 24px;
  504. display: grid;
  505. gap: 18px;
  506. }
  507. .system-prompt {
  508. font-size: 12px;
  509. color: var(--text-2);
  510. border-left: 2px solid var(--accent-soft);
  511. padding: 4px 10px;
  512. }
  513. .system-prompt summary {
  514. cursor: default;
  515. color: var(--text-3);
  516. }
  517. .msg.user {
  518. justify-self: end;
  519. max-width: 82%;
  520. display: grid;
  521. justify-items: end;
  522. gap: 4px;
  523. }
  524. .msg.user .bubble {
  525. background: var(--user-bubble);
  526. border: 1px solid var(--glass-border);
  527. border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
  528. padding: 9px 14px;
  529. display: grid;
  530. gap: 8px;
  531. }
  532. .user-text {
  533. white-space: pre-wrap;
  534. overflow-wrap: anywhere;
  535. }
  536. .msg-actions {
  537. opacity: 0;
  538. transition: opacity 120ms;
  539. display: flex;
  540. gap: 2px;
  541. }
  542. .msg:hover .msg-actions,
  543. .msg:focus-within .msg-actions {
  544. opacity: 1;
  545. }
  546. .msg.assistant {
  547. display: grid;
  548. gap: 6px;
  549. }
  550. .msg-meta {
  551. display: flex;
  552. align-items: center;
  553. flex-wrap: wrap;
  554. gap: 4px 10px;
  555. font-size: 12px;
  556. color: var(--text-3);
  557. }
  558. .msg-meta button {
  559. opacity: 0;
  560. }
  561. .msg:hover .msg-meta button,
  562. .msg:focus-within .msg-meta button {
  563. opacity: 1;
  564. }
  565. .model-tag {
  566. font-weight: 600;
  567. color: var(--text-2);
  568. }
  569. .cost-line {
  570. font-variant-numeric: tabular-nums;
  571. }
  572. .cost-line strong {
  573. color: var(--text-2);
  574. font-weight: 600;
  575. }
  576. .est {
  577. margin-left: 4px;
  578. text-decoration: none;
  579. font-size: 11px;
  580. padding: 0 5px;
  581. border-radius: 999px;
  582. background: var(--warn-bg);
  583. color: var(--warn);
  584. }
  585. .msg-error {
  586. color: var(--danger);
  587. background: var(--danger-bg);
  588. border-radius: var(--radius-sm);
  589. padding: 8px 12px;
  590. font-size: 13px;
  591. }
  592. .msg-note {
  593. color: var(--text-3);
  594. font-size: 12px;
  595. font-style: italic;
  596. }
  597. .reasoning {
  598. font-size: 13px;
  599. color: var(--text-2);
  600. }
  601. .reasoning summary {
  602. color: var(--text-3);
  603. font-size: 12px;
  604. }
  605. .reasoning-text {
  606. white-space: pre-wrap;
  607. border-left: 2px solid var(--hairline);
  608. padding: 4px 10px;
  609. margin-top: 4px;
  610. }
  611. .edit {
  612. display: grid;
  613. gap: 8px;
  614. min-width: min(520px, 70vw);
  615. }
  616. .typing {
  617. display: flex;
  618. gap: 4px;
  619. padding: 6px 0;
  620. }
  621. .typing span {
  622. width: 6px;
  623. height: 6px;
  624. border-radius: 50%;
  625. background: var(--text-3);
  626. animation: blink 1.1s infinite;
  627. }
  628. .typing span:nth-child(2) {
  629. animation-delay: 0.18s;
  630. }
  631. .typing span:nth-child(3) {
  632. animation-delay: 0.36s;
  633. }
  634. @keyframes blink {
  635. 50% {
  636. opacity: 0.25;
  637. }
  638. }
  639. .caret {
  640. display: inline-block;
  641. width: 7px;
  642. height: 15px;
  643. background: var(--accent);
  644. border-radius: 2px;
  645. animation: blink 1s infinite;
  646. margin-top: -4px;
  647. }
  648. .msg-image {
  649. margin: 0;
  650. width: min(360px, 100%);
  651. border-radius: var(--radius);
  652. overflow: hidden;
  653. background: var(--hairline);
  654. }
  655. .msg-image img {
  656. width: 100%;
  657. height: 100%;
  658. object-fit: cover;
  659. display: block;
  660. }
  662. /* ---- markdown ------------------------------------------------------------ */
  663. .md {
  664. line-height: 1.62;
  665. overflow-wrap: anywhere;
  666. }
  667. .md > :first-child {
  668. margin-top: 0;
  669. }
  670. .md > :last-child {
  671. margin-bottom: 0;
  672. }
  673. .md p,
  674. .md ul,
  675. .md ol,
  676. .md table {
  677. margin: 0 0 10px;
  678. }
  679. .md h1,
  680. .md h2,
  681. .md h3 {
  682. font-size: 15px;
  683. margin: 16px 0 6px;
  684. }
  685. .md a {
  686. color: var(--accent);
  687. }
  688. .md code {
  689. font-family: var(--mono);
  690. font-size: 12.5px;
  691. background: var(--code-bg);
  692. padding: 1px 5px;
  693. border-radius: 5px;
  694. }
  695. .md pre code {
  696. background: none;
  697. padding: 0;
  698. }
  699. .md table {
  700. border-collapse: collapse;
  701. font-size: 13px;
  702. display: block;
  703. overflow-x: auto;
  704. }
  705. .md th,
  706. .md td {
  707. border-bottom: 1px solid var(--hairline);
  708. padding: 5px 12px 5px 0;
  709. text-align: left;
  710. }
  711. .md th {
  712. color: var(--text-2);
  713. font-weight: 600;
  714. }
  715. .md blockquote {
  716. margin: 0 0 10px;
  717. padding-left: 12px;
  718. border-left: 3px solid var(--accent-soft);
  719. color: var(--text-2);
  720. }
  721. .codeblock {
  722. border-radius: var(--radius);
  723. background: var(--code-bg);
  724. border: 1px solid var(--hairline);
  725. margin: 0 0 12px;
  726. overflow: hidden;
  727. }
  728. .codeblock-bar {
  729. display: flex;
  730. justify-content: space-between;
  731. align-items: center;
  732. padding: 3px 6px 3px 12px;
  733. font-size: 11px;
  734. color: var(--text-3);
  735. border-bottom: 1px solid var(--hairline);
  736. }
  737. .codeblock pre {
  738. margin: 0;
  739. padding: 10px 12px;
  740. overflow-x: auto;
  741. font-family: var(--mono);
  742. font-size: 12.5px;
  743. line-height: 1.55;
  744. }
  745. .md-img {
  746. color: var(--text-3);
  747. font-style: italic;
  748. }
  750. /* ---- composer ------------------------------------------------------------ */
  751. .composer-wrap {
  752. padding: 0 24px 12px;
  753. }
  754. .composer {
  755. max-width: 780px;
  756. margin: 0 auto;
  757. border-radius: var(--radius-lg);
  758. padding: 10px 10px 8px 14px;
  759. display: grid;
  760. gap: 6px;
  761. -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
  762. backdrop-filter: blur(var(--blur)) saturate(var(--saturate));
  763. }
  764. .composer.dragging {
  765. box-shadow: var(--focus), var(--shadow);
  766. }
  767. .composer textarea {
  768. resize: none;
  769. border: 0;
  770. background: transparent;
  771. padding: 4px 0;
  772. font-size: 14.5px;
  773. line-height: 1.5;
  774. max-height: 240px;
  775. box-shadow: none;
  776. }
  777. .composer-bar {
  778. display: flex;
  779. align-items: center;
  780. gap: 8px;
  781. }
  782. .estimate {
  783. flex: 1;
  784. font-size: 12px;
  785. color: var(--text-3);
  786. font-variant-numeric: tabular-nums;
  787. }
  788. .estimate.over {
  789. color: var(--danger);
  790. }
  791. .send {
  792. padding: 6px 16px;
  793. }
  794. .stop {
  795. padding: 6px 16px;
  796. background: var(--danger-bg);
  797. color: var(--danger);
  798. font-weight: 600;
  799. }
  800. .chips {
  801. display: flex;
  802. flex-wrap: wrap;
  803. gap: 6px;
  804. }
  805. .chip {
  806. display: flex;
  807. align-items: center;
  808. gap: 6px;
  809. max-width: 220px;
  810. border: 1px solid var(--hairline);
  811. background: var(--glass-tint);
  812. border-radius: var(--radius-sm);
  813. padding: 3px 4px 3px 3px;
  814. font-size: 12px;
  815. }
  816. .chip img,
  817. .chip-thumb {
  818. width: 26px;
  819. height: 26px;
  820. border-radius: 5px;
  821. object-fit: cover;
  822. background: var(--hairline);
  823. }
  824. .chip-icon {
  825. font-size: 9px;
  826. font-weight: 700;
  827. padding: 5px 4px;
  828. border-radius: 5px;
  829. background: var(--accent-soft);
  830. color: var(--accent);
  831. }
  832. .chip-name {
  833. white-space: nowrap;
  834. overflow: hidden;
  835. text-overflow: ellipsis;
  836. }
  837. .chip-x {
  838. padding: 0 5px;
  839. font-size: 15px;
  840. line-height: 18px;
  841. color: var(--text-3);
  842. }
  844. /* ---- empty state --------------------------------------------------------- */
  845. .empty {
  846. max-width: 560px;
  847. margin: 12vh auto 0;
  848. padding: 0 24px;
  849. text-align: center;
  850. display: grid;
  851. gap: 10px;
  852. justify-items: center;
  853. }
  854. .empty h1 {
  855. font-size: 24px;
  856. font-weight: 650;
  857. margin: 8px 0 0;
  858. letter-spacing: -0.01em;
  859. }
  860. .empty-mark {
  861. width: 54px;
  862. height: 54px;
  863. border-radius: 16px;
  864. background:
  865. radial-gradient(circle at 70% 30%, var(--teal) 0 14%, transparent 15%),
  866. conic-gradient(from 210deg, var(--accent), var(--teal), var(--accent));
  867. -webkit-mask: radial-gradient(circle, transparent 11px, #000 12px);
  868. mask: radial-gradient(circle, transparent 11px, #000 12px);
  869. opacity: 0.9;
  870. }
  871. .suggestions {
  872. display: grid;
  873. gap: 8px;
  874. width: 100%;
  875. margin-top: 18px;
  876. }
  877. .suggestion {
  878. text-align: left;
  879. padding: 10px 14px;
  880. border-radius: var(--radius);
  881. color: var(--text-2);
  882. }
  883. .suggestion:hover {
  884. color: var(--text-1);
  885. background: var(--glass-strong);
  886. }
  888. /* ---- banners, toasts ----------------------------------------------------- */
  889. .budget-banner {
  890. margin: 0 24px 8px;
  891. padding: 7px 12px;
  892. border-radius: var(--radius-sm);
  893. font-size: 13px;
  894. }
  895. .budget-banner.near {
  896. background: var(--warn-bg);
  897. color: var(--warn);
  898. }
  899. .budget-banner.over {
  900. background: var(--danger-bg);
  901. color: var(--danger);
  902. }
  903. .toasts {
  904. position: fixed;
  905. bottom: 18px;
  906. left: 50%;
  907. transform: translateX(-50%);
  908. display: grid;
  909. gap: 8px;
  910. z-index: 60;
  911. pointer-events: none;
  912. }
  913. .toast {
  914. border-radius: var(--radius);
  915. padding: 9px 14px;
  916. font-size: 13px;
  917. max-width: min(520px, 90vw);
  918. animation: pop 160ms var(--ease);
  919. }
  920. .toast.error {
  921. color: var(--danger);
  922. }
  924. /* ---- overlays: search, settings, usage ----------------------------------- */
  925. .overlay {
  926. position: fixed;
  927. inset: 0;
  928. z-index: 40;
  929. background: rgba(10, 8, 20, 0.22);
  930. display: grid;
  931. justify-items: center;
  932. align-items: start;
  933. padding: 9vh 16px 16px;
  934. animation: fade 140ms var(--ease);
  935. }
  936. @keyframes fade {
  937. from {
  938. opacity: 0;
  939. }
  940. }
  941. .palette {
  942. width: min(640px, 100%);
  943. border-radius: var(--radius-lg);
  944. overflow: hidden;
  945. }
  946. .hits {
  947. list-style: none;
  948. margin: 0;
  949. padding: 6px;
  950. max-height: 56vh;
  951. overflow-y: auto;
  952. }
  953. .hits li {
  954. padding: 9px 10px;
  955. border-radius: var(--radius-sm);
  956. display: grid;
  957. gap: 2px;
  958. }
  959. .hits li.cursor {
  960. background: var(--accent-soft);
  961. }
  962. .hit-head {
  963. display: flex;
  964. justify-content: space-between;
  965. gap: 10px;
  966. }
  967. .hit-snippet {
  968. font-size: 13px;
  969. color: var(--text-2);
  970. }
  971. mark {
  972. background: rgba(255, 196, 92, 0.45);
  973. color: inherit;
  974. border-radius: 3px;
  975. padding: 0 2px;
  976. }
  977. .sheet {
  978. width: min(720px, 100%);
  979. max-height: 84vh;
  980. border-radius: var(--radius-lg);
  981. display: flex;
  982. flex-direction: column;
  983. overflow: hidden;
  984. }
  985. .sheet-head {
  986. display: flex;
  987. align-items: center;
  988. gap: 12px;
  989. padding: 14px 16px;
  990. border-bottom: 1px solid var(--hairline);
  991. }
  992. .sheet-head h2 {
  993. margin: 0;
  994. font-size: 16px;
  995. flex: 1;
  996. }
  997. .sheet-body {
  998. overflow-y: auto;
  999. padding: 8px 18px 22px;
  1000. }
  1001. .sheet-body h3 {
  1002. font-size: 12px;
  1003. text-transform: uppercase;
  1004. letter-spacing: 0.06em;
  1005. color: var(--text-3);
  1006. margin: 20px 0 8px;
  1007. }
  1008. .settings section {
  1009. display: grid;
  1010. gap: 10px;
  1011. }
  1012. .field {
  1013. display: grid;
  1014. gap: 6px;
  1015. font-size: 13px;
  1016. color: var(--text-2);
  1017. }
  1018. .field input,
  1019. .field select,
  1020. .field textarea {
  1021. color: var(--text-1);
  1022. }
  1023. .hint {
  1024. margin: 0;
  1025. font-size: 12px;
  1026. color: var(--text-3);
  1027. }
  1028. .check {
  1029. display: flex;
  1030. gap: 8px;
  1031. align-items: center;
  1032. font-size: 13px;
  1033. }
  1034. .check input {
  1035. accent-color: var(--accent);
  1036. }
  1037. label.inline {
  1038. display: flex;
  1039. align-items: center;
  1040. gap: 6px;
  1041. font-size: 13px;
  1042. }
  1043. label.inline input {
  1044. width: 70px;
  1045. }
  1046. .provider-row,
  1047. .preset-list li {
  1048. display: flex;
  1049. justify-content: space-between;
  1050. gap: 10px;
  1051. align-items: center;
  1052. padding: 10px 12px;
  1053. border-radius: var(--radius);
  1054. }
  1055. .preset-list {
  1056. list-style: none;
  1057. margin: 0;
  1058. padding: 0;
  1059. display: grid;
  1060. gap: 6px;
  1061. }
  1062. .clamp {
  1063. display: -webkit-box;
  1064. -webkit-line-clamp: 2;
  1065. -webkit-box-orient: vertical;
  1066. overflow: hidden;
  1067. }
  1068. .shortcut {
  1069. border: 1px solid var(--hairline);
  1070. background: var(--glass-tint);
  1071. min-width: 160px;
  1072. font-size: 15px;
  1073. letter-spacing: 0.04em;
  1074. }
  1075. .shortcut.recording {
  1076. border-color: var(--accent);
  1077. box-shadow: var(--focus);
  1078. font-size: 13px;
  1079. }
  1080. .path {
  1081. color: var(--text-2);
  1082. overflow: hidden;
  1083. text-overflow: ellipsis;
  1084. white-space: nowrap;
  1085. }
  1086. .stat-row {
  1087. display: grid;
  1088. grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  1089. gap: 8px;
  1090. margin-top: 12px;
  1091. }
  1092. .stat {
  1093. border-radius: var(--radius);
  1094. padding: 10px 12px;
  1095. display: grid;
  1096. gap: 2px;
  1097. }
  1098. .stat strong {
  1099. font-size: 18px;
  1100. font-variant-numeric: tabular-nums;
  1101. }
  1102. .bars {
  1103. list-style: none;
  1104. margin: 0;
  1105. padding: 0;
  1106. display: grid;
  1107. gap: 6px;
  1108. }
  1109. .bars li {
  1110. display: grid;
  1111. grid-template-columns: minmax(0, 200px) 1fr 80px;
  1112. gap: 10px;
  1113. align-items: center;
  1114. font-size: 13px;
  1115. }
  1116. .bar-label {
  1117. overflow: hidden;
  1118. text-overflow: ellipsis;
  1119. white-space: nowrap;
  1120. }
  1121. .bar-track {
  1122. height: 8px;
  1123. background: var(--hairline);
  1124. border-radius: 8px;
  1125. overflow: hidden;
  1126. }
  1127. .bar-fill {
  1128. display: block;
  1129. height: 100%;
  1130. background: linear-gradient(90deg, var(--teal), var(--accent));
  1131. border-radius: 8px;
  1132. }
  1133. .bar-value {
  1134. text-align: right;
  1135. font-variant-numeric: tabular-nums;
  1136. color: var(--text-2);
  1137. }
  1138. .days {
  1139. display: flex;
  1140. align-items: flex-end;
  1141. gap: 4px;
  1142. height: 120px;
  1143. padding-top: 8px;
  1144. overflow-x: auto;
  1145. }
  1146. .day {
  1147. flex: 1 0 22px;
  1148. display: grid;
  1149. grid-template-rows: 1fr auto;
  1150. height: 100%;
  1151. gap: 4px;
  1152. }
  1153. .day-fill {
  1154. align-self: end;
  1155. background: linear-gradient(180deg, var(--accent), var(--teal));
  1156. border-radius: 4px 4px 1px 1px;
  1157. min-height: 3px;
  1158. }
  1159. .day-label {
  1160. font-size: 10px;
  1161. color: var(--text-3);
  1162. text-align: center;
  1163. }
  1165. /* ---- the quick window ---------------------------------------------------- */
  1166. .quick-window body {
  1167. background: transparent;
  1168. }
  1169. :root.quick-window[data-vibrancy='none'] body {
  1170. background: var(--backdrop);
  1171. }
  1172. .quick {
  1173. height: 100%;
  1174. border-radius: 14px;
  1175. display: flex;
  1176. flex-direction: column;
  1177. overflow: hidden;
  1178. }
  1179. :root[data-vibrancy='native'] .quick {
  1180. border: 0;
  1181. box-shadow: none;
  1182. background: transparent;
  1183. }
  1184. .quick-row {
  1185. display: flex;
  1186. align-items: center;
  1187. gap: 12px;
  1188. padding: 0 18px;
  1189. height: 76px;
  1190. flex: none;
  1191. }
  1192. .quick-mark {
  1193. width: 22px;
  1194. height: 22px;
  1195. border-radius: 50%;
  1196. border: 4px solid var(--accent);
  1197. border-right-color: transparent;
  1198. transform: rotate(45deg);
  1199. flex: none;
  1200. }
  1201. .quick-input {
  1202. flex: 1;
  1203. font-size: 20px;
  1204. border: 0;
  1205. background: transparent;
  1206. padding: 0;
  1207. box-shadow: none !important;
  1208. }
  1209. .quick-model {
  1210. font-size: 12px;
  1211. color: var(--text-3);
  1212. white-space: nowrap;
  1213. }
  1214. .quick-body {
  1215. border-top: 1px solid var(--hairline);
  1216. padding: 12px 18px 12px;
  1217. overflow-y: auto;
  1218. display: grid;
  1219. gap: 8px;
  1220. }
  1221. .quick-foot {
  1222. display: flex;
  1223. align-items: center;
  1224. gap: 8px;
  1225. font-size: 12px;
  1226. color: var(--text-3);
  1227. }
  1229. /* ---- narrow windows ------------------------------------------------------ */
  1230. @media (max-width: 860px) {
  1231. .app {
  1232. grid-template-columns: 220px 1fr;
  1233. }
  1234. .model-button-price {
  1235. display: none;
  1236. }
  1237. .thread {
  1238. padding: 8px 14px 20px;
  1239. }
  1240. .composer-wrap {
  1241. padding: 0 12px 10px;
  1242. }
  1243. }