/* Chat Detective — interactive chrome, November 2026.
   Home micro-interactions; shared menus; custom selects in clip submission.
   No animation on the expensive full-screen shader. */

/* Navigation: a soft luminous track and a moving underline. */
body[data-view="home"] .site-header .brand svg{
  transition:transform .36s cubic-bezier(.2,.7,.2,1),filter .36s ease;
}
body[data-view="home"] .site-header .brand:hover svg{
  transform:translateY(-2px) rotate(-8deg);
  filter:drop-shadow(0 2px 9px rgba(255,71,125,.49));
}
body[data-view="home"] .site-header .brand span{
  transition:color .28s ease,text-shadow .28s ease;
}
body[data-view="home"] .site-header .brand:hover span{
  color:#fff;text-shadow:0 0 17px rgba(255,139,197,.25);
}
body[data-view="home"] .desktop-nav .nav-link{
  isolation:isolate;
  padding-inline:12px;margin-inline:-12px;
  transition:color .25s ease,transform .30s cubic-bezier(.2,.75,.2,1),text-shadow .25s ease;
}
body[data-view="home"] .desktop-nav .nav-link::before{
  content:"";position:absolute;z-index:-1;inset:8px 2px 11px;border-radius:12px;
  background:radial-gradient(ellipse 78% 100% at 50% 50%,rgba(248,63,124,.22),rgba(228,52,107,.07) 58%,transparent 100%);
  opacity:0;transform:scale(.75);
  transition:opacity .30s ease,transform .38s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
body[data-view="home"] .desktop-nav .nav-link::after{
  content:"";position:absolute;left:20%;right:20%;bottom:9px;height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#ff8baf 24%,#ff396c 52%,#ff8baf 76%,transparent);
  box-shadow:0 0 11px rgba(255,66,131,.51);
  transform:scaleX(0);opacity:0;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .23s ease;
}
body[data-view="home"] .desktop-nav .nav-link:hover{
  color:#fff;transform:translateY(-1px);
  text-shadow:0 0 13px rgba(255,168,204,.42);
}
body[data-view="home"] .desktop-nav .nav-link:hover::before,
body[data-view="home"] .desktop-nav .nav-link.active::before{
  opacity:1;transform:scale(1);
}
body[data-view="home"] .desktop-nav .nav-link:hover::after,
body[data-view="home"] .desktop-nav .nav-link.active::after{
  opacity:1;transform:scaleX(1);
}
body[data-view="home"] .desktop-nav .nav-link.active::before{opacity:.45}

/* A quick refracted sheen slides across the two header controls on hover. */
body[data-view="home"] .site-header .cd-settings-trigger,
body[data-view="home"] .site-header #login-button{
  position:relative;isolation:isolate;overflow:hidden;
  transition:background .27s ease,border-color .27s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
body[data-view="home"] .site-header .cd-settings-trigger::before,
body[data-view="home"] .site-header #login-button::before{
  content:"";position:absolute;inset:-45% auto -45% -63%;width:48%;
  background:linear-gradient(95deg,transparent,rgba(255,252,255,.28),transparent);
  transform:skewX(-24deg) translateX(0);opacity:0;pointer-events:none;
  transition:transform .62s cubic-bezier(.18,.75,.26,1),opacity .22s ease;
}
body[data-view="home"] .site-header .cd-settings-trigger:hover::before,
body[data-view="home"] .site-header #login-button:hover::before{
  opacity:.9;transform:skewX(-24deg) translateX(380%);
}
body[data-view="home"] .site-header .cd-settings-trigger:hover,
body[data-view="home"] .site-header #login-button:hover{
  transform:translateY(-2px);
  background:linear-gradient(120deg,rgba(255,239,255,.25),rgba(71,35,80,.21),rgba(236,79,146,.24));
  border-color:rgba(255,221,244,.83);
  box-shadow:inset 0 1px rgba(255,255,255,.36),0 6px 22px rgba(228,36,99,.21);
}
body[data-view="home"] .site-header .cd-settings-trigger[aria-expanded="true"],
body[data-view="home"] .site-header #login-button[aria-expanded="true"]{
  background:linear-gradient(115deg,rgba(251,209,248,.29),rgba(116,42,103,.30));
  border-color:rgba(255,194,232,.76);
  box-shadow:0 0 20px rgba(236,60,134,.18),inset 0 1px rgba(255,255,255,.26);
}
body[data-view="home"] .site-header .cd-settings-trigger svg{
  transition:transform .40s cubic-bezier(.2,.8,.2,1),filter .25s ease;
}
body[data-view="home"] .site-header .cd-settings-trigger:hover svg{transform:rotate(28deg)}
body[data-view="home"] .site-header .cd-settings-trigger[aria-expanded="true"] svg{
  transform:rotate(70deg);filter:drop-shadow(0 0 4px rgba(255,175,208,.52));
}
body[data-view="home"] .site-header .cd-account-chevron{transition:transform .30s cubic-bezier(.2,.8,.2,1)}

