/* KK Write — Document Editor (full-screen fixed overlay) */

/* ── Shell overrides (added by app.js) ── */
.main.write-active{padding:0!important;overflow:hidden!important;height:100%!important;}
.shell-body.write-active{grid-template-columns:1fr!important;}

/* ═══════════════════════════════════════════
   ROOT — fixed overlay, above everything
   ═══════════════════════════════════════════ */
.kk-write-root{
  position:fixed;top:var(--topbar-h,52px);left:0;right:0;bottom:0;z-index:50;
  display:flex;flex-direction:column;
  background:var(--bg);
  font-family:inherit;
  color:var(--text);
}

/* ── Body ── */
.wr-body{flex:1;display:flex;overflow:hidden;}

/* ═══════════════════════════════════════════
   LIST VIEW — sidebar + welcome
   ═══════════════════════════════════════════ */

/* Sidebar */
.wr-sidebar{
  width:260px;border-right:1px solid var(--border);
  background:var(--surface);display:flex;flex-direction:column;flex-shrink:0;
}
.wr-sidebar-head{padding:14px 12px;border-bottom:1px solid var(--border-light);}
.wr-sidebar-head h3{font-size:14px;font-weight:700;margin:0;}
.wr-section-label{
  padding:8px 12px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-ter);background:var(--bg);
  border-top:1px solid var(--border-light);
}

/* Document list items */
.wr-doc-list{flex:1;overflow-y:auto;}
.wr-doc-item{
  padding:10px 14px;border-bottom:1px solid var(--border-light);
  cursor:pointer;font-size:12px;transition:background .1s;
  display:flex;justify-content:space-between;align-items:center;
}
.wr-doc-item:hover{background:rgba(59,130,246,.04);}
.wr-doc-item.active{background:rgba(59,130,246,.08);border-left:3px solid var(--navy);}
.wr-doc-info{flex:1;min-width:0;}
.wr-doc-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wr-doc-date{font-size:10px;color:var(--text-ter);margin-top:2px;}
.wr-doc-dots{
  background:none;border:none;cursor:pointer;color:var(--text-ter);
  font-size:16px;font-weight:700;padding:2px 6px;border-radius:var(--radius);
  opacity:0;transition:all .12s;line-height:1;
}
.wr-doc-item:hover .wr-doc-dots{opacity:.6;}
.wr-doc-dots:hover{opacity:1!important;background:var(--navy-soft);color:var(--text);}

/* Document dropdown menu */
.wr-dropdown{
  z-index:200;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  min-width:170px;padding:4px 0;overflow:hidden;
}
.wr-dd-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 14px;border:none;background:none;font:inherit;
  font-size:13px;color:var(--text);cursor:pointer;text-align:left;
  transition:background .1s;
}
.wr-dd-item:hover{background:var(--navy-soft);}
.wr-dd-danger{color:var(--danger);}
.wr-dd-danger:hover{background:#fef2f2;}
.wr-dd-icon{width:16px;text-align:center;font-size:14px;flex-shrink:0;}
.wr-dd-sep{height:1px;background:var(--border-light);margin:4px 0;}

/* Welcome screen */
.wr-welcome{
  flex:1;display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--text-ter);
}

/* ═══════════════════════════════════════════
   EDITOR VIEW — toolbar + page + status
   ═══════════════════════════════════════════ */

