:root{--bg: oklch(96% .006 65);--surface: oklch(99% .003 65);--surface-2: oklch(93.5% .009 65);--border: oklch(87% .01 65);--border-subtle: oklch(91% .007 65);--text: oklch(17% .01 65);--text-2: oklch(47% .009 65);--text-3: oklch(65% .007 65);--accent: oklch(44% .17 235);--accent-hover: oklch(38% .17 235);--accent-text: oklch(99% .003 235);--accent-subtle: oklch(95% .06 235);--success: oklch(52% .14 145);--success-subtle: oklch(95% .05 145);--error: oklch(50% .18 25);--error-subtle: oklch(96% .05 25);--radius: 7px;--radius-sm: 4px;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Cascadia Code", "Fira Code", monospace}:root[data-theme=dark]{--bg: oklch(14% .008 65);--surface: oklch(18.5% .01 65);--surface-2: oklch(24% .011 65);--border: oklch(32% .012 65);--border-subtle: oklch(27% .01 65);--text: oklch(93% .005 65);--text-2: oklch(62% .007 65);--text-3: oklch(42% .006 65);--accent: oklch(64% .16 235);--accent-hover: oklch(70% .16 235);--accent-text: oklch(14% .008 65);--accent-subtle: oklch(23% .09 235);--success: oklch(68% .14 145);--success-subtle: oklch(18% .06 145);--error: oklch(68% .16 25);--error-subtle: oklch(18% .06 25)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100%}.app-header{display:flex;align-items:center;gap:10px;padding:0 16px 0 20px;height:48px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.header-logo{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.02em}.header-logo svg{color:var(--accent)}.header-spacer{flex:1}.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500}.chip--sending{background:#cfedff;background:oklch(93% .05 235);color:var(--accent)}.chip--sent{background:var(--success-subtle);color:var(--success)}.chip--error{background:var(--error-subtle);color:var(--error);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app-body{display:flex;flex:1;overflow:hidden;min-height:0}.left-pane{width:440px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--surface);overflow:hidden}.section-label{display:flex;align-items:center;justify-content:space-between;padding:9px 20px 8px;font-size:11px;font-weight:500;color:var(--text-2);letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--border-subtle);flex-shrink:0}.section-label__actions{display:flex;gap:4px}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-sm);border:none;background:none;color:var(--text-2);cursor:pointer;transition:background .12s,color .12s}.icon-btn:hover{background:var(--surface-2);color:var(--text)}.editor-wrap{flex:1;overflow:hidden;min-height:0}.editor-wrap>div,.editor-wrap .cm-editor{height:100%!important}.editor-wrap .cm-scroller{overflow:auto!important}.image-panel{border-top:1px solid var(--border-subtle);flex-shrink:0}.image-panel__header{display:flex;align-items:center;justify-content:space-between;padding:9px 20px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .12s}.image-panel__header:hover{background:var(--bg)}.image-panel__label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--text-2);letter-spacing:.04em;text-transform:uppercase}.chevron{transition:transform .2s cubic-bezier(.16,1,.3,1);color:var(--text-3)}.chevron--open{transform:rotate(180deg)}.image-panel__body{overflow:hidden;max-height:0;transition:max-height .24s cubic-bezier(.16,1,.3,1)}.image-panel__body--open{max-height:240px}.image-panel__content{padding:4px 20px 14px}.drop-zone{position:relative;border:1.5px dashed var(--border);border-radius:var(--radius);padding:12px 16px;text-align:center;font-size:12.5px;color:var(--text-2);cursor:pointer;transition:border-color .15s,background .15s,color .15s}.drop-zone:hover,.drop-zone--over{border-color:var(--accent);background:var(--accent-subtle);color:var(--accent)}.drop-zone input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.image-list{display:flex;flex-direction:column;gap:5px;margin-top:8px;max-height:148px;overflow-y:auto}.image-list::-webkit-scrollbar{width:5px}.image-list::-webkit-scrollbar-track{background:transparent}.image-list::-webkit-scrollbar-thumb{background:#c8c3bf;border-radius:99px}.image-item{display:flex;align-items:center;gap:9px;padding:5px 9px;border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--border-subtle)}.image-item__thumb{width:30px;height:30px;border-radius:3px;object-fit:cover;flex-shrink:0}.image-item__name{flex:1;font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.image-item__actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.mode-toggle{display:flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.mode-btn{padding:3px 8px;font-size:11px;font-weight:500;font-family:var(--font);color:var(--text-2);background:none;border:none;cursor:pointer;transition:background .12s,color .12s}.mode-btn--active{background:var(--accent);color:var(--accent-text)}.mode-btn:not(.mode-btn--active):hover{background:var(--surface-2);color:var(--text)}.insert-btn{padding:3px 9px;font-size:11px;font-weight:500;font-family:var(--font);background:var(--accent-subtle);color:var(--accent);border:1px solid oklch(44% .17 235 / .22);border-radius:var(--radius-sm);cursor:pointer;transition:background .12s}.insert-btn:hover{background:#bae5ff;background:oklch(90% .09 235)}.right-pane{flex:1;overflow-y:auto;background:var(--bg);padding:28px 36px 40px}.right-pane::-webkit-scrollbar{width:6px}.right-pane::-webkit-scrollbar-track{background:transparent}.right-pane::-webkit-scrollbar-thumb{background:#c8c3bf;border-radius:99px}.preview-label{font-size:11px;font-weight:500;color:var(--text-3);letter-spacing:.04em;margin-bottom:14px}.preview-paper{background:#fefdfc;border-radius:3px;box-shadow:0 2px 8px #312d2912,0 8px 32px #312d2917,0 0 0 1px var(--border);overflow:hidden}.preview-paper iframe{width:100%;min-height:560px;border:none;display:block}.toggle-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:28px;min-width:28px;padding:0 8px;border-radius:var(--radius-sm);border:1px solid var(--border);background:none;color:var(--text-2);font-family:var(--font);font-size:11.5px;font-weight:500;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.toggle-btn:hover{background:var(--surface-2);color:var(--text)}.toggle-btn--on{background:var(--surface-2);color:var(--text);border-color:#005a7e73;border-color:oklch(44% .17 235 / .45)}.header-divider{width:1px;height:20px;background:var(--border);flex-shrink:0}.right-pane--canvas-dark{background:#060403}.right-pane--canvas-dark .preview-label{color:#3d3a37}.right-pane--canvas-dark .preview-paper{background:#1c1917;box-shadow:0 2px 8px #00000059,0 8px 32px #0006,0 0 0 1px #3d3b37}.send-btn{display:inline-flex;align-items:center;gap:7px;padding:0 16px;height:34px;background:var(--accent);color:var(--accent-text);border:none;border-radius:var(--radius);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;flex-shrink:0;transition:background .15s ease-out,transform .1s ease-out,opacity .15s}.send-btn:hover:not(:disabled){background:var(--accent-hover)}.send-btn:active:not(:disabled){transform:scale(.97)}.send-btn:disabled{opacity:.45;cursor:not-allowed}.gate{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:var(--bg);padding:24px}.gate-card{display:flex;flex-direction:column;gap:14px;width:100%;max-width:320px;padding:28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px #0000000f}.gate-card--shake{animation:gate-shake .4s ease}@keyframes gate-shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}.gate-logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px;color:var(--text);margin-bottom:4px}.gate-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2)}.gate-input{font-family:var(--font);font-size:14px;padding:10px 12px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;transition:border-color .15s,box-shadow .15s}.gate-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}.gate-input--error{border-color:var(--error);box-shadow:0 0 0 3px var(--error-subtle)}.gate-error{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--error);margin-top:-6px}.gate-submit{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);font-size:13px;font-weight:500;padding:9px 14px;background:var(--accent);color:var(--accent-text);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,transform .1s,opacity .15s}.gate-submit:hover:not(:disabled){background:var(--accent-hover)}.gate-submit:active:not(:disabled){transform:scale(.97)}.gate-submit:disabled{opacity:.45;cursor:not-allowed}