@charset "utf-8";
/* Naireen · agent.css — #agent */

/* ---------- agent demo ---------- */
.agent-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:clamp(28px,5vw,64px); align-items:center}
.phone{
  background:#0E0E13; border:1px solid var(--line); border-radius:28px; padding:12px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(245,240,230,.04) inset;
}
.ph-top{display:flex; align-items:center; gap:10px; padding:8px 8px 14px; border-bottom:1px solid var(--line-soft)}
.ph-av{width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 34% 30%, #F2D08A, #B4902F); display:grid; place-items:center; color:#0B0B0E; font-family:var(--f-ui); font-weight:600; font-size:13px; flex:0 0 auto}
.ph-top b{display:block; font-size:14.5px; font-weight:500; font-family:var(--f-ar)}
.ph-top i{display:block; font-style:normal; font-size:11.5px; color:var(--emerald); font-family:var(--f-ui); letter-spacing:.04em}
.thread{display:flex; flex-direction:column; gap:10px; padding:16px 6px 8px; min-height:330px; justify-content:flex-end}
.msg{max-width:84%; padding:11px 14px; border-radius:16px; font-size:14.5px; line-height:1.7}
.js .msg{display:none}
.msg.show{display:block; animation:msgin .5s cubic-bezier(.16,1,.3,1) both}
@keyframes msgin{from{opacity:0; transform:translateY(10px) scale(.985)}to{opacity:1; transform:none}}
.typing{display:none}
.typing.on{display:flex}
.msg .who{display:block; font-family:var(--f-ui); font-size:10px; letter-spacing:.11em; text-transform:uppercase; margin-bottom:5px; opacity:.72}
.msg .t{display:block}
.m-user{align-self:flex-start; background:#1B1B22; border:1px solid var(--line); border-end-start-radius:5px}
.m-ai{align-self:flex-end; background:rgba(214,174,91,.12); border:1px solid rgba(214,174,91,.3); border-end-end-radius:5px}
.m-ai .who{color:var(--gold)}
.m-human{align-self:flex-end; background:rgba(30,138,99,.14); border:1px solid rgba(30,138,99,.42); border-end-end-radius:5px}
.m-human .who{color:#49B88C}
.seal-chip{display:inline-flex; align-items:center; gap:6px; margin-top:9px; font-family:var(--f-ui); font-size:10.5px; letter-spacing:.1em; color:#49B88C; border:1px solid rgba(30,138,99,.45); border-radius:999px; padding:4px 10px}
.typing{align-self:flex-end; gap:4px; padding:12px 15px; background:rgba(214,174,91,.1); border:1px solid rgba(214,174,91,.25); border-radius:16px}
.typing i{width:5px; height:5px; border-radius:50%; background:var(--gold); animation:bob 1.1s infinite}
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-4px)}}
.ph-input{display:flex; align-items:center; gap:10px; margin-top:10px; padding:11px 14px; border:1px solid var(--line); border-radius:999px; color:var(--stone); font-size:13.5px}
.replay{margin-top:16px; background:none; border:1px solid var(--line); color:var(--mist); font-family:var(--f-ui); font-size:12px; letter-spacing:.06em; padding:9px 16px; border-radius:999px; cursor:pointer; transition:border-color .3s,color .3s}
.replay:hover{border-color:var(--gold); color:var(--flash)}