/* --- floating action button (speed-dial) ------------------------------ */
.comments-fab-dial {
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
  width: 44px; height: 44px;
}
.comments-fab-dial--clear-chat { top: 50%; bottom: auto; transform: translateY(-50%); }
.comments-fab {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: #0f2f4a; color: #fff; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.comments-fab svg { width: 22px; height: 22px; display: block; }
.comments-fab-dial--open .comments-fab { background: #2a6fd6; }
.comments-fab-action {
  position: absolute; left: 2px; top: 2px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  color: #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  opacity: 0; transform: translate(0, 0) scale(.3); pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.comments-fab-action svg { width: 19px; height: 19px; display: block; }
.comments-fab-action--list { background: #3fae6a; }
.comments-fab-action--element { background: #7b3fb8; }
.comments-fab-action--free { background: #e0a23d; }
.comments-fab-dial--open .comments-fab-action { opacity: 1; pointer-events: auto; }
.comments-fab-dial--open .comments-fab-action--list {
  transform: translate(0, -66px) scale(1); transition-delay: 0s;
}
.comments-fab-dial--open .comments-fab-action--element {
  transform: translate(-47px, -47px) scale(1); transition-delay: .04s;
}
.comments-fab-dial--open .comments-fab-action--free {
  transform: translate(-66px, 0) scale(1); transition-delay: .08s;
}
.comments-picking { cursor: crosshair !important; }

/* --- element-picker highlight ----------------------------------------- */
.comments-highlight {
  position: absolute; z-index: 2147481000; pointer-events: none;
  background: rgba(74, 120, 214, .14);
  outline: 2px solid #4a78d6; outline-offset: -1px;
  border-radius: 2px;
}

/* --- pins ------------------------------------------------------------- */
.comments-pin {
  position: absolute; z-index: 2147482000;
  width: 22px; height: 22px; padding: 0;
  border: 2px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: #4a78d6; color: #fff;
  font-size: 11px; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
}
.comments-pin--task { background: #7b3fb8; }
.comments-pin--degraded { opacity: .5; }
.comments-pin--pending { opacity: .55; animation: comments-pulse 1s ease-in-out infinite; }
@keyframes comments-pulse { 50% { opacity: .9; } }

/* --- modal (Pixit-style dialog) --------------------------------------- */
.comments-modal-backdrop {
  position: fixed; inset: 0; z-index: 2147483600;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
}
.comments-modal {
  width: 380px; max-width: 92vw; background: #fff; color: #1a1a1a;
  border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
  overflow: hidden; font-size: 14px;
}
.comments-modal__head {
  padding: 14px 18px; font-weight: 700; font-size: 15px;
  border-bottom: 1px solid #eef0f3;
}
.comments-modal__body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.comments-modal__text {
  width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical;
  border: 1px solid #d6dae0; border-radius: 8px; padding: 8px 10px; font: inherit;
}
.comments-modal__name {
  width: 100%; box-sizing: border-box;
  border: 1px solid #d6dae0; border-radius: 8px; padding: 7px 10px; font: inherit;
}
.comments-modal__label { font-size: 12px; font-weight: 600; color: #64748b; }
.comments-modal__seg { display: flex; gap: 14px; font-size: 13px; }
.comments-modal__check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.comments-modal__foot {
  padding: 12px 18px; display: flex; justify-content: flex-end; gap: 8px;
  border-top: 1px solid #eef0f3;
}
.comments-btn {
  border: 1px solid #d6dae0; background: #fff; color: #334155;
  border-radius: 8px; padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer;
}
.comments-btn--primary { background: #0f2f4a; border-color: #0f2f4a; color: #fff; }

/* --- toast (errors) --------------------------------------------------- */
.comments-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 2147483600; background: #b91c1c; color: #fff;
  padding: 10px 16px; border-radius: 8px; font-size: 13px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3); max-width: 80vw;
}

/* --- thread popover (Pixit-style floating panel) ---------------------- */
.comments-thread {
  position: fixed; right: 20px; top: 70px; width: 300px; z-index: 2147483000;
  background: #fff; color: #1a1a1a; border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .3); font-size: 13px; overflow: hidden;
}
.comments-thread__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid #eef0f3; font-weight: 700;
}
.comments-thread__close { border: none; background: none; cursor: pointer; font-size: 14px; }
.comments-thread__body { max-height: 300px; overflow-y: auto; }
.comments-thread__shot { display: block; border-bottom: 1px solid #eef0f3; }
.comments-thread__shot img { width: 100%; display: block; }
.comments-msg { padding: 9px 14px; border-top: 1px solid #f1f3f5; }
.comments-msg--claude strong { color: #7b3fb8; }
.comments-thread__error { padding: 8px 14px; background: #fef2f2; color: #b91c1c; font-size: 12px; }
.comments-thread__foot { padding: 10px 14px; border-top: 1px solid #eef0f3; }
.comments-thread__reply {
  width: 100%; box-sizing: border-box; min-height: 52px;
  border: 1px solid #d6dae0; border-radius: 8px; padding: 7px 10px; font: inherit;
}
.comments-thread__actions { display: flex; gap: 6px; margin-top: 8px; }
.comments-thread__actions button {
  border: 1px solid #d6dae0; background: #fff; border-radius: 8px;
  padding: 5px 12px; font: inherit; font-weight: 600; cursor: pointer;
}
.comments-thread__actions .comments-btn--primary { background: #0f2f4a; border-color: #0f2f4a; color: #fff; }

/* --- free-drop placement mode ----------------------------------------- */
.comments-placing { cursor: crosshair !important; }

/* --- pin flash (drawer row -> pin) ------------------------------------ */
.comments-pin--flash { animation: comments-flash .5s ease-in-out 3; }
@keyframes comments-flash { 50% { box-shadow: 0 0 0 6px rgba(74, 120, 214, .55); } }

/* --- page-comments drawer --------------------------------------------- */
.comments-drawer-root {
  position: fixed; inset: 0; z-index: 2147483500;
}
.comments-drawer-backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .25);
  opacity: 0; transition: opacity .3s ease-in-out;
}
.comments-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 512px; max-width: 90vw;
  background: #fff; color: #1a1a1a;
  box-shadow: -8px 0 28px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column; font-size: 13px;
  transform: translateX(100%); transition: transform .3s ease-in-out;
}
.comments-drawer-root--open .comments-drawer-backdrop { opacity: 1; }
.comments-drawer-root--open .comments-drawer { transform: translateX(0); }
.comments-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid #eef0f3; font-weight: 700;
}
.comments-drawer__heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.comments-drawer__head-icon { flex: none; }
.comments-drawer__close {
  border: none; background: none; font-size: 14px; cursor: pointer; color: #64748b;
}
.comments-drawer__toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; padding: 10px 14px; border-bottom: 1px solid #eef0f3;
}
.comments-drawer__new { position: relative; }
.comments-drawer__menu {
  position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 1;
  background: #fff; border: 1px solid #d6dae0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2); overflow: hidden;
}
.comments-drawer__menu button {
  display: block; width: 100%; text-align: left; border: none; background: #fff;
  padding: 8px 14px; font: inherit; cursor: pointer; white-space: nowrap;
}
.comments-drawer__menu button:hover { background: #f1f5f9; }
.comments-drawer__resolved-toggle {
  display: flex; align-items: center; gap: 6px; color: #64748b; white-space: nowrap;
  cursor: pointer;
}
.comments-drawer__search {
  flex: 1; min-width: 0; box-sizing: border-box;
  border: 1px solid #d6dae0; border-radius: 8px; padding: 6px 10px; font: inherit;
}
.comments-drawer__switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.comments-drawer__switch {
  position: relative; flex: none; width: 34px; height: 18px;
  background: #cbd5e1; border-radius: 999px; transition: background .15s ease;
}
.comments-drawer__switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s ease;
}
.comments-drawer__switch-input:checked + .comments-drawer__switch { background: #2a6fd6; }
.comments-drawer__switch-input:checked + .comments-drawer__switch::after { transform: translateX(16px); }
.comments-drawer__switch-input:focus-visible + .comments-drawer__switch {
  outline: 2px solid #2a6fd6; outline-offset: 2px;
}
.comments-drawer__list { flex: 1; overflow-y: auto; }
.comments-drawer__row {
  display: flex; gap: 9px; width: 100%; text-align: left;
  border: none; border-bottom: 1px solid #f1f3f5; background: #fff;
  padding: 10px 14px; font: inherit; cursor: pointer;
}
.comments-drawer__row[hidden] { display: none; }
.comments-drawer__row:hover { background: #f8fafc; }
.comments-drawer__row--resolved { opacity: .5; }
.comments-drawer__marker { flex: none; }
.comments-drawer__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.comments-drawer__preview {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;
}
.comments-drawer__meta { color: #94a3b8; font-size: 11px; }
.comments-drawer__empty, .comments-drawer__error { padding: 18px 14px; color: #64748b; }
.comments-drawer__retry {
  border: 1px solid #d6dae0; background: #fff; border-radius: 6px;
  padding: 3px 10px; font: inherit; cursor: pointer; margin-left: 4px;
}