/* CODSHIPX_AI_R64_R2_AI_CENTER_NEXT_LEVEL_VISUAL_BULK_R1 */

:root{
  --cx64-bg:#02050a;
  --cx64-panel:rgba(5,11,18,.78);
  --cx64-panel-strong:rgba(4,8,13,.94);
  --cx64-line:rgba(129,224,255,.14);
  --cx64-cyan:#34e9ff;
  --cx64-aqua:#35ffd1;
  --cx64-blue:#4d85ff;
  --cx64-violet:#865cff;
  --cx64-text:#f6fbff;
  --cx64-muted:#8b9aad;
}

html.cx-r64-r2-lock,
html.cx-r64-r2-lock body{
  overflow:hidden!important;
  background:var(--cx64-bg)!important;
}

/* R64-R2 owns the immersive AI Center only. Nothing below applies elsewhere. */
body.cx-r64-r2-ai-active{
  background:var(--cx64-bg)!important;
}

body.cx-r64-r2-ai-active #cx-r53-codi-root{
  position:fixed!important;
  inset:0!important;
  z-index:2147482000!important;
  display:block!important;
  width:100vw!important;
  height:100dvh!important;
  pointer-events:auto!important;
  background:
    radial-gradient(900px 520px at 58% 31%,rgba(35,185,255,.095),transparent 66%),
    radial-gradient(780px 520px at 86% 72%,rgba(0,238,198,.06),transparent 70%),
    linear-gradient(180deg,#03070c 0%,#010306 100%)!important;
}
body.cx-r64-r2-ai-active #cx-r53-codi-root>.cx-r53-scrim{
  display:none!important;
}
body.cx-r64-r2-ai-active #cx-r53-codi-root .cx-r53-drawer.cx-r60-two-column{
  position:absolute!important;
  inset:0!important;
  width:100vw!important;
  max-width:none!important;
  height:100dvh!important;
  max-height:none!important;
  margin:0!important;
  transform:none!important;
  opacity:1!important;
  display:grid!important;
  grid-template-columns:minmax(250px,282px) minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Sidebar */
body.cx-r64-r2-ai-active .cx-r60-history-rail{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  height:100dvh!important;
  padding:18px 15px 16px!important;
  border-right:1px solid rgba(123,213,255,.14)!important;
  background:
    linear-gradient(180deg,rgba(8,14,22,.98),rgba(3,8,13,.99)),
    radial-gradient(330px 180px at 0 0,rgba(48,231,255,.12),transparent 72%)!important;
  overflow:hidden!important;
  box-shadow:18px 0 65px rgba(0,0,0,.22)!important;
}
body.cx-r64-r2-ai-active .cx-r60-history-brand{
  display:none!important;
}
#cx-r64-r2-sidebrand{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:56px;
  padding:7px 9px 13px;
  border-bottom:1px solid rgba(255,255,255,.065);
  color:var(--cx64-text);
}
#cx-r64-r2-sidebrand .cx-r64-r2-x{
  position:relative;
  width:38px;
  height:38px;
  flex:0 0 38px;
  filter:drop-shadow(0 0 16px rgba(50,228,255,.25));
}
#cx-r64-r2-sidebrand .cx-r64-r2-x::before,
#cx-r64-r2-sidebrand .cx-r64-r2-x::after{
  content:"";
  position:absolute;
  left:17px;
  top:2px;
  width:7px;
  height:34px;
  border-radius:9px;
  transform-origin:center;
}
#cx-r64-r2-sidebrand .cx-r64-r2-x::before{
  transform:rotate(39deg);
  background:linear-gradient(180deg,#39f1ff,#5f7dff);
  box-shadow:0 0 18px rgba(54,224,255,.55);
}
#cx-r64-r2-sidebrand .cx-r64-r2-x::after{
  transform:rotate(-39deg);
  background:linear-gradient(180deg,#58fff1,#21bfff);
  box-shadow:0 0 18px rgba(54,224,255,.38);
}
#cx-r64-r2-sidebrand strong{
  display:block;
  font-size:18px;
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:780;
}
#cx-r64-r2-sidebrand strong em{
  color:#50dcff;
  font-style:normal;
}
#cx-r64-r2-sidebrand small{
  display:block;
  margin-top:5px;
  color:#748293;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
