:root:has(.talk[open]) { overflow: hidden; }

.talk {
  width: min(940px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  overflow: visible;
  background: none;
  color: var(--ink);
}
.talk::backdrop { background: rgba(5, 6, 8, .8); }
.talk[open]::backdrop { animation: fade .14s ease-out both; }
.talk.is-closing { animation: talk-out .12s ease-in both; }
.talk.is-closing::backdrop { animation: fade-out .12s ease-in both; }
@keyframes talk-out { to { opacity: 0; transform: scale(.98); } }
@keyframes fade-out { to { opacity: 0; } }

.talk-in {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  border-radius: 28px;
  overflow: hidden;
  background: var(--grain), #131417;
  background-size: 180px, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 90px -30px rgba(0, 0, 0, .85);
}
.talk[open] .talk-in { animation: card-in .16s ease-out both; }
.talk .is-ready > .switch-thumb { transition: transform .2s var(--ease-out), width .2s var(--ease-out), height .2s var(--ease-out); }
.talk-media { position: relative; overflow: hidden; background: #0c0d0f; }
.talk-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.talk-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(19, 20, 23, 0) 58%, #131417 100%),
    linear-gradient(180deg, rgba(19, 20, 23, .3) 0%, rgba(19, 20, 23, 0) 28%, rgba(19, 20, 23, 0) 72%, rgba(19, 20, 23, .45) 100%);
  pointer-events: none;
}
.talk-card { position: relative; min-width: 0; padding: 28px 28px 24px 20px; }
@keyframes card-in { from { opacity: 0; transform: scale(.97); } }
@keyframes sheet-out { to { opacity: 0; transform: translateY(16px); } }
.talk-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.talk-top h2 { font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; }
.talk-x { border-radius: 50%; }
.talk-apps { display: grid; gap: 8px; margin-top: 22px; }
.talk-app {
  --tint: 214 219 228;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 10px 18px 10px 10px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  color: var(--ink);
  text-align: left;
  transition: background-color .2s;
}
.talk-app:hover { background: rgba(255, 255, 255, .07); }
.talk-ico { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; }
.talk-ico svg { width: 26px; height: 26px; }
.talk-app b { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.talk-app small { overflow: hidden; color: var(--ink-3); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.talk-app.is-copied small { color: var(--gold); }
.s-mail { --tint: 233 204 142; }

@media (max-width: 860px) {
  .talk { width: 100%; max-height: calc(100dvh - 12px); margin: auto 0 0; overflow: auto; overscroll-behavior: contain; }
  .talk.is-closing { animation-name: sheet-out; }
  .talk-in { position: relative; grid-template-columns: minmax(0, 1fr); margin: 0 8px 8px; border-radius: 24px; }
  .talk-media { position: absolute; z-index: 2; top: 18px; left: 18px; width: 48px; height: 48px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
  .talk-media::after { display: none; }
  .talk-card { padding: 20px 16px 16px; }
  .talk-top { min-height: 48px; }
  .talk-top h2 { padding-left: 60px; font-size: 26px; }
}
@media (max-width: 420px) {
  .talk-app small { display: none; }
}