:root{--bg: #f2f4f7;--panel: #ffffff;--border: #e3e6ea;--text: #1f2430;--text-muted: #6b7280;--accent: #0f766e;--accent-hover: #0d5f58;--bubble-in: #ffffff;--bubble-out: #d8f5e4;--selected: #e8f4f2}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg)}#root,.app{height:100vh}.app{display:flex;overflow:hidden}.sidebar{width:320px;flex-shrink:0;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--border)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem;border-bottom:1px solid var(--border)}.sidebar-header h1{margin:0;font-size:1.15rem}.contact-form{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border-bottom:1px solid var(--border);background:#fafbfc}.contact-list{flex:1;overflow-y:auto}.contact-row{display:flex;align-items:center;gap:.65rem;width:100%;padding:.75rem 1rem;border:none;border-bottom:1px solid var(--border);background:transparent;text-align:left;cursor:pointer;font:inherit;color:inherit}.contact-row:hover{background:#f6f8f9}.contact-row.selected{background:var(--selected)}.contact-info{display:flex;flex-direction:column;min-width:0}.contact-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-phone{font-size:.8rem;color:var(--text-muted)}.optin-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.optin-dot.optin-yes{background:#16a34a}.optin-dot.optin-no{background:#9ca3af}.optin-badge{font-size:.75rem;font-weight:600;padding:.2rem .6rem;border-radius:999px}.optin-badge.optin-yes{background:#dcfce7;color:#166534}.optin-badge.optin-no{background:#f3f4f6;color:#6b7280}.chat{flex:1;display:flex;flex-direction:column;min-width:0}.chat-empty{align-items:center;justify-content:center;color:var(--text-muted)}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.25rem;background:var(--panel);border-bottom:1px solid var(--border)}.chat-header h2{margin:0;font-size:1.05rem}.messages{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}.bubble-row{display:flex}.bubble-row.inbound{justify-content:flex-start}.bubble-row.outbound{justify-content:flex-end}.bubble{max-width:65%;padding:.55rem .8rem;border-radius:12px;box-shadow:0 1px 1px #0000000f}.bubble.inbound{background:var(--bubble-in);border-bottom-left-radius:4px}.bubble.outbound{background:var(--bubble-out);border-bottom-right-radius:4px}.bubble p{margin:0;white-space:pre-wrap;word-break:break-word}.bubble-meta{display:block;margin-top:.25rem;font-size:.7rem;color:var(--text-muted);text-align:right}.composer{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.25rem;background:var(--panel);border-top:1px solid var(--border)}.composer-form{display:flex;flex:1;gap:.5rem}.composer input{flex:1}.gate{height:100vh;display:flex;align-items:center;justify-content:center}.gate-card{display:flex;flex-direction:column;gap:.75rem;width:min(340px,90vw);padding:2rem;background:var(--panel);border:1px solid var(--border);border-radius:12px;text-align:center}.gate-card h1{margin:0;font-size:1.4rem}.gate-card .hint{padding:0}.gate-card .notice{margin:0}.producers{height:100vh;overflow-y:auto;display:flex;justify-content:center;padding:3rem 1.5rem}.producers-card{width:min(760px,100%);height:fit-content;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.5rem}.producers-header h1{margin:0 0 .25rem;font-size:1.3rem}.producers-header .hint{text-align:left;padding:0 0 1rem}.producers-table-wrap{overflow-x:auto}.producers-table{width:100%;border-collapse:collapse}.producers-table th,.producers-table td{padding:.65rem .75rem;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}.producers-table th{font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted)}.producers-table tr:last-child td{border-bottom:none}.producers-table td:last-child{text-align:right}.sidebar-back{padding:.6rem 1rem 0}input{padding:.55rem .75rem;border:1px solid var(--border);border-radius:8px;font:inherit;background:#fff}input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}.btn{padding:.55rem .9rem;border:none;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}.btn:disabled{opacity:.55;cursor:default}.btn-primary{background:var(--accent);color:#fff}.btn-primary:not(:disabled):hover{background:var(--accent-hover)}.btn-secondary{background:#eef1f4;color:var(--text)}.btn-secondary:not(:disabled):hover{background:#e2e7ec}.btn-link{border:none;background:none;color:var(--accent);cursor:pointer;font:inherit;text-decoration:underline;padding:0}.hint{color:var(--text-muted);text-align:center;padding:1rem;font-size:.9rem}.notice{margin:.5rem 1rem;padding:.6rem .85rem;border-radius:8px;font-size:.85rem}.notice-error{background:#fef2f2;border:1px solid #fecaca;color:#b42318}.notice-warning{background:#fffbeb;border:1px solid #fde68a;color:#92400e}