#cx-r64-r2-nav{
  display:grid;
  gap:4px;
  padding:13px 0 12px;
}
#cx-r64-r2-nav button{
  width:100%;
  min-height:40px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#aab6c5;
  text-align:left;
  font:inherit;
  font-size:11px;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
#cx-r64-r2-nav button:hover{
  color:#eefaff;
  border-color:rgba(91,216,255,.16);
  background:rgba(71,176,255,.065);
  transform:translateX(2px);
}
#cx-r64-r2-nav button.is-active{
  color:#f8fdff;
  border-color:rgba(75,211,255,.22);
  background:linear-gradient(90deg,rgba(42,205,255,.14),rgba(72,109,255,.055));
  box-shadow:inset 2px 0 0 #31e3ff,0 0 22px rgba(22,187,255,.055);
}
#cx-r64-r2-nav .ico{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  color:#67defb;
  font-size:12px;
  background:rgba(255,255,255,.025);
}
#cx-r64-r2-nav kbd{
  padding:3px 5px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:6px;
  background:rgba(255,255,255,.025);
  color:#718091;
  font:8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
body.cx-r64-r2-ai-active .cx-r60-new-chat{
  order:20!important;
  min-height:40px!important;
  margin:0 0 8px!important;
  border:1px solid rgba(100,223,255,.15)!important;
  border-radius:12px!important;
  background:rgba(14,25,35,.6)!important;
  color:#eaf8ff!important;
  box-shadow:none!important;
}
body.cx-r64-r2-ai-active .cx-r60-new-chat,
body.cx-r64-r2-ai-active .cx-r60-new-chat *{
  color:#dff8ff!important;
}
body.cx-r64-r2-ai-active .cx-r60-thread-search{
  order:21!important;
  margin:0 0 10px!important;
  min-height:38px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:11px!important;
  background:rgba(0,0,0,.16)!important;
}
body.cx-r64-r2-ai-active .cx-r60-thread-search input{
  color:#dbe9f2!important;
  font-size:10px!important;
}
body.cx-r64-r2-ai-active .cx-r60-thread-history{
  order:22!important;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  padding-right:2px!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(96,199,230,.25) transparent;
}
body.cx-r64-r2-ai-active .cx-r60-thread-group-label{
  color:#617082!important;
  font-size:8px!important;
  letter-spacing:.13em!important;
}
body.cx-r64-r2-ai-active .cx-r60-thread-item{
  min-height:46px!important;
  padding:6px 7px!important;
  border-radius:10px!important;
  color:#97a5b5!important;
}
body.cx-r64-r2-ai-active .cx-r60-thread-item:hover,
body.cx-r64-r2-ai-active .cx-r60-thread-item.active{
  background:rgba(74,183,255,.07)!important;
  border-color:rgba(82,202,255,.12)!important;
  color:#edfaff!important;
}
body.cx-r64-r2-ai-active .cx-r60-open-ai-center{
  display:none!important;
}
#cx-r64-r2-sidefoot{
  order:30;
  flex:0 0 auto;
  margin-top:9px;
  padding:10px;
  border:1px solid rgba(74,206,255,.12);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(35,184,255,.07),rgba(0,0,0,.15));
  color:#8190a0;
  font-size:9px;
  line-height:1.5;
}
#cx-r64-r2-sidefoot strong{
  color:#cfedf8;
  font-size:10px;
}

