.ufice-fab{
    position:fixed;
    right:12px;
    bottom:72px;             /* keep clear of video controls/fullscreen */
    z-index:60;
    background:#111827;
    color:#fff;
    border-radius:999px;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
    padding:.48rem .75rem;
    font-weight:900;
    font-size:.8rem;
    display:flex;
    gap:.35rem;
    align-items:center;
  }
  
  .ufice-fab .ufice-fab-stack{
    display:flex;
    flex-direction:column;
    line-height:1.05;
  }
  .ufice-fab .ufice-fab-sub{
    font-weight:800;
    font-size:.72rem;
    opacity:.85;
    letter-spacing:.02em;
  }
  .ufice-fab:hover{opacity:.95}

  .ufice-drawer{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    transform:translateY(100%);
    transition:transform .22s ease;
    background:#fff;
    border-top-left-radius:1rem;border-top-right-radius:1rem;
    box-shadow:0 -18px 45px rgba(15,23,42,.18);

    max-height:92vh;
    display:flex;
    flex-direction:column;
  }
  .ufice-drawer.open{transform:none}

  .ufice-handle{height:28px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .ufice-bar{width:48px;height:5px;border-radius:999px;background:#e5e7eb}

  .ufice-head{
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    padding:.6rem 1rem;
    border-top-left-radius:1rem;border-top-right-radius:1rem;
    flex:0 0 auto;
  }
  .ufice-title{font-weight:900;font-size:1.05rem;color:#0f172a;display:flex;align-items:center;gap:.5rem}
  .ufice-sub{color:#64748b;font-size:.875rem;margin-top:.25rem}

  /* NEW: top-right "Send" */
  .ufice-send-top{
    border:1px solid #1d4ed8;
    background:#2563eb;
    color:#fff;
    border-radius:.65rem;
    padding:.45rem .7rem;
    font-weight:900;
    font-size:.82rem;
    line-height:1;
    cursor:pointer;
    white-space:nowrap;
  }
  .ufice-send-top:hover{opacity:.95}

  .ufice-x{
    border:none;background:transparent;color:#64748b;font-size:1.25rem;line-height:1;cursor:pointer;
    padding:.25rem;border-radius:.5rem
  }
  .ufice-x:hover{color:#111827;background:#f3f4f6}

  .ufice-body{
    padding:0 1rem 1.1rem;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    flex:1 1 auto;
  }

  .ufice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.9rem}
  @media (min-width:640px){.ufice-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

  .ufice-card{border:1px solid #e5e7eb;border-radius:.75rem;padding:.6rem}
  .ufice-label{font-weight:800;color:#0f172a;font-size:.9rem;margin-bottom:.1rem}
  .ufice-hint{font-size:.75rem;color:#9ca3af;margin-bottom:.25rem}
  .ufice-stars{display:flex;gap:.25rem}
  .ufice-star{font-size:1.1rem;line-height:1;border:none;background:transparent;cursor:pointer;color:#cbd5e1}
  .ufice-star.active{color:#f59e0b}

  .ufice-text{margin-top:.8rem}

  .ufice-ok{font-size:.8rem;color:#16a34a;margin-top:.4rem;min-height:1rem}
  .ufice-ok.error{color:#dc2626}
  .ufice-card.ufice-disabled{opacity:.5}
  .ufice-card.ufice-disabled .ufice-stars{pointer-events:none}

  .ufice-detail{
    margin:.55rem 0 .25rem;
    padding:.55rem .6rem;
    border:1px solid #e5e7eb;
    border-radius:.75rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.6rem;
  }
  .ufice-detail-label{font-weight:900;color:#0f172a;font-size:.85rem}
  .ufice-detail-opts{display:flex;gap:.35rem;align-items:center}
  .ufice-detail-btn{
    border:1px solid #e5e7eb;
    background:#fff;
    color:#0f172a;
    border-radius:.55rem;
    padding:.28rem .52rem;
    font-weight:900;
    font-size:.82rem;
    line-height:1;
    cursor:pointer;
    text-transform:lowercase;
  }
  .ufice-detail-btn.active{
    background:#111827;
    color:#fff;
    border-color:#111827;
  }

  /* NEW: divider above thread at bottom */
  .ufice-thread-divider{
    margin:1rem 0 .75rem;
    border:none;
    border-top:1px solid #e2e8f0; /* slate-200 */
  }

  /* centered bottom action dock */
  #ceActionDock{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:0; /* flush to bottom */
    width:min(768px, calc(100vw - 24px));
    z-index:60;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    pointer-events:none;
  }
#ceActionDock .ufice-fab{
  position:static;
  left:auto;
  right:auto;
  bottom:auto;
  pointer-events:auto;
}

#ceActionDock .ce-right{ margin-left:auto; }

/* desktop: let buttons sit just outside the container edge */
  /* desktop: let buttons sit just outside the container edge */
@media (min-width:1024px){
  #ceActionDock .ce-left{
    transform:translateX(-26px);
  }
}

  @keyframes showupPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    100% { transform: scale(1); }
  }

  .showup-pulse{
    animation: showupPulse .7s ease-out 1;
  }

/* tiny inline spinner for dock buttons */
.ce-btn-loading{
  position: relative;
  pointer-events: none;
  opacity: .88;
  padding-right: 34px; /* make room for spinner */
}

/* spinner sits just left of the arrow area */
.ce-btn-loading::after{
  content:"";
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.55);
  border-top-color:#fff;
  border-radius:50%;
  position:absolute;
  right:30px;
  top:50%;
  transform:translateY(-50%);
  animation:ceSpin .7s linear infinite;
}

@keyframes ceSpin{
  to{ transform:translateY(-50%) rotate(360deg); }
}

  /* MOBILE: keep header visible ABOVE UFICE drawer */
  @media (max-width: 1024px){
    header{
      position: sticky;
      top: 0;
      z-index: 9999;
      background: white;
    }

    /* UFICE drawer sits below header */
    #uficeDrawer{
      top: var(--header-safe, 64px) !important;
      bottom: 0 !important;
      max-height: calc(100vh - var(--header-safe, 64px)) !important;
    }
  }

/* =========================================================
   HEADER COMMITMENTS STATUS
   Existing Show Up destination/behavior, moved beside Find.
   ========================================================= */

.ce-commitments-header{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:.3rem .58rem;
  border:1px solid #b91c1c;
  border-radius:.55rem;
  background:#dc2626;
  color:#fff;
  font-size:.7rem;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,23,42,.12);
}

.ce-commitments-header:hover{
  background:#b91c1c;
  color:#fff;
}

.ce-commitments-header:focus{
  outline:2px solid rgba(220,38,38,.28);
  outline-offset:2px;
}

.ce-commitments-header.ce-btn-loading{
  padding-right:34px;
}

@media (max-width:420px){
  .ce-commitments-header{
    min-height:26px;
    padding:.28rem .45rem;
    font-size:.64rem;
  }
}

.ce-commitments-done{
  border-color:#cbd5e1;
  background:#e2e8f0;
  color:#64748b;
  box-shadow:none;
  cursor:default;
}

.ce-commitments-done:hover{
  background:#e2e8f0;
  color:#64748b;
}
/* Shared page-header UFICE control overrides the legacy floating position */
.ce-page-controls .ufice-fab.ce-ufice-header-button{
  position:static;
  right:auto;
  bottom:auto;
  left:auto;
  inset:auto;
  transform:none;
  margin:0;
  z-index:auto;
  box-shadow:0 1px 2px rgba(15,23,42,.14);
}
/* Shared page-header UFICE button affordance */
.ce-page-controls .ufice-fab.ce-ufice-header-button{
  cursor:pointer;
  border:1px solid #334155;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .08s ease;
}

.ce-page-controls .ufice-fab.ce-ufice-header-button:hover{
  background:#1e293b;
  border-color:#0f172a;
  box-shadow:0 2px 6px rgba(15,23,42,.24);
}

.ce-page-controls .ufice-fab.ce-ufice-header-button:active{
  transform:translateY(1px);
  box-shadow:0 1px 2px rgba(15,23,42,.18);
}

.ce-page-controls .ufice-fab.ce-ufice-header-button:focus-visible{
  outline:3px solid rgba(37,99,235,.3);
  outline-offset:2px;
}