/* Find & Replace bar */
.wr-find-bar{
  display:flex;flex-direction:column;gap:6px;
  padding:8px 12px;border-bottom:1px solid var(--border);
  background:var(--surface);flex-shrink:0;
}
.wr-find-row{display:flex;align-items:center;gap:6px;}
.wr-find-input{width:220px;font-size:12px;padding:4px 8px;}
.wr-find-count{font-size:11px;color:var(--text-ter);min-width:36px;text-align:center;}
.wr-hidden{display:none!important;}
mark.wr-find-hl{background:#fef08a;border-radius:1px;padding:0;}
mark.wr-find-hl.wr-find-active{background:#f97316;color:#fff;}

/* Toolbar */
.wr-toolbar{
  display:flex;flex-wrap:wrap;gap:2px;padding:6px 10px;
  border-bottom:1px solid var(--border);background:var(--surface);
  align-items:center;flex-shrink:0;
}
.wt-sep{width:1px;height:20px;background:var(--border-light);margin:0 4px;}
.wt-btn{
  background:none;border:1px solid transparent;border-radius:4px;
  padding:4px 6px;cursor:pointer;font-size:12px;color:var(--text);
  display:flex;align-items:center;justify-content:center;
  min-width:28px;height:28px;transition:all .1s;
}
.wt-btn:hover{background:var(--bg);border-color:var(--border-light);}
.wt-btn.active{background:rgba(59,130,246,.1);color:var(--navy);border-color:rgba(59,130,246,.2);}
.wt-select{
  border:1px solid var(--border-light);border-radius:4px;
  padding:2px 4px;font-size:11px;background:var(--surface);
  height:28px;cursor:pointer;color:var(--text);
}
.wt-color{
  width:28px;height:28px;border:1px solid var(--border-light);
  border-radius:4px;cursor:pointer;padding:2px;
}

/* Editor wrapper (page area + review sidebar) */
.wr-editor-wrap{flex:1;display:flex;overflow:hidden;}

/* Page area */
.wr-page-area{
  flex:1;overflow-y:auto;background:#e5e7eb;
  padding:24px;display:flex;justify-content:center;align-items:flex-start;
}

/* Page */
.wr-page{background:white;box-shadow:0 2px 16px rgba(0,0,0,.12);position:relative;}
.wr-page[data-size="A4"]{width:794px;min-height:1123px;}
.wr-page[data-size="carta"]{width:816px;min-height:1056px;}
.wr-page[data-size="legal"]{width:816px;min-height:1344px;}
.wr-page[data-orient="landscape"]{min-height:794px;}
.wr-page[data-orient="landscape"][data-size="A4"]{width:1123px;}
.wr-page[data-orient="landscape"][data-size="carta"]{width:1056px;min-height:816px;}
.wr-page[data-orient="landscape"][data-size="legal"]{width:1344px;min-height:816px;}

/* Header / footer */
.wr-page-header{min-height:20px;border-bottom:1px dashed #e2e8f0;font-size:11px;color:#94a3b8;padding:8px 0;}
.wr-page-footer{
  min-height:20px;border-top:1px dashed #e2e8f0;font-size:10px;color:#94a3b8;
  position:absolute;bottom:0;left:0;right:0;padding:8px 20px;
}

/* Editor (contenteditable) */
.wr-editor{
  outline:none;min-height:900px;
  font-family:'Times New Roman',Georgia,serif;font-size:12pt;
  line-height:1.6;color:#1a1a1a;
}
.wr-editor:focus{outline:none;}
.wr-editor p{margin:0 0 8px 0;}
.wr-editor h1,.wr-editor h2,.wr-editor h3{margin:16px 0 8px 0;}

/* Status bar */
.wr-status{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 12px;border-top:1px solid var(--border);
  font-size:10px;color:var(--text-ter);background:var(--surface);
  flex-shrink:0;height:28px;
}
.wr-status input{
  border:none;background:transparent;font-size:11px;font-weight:600;
  width:250px;outline:none;color:var(--text-sec);
}

/* ═══════════════════════════════════════════
   REVIEW SIDEBAR
   ═══════════════════════════════════════════ */
.wr-review-panel{
  width:300px;border-left:1px solid var(--border);
  background:var(--surface);display:flex;flex-direction:column;
  flex-shrink:0;overflow:hidden;
}
.wr-review-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;border-bottom:1px solid var(--border-light);
  font-size:13px;font-weight:700;
}
.wr-review-list{flex:1;overflow-y:auto;padding:0;}

.wr-rv-item{
  padding:10px 12px;border-bottom:1px solid var(--border-light);
  cursor:pointer;transition:background .1s;
}
.wr-rv-item:hover{background:rgba(59,130,246,.03);}
.wr-rv-item.resolved{opacity:.5;}
.wr-rv-author{
  display:flex;align-items:center;gap:6px;
  font-size:11px;padding-left:8px;margin-bottom:4px;
}
.wr-rv-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.wr-rv-time{color:var(--text-ter);font-size:10px;margin-left:auto;}
.wr-rv-excerpt{
  font-size:10px;color:var(--text-ter);font-style:italic;
  padding:4px 8px;background:#fef9c3;border-radius:4px;
  margin:4px 0;max-height:40px;overflow:hidden;
}
.wr-rv-text{font-size:12px;color:var(--text);margin:4px 0;line-height:1.4;}
.wr-rv-reply{
  font-size:11px;color:var(--text-sec);padding:4px 8px;
  margin:4px 0;border-radius:4px;background:var(--bg);
}
.wr-rv-reply strong{font-size:10px;}
.wr-rv-actions{display:flex;gap:6px;margin-top:6px;}
.wr-reply-input{display:flex;gap:6px;margin:6px 0;}
.wr-rv-resolved-header{
  padding:8px 12px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-ter);background:var(--bg);cursor:pointer;
  border-bottom:1px solid var(--border-light);
}
.wr-rv-resolved-header:hover{background:rgba(59,130,246,.04);}

/* Review highlight in editor */
mark.wr-highlight{border-radius:2px;padding:0 1px;transition:background .2s;}
mark.wr-highlight:hover{filter:brightness(.9);}

/* ═══════════════════════════════════════════
   RECORDING INDICATOR
   ═══════════════════════════════════════════ */
.wr-recording{display:inline-flex;align-items:center;gap:4px;color:#dc2626;font-size:11px;}
.wr-recording .dot{width:8px;height:8px;background:#dc2626;border-radius:50%;animation:wr-pulse 1s infinite;}
@keyframes wr-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ═══════════════════════════════════════════
   AI ORGANIZE OVERLAY
   ═══════════════════════════════════════════ */
.wr-ai-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);
  z-index:800;display:flex;align-items:center;justify-content:center;
}
.wr-ai-panel{
  background:var(--surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);width:440px;max-height:80vh;overflow-y:auto;
}
.wr-ai-header{padding:16px;border-bottom:1px solid var(--border);font-weight:700;font-size:15px;}
.wr-ai-body{padding:16px;}
.wr-ai-section{margin-bottom:14px;}
.wr-ai-section-title{
  font-size:11px;font-weight:700;color:var(--text-ter);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;
}
.wr-ai-option{
  display:flex;align-items:center;gap:8px;padding:6px 10px;
  border-radius:6px;cursor:pointer;font-size:12px;transition:background .1s;
}
.wr-ai-option:hover{background:rgba(59,130,246,.04);}
.wr-ai-option input{accent-color:var(--navy);}
.wr-ai-footer{
  padding:12px 16px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:8px;
}

/* ═══════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════ */
@media print{
  /* Hide everything except the write root */
  body>*{display:none!important;}
  .kk-write-root{
    display:block!important;position:static!important;
    overflow:visible!important;
  }
  .wr-topbar,.wr-toolbar,.wr-status,.wr-review-panel{display:none!important;}
  .wr-editor-wrap{display:block!important;}
  .wr-page-area{
    display:block!important;overflow:visible!important;
    background:white!important;padding:0!important;height:auto!important;
  }
  .wr-page{
    box-shadow:none!important;margin:0!important;
    width:100%!important;min-height:auto!important;
    padding:15mm 20mm 20mm 20mm!important;
  }
  .wr-page-header{border-bottom:none!important;padding-bottom:10px!important;margin-bottom:10px!important;}
  .wr-page-footer{position:fixed!important;bottom:10mm!important;left:20mm!important;right:20mm!important;border-top:1px solid #ccc!important;}
  .wr-editor{min-height:auto!important;}
  mark.wr-highlight{background:transparent!important;border:none!important;}
  /* Also hide shell elements */
  .topbar,.sidebar,.modal-overlay,.auth-overlay,#shell{display:none!important;}
  @page{margin:0;size:auto;}
}

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:768px){
  /* List view: hide sidebar, show only welcome or stack */
  .wr-sidebar{display:none;}

  /* Toolbar: scroll horizontally */
  .wr-toolbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:1px;padding:4px 6px;}
  .wt-btn{min-width:26px;height:26px;font-size:11px;padding:3px 4px;}
  .wt-select{font-size:10px;height:26px;max-width:90px;}

  /* Page area: remove padding, scale page */
  .wr-page-area{padding:8px;}
  .wr-page{
    width:100%!important;min-height:auto!important;
    box-shadow:0 1px 4px rgba(0,0,0,.08);
  }

  /* Review panel: full width overlay */
  .wr-review-panel{
    width:100%;position:absolute;right:0;top:0;bottom:0;z-index:50;
  }

  /* Status bar */
  .wr-status{padding:4px 8px;}
  .wr-status input{width:150px;font-size:10px;}

  /* Top bar */
  .wr-topbar{padding:0 8px;height:38px;}
  .wr-topbar-title{font-size:12px;}
}

@media(max-width:480px){
  .wr-topbar-back{font-size:10px;padding:3px 8px;}
  .wt-select{max-width:70px;}
}