:root {
  /* CaseBox palette */
  --bg: #eeeeee; --panel: #ffffff; --gray: #f4f4f4; --ink: #333333; --muted: #777777; --line: #dddddd; --line2: #cccccc;
  --accent: #286bcc; --accent-soft: #dfe8f6; --blue: #4d90fe; --blue-b: #3079ed; --red: #dd4b39; --red-b: #d14836;
  --danger: #b0281a; --danger-soft: #fce8e6; --warn: #8a6d00; --warn-soft: #fff6d6; --ok: #188038; --ok-soft: #e6f4ea;
  --ribbon: #151515; --radius: 2px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.45 arial, "Helvetica Neue", "Noto Sans", "Noto Sans Arabic", "Noto Sans KR", "Malgun Gothic", sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; font-weight: normal; margin: 0 0 4px; }
h2 { font-size: 14px; font-weight: bold; margin: 0 0 10px; color: #222; }
h3 { font-size: 13px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ---------- app frame: ribbon | tree | work area ---------- */
body.shell { overflow: hidden; }
.app { display: grid; grid-template-columns: 52px 250px 1fr; height: 100vh; }
.app.notree { grid-template-columns: 52px 0 1fr; }
.app.notree .navpanel { display: none; }
.ribbon { background: var(--ribbon); display: flex; flex-direction: column; align-items: center; padding: 6px 0; gap: 2px; overflow-y: auto; z-index: 20; }
.rb { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: #e8e8e8; border-radius: 2px; position: relative; background: none; border: 0; padding: 0; cursor: pointer; list-style: none; }
.rb::-webkit-details-marker { display: none; }
.rb:hover { background: #2f2f2f; text-decoration: none; color: #fff; }
.rb.on { background: #5f5f5f; color: #fff; }
.rb-create { color: #fff; background: var(--red); margin: 4px 0 8px; }
.rb-create:hover { background: #c23321; }
.rb-sep { width: 28px; border-top: 1px solid #333; margin: 6px 0; }
.rb-badge { position: absolute; top: 2px; right: 1px; font-size: 10px; min-width: 16px; line-height: 16px; padding: 0 4px; }
.rb-new { position: relative; }
.menu { position: absolute; z-index: 60; background: #fff; border: 1px solid rgba(0,0,0,.2); box-shadow: 0 2px 6px rgba(0,0,0,.25); min-width: 220px; padding: 6px 0; border-radius: 2px; }
.rb-new .menu { left: 46px; top: 0; }
.menu a, .menu .menu-btn { display: flex; align-items: center; gap: 10px; padding: 7px 16px; color: #333; white-space: nowrap; background: none; border: 0; width: 100%; font: inherit; cursor: pointer; text-align: start; }
.menu a:hover, .menu .menu-btn:hover { background: #eee; text-decoration: none; }
.menu .ic { color: #666; }
.menu-head { padding: 6px 16px 10px; border-bottom: 1px solid #e5e5e5; margin-bottom: 6px; }
.menu form { margin: 0; }

.navpanel { background: var(--gray); border-right: 1px solid var(--line2); display: flex; flex-direction: column; min-width: 0; }
.navlogo { height: 51px; border-bottom: 1px solid var(--line2); display: flex; flex-direction: column; justify-content: center; padding: 0 14px; flex: none; }
.navlogo a { color: #222; font-size: 17px; white-space: nowrap; }
.navlogo a:hover { text-decoration: none; }
.navlogo b { color: var(--accent); }
.mark { color: var(--red); font-weight: bold; font-size: 20px; margin-right: 4px; }
.tree { overflow-y: auto; flex: 1; padding: 6px 0 20px; font-size: 13px; }
.tree details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; padding: 0 6px 0 4px; position: relative; }
.tree details > summary::-webkit-details-marker { display: none; }
.tree details > summary::before { content: ""; width: 14px; flex: none; height: 14px; background: no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1l4 4-4 4' fill='none' stroke='%23777' stroke-width='1.6'/%3E%3C/svg%3E"); transition: transform .1s; }
.tree details[open] > summary::before { transform: rotate(90deg); }
.tree summary a, .tree .tl { display: flex; align-items: center; gap: 6px; color: #333; padding: 4px 6px; border-radius: 2px; flex: 1; min-width: 0; white-space: nowrap; }
.tree .tl { padding-left: 24px; }
.tree .tl.top { padding-left: 10px; }
.tree details .tn { margin-left: 12px; }
.tree details .tn .tl { padding-left: 32px; }
.tree summary a:hover, .tree .tl:hover { background: #e4e4e4; text-decoration: none; }
.tree summary.on a, .tree .tl.on { background: var(--accent-soft); color: #000; }
.tree .ic { color: #777; flex: none; }
.tree .tl-ref { color: #555; font-size: 12px; flex: none; }
.tree .tl-t { overflow: hidden; text-overflow: ellipsis; }
.tree .tcount { margin-left: auto; color: #999; font-size: 11px; padding-left: 6px; }
.tree-sep { border-top: 1px solid #ddd; margin: 8px 10px; }

.workarea { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.topbar { height: 51px; flex: none; background: var(--gray); border-bottom: 1px solid var(--line2); display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.crumbs { flex: 1; min-width: 0; font-size: 18px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a { color: #555; }
.crumbs .sep { color: #aaa; margin: 0 8px; }
.mainsearch { display: flex; align-items: center; background: #fff; border: 1px solid #d9d9d9; border-top-color: #c0c0c0; width: 330px; padding: 0 8px; height: 30px; color: #888; }
.mainsearch input { border: 0; outline: 0; flex: 1; padding: 4px 6px; background: transparent; }
.mainsearch:focus-within { border-color: var(--blue); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.tb-icon { position: relative; color: #555; display: flex; padding: 6px; border-radius: 2px; }
.tb-icon:hover { background: #e4e4e4; }
.tb-badge { position: absolute; top: 0; right: -2px; font-size: 10px; line-height: 16px; min-width: 16px; padding: 0 4px; }
.usermenu { position: relative; }
.usermenu > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 6px; border-radius: 2px; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover { background: #e4e4e4; }
.usermenu .uname { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-right { right: 0; top: 40px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; flex: none; }
.avatar.sm { width: 26px; height: 26px; font-size: 12px; background: #8a9bb0; }
main { flex: 1; overflow: auto; padding: 16px 18px; background: #fff; }
body.plain main { max-width: 1200px; margin: 0 auto; background: none; overflow: visible; }
main.narrow { max-width: 420px; padding-top: 70px; }
.statusbar { height: 25px; flex: none; border-top: 1px solid #aeaeae; background: var(--gray); display: flex; align-items: center; gap: 14px; padding: 0 12px; font-size: 11px; color: #555; }
.statusbar .ic { vertical-align: -2px; }
.ctxmenu { position: fixed; z-index: 80; background: #fff; border: 1px solid rgba(0,0,0,.2); box-shadow: 0 2px 6px rgba(0,0,0,.25); min-width: 200px; padding: 6px 0; }
.ctxmenu a { display: block; padding: 6px 16px; color: #333; }
.ctxmenu a:hover { background: #eee; text-decoration: none; }
.ic { vertical-align: middle; flex: none; }
.langpick select { height: 28px; }

/* ---------- panels, grids, forms (ExtJS / CaseBox style) ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 14px; }
.stat { background: var(--gray); border: 1px solid var(--line); padding: 10px 14px; }
.stat b { display: block; font-size: 24px; font-weight: normal; color: #222; }
.stat.alert b { color: var(--red); }
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: -16px -18px 14px; padding: 12px 18px; background: var(--gray); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pagehead .inline label { display: none; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #ededed; vertical-align: top; }
th { font-size: 12px; color: #333; font-weight: bold; background: var(--gray); border-bottom: 1px solid var(--line2); border-right: 1px solid #e3e3e3; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tr.done td { color: var(--muted); text-decoration: line-through; }
.tablewrap { overflow-x: auto; }
table.xgrid td { border-bottom: 1px solid #f0f0f0; }
table.xgrid tr:hover td { background: #f5f5f5; }
table.xgrid tr.sel td { background: var(--accent-soft) !important; }
tr[data-preview] { cursor: default; }
td.gi { color: #888; width: 26px; }

.badge { display: inline-block; padding: 0 6px; border-radius: 2px; font-size: 11px; line-height: 17px; background: #e8eef7; color: #2a5699; white-space: nowrap; }
.badge.overdue { background: var(--danger-soft); color: var(--danger); }
.badge.soon { background: var(--warn-soft); color: var(--warn); }
.badge.near { background: var(--accent-soft); color: var(--accent); }
.badge.Closed { background: #eee; color: #777; }
.badge.Hearing, .badge.Urgent { background: var(--warn-soft); color: var(--warn); }
.badge.Active { background: var(--ok-soft); color: var(--ok); }

input, select, textarea { font: inherit; color: var(--ink); background: #fff; border: 1px solid #d9d9d9; border-top-color: #c0c0c0; border-radius: 1px; padding: 5px 7px; }
textarea { width: 100%; min-height: 70px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--blue); box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
label { display: block; font-size: 12px; color: #555; margin-bottom: 3px; }
.form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form .wide { grid-column: 1 / -1; }
.form input, .form select { width: 100%; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.inline > div { display: flex; flex-direction: column; }
.inline input[type=text], .inline input:not([type]) { min-width: 170px; }

/* Google-style buttons, as in CaseBox */
button, .btn { font: inherit; font-weight: bold; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 0 12px; border-radius: 2px;
  color: #fff; background: var(--blue); border: 1px solid var(--blue-b); background-image: linear-gradient(#4d90fe, #4787ed); }
button:hover, .btn:hover { text-decoration: none; background-image: linear-gradient(#4d90fe, #357ae8); border-color: #2f5bb7; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
button.secondary, .btn.secondary { color: #444; background: #f5f5f5; background-image: linear-gradient(#f5f5f5, #f1f1f1); border: 1px solid rgba(0,0,0,.1); }
button.secondary:hover, .btn.secondary:hover { color: #222; border-color: #c6c6c6; background-image: linear-gradient(#f8f8f8, #f1f1f1); }
button.danger, .btn-red { color: #fff; background: var(--red); background-image: linear-gradient(#dd4b39, #d14836); border: 1px solid var(--red-b); }
button.danger:hover, .btn-red:hover { background-image: linear-gradient(#dd4b39, #c53727); border-color: #b0281a; }
button.link { background: none; border: 0; color: var(--accent); padding: 0; height: auto; font-weight: normal; box-shadow: none; }
button.tiny, .btn.tiny { height: 22px; padding: 0 8px; font-size: 11px; }
button:disabled { opacity: .5; cursor: default; }
form.inl { display: inline; margin: 0; }
.toolbar-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -16px -18px 0; padding: 8px 12px; background: var(--gray); border-bottom: 1px solid var(--line2); }
.toolbar-strip .sep { width: 1px; height: 22px; background: #ccc; }
.toolbar-strip .inline { align-items: center; }

.flash { padding: 8px 12px; margin-bottom: 12px; background: #f9edbe; border: 1px solid #f0c36d; color: #222; border-radius: 2px; }
.flash.error { background: var(--danger-soft); border-color: #f4b6ae; color: var(--danger); }
.flash.ok { background: #f9edbe; border-color: #f0c36d; color: #222; }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line2); margin-bottom: 14px; flex-wrap: wrap; }
.tabs a { padding: 7px 14px; color: #555; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; border-radius: 2px 2px 0 0; }
.tabs a.on { color: #222; background: #fff; border-color: var(--line2); font-weight: bold; }
.tabs a:hover { text-decoration: none; color: #000; background: #f5f5f5; }
.tabs a.on:hover { background: #fff; }
.tabs .count { font-size: 11px; color: #999; margin-left: 4px; font-weight: normal; }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; margin: 0; }
dl.facts dt { color: var(--muted); font-size: 12px; }
dl.facts dd { margin: 0; }
.note { border-left: 3px solid #ddd; padding: 6px 12px; margin-bottom: 12px; }
.note .meta { font-size: 12px; color: var(--muted); }
mark { background: #fff1a8; color: inherit; padding: 0 2px; }
.snip { font-size: 12px; color: var(--muted); }
.empty { color: var(--muted); padding: 8px 0; }
details summary { cursor: pointer; color: var(--accent); margin-bottom: 8px; }
code.feed { display: block; padding: 8px; background: var(--gray); word-break: break-all; font-size: 12px; }

/* ---------- object view (case) and preview panel ---------- */
.objhead { display: flex; align-items: center; gap: 12px; margin: -16px -18px 0; padding: 10px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.objicon { width: 42px; height: 42px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; border-radius: 2px; flex: none; }
.objtitle { flex: 1; min-width: 0; }
.objtitle h1 { font-size: 19px; margin: 2px 0 0; }
.objtitle h1 .badge { vertical-align: 3px; }
.objtools { display: flex; gap: 6px; flex-wrap: wrap; }
.objhead + .tabs, .objhead ~ .tabs { margin: 0 -18px 14px; padding: 8px 18px 0; background: var(--gray); }
.objview, .gridview { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 0; margin: 0 -18px -16px; min-height: calc(100vh - 51px - 25px - 120px); }
.gridview { margin-top: 0; min-height: calc(100vh - 51px - 25px); }
.objmain { padding: 0 18px 16px; min-width: 0; }
.gridmain { padding: 16px 18px 0; min-width: 0; }
.gridmain .tablewrap { margin: 0 -18px; }
.gridmain table.xgrid th:first-child, .gridmain table.xgrid td:first-child { padding-left: 14px; }
.preview { border-left: 1px solid var(--line2); background: #fff; overflow-y: auto; }
.objview > .preview { margin-top: -14px; }
.pv-empty { color: #999; text-align: center; padding: 80px 24px; }
.pv-empty .ic { color: #ccc; }
.pv-title { background: #eaeaea; padding: 10px 14px; border-bottom: 1px solid #ddd; }
.pv-name { font-weight: bold; font-size: 14px; margin: 2px 0 4px; color: #222; }
.pv-actions { display: flex; gap: 6px; margin-top: 8px; }
table.pv-props th { background: none; border: 0; border-bottom: 1px solid #f0f0f0; color: #777; font-weight: normal; width: 38%; white-space: normal; padding: 5px 14px; }
table.pv-props td { padding: 5px 14px 5px 0; border-bottom: 1px solid #f0f0f0; }
.pv-block { padding: 10px 14px; border-top: 1px solid #e5e5e5; }
.pv-h { font-weight: bold; color: #444; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.pv-h a { margin-left: auto; font-weight: normal; font-size: 12px; }
.pv-h .ic { color: #888; }
.pv-row { padding: 3px 0; display: block; color: #333; }
a.pv-file:hover { background: #f5f5f5; text-decoration: none; }
.ext { display: inline-block; min-width: 34px; text-align: center; font-size: 9px; font-weight: bold; color: #fff; background: #8a8a8a; border-radius: 2px; padding: 1px 3px; vertical-align: 1px; }
.ext-pdf { background: #d93025; } .ext-doc, .ext-docx, .ext-rtf, .ext-odt { background: #2b579a; } .ext-xls, .ext-xlsx, .ext-csv { background: #217346; }
.ext-ppt, .ext-pptx { background: #d24726; } .ext-jpg, .ext-jpeg, .ext-png, .ext-gif, .ext-webp, .ext-heic { background: #8e44ad; } .ext-eml, .ext-msg { background: #f4b400; }
.ext-mp4, .ext-mov, .ext-mp3, .ext-m4a, .ext-wav { background: #0b8043; }
.ext.big { font-size: 20px; padding: 18px 10px; min-width: 90px; }
.pv-thumb { text-align: center; padding: 12px; border-bottom: 1px solid #eee; background: #fafafa; }
.pv-thumb img { max-width: 100%; max-height: 260px; border: 1px solid #ddd; }
.pv-thumb iframe { width: 100%; height: 300px; border: 1px solid #ddd; background: #fff; }
.pv-comments .cmt { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f3f3f3; font-size: 12px; }
.cmt-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.cmt-form textarea { min-height: 50px; font-size: 12px; }

@media (max-width: 1200px) { .objview, .gridview { grid-template-columns: minmax(0, 1fr) 290px; } }
@media (max-width: 1000px) {
  .objview, .gridview { grid-template-columns: 1fr; }
  .preview { border-left: 0; border-top: 1px solid var(--line2); }
  .gridview .preview:not(.show) { display: none; }
  .objview > .preview { margin-top: 0; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 46px 1fr; }
  .navpanel { display: none; position: fixed; left: 46px; top: 0; bottom: 0; width: 260px; z-index: 30; box-shadow: 2px 0 8px rgba(0,0,0,.25); }
  .app.treeopen .navpanel { display: flex; }
  .app.notree .navpanel { display: none; }
  .workarea { grid-column: 2; }
  .rb { width: 38px; height: 38px; }
  .mainsearch { width: auto; flex: 1; }
  .crumbs { display: none; }
  .usermenu .uname, .statusbar .muted { display: none; }
  main { padding: 12px; }
  .pagehead, .toolbar-strip, .objhead { margin-left: -12px; margin-right: -12px; margin-top: -12px; }
  .objview, .gridview { margin-left: -12px; margin-right: -12px; }
}

/* communications */
.unread { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }
.unread[hidden] { display: none; }
.msg-layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.threads { padding: 10px; position: sticky; top: 70px; max-height: calc(100vh - 100px); overflow-y: auto; }
.thread { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; color: var(--ink); }
.thread .tname { flex: 1; min-width: 0; }
.thread .tref { display: block; white-space: nowrap; }
.thread .unread { flex: none; }
.thread:hover { background: var(--bg); text-decoration: none; }
.thread.on { background: var(--accent-soft); color: var(--accent); }
.thread-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 10px 4px; }
.conv { display: flex; flex-direction: column; padding: 0; }
.conv-head { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chat { display: flex; flex-direction: column; }
.chat-log { height: 55vh; min-height: 300px; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 75%; align-self: flex-start; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.msg.mine { align-self: flex-end; background: var(--accent-soft); border-color: transparent; }
.msg-meta { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.msg-body { white-space: normal; word-wrap: break-word; }
.chat-form { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); align-items: flex-end; }
.chat-form textarea { min-height: 44px; resize: vertical; }
@media (max-width: 760px) { .msg-layout { grid-template-columns: 1fr; } .threads { position: static; max-height: none; } .msg { max-width: 90%; } }

.chat-input { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.chat-input textarea { width: 100%; }
.attach { cursor: pointer; font-size: 20px; padding: 6px 4px; color: var(--muted); margin: 0; }
.attach:hover { color: var(--accent); }
.msg-file { margin-top: 4px; font-size: 14px; }

/* viewer & editors */
.viewer { text-align: center; }
.view-img { max-width: 100%; max-height: 80vh; border-radius: 6px; }
.view-media { max-width: 100%; max-height: 75vh; background: #000; border-radius: 6px; }
.view-frame { width: 100%; height: 80vh; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.view-text { text-align: left; white-space: pre-wrap; max-height: 75vh; overflow: auto; background: var(--bg); padding: 14px; border-radius: 6px; font-size: 13px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.toolbar .sep { width: 1px; height: 26px; background: var(--line); margin: 0 4px; }
.toolbar button { padding: 5px 10px; font-size: 13px; }
.toolbar .tool.on { background: var(--accent); color: #fff; }
.toolbar input[type=color] { width: 38px; height: 32px; padding: 2px; }
.canvas-wrap { background: repeating-conic-gradient(var(--line) 0% 25%, transparent 0% 50%) 50% / 20px 20px; border-radius: 6px; padding: 8px; text-align: center; }
#cv { max-width: 100%; max-height: 70vh; cursor: crosshair; touch-action: none; }

/* calls */
.conv-head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.callbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.callbtns button { padding: 5px 12px; font-size: 13px; }
.btn.on-call { background: var(--ok); border-color: var(--ok); }
.ring { position: fixed; right: 20px; bottom: 20px; z-index: 50; background: var(--panel); border: 2px solid var(--ok); border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; box-shadow: 0 8px 30px rgba(0,0,0,.25); max-width: 420px; }
.ring[hidden] { display: none; }

/* security */
.otp { font-size: 22px; letter-spacing: .2em; width: 10em; font-variant-numeric: tabular-nums; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.codes code { background: var(--bg); padding: 6px 10px; border-radius: 6px; font-size: 15px; text-align: center; }
.setup2fa { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.qr { display: inline-block; padding: 8px; background: #fff; border-radius: 8px; border: 1px solid var(--line); }
.qr svg { display: block; }
tr.warnrow td { background: var(--danger-soft); }
@media (max-width: 760px) { .setup2fa { grid-template-columns: 1fr; } }
@media print { .ribbon, .navpanel, .topbar, .statusbar, .preview, .pagehead a, button { display: none !important; } body.shell { overflow: visible; } .app { display: block; height: auto; } .workarea, main { height: auto; overflow: visible; } }

/* round 2: bundles, chronology, templates */
.bulkbar h3 { font-size: 14px; margin: 0 0 8px; }
.bulkhead { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.bulkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
tr.keyrow td { background: var(--accent-soft); }
.fieldlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; font-size: 13px; }
.fieldlist code { background: var(--bg); padding: 1px 6px; border-radius: 4px; }
@media (max-width: 860px) { .bulkgrid { grid-template-columns: 1fr; } }
.fieldlist code.bad, td code.bad { background: var(--danger-soft); color: var(--danger); }

/* language picker & right-to-left (Arabic) */
.langpick { margin: 0; }
.langpick select { padding: 3px 6px; font-size: 13px; }
[dir=rtl] body { font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; }
[dir=rtl] th, [dir=rtl] td { text-align: right; }
[dir=rtl] .brand .mark { margin-right: 0; margin-left: 4px; }
[dir=rtl] .ring { right: auto; left: 20px; }
[dir=rtl] .tabs .count { margin-left: 0; margin-right: 4px; }
[dir=rtl] .note { border-left: 0; border-right: 3px solid var(--accent-soft); }
[dir=rtl] .view-text, [dir=rtl] code, [dir=rtl] .otp, [dir=rtl] input[type=date], [dir=rtl] input[name=username] { direction: ltr; text-align: left; }

/* billing */
.badge.inv-Draft { background: var(--line); color: var(--muted); }
.badge.inv-Sent { background: var(--accent-soft); color: var(--accent); }
.badge.inv-Partly-paid { background: var(--warn-soft); color: var(--warn); }
.badge.inv-Paid { background: var(--ok-soft); color: var(--ok); }
.badge.inv-Void { background: var(--line); color: var(--muted); text-decoration: line-through; }
.ai-answer { border-color: var(--accent); }
.ai-answer > div { white-space: normal; line-height: 1.6; }

/* right-to-left frame */
[dir=rtl] .navpanel { border-right: 0; border-left: 1px solid var(--line2); }
[dir=rtl] .preview { border-left: 0; border-right: 1px solid var(--line2); }
[dir=rtl] .rb-new .menu { left: auto; right: 46px; }
[dir=rtl] .menu-right { right: auto; left: 0; }
[dir=rtl] .tree .tl { padding-left: 6px; padding-right: 24px; }
[dir=rtl] .tree .tl.top { padding-right: 10px; }
[dir=rtl] .tree details .tn { margin-left: 0; margin-right: 12px; }
[dir=rtl] .tree details .tn .tl { padding-left: 6px; padding-right: 32px; }
[dir=rtl] .tree details > summary::before { transform: scaleX(-1); }
[dir=rtl] .tree details[open] > summary::before { transform: rotate(90deg); }
[dir=rtl] .tree .tcount { margin-left: 0; margin-right: auto; }
[dir=rtl] .pv-h a { margin-left: 0; margin-right: auto; }
[dir=rtl] th, [dir=rtl] td { border-right: 0; }
[dir=rtl] .mark { margin-right: 0; margin-left: 4px; }
[dir=rtl] .rb-badge { right: auto; left: 1px; }
@media (max-width: 900px) { [dir=rtl] .navpanel { left: auto; right: 46px; } }
.tree details > summary { margin: 0; color: inherit; }
.gridview { margin: -16px -18px -16px; }
@media (max-width: 900px) { .gridview { margin: -12px -12px -12px; } }
details.fold > summary { font-weight: bold; color: #333; margin: -14px -16px 0; padding: 10px 16px; display: flex; align-items: center; gap: 8px; }
details.fold[open] > summary { margin-bottom: 12px; border-bottom: 1px solid #eee; }
details.fold > summary .ic { color: #777; }
@media (max-width: 900px) {
  .topbar { gap: 6px; padding: 0 8px; }
  .topbar .langpick select { width: 64px; }
  .mainsearch { min-width: 0; }
  .objhead { flex-wrap: wrap; }
  .objtitle { flex-basis: calc(100% - 60px); }
  .objtools { width: 100%; }
  .objmain { padding: 0 12px 12px; }
  .grid { grid-template-columns: 1fr; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; }
  .tabs a { white-space: nowrap; }
  .objhead ~ .tabs { margin: 0 -12px 12px; padding: 6px 12px 0; }
  .form { grid-template-columns: 1fr; }
}
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
label.chk { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 13px; margin: 0; }

/* live calendar */
.cbcal { background: #fff; }
.cal-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.cal-title { font-size: 15px; margin: 0 8px; }
.cal-views button.on { background: var(--accent-soft); border-color: #9fb7da; color: #000; }
.cal-legend { color: #666; margin-bottom: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-left: 8px; vertical-align: -1px; }
.lg.red { background: #fce8e6; border: 1px solid #d93025; } .lg.over { background: #d93025; } .lg.today { background: #fef7e0; border: 1px solid #f9ab00; } .lg.hol { background: #f1f3f4; border: 1px solid #bbb; }
.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; }
.mh { background: var(--gray); font-size: 11px; font-weight: bold; color: #555; padding: 4px 6px; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
.mc { min-height: 96px; padding: 3px 4px; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; overflow: hidden; }
.mc.out { background: #fafafa; } .mc.out .md { color: #bbb; }
.mc.now { background: #eef4fd; } .mc.now .md { background: var(--blue); color: #fff; border-radius: 10px; padding: 0 6px; display: inline-block; }
.mc.holday { background: #f6f6f6; }
.md { font-size: 12px; color: #555; margin-bottom: 2px; }
.chip { display: block; font-size: 11px; line-height: 15px; padding: 1px 5px; margin-bottom: 2px; border-radius: 2px; background: #e8eef7; color: #1a3d6d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid #4d90fe; }
a.chip:hover { text-decoration: none; filter: brightness(.96); }
.chip .ct { font-weight: bold; } .chip .co { color: inherit; opacity: .7; font-size: 10px; }
.chip.red { background: #fce8e6; color: #a50e0e; border-left-color: #d93025; font-weight: bold; }
.chip.over { background: #d93025; color: #fff; border-left-color: #8c1d18; font-weight: bold; }
.chip.today { background: #fef7e0; color: #7a4f01; border-left-color: #f9ab00; }
.chip.done { background: #f1f3f4; color: #888; border-left-color: #ccc; text-decoration: line-through; }
.chip.hol { background: #f1f3f4; color: #555; border-left-color: #999; font-style: italic; }
.wgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wc { border: 1px solid #e0e0e0; min-height: 180px; padding: 4px; }
.wc.now { border-color: var(--blue); background: #f5f9ff; }
.wd { font-size: 12px; font-weight: bold; color: #444; margin-bottom: 4px; }
.wc .chip { white-space: normal; }
.ld { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
.ldd { font-weight: bold; color: #444; } .ldd.now { color: var(--blue); }
.ldi .chip { display: inline-block; max-width: 100%; margin-right: 4px; white-space: normal; }
.timerchip { background: #fce8e6; color: #a50e0e; border: 1px solid #f4b6ae; padding: 3px 8px; border-radius: 2px; font-weight: bold; white-space: nowrap; }
@media (max-width: 900px) { .mc { min-height: 64px; } .mc .chip { font-size: 10px; } .wgrid { grid-template-columns: 1fr; } .wc { min-height: 0; } }
.form input[type=checkbox], .form input[type=radio], label.chk input { width: auto; flex: none; }

/* ---- photos / avatars ---- */
.av{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex:none;vertical-align:middle;color:#fff;font-weight:600;line-height:1;overflow:visible}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.av.sq,.av.sq img{border-radius:4px}
.av-ini{letter-spacing:.02em;user-select:none}
.dot-online{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#1e8e3e;border:2px solid #fff}
.menu-head{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.menu-head .av{grid-row:span 2}
.photo-box{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:12px;border:1px solid var(--line,#dadce0);border-radius:8px;background:var(--panel,#fafafa);margin:0 0 14px}
.photo-box form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.photo-box .form input[type=file],.photo-box input[type=file]{width:auto;max-width:240px}
.person{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.ic-label{display:inline-flex;align-items:center;gap:6px}
.badge .ic{vertical-align:-2px}
.objicon .av{width:40px!important;height:40px!important}
/* icon picker */
.icon-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:4px;max-height:180px;overflow:auto;padding:6px;border:1px solid var(--line,#dadce0);border-radius:6px;background:#fff}
.icon-pick label{display:flex;align-items:center;justify-content:center;height:32px;border-radius:5px;cursor:pointer;border:1px solid transparent}
.icon-pick input{display:none}
.icon-pick input:checked+span{outline:2px solid #1a73e8;border-radius:4px;background:#e8f0fe}
.icon-pick span{display:flex;padding:4px}
/* calendar create / drag */
.cal-add-modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px}
.cal-add-modal .box{background:var(--bg,#fff);border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.25);width:min(440px,100%);padding:18px;max-height:90vh;overflow:auto}
.cal-add-modal h3{margin:0 0 10px;font-size:17px}
.cal-add-modal label{display:block;font-size:12px;color:#5f6368;margin:8px 0 3px}
.cal-add-modal input,.cal-add-modal select,.cal-add-modal textarea{width:100%;box-sizing:border-box;padding:7px 8px;border:1px solid #dadce0;border-radius:6px;font:inherit}
.cal-add-modal .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cal-add-modal .types{display:flex;flex-wrap:wrap;gap:6px}
.cal-add-modal .types label{display:inline-flex;align-items:center;gap:5px;margin:0;padding:5px 9px;border:1px solid #dadce0;border-radius:16px;cursor:pointer;color:#202124;font-size:13px}
.cal-add-modal .types input{display:none}
.cal-add-modal .types label:has(input:checked){background:#e8f0fe;border-color:#1a73e8}
.cal-add-modal .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.cal-add-modal .err{color:#d93025;font-size:13px;margin-top:8px}
.cal-day{cursor:pointer}
.cal-day .cal-plus{opacity:0;font-size:14px;color:#1a73e8;float:right;line-height:1}
.cal-day:hover .cal-plus{opacity:1}
.cal-item[draggable=true]{cursor:grab}
.cal-day.drop-over{outline:2px dashed #1a73e8;outline-offset:-2px;background:#e8f0fe}
@media (hover:none){.cal-day .cal-plus{opacity:.6}}
/* chip icon */
.chip .ci svg{vertical-align:-2px;margin-right:2px}.chip.rem{border-left:3px solid #7b1fa2}
.msg{position:relative}
.msg .msg-av{float:left;margin:2px 8px 0 0}
.msg.mine .msg-av{display:none}
[dir=rtl] .msg .msg-av{float:right;margin:2px 0 0 8px}

/* ---- red ＋ menu (tree) ---- */
.rb-new .menu.nm{position:fixed;left:50px;top:52px;width:300px;max-height:calc(100vh - 70px);overflow:auto;padding:0;border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.28);z-index:300}
[dir=rtl] .rb-new .menu.nm{left:auto;right:50px}
.nm-search{position:sticky;top:0;background:#fff;display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #eee;z-index:1}
.nm-search input{flex:1;border:0;outline:0;font:inherit;font-size:14px;background:transparent;min-width:0}
.nm-tree{padding:4px 0 8px}
.nm-grp>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;font-weight:600;color:#202124;user-select:none}
.nm-grp>summary::-webkit-details-marker{display:none}
.nm-grp>summary::after{content:"";margin-inline-start:auto;width:7px;height:7px;border-right:2px solid #888;border-bottom:2px solid #888;transform:rotate(-45deg);transition:transform .15s}
[dir=rtl] .nm-grp>summary::after{transform:rotate(135deg)}
.nm-grp[open]>summary::after{transform:rotate(45deg)}
.nm-grp>summary:hover{background:#f1f3f4}
.nm-grp>.nm-item{padding-inline-start:40px;position:relative}
.nm-grp>.nm-item::before{content:"";position:absolute;inset-inline-start:22px;top:0;bottom:0;border-inline-start:1px solid #dadce0}
.menu.nm .nm-item{display:flex;align-items:center;gap:10px;padding:7px 14px;color:#333;white-space:nowrap;background:none;border:0;width:100%;font:inherit;font-size:14px;cursor:pointer;text-align:start;text-decoration:none}
.menu.nm .nm-item:hover,.menu.nm .nm-item:focus-visible{background:#e8f0fe;outline:0}
.nm-item small{color:#80868b;margin-inline-start:auto}
.nm-item[hidden],.nm-grp[hidden]{display:none!important}
.nm-empty{padding:10px 14px}
.nm-flash{outline:3px solid #fbbc04;outline-offset:4px;transition:outline-color 1.5s}
.cb-toast{position:fixed;bottom:44px;left:50%;transform:translateX(-50%);background:#202124;color:#fff;padding:10px 18px;border-radius:20px;z-index:400;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
@media (max-width:700px){.rb-new .menu.nm{left:8px;right:8px;width:auto;top:56px;max-height:calc(100vh - 80px)}.menu.nm .nm-item,.nm-grp>summary{padding-top:11px;padding-bottom:11px}}

/* ---- case folders ---- */
.docs-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;align-items:start}
.ftree{padding:8px 0!important;position:sticky;top:8px;max-height:calc(100vh - 140px);overflow:auto}
.ftree-head{display:flex;align-items:center;justify-content:space-between;padding:2px 12px 8px;border-bottom:1px solid #eee;margin-bottom:4px}
.fnew{position:relative}.fnew>summary{list-style:none;display:inline-flex;align-items:center;gap:4px;cursor:pointer}.fnew>summary::-webkit-details-marker{display:none}
.fnew-form{position:absolute;right:0;top:30px;z-index:50;background:#fff;border:1px solid #dadce0;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.18);padding:10px;width:240px;display:grid;gap:6px}
[dir=rtl] .fnew-form{right:auto;left:0}
.fnode{display:flex;align-items:center;gap:6px;padding:5px 10px;color:#202124;text-decoration:none;font-size:13.5px;border-radius:4px;margin:0 4px}
.fnode:hover{background:#f1f3f4;text-decoration:none}.fnode.on{background:#e8f0fe;color:#174ea6;font-weight:600}
.fnode .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.fn>summary{list-style:none;position:relative}details.fn>summary::-webkit-details-marker{display:none}
details.fn>summary::before{content:"";position:absolute;inset-inline-start:var(--chev,10px);top:12px;width:5px;height:5px;border-right:1.5px solid #777;border-bottom:1.5px solid #777;transform:rotate(-45deg);pointer-events:none}
details.fn[open]>summary::before{transform:rotate(45deg)}
.ftree-tip{padding:6px 12px 0;margin:0}
.drop-over{outline:2px dashed #1a73e8!important;outline-offset:-2px;background:#e8f0fe!important}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.crumbs-f{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:15px}.crumbs-f .sep{color:#999}
.factions{position:relative}.factions>summary{list-style:none;display:inline-flex;align-items:center;gap:5px;cursor:pointer}.factions>summary::-webkit-details-marker{display:none}
.factions-menu{right:0;top:32px;width:330px;padding:10px 12px!important;display:grid;gap:12px}
[dir=rtl] .factions-menu{right:auto;left:0}
.factions-menu .chk{display:flex;align-items:center;gap:6px;font-size:13px;color:#202124;margin:3px 0}
.factions-menu input:not([type=checkbox]),.factions-menu select{flex:1;min-width:0}
.dropzone{display:flex;align-items:center;gap:12px;border:2px dashed #c6dafc;border-radius:10px;padding:12px 16px;margin-bottom:12px;background:#f8fbff;flex-wrap:wrap}
.dropzone .link{color:#1a73e8;cursor:pointer;text-decoration:underline}
.upbar{flex-basis:100%;height:18px;background:#e8eaed;border-radius:9px;position:relative;overflow:hidden}
.upfill{position:absolute;inset:0 auto 0 0;width:0;background:#1a73e8;transition:width .2s}.uptext{position:relative;padding-inline-start:8px;color:#fff;mix-blend-mode:difference;line-height:18px}
tr.frow td{background:#fffdf5}
.badge.cat{background:#f1f3f4;color:#3c4043}
@media (max-width:900px){.docs-layout{grid-template-columns:1fr}.ftree{position:static;max-height:260px}}
.tree .tl.tl-f{padding-inline-start:58px;font-size:12.5px}

/* ---- case progress ---- */
.prog-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.txt-red{color:#c5221f}
.stagebar{list-style:none;margin:14px 0 4px;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(72px,1fr));gap:0;overflow-x:auto;padding-bottom:4px}
.stagebar li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px;min-width:72px}
.stagebar li::before{content:"";position:absolute;top:14px;inset-inline-start:-50%;width:100%;height:3px;background:#dadce0;z-index:0}
.stagebar li:first-child::before{display:none}
.stagebar li.st-done::before,.stagebar li.st-now::before{background:#188038}
.stagebar form{margin:0;position:relative;z-index:1}
.st-dot{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:2px solid #dadce0;background:#fff;color:#5f6368;padding:0;cursor:default}
button.st-dot{cursor:pointer}button.st-dot:hover{border-color:#1a73e8;color:#1a73e8}
.st-done .st-dot{background:#188038;border-color:#188038;color:#fff}
.st-now .st-dot{background:#1a73e8;border-color:#1a73e8;color:#fff;box-shadow:0 0 0 4px #d2e3fc}
.st-name{font-size:12px;line-height:1.25;margin-top:6px;color:#3c4043}
.st-now .st-name{font-weight:700;color:#174ea6}
.st-todo .st-name{color:#80868b}
.st-date{font-size:11px;color:#80868b;margin-top:2px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.kpi{background:#fff;border:1px solid var(--line2,#e0e0e0);border-radius:8px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.kpi span{font-size:12px;color:#5f6368}.kpi b{grid-column:1/-1;font-size:20px;margin-top:4px}.kpi b small{font-size:12px;font-weight:400}
.kpi small{grid-column:1/-1;font-size:11.5px}
.kpi-red{border-color:#f28b82;background:#fef7f6}
.tline{position:relative;height:96px;margin:10px 8px 6px}
.tl-axis{position:absolute;left:0;right:0;top:48px;height:3px;background:#dadce0;border-radius:2px}
.tl-tick{position:absolute;top:56px;transform:translateX(-50%);font-size:11px;color:#80868b;white-space:nowrap}
.tl-tick::before{content:"";position:absolute;top:-10px;left:50%;height:8px;border-left:1px solid #bdc1c6}
[dir=rtl] .tl-tick{transform:translateX(50%)}
.tl-today{position:absolute;top:6px;bottom:18px;border-left:2px dashed #d93025;z-index:1}
.tl-today i{position:absolute;top:-4px;left:4px;font-size:10px;color:#d93025;font-style:normal;font-weight:700}
.tl-pt{position:absolute;top:calc(40px - var(--row) * 15px);transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #9aa0a6;display:flex;align-items:center;justify-content:center;z-index:2}
[dir=rtl] .tl-pt{transform:translateX(50%)}
.tl-pt:hover{z-index:5;transform:translateX(-50%) scale(1.25)}
.tl-pt.tl-done{border-color:#bdc1c6;opacity:.75}.tl-pt.tl-todo{border-color:#1a73e8}.tl-pt.tl-red{border-color:#d93025;background:#fce8e6}.tl-pt.tl-over{border-color:#a50e0e;background:#d93025}
.tl-pt.tl-over svg{color:#fff!important}
.tl-pt.stage{border-color:#188038;background:#e6f4ea}.tl-pt.open{border-color:#188038}
.tl-list{display:grid;gap:4px;margin-top:4px}
.tl-li{display:flex;align-items:center;gap:6px;font-size:13px;color:#202124;padding:3px 6px;border-radius:4px}
.tl-li:hover{background:#f1f3f4;text-decoration:none}.tl-li.tl-red b,.tl-li.tl-over b{color:#c5221f}
.lg.done{background:#e8eaed;border:1px solid #bdc1c6}
.ww{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.ww-col{border-radius:8px;padding:10px;min-height:80px}
.ww-col h3,.ww-rest h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#5f6368}
.ww-ours{background:#e6f4ea}.ww-trib{background:#f3e8fd}.ww-other{background:#fce8e6}
.ww-card{display:flex;align-items:center;gap:8px;background:#fff;border-radius:6px;padding:6px 8px;margin-bottom:6px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ww-rest{margin-top:12px}.ww-row{display:flex;flex-wrap:wrap;gap:8px}.ww-row .ww-card{margin:0}
@media (max-width:760px){.ww{grid-template-columns:1fr}.tline{height:110px}}
/* firm charts */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.hbar{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;gap:8px;align-items:center;font-size:13px;margin:5px 0}
.hbar .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .trk{height:12px;background:#f1f3f4;border-radius:6px;overflow:hidden}.hbar .fil{height:100%;background:#1a73e8;border-radius:6px}
.hbar.red .fil{background:#d93025}.hbar .num{font-weight:600;min-width:24px;text-align:end}
.vbars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:10px}
.vbars .vb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:11px;color:#5f6368}
.vbars .vb i{display:block;width:100%;max-width:34px;background:#188038;border-radius:4px 4px 0 0;min-height:2px}
.vbars .vb b{font-size:11px;color:#202124;margin-bottom:2px}
.funnel{display:flex;gap:3px;margin:4px 0 12px;flex-wrap:wrap}
.funnel .fs{flex:1;min-width:58px;text-align:center;font-size:11px;color:#5f6368}
.funnel .fs i{display:block;height:34px;border-radius:4px;background:#e8f0fe;position:relative;margin-bottom:3px}
.funnel .fs i span{position:absolute;inset:auto 0 0 0;background:#1a73e8;border-radius:4px}
.funnel .fs b{display:block;color:#202124;font-size:13px}
/* client portal stage bar */
.stagebar.mini .st-dot{width:24px;height:24px;font-size:11px}.stagebar.mini li::before{top:11px}
.dropzone label,.dropzone .link{display:inline!important;margin:0;font-size:inherit;color:#1a73e8}
.dropzone>div{flex:1;min-width:200px}
details.fn>summary::before{top:13px}
.stagebar{grid-template-columns:repeat(var(--n),minmax(58px,1fr))}
.stagebar li{min-width:58px;padding:0 2px}.st-name{font-size:11.5px}
.dropzone.dn-off{opacity:.45}.dropzone.dn-off label{pointer-events:none}

/* ---- task queue (uploads) ---- */
.cbq{position:fixed;right:16px;bottom:40px;width:340px;max-width:calc(100vw - 32px);background:#fff;border:1px solid #dadce0;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.22);z-index:250;display:flex;flex-direction:column;max-height:60vh}
[dir=rtl] .cbq{right:auto;left:16px}
.cbq-head{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#1f4e79;color:#fff;border-radius:10px 10px 0 0}
.cbq.busy .cbq-head{background:#1a73e8}.cbq.bad .cbq-head{background:#c5221f}
.cbq-head .ic{color:#fff}.cbq-sum{flex:1;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbq-min{background:none;border:0;color:#fff;font-size:16px;cursor:pointer;padding:0 4px;transition:transform .15s}
.cbq.min .cbq-min{transform:rotate(180deg)}.cbq.min .cbq-list,.cbq.min .cbq-foot{display:none}.cbq.min .cbq-head{border-radius:10px}
.cbq-list{overflow:auto;padding:4px 0}
.cbq-row{padding:8px 12px;border-bottom:1px solid #f1f3f4}
.cbq-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbq-where{color:#80868b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbq-bar{height:5px;background:#e8eaed;border-radius:3px;margin:5px 0 3px;overflow:hidden}.cbq-bar i{display:block;height:100%;background:#1a73e8;transition:width .25s}
.cbq-row.st-done .cbq-bar i{background:#188038}.cbq-row.st-error .cbq-bar i{background:#d93025}.cbq-row.st-queued .cbq-bar i{background:#9aa0a6}
.cbq-row.ocr .cbq-bar i{background:repeating-linear-gradient(45deg,#188038 0 8px,#81c995 8px 16px);animation:cbqstripe 1s linear infinite;background-size:200% 100%}
@keyframes cbqstripe{to{background-position:-32px 0}}
.cbq-st{display:flex;justify-content:space-between;gap:8px;color:#5f6368}.cbq-row.st-error .cbq-st span:first-child{color:#c5221f}
.cbq-acts{display:flex;gap:6px;white-space:nowrap}.cbq-acts button{background:none;border:0;color:#1a73e8;cursor:pointer;padding:0;font:inherit}
.cbq-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 12px;border-top:1px solid #eee}
.cbq-foot button{background:none;border:0;color:#1a73e8;cursor:pointer;font:inherit;font-size:12px}.cbq-note{color:#b06000}
@media (max-width:700px){.cbq{right:8px;left:8px;width:auto;bottom:44px}}
.cb-refresh{margin-inline-start:auto}
.upbar.msg{background:none;height:auto;overflow:visible}.upbar.msg .upfill{display:none}.upbar.msg .uptext{color:#188038;mix-blend-mode:normal;padding:0;line-height:1.4}
/* Tasks button + dropdown panel */
.tb-tasks{background:none;border:0;cursor:pointer;width:38px;height:38px;align-items:center;justify-content:center;color:#1a73e8}
.tb-tasks .tb-ring{position:absolute;inset:2px;transform:rotate(-90deg)}
.tb-ring circle{fill:none;stroke-width:3}.tb-ring .rg-bg{stroke:#e8eaed}.tb-ring .rg-fg{stroke:#1a73e8;stroke-linecap:round;transition:stroke-dasharray .3s}
.tb-tasks.bad{color:#d93025}.tb-tasks.bad .rg-fg{stroke:#d93025}.tb-tasks:not(.busy):not(.bad) .rg-fg{stroke:#188038}
.tb-tasks.busy .ic{animation:cbqpulse 1.6s ease-in-out infinite}@keyframes cbqpulse{50%{transform:translateY(-2px)}}
.tb-tcount{background:#1a73e8;color:#fff;border-radius:8px}.tb-tasks.bad .tb-tcount{background:#d93025}
.cbq{top:54px;bottom:auto;right:110px;max-height:70vh}
[dir=rtl] .cbq{right:auto;left:110px}
@media (max-width:700px){.cbq{top:54px;bottom:auto;right:8px;left:8px}}
.cbq[hidden],.tb-tasks[hidden]{display:none!important}
/* ---- case map ---- */
.cm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.cm-head h2{margin:0}
.cm-tools{display:flex;gap:4px;flex-wrap:wrap}
.cm-stage{height:460px;margin-top:8px;border:1px solid #eef0f2;border-radius:8px;background:radial-gradient(circle at 1px 1px,#e8eaed 1px,transparent 0) 0 0/18px 18px,#fbfcfd;overflow:hidden;cursor:grab;touch-action:none;user-select:none}
.cm-stage.dragging{cursor:grabbing}
.cm-svg{display:block}
.cm-gl{font-size:12.5px;font-weight:700;fill:#202124}.cm-badge{font-size:10.5px;font-weight:700;fill:#fff}
.cm-group{cursor:pointer}.cm-group:hover rect,.cm-group:focus rect{fill:#f1f3f4}.cm-group.empty{opacity:.55}
.cm-leaf text.cm-ll{font-size:12px;fill:#202124}.cm-leaf text.cm-ls{font-size:10.5px;fill:#80868b}
.cm-leaf.link{cursor:pointer}.cm-leaf.link:hover text.cm-ll,.cm-leaf.link:focus text.cm-ll{fill:#1a73e8;text-decoration:underline}
.cm-leaf.red text.cm-ls{fill:#c5221f}.cm-leaf.dim{opacity:.55}
.cm-ini{font-size:11px;font-weight:700}
.cm-rt{font-size:14px;font-weight:700;fill:#202124}.cm-rs{font-size:11px;fill:#5f6368}
.cm-tip{margin:6px 0 0}
.casemap.cm-full{position:fixed;inset:0;z-index:400;margin:0;border-radius:0;display:flex;flex-direction:column}
.casemap.cm-full .cm-stage{flex:1;height:auto}
body.cm-noscroll{overflow:hidden}
@media (max-width:700px){.cm-stage{height:360px}}
.cf-h{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line2,#e0e0e0);display:flex;align-items:center;gap:8px;font-size:15px}.caseform .cf-h:first-of-type{border-top:0;margin-top:0;padding-top:0}.caseform [hidden]{display:none!important}

/* ---- documents library (Finder style) ---- */
#finder{display:none}
.docs-layout.finder-on{grid-template-columns:minmax(0,1fr)}
.finder-on .fmain,#finder{min-width:0}
.objview:has(.finder-on){grid-template-columns:minmax(0,1fr)}.objview:has(.finder-on)>.preview{display:none}
.finder-on #finder{display:block}
.finder-on .ftree,.finder-on .fmain>.panel.tablewrap,.finder-on .crumbs-f,.finder-on .dropzone,.finder-on .factions,.finder-on .fviews{display:none!important}
.finder-on .fbar{margin:0}
.fviews{display:inline-flex;border:1px solid #dadce0;border-radius:7px;overflow:hidden}
.fviews button,.fx-views button{border:0;background:#fff;padding:5px 10px;cursor:pointer;color:#5f6368;font-size:14px;line-height:1;border-radius:0;display:inline-flex;align-items:center}
.fviews button.on,.fx-views button.on{background:#e8f0fe;color:#174ea6}
#finder{background:#fff;border:1px solid #dadce0;border-radius:10px;overflow:hidden;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.fx-bar{display:flex;align-items:center;gap:10px;padding:8px 10px;background:linear-gradient(#f8f9fa,#f1f3f4);border-bottom:1px solid #e0e0e0;flex-wrap:wrap}
.fx-nav{display:inline-flex;gap:2px}
.fx-b{border:1px solid #dadce0;background:#fff;border-radius:6px;width:30px;height:28px;font-size:20px;line-height:1;color:#3c4043;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.fx-b:disabled{opacity:.35;cursor:default}.fx-b:hover:not(:disabled){background:#f1f3f4}
[dir=rtl] .fx-nav [data-act=back],[dir=rtl] .fx-nav [data-act=fwd]{transform:scaleX(-1)}
.fx-path{flex:1;min-width:160px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:14px}
.fx-path .sep{color:#9aa0a6}.fx-path a{color:#1a73e8}
.fx-views{display:inline-flex;border:1px solid #dadce0;border-radius:7px;overflow:hidden}
.fx-search{width:200px;max-width:100%;padding:5px 10px;border:1px solid #dadce0;border-radius:16px;font-size:13px}
.fx-tools{display:flex;align-items:center;gap:4px;padding:6px 10px;border-bottom:1px solid #eee;flex-wrap:wrap}
.fx-t{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:#3c4043;padding:5px 9px;border-radius:6px;font-size:13px;cursor:pointer;text-decoration:none}
.fx-t:hover{background:#f1f3f4;text-decoration:none}.fx-t svg{color:#c48a00}.fx-t em{font-style:normal;color:#80868b}
.fx-sp{flex:1}
.fx-sort select{padding:3px 6px;font-size:12.5px}
.fx-body{height:min(62vh,640px);min-height:320px;outline:none;position:relative;background:#fff}
.fx-cols{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth}
.fx-col{flex:0 0 250px;border-inline-end:1px solid #eceff1;overflow-y:auto;padding:4px 0}
.fx-col.fx-wide{flex:1 1 auto;min-width:300px}
.fx-row{display:flex;align-items:center;gap:8px;padding:5px 10px;margin:0 4px;border-radius:5px;cursor:default;user-select:none;font-size:13.5px;color:#202124;width:calc(100% - 8px);border:0;background:transparent;text-align:start}
.fx-row:hover{background:#f1f3f4}
.fx-row.on{background:#1a73e8;color:#fff}.fx-row.on .fx-c,.fx-row.on .fx-ch,.fx-row.on .fx-where{color:#e8f0fe}
.fx-col:not(:last-child) .fx-row.on.is-f{background:#d2e3fc;color:#174ea6}
.fx-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-c{color:#80868b;font-size:11.5px}.fx-ch{color:#9aa0a6;font-size:16px;line-height:1}
[dir=rtl] .fx-ch{transform:scaleX(-1)}
.fx-where{color:#80868b;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-exh{font-size:11px;color:inherit;opacity:.8}
.fx-fold{color:#e6a700;display:inline-flex;flex:none}.fx-fold.int{color:#9aa0a6}
.fx-fold.big svg{width:64px;height:64px}
.fx-ext{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:18px;padding:0 3px;border-radius:3px;background:var(--c);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.02em}
.fx-ext.big{min-width:56px;height:68px;font-size:14px;border-radius:6px;box-shadow:inset 0 -14px 0 rgba(0,0,0,.12)}
.fx-busy{width:10px;height:10px;border:2px solid #c6dafc;border-top-color:#1a73e8;border-radius:50%;animation:fxspin 1s linear infinite;flex:none}
@keyframes fxspin{to{transform:rotate(360deg)}}
.fx-empty{color:#9aa0a6;font-size:12.5px;padding:18px 14px;text-align:center}
.fx-pv{flex:1 0 300px;padding:14px 16px;background:#fafbfc;display:flex;flex-direction:column;gap:6px;min-width:280px}
.fx-pvm{display:flex;align-items:center;justify-content:center;min-height:180px;max-height:300px;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden}
.fx-pvm img{max-width:100%;max-height:300px;object-fit:contain}.fx-pvm video{width:100%;max-height:300px;background:#000}.fx-pvm audio{width:92%}
.fx-pvn{font-weight:600;font-size:15px;word-break:break-word}
.fx-props{font-size:12.5px;border-collapse:collapse;margin-top:4px}.fx-props th{color:#80868b;font-weight:400;text-align:start;padding:3px 10px 3px 0;vertical-align:top;white-space:nowrap}.fx-props td{padding:3px 0}
.fx-pva{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.fx-note{color:#b06000}.fx-many{margin:auto;color:#5f6368;font-size:15px}
.fx-iconwrap{display:flex;height:100%}
.fx-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;padding:12px;align-content:start}
.fx-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:8px;cursor:default;user-select:none;text-align:center}
.fx-tile:hover{background:#f1f3f4}.fx-tile.on{background:#d2e3fc}
.fx-ti{height:76px;display:flex;align-items:center;justify-content:center}
.fx-thumb img{max-width:96px;max-height:76px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.25);object-fit:cover;background:#fff}
.fx-tn{font-size:12px;line-height:1.3;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.fx-tile.on .fx-tn{color:#174ea6;font-weight:600}
.fx-iconwrap .fx-pv{flex:0 0 300px;border-inline-start:1px solid #eceff1;overflow-y:auto}
.fx-status{padding:5px 12px;border-top:1px solid #eee;color:#80868b;background:#fafafa}
.fx-ql{position:fixed;inset:0;z-index:2000;background:rgba(32,33,36,.55);display:flex;align-items:center;justify-content:center;padding:3vh 3vw}
.fx-qlbox{position:relative;background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.4);width:min(1100px,96vw);height:min(86vh,900px);display:flex;flex-direction:column;overflow:hidden}
.fx-qlh{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #eee}
.fx-qlh b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-qlc{flex:1;display:flex;align-items:center;justify-content:center;background:#202124;min-height:0}
.fx-qlc img{max-width:100%;max-height:100%;object-fit:contain}.fx-qlc video{max-width:100%;max-height:100%}
.fx-qlc iframe{width:100%;height:100%;border:0;background:#fff}
.fx-qla{display:flex;flex-direction:column;align-items:center;gap:16px;color:#fff}.fx-qla img{max-width:320px}
.fx-qlp,.fx-qln{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.85);width:40px;height:56px;border-radius:8px;font-size:30px;cursor:pointer;color:#202124}
.fx-qlp{inset-inline-start:10px}.fx-qln{inset-inline-end:10px}
.fx-menu{position:fixed;z-index:2100;background:#fff;border:1px solid #dadce0;border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.2);padding:5px;min-width:200px;display:flex;flex-direction:column}
.fx-menu button{border:0;background:transparent;text-align:start;padding:7px 12px;border-radius:5px;font-size:13.5px;color:#202124;cursor:pointer}
.fx-menu button:hover{background:#1a73e8;color:#fff}.fx-menu hr{border:0;border-top:1px solid #eee;margin:4px 0}
.fx-pickbox{height:auto;max-height:80vh;width:min(460px,94vw)}.fx-pickl{overflow-y:auto;padding:6px}
.fx-pickl .fx-row{cursor:pointer}
.fx-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(30px);opacity:0;background:#202124;color:#fff;padding:10px 18px;border-radius:8px;z-index:2200;transition:.25s;pointer-events:none;font-size:14px}
.fx-toast.show{opacity:1;transform:translateX(-50%)}.fx-toast.bad{background:#c5221f}
.drop-over.fx-col,.drop-over.fx-grid{background:#e8f0fe!important;outline:2px dashed #1a73e8;outline-offset:-4px}
@media (max-width:700px){
  .fx-col{flex-basis:78vw}.fx-pv{flex-basis:86vw}.fx-search{width:100%;order:9}
  .fx-t span{display:none}.fx-t{padding:6px 8px;font-size:16px}
  .fx-body{height:68vh}.fx-iconwrap .fx-pv{display:none}
  .fx-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
}

/* ---- camera / scanner / voice ---- */
.cbcap-modal{position:fixed;inset:0;z-index:2050;background:rgba(32,33,36,.6);display:flex;align-items:center;justify-content:center;padding:2vh 2vw}
.cbcap-box{background:#fff;border-radius:12px;width:min(980px,98vw);max-height:96vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.cbcap-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #eee}
.cbcap-body{padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.cbcap-native{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cbcap-native .btn{font-size:15px;padding:10px 16px}
.center{text-align:center}
.cbcap-live{position:relative;background:#000;border-radius:10px;overflow:hidden;display:flex;justify-content:center;min-height:200px}
.cbcap-live video{max-width:100%;max-height:56vh;display:block;transition:opacity .15s}
.cbcap-live video.cbcap-flash{opacity:.2}
.cbcap-tap::after{content:attr(data-tap);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px}
.cbcap-rec{position:absolute;top:10px;left:12px;color:#fff;background:#d93025;border-radius:12px;padding:2px 10px;font-size:13px}
.cbcap-ctl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.cbcap-big{font-size:16px;padding:10px 22px}
.cbcap-shots,.cbcap-pages{display:flex;gap:8px;flex-wrap:wrap}
.cbcap-shot,.cbcap-page{position:relative;width:96px;height:96px;border-radius:8px;overflow:hidden;background:#f1f3f4;display:flex;align-items:center;justify-content:center}
.cbcap-page{height:128px}
.cbcap-shot img,.cbcap-shot video,.cbcap-page img{width:100%;height:100%;object-fit:cover}
.cbcap-shot>button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;padding:0}
.cbcap-tag{position:absolute;color:#fff;background:rgba(0,0,0,.5);padding:2px 6px;border-radius:4px;font-size:12px}
.cbcap-page>span{position:absolute;top:4px;left:6px;background:#1a73e8;color:#fff;border-radius:10px;font-size:11px;padding:0 6px}
.cbcap-pa{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;background:rgba(0,0,0,.45)}
.cbcap-pa button{border:0;background:transparent;color:#fff;cursor:pointer;font-size:16px;padding:2px 8px}
.cbcap-addpage{align-self:center;max-width:150px}
.cbcap-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid #eee;padding-top:12px}
.cbcap-name{flex:1;min-width:180px}
.cbcap-chk{display:flex;align-items:center;gap:6px;font-size:13px;color:#202124}
.cbcap-err{background:#fce8e6;color:#c5221f;padding:10px 12px;border-radius:8px;margin:0}
.cbcap-done{text-align:center;padding:30px 10px;color:#188038}
.cbcap-done p{color:#3c4043}
.cbcap-voice{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0}
.cbcap-meter{width:min(360px,80vw);height:10px;background:#e8eaed;border-radius:5px;overflow:hidden}.cbcap-meter span{display:block;height:100%;width:0;background:#188038;transition:width .08s}
.cbcap-time{font-size:34px;font-variant-numeric:tabular-nums;color:#202124}
.cbcap-voice audio{width:min(420px,90vw)}
.cbcap-edit{display:flex;justify-content:center}
.cbcap-stage{position:relative;touch-action:none;user-select:none}
.cbcap-stage canvas{display:block;border-radius:4px}
.cbcap-stage svg{position:absolute;inset:0;pointer-events:none}
.cbcap-stage polygon{fill:rgba(26,115,232,.12);stroke:#1a73e8;stroke-width:2}
.cbcap-stage i{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(26,115,232,.25);border:3px solid #1a73e8;cursor:grab;touch-action:none}
.cbcap-scanlive .cbcap-guide{position:absolute;inset:6% 10%;border:2px dashed rgba(255,255,255,.6);border-radius:6px;pointer-events:none}
.cbcap-filters .btn{font-size:12.5px}
@media (max-width:640px){.cbcap-box{width:100vw;max-height:100vh;height:100vh;border-radius:0}.cbcap-modal{padding:0}}
.doc-crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13.5px;margin-bottom:4px}
.doc-crumbs .sep{color:#9aa0a6}.doc-back{margin-inline-end:6px}
.cbcap-modal [hidden]{display:none!important}

/* ---- AI assistant ---- */
.ai-layout{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;gap:12px;align-items:start}
.ai-chats{padding:8px!important;max-height:calc(100vh - 210px);overflow-y:auto;position:sticky;top:8px}
.ai-new{display:block;text-align:center;margin-bottom:8px}
.ai-chat{display:flex;flex-direction:column;padding:7px 9px;border-radius:6px;color:#202124;text-decoration:none;margin-bottom:2px}
.ai-chat:hover{background:#f1f3f4;text-decoration:none}.ai-chat.on{background:#e8f0fe}
.ai-ct{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-main{display:flex;flex-direction:column;padding:0!important;height:calc(100vh - 210px);min-height:420px}
.ai-msgs{flex:1;overflow-y:auto;padding:16px 18px}
.ai-msg{margin:0 0 16px;max-width:900px}
.ai-user{margin-inline-start:auto;max-width:75%;width:fit-content;background:#e8f0fe;border-radius:12px 12px 2px 12px;padding:9px 13px}.ai-user .ai-body{white-space:pre-wrap}
.ai-assistant .ai-body{line-height:1.6}
.ai-assistant .ai-body p{margin:0 0 4px}.ai-assistant .ai-body h4{margin:12px 0 4px;font-size:14.5px}
.ai-assistant .ai-body ul,.ai-assistant .ai-body ol{margin:2px 0 6px;padding-inline-start:22px}
.ai-gap{height:6px}.ai-src{font-size:12px;font-weight:600;text-decoration:none;background:#e8f0fe;border-radius:4px;padding:0 3px}
.ai-assistant mark{background:#fff3cd;padding:0 2px}
.ai-dots{color:#80868b;font-style:italic}
.ai-caret{display:inline-block;width:7px;height:15px;background:#1a73e8;vertical-align:-2px;margin-inline-start:2px;animation:aiblink 1s steps(2) infinite}
@keyframes aiblink{50%{opacity:0}}
.ai-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ai-sources{margin-top:8px;color:#5f6368}.ai-sources a{margin-inline-end:4px}
.ai-stop{margin-top:6px}
.ai-chrono table{margin:6px 0 8px}
.ai-hello{max-width:640px;margin:30px auto;text-align:center}
.ai-starters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:14px}
.ai-starters button{border:1px solid #dadce0;background:#fff;border-radius:10px;padding:12px;cursor:pointer;font-size:14px;text-align:start}
.ai-starters button:hover{background:#f8fbff;border-color:#1a73e8}
.ai-compose{border-top:1px solid #e8eaed;padding:10px 12px;background:#fafbfc;border-radius:0 0 8px 8px}
.ai-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.ai-tools .chip{border:1px solid #dadce0;background:#fff;border-radius:14px;padding:3px 10px;font-size:12.5px;cursor:pointer;color:#3c4043}
.ai-tools .chip:hover{border-color:#1a73e8;color:#1a73e8}
.ai-fast{margin-inline-start:auto;color:#5f6368;display:flex;align-items:center;gap:4px}
.ai-box{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:8px 10px;margin-bottom:6px}
.ai-row{display:flex;gap:8px;align-items:flex-end}.ai-row textarea{flex:1;resize:vertical;min-height:44px;max-height:240px}
.ai-brief{position:sticky;top:8px;max-height:calc(100vh - 210px);overflow-y:auto}
.ai-brief h3{margin:0 0 6px}
.ai-brief .ai-msg{max-width:none;margin:10px 0}.ai-brief .ai-body h4{font-size:13px;margin:10px 0 2px}
@media (max-width:1100px){.ai-layout{grid-template-columns:minmax(0,1fr)}.ai-chats,.ai-brief{position:static;max-height:none}.ai-main{height:auto;min-height:60vh}}

a.ai-lib{background:#fff6dc;border-radius:4px;padding:0 3px}
.ai-libsrc{margin-top:6px}.ai-libitem{display:flex;gap:6px;align-items:baseline;margin:3px 0}.ai-libitem .ai-fn{flex:1;font-family:Georgia,serif}
.ai-badlib{color:#80868b;font-size:.85em}