/* ================================================================
   VAMPIRE CLEAN UI
   GPT / DeepSeek inspired
   Calm black vampire aesthetic
   ================================================================ */

:root{
  --bg:#09090a;
  --surface:#101011;
  --surface-2:#171718;
  --surface-3:#202021;

  --line:#29292b;
  --line-soft:#202023;

  --text:#f4f4f5;
  --muted:#929296;
  --muted-2:#68686d;

  --accent:#c9b8ff;
  --accent-soft:rgba(201,184,255,.12);

  --red:#ff203d;

  --glow:none;
}


html,
body{
  background:var(--bg);
  color:var(--text);
}

body{
  overflow:hidden;
}


/* APP */

.app-shell{
  grid-template-columns:272px 1fr;
  min-height:100dvh;
  background:var(--bg);
}

.ambient,
.castle-backdrop,
.right-rail,
.bottom-deck{
  display:none!important;
}


/* SIDEBAR */

.sidebar{
  width:272px;
  padding:14px 12px;
  border-right:1px solid var(--line-soft);
  background:#0b0b0c;
  box-shadow:none;
}

.sidebar:after{
  display:none;
}

.brand-block{
  padding:7px 10px 18px;
  gap:10px;
}

.brand-mark{
  width:34px;
  height:34px;
  font-size:0;
  clip-path:none;
  background:none;
  text-shadow:none;
  position:relative;
}

.brand-mark:before{
  content:'🦇';
  font-size:23px;
  filter:grayscale(1);
  opacity:.92;

  position:absolute;
  inset:0;

  display:grid;
  place-items:center;
}

.brand-name{
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;

  font-size:16px;
  letter-spacing:.7px;
  font-weight:700;
}

.brand-tag{
  display:none;
}


/* NEW CHAT */

.new-chat{
  height:44px;
  margin:0 4px 14px;

  border:1px solid var(--line);
  background:#171718;

  box-shadow:none;

  border-radius:12px;

  font-weight:600;

  text-align:left;

  padding:0 12px;
}

.new-chat:hover{
  background:#202022;
  border-color:#3a3a3d;
}

.new-chat span{
  font-size:21px;
  color:#ddd;
  margin-right:7px;
}


/* NAV */

.nav-stack{
  gap:2px;
}

.nav{
  height:42px;

  border:0;

  border-radius:10px;

  color:#c9c9cc;

  padding:0 11px;

  gap:12px;

  font-size:13px;
}

.nav:hover{
  background:#151516;
  border:0;
}

.nav.active{
  background:#1b1b1d;

  border:0;

  box-shadow:none;

  color:#fff;
}

.nav.active:before{
  display:none;
}

.nav-icon{
  color:#a9a9ad;
  width:19px;
  font-size:16px;
}

.nav em{
  background:#333337;
  color:#ddd;
}


/* SIDEBAR LOWER AREA */

.sidebar-spacer{
  flex:1;
}

.sleep-card,
.blood-card{
  display:none;
}

.account{
  margin:7px 4px 0;

  border:1px solid var(--line);

  background:#111112;

  border-radius:12px;

  padding:9px;
}

.avatar{
  width:34px;
  height:34px;

  border:1px solid #3b3b3f;

  background:#222225;

  font-family:Inter,sans-serif;
}

.account-copy b{
  font-size:12px;
}

.account-copy small{
  font-size:9px;
  color:var(--muted);
}


/* TOP BAR */

.main-stage{
  background:var(--bg);
}

.topbar{
  height:58px;

  border-bottom:1px solid var(--line-soft);

  background:rgba(9,9,10,.94);

  backdrop-filter:blur(18px);

  padding:0 18px;

  gap:12px;
}

.mobile-menu{
  display:none;

  border:0;
  background:none;

  font-size:22px;

  color:#ddd;
}

.crumb{
  font-size:14px;
  color:#e7e7e9;

  padding:0 4px;
}

