/* --------------------------------------------------------------- DTF Station Assistant — chat widget (POC) Reuses the design tokens from design.css (--accent, --ink, --line …) via the .gs scope on ; main.css aliases the old names. ----------------------------------------------------------------*/ .dtfa-launcher{ position:fixed;bottom:22px;right:22px;z-index:900; width:58px;height:58px;border:0;border-radius:50%;cursor:pointer; /* Brand fill with DARK glyph — white on #49BFBC fails contrast; same rule as .btn-accent in design.css. */ background:var(--accent,#49BFBC); box-shadow:0 2px 6px rgba(20,24,26,.05),0 18px 40px -24px rgba(20,24,26,.22); display:flex;align-items:center;justify-content:center; transition:transform .25s ease,box-shadow .25s ease; } .dtfa-launcher:hover{transform:translateY(-2px) scale(1.03);background:var(--accent-hover,#40B5B2)} .dtfa-launcher svg{width:26px;height:26px;stroke:#0b0b0d;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .dtfa-launcher .dtfa-ic-close{display:none} .dtfa-open .dtfa-launcher .dtfa-ic-chat{display:none} .dtfa-open .dtfa-launcher .dtfa-ic-close{display:block} .dtfa-panel{ position:fixed;bottom:92px;right:22px;z-index:900; width:min(384px,calc(100vw - 32px)); height:min(580px,calc(100vh - 130px)); background:#fff;border:1px solid var(--line,#e5e5e7); border-radius:20px;overflow:hidden; display:flex;flex-direction:column; box-shadow:0 30px 70px -20px rgba(0,0,0,.32),0 4px 14px rgba(0,0,0,.10); font-family:var(--font,"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif); opacity:0;transform:translateY(12px) scale(.98);pointer-events:none; transition:opacity .2s ease,transform .2s ease; } .dtfa-open .dtfa-panel{opacity:1;transform:none;pointer-events:auto} /* Header */ .dtfa-head{padding:16px 18px;border-bottom:1px solid var(--line,#e5e5e7);display:flex;align-items:center;gap:11px} .dtfa-badge{width:34px;height:34px;border-radius:10px;flex:0 0 auto;background:var(--accent,#49BFBC);display:flex;align-items:center;justify-content:center;font-weight:600;color:#202124;font-size:14px} .dtfa-head h4{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink,#1a1a1c)} .dtfa-head p{margin:1px 0 0;font-size:12px;color:var(--ink-faint,#86868b)} .dtfa-head .dtfa-x{margin-left:auto;background:none;border:0;cursor:pointer;padding:6px;color:var(--ink-faint,#86868b);line-height:0;border-radius:8px} .dtfa-head .dtfa-x:hover{background:var(--bg-alt,#f5f5f7);color:var(--ink,#1a1a1c)} .dtfa-head .dtfa-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} /* Demo-mode notice */ .dtfa-note{display:none;font-size:11.5px;line-height:1.4;color:#7a5b00;background:#fff7e0;border-bottom:1px solid #f0e2b0;padding:8px 18px} .dtfa-demo .dtfa-note{display:block} /* Message list */ .dtfa-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--bg,#fff)} .dtfa-msg{max-width:85%;font-size:14px;line-height:1.5;padding:10px 13px;border-radius:16px;white-space:pre-wrap;word-wrap:break-word} .dtfa-msg.bot{align-self:flex-start;background:var(--bg-alt,#f5f5f7);color:var(--ink,#1a1a1c);border-bottom-left-radius:5px} .dtfa-msg.user{align-self:flex-end;background:var(--accent,#34c9d4);color:#0b0b0d;border-bottom-right-radius:5px} .dtfa-msg strong{font-weight:600} .dtfa-msg a{color:var(--accent-dark,#0e93a1);text-decoration:underline} /* Typing dots */ .dtfa-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:var(--bg-alt,#f5f5f7);border-radius:16px;border-bottom-left-radius:5px} .dtfa-typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-faint,#86868b);animation:dtfa-bounce 1.2s infinite ease-in-out} .dtfa-typing span:nth-child(2){animation-delay:.15s} .dtfa-typing span:nth-child(3){animation-delay:.3s} @keyframes dtfa-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}} /* Composer */ .dtfa-form{display:flex;align-items:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--line,#e5e5e7);background:#fff} .dtfa-form textarea{flex:1;resize:none;border:1px solid var(--line,#e5e5e7);border-radius:18px;padding:10px 14px;font-family:inherit;font-size:14px;line-height:1.4;max-height:96px;outline:none;transition:border-color .18s;color:var(--ink,#1a1a1c)} .dtfa-form textarea:focus{border-color:var(--accent,#34c9d4)} .dtfa-send{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;background:var(--accent,#34c9d4);display:flex;align-items:center;justify-content:center;transition:.18s} .dtfa-send:hover{filter:brightness(1.07)} .dtfa-send:disabled{opacity:.4;cursor:default} .dtfa-send svg{width:18px;height:18px;stroke:#0b0b0d;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .dtfa-foot{text-align:center;font-size:10.5px;color:var(--ink-faint,#86868b);padding:0 0 9px;background:#fff} @media (max-width:480px){ .dtfa-panel{bottom:0;right:0;width:100vw;height:100dvh;border-radius:0} .dtfa-launcher{bottom:16px;right:16px} } /* Quick-contact row (Zalo + Call) at the top of the panel */ .dtfa-contact{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line,#e5e5e7)} .dtfa-cbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;border-radius:10px;font-size:13.5px;font-weight:600;text-decoration:none;transition:filter .18s,background .18s} .dtfa-cbtn svg{width:16px;height:16px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .dtfa-cz{background:#0068ff;color:#fff} .dtfa-cz svg{stroke:#fff} .dtfa-cz:hover{filter:brightness(1.07)} .dtfa-cp{background:var(--accent-tint,#e9f7f9);color:var(--accent-dark,#0e93a1)} .dtfa-cp svg{stroke:currentColor} .dtfa-cp:hover{background:#dbeff2} /* footer Zalo / phone line (footer is dark) */ .foot-contact{margin-top:16px;font-size:14px;line-height:1.7;color:#c4c4ca} .foot-contact a{color:#c4c4ca;text-decoration:none} .foot-contact a:hover{color:#fff} .foot-contact .foot-zalo{color:#4d9bff;font-weight:700}