/* PalmHub Claude Agent — Light Theme */
:root{
  --pha-gold:#B8860B;
  --pha-gold-bg:rgba(184,134,11,.08);
  --pha-gold-b:rgba(184,134,11,.25);
  --pha-ink:#1a1a2e;
  --pha-ink2:#ffffff;
  --pha-ink3:#f8f7f4;
  --pha-line:rgba(0,0,0,.08);
  --pha-line2:rgba(0,0,0,.12);
  --pha-text:#1a1a2e;
  --pha-text2:rgba(26,26,46,.65);
  --pha-text3:rgba(26,26,46,.4);
  --pha-green:#16a34a;
}

.pha-wrap{
  width:100%;max-width:780px;margin:0 auto;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;
  height:600px;position:relative;
  font-family:-apple-system,'Segoe UI',sans-serif;
  box-shadow:0 4px 24px rgba(0,0,0,.08);
}
.pha-wrap::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,#C9A84C,transparent);
}

/* header */
.pha-head{
  padding:16px 22px;
  border-bottom:1px solid var(--pha-line);
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  background:#ffffff;
}
.pha-avatar{
  width:38px;height:38px;border-radius:50%;
  background:#1a1a2e;
  border:2px solid #C9A84C;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:600;color:#C9A84C;flex-shrink:0;
  font-family:Georgia,serif;
}
.pha-head-info{flex:1;min-width:0}
.pha-name{font-size:13px;font-weight:600;color:#1a1a2e}
.pha-status{
  font-size:10px;color:var(--pha-text3);
  display:flex;align-items:center;gap:5px;margin-top:2px;
}
.pha-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--pha-green);
  animation:pha-pulse 2s infinite;flex-shrink:0;
}
@keyframes pha-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.pha-head-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.pha-lang,.pha-reset{
  font-size:11px;padding:4px 11px;border-radius:20px;
  border:1px solid rgba(0,0,0,.15);background:transparent;
  color:var(--pha-text3);cursor:pointer;font-family:inherit;transition:all .15s;
}
.pha-lang:hover,.pha-reset:hover{color:var(--pha-text2);border-color:rgba(0,0,0,.25)}
.pha-lang.on{
  background:rgba(201,168,76,.12);
  border-color:rgba(201,168,76,.4);
  color:#92660f;font-weight:500;
}

/* messages */
.pha-msgs{
  flex:1;overflow-y:auto;padding:18px 22px;
  display:flex;flex-direction:column;gap:10px;
  scroll-behavior:smooth;
  background:#f8f7f4;
}
.pha-msgs::-webkit-scrollbar{width:3px}
.pha-msgs::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:2px}

.pha-msg{display:flex;gap:9px;align-items:flex-start;animation:pha-in .22s ease}
@keyframes pha-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.pha-msg.user{flex-direction:row-reverse}

.pha-msg-av{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;
}
.pha-msg.bot  .pha-msg-av{background:#1a1a2e;border:1.5px solid #C9A84C;color:#C9A84C;font-family:Georgia,serif;font-size:14px}
.pha-msg.user .pha-msg-av{background:#e5e3de;border:1px solid rgba(0,0,0,.1);color:#6b6a7a;font-size:10px}

.pha-bubble{
  max-width:80%;padding:10px 14px;border-radius:12px;
  font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
}
.pha-msg.bot  .pha-bubble{
  background:#ffffff;border:1px solid rgba(0,0,0,.08);
  border-radius:3px 12px 12px 12px;color:#1a1a2e;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.pha-msg.user .pha-bubble{
  background:#1a1a2e;color:#f0eef8;
  border-radius:12px 3px 12px 12px;
}
.pha-msg.ar   .pha-bubble{direction:rtl;text-align:right;font-size:14px;line-height:1.75}

/* quick replies */
.pha-qr{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.pha-qr-btn{
  font-size:11px;padding:5px 13px;border-radius:20px;
  border:1px solid rgba(184,134,11,.3);
  background:rgba(201,168,76,.08);
  color:#92660f;cursor:pointer;font-family:inherit;
  white-space:nowrap;transition:all .15s;font-weight:500;
}
.pha-qr-btn:hover{background:rgba(201,168,76,.18);border-color:rgba(184,134,11,.5)}

/* typing */
.pha-typing{
  display:flex;align-items:center;gap:4px;padding:12px 14px;
  background:#ffffff;border:1px solid rgba(0,0,0,.08);
  border-radius:3px 12px 12px 12px;width:52px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.pha-typing span{width:5px;height:5px;border-radius:50%;background:#9ca3af;animation:pha-blink 1.2s infinite}
.pha-typing span:nth-child(2){animation-delay:.2s}
.pha-typing span:nth-child(3){animation-delay:.4s}
@keyframes pha-blink{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* lead panel */
.pha-lead{
  display:none;padding:12px 22px;
  border-top:1px solid var(--pha-line);
  background:#fffbf2;
}
.pha-lead.show{display:block}
.pha-lead-title{
  font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:#92660f;margin-bottom:9px;
}
.pha-lead-grid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:7px}
.pha-input{
  background:#ffffff;border:1px solid rgba(0,0,0,.15);
  border-radius:8px;padding:8px 12px;font-size:12px;color:#1a1a2e;
  font-family:inherit;outline:none;transition:border-color .15s;width:100%;
}
.pha-input:focus{border-color:rgba(201,168,76,.6)}
.pha-input::placeholder{color:#9ca3af}
.pha-lead-btn{
  padding:8px 16px;background:#1a1a2e;border:none;border-radius:8px;
  color:#C9A84C;font-family:inherit;font-size:12px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:all .15s;
}
.pha-lead-btn:hover{background:#2a2845}

/* footer */
.pha-foot{
  padding:12px 22px;border-top:1px solid var(--pha-line);
  display:flex;gap:9px;background:#ffffff;
}
.pha-textarea{
  flex:1;background:#f8f7f4;border:1px solid rgba(0,0,0,.12);
  border-radius:9px;padding:9px 13px;font-size:13px;color:#1a1a2e;
  font-family:inherit;outline:none;resize:none;height:40px;
  line-height:1.4;transition:border-color .15s;
}
.pha-textarea:focus{border-color:rgba(201,168,76,.5)}
.pha-textarea::placeholder{color:#9ca3af}
.pha-send{
  width:40px;height:40px;background:#1a1a2e;border:none;border-radius:9px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:#C9A84C;transition:all .15s;
}
.pha-send:hover{background:#2a2845;transform:scale(1.05)}
.pha-send:disabled{opacity:.35;cursor:default;transform:none}

/* responsive */
@media(max-width:620px){
  .pha-wrap{height:560px;border-radius:14px}
  .pha-head,.pha-msgs,.pha-foot{padding-left:14px;padding-right:14px}
  .pha-bubble{max-width:88%}
  .pha-lead{padding:10px 14px}
  .pha-lead-grid{grid-template-columns:1fr 1fr}
  .pha-lead-btn{grid-column:span 2}
}