/* Main pane */
body.cx-r64-r2-ai-active .cx-r60-chat-pane{
  position:relative!important;
  min-width:0!important;
  height:100dvh!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  background:
    radial-gradient(900px 520px at 50% 42%,rgba(10,171,255,.075),transparent 67%),
    linear-gradient(180deg,rgba(2,5,10,.58),rgba(1,3,6,.93))!important;
}
body.cx-r64-r2-ai-active .cx-r60-chat-pane::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.24;
  background-image:
    linear-gradient(rgba(85,209,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(85,209,255,.032) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,.7) 38%,transparent 100%);
}
body.cx-r64-r2-ai-active .cx-r60-chat-head{
  display:none!important;
}
#cx-r64-r2-topbar{
  position:relative;
  z-index:6;
  flex:0 0 72px;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 clamp(18px,2.6vw,38px);
  border-bottom:1px solid rgba(113,215,255,.10);
  background:rgba(2,6,11,.72);
  backdrop-filter:blur(18px) saturate(1.2);
}
#cx-r64-r2-topbar .title{
  display:flex;
  align-items:center;
  gap:12px;
}
#cx-r64-r2-topbar .spark{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1px solid rgba(74,224,255,.27);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(36,226,255,.13),rgba(85,86,255,.08));
  color:#6befff;
  box-shadow:0 0 24px rgba(46,213,255,.09);
  font-size:13px;
}
#cx-r64-r2-topbar h2{
  margin:0;
  color:#f7fbff;
  font-size:20px;
  letter-spacing:-.035em;
  font-weight:690;
}
#cx-r64-r2-topbar p{
  margin:3px 0 0;
  color:#6f7c8c;
  font-size:9px;
  letter-spacing:.04em;
}
#cx-r64-r2-topbar .actions{
  display:flex;
  align-items:center;
  gap:10px;
}
#cx-r64-r2-topbar .premium{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:0 13px;
  border:1px solid rgba(52,224,255,.34);
  border-radius:999px;
  background:rgba(5,22,31,.62);
  color:#bceffc;
  font-size:9px;
  letter-spacing:.04em;
}
#cx-r64-r2-topbar .premium::before{
  content:"✦";
  color:#5ff4ff;
}
#cx-r64-r2-close{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.09);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  color:#9eabba;
  cursor:pointer;
  font-size:17px;
  transition:.2s ease;
}
#cx-r64-r2-close:hover{
  color:#fff;
  border-color:rgba(91,223,255,.24);
  background:rgba(67,204,255,.07);
}

body.cx-r64-r2-ai-active .cx-r60-chat-pane>.cx-r53-status,
body.cx-r64-r2-ai-active .cx-r60-chat-pane>.cx-r56-voice-state{
  position:relative!important;
  z-index:5!important;
  flex:0 0 auto!important;
  width:min(980px,calc(100% - 50px))!important;
  margin:0 auto!important;
  padding-top:7px!important;
  background:transparent!important;
  border:0!important;
  color:#647485!important;
  font-size:8px!important;
}
body.cx-r64-r2-ai-active .cx-r60-chat-pane>.cx-r56-voice-state{
  display:none!important;
}
body.cx-r64-r2-ai-active .cx-r60-chat-pane>.cx-r53-messages{
  position:relative!important;
  z-index:4!important;
  flex:1 1 auto!important;
  min-height:0!important;
  width:min(1030px,100%)!important;
  margin:0 auto!important;
  padding:24px clamp(22px,4vw,62px) 285px!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(76,184,220,.26) transparent!important;
}
body.cx-r64-r2-ai-active .cx-r53-message{
  max-width:min(760px,88%)!important;
  border-radius:18px!important;
  border-color:rgba(114,210,255,.10)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.16)!important;
}
body.cx-r64-r2-ai-active .cx-r53-message.assistant{
  background:linear-gradient(145deg,rgba(12,22,31,.86),rgba(4,10,16,.86))!important;
  color:#eaf8ff!important;
}
body.cx-r64-r2-ai-active .cx-r53-message.user{
  background:linear-gradient(145deg,rgba(21,90,118,.42),rgba(24,48,84,.42))!important;
  border-color:rgba(82,218,255,.18)!important;
  color:#f4fbff!important;
}

