/* Kim Tài Lộc — Luxury Chat UI */
:root{
  --ktl-bg: #0b0d10;
  --ktl-panel: rgba(9,11,14,0.75);
  --ktl-border: rgba(255,215,0,0.65);
  --ktl-gold: #f2d26b;
  --ktl-gold-2: #c9a53b;
  --ktl-white: #f5f7fb;
  --ktl-muted: #cfd3de;
  --ktl-shadow: 0 12px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,215,0,0.08);
}

#ktl-bubble{
  position: fixed; right: 20px; bottom: 20px; width: 64px; height: 64px;
  border-radius: 999px; background: linear-gradient(145deg,#0d0f13,#141821);
  border: 1px solid var(--ktl-border);
  box-shadow: 0 0 12px rgba(255,215,0,0.25), 0 10px 24px rgba(0,0,0,0.35);
  display: grid; place-items: center; cursor: pointer; z-index: 999999;
}
#ktl-bubble .avatar{
  width: 42px; height: 42px; border-radius: 999px; overflow: hidden;
  border: 1px solid var(--ktl-border); display:grid;place-items:center;
  background: radial-gradient(120% 120% at 20% 20%, #1a1f2a 0%, #0b0d10 65%);
  color: var(--ktl-gold);
  font-weight: 700; letter-spacing: 0.5px;
}
#ktl-bubble .avatar img{ width: 100%; height: 100%; object-fit: cover; display:block; }

/* Panel */
#ktl-panel{
  position: fixed; right: 20px; bottom: 96px; width: 380px; max-height: 70vh;
  display: none; flex-direction: column; overflow: hidden;
  border-radius: 18px; backdrop-filter: blur(10px);
  background: var(--ktl-panel);
  border: 1px solid var(--ktl-border); box-shadow: var(--ktl-shadow);
  z-index: 999999;
}
#ktl-panel.open{ display: flex; }

#ktl-panel .ktl-header{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid rgba(255,215,0,0.25);
  background: linear-gradient(180deg, rgba(255,215,0,0.08), transparent);
}
.ktl-title{
  color: var(--ktl-gold); font-weight: 700; letter-spacing: .3px; font-size: 15px;
}
.ktl-sub{ color: var(--ktl-muted); font-size: 12px; }

.ktl-actions{ margin-left: auto; display: flex; gap: 8px; }
#ktl-panel .ktl-btn{
  padding: 6px 10px; font-size: 12px; border-radius: 8px; border: 1px solid var(--ktl-border);
  color: var(--ktl-gold); background: rgba(255,215,0,0.04); text-decoration: none;
}
#ktl-panel .ktl-btn:hover{ background: rgba(255,215,0,0.12); }

#ktl-chat{
  padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 10px;
}

/* Messages */
.msg{
  max-width: 80%; padding: 10px 12px; border-radius: 14px; line-height: 1.45;
  font-size: 14px; position: relative;
}
.msg.bot{
  align-self: flex-start; background: rgba(255,255,255,0.04);
  color: var(--ktl-white); border: 1px solid rgba(255,255,255,0.06);
}
.msg.me{
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(255,215,0,0.18), rgba(255,215,0,0.12));
  color: var(--ktl-white);
  border: 1px solid rgba(255,215,0,0.35);
}

/* Typing */
.typing{ display: inline-flex; align-items: center; gap: 6px; color: var(--ktl-muted); }
.dot{ width:6px; height:6px; border-radius:50%; background: var(--ktl-gold); opacity:.7; animation: blink 1.3s infinite ease-in-out; }
.dot:nth-child(2){ animation-delay: .15s; } .dot:nth-child(3){ animation-delay: .3s; }
@keyframes blink{ 0%,80%,100%{ opacity:.2; } 40%{ opacity:1; } }

/* Footer input */
#ktl-panel.ktl-footer{ padding: 10px; border-top: 1px solid rgba(255,215,0,0.25); display: flex; gap: 8px; }
#ktl-input{
  flex: 1; padding: 10px 12px; background: #0f131a; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
  color: var(--ktl-white); outline: none;
}
#ktl-send{
  padding: 10px 14px; border-radius: 12px; background: linear-gradient(180deg, #f2d26b, #caa746);
  color: #1b1e26; font-weight: 700; border: none; cursor: pointer;
}
#ktl-send:disabled{ opacity: .6; cursor: not-allowed; }

/* Quick chips */
#ktl-chips{ display: flex; flex-wrap: wrap; gap: 8px; padding:  1em; }
.kchip{
  border: 1px solid var(--ktl-border); color: var(--ktl-gold); font-size: 12px;
  padding: 6px 8px; border-radius: 999px; background: rgba(255,215,0,0.06); cursor: pointer;
}
.kchip:hover{ background: rgba(255,215,0,0.12); }

/* Responsive */
@media (max-width:480px){
  #ktl-panel{ right: 10px; left: 10px; width: auto; bottom: 86px; }
  #ktl-bubble{ right: 12px; bottom: 12px; }
}