*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --top:#1c2128;--top-border:#2d3748;
  --mbar:#f8f7f4;--mbar-border:#e2ddd6;
  --tb:#ffffff;--tb-border:#e0dbd4;
  --canvas:#ddd9d3;
  --page:#ffffff;
  --acc:#1a73e8;--acc2:#1557b0;--acc-light:#e8f0fe;
  --acc-g:#2e7d52;
  --txt:#1a1a1a;--txt2:#3a3a3a;--txt3:#6b6b6b;--txt4:#9b9b9b;
  --sel:#c2dcff;
  --shadow:0 1px 3px rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.08);
  --font-ui:'Nunito Sans',sans-serif;
  --font-doc:'Nunito Sans',sans-serif;
  --r:5px;
}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-ui);background:var(--canvas);color:var(--txt);display:flex;flex-direction:column;font-size:14px}

/* ─ TOPBAR ─ */
.topbar{background:var(--top);border-bottom:1px solid var(--top-border);display:flex;align-items:center;padding:0 12px;height:44px;flex-shrink:0;z-index:200;gap:8px}
.top-left{display:flex;align-items:center;gap:10px;flex:0 0 auto;position:relative;z-index:3}
.app-menu-wrap{position:relative}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.logo-mark{width:24px;height:24px;background:var(--acc);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Nunito Sans',sans-serif;font-size:13px;font-weight:700;color:#fff;box-shadow:0 2px 8px rgba(26,115,232,.4)}
.logo-name{font-family:'Nunito Sans',sans-serif;font-size:14px;font-weight:600;color:#fff}
.logo-name span{color:rgba(255,255,255,.4)}
.app-menu-btn{background:none;border:1px solid rgba(255,255,255,.18);width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.82);cursor:pointer;transition:all .14s}
.app-menu-btn:hover,.app-menu-btn[aria-expanded="true"]{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.app-menu-pop{position:absolute;top:calc(100% + 10px);left:0;min-width:210px;padding:8px;background:#fff;border:1px solid rgba(28,33,40,.08);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.18);display:none;z-index:260}
.app-menu-pop.open{display:block;animation:si .14s ease}
.app-menu-pop button{width:100%;border:none;background:none;border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:13px;color:var(--txt);cursor:pointer;text-align:left}
.app-menu-pop button:hover{background:#f8f7f4}
.app-menu-pop strong{display:block;font-size:13px;font-weight:600;color:var(--txt)}
.app-menu-pop span{display:block;font-size:11px;color:var(--txt3)}
.app-menu-icon{width:24px;height:24px;border-radius:8px;background:var(--acc-light);display:flex;align-items:center;justify-content:center;color:var(--acc2);flex-shrink:0}
.app-menu-sep{height:1px;background:#eee;margin:6px 0}
.doc-title-wrap{flex:1 1 220px;display:flex;justify-content:center;align-items:center;min-width:120px;margin:0 8px;position:relative;z-index:4;pointer-events:auto}
.doc-title{background:transparent;border:none;color:#fff;font-family:var(--font-ui);font-size:14px;font-weight:500;text-align:center;outline:none;padding:4px 10px;border-radius:var(--r);min-width:120px;max-width:400px;width:min(100%,400px);transition:background .15s;position:relative;z-index:5;pointer-events:auto;user-select:text;-webkit-user-select:text}
.doc-title:hover{background:rgba(255,255,255,.08)}
.doc-title:focus{background:rgba(255,255,255,.13)}
.doc-title[readonly]{cursor:default;opacity:.88}
.doc-title[readonly]:hover,.doc-title[readonly]:focus{background:transparent}
.top-r{display:flex;align-items:center;gap:5px;flex:0 0 auto;flex-shrink:0;position:relative;z-index:3}
.top-btn{background:none;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);font-family:var(--font-ui);font-size:11px;font-weight:500;padding:4px 10px;border-radius:var(--r);cursor:pointer;transition:all .16s;display:flex;align-items:center;gap:4px;white-space:nowrap;min-height:28px}
.top-btn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.32)}
.top-btn.blue{background:var(--acc);border-color:var(--acc);color:#fff}
.top-btn.blue:hover{background:var(--acc2)}
.top-btn.submit{background:var(--acc-g);border-color:var(--acc-g);color:#fff}
.top-btn.submit:hover{background:#256746;border-color:#256746}
.top-btn[disabled]{opacity:.6;cursor:default;pointer-events:none}
.access-pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:10px;font-weight:600;padding:4px 9px;border-radius:999px;white-space:nowrap}
.access-pill.guest{background:rgba(26,115,232,.18);border-color:rgba(26,115,232,.38)}
.access-pill.readonly{background:rgba(217,119,6,.16);border-color:rgba(217,119,6,.35)}
.dv{width:1px;height:16px;background:rgba(255,255,255,.15);margin:0 1px}
.wc-pill{display:flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:11px;color:rgba(255,255,255,.5)}
.wc-pill strong{color:rgba(255,255,255,.8)}
.public-note{display:none;margin:14px 16px 0;padding:12px 16px;background:#fff;border:1px solid var(--mbar-border);border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.04);font-size:12.5px;line-height:1.55;color:var(--txt2)}
.public-note strong{color:var(--txt)}
body.public-mode .public-note,body.guest-mode .public-note{display:block}
body.guest-mode #shareBtn,body.guest-mode #aiPanelToggleBtn{display:none !important}
.guest-note-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.guest-note-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(26,115,232,.22);background:#f7fbff;color:var(--acc2);font-size:12px;font-weight:700;text-decoration:none;transition:all .14s}
.guest-note-link:hover{background:#edf5ff;border-color:rgba(26,115,232,.36)}
.guest-note-link.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.guest-note-link.primary:hover{background:var(--acc2);border-color:var(--acc2)}

/* ─ DOC TABS BAR ─ */
.tabs-bar{display:flex;align-items:center;padding:0;min-width:0;flex:0 1 auto;overflow-x:auto;overflow-y:hidden;gap:0;z-index:190;scrollbar-width:none}
.tabs-bar::-webkit-scrollbar{height:0}
.doc-tab{display:flex;align-items:center;gap:6px;padding:0 11px;height:22px;background:#ebe6de;border:1px solid transparent;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--txt3);cursor:pointer;transition:all .15s;flex-shrink:0;max-width:180px;position:relative;margin-right:4px;white-space:nowrap}
.doc-tab:hover{background:#e3ddd4;color:var(--txt2)}
.doc-tab.active{background:#fff;color:var(--txt);border-color:rgba(26,115,232,.18);box-shadow:0 1px 2px rgba(0,0,0,.05);z-index:2}
.doc-tab-name{overflow:hidden;text-overflow:ellipsis;max-width:120px;display:inline-block}
.doc-tab-name[contenteditable="true"]{outline:none;border-bottom:1.5px solid var(--acc);background:transparent;min-width:30px}
.doc-tab-close{width:16px;height:16px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--txt4);flex-shrink:0;background:none;border:none;cursor:pointer;padding:0;line-height:1;transition:all .14s}
.doc-tab-close:hover{background:rgba(0,0,0,.1);color:var(--txt)}
.new-tab-btn{display:flex;align-items:center;gap:4px;padding:0 9px;height:22px;background:none;border:1px dashed rgba(26,115,232,.18);color:var(--txt3);font-family:var(--font-ui);font-size:10.5px;font-weight:600;border-radius:999px;cursor:pointer;transition:all .15s;flex-shrink:0;margin-left:2px;align-self:center}
.new-tab-btn:hover{color:var(--acc);border-color:var(--acc);background:var(--acc-light)}

/* ─ MENU BAR ─ */
.menubar{background:var(--mbar);border-bottom:1px solid var(--mbar-border);display:flex;align-items:center;padding:0 8px;height:32px;flex-shrink:0;gap:8px;z-index:180;overflow:hidden}
.menubar-divider{width:1px;height:16px;background:var(--mbar-border);flex:0 0 auto}
.menubar-menus{display:flex;align-items:center;gap:0;min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.menubar-menus::-webkit-scrollbar{height:0}
.menu-item{position:relative}
.menu-btn{background:none;border:none;color:var(--txt2);font-family:var(--font-ui);font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px;cursor:pointer;transition:all .14s;height:22px;display:flex;align-items:center;gap:3px}
.menu-btn:hover,.menu-btn.open{background:rgba(0,0,0,.07);color:var(--txt)}
.menu-drop{position:absolute;top:calc(100% + 3px);left:0;background:#fff;border:1px solid #ddd;border-radius:9px;padding:5px;min-width:210px;box-shadow:0 6px 24px rgba(0,0,0,.13);opacity:0;pointer-events:none;transform:translateY(-4px);transition:all .16s;z-index:999}
.menu-item.open .menu-drop{opacity:1;pointer-events:all;transform:translateY(0)}
.menu-row{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--txt);transition:background .12s;user-select:none}
.menu-row:hover{background:var(--acc-light);color:var(--acc2)}
.menu-row .sc{margin-left:auto;font-size:10.5px;color:var(--txt4);font-family:'Nunito Sans',sans-serif}
.menu-row .mi{width:15px;text-align:center;flex-shrink:0;font-size:12px}
.menu-sep{height:1px;background:#eee;margin:4px 5px}
.menu-sub-arrow{margin-left:auto;font-size:10px;color:var(--txt4)}
.menu-sub{position:relative}
.menu-sub>.menu-drop{top:0;left:calc(100% + 4px);min-width:180px}
.menu-sub:hover>.menu-drop{opacity:1;pointer-events:all;transform:translateY(0)}

/* ─ TOOLBAR ─ */
.toolbar{background:var(--tb);border-bottom:1px solid var(--tb-border);display:flex;align-items:center;padding:3px 10px;height:36px;flex-shrink:0;gap:1px;overflow-x:auto;overflow-y:hidden;z-index:170}
.toolbar::-webkit-scrollbar{height:3px}
.toolbar::-webkit-scrollbar-thumb{background:var(--tb-border);border-radius:2px}
.tsep{width:1px;height:16px;background:var(--tb-border);margin:0 3px;flex-shrink:0}
.tbtn{background:none;border:none;min-width:24px;height:24px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt2);font-size:11px;font-weight:600;transition:all .14s;flex-shrink:0;padding:0 3px;font-family:var(--font-ui)}
.tbtn:hover{background:rgba(0,0,0,.07);color:var(--txt)}
.tbtn.on{background:var(--acc-light);color:var(--acc2)}
.tsel{background:#f8f7f4;border:1px solid transparent;color:var(--txt2);font-family:var(--font-ui);font-size:11px;padding:1px 5px;border-radius:4px;cursor:pointer;outline:none;transition:all .14s;height:24px;max-width:124px}
.tsel:hover,.tsel:focus{border-color:var(--tb-border);background:#f0efeb}
.zoom-row{display:flex;align-items:center;gap:3px;margin-left:auto;flex-shrink:0}
.zoom-lbl{font-size:10px;color:var(--txt3);font-family:'Nunito Sans',sans-serif;width:30px;text-align:center}
.zbtn{background:none;border:none;width:20px;height:20px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt3);font-size:15px;transition:all .14s}
.zbtn:hover{background:rgba(0,0,0,.07);color:var(--txt)}

/* Color picker */
.cpick-wrap{position:relative;flex-shrink:0}
.cpick-btn{min-width:24px;height:24px;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:none;border:none;padding:2px 3px;transition:background .14s}
.cpick-btn:hover{background:rgba(0,0,0,.07)}
.cpick-bar{display:block;width:16px;height:3px;border-radius:2px;margin-top:1px}
.cpick-drop{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid #ddd;border-radius:10px;padding:10px 11px;box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:999;width:214px;opacity:0;pointer-events:none;transition:all .17s}
.cpick-wrap.open .cpick-drop{opacity:1;pointer-events:all}
.cpick-title{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt3);margin-bottom:6px}
.swatch-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-bottom:7px}
.sw{width:16px;height:16px;border-radius:3px;cursor:pointer;border:1px solid transparent;transition:transform .12s,border-color .12s}
.sw:hover{transform:scale(1.22);border-color:#aaa}
.cpick-custom{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--txt3)}
.cpick-custom input[type=color]{width:26px;height:26px;border:1px solid #ddd;border-radius:4px;padding:1px;cursor:pointer;background:none}

/* ─ CANVAS & PAGE ─ */
.canvas-wrap{flex:1;display:flex;overflow:hidden;position:relative}
.canvas-area{flex:1;min-width:0;overflow-y:auto;overflow-x:auto;padding:28px 24px 40px;background:var(--canvas);position:relative;z-index:1;transition:padding-right .22s ease}
body.ai-panel-open .canvas-area{padding-right:392px}
body.ai-panel-open .canvas-area,
body.ai-panel-open #pagesContainer,
body.ai-panel-open .sidebar,
body.ai-panel-open .page-outer,
body.ai-panel-open .page-body,
body.ai-panel-open .ql-container,
body.ai-panel-open .ql-editor,
body.ai-panel-open .page-header,
body.ai-panel-open .page-footer-area{
  pointer-events:none !important;
}
.canvas-area::-webkit-scrollbar{width:10px;height:10px}
.canvas-area::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}
.canvas-area::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:5px;border:2px solid var(--canvas)}
.canvas-area::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.34)}

/* Ruler */
.ruler-wrap{width:816px;margin:0 auto 8px;background:#f5f3ef;border:1px solid #d8d3cc;border-radius:2px;height:22px;display:flex;align-items:stretch;overflow:hidden;position:relative;flex-shrink:0}
.ruler-margin-l,.ruler-margin-r{width:80px;background:rgba(26,115,232,.05);border-right:1.5px dashed rgba(26,115,232,.28);flex-shrink:0}
.ruler-margin-r{border-right:none;border-left:1.5px dashed rgba(26,115,232,.28)}
.ruler-body{flex:1;position:relative;height:22px}
.ruler-tick{position:absolute;bottom:0;background:#b0a89e;transform:translateX(-50%)}
.ruler-tick.maj{height:10px;width:1px;background:#8a8278}
.ruler-tick.min{height:5px;width:1px}
.ruler-lbl{position:absolute;bottom:10px;font-size:9px;color:#9a9080;transform:translateX(-50%);font-family:'Nunito Sans',sans-serif;pointer-events:none}

/* Page wrapper — used to show header/footer above/below the Quill area */
.page-outer{width:816px;margin:0 auto 28px;position:relative}

/* Header */
.page-header{background:#fff;width:816px;padding:16px 80px 10px;border-bottom:1px dashed #d0cbc5;min-height:52px;position:relative;cursor:text}
.page-header[contenteditable]:empty::before{content:'Header — click to edit';color:#bbb;font-size:11px;font-family:var(--font-ui);pointer-events:none}
.page-header[contenteditable]:focus{outline:none;border-bottom-color:var(--acc);background:#fffef8}
.hf-label{position:absolute;top:5px;right:10px;font-size:9px;color:#ccc;font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.06em;pointer-events:none;user-select:none}

/* Page body */
.page-body{background:#fff;width:816px;box-shadow:var(--shadow)}

/* Footer */
.page-footer-area{background:#fff;width:816px;padding:10px 80px 16px;border-top:1px dashed #d0cbc5;min-height:52px;position:relative;cursor:text}
.page-footer-area[contenteditable]:empty::before{content:'Footer — click to edit';color:#bbb;font-size:11px;font-family:var(--font-ui);pointer-events:none}
.page-footer-area[contenteditable]:focus{outline:none;border-top-color:var(--acc);background:#fffef8}

/* Quill within page-body */
.page-body .ql-toolbar.ql-snow{display:none}
.page-body .ql-container.ql-snow{border:none!important;font-family:var(--font-doc);font-size:12pt;line-height:1.75;color:var(--txt)}
.page-body .ql-editor{padding:56px 80px;min-height:950px;font-family:var(--font-doc);font-size:12pt;line-height:1.75;color:var(--txt);caret-color:var(--acc)}
.page-body .ql-editor:focus{outline:none}
.page-body .ql-editor h1{font-size:24pt;font-weight:700;line-height:1.25;margin:18pt 0 8pt;color:#111;font-family:'Nunito Sans',sans-serif}
.page-body .ql-editor h2{font-size:18pt;font-weight:600;line-height:1.3;margin:15pt 0 6pt;color:#111;font-family:'Nunito Sans',sans-serif}
.page-body .ql-editor h3{font-size:14pt;font-weight:600;line-height:1.4;margin:12pt 0 5pt;color:#222;font-family:'Nunito Sans',sans-serif}
.page-body .ql-editor h4{font-size:12pt;font-weight:700;margin:10pt 0 4pt;color:#333}
.page-body .ql-editor p{margin-bottom:7pt}
.page-body .ql-editor ul,.page-body .ql-editor ol{padding-left:24pt;margin-bottom:8pt}
.page-body .ql-editor li{margin-bottom:3pt}
.page-body .ql-editor blockquote{border-left:3px solid #1a73e8;padding:8pt 16pt;margin:12pt 0;font-style:italic;color:#555;background:#f0f6ff;border-radius:0 4px 4px 0}
.page-body .ql-editor pre.ql-syntax{background:#1e2128;color:#a3e635;border-radius:5px;padding:11pt 15pt;font-family:'Nunito Sans',sans-serif;font-size:10pt;margin:10pt 0;overflow-x:auto}
.page-body .ql-editor a{color:var(--acc);text-decoration:underline}
.page-body .ql-editor table{border-collapse:collapse;width:100%;margin:10pt 0;font-size:11pt}
.page-body .ql-editor td,.page-body .ql-editor th{border:1px solid #ccc;padding:5pt 9pt}
.page-body .ql-editor th{background:#f5f5f5;font-weight:700}
.page-body .ql-editor hr{border:none;border-top:2px solid #e0dbd4;margin:16pt 0}
.page-body .ql-editor img{max-width:100%;height:auto;cursor:pointer;display:block}
.page-body .ql-editor img.wf-selected-image{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.page-body .ql-editor .ql-align-center{text-align:center}
.page-body .ql-editor .ql-align-right{text-align:right}
.page-body .ql-editor .ql-align-justify{text-align:justify}
.page-body .ql-editor ::selection{background:var(--sel)}
/* page break marker */
.page-body .ql-editor .pg-break{border:none;border-top:2px dashed #1a73e8;margin:18pt 0;display:block;background:transparent;opacity:.5}
/* footnote superscript */
.page-body .ql-editor sup{font-size:.68em;vertical-align:super;color:var(--acc);cursor:default}
/* two-column layout */
.page-body .ql-editor.cols-2{column-count:2;column-gap:32pt;column-rule:1px solid #e0dbd4}
.page-body .ql-editor.cols-3{column-count:3;column-gap:24pt;column-rule:1px solid #e0dbd4}

/* Page break visible element between pages */
.page-break-visual{width:816px;margin:0 auto;height:24px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative}
.page-break-visual::before,.page-break-visual::after{content:'';flex:1;height:1px;background:#bbb}
.page-break-visual span{font-size:10px;color:#bbb;font-family:var(--font-ui);white-space:nowrap}

/* ─ SIDEBAR (outline/comments) ─ */
.sidebar{width:242px;background:var(--mbar);border-right:1px solid var(--mbar-border);flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;transition:width .22s;z-index:160;order:-1}
.sidebar.hidden{width:0;border-right:none}
.sidebar-tabs{display:flex;border-bottom:1px solid var(--mbar-border);flex-shrink:0}
.stab{flex:1;background:none;border:none;padding:8px 4px;font-size:11.5px;font-weight:500;color:var(--txt3);cursor:pointer;transition:all .15s;border-bottom:2px solid transparent;font-family:var(--font-ui)}
.stab:hover{color:var(--txt2)}
.stab.on{color:var(--acc);border-bottom-color:var(--acc)}
.sidebar-body{flex:1;overflow-y:auto;padding:10px}
.sidebar-body::-webkit-scrollbar{width:4px}
.sidebar-body::-webkit-scrollbar-thumb{background:var(--mbar-border);border-radius:2px}
.outline-item{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:5px;cursor:pointer;font-size:12px;color:var(--txt2);transition:all .14s;line-height:1.35}
.outline-item:hover{background:var(--acc-light);color:var(--acc2)}
.outline-item.h1{font-weight:600;padding-left:6px}
.outline-item.h2{font-size:11.5px;padding-left:16px}
.outline-item.h3{font-size:11px;padding-left:26px;color:var(--txt3)}
.outline-empty{font-size:12px;color:var(--txt4);padding:12px 6px;line-height:1.5}
/* comment */
.comment-card{background:#fff;border:1px solid var(--mbar-border);border-radius:7px;padding:9px 10px;margin-bottom:8px}
.comment-card-top{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.comment-avatar{width:24px;height:24px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.comment-author{font-size:11.5px;font-weight:600;color:var(--txt)}
.comment-time{font-size:10px;color:var(--txt4);margin-left:auto}
.comment-text{font-size:12px;color:var(--txt2);line-height:1.5;margin-bottom:6px}
.comment-reply-btn{background:none;border:none;font-size:11px;color:var(--acc);cursor:pointer;font-family:var(--font-ui);padding:0}

/* AI side panel */
.ai-panel{width:356px;background:#fbfaf7;border-left:1px solid var(--mbar-border);display:flex;flex-direction:column;overflow:hidden;z-index:5000;position:fixed;top:162px;right:0;bottom:24px;pointer-events:auto;isolation:isolate;box-shadow:-12px 0 32px rgba(0,0,0,.12);transform:translateX(0);opacity:1;transition:transform .22s ease,opacity .18s ease}
.ai-panel.hidden{transform:translateX(100%);opacity:0;pointer-events:none}
.ai-shell{display:flex;flex-direction:column;min-width:356px;height:100%;position:relative;z-index:1}
.ai-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--mbar-border);background:linear-gradient(180deg,#fff,#f7f4ee)}
.ai-head-copy{flex:1;min-width:0}
.ai-eyebrow{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt4);margin-bottom:2px}
.ai-title{font-size:14px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-head-actions{display:flex;align-items:center;gap:6px}
.ai-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid #d9d4cc;border-radius:999px;padding:4px 8px;background:#fff;font-size:10.5px;color:var(--txt3);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-head-btn{background:none;border:1px solid #d9d4cc;color:var(--txt3);width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .14s}
.ai-head-btn:hover{background:#fff;color:var(--txt);border-color:#c8c2b8}
.ai-banner{display:none;padding:10px 14px;border-bottom:1px solid var(--mbar-border);font-size:12px;line-height:1.5;background:#fff6dd;color:#7c4a00}
.ai-banner.show{display:block}
.ai-banner.danger{background:#fff0ef;color:#9f2a1f}
.ai-tabs{display:flex;border-bottom:1px solid var(--mbar-border);background:#f4f0ea}
.ai-tab{flex:1;background:none;border:none;padding:9px 8px;font-size:11.5px;font-weight:600;color:var(--txt3);cursor:pointer;border-bottom:2px solid transparent;transition:all .14s}
.ai-tab.on{color:var(--acc);border-bottom-color:var(--acc);background:#fff}
.ai-body{flex:1;min-height:0;display:flex;flex-direction:column}
.ai-pane{display:none;flex:1;min-height:0}
.ai-pane.on{display:flex;flex-direction:column}
.ai-context{padding:12px 14px 10px;border-bottom:1px solid var(--mbar-border);background:#fff}
.ai-context-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ai-context-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:#f4f8ff;color:#22579f;font-size:10.5px;font-weight:600}
.ai-context-box{border:1px solid #e4ded5;border-radius:9px;background:#faf8f4;padding:9px 10px;font-size:11.5px;line-height:1.5;color:var(--txt2)}
.ai-thread{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#fcfbf8,#f7f3ed)}
.ai-thread::-webkit-scrollbar,.ai-history::-webkit-scrollbar,.ai-memory-scroll::-webkit-scrollbar{width:6px}
.ai-thread::-webkit-scrollbar-thumb,.ai-history::-webkit-scrollbar-thumb,.ai-memory-scroll::-webkit-scrollbar-thumb{background:#d7d1c8;border-radius:999px}
.ai-msg{max-width:100%;display:flex;flex-direction:column;gap:6px}
.ai-msg.user{align-items:flex-end}
.ai-msg.assistant{align-items:flex-start}
.ai-msg-card{max-width:100%;padding:11px 12px;border-radius:12px;border:1px solid #e3ddd4;background:#fff;font-size:12px;line-height:1.6;color:var(--txt2);box-shadow:0 4px 14px rgba(0,0,0,.04);white-space:pre-wrap;word-break:break-word}
.ai-msg.user .ai-msg-card{background:#eef5ff;border-color:#cfe0fb;color:#183c70}
.ai-msg-meta{font-size:10px;color:var(--txt4);display:flex;align-items:center;gap:6px}
.ai-msg-usage{display:flex;flex-wrap:wrap;gap:5px}
.ai-msg-usage span{padding:3px 7px;border-radius:999px;background:#f2eee7;border:1px solid #e3ddd4;font-size:10px;color:var(--txt3)}
.ai-compose{padding:12px 14px;border-top:1px solid var(--mbar-border);background:#fff;display:flex;flex-direction:column;gap:10px}
.ai-select,.ai-input,.ai-textarea{width:100%;background:#f8f7f4;border:1px solid #e0dbd4;color:var(--txt);font-family:var(--font-ui);font-size:12.5px;padding:8px 10px;border-radius:8px;outline:none;transition:border-color .15s,box-shadow .15s}
.ai-select:focus,.ai-input:focus,.ai-textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(26,115,232,.12)}
.ai-textarea{min-height:78px;max-height:180px;resize:vertical;line-height:1.5}
.ai-panel button,.ai-panel input,.ai-panel select,.ai-panel textarea{position:relative;z-index:2;pointer-events:auto}
.ai-compose-row{display:flex;gap:8px}
.ai-btn{background:none;border:1px solid #ddd;color:var(--txt2);font-family:var(--font-ui);font-size:12.5px;padding:8px 12px;border-radius:8px;cursor:pointer;transition:all .15s}
.ai-btn:hover{background:#f7f5f1}
.ai-btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.ai-btn.primary:hover{background:var(--acc2)}
.ai-btn.danger{color:#9f2a1f;border-color:#f0b8b2;background:#fff7f6}
.ai-btn[disabled]{opacity:.55;cursor:not-allowed}
.ai-note{font-size:11px;color:var(--txt4);line-height:1.5}
.ai-memory-scroll,.ai-history{flex:1;overflow:auto;padding:14px;background:#faf8f4}
.ai-memory-tools{display:flex;gap:8px;padding:12px 14px;border-bottom:1px solid var(--mbar-border);background:#fff}
.ai-memory-entry,.ai-history-item{background:#fff;border:1px solid #e2ddd5;border-radius:11px;padding:11px 12px;box-shadow:0 3px 12px rgba(0,0,0,.03)}
.ai-memory-entry{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.ai-memory-entry-top,.ai-history-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ai-memory-entry h4,.ai-history-title{font-size:12.5px;font-weight:600;color:var(--txt);margin:0}
.ai-memory-entry-actions{display:flex;gap:6px}
.ai-ghost-btn{background:none;border:none;color:var(--acc);font-size:11px;font-weight:600;cursor:pointer;padding:0}
.ai-ghost-btn.danger{color:#b4362c}
.ai-history-item{margin-bottom:10px}
.ai-history-meta{font-size:10.5px;color:var(--txt4);margin-top:6px}
.ai-empty{font-size:12px;color:var(--txt4);line-height:1.6;padding:14px}

@media (max-width: 1180px){
  body.ai-panel-open .canvas-area{padding-right:344px}
  .ai-panel{top:162px;bottom:24px;width:320px;box-shadow:-8px 0 28px rgba(0,0,0,.12)}
  .ai-shell{min-width:320px}
}

@media (max-width: 900px){
  body.ai-panel-open .canvas-area{padding-right:316px}
  .ai-panel{width:300px}
  .ai-shell{min-width:300px}
}

@media (max-width: 980px){
  .topbar{height:auto;min-height:44px;padding:8px 12px;flex-wrap:wrap;align-items:flex-start}
  .top-left{flex:0 0 auto}
  .doc-title-wrap{order:3;flex:1 0 100%;margin:0}
  .doc-title{text-align:left;max-width:none;width:100%}
  .top-r{width:100%;margin-left:0;overflow-x:auto;padding-bottom:2px}
  .top-r::-webkit-scrollbar{height:0}
  .menubar{height:auto;min-height:32px;flex-wrap:wrap;padding:6px 8px;gap:6px}
  .tabs-bar{width:100%;flex:1 0 100%}
  .menubar-divider{display:none}
  .menubar-menus{width:100%;flex:1 0 100%}
  .toolbar{padding:5px 8px;min-height:40px}
  .canvas-area{padding:20px 14px 28px}
  .ruler-wrap,.page-outer,.page-header,.page-body,.page-footer-area,.page-break-visual{width:min(100%, 816px)}
  .page-header,.page-footer-area{padding-left:40px;padding-right:40px}
  .page-body .ql-editor{padding:40px}
  .public-note{margin:12px 12px 0}
  .statusbar{height:auto;min-height:24px;flex-wrap:wrap;padding:6px 10px;gap:8px}
  .modal{min-width:0;width:min(calc(100vw - 20px), 640px);max-height:calc(100vh - 20px);overflow:auto}
}

@media (max-width: 900px){
  #sidebarToggleBtn,.sidebar{display:none !important}
  .canvas-area{padding:14px 10px 20px}
  body.ai-panel-open .canvas-area{padding-right:10px}
  .ruler-wrap,.page-outer,.page-header,.page-body,.page-footer-area,.page-break-visual{width:100%}
  .page-header,.page-footer-area{padding-left:20px;padding-right:20px}
  .page-body .ql-editor{padding:28px 20px;min-height:70vh}
  .ai-panel{top:0;right:0;bottom:0;width:100vw;max-width:100vw;box-shadow:-16px 0 36px rgba(0,0,0,.18)}
  .ai-shell{min-width:100%}
  .grid2,.grid3,.page-size-grid,.border-grid{grid-template-columns:1fr}
  .col-grid{flex-wrap:wrap}
}

@media (max-width: 640px){
  .topbar{padding:8px 10px 10px}
  .logo-name{display:none}
  .top-r .dv,.wc-pill{display:none}
  .top-btn{padding:6px 10px;font-size:11.5px}
  .access-pill{font-size:10px;padding:4px 8px}
  .doc-tab-name{max-width:96px}
  .new-tab-btn{height:24px;padding:0 10px}
  .page-header,.page-footer-area{padding-left:16px;padding-right:16px}
  .page-body .ql-editor{padding:20px 16px}
}

/* ─ STATUS BAR ─ */
.statusbar{background:var(--mbar);border-top:1px solid var(--mbar-border);display:flex;align-items:center;padding:0 14px;height:24px;flex-shrink:0;gap:14px;font-size:11px;color:var(--txt3);z-index:150}
.si{display:flex;align-items:center;gap:3px}
.si strong{color:var(--txt2);font-weight:600}
.saved-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;flex-shrink:0;transition:background .3s}
.saved-dot.dirty{background:#facc15}

.wf-misspelling{border-bottom:2px dotted #c0362c;background:rgba(192,54,44,.08);cursor:pointer}
.wf-misspelling:hover{background:rgba(192,54,44,.14)}
.wf-context-menu{position:fixed;z-index:1100;min-width:220px;background:#fff;border:1px solid #ddd;border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.16);padding:7px;display:none}
.wf-context-menu.open{display:block}
.wf-context-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--txt4);padding:4px 7px 7px}
.wf-context-action{width:100%;background:none;border:none;color:var(--txt);font-family:var(--font-ui);font-size:12.5px;text-align:left;padding:8px 10px;border-radius:7px;cursor:pointer;transition:background .14s;display:flex;align-items:center;justify-content:space-between;gap:8px}
.wf-context-action:hover{background:var(--acc-light);color:var(--acc2)}
.wf-context-action small{color:var(--txt4);font-size:10px}
.wf-context-muted{padding:8px 10px;font-size:12px;color:var(--txt4)}
.wf-context-sep{height:1px;background:#eee;margin:5px 4px}
.wf-definition-tip{position:absolute;z-index:1090;max-width:260px;background:#1c2128;color:#fff;border-radius:10px;padding:10px 12px;box-shadow:0 14px 30px rgba(0,0,0,.24);display:none;font-size:12px;line-height:1.5}
.wf-definition-tip.open{display:block}
.wf-definition-tip strong{display:block;font-size:12.5px;color:#fff;margin-bottom:4px}
.wf-definition-tip span{display:block;color:rgba(255,255,255,.72);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.wf-image-toolbar{position:fixed;z-index:1115;display:none;align-items:center;gap:6px;padding:8px 10px;background:#fff;border:1px solid #ddd;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.16)}
.wf-image-toolbar.open{display:flex}
.wf-image-toolbar button{border:1px solid #ddd;background:#fff;color:var(--txt2);font-family:var(--font-ui);font-size:11.5px;font-weight:600;padding:6px 9px;border-radius:8px;cursor:pointer;transition:all .14s;white-space:nowrap}
.wf-image-toolbar button:hover{border-color:var(--acc);background:var(--acc-light);color:var(--acc2)}
.wf-image-toolbar button.danger{border-color:#f5c2c7;color:#b42318}
.wf-image-toolbar button.danger:hover{background:#fff1f2;border-color:#fda4af;color:#b42318}
.wf-image-frame{position:fixed;z-index:1110;display:none;border:2px solid var(--acc);border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.95) inset;pointer-events:none}
.wf-image-frame.open{display:block}
.wf-image-handle{position:absolute;right:-10px;bottom:-10px;width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:var(--acc);box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:nwse-resize;pointer-events:auto}
body.wf-image-resizing{cursor:nwse-resize}
body.wf-image-resizing *{user-select:none!important}

/* ─ MODALS ─ */
.modal-bg{display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.4);align-items:center;justify-content:center}
.modal-bg.open{display:flex;animation:fdIn .15s ease}
.modal{background:#fff;border:1px solid #ddd;border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.16);min-width:320px;animation:si .2s ease}
.mhdr{padding:18px 20px 0;display:flex;align-items:center;justify-content:space-between}
.mhdr h2{font-family:'Nunito Sans',sans-serif;font-size:16px;font-weight:600;color:var(--txt)}
.mcls{background:none;border:none;font-size:20px;cursor:pointer;color:var(--txt3);padding:2px 5px;border-radius:4px;transition:all .14s;line-height:1}
.mcls:hover{background:#f0f0f0;color:var(--txt)}
.mbody{padding:16px 20px}
.mfoot{padding:0 20px 18px;display:flex;gap:7px;justify-content:flex-end}
.fi{width:100%;background:#f8f7f4;border:1px solid #e0dbd4;color:var(--txt);font-family:var(--font-ui);font-size:13px;padding:7px 10px;border-radius:var(--r);outline:none;transition:border-color .17s,box-shadow .17s}
.fi:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(26,115,232,.12)}
.fg{margin-bottom:12px}
.fg label{font-size:11px;color:var(--txt3);display:block;margin-bottom:3px;font-weight:500}
.btn-p{background:var(--acc);border:none;color:#fff;font-family:var(--font-ui);font-size:13px;font-weight:600;padding:7px 18px;border-radius:var(--r);cursor:pointer;transition:background .17s}
.btn-p:hover{background:var(--acc2)}
.btn-s{background:none;border:1px solid #ddd;color:var(--txt2);font-family:var(--font-ui);font-size:13px;padding:7px 14px;border-radius:var(--r);cursor:pointer;transition:all .17s}
.btn-s:hover{background:#f5f5f5}
.link-access-toggle{display:flex;gap:6px;margin-bottom:14px}
.lat-btn{flex:1;padding:8px;border-radius:var(--r);border:1px solid #ddd;background:#fff;font-family:var(--font-ui);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;text-align:center;color:var(--txt3)}
.lat-btn:hover{border-color:#bdb8ae;color:var(--txt2)}
.lat-btn.on{border-color:var(--acc);background:var(--acc-light);color:var(--acc2)}
.share-perm-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.perm-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);background:#f8f7f4;margin-bottom:8px}
.perm-avatar{width:30px;height:30px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.perm-name{flex:1;font-size:13px;font-weight:500;color:var(--txt)}
.perm-email{font-size:11px;color:var(--txt3)}
.perm-meta{margin-left:auto;display:flex;align-items:center;gap:8px}
.perm-chip{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:999px;background:#fff;border:1px solid #e0dbd4;font-size:11px;color:var(--txt3);text-transform:capitalize}
.perm-empty{font-size:12px;color:var(--txt4);font-style:italic;padding:8px 2px}
.section-mini{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--txt4);margin-bottom:6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* Special char grid */
.sc-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;max-height:220px;overflow-y:auto}
.sc-btn{background:#f8f7f4;border:1px solid #eee;border-radius:4px;padding:6px 2px;font-size:14px;cursor:pointer;text-align:center;transition:all .14s;font-family:serif}
.sc-btn:hover{background:var(--acc-light);border-color:var(--acc)}

/* Find & replace */
.find-row{display:flex;gap:6px;align-items:center}
.fnav{display:flex;gap:3px}
.fnav button{background:#f5f5f5;border:1px solid #ddd;color:var(--txt2);width:27px;height:27px;border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .14s}
.fnav button:hover{background:var(--acc-light);border-color:var(--acc);color:var(--acc2)}
.fmeta{font-size:11px;color:var(--txt4);margin-top:3px;min-height:15px}

/* Line spacing picker */
.ls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ls-opt{background:#f8f7f4;border:1px solid #e0dbd4;border-radius:6px;padding:8px;text-align:center;cursor:pointer;font-size:12px;font-weight:500;transition:all .14s}
.ls-opt:hover,.ls-opt.on{background:var(--acc-light);border-color:var(--acc);color:var(--acc2)}

/* Columns picker */
.col-grid{display:flex;gap:8px;justify-content:center;margin:10px 0}
.col-opt{background:#f8f7f4;border:1.5px solid #e0dbd4;border-radius:7px;padding:10px 16px;cursor:pointer;transition:all .14s;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:var(--txt3);font-weight:500}
.col-opt:hover,.col-opt.on{border-color:var(--acc);background:var(--acc-light);color:var(--acc2)}
.col-vis{display:flex;gap:2px;height:30px;align-items:flex-end}
.col-bar{background:#ccc;border-radius:1px;width:9px;height:100%}
.col-opt.on .col-bar{background:var(--acc)}

/* Table of contents */
.toc-item{display:flex;align-items:baseline;gap:4px;padding:3px 0;font-size:12px;color:var(--txt)}
.toc-item.h1{font-weight:600}
.toc-item.h2{padding-left:16px;font-size:11.5px}
.toc-item.h3{padding-left:30px;font-size:11px;color:var(--txt3)}
.toc-dots{flex:1;border-bottom:1px dotted #ccc;margin-bottom:2px}
.toc-pg{flex-shrink:0;font-size:11px;color:var(--txt3)}

/* Word count modal */
.wc-stat{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:13px}
.wc-stat:last-child{border-bottom:none}
.wc-stat strong{font-weight:600}

/* Page setup cols */
.page-size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.psz-opt{background:#f8f7f4;border:1.5px solid #e0dbd4;border-radius:7px;padding:8px;text-align:center;cursor:pointer;transition:all .14s;font-size:12px;font-weight:500;color:var(--txt2)}
.psz-opt:hover,.psz-opt.on{border-color:var(--acc);background:var(--acc-light);color:var(--acc2)}

/* Watermark text preview */
.wm-preview{text-align:center;font-size:28px;font-weight:700;color:rgba(200,200,200,.45);padding:12px;transform:rotate(-15deg);user-select:none;letter-spacing:.12em;margin:8px 0}

/* Borders style picker */
.border-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.brd-opt{background:#f8f7f4;border:1.5px solid #e0dbd4;border-radius:6px;padding:8px 4px;text-align:center;cursor:pointer;font-size:10px;color:var(--txt3);transition:all .14s}
.brd-opt:hover,.brd-opt.on{border-color:var(--acc);background:var(--acc-light);color:var(--acc2)}
.brd-vis{height:24px;margin-bottom:4px;display:flex;align-items:center;justify-content:center}

/* Toast & loader */
.toast{position:fixed;bottom:22px;right:22px;background:#1c2128;color:#fff;font-size:12.5px;padding:9px 15px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.28);opacity:0;transform:translateY(8px);transition:all .27s;z-index:1000;pointer-events:none;display:flex;align-items:center;gap:7px;font-family:var(--font-ui)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{border-left:3px solid #4ade80}
.toast.err{border-left:3px solid #f87171}
.toast.info{border-left:3px solid #60a5fa}
.loader{display:none;position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.48);align-items:center;justify-content:center;flex-direction:column;gap:13px}
.loader.show{display:flex}
.spin{width:36px;height:36px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite}
.loader p{color:rgba(255,255,255,.75);font-size:13px;font-family:var(--font-ui)}

@keyframes si{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fdIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

@media print{
  body>*:not(.canvas-wrap){display:none!important}
  .canvas-area{padding:0!important;background:none!important;overflow:visible!important}
  .sidebar{display:none!important}
  .page-outer,.page-body,.page-header,.page-footer-area{box-shadow:none!important;width:100%!important}
  .ql-editor{padding:0!important;min-height:unset!important}
  .ruler-wrap,.page-break-visual{display:none!important}
}