/* Composer */
body.cx-r64-r2-ai-active .cx-r60-chat-pane .cx-r53-compose{
  position:absolute!important;
  z-index:11!important;
  left:50%!important;
  bottom:26px!important;
  transform:translateX(-50%)!important;
  width:min(1040px,calc(100% - 56px))!important;
  min-height:68px!important;
  margin:0!important;
  padding:10px!important;
  display:grid!important;
  grid-template-columns:auto 46px minmax(0,1fr) 46px!important;
  align-items:end!important;
  gap:8px!important;
  border:1px solid rgba(121,219,255,.19)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(12,22,31,.88),rgba(5,11,18,.96))!important;
  backdrop-filter:blur(24px) saturate(1.25)!important;
  box-shadow:0 24px 90px rgba(0,0,0,.46),0 0 0 1px rgba(75,220,255,.03) inset,0 0 55px rgba(22,164,220,.05)!important;
}
body.cx-r64-r2-ai-active .cx-r60-chat-pane .cx-r53-compose::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:24px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(51,239,255,.22),transparent 28%,transparent 72%,rgba(76,103,255,.19));
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
  opacity:.8;
}
body.cx-r64-r2-ai-active #cx-r59-asset-btn{
  grid-column:1!important;
  width:46px!important;
  height:46px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.025)!important;
  color:#a9bac7!important;
}
body.cx-r64-r2-ai-active #cx-r56-voice-btn{
  grid-column:2!important;
  width:46px!important;
  height:46px!important;
  border:1px solid rgba(84,214,255,.15)!important;
  border-radius:15px!important;
  background:rgba(29,102,132,.12)!important;
  color:#7ae8ff!important;
}
body.cx-r64-r2-ai-active #cx-r53-input{
  grid-column:3!important;
  min-height:46px!important;
  max-height:155px!important;
  padding:12px 8px 8px!important;
  border:0!important;
  background:transparent!important;
  color:#f2f9ff!important;
  font-size:12px!important;
  line-height:1.45!important;
}
body.cx-r64-r2-ai-active #cx-r53-input::placeholder{
  color:#647485!important;
}
body.cx-r64-r2-ai-active #cx-r53-send{
  grid-column:4!important;
  width:46px!important;
  height:46px!important;
  border:1px solid rgba(101,238,255,.24)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,#42ddff,#4b87ff)!important;
  color:#001018!important;
  box-shadow:0 8px 28px rgba(31,188,255,.22)!important;
}
body.cx-r64-r2-ai-active .cx-r60-chat-pane>.cx-r53-note{
  position:absolute!important;
  z-index:12!important;
  left:50%!important;
  bottom:7px!important;
  transform:translateX(-50%)!important;
  width:min(980px,calc(100% - 56px))!important;
  padding:0!important;
  color:#526171!important;
  text-align:center!important;
  font-size:7.5px!important;
  letter-spacing:.02em!important;
}

/* Welcome stage inside real Codi workspace */
#cx-r64-r2-welcome{
  position:absolute;
  z-index:3;
  left:50%;
  top:72px;
  bottom:118px;
  width:min(1180px,calc(100% - 60px));
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;
}
#cx-r64-r2-welcome>*{pointer-events:auto}
body.cx-r64-r2-ai-active:has(#cx-r53-messages .cx-r53-message) #cx-r64-r2-welcome{
  opacity:0;
  transform:translateX(-50%) translateY(-12px) scale(.985);
  pointer-events:none;
}
body.cx-r64-r2-ai-active:has(#cx-r53-messages .cx-r53-message) #cx-r64-r2-welcome *{
  pointer-events:none!important;
}
#cx-r64-r2-welcome .intro{
  text-align:center;
  margin-bottom:15px;
}
#cx-r64-r2-welcome .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:#71879a;
  font-size:8px;
  letter-spacing:.30em;
  text-transform:uppercase;
}
#cx-r64-r2-welcome .eyebrow::before,
#cx-r64-r2-welcome .eyebrow::after{
  content:"";
  width:32px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(82,228,255,.55));
}
#cx-r64-r2-welcome .eyebrow::after{transform:scaleX(-1)}
#cx-r64-r2-welcome h1{
  margin:0;
  color:#f6fbff;
  font-size:clamp(34px,4vw,57px);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:690;
  text-shadow:0 6px 45px rgba(0,0,0,.35);
}
#cx-r64-r2-welcome h1 span{
  background:linear-gradient(90deg,#64f5ff,#2cc9ff 44%,#6681ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 20px rgba(51,208,255,.13));
}
#cx-r64-r2-welcome .lead{
  margin:10px 0 0;
  color:#9aa8b8;
  font-size:clamp(12px,1.2vw,16px);
  letter-spacing:.02em;
}

