*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#f8f9fa;--color-header:#0f172a;--color-user:#1a56db;--color-user-text:#fff;--color-ai:#f0f0f0;--color-ai-text:#1a1a2e;--color-send:#1a56db;--color-accent:#0f172a;--color-border:#e2e8f0;--color-muted:#94a3b8;--radius-bubble:16px;--font-base:"Noto Sans JP", sans-serif;--font-logo:"Space Grotesk", sans-serif}body{font-family:var(--font-base);background:var(--color-bg);color:var(--color-ai-text);-webkit-font-smoothing:antialiased;line-height:1.7}.app{background:var(--color-bg);flex-direction:column;max-width:720px;height:100dvh;margin:0 auto;display:flex}.header{background:#0f172a;flex-shrink:0;align-items:center;gap:10px;padding:12px 16px;display:flex}.header-mark{width:auto;height:36px}.header-logo{filter:brightness(0)invert();width:auto;height:28px}.ai-avatar{border-radius:50%;width:32px;height:32px}.chat-area{scroll-behavior:smooth;flex:1;position:relative;overflow-y:auto}.chat-area.drag-over{background:#1a56db0d;border:2px dashed #1a56db}.drag-overlay{pointer-events:none;z-index:10;background:#1a56db14;border:2px dashed #1a56db;border-radius:12px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.drag-overlay-text{color:#1a56db;font-size:16px;font-weight:600}.messages{flex-direction:column;gap:6px;padding:24px 16px 12px;display:flex}.row{align-items:flex-end;gap:8px;display:flex}.row-user{flex-direction:row-reverse}.row-assistant{flex-direction:row}.avatar{background:var(--color-header);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;margin-bottom:2px;display:flex}.bubble{border-radius:var(--radius-bubble);word-break:break-word;white-space:pre-wrap;max-width:min(68%,480px);padding:12px 16px;font-size:.92rem;line-height:1.75}.bubble-user{background:var(--color-user);color:var(--color-user-text);border-bottom-right-radius:4px}.bubble-assistant{background:var(--color-ai);color:var(--color-ai-text);border-bottom-left-radius:4px}.bubble-img{object-fit:contain;border-radius:10px;max-width:100%;max-height:260px;margin-top:8px;display:block}.generated-img{border-radius:12px;width:100%;max-width:480px;margin-top:12px;display:block;box-shadow:0 4px 16px #00000026}.bubble-loading{align-items:center;gap:5px;min-width:58px;padding:14px 18px;display:flex}.dot{background:var(--color-muted);border-radius:50%;width:7px;height:7px;animation:1.2s ease-in-out infinite bounce}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,80%,to{opacity:.5;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}.footer{border-top:1px solid var(--color-border);background:#fff;flex-shrink:0;padding:10px 12px 14px}.preview-bar{background:#f1f5f9;border-radius:10px;align-items:center;gap:10px;margin-bottom:8px;padding:6px 10px;display:flex}.preview-thumb{object-fit:cover;border-radius:6px;flex-shrink:0;width:36px;height:36px}.preview-name{color:var(--color-muted);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.78rem;overflow:hidden}.preview-remove{cursor:pointer;color:var(--color-muted);background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:3px;transition:color .15s;display:flex}.preview-remove:hover{color:#ef4444}.input-row{align-items:flex-end;gap:8px;display:flex}.icon-btn{cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;transition:background .15s,opacity .15s;display:flex}.attach-btn{color:#64748b;background:#f1f5f9}.attach-btn:hover{color:var(--color-accent);background:#e2e8f0}.chat-input{border:1.5px solid var(--color-border);min-height:40px;max-height:120px;font-family:var(--font-base);resize:none;color:var(--color-ai-text);background:#f8fafc;border-radius:20px;outline:none;flex:1;padding:9px 16px;font-size:.93rem;line-height:1.5;transition:border-color .2s,background .2s;overflow-y:auto}.chat-input:focus{border-color:var(--color-user);background:#fff}.chat-input::placeholder{color:#b0b9c6}.send-btn{color:#94a3b8;background:#e2e8f0}.send-btn.send-active{background:var(--color-send);color:#fff}.send-btn.send-active:hover{background:#1648c0}.send-btn:disabled{cursor:not-allowed}@media (width<=480px){.messages{padding:16px 10px 8px}.bubble{max-width:80%;font-size:.9rem}.logo-sign,.logo-snap{font-size:18px}.logo-sub{display:none}}