.crumb small{
  display:none;
}

.top-actions{
  gap:7px;
}

.search-box{
  width:240px;
  height:36px;

  border:1px solid var(--line);

  background:#111112;

  border-radius:18px;
}

.search-box input{
  font-size:12px;
}

.search-box kbd{
  display:none;
}

.icon-btn{
  width:36px;
  height:36px;

  border-radius:10px;

  border:1px solid var(--line);

  background:#111112;
}

.core-mini{
  width:36px;
  height:36px;

  border-radius:50%;

  border:1px solid #3c3c40;

  background:#18181a;

  color:#eee;

  box-shadow:none;
}

.bell i{
  background:#555;
  color:#fff;
}


/* CHAT */

.workspace{
  display:block;

  padding:0;

  min-height:0;

  position:relative;
}

.chat-column{
  height:calc(100dvh - 58px);

  max-width:900px;

  margin:0 auto;

  width:100%;

  padding:0 12px;
}

.chat-scroll{
  padding:30px 20px 160px;

  scrollbar-width:thin;

  scrollbar-color:#333 transparent;
}

.chat-intro{
  max-width:760px;

  padding:8px 0 24px;

  margin:0 auto;
}

.intro-mark{
  font-size:24px;

  color:#d9d9dd;

  text-shadow:none;

  filter:grayscale(1);

  margin-bottom:12px;
}

.chat-intro h1{
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;

  font-size:32px;

  font-weight:650;

  letter-spacing:-.7px;

  margin:0 0 6px;
}

.chat-intro p{
  font-size:14px;
  color:var(--muted);
}


/* MESSAGES */

.msg{
  max-width:760px;

  margin:24px auto;

  display:flex;
}

.msg.assistant{
  justify-content:flex-start;
}

.msg.user{
  justify-content:flex-end;
}

.bubble{
  max-width:82%;

  padding:0;

  line-height:1.65;

  border:0;

  background:transparent;

  border-radius:0;

  box-shadow:none;

  font-size:14px;

  color:#e7e7e9;
}

.msg.user .bubble{
  padding:11px 14px;

  background:#1d1d1f;

  border:1px solid #29292c;

  border-radius:17px;

  box-shadow:none;

  color:#f1f1f2;
}

.label{
  font-size:10px;

  color:#a8a8ad;

  text-transform:none;

  letter-spacing:0;

  margin-bottom:5px;

  font-weight:600;
}


/* QUICK SUGGESTIONS */

.suggestions{
  position:absolute;

  left:0;
  right:0;

  bottom:108px;

  z-index:5;

  display:flex;

  justify-content:center;

  gap:7px;

  padding:6px 18px;

  pointer-events:none;
}

.suggestions button{
  pointer-events:auto;

  border:1px solid var(--line);

  background:#111112;

  border-radius:16px;

  padding:7px 11px;

  color:#a9a9ae;

  font-size:11px;
}

.suggestions button:hover{
  border-color:#444448;

  color:#eee;

  box-shadow:none;

  background:#18181a;
}


/* COMPOSER */

.composer-wrap{
  position:absolute;

  left:0;
  right:0;

  bottom:0;

  padding:12px 18px 12px;

  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(9,9,10,.84) 24%,
      #09090a 45%
    );

  z-index:8;
}

.composer{
  max-width:820px;

  min-height:58px;

  border:1px solid #343438;

  border-radius:20px;

  background:#151516;

  box-shadow:
    0 8px 35px rgba(0,0,0,.35);

  padding:7px 8px;
}

.composer:focus-within{
  border-color:#4a4a50;
}

.composer textarea{
  font-size:14px;

  padding:10px 6px;

  color:#f5f5f6;
}

.composer textarea::placeholder{
  color:#77777c;
}

.composer-btn{
  width:42px;
  height:42px;

  border-radius:50%;

  border:0;

  background:transparent;

  font-size:21px;

  color:#b7b7bc;
}

