:root{
  --bg:#051a1f;
  --surf:#1e373b;
  --chat:#051f1f;
  --acc:#3AB795;
  --acc2:#106d49;
  --txt:#EDEAD0;
  --dim:#94a3b8;
  --bot:#335551;
  --usr:#106d49;
  --bdr:#335555;
  --boxbg: #0f172a73;
  --red:#ef4444;
  --crisis: #7f1d1d;
  --crisistxt: #fad1d1;
  --amb:#f3a73d;
  --stepbg: #ffffff0a;
  --msgerr: #ef444426;
  --mdgbrd: #ef44444d;
  --chipbg:#3ab7951a;
  --chipbrd: #3ab79533;
  --chiphvr: #3ab7953a;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Segoe UI',sans-serif;
}

body{
  background:var(--bg);
  color:var(--txt);
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.crisis{
  background:var(--crisis);
  color:var(--crisistxt);
  font-size:12px;
  padding:6px 16px;
  text-align:center;flex:none;
}


.crisis a{
  color:var(--crisistxt);
}

.shell{
  display:flex;
  flex:1;
  overflow:hidden;
}

.sb{
  width:290px;
  background:var(--surf);
  border-right:1px solid var(--bdr);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.sb-scroll{
  flex:1;
  overflow-y:auto;
  padding:18px 16px;
  display:flex;
  flex-direction:column;gap:14px;
}

.sb-scroll::-webkit-scrollbar{
  width:5px;
}

.sb-scroll::-webkit-scrollbar-thumb{
  background:var(--bdr);
  border-radius:2px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo i{
  font-size:1.7rem;
  color:var(--acc);
  text-shadow:0 0 10px var(--acc2);
}

.logo span{
  color:var(--acc);
}

.box{
  background:var(--boxbg);
  padding:14px;
  border-radius:10px;
  border:1px solid var(--bdr);
}

.box-title{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--dim);
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
}

.box-title i{
  color:var(--acc);
}

.box-sub{
  font-size:.8rem;
  color:var(--dim);
  margin-bottom:12px;
  line-height:1.4;
}

.ig {
  margin-bottom: 10px;
  position: relative; 
  font-size: .85rem;
  font-weight: 600;
}

.ig select, .ig input[type=text] {
  width: 100%;
  padding: 8px 10px 8px 28px;
  margin: 6px 0px 0px 0px;
  background: var(--bg);
  border: 1px solid var(--bdr);
  border-radius: 7px;
  color: var(--txt);
  outline: none;
  font-size: .85rem;
  transition: border-color .2s;
}

.ig select {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.ig select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ig select option {
  background: var(--surf);
}

.ig input::placeholder {
  color: var(--dim);
}

/* DROPDOWN ICON */
.ig::after {
  content: '';
  position: absolute;
  left: 14px;
  bottom: 10px; 
  width: 12px;
  height: 12px;
  background-color: var(--acc); 
  
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat center;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat center;
  
  pointer-events: none; 
}

.btn{
  width:100%;
  padding:10px;
  background:var(--acc);
  border:none;
  border-radius:7px;
  color:var(--txt);
  font-weight:700;
  cursor:pointer;
  font-size:.88rem;
  transition:background .2s;
}

.btn:hover{
  background:var(--acc2);
}

.loc-badge{
  font-size:.8rem;
  color:var(--acc);
  margin-top:8px;
  text-align:center;
  min-height:16px;
}

.steps-panel{
  display:block;
}

.sec{
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--dim);
  display:flex;
  align-items:center;
  gap:5px;
  margin:10px 0 6px;
}

.sec i{
  color:var(--acc);
}

.steps-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.step-item{
  font-size:.8rem;
  line-height:1.4;
  padding:7px 9px;
  background:var(--stepbg);
  border:1px solid var(--bdr);
  border-radius:8px;
  margin-bottom: 5px;
}

.ph{
  font-size:.78rem;
  color:var(--dim);
  text-align:center;
  padding:6px 0;
}
.res-item{
  background:var(--stepbg);
  border:1px solid var(--bdr);
  border-radius:9px;
  padding:10px 12px;
  margin-bottom:6px;
  font-size:.8rem;
}
.res-item strong{
  color:var(--acc);
}
.res-item a{
  color:var(--txt);
  text-decoration:none;
  font-weight:bold;
}

.res-item a:hover{
  text-decoration:underline;
}

.tl{
  display:flex;
  align-items:flex-start;
  margin-bottom:2px;
}

.tli{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

.tli:not(:first-child)::before{
  content:'';
  position:absolute;
  top:5px;
  right:50%;
  width:100%;
  height:2px;
  background:var(--bdr);
  z-index:0;
}

.tli.done:not(:first-child)::before{
  background:var(--acc);
}

.tld{
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--surf);
  border:2px solid var(--bdr);
  z-index:1;
}

.tli.done .tld{
  background:var(--acc);
  border-color:var(--acc);
}

.tli.cur .tld{
  background:var(--amb);
  border-color:var(--amb);
}

.tll{
  font-size:8px;
  color:var(--dim);
  margin-top:4px;
  text-align:center;
}

.tli.cur .tll{
  color:var(--amb);
}

.ghost{
  background:transparent;
  border:1px solid var(--bdr);
  color:var(--dim);
  padding:6px 10px;
  border-radius:7px;
  font-size:.76rem;
  cursor:pointer;
  width:100%;
  margin-top:8px;
  transition:border-color .2s;
}

.ghost:hover{
  border-color:var(--acc);
  color:var(--txt);
}

.sb-foot{
  padding:12px 16px;
  border-top:1px solid var(--bdr);
  font-size:.77rem;
  color:var(--acc);
  font-weight:600;flex:none;
}

.chat{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.chat-hdr{
  height:64px;
  padding:0 22px;
  background:var(--surf);
  border-bottom:1px solid var(--bdr);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:none;
}

.binfo{
  display:flex;
  align-items:center;gap:11px;
}

.av{
  width:38px;
  height:38px;
  background:var(--acc);
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:700;
  font-size:1rem;
  color:var(--txt);
  box-shadow:0 0 10px var(--acc2);
}

.binfo h3{
  font-size:.95rem;
}

.binfo .sub{
  font-size:.76rem;
  color:var(--dim);
}

.hdr-act{
  display:flex;
  align-items:center;
  gap:10px;
}

.hbtn{
  background:none;
  border:1px solid var(--bdr);
  color:var(--dim);
  border-radius:50%;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:.78rem;
  transition:all .2s;
}

.hbtn:hover,.hbtn.on{
  border-color:var(--acc);
  color:var(--acc);
}

.msgs{
  flex:1;
  padding:20px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.msgs::-webkit-scrollbar{
  width:5px;
}
.msgs::-webkit-scrollbar-thumb{
  background:var(--bdr);
  border-radius:3px;
}
.msg{
  display:flex;
  max-width:82%;
  animation:fi .28s ease forwards;
}
@keyframes fi{
  from{
    opacity:0;
    transform:translateY(7px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.mc{
  padding:12px 15px;
  border-radius:15px;
  font-size:.9rem;
  line-height:1.55;
  word-break:break-word;
}
.msg.bot{
  align-self:flex-start;
}
.msg.bot .mc{
  background:var(--bot);
  border-bottom-left-radius:4px;
}

.msg.user{
  align-self:flex-end;
}
.msg.user .mc{
  background:var(--usr);
  color:var(--txt);
  border-bottom-right-radius:4px;
}
.msg.err .mc{
  background:var(--msgerr);
  border:1px solid var(--mdgbrd);
  color:var(--crisistxt);
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 20px 6px;
}
.chip{
  background:var(--chipbg);
  border:1px solid var(--chipbrd);
  color:var(--acc);
  border-radius:999px;
  font-size:.79rem;
  padding:6px 12px;
  cursor:pointer;
  transition:background .15s;
}
.chip:hover{
  background:var(--chiphvr);
}
.ti{
  display:flex;
  gap:4px;
  padding:3px 2px;
}

.ti span{
  width:7px;
  height:7px;
  background:var(--dim);
  border-radius:50%;
  animation:bo 1.4s infinite ease-in-out both;
}

.ti span:nth-child(1){
  animation-delay:-.32s;
}

.ti span:nth-child(2){
  animation-delay:-.16s;
}

@keyframes bo{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}

.inp-area{
  padding:14px 20px 16px;
  flex:none;
}

.inp-row{
  display:flex;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:11px;
  padding:6px 6px 6px 14px;
  align-items:center;
  gap:5px;
  transition:border-color .3s;
}
.inp-row:focus-within{
  border-color:var(--acc);
}
#txt{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--txt);
  font-size:.9rem;
}

#txt::placeholder{
  color:var(--dim);
}
.ibtn{
  width:36px;
  height:36px;
  border-radius:7px;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:.85rem;
  flex:none;
  transition:background .2s;
}
#mic{
  background:var(--acc);
  color:var(--txt);
}

#mic.on{
  background:var(--danger-color);
  color:var(--crisistxt);
  animation:mp 1.1s ease-in-out infinite;
}

#mic:disabled{
  opacity:.35;
  cursor:not-allowed;
}

#snd{
  background:var(--acc);color:var(--txt);
}

#snd:hover{
  background:var(--acc2);
}

#snd:disabled{
  opacity:.5;cursor:not-allowed;
}

@keyframes mp{
  0%,100%{box-shadow:0 0 0 0 var(--danger-color)}
  50%{box-shadow:0 0 0 7px var(--danger-color)}
}

.mic-note{
  font-size:.75rem;
  color:var(--dim);
  text-align:center;
  margin-top:5px;
  min-height:14px;
}

.disc{
  font-size:.7rem;
  color:var(--dim);
  text-align:center;
  padding:0 20px 8px;
  line-height:1.4;
}

/* Theme dropdown */
.theme-section {
    padding: 0 4px;
}

.theme-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--txt);
}

.theme-select {
  width:100%;
  padding:10px;
  background:var(--acc);
  border:none;
  border-radius:7px;
  color:var(--txt);
  font-weight:700;
  cursor:pointer;
  font-size:.88rem;
  transition:background .2s;
}

.theme-select:focus {
    border-color: var(--accent-color);
}

.theme-select option {
    background: var(--boxbg);
    color: var(--txt);
}