/* Home page: entrance, hover and selection without continuous bobbing. */
/* Keep the homepage glass composited consistently from its first paint.
   Entry opacity/transform on these parents made copy and preview jump while
   temporarily changing the appearance of their translucent descendants. */
body[data-view="home"] .cde-preview{
  transition:transform .4s cubic-bezier(.2,.76,.2,1),border-color .3s ease,box-shadow .4s ease;
}
body[data-view="home"] .cde-preview:hover{
  transform:translateY(-3px);
  border-color:rgba(255,225,248,.68);
  box-shadow:0 34px 82px rgba(1,3,18,.50),0 0 42px rgba(242,60,129,.20),inset 0 1px rgba(255,252,255,.47);
}
body[data-view="home"] .cde-frame>img{
  transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .4s ease;
}
body[data-view="home"] .cde-preview:hover .cde-frame>img{
  transform:scale(1.025);filter:brightness(.97) saturate(1.03);
}
body[data-view="home"] .cde-cta{
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,background .3s ease,box-shadow .3s ease;
}
body[data-view="home"] .cde-cta::before{
  content:"";position:absolute;inset:0;width:47%;left:-53%;
  background:linear-gradient(105deg,transparent,rgba(255,248,255,.26),transparent);
  transform:skewX(-23deg);pointer-events:none;opacity:.6;
  transition:left .57s cubic-bezier(.17,.73,.2,1);
}
body[data-view="home"] .cde-cta:hover::before{left:124%}
body[data-view="home"] .cde-cta svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
body[data-view="home"] .cde-cta:hover svg{transform:translateX(4px)}
body[data-view="home"] .cde-cta:active{transform:translateY(0) scale(.985)}
body[data-view="home"] .cde-option{
  position:relative;overflow:hidden;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .25s ease,box-shadow .26s ease,background .25s ease;
}
body[data-view="home"] .cde-option:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 8px 20px rgba(4,3,17,.18),0 0 17px rgba(248,65,132,.14);
}
body[data-view="home"] .cde-option:active:not(:disabled){transform:translateY(0) scale(.985)}
body[data-view="home"] .cde-option.is-selected{animation:cdi-choice-tap .32s ease-out}
body[data-view="home"] .cde-mode-links a{
  transition:color .26s ease,text-shadow .26s ease,transform .28s cubic-bezier(.2,.8,.2,1);
}
body[data-view="home"] .cde-mode-links a:hover{
  color:#fff;transform:translateY(-1px);
  text-shadow:0 0 12px rgba(252,100,157,.41);
}
@keyframes cdi-choice-tap{
  0%{filter:brightness(1)}
  45%{filter:brightness(1.22)}
  100%{filter:brightness(1)}
}

/* v71: decorative glints on independent pseudo-elements only.
   Never animate opacity, filter or transform on a glass element or its parent:
   that changes the backdrop-filter composition and causes a loading-time jump. */