.composer-btn:hover{
  background:#232326;

  color:#fff;
}

.composer-btn.plus{
  font-size:26px;
}

.composer-btn.voice{
  color:#ddd;
}

.composer-btn.send{
  background:#e9e9ea;

  color:#111;

  border:0;

  box-shadow:none;

  font-size:17px;
}

.composer-note{
  font-size:8px;

  color:#56565b;

  padding:6px;
}


/* PLUS MENU */

.plus-menu{
  left:calc(50% - 400px);

  bottom:82px;

  width:240px;

  border:1px solid #303035;

  background:#151516;

  box-shadow:
    0 20px 60px rgba(0,0,0,.55);
}

.plus-menu button:hover{
  background:#222225;
}


/* PANELS */

.panel{
  right:16px;

  top:72px;

  width:min(
    620px,
    calc(100vw - 32px)
  );

  border:1px solid #303035;

  background:#111112;

  box-shadow:
    0 25px 80px rgba(0,0,0,.7);

  border-radius:16px;
}

.panel>button,
.voiceActions button,
.codeActions button,
.approvalActions button{
  border:1px solid #36363b;

  background:#1b1b1d;

  color:#eee;
}


/* ================================================================
   FULL SCREEN VAMPIRE VOICE
   Black screen + BAT instead of orb
   ================================================================ */

.vampire-voice{
  position:fixed;

  inset:0;

  z-index:1000;

  background:#050506;

  display:none;

  flex-direction:column;

  color:#f5f5f6;
}

.vampire-voice.open{
  display:flex;
}


/* VOICE HEADER */

.voice-top{
  height:76px;

  display:grid;

  grid-template-columns:
    48px
    1fr
    48px;

  align-items:center;

  padding:0 20px;
}

.voice-title{
  text-align:center;

  font-size:15px;

  font-weight:600;

  letter-spacing:.1px;
}

.voice-icon-button{
  width:42px;
  height:42px;

  border-radius:50%;

  border:1px solid #29292d;

  background:#111113;

  color:#eee;

  font-size:19px;

  display:grid;

  place-items:center;
}

.voice-icon-button:last-child{
  justify-self:end;
}


/* BAT */

.voice-center{
  flex:1;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  position:relative;

  min-height:0;
}

.voice-bat{
  width:min(
    280px,
    48vw
  );

  filter:
    drop-shadow(
      0 16px 40px rgba(0,0,0,.5)
    );

  opacity:.96;

  animation:
    batFloat
    4.8s
    ease-in-out
    infinite;
}

.voice-bat svg{
  display:block;

  width:100%;

  height:auto;

  fill:#d9d9df;
}


/* SUBTLE VOICE RING */

.voice-pulse{
  position:absolute;

  width:250px;
  height:250px;

  border-radius:50%;

  border:
    1px solid
    rgba(220,220,230,.08);

  animation:
    voicePulse
    2.8s
    ease-out
    infinite;
}

.voice-state{
  margin-top:42px;

  color:#8e8e94;

  font-size:13px;

  min-height:20px;

  max-width:80%;

  text-align:center;
}


/* VOICE BOTTOM */

.voice-bottom{
  padding:
    0
    22px
    calc(
      24px +
      env(safe-area-inset-bottom)
    );

  display:flex;

  align-items:center;

  gap:10px;

  max-width:780px;

  width:100%;

  margin:auto;
}

.voice-input-pill{
  height:56px;

  border:1px solid #2c2c30;

  background:#111113;

  border-radius:28px;

  display:flex;

  align-items:center;

  gap:12px;

  padding:0 18px;

  flex:1;

  color:#ddd;
}

.voice-input-pill>span:first-child{
  font-size:27px;

  font-weight:300;
}

.voice-placeholder{
  color:#77777d;

  font-size:14px;
}

