/* ================================================================ VANAURA AI 상담 (Floating Consult Widget) — STEP 2: UI skeleton only ---------------------------------------------------------------- Shared across all 4 service pages (index/about/oem/products.html), loaded via in each page's own . Markup is injected by assets/ai-chat.js at runtime (see that file) — this stylesheet only styles the classes it creates. Reuses each page's own existing design tokens (--forest/--forest-deep/--gold/ --gold-light/--paper/--beige/--ink/--line/--font-display/--font-body/--ease — confirmed identical across all 4 pages' :root) — no new design system, no new tokens introduced here. Position math (right-side floating stack, PC/Tablet vs. Mobile — matches the existing .back-to-top breakpoint at max-width:620px used identically on all 4 pages): PC/Tablet — .back-to-top sits at right:24px / bottom:24px / 48px square, so it spans bottom 24–72px. The consult button (.ai-chat-fab) sits directly above it: right:24px (same alignment) / bottom:88px / 54px square (88–142px), a 16px gap above .back-to-top's top edge. The panel opens directly above the fab. Mobile — .back-to-top sits at right:16px / bottom:calc(16px + safe-area) / 44px square. .ai-chat-fab uses the same right:16px, bottom stacked 14px above it (within the requested 12–16px gap), sized down to 46px. The panel switches to a full-width bottom-sheet instead of stacking above the fab. z-index (existing site stack, confirmed): Access Gate 9999 > Zalo QR modal 600 > nav 350 > info-modal 300 > back-to-top 250. This widget sits at fab 260 / panel 580 — above back-to-top, below Zalo's modal (so if a visitor opens both, Zalo's modal still shows on top, per spec), always below the Access Gate. */ .ai-chat-fab{ position:fixed;right:24px;bottom:88px;z-index:260; width:54px;height:54px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--forest-deep);border:1px solid var(--gold);color:var(--gold-light); font-family:var(--font-body);font-size:.66rem;font-weight:600;letter-spacing:.02em; text-align:center;line-height:1.15;padding:0 4px; box-shadow:0 8px 24px rgba(14,36,27,.28);cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .ai-chat-fab:hover{background:var(--gold);color:var(--forest-deep);transform:translateY(-2px);} .ai-chat-fab-dot{ position:absolute;top:4px;right:4px;width:10px;height:10px;border-radius:50%; background:var(--gold);border:1.5px solid var(--paper); } @media (max-width:620px){ .ai-chat-fab{ right:16px;bottom:calc(16px + env(safe-area-inset-bottom) + 44px + 14px); width:46px;height:46px;font-size:.6rem; } } .ai-chat-panel{ position:fixed;right:24px;bottom:152px;z-index:580; width:380px;height:600px;max-height:calc(100vh - 180px); background:var(--paper);border-radius:12px;overflow:hidden; box-shadow:0 30px 80px rgba(14,36,27,.35); display:flex;flex-direction:column; opacity:0;transform:translateY(16px) scale(.98);pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); } .ai-chat-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;} .ai-chat-header{ display:flex;align-items:center;justify-content:space-between;flex-shrink:0; padding:16px 18px;background:var(--forest-deep);color:var(--paper); font-family:var(--font-display);font-size:.98rem; } .ai-chat-close{ background:none;border:none;color:var(--paper);font-size:1.05rem; cursor:pointer;line-height:1;padding:4px;opacity:.85; } .ai-chat-close:hover{opacity:1;} .ai-chat-body{ flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px; } .ai-chat-msg{ max-width:82%;padding:10px 14px;border-radius:12px; font-family:var(--font-body);font-size:.86rem;line-height:1.55;font-weight:300; white-space:pre-line; } .ai-chat-msg-bot{align-self:flex-start;background:var(--beige);color:var(--ink);border-bottom-left-radius:2px;} .ai-chat-msg-user{align-self:flex-end;background:var(--forest);color:var(--paper);border-bottom-right-radius:2px;} .ai-chat-msg-loading{animation:aiChatPulse 1.1s ease-in-out infinite;} @keyframes aiChatPulse{0%,100%{opacity:.4;}50%{opacity:.85;}} .ai-chat-input:disabled, .ai-chat-send:disabled{opacity:.55;cursor:default;} .ai-chat-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;} .ai-chat-quick-btn{ padding:8px 14px;border-radius:999px;border:1px solid var(--forest); background:none;color:var(--forest); font-family:var(--font-body);font-size:.76rem;font-weight:600;cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease); } .ai-chat-quick-btn:hover{background:var(--forest);color:var(--paper);} .ai-chat-input-row{ flex-shrink:0;display:flex;align-items:center;gap:10px; padding:14px 16px;border-top:1px solid var(--line);background:var(--paper); } .ai-chat-input{ flex:1;min-width:0;border:1px solid var(--line);border-radius:999px; padding:10px 16px;font-family:var(--font-body);font-size:.86rem;color:var(--ink); background:var(--paper);outline:none; } .ai-chat-input:focus{border-color:var(--gold);} .ai-chat-send{ flex-shrink:0;width:38px;height:38px;border-radius:50%; background:var(--forest-deep);color:var(--paper);border:none; display:flex;align-items:center;justify-content:center;cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease); } .ai-chat-send:hover{background:var(--gold);color:var(--forest-deep);} /* Mobile — bottom-sheet, anchored to the real viewport edges (not stacked above the fab like the PC panel is), per spec section 10. Mobile fix (later step): `vh` on mobile Safari/Chrome is the LARGE viewport (as if the address bar were always hidden), so a plain vh-only height could size the sheet taller than what's actually visible when browser chrome is showing, clipping the top of the panel or pushing the input row behind it. `dvh` tracks the CURRENT real viewport instead — declared as a second `height`/`max-height` line so browsers that don't understand `dvh` simply ignore it and keep the plain-vh fallback above (no @supports needed, invalid values are dropped silently). The `calc(100dvh - 12px - safe-area-inset-bottom)` term is the hard ceiling: 12px top breathing room + the home-indicator/notch's own safe area, so the sheet can never be taller than what's actually on screen no matter how tall the dvh soft target alone would ask for — this is what actually prevents top/bottom clipping; the dvh soft target just keeps the usual sheet proportion on a normal-height screen where there's room to spare. ai-chat.js's initViewportGuard() layers on top of this via an inline max-height for the on-screen-keyboard case specifically (dvh doesn't reliably shrink for the keyboard the way it does for browser chrome) — untouched, still the same logic. Sizing (later step, 2nd pass): 75dvh read as covering too much of the page for a visitor who wants to glance at page content or navigate while chatting. Compared 55/58/60dvh by real measurement across iPhone SE/14/14 Pro Max/Pixel 7 — all three sit inside the requested 55-60% band with no clipping; picked 58dvh as the middle of that range (a ~23% reduction from the old 75dvh), leaving roughly 350-390px of the page visible above the sheet on a typical phone. max-height brought down to 65dvh to match (was 85dvh) so a very tall screen doesn't stretch the sheet back out. Sizing (later step, 3rd pass): real-world use of 58dvh still felt too tall — lowered again to 54dvh / max-height 60dvh, leaving more of the page visible and page scrolling/navigation less cramped. Same min()/dvh/safe-area clamp mechanism as before, values only. */ @media (max-width:620px){ .ai-chat-panel{ left:8px;right:8px;bottom:0;width:auto; height:54vh; /* fallback for browsers without dvh support */ height:min(54dvh, calc(100dvh - 12px - env(safe-area-inset-bottom, 0px))); max-height:60vh; max-height:min(60dvh, calc(100dvh - 12px - env(safe-area-inset-bottom, 0px))); border-radius:16px 16px 0 0; transform:translateY(100%); } .ai-chat-panel.open{transform:translateY(0);} .ai-chat-input-row{padding-bottom:calc(14px + env(safe-area-inset-bottom));} } @media (prefers-reduced-motion: reduce){ .ai-chat-fab, .ai-chat-panel{transition:none;} .ai-chat-msg-loading{animation:none;opacity:.7;} }