body[data-view="home"] :is(.cde-preview-notice,.cde-mode-picker .cde-mode-links,.cde-cta){
  position:relative;
}
body[data-view="home"] .cde-preview-notice::after,
body[data-view="home"] .cde-mode-picker .cde-mode-links::after,
body[data-view="home"] .cde-cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(105deg,transparent 31%,rgba(255,237,252,.13) 49%,transparent 66%);
  background-size:260% 100%;background-position:115% 0;
  clip-path:inset(0 round 12px);
  animation:cdi-glass-sheen 1.25s ease-out .1s 1 both;
}
body[data-view="home"] .cde-mode-picker .cde-mode-links::after{
  animation-delay:.32s;opacity:.75;
}
body[data-view="home"] .cde-cta::after{
  animation-delay:.55s;opacity:.9;
}
body[data-view="home"] .cde-preview::after{
  animation:cdi-preview-glint 1.4s ease-out .32s 1 both;
}
@keyframes cdi-glass-sheen{
  from{background-position:115% 0}
  to{background-position:-90% 0}
}
@keyframes cdi-preview-glint{
  from{opacity:.35}
  to{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  body[data-view="home"] :is(.cde-preview-notice,.cde-mode-picker .cde-mode-links,.cde-cta)::after,
  body[data-view="home"] .cde-preview::after{animation:none!important}
}

/* v77: regain the sense of a gentle route entrance without compositing the glass.
   Animate ink-only nodes. Never animate opacity/transform on page roots, cards,
   the #app container or other elements that own backdrop-filter. */
body[data-view="home"] .cde-kicker,
body[data-view="home"] .cde-copy>h1,
body[data-view="home"] .cde-tagline,
body[data-view="home"] .cde-mode-picker-label>span,
body[data-view="what-next"] .game-heading-area h1,
body[data-view="what-next"] .game-main .game-overline,
body[data-view="submit"] .submit-auth-gate h2,
body[data-view="submit"] .cd-studio-header h1,
body[data-view="about"] .cd-about-intro :is(.cd-about-kicker,h1,p){
  animation:cd77-ink-arrive .52s ease-out both;
}
body[data-view="home"] .cde-copy>h1,
body[data-view="what-next"] .game-heading-area h1,
body[data-view="submit"] .submit-auth-gate h2,
body[data-view="about"] .cd-about-intro h1{animation-delay:.07s}
body[data-view="home"] .cde-tagline,
body[data-view="home"] .cde-mode-picker-label>span,
body[data-view="about"] .cd-about-intro p{animation-delay:.14s}
@keyframes cd77-ink-arrive{
  from{opacity:.52;text-shadow:0 0 9px rgba(242,174,221,.12)}
  to{opacity:1;text-shadow:0 0 0 transparent}
}
@media(prefers-reduced-motion:reduce){
  body[data-view] :is(.cde-kicker,.cde-copy>h1,.cde-tagline,.cde-mode-picker-label>span,.game-heading-area h1,.game-overline,.submit-auth-gate h2,.cd-studio-header h1,.cd-about-intro h1,.cd-about-kicker,.cd-about-intro p){animation:none!important}
}

/* Shared dark-mode dropdowns: layered frosted glass instead of flat slabs. */
body.cdh-dark[data-view] .cd-settings-panel,
body.cdh-dark[data-view] .cd-account-menu{
  border:1px solid rgba(243,202,237,.39);
  border-radius:15px;
  background:
    radial-gradient(ellipse 85% 38% at 7% 0%,rgba(249,208,252,.16),transparent 76%),
    radial-gradient(ellipse 71% 52% at 108% 101%,rgba(223,54,121,.17),transparent 90%),
    linear-gradient(145deg,rgba(22,28,50,.95),rgba(16,22,40,.96) 56%,rgba(34,19,44,.95));
  -webkit-backdrop-filter:blur(32px) saturate(140%);
  backdrop-filter:blur(32px) saturate(140%);
  box-shadow:
    0 24px 68px rgba(1,2,13,.52),
    0 0 35px rgba(221,54,121,.12),
    inset 0 1px rgba(255,245,255,.25),
    inset 0 -1px rgba(238,99,160,.17);
  color:#f6eef8;
  transform-origin:top right;
  animation:cdi-menu-appear .28s cubic-bezier(.18,.77,.22,1) both;
}
@keyframes cdi-menu-appear{
  from{opacity:0;transform:translateY(-10px) scale(.965)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
body.cdh-dark[data-view] .cd-settings-panel{
  scrollbar-width:thin;scrollbar-color:rgba(250,147,197,.4) transparent;
}
body.cdh-dark[data-view] .cd-settings-heading{
  position:sticky;top:0;z-index:2;
  background:linear-gradient(100deg,rgba(231,191,250,.09),rgba(20,21,43,.56));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,230,253,.17);
}
body.cdh-dark[data-view] .cd-settings-heading strong{letter-spacing:.01em}
body.cdh-dark[data-view] .cd-settings-close{
  width:29px;height:29px;display:grid;place-items:center;
  border-radius:8px;transition:background .22s ease,color .22s ease,transform .22s ease;
}
body.cdh-dark[data-view] .cd-settings-close:hover{
  background:rgba(255,176,218,.14);color:#fff;transform:rotate(90deg);
}
body.cdh-dark[data-view] .cd-settings-section{border-bottom:1px solid rgba(239,201,238,.12)}
body.cdh-dark[data-view] .cd-settings-label{color:#f6eafa}
body.cdh-dark[data-view] .cd-settings-hint{color:#abb4c8}
body.cdh-dark[data-view] .cd-settings-checkline{color:#e3e5f0}
body.cdh-dark[data-view] .cd-settings-segment{
  padding:5px;border-radius:10px;border:1px solid rgba(230,202,240,.15);
  background:rgba(9,16,36,.41);
}
body.cdh-dark[data-view] .cd-settings-segment button{
  border-radius:7px;transition:color .22s ease,background .23s ease,transform .23s ease,box-shadow .23s ease;
}
body.cdh-dark[data-view] .cd-settings-segment button:hover:not(.is-selected){
  background:rgba(244,196,243,.10);color:#fff;
}
body.cdh-dark[data-view] .cd-settings-segment button.is-selected{
  border-color:rgba(255,168,204,.65);
  background:linear-gradient(120deg,rgba(250,76,126,.87),rgba(179,49,102,.85));
  box-shadow:inset 0 1px rgba(255,247,255,.22),0 4px 12px rgba(212,46,111,.22);
}
body.cdh-dark[data-view] .cd-settings-mute{
  border:1px solid rgba(225,209,244,.29);border-radius:8px;
  background:rgba(238,220,255,.09);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
body.cdh-dark[data-view] .cd-settings-mute:hover{
  border-color:rgba(255,181,217,.7);background:rgba(249,120,180,.17);transform:translateY(-1px);
}
body.cdh-dark[data-view] .cd-settings-checkline input,
body.cdh-dark[data-view] .cd-settings-volumerow input[type="range"]{accent-color:#f04c80}

body.cdh-dark[data-view] .cd-account-menu{padding:8px;width:218px}
body.cdh-dark[data-view] .cd-account-item{
  border-radius:9px;
  transition:background .22s ease,transform .22s cubic-bezier(.2,.8,.2,1),color .22s ease;
}
body.cdh-dark[data-view] .cd-account-item svg{color:#f0b4d3;transition:transform .24s ease}
body.cdh-dark[data-view] .cd-account-item:hover,
body.cdh-dark[data-view] .cd-account-item:focus-visible{
  color:#fff;outline:0;
  background:linear-gradient(115deg,rgba(246,204,252,.16),rgba(231,68,130,.18));
  transform:translateX(2px);
}
body.cdh-dark[data-view] .cd-account-item:hover svg{transform:translateX(2px)}
body.cdh-dark[data-view] .cd-account-logout{color:#f9c4cc}
body.cdh-dark[data-view] .cd-account-item + .cd-account-item{border-top:1px solid rgba(239,214,247,.12)}
body.cdh-dark[data-view] .cd-account-error{color:#ffb2c6}

body[data-view="home"] .mobile-nav{
  border:1px solid rgba(250,213,240,.36);border-radius:14px;
  background:linear-gradient(140deg,rgba(22,25,50,.90),rgba(29,17,42,.87));
  -webkit-backdrop-filter:blur(23px) saturate(145%);backdrop-filter:blur(23px) saturate(145%);
  box-shadow:0 19px 45px rgba(1,2,15,.48),inset 0 1px rgba(255,255,255,.22);
  transform-origin:top right;animation:cdi-menu-appear .27s cubic-bezier(.18,.77,.22,1) both;
}
body[data-view="home"] .mobile-nav a,
body[data-view="home"] .mobile-nav button{
  border-radius:9px;transition:background .2s ease,color .2s ease,transform .2s ease;
}
body[data-view="home"] .mobile-nav a:hover,
body[data-view="home"] .mobile-nav button:hover{
  background:rgba(255,133,191,.16);color:#fff;transform:translateX(2px);
}

/* Clip submission: the custom category, language and mode popovers stay
   functionally identical, but look and open like the shared menus. */
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-trigger{
  border-radius:9px;
  border-color:rgba(154,172,203,.33)!important;
  background-color:#151e2d!important;
  background-image:linear-gradient(115deg,rgba(81,84,111,.22),rgba(18,26,44,.50))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.055);
  transition:background .23s ease,border-color .23s ease,box-shadow .23s ease;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-trigger:hover:not(:disabled),
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-trigger[aria-expanded="true"]{
  border-color:rgba(235,116,164,.62)!important;
  background-color:#20243a!important;
  background-image:linear-gradient(115deg,rgba(133,77,126,.31),rgba(28,35,57,.48))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 0 12px rgba(222,66,120,.12);
}
body[data-view="submit"] #clip-form .cd-menu-arrow{
  transition:transform .27s cubic-bezier(.2,.8,.2,1),color .22s ease;
}
body[data-view="submit"] #clip-form .cd-menu-trigger[aria-expanded="true"] .cd-menu-arrow{color:#ff9fc8}
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-list{
  border:1px solid rgba(175,166,207,.38);
  border-radius:12px;padding:7px;
  background:linear-gradient(140deg,rgba(31,38,58,.96),rgba(17,26,44,.96));
  -webkit-backdrop-filter:blur(16px) saturate(135%);backdrop-filter:blur(16px) saturate(135%);
  box-shadow:0 17px 45px rgba(0,1,13,.48),inset 0 1px rgba(255,255,255,.10);
  animation:cdi-menu-appear .24s cubic-bezier(.18,.77,.22,1) both;
  transform-origin:top left;
  scrollbar-color:rgba(237,125,169,.44) transparent;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-option{
  border-radius:7px;
  transition:background .20s ease,border-color .20s ease,color .20s ease;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-option:hover,
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-option:focus-visible{
  background:rgba(228,78,138,.15);
  border-color:rgba(235,137,177,.31);
  color:#fff;
}
body.cdh-dark[data-view="submit"] #clip-form .cd-menu-option.is-selected{
  background:linear-gradient(120deg,rgba(226,74,137,.20),rgba(56,54,85,.20));
  border-color:rgba(234,130,174,.36);
}

/* Keyboard, touch and reduced-motion accessibility. */
body[data-view="home"] :is(.nav-link,.cde-cta,.cde-option,.cd-settings-trigger,#login-button):focus-visible,
.cd-settings-panel :is(button,input):focus-visible,
.cd-account-menu .cd-account-item:focus-visible{
  outline:2px solid #ff9dc6;outline-offset:3px;
}
@media(hover:none){
  body[data-view="home"] .cde-preview:hover{transform:none}
  body[data-view="home"] .cde-preview:hover .cde-frame>img{transform:none}
}
@media(prefers-reduced-motion:reduce){
  body[data-view="home"] .cde-copy,
  body[data-view="home"] .cde-preview,
  body[data-view="home"] .cde-option.is-selected,
  body.cdh-dark[data-view] .cd-settings-panel,
  body.cdh-dark[data-view] .cd-account-menu,
  body[data-view="home"] .mobile-nav,
  body[data-view="submit"] #clip-form .cd-menu-list{animation:none!important}
  body[data-view="home"] .site-header *,
  body[data-view="home"] .cde-copy *,
  body[data-view="home"] .cde-preview *,
  body[data-view="home"] .cde-cta,
  body[data-view="home"] .cde-option,
  .cd-settings-panel *,
  .cd-account-menu *,
  body[data-view="submit"] #clip-form .cd-menu-trigger,
  body[data-view="submit"] #clip-form .cd-menu-option,
  body[data-view="submit"] #clip-form .cd-menu-arrow{
    transition:none!important;
  }
}