:root{--bg: #FAF8F5;--bg-card: #FFFFFF;--text: #2D2A26;--text-secondary: #8C8680;--text-dim: #B5AFA8;--accent: #E8722A;--accent-hover: #D4641F;--accent-light: rgba(232, 114, 42, .08);--received-color: #5B8C5A;--received-bg: rgba(91, 140, 90, .08);--received-border: rgba(91, 140, 90, .18);--sent-color: #C45D1E;--sent-bg: rgba(232, 114, 42, .08);--sent-border: rgba(232, 114, 42, .18);--border: #E8E4DF;--border-light: #F0ECE8;--shadow-sm: 0 1px 3px rgba(45, 42, 38, .06);--shadow-md: 0 4px 16px rgba(45, 42, 38, .08);--shadow-lg: 0 8px 32px rgba(45, 42, 38, .1);--font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;--radius: 16px;--radius-lg: 24px;--radius-pill: 100px;--safe-top: env(safe-area-inset-top);--safe-bottom: env(safe-area-inset-bottom);--viz-active: #E8722A;--viz-idle: #D5D0CB;--viz-tx: #5B8C5A;--viz-decode: #D4A72C}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100%;height:100dvh;display:flex;justify-content:center}.hidden{display:none!important}.splash-wrap{width:100%;height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}.splash{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:360px}.brand-logo{font-family:var(--font);font-size:52px;font-weight:700;color:var(--text);letter-spacing:8px;line-height:1}.brand-tagline{font-size:14px;color:var(--text-secondary);letter-spacing:1px;font-weight:500}.splash-status{font-size:13px;color:var(--accent);min-height:20px;font-weight:500}.splash-status.error{color:#c0392b}.btn-start{margin-top:20px;padding:16px 40px;background:var(--accent);border:none;color:#fff;font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:.5px;border-radius:var(--radius-pill);cursor:pointer;transition:all .25s ease;min-height:52px;box-shadow:0 2px 8px #e8722a40}.btn-start:hover{background:var(--accent-hover);box-shadow:0 4px 16px #e8722a59;transform:translateY(-1px)}.btn-start:active{transform:translateY(0);box-shadow:0 1px 4px #e8722a33}.btn-start:disabled{opacity:.6;cursor:default;transform:none}.app-shell{width:100%;max-width:640px;height:100dvh;display:flex;flex-direction:column;background:var(--bg-card);position:relative}@media(min-width:768px){.app-shell{height:calc(100dvh - 48px);margin:24px 0;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}}.app-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;padding-top:calc(14px + var(--safe-top));border-bottom:1px solid var(--border-light);flex-shrink:0;background:var(--bg-card)}@media(min-width:768px){.app-header{padding-top:14px}}.header-brand{display:flex;align-items:baseline;gap:10px}.header-brand h1{font-family:var(--font);font-size:20px;font-weight:700;color:var(--text);letter-spacing:3px;line-height:1}.header-tagline{font-size:12px;color:var(--text-dim);font-weight:400;display:none}@media(min-width:768px){.header-tagline{display:inline}}.header-actions{display:flex;align-items:center;gap:8px}.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.icon-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}.icon-btn svg{width:18px;height:18px}.status-strip{display:flex;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid var(--border-light);flex-shrink:0;background:var(--bg)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--received-color);flex-shrink:0;transition:background .3s ease}.status-dot.listening{background:var(--received-color);animation:dotPulse 2s ease-in-out infinite}.status-dot.transmitting{background:var(--accent);animation:dotPulse .5s ease-in-out infinite}.status-dot.received{background:var(--viz-decode);animation:dotFlash .3s ease-out 2}@keyframes dotPulse{0%,to{opacity:1}50%{opacity:.3}}@keyframes dotFlash{0%{transform:scale(1)}50%{transform:scale(1.5)}to{transform:scale(1)}}.status-label{font-size:13px;font-weight:600;color:var(--text);flex-shrink:0}.signal-meter{flex:1;height:4px;background:var(--border-light);border-radius:2px;overflow:hidden;max-width:120px}.signal-fill{height:100%;width:0%;background:var(--received-color);border-radius:2px;transition:width .08s}.signal-fill.hot{background:var(--accent)}.status-detail{font-size:11px;color:var(--text-dim);flex-shrink:0;font-family:var(--font-mono);font-weight:400}.messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.messages::-webkit-scrollbar{width:4px}.messages::-webkit-scrollbar-track{background:transparent}.messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.messages-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-dim);padding:40px 20px;text-align:center}.messages-empty-icon{font-size:32px;opacity:.4}.messages-empty-text{font-size:14px;line-height:1.5}.message{display:flex;animation:msgIn .35s cubic-bezier(.34,1.56,.64,1)}.message-sent{justify-content:flex-end}.message-received{justify-content:flex-start}.message-system{justify-content:center}@keyframes msgIn{0%{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.bubble{max-width:80%;padding:12px 16px;border-radius:var(--radius);font-size:15px;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word}.bubble-sent{background:var(--sent-bg);border:1px solid var(--sent-border);border-bottom-right-radius:6px;color:var(--sent-color)}.bubble-received{background:var(--received-bg);border:1px solid var(--received-border);border-bottom-left-radius:6px;color:var(--received-color)}.bubble-text{display:block;font-family:var(--font-mono);font-size:14px}.bubble-time{display:block;font-size:11px;color:var(--text-dim);margin-top:4px}.bubble-sent .bubble-time{text-align:right}.bubble-received .bubble-time{text-align:left}.system-text{font-size:12px;color:var(--text-dim);padding:4px 14px;background:var(--bg);border-radius:var(--radius-pill)}.visualizer-wrap{padding:0 20px;height:72px;flex-shrink:0;border-top:1px solid var(--border-light);display:flex;align-items:center}#visualizer{width:100%;height:56px;border-radius:12px;display:block}@media(max-width:767px){.visualizer-wrap{height:20px;padding:0 20px}#visualizer{height:4px;border-radius:2px}}.input-area{padding:12px 20px;padding-bottom:calc(12px + var(--safe-bottom));border-top:1px solid var(--border-light);background:var(--bg-card);flex-shrink:0}.input-row{display:flex;gap:10px;align-items:center}#msg-input{flex:1;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-pill);padding:12px 20px;color:var(--text);font-family:var(--font);font-size:15px;outline:none;min-height:48px;transition:border-color .2s ease,box-shadow .2s ease}#msg-input::placeholder{color:var(--text-dim)}#msg-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #e8722a1a}#msg-input:disabled{opacity:.5}.send-btn{width:48px;height:48px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease;box-shadow:0 2px 8px #e8722a33}.send-btn:disabled{opacity:.3;cursor:default;box-shadow:none}.send-btn:not(:disabled):hover{background:var(--accent-hover);box-shadow:0 4px 12px #e8722a4d;transform:translateY(-1px)}.send-btn:not(:disabled):active{transform:translateY(0) scale(.95)}.send-btn svg{width:20px;height:20px}.input-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 4px 0}.protocol-pills{display:flex;gap:4px;background:var(--bg);border-radius:var(--radius-pill);padding:3px;border:1px solid var(--border-light)}.pill{padding:6px 14px;border:none;border-radius:var(--radius-pill);background:transparent;color:var(--text-secondary);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.pill.active{background:var(--accent);color:#fff;box-shadow:0 1px 4px #e8722a33}.pill:not(.active):hover{color:var(--text);background:var(--border-light)}.pill:disabled{opacity:.35;cursor:not-allowed}.pill:disabled:hover{background:transparent;color:var(--text-secondary)}.char-count{font-size:12px;color:var(--text-dim);font-family:var(--font-mono);font-weight:400}.char-count.over-limit{color:#c0392b}.duration-est{font-size:12px;color:var(--accent);font-family:var(--font-mono)}@media(max-width:767px){.protocol-pills-inline{display:none}.protocol-label-mobile{display:inline}}@media(min-width:768px){.protocol-label-mobile,.settings-btn-wrap{display:none}}.drawer-backdrop{position:fixed;inset:0;background:#2d2a264d;z-index:100;opacity:0;transition:opacity .3s ease;pointer-events:none}.drawer-backdrop.visible{opacity:1;pointer-events:auto}.settings-drawer{position:fixed;bottom:0;left:0;right:0;background:var(--bg-card);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -4px 24px #2d2a261f;z-index:101;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1);padding:8px 24px calc(20px + var(--safe-bottom));max-height:70vh;overflow-y:auto}.settings-drawer.visible{transform:translateY(0)}.drawer-handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px}.drawer-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:20px}.setting-group{margin-bottom:20px}.setting-label{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.setting-help{font-size:12px;color:var(--text-dim);margin-top:6px;line-height:1.4}.drawer-pills{display:flex;gap:6px;flex-wrap:wrap}.drawer-pills .pill{padding:8px 18px;font-size:13px}.toast-container{position:fixed;top:calc(16px + var(--safe-top));left:50%;transform:translate(-50%);width:calc(100% - 32px);max-width:400px;display:flex;flex-direction:column;gap:8px;z-index:1000;pointer-events:none}.toast{padding:12px 18px;border-radius:14px;font-family:var(--font);font-size:13px;font-weight:500;line-height:1.4;pointer-events:auto;cursor:pointer;opacity:0;transform:translateY(-16px) scale(.95);transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:var(--shadow-md)}.toast-visible{opacity:1;transform:translateY(0) scale(1)}.toast-exit{opacity:0;transform:translateY(-16px) scale(.95)}.toast-info{background:#eef2ff;border:1px solid #C7D2FE;color:#4338ca}.toast-success{background:#ecfdf5;border:1px solid #A7F3D0;color:#065f46}.toast-warning{background:#fffbeb;border:1px solid #FDE68A;color:#92400e}.toast-error{background:#fef2f2;border:1px solid #FECACA;color:#991b1b}::selection{background:#e8722a33;color:var(--text)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}:focus:not(:focus-visible){outline:none}@media(max-height:600px){.visualizer-wrap{height:16px}#visualizer{height:4px}.app-header{padding:10px 20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}