/* =======================================================
   🤖 Little Bugger AI — Production Styling (LBC)
   File: /ai_system/littlebugger/css/little-bugger-ai.css
   ======================================================= */

:root{
  --lbc-red:#ff2222;
  --lbc-red-700:#d61b1b;

  --bg:#070707;
  --panel:#0f0f0f;
  --panel-2:#141414;

  --text:#e6e6e6;
  --muted:rgba(255,255,255,.72);

  --border:rgba(255,255,255,.10);
  --border-2:rgba(255,255,255,.06);

  --shadow: 0 18px 55px rgba(0,0,0,.55);
}

/* =======================================================
   RESET + BASE
   ======================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Open Sans",Arial,sans-serif;
  background: radial-gradient(circle at 50% 10%, rgba(255,34,34,.08), transparent 48%),
              radial-gradient(circle at 30% 90%, rgba(255,34,34,.06), transparent 52%),
              var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

button,input{font-family:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}

/* =======================================================
   PAGE TITLE
   ======================================================= */
#ai-name{
  position:relative;
  z-index:2;
  text-align:center;
  font-weight:900;
  letter-spacing:.02em;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  margin: 18px auto 10px;
  color: var(--lbc-red);
  text-shadow: 0 0 18px rgba(255,34,34,.18);
}

/* =======================================================
   MAIN CENTER AREA
   ======================================================= */
.content-wrap{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  /* leaves room for the control bar */
  min-height: calc(100vh - 170px);
  padding: 18px 16px 70px;
}

#visualiser-center-wrap{
  width: min(900px, 92vw);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =======================================================
   DIAMOND VISUALISER
   ======================================================= */
.viz{
  display:flex;
  gap: 14px;
  align-items:center;
  justify-content:center;
  padding: 22px 20px;
  border-radius: 20px;

  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow);

  backdrop-filter: blur(8px);
}

.viz-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
}

.viz-seg{
  width: 26px;
  height: 10px;
  border-radius: 999px;

  background: linear-gradient(180deg,
    rgba(255,200,200,1) 0%,
    rgba(255,34,34,1) 70%,
    rgba(110,0,0,1) 100%
  );

  opacity:.12;
  filter: brightness(.9);
  transition: opacity 50ms linear, filter 60ms linear, box-shadow 60ms linear;
}

.viz-seg.lit{
  opacity: 1;
  filter: brightness(var(--b,1.15));
  box-shadow: 0 0 calc(7px * var(--b,1.15)) rgba(255,34,34,.48);
}

/* docked visualiser (text overlay right column) */
.viz-docked{
  gap: 10px;
}
.viz-docked .viz-seg{
  width: 18px;
  height: 8px;
}

/* =======================================================
   CONTROL BAR (VOICE MODE)
   ======================================================= */
#control-bar{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 10;

  display:flex;
  flex-direction:column;
  gap: 10px;
  align-items:center;

  width: min(940px, 94vw);
  padding: 10px 12px;

  border-radius: 16px;
  background: rgba(10,10,10,.78);
  border: 1px solid var(--border);
  box-shadow: 0 14px 42px rgba(0,0,0,.55);

  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);

  transition: opacity .25s ease, transform .25s ease;
}

#control-bar.hidden{
  opacity:0;
  pointer-events:none;
  transform: translateX(-50%) translateY(10px);
}

/* Modes row */
.bar-modes{
  width:100%;
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap:wrap;
}

.mode-check{
  display:inline-flex;
  align-items:center;
  gap: 7px;

  color:rgba(255,255,255,.88);
  font-size:.93rem;
  font-weight:800;

  padding: 7px 11px;
  border-radius: 999px;

  border: 1px solid transparent;
  background: rgba(255,255,255,.04);
}

.mode-check input{
  accent-color: var(--lbc-red);
  transform: scale(1.1);
}

.mode-check.active{
  border-color: rgba(255,34,34,.55);
  background: rgba(255,34,34,.10);
  box-shadow: 0 0 0 1px rgba(255,34,34,.10) inset;
}

/* Buttons row */
.bar-buttons{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:center;
}

.bar-buttons button{
  min-width: 160px;
  padding: 10px 14px;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);

  background: var(--lbc-red);
  color:#fff;
  font-weight:900;
  letter-spacing:.02em;

  box-shadow: 0 12px 30px rgba(255,34,34,.12);
}

.bar-buttons button:hover{
  filter: brightness(.97);
  background: var(--lbc-red-700);
}

/* =======================================================
   TIVR BAR (Type → Voice Reply)
   ======================================================= */
.tivr-bar{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 11;

  width: min(920px, 94vw);

  display:none;
  gap: 10px;
  align-items:center;

  padding: 10px;
  border-radius: 16px;

  background: rgba(10,10,10,.92);
  border: 1px solid var(--border);
  box-shadow: 0 18px 55px rgba(0,0,0,.60);

  backdrop-filter: blur(10px);
}

.tivr-bar.show{display:flex}

