*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--brand-purple: #6B4FE0;--brand-amber: #E8A020;--app-bg: #0D0C10;--surface: #16141A;--surface-2: #1F1C26;--surface-3: #2A2633;--border: rgba(255,255,255,.08);--text: #F3F2F5;--text-muted: #9A95A8;--radius: 12px;--ios-bg: #000000;--ios-screen: #FFFFFF;--ios-sent: #007AFF;--ios-sent-text: #ffffff;--ios-recv: #E9E9EB;--ios-recv-text: #000000;--ios-header-bg: rgba(249,249,249,.92);--ios-compose-bg: #F2F2F7;--ios-input-bg: #FFFFFF;--ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;--ios-time-color: #8E8E93;--ios-separator: rgba(0,0,0,.12);--and-bg: #1C1B1F;--and-screen: #FFFFFF;--and-sent: #006397;--and-sent-text: #FFFFFF;--and-recv: #E8DEF8;--and-recv-text: #1C1B1F;--and-header-bg: #FFFFFF;--and-compose-bg: #FFFFFF;--and-input-bg: #F3EDF7;--and-font: "Google Sans", Roboto, "Helvetica Neue", sans-serif;--and-time-color: #938F99;--and-fab: #006397;--and-fab-text: #FFFFFF}html,body{height:100%;background:var(--app-bg);color:var(--text);font-family:Work Sans,sans-serif;overflow:hidden}.top-bar{height:54px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0}.top-logo{font-family:Archivo Black,sans-serif;font-size:18px;color:var(--text);text-decoration:none;letter-spacing:-.5px}.top-logo span{color:var(--brand-purple)}.top-notice{font-size:11px;color:var(--text-muted);background:#ffc80014;border:1px solid rgba(255,200,0,.18);border-radius:20px;padding:3px 10px;white-space:nowrap}.top-spacer{flex:1}.theme-toggle{display:flex;background:var(--surface-3);border-radius:8px;padding:3px;gap:2px}.theme-btn{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:transparent;color:var(--text-muted);border:none;transition:all .18s ease;font-family:Work Sans,sans-serif}.theme-btn.active{background:var(--brand-purple);color:#fff}.theme-btn svg{width:14px;height:14px;flex-shrink:0}.export-btn{display:flex;align-items:center;gap:6px;background:var(--brand-amber);color:#000;font-size:12px;font-weight:700;border:none;border-radius:8px;padding:6px 14px;cursor:pointer;transition:opacity .15s;font-family:Work Sans,sans-serif}.export-btn:hover{opacity:.85}.app-layout{display:grid;grid-template-columns:300px 1fr;height:calc(100vh - 54px);overflow:hidden}.left-panel{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.panel-section{padding:14px 16px;border-bottom:1px solid var(--border)}.panel-section:last-child{border-bottom:none;flex:1;overflow:hidden;display:flex;flex-direction:column}.section-label{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.char-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.char-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.char-dot-a{background:#007aff;color:#fff}.char-dot-b{background:#3a3a3c;color:#fff}.char-input{flex:1;background:var(--surface-3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;padding:7px 10px;font-family:Work Sans,sans-serif;outline:none;transition:border-color .15s}.char-input:focus{border-color:var(--brand-purple)}.sender-toggle{display:flex;gap:8px;margin-bottom:10px}.sender-opt{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 4px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;background:var(--surface-3);color:var(--text-muted);border:2px solid transparent;transition:all .15s ease}.sender-opt.sel-a{background:#007aff26;color:#007aff;border-color:#007aff66}.sender-opt.sel-b{background:#3a3a3c66;color:#d1d1d6;border-color:#fff3}textarea.msg-textarea{width:100%;background:var(--surface-3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;padding:9px 10px;font-family:Work Sans,sans-serif;resize:none;height:70px;outline:none;transition:border-color .15s;margin-bottom:10px}textarea.msg-textarea:focus{border-color:var(--brand-purple)}textarea.msg-textarea::placeholder{color:var(--text-muted)}.action-row{display:flex;gap:8px}.btn-add{flex:1;background:var(--brand-purple);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;padding:9px;cursor:pointer;transition:opacity .15s;font-family:Work Sans,sans-serif}.btn-add:hover{opacity:.85}.btn-clear{background:var(--surface-3);color:var(--text-muted);border:1px solid var(--border);border-radius:8px;font-size:12px;font-weight:600;padding:9px 12px;cursor:pointer;transition:all .15s;font-family:Work Sans,sans-serif}.btn-clear:hover{color:#ff453a;border-color:#ff453a66}.msg-list-wrap{flex:1;overflow-y:auto;padding:10px 0}.msg-list-wrap::-webkit-scrollbar{width:4px}.msg-list-wrap::-webkit-scrollbar-track{background:transparent}.msg-list-wrap::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:2px}.msg-list-item{display:flex;align-items:center;gap:8px;padding:7px 16px;cursor:pointer;border-radius:0;transition:background .12s}.msg-list-item:hover{background:var(--surface-2)}.msg-list-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.dot-a{background:#007aff}.dot-b{background:#8e8e93}.msg-preview{font-size:12px;color:var(--text-muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msg-delete{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:2px 4px;opacity:0;transition:opacity .12s}.msg-list-item:hover .msg-delete{opacity:1}.empty-list{text-align:center;color:var(--text-muted);font-size:12px;padding:20px 16px;line-height:1.6}.right-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:16px;overflow-y:auto;background:var(--app-bg)}.phone-outer{position:relative;width:375px;border-radius:48px;box-shadow:0 0 0 2px #ffffff1f,0 0 0 6px #1a1a1a,0 40px 80px #000000b3,0 20px 40px #00000080;overflow:hidden;flex-shrink:0}.phone-outer.theme-iphone{background:var(--ios-bg);border-radius:52px}.phone-outer.theme-android{background:var(--and-bg);border-radius:28px;box-shadow:0 0 0 2px #ffffff14,0 0 0 5px #1a1a1a,0 40px 80px #000000b3}.ios-screen{background:var(--ios-screen);display:flex;flex-direction:column;height:720px}.ios-dynamic-island{position:absolute;top:12px;left:50%;transform:translate(-50%);width:120px;height:34px;background:#000;border-radius:20px;z-index:10}.ios-status-bar{height:56px;display:flex;align-items:flex-end;padding:0 22px 8px;font-family:var(--ios-font);position:relative;flex-shrink:0;color:#000}.ios-status-time{font-size:15px;font-weight:600;color:#000;letter-spacing:-.3px}.ios-status-icons{margin-left:auto;display:flex;align-items:center;gap:6px}.ios-signal-icon,.ios-wifi-icon,.ios-battery-icon{display:flex;align-items:center;gap:2px}.ios-signal-bar{width:3px;border-radius:1px;background:#000}.ios-battery{width:24px;height:12px;border:1.5px solid #000;border-radius:3px;position:relative;display:flex;align-items:center;padding:1px}.ios-battery:after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:5px;background:#0006;border-radius:0 1px 1px 0}.ios-battery-fill{width:80%;height:100%;background:#000;border-radius:1px}.ios-header{background:var(--ios-header-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:.5px solid var(--ios-separator);padding:8px 16px 10px;display:flex;align-items:center;gap:8px;flex-shrink:0}.ios-back{color:#007aff;font-family:var(--ios-font);font-size:17px;font-weight:400;display:flex;align-items:center;gap:2px;flex-shrink:0}.ios-back svg{width:10px;height:18px}.ios-contact-info{flex:1;display:flex;flex-direction:column;align-items:center}.ios-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#5ac8fa,#007aff);display:flex;align-items:center;justify-content:center;font-family:var(--ios-font);font-size:14px;font-weight:600;color:#fff;margin-bottom:2px}.ios-contact-name{font-family:var(--ios-font);font-size:13px;font-weight:600;color:#000;line-height:1}.ios-contact-sub{font-family:var(--ios-font);font-size:11px;color:var(--ios-time-color);line-height:1.2}.ios-header-actions{display:flex;gap:16px;flex-shrink:0}.ios-header-actions svg{width:22px;height:22px;color:#007aff}.ios-messages{flex:1;overflow-y:auto;padding:8px 0 4px;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth}.ios-messages::-webkit-scrollbar{display:none}.ios-time-stamp{text-align:center;font-family:var(--ios-font);font-size:11px;color:var(--ios-time-color);padding:10px 16px 4px}.ios-msg-row{display:flex;align-items:flex-end;padding:1px 12px}.ios-msg-row.sent{justify-content:flex-end}.ios-msg-row.recv{justify-content:flex-start}.ios-bubble{max-width:70%;padding:9px 14px;border-radius:18px;position:relative;font-family:var(--ios-font);font-size:16px;line-height:1.4;word-break:break-word}.ios-bubble.sent{background:var(--ios-sent);color:var(--ios-sent-text);border-bottom-right-radius:4px}.ios-bubble.recv{background:var(--ios-recv);color:var(--ios-recv-text);border-bottom-left-radius:4px}.ios-tail{width:10px;height:14px;flex-shrink:0;align-self:flex-end;position:relative}.ios-tail.sent{background:var(--ios-sent);clip-path:polygon(0 0,0 100%,100% 100%);margin-left:-1px}.ios-tail.recv{background:var(--ios-recv);clip-path:polygon(100% 0,100% 100%,0 100%);margin-right:-1px;order:-1}.ios-delivered{font-family:var(--ios-font);font-size:11px;color:var(--ios-time-color);text-align:right;padding:2px 16px 4px}.ios-compose{background:var(--ios-compose-bg);border-top:.5px solid var(--ios-separator);padding:8px 12px 24px;display:flex;align-items:center;gap:8px;flex-shrink:0}.ios-compose-plus{width:30px;height:30px;border-radius:50%;background:#007aff;display:flex;align-items:center;justify-content:center;flex-shrink:0}.ios-compose-plus svg{width:16px;height:16px;color:#fff}.ios-compose-input{flex:1;background:var(--ios-input-bg);border:.5px solid rgba(0,0,0,.15);border-radius:18px;padding:7px 14px;font-family:var(--ios-font);font-size:16px;color:#00000059}.ios-compose-send{width:30px;height:30px;border-radius:50%;background:#007aff;display:flex;align-items:center;justify-content:center;flex-shrink:0}.ios-compose-send svg{width:14px;height:14px;color:#fff}.and-screen{background:var(--and-screen);display:flex;flex-direction:column;height:720px}.and-status-bar{height:28px;display:flex;align-items:center;padding:0 16px;flex-shrink:0}.and-status-time{font-family:var(--and-font);font-size:12px;font-weight:500;color:#1c1b1f}.and-status-icons{margin-left:auto;display:flex;align-items:center;gap:4px}.and-status-icons svg{width:14px;height:14px;color:#1c1b1f}.and-header{background:var(--and-header-bg);padding:8px 12px;display:flex;align-items:center;gap:12px;flex-shrink:0}.and-back svg{width:24px;height:24px;color:#1c1b1f}.and-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6750a4,#d0bcff);display:flex;align-items:center;justify-content:center;font-family:var(--and-font);font-size:16px;font-weight:600;color:#381e72;flex-shrink:0}.and-contact-name{font-family:var(--and-font);font-size:16px;font-weight:500;color:#1c1b1f;flex:1}.and-header-icons{display:flex;gap:14px}.and-header-icons svg{width:22px;height:22px;color:#49454f}.and-messages{flex:1;overflow-y:auto;padding:8px 0 4px;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth}.and-messages::-webkit-scrollbar{display:none}.and-time-stamp{text-align:center;font-family:var(--and-font);font-size:11px;color:var(--and-time-color);padding:10px 16px 4px}.and-msg-row{display:flex;align-items:flex-end;padding:2px 12px}.and-msg-row.sent{justify-content:flex-end}.and-msg-row.recv{justify-content:flex-start}.and-bubble{max-width:72%;padding:10px 16px;border-radius:20px;font-family:var(--and-font);font-size:14px;line-height:1.45;word-break:break-word}.and-bubble.sent{background:var(--and-sent);color:var(--and-sent-text);border-bottom-right-radius:6px}.and-bubble.recv{background:var(--and-recv);color:var(--and-recv-text);border-bottom-left-radius:6px}.and-msg-time{font-family:var(--and-font);font-size:10px;color:var(--and-time-color);padding:1px 14px 4px}.and-msg-time.right{text-align:right}.and-compose{background:var(--and-compose-bg);padding:8px 12px 20px;display:flex;align-items:center;gap:10px;flex-shrink:0}.and-compose-emoji{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.and-compose-emoji svg{width:22px;height:22px;color:#49454f}.and-compose-input{flex:1;background:var(--and-input-bg);border-radius:24px;padding:9px 16px;font-family:var(--and-font);font-size:14px;color:#1c1b1f66}.and-compose-send{width:48px;height:48px;border-radius:50%;background:var(--and-fab);display:flex;align-items:center;justify-content:center;flex-shrink:0}.and-compose-send svg{width:20px;height:20px;color:var(--and-fab-text)}.export-hint{font-size:11px;color:var(--text-muted);text-align:center;opacity:.6}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}