| ... | ... | @@ -453,6 +453,10 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil |
| 453 | 453 | inset: 0; |
| 454 | 454 | border: 1px solid var(--chat-composer-outline); |
| 455 | 455 | border-radius: inherit; |
| 456 | content: ""; |
| 457 | } |
| 458 | |
| 459 | .chat-composer-glass-shell-with-context .chat-composer-glass-host::after { |
| 456 | 460 | /* Keep the attachment seam open; the strip continues the outer outline below. */ |
| 457 | 461 | clip-path: polygon( |
| 458 | 462 | 0 0, |
| ... | ... | @@ -464,7 +468,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil |
| 464 | 468 | 22px 100%, |
| 465 | 469 | 0 100% |
| 466 | 470 | ); |
| 467 | | content: ""; |
| 468 | 471 | } |
| 469 | 472 | |
| 470 | 473 | .chat-composer-context-strip { |
| ... | ... | @@ -512,6 +515,36 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil |
| 512 | 515 | box-shadow: 0 14px 32px -18px rgb(0 0 0 / 75%); |
| 513 | 516 | } |
| 514 | 517 | |
| 518 | @supports not (clip-path: shape(from 0 0, line to 1px 1px)) { |
| 519 | .chat-composer-glass-shell-with-context::before { |
| 520 | inset-block-end: var(--chat-composer-context-extension); |
| 521 | border-radius: 22px; |
| 522 | clip-path: none; |
| 523 | } |
| 524 | |
| 525 | .chat-composer-context-strip::before { |
| 526 | background: color-mix( |
| 527 | in srgb, |
| 528 | var(--chat-composer-glass-surface) var(--glass-opacity), |
| 529 | transparent |
| 530 | ); |
| 531 | -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); |
| 532 | backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); |
| 533 | } |
| 534 | |
| 535 | .dark .chat-composer-context-strip::before { |
| 536 | background: |
| 537 | linear-gradient( |
| 538 | to bottom, |
| 539 | transparent 0 1rem, |
| 540 | rgb(0 0 0 / 18%) 1rem, |
| 541 | transparent calc(1rem + 10px) |
| 542 | ), |
| 543 | linear-gradient(rgb(255 255 255 / 2%), rgb(255 255 255 / 2%)), |
| 544 | color-mix(in srgb, var(--chat-composer-glass-surface) var(--glass-opacity), transparent); |
| 545 | } |
| 546 | } |
| 547 | |
| 515 | 548 | .alert-glass { |
| 516 | 549 | --alert-glass-tint: transparent; |
| 517 | 550 | |