.dp-comment-text p { margin: 0; }
  .dp-compose-ta { overflow: hidden; min-height: 1.4rem; padding: 8px 14px; }

  /* Keep the shared visible keyboard indicator on the reply field. */
  .dp-compose-ta:focus-visible { outline: 2px solid var(--dp-focus); outline-offset: 2px; }

  /* Compose box: grey border when something inside is focused */
  .dp-compose-box { transition: border-color 0.15s; }
  .dp-compose-box:focus-within { border-color: #a3a3a3; }
  .dark .dp-compose-box:focus-within { border-color: #525252; }

  /* Textarea: darker bg on hover and focus — not the whole row */
  #dp-compose-ta { transition: background-color 0.15s; border-radius: 20px; }
  #dp-compose-ta:hover,
  #dp-compose-ta:focus { background-color: #f0f0f1; }
  .dark #dp-compose-ta:hover,
  .dark #dp-compose-ta:focus { background-color: #27272a; }

  /* Threads push toggle slider */
  .dp-toggle-track {
    display: inline-block;
    width: 32px;
    height: 18px;
    border-radius: 9999px;
    background: #d4d4d8;
    position: relative;
    transition: background 0.18s;
    flex-shrink: 0;
    vertical-align: middle;
  }
  .dark .dp-toggle-track { background: #3f3f46; }
  .dp-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.18s, background 0.18s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  }
  /* Track darkens on hover/focus while toggle is OFF so it reads as a
     distinct element against the grey button hover background;
     thumb stays white for contrast against the darker track */
  #dp-threads-push-btn:not([aria-checked="true"]):hover .dp-toggle-track,
  #dp-threads-push-btn:not([aria-checked="true"]):focus .dp-toggle-track {
    background: #a3a3a3;
  }
  .dark #dp-threads-push-btn:not([aria-checked="true"]):hover .dp-toggle-track,
  .dark #dp-threads-push-btn:not([aria-checked="true"]):focus .dp-toggle-track {
    background: #27272a;
  }
  #dp-threads-push-btn[aria-checked="true"] .dp-toggle-track {
    background: var(--dp-accent, #6366f1);
  }
  #dp-threads-push-btn[aria-checked="true"] .dp-toggle-track::after {
    transform: translateX(14px);
  }
  #dp-threads-push-btn[aria-checked="true"] {
    color: var(--dp-accent, #6366f1);
  }

  /* ── Send button ring — wrapper-class state machine ───────────────────
     .dp-threads-active  toggle on, idle      → ring-1 springs in solid
     .dp-send-grey       WP-only send          → rings use grey colour
     .dp-is-sending      submitting            → both rings spin, dashed
     .dp-is-success      posted                → rings fade+shrink out
     ─────────────────────────────────────────────────────────────────── */
  .dp-send-wrap { position: relative; display: inline-flex; flex-shrink: 0; }

  .dp-send-ring,
  .dp-send-ring-2 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.55);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  }
  .dp-send-ring   { inset: -4px; border: 2.5px solid var(--dp-accent, #6366f1); }
  .dp-send-ring-2 { inset: -8px; border: 1.5px  dashed var(--dp-accent, #6366f1); }

  /* Grey override for WP-only submits */
  .dp-send-grey .dp-send-ring,
  .dp-send-grey .dp-send-ring-2 { border-color: #71717a; }

  /* Toggle active → ring-1 springs in solid */
  .dp-threads-active .dp-send-ring {
    opacity: 1; transform: scale(1);
    animation: dp-ring-spring 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  /* Sending → both rings spin, dashed; fade/scale in via transition */
  .dp-is-sending .dp-send-ring {
    border-style: dashed; opacity: 1; transform: none;
    animation: dp-ring-cw 1.5s linear infinite;
  }
  .dp-is-sending .dp-send-ring-2 {
    border-style: dashed; opacity: 0.45; transform: none;
    animation: dp-ring-ccw 2.3s linear infinite;
  }

  /* Success → rings fade and shrink via transition */
  .dp-is-success .dp-send-ring,
  .dp-is-success .dp-send-ring-2 { opacity: 0; transform: scale(0.7); animation: none; }

  /* Icon swap: arrow hidden, checkmark shown */
  .dp-send-check { display: none; }
  .dp-is-success .dp-send-arrow { display: none; }
  .dp-is-success .dp-send-check { display: block; }

  @keyframes dp-ring-spring {
    0%   { opacity: 0; transform: scale(0.55); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes dp-ring-cw  { to { transform: rotate(360deg); } }
  @keyframes dp-ring-ccw { to { transform: rotate(-360deg); } }