/* The proxy ring controls the existing Codi voice stack. */
#cx-r64-r2-ring-wrap{
  position:relative;
  width:clamp(210px,22vw,330px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  filter:drop-shadow(0 26px 65px rgba(0,0,0,.38));
}
#cx-r64-r2-ring-wrap::before{
  content:"";
  position:absolute;
  inset:-24%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(35,216,255,.13),rgba(32,110,255,.04) 36%,transparent 68%);
  filter:blur(22px);
  animation:cx64Aura 4s ease-in-out infinite;
}
#cx-r64-r2-magic-ring{
  position:relative;
  width:68%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  isolation:isolate;
  outline:none;
}
#cx-r64-r2-magic-ring:focus-visible{
  box-shadow:0 0 0 3px rgba(93,238,255,.25);
}
#cx-r64-r2-magic-ring .halo,
#cx-r64-r2-magic-ring .orbit,
#cx-r64-r2-magic-ring .core{
  position:absolute;
  border-radius:50%;
}
#cx-r64-r2-magic-ring .halo.h1{
  inset:-8%;
  border:1px solid rgba(54,236,255,.31);
  box-shadow:0 0 42px rgba(47,220,255,.15),inset 0 0 32px rgba(52,224,255,.08);
  animation:cx64Spin 6s linear infinite;
}
#cx-r64-r2-magic-ring .halo.h2{
  inset:4%;
  border:2px solid rgba(68,146,255,.37);
  border-left-color:#39f3ff;
  border-bottom-color:rgba(128,84,255,.42);
  box-shadow:0 0 24px rgba(62,190,255,.18);
  animation:cx64SpinReverse 3.7s linear infinite;
}
#cx-r64-r2-magic-ring .halo.h3{
  inset:17%;
  border:5px solid transparent;
  border-top-color:#6cf6ff;
  border-right-color:#39dfff;
  border-bottom-color:#506dff;
  filter:drop-shadow(0 0 11px rgba(45,220,255,.75));
  animation:cx64Spin 1.95s linear infinite;
}
#cx-r64-r2-magic-ring .core{
  inset:29%;
  border:1px solid rgba(142,242,255,.60);
  background:
    radial-gradient(circle at 42% 36%,rgba(106,244,255,.18),transparent 32%),
    radial-gradient(circle,rgba(7,48,65,.58),rgba(2,11,18,.75) 65%);
  box-shadow:0 0 22px rgba(53,226,255,.36),inset 0 0 25px rgba(61,213,255,.18);
}
#cx-r64-r2-magic-ring .orbit.o1{
  inset:-19%;
  border:1px solid rgba(64,222,255,.22);
  transform:rotate(62deg) scaleY(.62);
  animation:cx64Orbit1 5.4s linear infinite;
}
#cx-r64-r2-magic-ring .orbit.o2{
  inset:-12%;
  border:1px solid rgba(113,89,255,.32);
  transform:rotate(-28deg) scaleY(.74);
  animation:cx64Orbit2 4.6s linear infinite;
}
#cx-r64-r2-magic-ring .orbit.o3{
  inset:-25%;
  border:1px solid rgba(45,255,210,.18);
  transform:rotate(18deg) scaleY(.56);
  animation:cx64Orbit3 6.1s linear infinite;
}
#cx-r64-r2-magic-ring .dot{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6af5ff;
  box-shadow:0 0 14px #54eaff;
}
#cx-r64-r2-magic-ring .d1{left:6%;top:31%;animation:cx64Float 2.4s ease-in-out infinite}
#cx-r64-r2-magic-ring .d2{right:1%;top:48%;animation:cx64Float 2.9s ease-in-out .3s infinite}
#cx-r64-r2-magic-ring .d3{left:43%;bottom:-8%;animation:cx64Float 2.7s ease-in-out .6s infinite}
#cx-r64-r2-ring-status{
  position:absolute;
  left:50%;
  bottom:-19px;
  transform:translateX(-50%);
  min-width:150px;
  padding:8px 14px;
  border:1px solid rgba(77,224,255,.23);
  border-radius:999px;
  background:rgba(4,14,22,.74);
  backdrop-filter:blur(14px);
  color:#dffaff;
  text-align:center;
  font-size:9px;
  font-weight:750;
  letter-spacing:.13em;
  white-space:nowrap;
  box-shadow:0 10px 35px rgba(0,0,0,.26),0 0 25px rgba(40,205,255,.08);
}
#cx-r64-r2-ring-status::after{content:"CODI · READY"}
body.cx-r64-r2-ai-active:has(#cx-r57-voice-dock[data-status="connecting"]) #cx-r64-r2-ring-status::after{content:"CODI · STARTING"}
body.cx-r64-r2-ai-active:has(#cx-r57-voice-dock[data-status="ready"]) #cx-r64-r2-ring-status::after,
body.cx-r64-r2-ai-active:has(#cx-r57-voice-dock[data-status="listening"]) #cx-r64-r2-ring-status::after{content:"CODI · LISTENING"}
body.cx-r64-r2-ai-active:has(#cx-r57-voice-dock[data-status="thinking"]) #cx-r64-r2-ring-status::after{content:"CODI · THINKING"}
body.cx-r64-r2-ai-active:has(#cx-r57-voice-dock[data-status="speaking"]) #cx-r64-r2-ring-status::after{content:"CODI · SPEAKING"}
body.cx-r64-r2-ai-active:has(#cx-r57-voice-dock[data-status="thinking"]) #cx-r64-r2-magic-ring .halo.h3{
  border-top-color:#d05cff;
  border-right-color:#7863ff;
  border-bottom-color:#ff59ca;
  animation-duration:.72s;
}
body.cx-r64-r2-ai-active:has(#cx-r57-voice-dock[data-status="speaking"]) #cx-r64-r2-magic-ring .halo.h3{
  border-top-color:#5effc8;
  border-right-color:#a3ff68;
  border-bottom-color:#3fe9ff;
  animation-duration:1.2s;
}
body.cx-r64-r2-ai-active:has(#cx-r57-voice-dock[data-status="speaking"]) #cx-r64-r2-magic-ring{
  animation:cx64SpeakPulse .7s ease-in-out infinite alternate;
}
/* Hide the old small voice dock only inside immersive AI Center. Audio stays alive. */
body.cx-r64-r2-ai-active #cx-r57-voice-dock{
  position:fixed!important;
  width:1px!important;
  height:1px!important;
  left:-9999px!important;
  top:auto!important;
  bottom:0!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

#cx-r64-r2-quick-prompts{
  width:min(900px,94%);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:15px;
}
#cx-r64-r2-quick-prompts button{
  min-height:54px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(107,211,255,.12);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(13,25,35,.72),rgba(5,11,18,.68));
  color:#b9c8d5;
  text-align:left;
  font:inherit;
  font-size:9px;
  line-height:1.35;
  cursor:pointer;
  transition:.2s ease;
  backdrop-filter:blur(12px);
}
#cx-r64-r2-quick-prompts button:hover{
  transform:translateY(-2px);
  border-color:rgba(74,222,255,.28);
  color:#eefbff;
  box-shadow:0 12px 30px rgba(0,0,0,.22),0 0 24px rgba(38,188,255,.06);
}
#cx-r64-r2-quick-prompts .qico{
  flex:0 0 27px;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid rgba(74,224,255,.15);
  border-radius:9px;
  color:#59e8ff;
  background:rgba(61,210,255,.05);
}
#cx-r64-r2-welcome .hint{
  margin-top:10px;
  color:#536474;
  font-size:8px;
  letter-spacing:.04em;
}
#cx-r64-r2-welcome .hint b{color:#6fdff4;font-weight:600}

