/* Donna, the Reclaim Logix concierge chat widget.
   Vanilla CSS, brand-matched: greyscale with Tuscadero Pink accent. No em dashes. */
.donna-root{
  --d-accent:#872a4c; --d-ink:#2f2f34; --d-line:#e4e4e9; --d-soft:#f3f1f2; --d-white:#ffffff;
  position:fixed; right:1.15rem; bottom:1.15rem; z-index:60;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
}
.donna-root *{box-sizing:border-box;}

/* Launcher (closed state) */
.donna-launch{
  display:flex; align-items:center; gap:.7rem;
  padding:.5rem .7rem .5rem 1.2rem;
  background:var(--d-white); border:1px solid var(--d-line);
  border-radius:999px; box-shadow:0 8px 24px rgba(19,19,22,.16);
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
}
.donna-launch:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(19,19,22,.22); }
.donna-launch-label{ font-size:1.02rem; color:#131316; line-height:1.2; text-align:center; }
.donna-launch-name{ color:var(--d-accent); font-weight:700; }
.donna-face{
  position:relative; border-radius:50%; border:2.5px solid var(--d-accent);
  overflow:hidden; background:#fff; flex:none;
}
.donna-face::before{
  content:""; position:absolute; inset:0;
  background-image:url(donna-face.jpg); background-repeat:no-repeat;
  background-size:150%; background-position:50% 14%;
  filter:grayscale(1) contrast(1.02);
}
.donna-launch .donna-face{ width:58px; height:58px; border-width:3px; }
.donna-root.donna-open .donna-launch{ display:none; }

/* Panel (open state) */
.donna-panel{
  display:flex; flex-direction:column;
  width:min(360px, calc(100vw - 2rem));
  height:min(540px, calc(100vh - 7rem));
  background:var(--d-white); border:1px solid var(--d-line);
  border-radius:16px; box-shadow:0 18px 50px rgba(19,19,22,.24);
  overflow:hidden;
}
.donna-panel[hidden]{ display:none; }

.donna-head{
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem .8rem; border-bottom:1px solid var(--d-line); background:var(--d-white);
}
.donna-head .donna-face{ width:34px; height:34px; border-width:2px; }
.donna-head-id{ display:flex; flex-direction:column; line-height:1.1; }
.donna-head-name{ font-weight:500; color:#131316; font-size:.92rem; }
.donna-head-role{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--d-accent); margin-top:.1rem; }
.donna-close{
  margin-left:auto; background:none; border:0; cursor:pointer;
  font-size:1.4rem; line-height:1; color:#6e6e75; padding:.1rem .3rem;
}
.donna-close:hover{ color:#131316; }

.donna-log{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:1rem .9rem;
  display:flex; flex-direction:column; gap:.55rem;
}
.donna-msg{
  max-width:82%; padding:.55rem .8rem; border-radius:14px;
  font-size:.9rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:break-word;
}
.donna-assistant{ align-self:flex-start; background:var(--d-soft); color:var(--d-ink); border-bottom-left-radius:4px; }
.donna-user{ align-self:flex-end; background:var(--d-accent); color:#fff; border-bottom-right-radius:4px; }
.donna-typing{ font-style:italic; color:#6e6e75; }
.donna-book{
  align-self:flex-start; margin-top:.1rem; display:inline-block;
  padding:.5rem 1rem; border:1px solid var(--d-accent); color:var(--d-accent);
  border-radius:999px; font-size:.78rem; letter-spacing:.02em; text-decoration:none;
  transition:background .3s, color .3s;
}
.donna-book:hover{ background:var(--d-accent); color:#fff; }
.donna-booked{
  align-self:flex-start; margin-top:.1rem; display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1rem; background:var(--d-soft); color:var(--d-accent);
  border:1px solid var(--d-accent); border-radius:999px; font-size:.78rem; font-weight:600;
}
.donna-booked::before{ content:"\2713"; font-weight:700; }

.donna-form{ display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--d-line); }
.donna-input{
  flex:1; min-width:0; padding:.6rem .75rem; font:inherit; font-size:.9rem;
  border:1px solid var(--d-line); border-radius:999px; color:var(--d-ink); background:#fff;
}
.donna-input:focus{ outline:none; border-color:var(--d-accent); }
.donna-input:focus-visible{ outline:2px solid var(--d-accent); outline-offset:2px; }
.donna-launch:focus-visible,.donna-close:focus-visible,.donna-send:focus-visible,.donna-book:focus-visible{
  outline:2px solid var(--d-accent); outline-offset:2px; }
.donna-send{
  flex:none; padding:.6rem 1.05rem; font:inherit; font-size:.8rem;
  background:var(--d-accent); color:#fff; border:0; border-radius:999px; cursor:pointer;
}
.donna-send:hover{ background:#6f2340; }

/* Phone: panel nearly full screen, launcher shows the avatar only */
@media (max-width:760px){
  .donna-root{ right:.8rem; bottom:.8rem; }
  .donna-launch{ padding:.3rem; }
  .donna-launch-label{ display:none; }
  /* The launcher floats over whatever is beneath it, which is unavoidable for a fixed
     widget, so the fix is footprint. At 58px + padding it measured 71x71 and was sitting
     squarely on the pricing card copy on an iPhone ("Most popular with ... agencies").
     46px keeps it comfortably past the 44px minimum tap target while covering roughly
     half the area. */
  .donna-launch .donna-face{ width:46px; height:46px; border-width:2.5px; }
  /* Open state pins the panel between both screen edges, so its width comes from the
     insets (never a 100vw calc that can spill past the left edge and force a sideways
     swipe on iOS). */
  .donna-root.donna-open{ left:.6rem; right:.6rem; }
  .donna-panel{ width:auto; height:calc(100dvh - 4.5rem); }
}

@media (prefers-reduced-motion: reduce){
  .donna-launch, .donna-book, .donna-send{ transition:none; }
}