:root{--brand-teal: #23C0B6;--brand-teal-light: #E8FAEF;--brand-teal-dark: #1A8C84;--bg-app: #F2FBF6;--bg-card: #FFFFFF;--text: #0F1F1B;--text-secondary: #4A5C57;--text-tertiary: #8AA09A;--separator: #DCE7E3;--bubble-ai: #FFFFFF;--bubble-user: #23C0B6;--shadow-sm: 0 1px 2px rgba(15, 31, 27, .06);--shadow-md: 0 4px 16px rgba(15, 31, 27, .08);--shadow-lg: 0 16px 48px rgba(15, 31, 27, .14);--radius-lg: 24px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;height:100dvh;width:100%;overflow:hidden;overscroll-behavior:none;background:var(--bg-app);color:var(--text);font-family:IBM Plex Sans Thai,-apple-system,BlinkMacSystemFont,SF Pro Display,Helvetica Neue,Sukhumvit Set,Sarabun,sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}body{position:fixed;top:0;right:0;bottom:0;left:0}#root{height:100%;width:100%;display:flex;justify-content:center;align-items:stretch;background:linear-gradient(160deg,#f2fbf6,#e8faef)}.app-shell{width:100%;max-width:480px;height:100%;display:flex;flex-direction:column;background:var(--bg-app);position:relative;overflow:hidden}@media (min-width: 768px){#root{padding:24px;align-items:center}.app-shell{max-width:440px;height:min(900px,calc(100dvh - 48px));border-radius:36px;box-shadow:var(--shadow-lg)}}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}input,textarea{font:inherit}.btn{min-height:56px;padding:0 24px;border-radius:999px;font-weight:600;font-size:1.0625rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s ease,background .15s ease;touch-action:manipulation}.btn:active{transform:scale(.97)}.btn-primary{background:var(--brand-teal);color:#fff;box-shadow:0 8px 22px #23c0b659}.btn-primary:hover{background:var(--brand-teal-dark)}.btn-secondary{background:var(--brand-teal-light);color:var(--brand-teal-dark)}.btn-secondary:hover{background:#d4f1e9}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.scrollable::-webkit-scrollbar{width:0;display:none}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.avatar{position:relative;display:block;aspect-ratio:1;filter:drop-shadow(0 14px 32px rgba(35,192,182,.35))}.avatar svg{display:block;width:100%;height:100%}.progress-dots{display:flex;justify-content:center;align-items:center;gap:12px;padding:calc(var(--safe-top) + 14px) 16px 8px;flex-shrink:0}.dot-item{display:flex;align-items:center;gap:8px;opacity:.4;transition:opacity .3s ease}.dot-item.is-active,.dot-item.is-done{opacity:1}.dot-item .dot{width:28px;height:28px;border-radius:50%;background:var(--separator);color:var(--text-secondary);font-size:.85rem;font-weight:700;display:grid;place-items:center;transition:background .3s ease,color .3s ease}.dot-item.is-active .dot,.dot-item.is-done .dot{background:var(--brand-teal);color:#fff}.dot-item .dot-label{font-size:.85rem;font-weight:600;color:var(--text-secondary)}.dot-item.is-active .dot-label{color:var(--text)}.start-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(var(--safe-top) + 32px) 24px calc(var(--safe-bottom) + 24px);text-align:center;min-height:0}.start-brand{display:flex;flex-direction:column;align-items:center;gap:4px}.brand-mark{font-size:1.25rem;font-weight:700;letter-spacing:.02em;color:var(--brand-teal-dark);padding:6px 16px;border-radius:999px;background:var(--brand-teal-light)}.brand-sub{font-size:.85rem;color:var(--text-secondary);font-weight:500}.start-tap{display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px;border-radius:32px;background:transparent;width:100%;max-width:360px;min-height:56px;transition:background .15s ease}.start-tap:active{transform:scale(.98)}.start-text{display:flex;flex-direction:column;gap:8px}.start-title{font-size:2rem;font-weight:700;color:var(--text);letter-spacing:-.02em}.start-subtitle{font-size:1.0625rem;color:var(--text-secondary);line-height:1.55;max-width:320px}.start-cta-pill{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:999px;background:var(--brand-teal);color:#fff;font-weight:600;font-size:1.05rem;box-shadow:0 10px 26px #23c0b659}.start-footer{font-size:.78rem;color:var(--text-tertiary);padding:0 16px;max-width:340px;line-height:1.5}.chat-screen{flex:1;display:flex;flex-direction:column;min-height:0}.voice-screen{background:#fff;padding:0}.voice-header{display:flex;align-items:center;gap:12px;padding:8px 20px 12px;flex-shrink:0;border-bottom:1px solid var(--separator)}.voice-header-text{display:flex;flex-direction:column;line-height:1.2}.voice-header-name{font-size:1rem;font-weight:700;color:var(--text)}.voice-header-status{font-size:.85rem;color:var(--brand-teal-dark);font-weight:500}.dialogue-list{flex:1;padding:20px 24px 16px;display:flex;flex-direction:column;gap:22px;min-height:0;background:#fff}.turn{display:flex;flex-direction:column;gap:4px;max-width:100%}.turn-label{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}.turn-text{font-size:1.125rem;line-height:1.55;color:var(--text);white-space:pre-line;font-weight:400}.turn-ai .turn-label{color:var(--brand-teal-dark)}.turn-ai .turn-text{color:var(--text);font-weight:500}.turn-user{align-items:flex-end;text-align:right}.turn-user .turn-label{color:var(--brand-teal)}.turn-user .turn-text{color:var(--brand-teal-dark);font-weight:500}.thinking-dots{display:inline-flex;gap:6px;align-items:center;padding-top:6px}.thinking-dots span{width:8px;height:8px;border-radius:50%;background:var(--brand-teal);animation:typing-bounce 1.3s ease-in-out infinite}.thinking-dots span:nth-child(2){animation-delay:.18s}.thinking-dots span:nth-child(3){animation-delay:.36s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}.voice-controls{display:flex;align-items:center;justify-content:center;gap:28px;padding:16px 24px calc(var(--safe-bottom) + 20px);background:#fff;border-top:1px solid var(--separator);flex-shrink:0}.ctrl-btn{width:52px;height:52px;border-radius:50%;background:var(--bg-app);color:var(--text-secondary);display:grid;place-items:center;transition:background .15s ease,color .15s ease,transform .1s ease;touch-action:manipulation}.ctrl-btn:hover{background:var(--brand-teal-light);color:var(--brand-teal-dark)}.ctrl-btn:active{transform:scale(.94)}.ctrl-btn.is-active{background:var(--text-secondary);color:#fff}.mic-orb{width:80px;height:80px;border-radius:50%;background:var(--brand-teal);color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px #23c0b666;transition:transform .12s ease,background .2s ease;touch-action:manipulation}.mic-orb:hover{background:var(--brand-teal-dark)}.mic-orb:active{transform:scale(.95)}.mic-orb:disabled{opacity:.45;pointer-events:none}.mic-orb.is-speaking{background:var(--brand-teal-dark)}.mic-orb.is-listening{background:#ef4444;box-shadow:0 12px 28px #ef444473;animation:mic-pulse 1.4s ease-in-out infinite}@keyframes mic-pulse{0%,to{box-shadow:0 12px 28px #ef444473}50%{box-shadow:0 12px 36px #ef4444d9,0 0 0 14px #ef44441f}}.listening-wave{display:inline-flex;align-items:center;gap:4px;height:32px}.listening-wave span{display:block;width:4px;height:100%;background:#fff;border-radius:4px;transform-origin:center;box-shadow:0 0 8px #ffffff80}.voice-text-mode{display:flex;flex-direction:column;gap:10px;padding:12px 16px calc(var(--safe-bottom) + 12px);background:#fff;border-top:1px solid var(--separator);flex-shrink:0}.chip-row{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 8px;flex-shrink:0}.chip{padding:12px 18px;min-height:48px;border-radius:999px;border:1.5px solid var(--brand-teal);color:var(--brand-teal-dark);background:#fff;font-size:.95rem;font-weight:600;transition:background .15s ease,transform .1s ease;touch-action:manipulation}.chip:hover{background:var(--brand-teal-light)}.chip:active{transform:scale(.96)}.chat-input-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-radius:999px;flex-shrink:0;box-shadow:var(--shadow-sm)}.chat-input{flex:1;min-width:0;padding:14px 18px;min-height:52px;border-radius:999px;border:1.5px solid var(--separator);background:var(--bg-app);font-size:1.0625rem;color:var(--text);outline:none;transition:border-color .15s ease,background .15s ease}.chat-input::placeholder{color:var(--text-tertiary)}.chat-input:focus{border-color:var(--brand-teal);background:#fff}.chat-input:disabled{opacity:.5}.icon-btn{width:52px;height:52px;min-width:52px;border-radius:50%;background:var(--brand-teal-light);color:var(--brand-teal-dark);display:grid;place-items:center;transition:background .15s ease,color .15s ease,transform .1s ease;touch-action:manipulation;flex-shrink:0}.icon-btn:hover{background:var(--brand-teal);color:#fff}.icon-btn:active{transform:scale(.93)}.icon-btn:disabled{opacity:.4;pointer-events:none}.icon-btn-primary{background:var(--brand-teal);color:#fff;box-shadow:0 6px 16px #23c0b659}.icon-btn-primary:hover{background:var(--brand-teal-dark);color:#fff}.icon-btn.is-active{background:#ef4444;color:#fff;box-shadow:0 6px 16px #ef444459;animation:pulse-red 1.5s ease-in-out infinite}@keyframes pulse-red{0%,to{box-shadow:0 6px 16px #ef444459}50%{box-shadow:0 6px 22px #ef444499}}.summary-screen{flex:1;display:flex;flex-direction:column;min-height:0}.summary-header{padding:4px 20px 12px;flex-shrink:0}.summary-header h1{font-size:1.5rem;font-weight:700;color:var(--text);letter-spacing:-.01em}.summary-header p{font-size:.95rem;color:var(--text-secondary);margin-top:2px}.summary-body{flex:1;padding:4px 16px 16px;display:flex;flex-direction:column;gap:14px;min-height:0}.summary-card{background:#fff;border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px}.summary-field{display:flex;flex-direction:column;gap:6px}.field-label{font-size:.85rem;font-weight:600;color:var(--text-secondary)}.field-display{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;min-height:48px;border-radius:14px;background:var(--bg-app);color:var(--text);font-size:1rem;text-align:left;transition:background .15s ease;touch-action:manipulation}.field-display:hover{background:var(--brand-teal-light)}.field-display em{color:var(--text-tertiary);font-style:normal}.field-display svg{color:var(--text-tertiary);flex-shrink:0}.field-input{padding:12px 14px;min-height:48px;border-radius:14px;border:1.5px solid var(--brand-teal);background:#fff;font-size:1rem;color:var(--text);outline:none;width:100%}.summary-assessment{background:var(--brand-teal-light);border:1px solid rgba(35,192,182,.2)}.summary-assessment p{margin-top:8px;font-size:.95rem;line-height:1.55;color:var(--text);white-space:pre-line}.summary-disclaimer{font-size:.78rem;color:var(--text-tertiary);text-align:center;padding:0 12px;line-height:1.5}.summary-footer{display:flex;gap:10px;padding:12px 16px calc(var(--safe-bottom) + 12px);background:#fff;border-top:1px solid var(--separator);flex-shrink:0}.summary-footer .btn{flex:1}.summary-success{align-items:center;justify-content:center;text-align:center;padding:32px 24px calc(var(--safe-bottom) + 32px);gap:16px}.success-mark{width:96px;height:96px;border-radius:50%;background:var(--brand-teal);color:#fff;display:grid;place-items:center;box-shadow:0 12px 32px #23c0b666}.summary-success h2{font-size:1.5rem;font-weight:700;color:var(--text);margin-top:12px}.summary-success p{font-size:1rem;color:var(--text-secondary);line-height:1.55;max-width:320px}.queue-card{margin-top:24px;padding:24px 32px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:column;align-items:center;gap:6px;min-width:240px}.queue-label{font-size:.85rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.queue-number{font-size:2.5rem;font-weight:700;color:var(--brand-teal-dark);letter-spacing:.02em}.queue-wait{font-size:.95rem;color:var(--text-secondary)}@media (max-width: 360px){.start-title{font-size:1.75rem}.summary-header h1{font-size:1.35rem}.start-tap{padding:16px;gap:16px}}body.showcase-mode{position:static;overflow:auto;height:auto}body.showcase-mode #root{height:auto;min-height:100dvh;display:block;padding:0;background:linear-gradient(160deg,#f2fbf6,#e8faef)}.showcase{max-width:1100px;margin:0 auto;padding:32px 24px 64px;display:flex;flex-direction:column;gap:36px;font-family:IBM Plex Sans Thai,-apple-system,BlinkMacSystemFont,sans-serif}.showcase-dark{background:#0f1f1b;color:#fff;min-height:100dvh;max-width:none}.showcase-dark .showcase-cell{background:#1a2c28}.showcase-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.showcase-header h1{font-size:1.75rem;font-weight:700;color:var(--brand-teal-dark)}.showcase-dark .showcase-header h1{color:var(--brand-teal)}.showcase-toolbar{display:flex;gap:12px;align-items:center}.showcase-toolbar button,.showcase-state-btn{padding:8px 16px;border-radius:999px;border:1.5px solid var(--brand-teal);background:#fff;color:var(--brand-teal-dark);font-weight:600;font-size:.95rem;cursor:pointer;transition:background .15s ease}.showcase-toolbar button:hover,.showcase-state-btn:hover{background:var(--brand-teal-light)}.showcase-state-btn.is-active{background:var(--brand-teal);color:#fff}.showcase-back{color:var(--brand-teal-dark);text-decoration:none;font-weight:600}.showcase-section{display:flex;flex-direction:column;gap:16px}.showcase-section h2{font-size:1rem;font-weight:600;color:var(--text-secondary);letter-spacing:.02em;text-transform:uppercase}.showcase-grid,.showcase-sizes,.showcase-row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end}.showcase-cell{background:#fff;border-radius:24px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:var(--shadow-sm)}.showcase-avatar-wrap{display:grid;place-items:center;width:200px;height:200px}.showcase-label{font-size:.85rem;font-weight:600;color:var(--text-secondary);text-transform:lowercase;letter-spacing:.04em}.showcase-states{display:flex;gap:8px;flex-wrap:wrap}.success-restart{margin-top:12px;padding:0 32px}