:root {
  --page-bg: #0a0605; 
  --panel: #1a100d;
  --panel-2: #1f1410;

  --orange: #d4550a;
  --orange-deep: #992f05;
  --orange-shadow: rgba(212, 85, 10, 0.5);

  --accent: var(--orange);  
  --send-icon: #fff0e8;    

  --text: #f8e7e0;
  --muted: #c9a08a;

  --radius: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--page-bg);
  color:var(--text);
  font:500 16px/1.5 Arial, sans-serif; 
  display:flex; flex-direction:column;
}

.app{
  display:flex; flex-direction:column; height:100%;
}

.header{
  height:56px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-weight:700; letter-spacing:.3px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
}

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

.scroll{
  flex:1; overflow:auto; padding:20px; gap:10px; display:flex; flex-direction:column;
}

.intro{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.intro h1{
  margin:0;
  font:800 28px/1.1 inherit; 
  letter-spacing:.2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}

.msg{max-width:72%; animation:fade .2s ease}

.msg.user{
  align-self:flex-end; background:var(--orange); color:#fff;
  padding:10px 12px; border-radius:18px; border-bottom-right-radius:6px;
  box-shadow:0 6px 20px var(--orange-shadow);
}

.msg.bot{
  align-self:flex-start; background:none; color:var(--text);
  padding:0; border-radius:0;
}

.bot-chunk{margin:6px 0}
.bot-name{font-size:12px; color:var(--muted); margin-bottom:4px}

.code{
  margin:10px 0; border-radius:10px; overflow:hidden; background:var(--panel);
  border:1px solid rgba(255,255,255,0.08);
}

.code-header{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--panel-2); padding:8px 10px; gap:8px;
}

.code-lang{
  font-size:12px; font-weight:700; color:var(--orange); letter-spacing:.2px;
}

.copy-btn{
  appearance:none; border:0; background:transparent; padding:4px; margin:0;
  cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:8px;
  transition:background .15s ease, transform .05s ease;
}

.copy-btn:hover{background:rgba(255,255,255,0.06)}
.copy-btn:active{transform:scale(0.96)}
.copy-btn img{
  width:16px; height:16px; display:block;
  filter: invert(54%) sepia(88%) saturate(3200%) hue-rotate(10deg) brightness(96%) contrast(95%);
}

pre{
  margin:0; padding:12px; background:transparent; overflow:auto;
}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:13px;
}

.footer{
  padding:12px; border-top:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02);
}

.input-row{
  display:flex; gap:10px; align-items:center;
  background:var(--panel-2); border:1px solid rgba(255,255,255,0.08);
  border-radius:999px; padding:6px 8px;
}

.input-row:focus-within{
  border-color: color-mix(in srgb, var(--orange) 65%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 20%, transparent);
}

.input{
  flex:1; background:transparent; color:var(--text); border:0; outline:0; height:44px;
  padding:0 10px; font-size:16px;
}

.input::placeholder{color:#f6d9c9; opacity:.9}

.send{
  width:44px; height:44px; min-width:44px; min-height:44px;
  border-radius:50%; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  background:var(--accent);
  color:var(--send-icon);
  font-size:18px; font-weight:900;
  transition:transform .06s ease, filter .15s ease;
}

.send:hover{filter:brightness(1.08)}
.send:active{transform:scale(0.97)}
.send.typing{animation:pulse 1s infinite}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:translateY(0)}}
.hidden{display:none}

.typing-indicator {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  padding:0;
  border-radius:0;
  background:transparent;
  max-width:72%;
  line-height:1;
}

.loader {
  width: 2.6rem;     
  padding: 0.4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
  --sp:
    conic-gradient(#0000 10%, #000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--sp);
          mask: var(--sp);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: SP 1s infinite linear;
  display:inline-block;
  vertical-align:middle;
}
@keyframes SP { to { transform: rotate(1turn); } }

.intro h1::after{
  content: '';
  display:inline-block;
  width:2px;            
  height:1.2em;         
  margin-left:6px;
  background:var(--orange);
  vertical-align:middle;
  border-radius:1px;
  transform: translateY(-0.06em); 
}

@keyframes blink{ 0%,50%{ opacity:1 } 51%,100%{ opacity:0 } }