:root{--ink:#1a1a1a;--mute:#6b7280;--line:#eef0f3;--me:#2563eb;--bub:#f3f4f6;--staff:#fff7e6;--staffb:#fde3b0}*{box-sizing:border-box}html,body,#root{height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;background:#fff;margin:0;font-family:Pretendard Variable,Pretendard,-apple-system,system-ui,sans-serif}.app{flex-direction:column;max-width:640px;height:100dvh;margin:0 auto;display:flex}header{border-bottom:1px solid var(--line);flex:none;align-items:center;gap:10px;padding:12px 14px;display:flex}.logo{color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:10px;justify-content:center;align-items:center;width:34px;height:34px;font-weight:800;display:flex}.ttl{flex:1}.ttl b{font-size:15px;display:block}.ttl small{color:var(--mute);font-size:12px}.conn{background:#d1d5db;border-radius:50%;width:9px;height:9px}.conn.on{background:#22c55e}.conn.retry{background:#f59e0b}main{overscroll-behavior:contain;flex-direction:column;flex:1;gap:8px;padding:14px 12px 8px;display:flex;overflow-y:auto}.row{flex-direction:column;max-width:84%;display:flex}.row.me{align-self:flex-end;align-items:flex-end}.row.them{align-self:flex-start}.who{color:var(--mute);margin:0 4px 2px;font-size:11px}.bub{white-space:pre-wrap;word-break:break-word;border-radius:16px;padding:9px 12px;font-size:14.5px;line-height:1.5}.me .bub{background:var(--me);color:#fff;border-bottom-right-radius:5px}.them .bub{background:var(--bub);border-bottom-left-radius:5px}.them.staff .bub{background:var(--staff);border:1px solid var(--staffb)}.bub img{border-radius:10px;max-width:220px;margin:4px 0;display:block}.pending .bub{opacity:.55}.sys{color:var(--mute);text-align:center;white-space:pre-wrap;background:#f9fafb;border-radius:10px;align-self:center;max-width:92%;padding:5px 11px;font-size:12px}.chips{flex-wrap:wrap;align-self:flex-start;gap:6px;max-width:92%;display:flex}.chip{color:#3730a3;font:inherit;cursor:pointer;background:#fff;border:1px solid #c7d2fe;border-radius:16px;padding:7px 12px;font-size:13.5px;font-weight:600}.chip:disabled{opacity:.45;cursor:default}.typing{background:var(--bub);border-radius:16px;align-self:flex-start;gap:4px;padding:11px 14px;display:flex}.typing i{background:#9ca3af;border-radius:50%;width:6px;height:6px;animation:1s infinite tp}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}@keyframes tp{0%,60%,to{opacity:.3}30%{opacity:1}}.preview{gap:6px;padding:0 12px;display:flex}.preview img{border:1px solid var(--line);border-radius:8px;height:54px}form{padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex:none;align-items:flex-end;gap:8px;display:flex}textarea{resize:none;font:inherit;background:#f3f4f6;border:0;border-radius:18px;outline:none;flex:1;max-height:120px;padding:9px 14px;font-size:15px}.clip{color:#6b7280;cursor:pointer;background:#f3f4f6;border-radius:50%;flex:none;justify-content:center;align-items:center;width:34px;height:34px;font-size:20px;display:flex}.send{background:var(--me);color:#fff;cursor:pointer;border:0;border-radius:50%;flex:none;width:36px;height:36px;font-size:17px}.send:disabled{background:#c7d2fe}.banner{color:var(--mute);text-align:center;margin:40px auto;padding:0 20px;font-size:14px;line-height:1.7}