/* =======================
   TherapuDialog (td-*)
   Unified popup system
   ======================= */

/* Overlay — must sit above auth overlay (100000) and dev overlay (100002).
   Dim deepened from 0.65 → 0.78 so the dialog reads cleanly against light
   cream/warm page backgrounds (intro room, onboarding, gate-off splash).
   Prior 0.65 left the dialog feeling "bg on bg" when the page behind was
   a warm gradient — the muted brown of dim+cream was too close to the
   dialog's own cream tone (Isaac flagged 2026-04-28). */
.td-overlay{
  position:fixed;
  inset:0;
  z-index:110000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(20,18,14,0.78);
  animation:tdFadeIn .15s ease-out;
  pointer-events:all;
  cursor:default;
}
.td-overlay.hidden{display:none!important;}
@keyframes tdFadeIn{from{opacity:0}to{opacity:1}}

/* Card wrapper (centers the inner) — strip the global "card" surface that
   styles.global.css applies to every .td-card. In dialog context this is a
   layout wrapper, NOT a visible card; the visible chrome lives on .td-inner.
   Without these overrides we get a translucent card-shaped panel BEHIND the
   actual dialog → the "card-on-card / bg-on-bg" look. */
.td-overlay > .td-card,
.td-card{
  pointer-events:auto;
  width:100%;
  max-width:360px;
  padding:0 16px;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.td-overlay > .td-card:hover,
.td-card:hover{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Inner card — matches c2-confirm-card style */
.td-inner{
  background:#ffffff;
  color:#111827;
  border:2px solid #ef4444;
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,0.28);
  padding:18px;
  animation:tdFadeIn .15s ease-out;
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  position:relative;
}
/* When td-body is present, card uses flex scroll — body scrolls, head/foot stick */
.td-inner:has(.td-body){
  overflow:hidden;
}
.td-inner .td-body{
  flex:1 1 auto;
  overflow-y:auto;
  min-height:0;
  margin-bottom:4px;
  padding-inline-end:4px;
}
.td-inner .td-actions{
  flex-shrink:0;
}
@keyframes tdSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Badge */
.td-badge{
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  border:1px solid;
  margin-bottom:10px;
  flex-shrink:0;
}

/* Title */
.td-title{
  margin:0 0 8px;
  font-size:16px;
  font-weight:700;
  color:#111827;
  line-height:1.3;
  flex-shrink:0;
}

/* Body text */
.td-text{
  margin:0 0 12px;
  color:#374151;
  font-size:14px;
  line-height:1.4;
  word-break:break-word;
  white-space:pre-wrap;
}

/* Input (for prompt) */
.td-input{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:9px 12px;
  font-size:14px;
  border:1.5px solid #d1d5db;
  border-radius:8px;
  background:#fff;
  color:#1f2933;
  outline:none;
  margin-bottom:14px;
  transition:border-color .15s;
}
.td-input:focus{
  border-color:#4a7c59;
  box-shadow:0 0 0 3px rgba(74,124,89,0.14);
}

/* Actions — stacked full-width buttons (matches c2-confirm-actions) */
.td-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top:14px;
}
.td-actions-stack{
  flex-direction:column;
  align-items:stretch;
}
.td-actions-stack>button{width:100%;}

/* .btn-chip-warn → std.buttons.css */

/* Field group (for edit dialogs) */
.td-field-group{margin-bottom:12px;}
.td-label{display:block;font-size:12px;font-weight:600;color:#6b7280;margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em;}
.td-input-wide{max-width:420px;}
.td-card-wide{max-width:640px;}

/* ── Toast ── */
.td-toast-stack{
  position:fixed;
  bottom:24px;
  inset-inline-start:50%;
  transform:translateX(-50%);
  z-index:120000;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  pointer-events:none;
}

.td-toast{
  position:relative;
  transform:translateY(20px);
  padding:10px 22px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  border:1.5px solid;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  opacity:0;
  transition:opacity .3s, transform .3s;
  pointer-events:none;
  max-width:400px;
  text-align:center;
  white-space:pre-wrap;
}

.td-toast-show{
  opacity:1;
  transform:translateY(0);
}

/* ── Context menu (right-click rows) ── */
.ctx-menu{
  position:fixed;
  z-index:110001;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  padding:4px 0;
  min-width:160px;
  animation:ctxIn .12s ease-out;
}
@keyframes ctxIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

.ctx-menu-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  border:none;
  background:transparent;
  padding:7px 14px;
  font-size:13px;
  color:#1f2937;
  cursor:pointer;
  text-align: start;
  transition:background .1s;
}
.ctx-menu-item:hover{
  background:#f3f4f6;
}
.ctx-menu-item.danger{
  color:#dc2626;
}
.ctx-menu-item.danger:hover{
  background:#fef2f2;
}

.ctx-menu-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  flex-shrink:0;
  opacity:.7;
}
.ctx-menu-item:hover .ctx-menu-icon{
  opacity:1;
}

.ctx-menu-label{
  flex:1;
}

.ctx-menu-sep{
  height:1px;
  background:#e5e7eb;
  margin:3px 0;
}