/* Cinematic entry */
#cx-r64-r2-cinematic{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#010204;
  color:#fff;
  opacity:1;
  visibility:visible;
  transition:opacity .75s cubic-bezier(.2,.72,.2,1),visibility .75s;
}
#cx-r64-r2-cinematic.is-out{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#cx-r64-r2-cinematic::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 50% 48%,rgba(35,223,255,.11),transparent 19%),
    radial-gradient(circle at 50% 48%,rgba(46,95,255,.075),transparent 36%),
    radial-gradient(circle at 13% 60%,rgba(38,230,255,.055),transparent 18%),
    radial-gradient(circle at 87% 34%,rgba(92,81,255,.05),transparent 17%);
  filter:blur(18px);
  animation:cx64CineBreath 5.2s ease-in-out infinite;
}
#cx-r64-r2-cinematic::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.52;
  background-image:
    radial-gradient(circle at 12% 21%,rgba(131,235,255,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle at 77% 16%,rgba(93,205,255,.45) 0 1px,transparent 1.5px),
    radial-gradient(circle at 65% 71%,rgba(128,116,255,.42) 0 1px,transparent 1.5px),
    radial-gradient(circle at 30% 79%,rgba(53,240,220,.38) 0 1px,transparent 1.5px),
    radial-gradient(circle at 89% 61%,rgba(80,220,255,.42) 0 1px,transparent 1.5px);
  background-size:220px 220px,310px 310px,270px 270px,340px 340px,400px 400px;
  animation:cx64Stars 16s linear infinite;
}
#cx-r64-r2-cinematic .cine-center{
  position:relative;
  z-index:2;
  width:min(800px,88vw);
  min-height:420px;
  display:grid;
  place-items:center;
  text-align:center;
}
#cx-r64-r2-cinematic .cine-copy{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1),filter .55s ease;
}
#cx-r64-r2-cinematic .cine-kicker{
  margin-bottom:15px;
  color:#667787;
  font-size:8px;
  letter-spacing:.44em;
  text-transform:uppercase;
}
#cx-r64-r2-cinematic .cine-title{
  color:#fff;
  font-size:clamp(24px,3vw,40px);
  letter-spacing:.19em;
  font-weight:420;
  text-transform:uppercase;
}
#cx-r64-r2-cinematic .cine-title b{
  background:linear-gradient(90deg,#fff,#b8f6ff 52%,#7b9cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:550;
}
#cx-r64-r2-cinematic .cine-sub{
  margin-top:14px;
  color:#657585;
  font-size:8px;
  letter-spacing:.25em;
  text-transform:uppercase;
}
#cx-r64-r2-cinematic .cine-line{
  width:0;
  height:1px;
  margin-top:22px;
  background:linear-gradient(90deg,transparent,#5cecff,transparent);
  box-shadow:0 0 20px rgba(68,225,255,.5);
  transition:width 1s cubic-bezier(.22,.8,.2,1);
}
#cx-r64-r2-cinematic.phase-loading .cine-line{width:190px}
#cx-r64-r2-cinematic.phase-ready .cine-copy.loading{
  opacity:0;
  transform:translateY(-13px) scale(.985);
  filter:blur(6px);
}
#cx-r64-r2-cinematic .cine-copy.ready{
  opacity:0;
  transform:translateY(15px) scale(.98);
  filter:blur(5px);
}
#cx-r64-r2-cinematic.phase-ready .cine-copy.ready{
  opacity:1;
  transform:none;
  filter:none;
}
#cx-r64-r2-cinematic.phase-ring .cine-copy{
  opacity:0!important;
  transform:translateY(-10px) scale(.98)!important;
  filter:blur(8px)!important;
}
#cx-r64-r2-cine-ring{
  position:absolute;
  width:260px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(.72);
  filter:blur(12px);
  transition:opacity .7s ease,transform 1s cubic-bezier(.15,.82,.16,1),filter .8s ease;
}
#cx-r64-r2-cinematic.phase-ring #cx-r64-r2-cine-ring{
  opacity:1;
  transform:scale(1);
  filter:none;
}
#cx-r64-r2-cine-ring .r1,
#cx-r64-r2-cine-ring .r2,
#cx-r64-r2-cine-ring .r3,
#cx-r64-r2-cine-ring .r4{
  position:absolute;
  border-radius:50%;
}
#cx-r64-r2-cine-ring .r1{
  inset:2%;
  border:1px solid rgba(61,238,255,.38);
  box-shadow:0 0 42px rgba(56,228,255,.22),inset 0 0 32px rgba(60,224,255,.10);
  animation:cx64Spin 4.8s linear infinite;
}
#cx-r64-r2-cine-ring .r2{
  inset:14%;
  border:3px solid transparent;
  border-top-color:#55f2ff;
  border-right-color:#3fc7ff;
  border-bottom-color:#6465ff;
  filter:drop-shadow(0 0 10px rgba(65,215,255,.65));
  animation:cx64SpinReverse 2.7s linear infinite;
}
#cx-r64-r2-cine-ring .r3{
  inset:27%;
  border:1px solid rgba(138,245,255,.65);
  background:radial-gradient(circle,rgba(25,97,123,.18),rgba(1,8,13,.78));
  box-shadow:0 0 27px rgba(48,225,255,.38),inset 0 0 22px rgba(66,209,255,.15);
}
#cx-r64-r2-cine-ring .r4{
  inset:-16%;
  border:1px solid rgba(94,108,255,.24);
  transform:rotate(35deg) scaleY(.64);
  animation:cx64Orbit1 5s linear infinite;
}
#cx-r64-r2-cine-ring .online{
  position:absolute;
  bottom:-32px;
  min-width:190px;
  color:#bff8ff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}
