/* ---- Office suite (full ONLYOFFICE applications in a floating window) -------------------
   Separate from the canvas editors above: this is its own layer, its own chrome. Every
   class is declared at top level so the style gate accepts it (the .files-drawer-scoped
   lesson from PR #140). */
.office-launch-anchor{position:relative;display:inline-flex}
.office-launch-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:80;min-width:232px;
  display:flex;flex-direction:column;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-md)
}
.office-launch-item{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;
  border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);
  font-family:inherit;font-size:13px;text-align:left;cursor:pointer
}
.office-launch-item:hover{background:var(--surface-2)}
.office-launch-item:disabled{opacity:.55;cursor:default}
.office-launch-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--accent)}
.office-launch-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.office-launch-name{font-weight:650;line-height:1.15}
.office-launch-sub{font-size:11px;color:var(--mute);line-height:1.15}

.office-layer{position:fixed;inset:0;z-index:70;pointer-events:none}
.office-win{
  position:absolute;top:3vh;left:5vw;width:90vw;height:94vh;
  display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg)
}
.office-layer.is-min .office-win{
  /* Hidden, never unmounted — remounting would drop the ONLYOFFICE session. */
  opacity:0;pointer-events:none;transform:scale(.98)
}
.office-win-head{
  display:flex;align-items:center;gap:9px;flex:none;padding:8px 10px;
  border-bottom:1px solid var(--line);background:var(--surface-2)
}
.office-win-icon{display:inline-flex;align-items:center;color:var(--accent);flex:none}
.office-win-title{font-size:12.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.office-win-flag{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--accent);flex:none}
.office-win-spacer{flex:1}
.office-win-btn{
  width:28px;height:28px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface);
  color:var(--ink-2);font-size:15px;line-height:1;cursor:pointer
}
.office-win-btn:hover{border-color:var(--accent);color:var(--accent)}
.office-host{flex:1;min-height:0;display:flex}
.office-mount{flex:1;min-height:0}
.office-win-loading{padding:14px;font-size:12.5px;color:var(--mute);flex:none}
.office-win-error{padding:18px;font-size:13px;color:var(--ink)}

.office-bubble{
  position:absolute;right:18px;bottom:18px;pointer-events:auto;
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--shadow-md);color:var(--ink);font-family:inherit;font-size:12.5px;cursor:pointer
}
.office-bubble:hover{border-color:var(--accent)}
.office-bubble-icon{display:inline-flex;align-items:center;color:var(--accent);flex:none}
.office-bubble-label{font-weight:650}
.office-bubble-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}

.office-confirm{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:24px;
  background:color-mix(in srgb, var(--surface) 92%, transparent)
}
.office-confirm-text{font-size:13.5px;color:var(--ink);text-align:center;max-width:34em}
.office-confirm-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.office-confirm-btn{
  min-height:32px;padding:6px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:12.5px;cursor:pointer
}
.office-confirm-btn:hover{border-color:var(--accent);color:var(--accent)}
.office-confirm-btn.is-primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.office-confirm-btn.is-primary:hover{opacity:.9;color:var(--surface)}

@media (max-width:760px){
  .office-win{top:0;left:0;width:100vw;height:100dvh;border-radius:0;border:0}
  .office-launch-menu{right:auto;left:0}
}