:root{
  --bg:#202020;
  --panel:#333533;
  --panel-soft:rgba(255,255,255,0.04);

  --text:#D6D6D6;
  --muted:rgba(214,214,214,0.65);

  --primary:#FFD100;
  --primary-soft:#FFEE32;

  --border:rgba(214,214,214,0.12);

  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,0.45);

  --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;

  --composer-h: 64px;
  --topbar-h: 72px;
  --vh: 1vh;
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(255,209,0,0.18), transparent 65%),
    radial-gradient(900px 600px at 85% 30%, rgba(255,238,50,0.12), transparent 70%),
    var(--bg);
}

.app{
  height: calc(var(--vh) * 100);
  min-height: 100%;
  display:flex;
  flex-direction:column;
  padding-top: var(--topbar-h);
}

.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;

  height: var(--topbar-h);
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding: 0 16px;
  border-bottom:1px solid var(--border);
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  min-width: 0;
}

.logo{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}

.logo img{
  width:78%;
  height:78%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(255,209,0,0.35));
}

.meta{
  min-width: 0;
}

.meta .title{
  font-weight:700;
  font-size:16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.controls{
  flex: 0 0 auto;
}

.content{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  justify-content:center;
  padding:12px;
}

.panel{
  width:100%;
  max-width:980px;
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.chatHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,0.25);
  flex:0 0 auto;
}

.chatTitle{
  font-weight:700;
  font-size:14px;
}

.chatStatus{
  font-size:12px;
  color:var(--primary-soft);
}

.chat{
  flex:1 1 auto;
  min-height:0;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;

  padding-bottom: calc(var(--composer-h) + 12px + env(safe-area-inset-bottom));
}

.bubble{
  max-width:85%;
  padding:10px 12px;
  border-radius:14px;
  font-size:14px;
  line-height:1.45;
  word-wrap:break-word;
}

.bubble.user{
  margin-left:auto;
  background:linear-gradient(135deg,var(--primary),var(--primary-soft));
  color:#202020;
}

.bubble.bot{
  margin-right:auto;
  background:var(--panel-soft);
  border:1px solid var(--border);
}

.bubble .time{
  display:block;
  margin-top:6px;
  font-size:11px;
  opacity:0.6;
}

.composer{
  display:flex;
  gap:8px;
  padding:10px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,0.35);
}

.composer input{
  flex:1;
  height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#202020;
  color:var(--text);
  padding:0 14px;
  outline:none;
  font-size:16px;
}

.composer input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(255,209,0,0.25);
}

.btn{
  height:44px;
  border-radius:14px;
  border:none;
  padding:0 16px;
  cursor:pointer;
  font-weight:700;
}

.btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-soft));
  color:#202020;
}

.btn.secondary{
  background:#333533;
  color:var(--text);
}

.footer{ display:none; }

@media (max-width:640px){
  :root{
    --topbar-h: 64px;
  }

  .content{
    padding:0;
  }

  .panel{
    border-radius:0;
    box-shadow:none;
    height:100%;
  }

  .topbar{
    padding: 0 12px;
  }

  .meta .title{
    font-size:15px;
  }

  .composer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .bubble{ max-width:92%; }
}