/* v3-only component tokens. Changes here never affect the existing Brief. */
.v3-brief {
  --v3-brief-height: 64px;
  --v3-brief-font-size: 22px;
  --v3-brief-label-width: 130px;
  --v3-brief-padding-start: 32px;
  --v3-brief-padding-end: 24px;
  --v3-brief-logos-width: 192px;
  --v3-brief-gap: 22px;
  --v3-brief-logo-scale: 1;
  --v3-brief-background: var(--v3-glass-surface);
  --v3-brief-color: var(--v3-ink);
  --v3-brief-radius: 100px;
  max-width: 100%;
  min-width: 0;
}
.v3-brief__button {
  isolation: isolate;
  position: relative;
  box-sizing: border-box;
  width: calc(var(--v3-brief-padding-start) + var(--v3-brief-label-width) + var(--v3-brief-gap) + var(--v3-brief-logos-width) * var(--v3-brief-logo-scale) + var(--v3-brief-padding-end));
  appearance: none;
  display: flex; align-items: center;
  min-height: var(--v3-brief-height);
  padding: 0 var(--v3-brief-padding-end) 0 var(--v3-brief-padding-start);
  gap: var(--v3-brief-gap);
  border: 0; border-radius: var(--v3-brief-radius);
  background: transparent; color: var(--v3-brief-color);
  box-shadow: 0 3px 16px #00000008;
  font: 500 var(--v3-brief-font-size)/36px 'DM Sans', sans-serif;
  font-optical-sizing: none; font-variation-settings: 'opsz' 14;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.v3-brief__button:hover { box-shadow: 0 3px 16px #00000010, 0 8px 28px #00000008; }
.v3-brief__filters { position: absolute; pointer-events: none; }
.v3-brief__glass {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 1;
  background: var(--v3-glass-sheen), var(--v3-brief-background);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--v3-glass-edge);
}
.v3-brief__glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--v3-glass-highlight); }
.v3-brief__content { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--v3-brief-gap); width: 100%; }
.v3-brief__wave {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; opacity: 0; transform: scale(.985, .94);
  box-shadow: inset 0 0 0 1px #ffffffd9, 0 0 0 1px #8e94a51c, 0 2px 9px #a7adbb14;
  filter: blur(2px);
}
.v3-page-waves { position: fixed; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.v3-page-wave {
  position: absolute; width: 160px; height: 160px; border-radius: 50%; opacity: 0;
  transform: translate(-50%, -50%) scale(0); pointer-events: none;
  background: radial-gradient(circle, transparent 43%, #ffffff00 47%, #ffffffa6 57%, #9aa1b314 66%, #ffffff00 78%, transparent 82%);
}
.v3-brief__button:focus-visible { outline: 2px solid var(--v3-focus); outline-offset: 5px; }
.v3-brief__button:disabled { cursor: default; }
.v3-brief__label { position: relative; flex: 0 0 var(--v3-brief-label-width); height: 36px; white-space: nowrap; }
.v3-brief__idle, .v3-brief__copied { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; transform: translateZ(0); backface-visibility: hidden; will-change: opacity; }
/* Identical line boxes and persistent compositing keep glyphs on one baseline
   when Safari promotes/demotes the fading label layers. */
.v3-brief__text { display: block; height: 36px; line-height: 36px; }
/* Reveal the confirmation immediately and fade back to the idle label. */
.v3-brief__idle { opacity: 1; visibility: visible; transition: opacity 180ms ease 180ms, visibility 0s linear; }
.v3-brief__copied { opacity: 0; visibility: hidden; transition: opacity 140ms ease, visibility 0s linear 140ms; }
.is-copied .v3-brief__idle { opacity: 0; visibility: hidden; transition: none; }
.is-copied .v3-brief__copied { opacity: 1; visibility: visible; transition: none; }
.v3-brief__check { display: block; width: 24px; height: 24px; flex: 0 0 24px; }
.v3-brief__check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1);
}
@media (prefers-reduced-motion: no-preference) {
  .is-copied .v3-brief__copied .v3-brief__text {
    animation: v3-brief-copied-in 180ms ease;
  }
  @keyframes v3-brief-copied-in {
    from { opacity: 0; }
  }
  .v3-brief__button.is-copied.is-check-drawing .v3-brief__check path {
    /* Draw at once and hold the final frame until the confirmation fades out. */
    animation: v3-brief-check-draw 600ms ease-in-out both;
  }
  @keyframes v3-brief-check-draw {
    from { stroke-dashoffset: 1; opacity: 0; transform: scale(1); }
    50% { transform: scale(1.1); }
    to { stroke-dashoffset: 0; opacity: 1; transform: scale(1); }
  }
}
.v3-brief__logos-space { display: block; position: relative; flex: 0 0 calc(var(--v3-brief-logos-width) * var(--v3-brief-logo-scale)); width: calc(var(--v3-brief-logos-width) * var(--v3-brief-logo-scale)); height: calc(28px * var(--v3-brief-logo-scale)); }
.v3-brief__logos { position: absolute; left: 0; top: 0; display: flex; gap: 13px; transform: translateZ(0) scale(var(--v3-brief-logo-scale)); transform-origin: top left; }
.v3-brief__icon.v3-brief__icon--cursor { display: flex; align-items: center; justify-content: center; }
.v3-brief__icon { display: block; position: relative; flex: 0 0 28px; width: 28px; height: 28px; }
/* Preserve the original SVG dimensions; decorative marks arrive inline with the button. */
.v3-brief__icon img { display: block; max-width: none; }
.v3-brief__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.v3-brief__manual { box-sizing: border-box; width: 408px; max-width: 100%; margin-top: 20px; font-size: 16px; line-height: 1.5; }
.v3-brief__manual label { display: block; margin-bottom: 8px; }
.v3-brief__manual textarea { box-sizing: border-box; width: 100%; padding: 12px; border: 1px solid #757575; border-radius: 12px; background: var(--v3-card-solid); color: var(--v3-ink); font: inherit; resize: vertical; }
@media (max-width: 600px) {
  .v3-brief { --v3-brief-height: 60px; --v3-brief-font-size: 18px; --v3-brief-label-width: 110px; --v3-brief-padding-start: 28px; --v3-brief-padding-end: 28px; --v3-brief-gap: 12px; --v3-brief-logo-scale: .75; }
}
/* Preserve the new trailing inset on narrow phones without reducing text. */
@media (min-width:360px) and (max-width:369px) { .v3-brief { --v3-brief-logo-scale:.69; } }
@media (max-width: 359px) {
  .v3-brief { --v3-brief-height: 56px; --v3-brief-font-size: 17px; --v3-brief-label-width: 98px; --v3-brief-padding-start: 28px; --v3-brief-padding-end: 24px; --v3-brief-gap: 8px; --v3-brief-logo-scale: .59; }
}
@media (prefers-reduced-motion: reduce) { .v3-brief__button, .v3-brief .v3-brief__label > span { transition: none; } }
@supports not ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) { .v3-brief__glass { background: var(--v3-glass-solid); } }

/* Keep the same compositor origin before, during and after the logo wave.
   Fractional mobile scaling must not switch back to a differently snapped raster. */
.v3-brief__icon { transform:translate3d(0,0,0); backface-visibility:hidden; will-change:transform; }

/* Only monochrome assets change polarity; coloured product marks remain original. */
.v3-brief__icon--openai img,.v3-brief__icon--cursor img { filter:var(--v3-monochrome-filter); }