| ... | @@ -453,6 +453,10 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil | ... | @@ -453,6 +453,10 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil |
| 453 | inset: 0; | 453 | inset: 0; |
| 454 | border: 1px solid var(--chat-composer-outline); | 454 | border: 1px solid var(--chat-composer-outline); |
| 455 | border-radius: inherit; | 455 | border-radius: inherit; |
| | 456 | content: ""; |
| | 457 | } |
| | 458 | |
| | 459 | .chat-composer-glass-shell-with-context .chat-composer-glass-host::after { |
| 456 | /* Keep the attachment seam open; the strip continues the outer outline below. */ | 460 | /* Keep the attachment seam open; the strip continues the outer outline below. */ |
| 457 | clip-path: polygon( | 461 | clip-path: polygon( |
| 458 | 0 0, | 462 | 0 0, |
| ... | @@ -464,7 +468,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil | ... | @@ -464,7 +468,6 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil |
| 464 | 22px 100%, | 468 | 22px 100%, |
| 465 | 0 100% | 469 | 0 100% |
| 466 | ); | 470 | ); |
| 467 | content: ""; | | |
| 468 | } | 471 | } |
| 469 | | 472 | |
| 470 | .chat-composer-context-strip { | 473 | .chat-composer-context-strip { |
| ... | @@ -512,6 +515,36 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil | ... | @@ -512,6 +515,36 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil |
| 512 | box-shadow: 0 14px 32px -18px rgb(0 0 0 / 75%); | 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 | .alert-glass { | 548 | .alert-glass { |
| 516 | --alert-glass-tint: transparent; | 549 | --alert-glass-tint: transparent; |
| 517 | | 550 | |