.tivr-input{
  flex:1;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:#fff;
  outline:none;
}
.tivr-input:focus{
  border-color: rgba(255,34,34,.55);
  box-shadow: 0 0 0 3px rgba(255,34,34,.12);
}

.tivr-send,.tivr-close{
  padding: 12px 14px;
  border-radius: 12px;
  border:none;
  font-weight: 900;
}
.tivr-send{
  background: var(--lbc-red);
  color:#fff;
}
.tivr-send:hover{background:var(--lbc-red-700)}
.tivr-close{
  background: rgba(255,255,255,.10);
  color:#fff;
}

/* =======================================================
   TEXT OVERLAY (Chat modal)
   ======================================================= */
.text-overlay{
  position: fixed;
  inset: 0;
  z-index: 20;
  display:none;

  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.text-overlay.show{display:block}

.text-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);

  width: min(1100px, 96vw);
  height: min(690px, 88vh);

  background: rgba(16,16,16,.92);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow:hidden;

  display:grid;
  grid-template-columns: 1.3fr 0.7fr;

  box-shadow: 0 26px 80px rgba(0,0,0,.72);
}

/* topbar */
.text-topbar{
  position:absolute;
  inset: 12px 12px auto 12px;
  height: 40px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index: 3;
}

.mute-wrap{
  display:flex;
  gap: 9px;
  align-items:center;
  color:rgba(255,255,255,.86);
  font-size:.92rem;
  font-weight:800;
}
.mute-wrap input{
  accent-color: var(--lbc-red);
  transform: scale(1.12);
}

.close-x{
  width: 40px;
  height: 40px;
  border-radius: 12px;

  display:grid;
  place-items:center;

  font-weight: 1000;
  font-size: 1.3rem;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  cursor:pointer;
}
.close-x:hover{
  border-color: rgba(255,34,34,.40);
}

/* chat column */
.chat-col{
  display:flex;
  flex-direction:column;
  padding: 62px 14px 14px;
  gap: 10px;
}

.chat-box{
  flex:1;
  overflow-y:auto;
  border-radius: 14px;
  padding: 10px;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
}

/* message bubbles */
.chat-message{
  margin: 6px 0;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: .95rem;
  line-height: 1.45;
}

.chat-message.user{
  background: rgba(255,34,34,.16);
  border: 1px solid rgba(255,34,34,.22);
  color:#fff;
  text-align:right;
}

.chat-message.bot{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

.chat-controls{
  display:flex;
  gap: 10px;
}

.chat-input{
  flex:1;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  outline:none;
}
.chat-input:focus{
  border-color: rgba(255,34,34,.55);
  box-shadow: 0 0 0 3px rgba(255,34,34,.12);
}

.chat-send{
  padding: 12px 14px;
  border-radius: 12px;
  border:none;

  background: var(--lbc-red);
  color:#fff;
  font-weight: 900;
}
.chat-send:hover{background:var(--lbc-red-700)}

/* viz column */
.viz-col{
  padding: 62px 14px 14px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-left: 1px solid rgba(255,255,255,.06);
}

/* =======================================================
   MIC INDICATOR (glowing dot)
   ======================================================= */
.mic-indicator{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 30;

  width: 44px;
  height: 44px;
  border-radius: 50%;

  display:grid;
  place-items:center;

  background: rgba(255,34,34,.92);
  border: 1px solid rgba(255,255,255,.18);

  box-shadow: 0 0 0 0 rgba(255,34,34,.55);
  transition: transform .15s ease, opacity .15s ease;
}

/* little "mic dot" inside */
.mic-indicator::after{
  content:"";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 12px rgba(255,255,255,.25);
}

.mic-indicator.listening{
  animation: pulse 1.2s infinite;
}

@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,34,34,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(255,34,34,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,34,34,0); }
}

/* =======================================================
   RESPONSIVE
   ======================================================= */

/* tablets */
@media (max-width: 900px){
  #ai-name{ margin: 14px auto 8px; }
  .content-wrap{
    min-height: calc(100vh - 180px);
    padding-bottom: 92px;
  }

  .viz{
    padding: 18px 16px;
    border-radius: 18px;
  }

  .bar-buttons button{ min-width: 145px; }
}

/* phones */
@media (max-width: 620px){
  .content-wrap{
    padding: 16px 14px 96px;
    min-height: calc(100vh - 190px);
  }

  .viz{
    gap: 11px;
    padding: 16px 14px;
  }

  .viz-seg{ width: 22px; height: 9px; }

  .bar-buttons{
    width:100%;
    gap: 8px;
  }

  .bar-buttons button{
    min-width: 0;
    flex: 1 1 46%;
  }

  .mode-check{
    font-size: .88rem;
    padding: 6px 10px;
  }

  /* Text overlay becomes single column */
  .text-panel{
    grid-template-columns: 1fr;
    height: min(720px, 92vh);
  }

  .viz-col{
    display:none;
  }
}

/* extra small phones */
@media (max-width: 420px){
  .viz-seg{ width: 20px; height: 8px; }
  #control-bar{ padding: 10px 10px; }
  .bar-modes{ gap: 8px; }
  .mode-check{ padding: 6px 9px; }
}