#cx-r64-r2-cine-ring .online::before{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin:0 8px 1px 0;
  border-radius:50%;
  background:#4effdf;
  box-shadow:0 0 12px #4effdf;
}

@keyframes cx64Spin{to{transform:rotate(360deg)}}
@keyframes cx64SpinReverse{to{transform:rotate(-360deg)}}
@keyframes cx64Aura{50%{transform:scale(1.08);opacity:.75}}
@keyframes cx64Float{50%{transform:translateY(-7px) scale(1.2);opacity:.55}}
@keyframes cx64SpeakPulse{to{transform:scale(1.035)}}
@keyframes cx64Orbit1{to{transform:rotate(422deg) scaleY(.62)}}
@keyframes cx64Orbit2{to{transform:rotate(-388deg) scaleY(.74)}}
@keyframes cx64Orbit3{to{transform:rotate(378deg) scaleY(.56)}}
@keyframes cx64CineBreath{50%{transform:scale(1.035);opacity:.82}}
@keyframes cx64Stars{to{background-position:60px 34px,-48px 72px,83px -44px,-91px 51px,65px -76px}}

@media(max-width:1080px){
  body.cx-r64-r2-ai-active #cx-r53-codi-root .cx-r53-drawer.cx-r60-two-column{
    grid-template-columns:238px minmax(0,1fr)!important;
  }
  #cx-r64-r2-quick-prompts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  body.cx-r64-r2-ai-active #cx-r53-codi-root .cx-r53-drawer.cx-r60-two-column{
    grid-template-columns:1fr!important;
  }
  body.cx-r64-r2-ai-active .cx-r60-history-rail{display:none!important}
  #cx-r64-r2-topbar{flex-basis:64px;min-height:64px;padding:0 15px}
  #cx-r64-r2-topbar h2{font-size:17px}
  #cx-r64-r2-topbar p{display:none}
  #cx-r64-r2-topbar .premium{display:none}
  #cx-r64-r2-welcome{top:64px;bottom:112px;width:calc(100% - 24px)}
  #cx-r64-r2-welcome h1{font-size:34px}
  #cx-r64-r2-ring-wrap{width:220px;margin-bottom:13px}
  #cx-r64-r2-quick-prompts{grid-template-columns:1fr 1fr;width:100%;gap:6px}
  #cx-r64-r2-quick-prompts button{min-height:48px;padding:8px;font-size:8px}
  body.cx-r64-r2-ai-active .cx-r60-chat-pane>.cx-r53-messages{padding:18px 14px 190px!important}
  body.cx-r64-r2-ai-active .cx-r60-chat-pane .cx-r53-compose{bottom:23px!important;width:calc(100% - 22px)!important;min-height:62px!important;border-radius:20px!important;grid-template-columns:auto 42px minmax(0,1fr) 42px!important;padding:8px!important}
  body.cx-r64-r2-ai-active #cx-r59-asset-btn,
  body.cx-r64-r2-ai-active #cx-r56-voice-btn,
  body.cx-r64-r2-ai-active #cx-r53-send{width:42px!important;height:42px!important;border-radius:13px!important}
  body.cx-r64-r2-ai-active #cx-r53-input{min-height:42px!important}
  body.cx-r64-r2-ai-active .cx-r60-chat-pane>.cx-r53-note{bottom:6px!important;width:calc(100% - 24px)!important}
}
@media(max-width:470px){
  #cx-r64-r2-quick-prompts{grid-template-columns:1fr}
  #cx-r64-r2-quick-prompts button:nth-child(n+4){display:none}
  #cx-r64-r2-welcome .lead{font-size:11px}
  #cx-r64-r2-ring-wrap{width:190px}
}
@media(prefers-reduced-motion:reduce){
  #cx-r64-r2-cinematic *,
  #cx-r64-r2-welcome *,
  #cx-r64-r2-magic-ring *,
  #cx-r64-r2-cinematic::before,
  #cx-r64-r2-cinematic::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.15s!important;
  }
}