.voice-mic,
.voice-close{
  width:56px;
  height:56px;

  border-radius:50%;

  border:1px solid #303035;

  background:#111113;

  color:#eee;

  font-size:24px;

  display:grid;

  place-items:center;
}

.voice-close{
  background:#eee;

  color:#111;

  border-color:#eee;

  font-size:32px;

  font-weight:300;
}


/* ANIMATIONS */

@keyframes batFloat{

  0%,
  100%{
    transform:
      translateY(0)
      scale(1);
  }

  50%{
    transform:
      translateY(-8px)
      scale(1.015);
  }

}

@keyframes voicePulse{

  0%{
    transform:scale(.75);

    opacity:0;
  }

  25%{
    opacity:.7;
  }

  100%{
    transform:scale(1.35);

    opacity:0;
  }

}

body.voice-mode .app-shell{
  filter:none;
}


/* ================================================================
   MOBILE
   ================================================================ */

@media(max-width:820px){

  .app-shell{
    display:block;
  }

  .sidebar{
    position:fixed;

    left:-286px;

    top:0;
    bottom:0;

    width:272px;

    z-index:200;

    transition:
      left
      .22s
      ease;
  }

  .sidebar.open{
    left:0;
  }

  #shade{
    position:fixed;

    inset:0;

    background:
      rgba(0,0,0,.58);

    z-index:190;
  }

  #shade.show{
    display:block;
  }

  .topbar{
    height:58px;

    padding:0 12px;
  }

  .mobile-menu{
    display:block;
  }

  .topbar .crumb{
    font-size:14px;
  }

  .top-actions
  .search-box,
  .top-actions
  .icon-btn{
    display:none;
  }

  .workspace{
    height:
      calc(
        100dvh -
        58px
      );
  }

  .chat-column{
    height:
      calc(
        100dvh -
        58px
      );

    padding:0;
  }

  .chat-scroll{
    padding:
      24px
      14px
      170px;
  }

  .chat-intro h1{
    font-size:28px;
  }

  .chat-intro{
    padding-top:8px;
  }

  .msg{
    margin:20px 2px;
  }

  .bubble{
    max-width:88%;

    font-size:14px;
  }

  .msg.user .bubble{
    max-width:88%;
  }

  .suggestions{
    bottom:104px;

    justify-content:flex-start;

    overflow-x:auto;

    flex-wrap:nowrap;

    padding:
      5px
      10px;
  }

  .suggestions button{
    white-space:nowrap;
  }

  .composer-wrap{
    padding:
      8px
      8px
      calc(
        8px +
        env(safe-area-inset-bottom)
      );
  }

  .composer{
    min-height:56px;

    border-radius:19px;
  }

  .composer-btn{
    width:40px;
    height:40px;
  }

  .composer textarea{
    font-size:14px;
  }

  .composer-note{
    display:none;
  }

  .plus-menu{
    left:8px;

    bottom:72px;
  }

  .panel{
    right:8px;

    top:66px;

    width:
      calc(
        100vw -
        16px
      );
  }


  /* MOBILE VOICE */

  .voice-top{
    height:64px;

    padding:0 12px;
  }

  .voice-center{
    padding-bottom:20px;
  }

  .voice-bat{
    width:
      min(
        250px,
        68vw
      );
  }

  .voice-pulse{
    width:210px;
    height:210px;
  }

  .voice-state{
    margin-top:36px;
  }

  .voice-bottom{
    padding:
      0
      12px
      calc(
        16px +
        env(safe-area-inset-bottom)
      );
  }

  .voice-input-pill{
    height:54px;
  }

  .voice-mic,
  .voice-close{
    width:54px;
    height:54px;
  }

}


@media(max-width:520px){

  .brand-name{
    font-size:16px;
  }

  .chat-intro h1{
    font-size:26px;
  }

  .composer textarea{
    font-size:14px;
  }

  .voice-title{
    font-size:14px;
  }

}