/* Ownerdeck live chat — floating launcher + inline panel.
   Every value is a brand.css token. No literals, no pill radii, and the
   only shadow on the site besides the card lift is the floating panel,
   which needs to read as sitting above the page. */

.odc { position:fixed; inset-inline-end:var(--s5); inset-block-end:var(--s5); z-index:200;
       display:flex; flex-direction:column; align-items:flex-end; gap:var(--s3); }

.odc-launch:active { transform:scale(.96); }
.odc-launch { display:inline-flex; align-items:center; gap:var(--s2);
  background:var(--clay-deep); color:var(--bone);
  border:none; border-radius:var(--radius);
  padding:var(--s3) var(--s5);
  font-family:var(--body); font-size:.9375rem; font-weight:600; cursor:pointer;
  transition:background-color .18s ease; }
.odc-launch:hover { background:var(--ink); }
.odc-launch { transition:background-color .18s ease, transform .14s cubic-bezier(.22,.61,.36,1); }
.odc-launch svg { width:1.125rem; height:1.125rem; flex:none; }
/* Hidden while the panel is open and while it is animating shut, so the
   launcher does not pop back under a panel that is still on screen. */
.odc.is-open .odc-launch,
.odc.is-closing .odc-launch { display:none; }

.odc-panel, .odc-inline {
  background:var(--bone); border:1px solid var(--rule); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; font-family:var(--body); }
.odc-panel { width:min(23.75rem, calc(100vw - 2.5rem));
             height:min(32.5rem, calc(100vh - 7.5rem));
             box-shadow:0 24px 48px -28px var(--lift); }
/* The display:flex above outranks the browser's [hidden]{display:none}, so the
   closed panel would otherwise sit open over the corner of every page. Keep this. */
.odc-panel[hidden] { display:none; }

/* Open/close animation. The panel grows out of the launcher corner and folds
   back into it. transform-origin sits bottom-right, where the launcher is, so
   the motion reads as the button becoming the panel. Driven by classes the
   widget toggles (odc-panel--in / --out), not by :hover or [hidden], so the
   exit can finish before the element is removed from the layout. */
.odc-panel { transform-origin: bottom right; will-change: transform, opacity; }
.odc-panel--in  { animation: odcPanelIn  320ms cubic-bezier(.16,1,.3,1) both; }
.odc-panel--out { animation: odcPanelOut 200ms cubic-bezier(.4,0,.9,.4) both; }

/* Opening is the slower of the two and lands softly; closing is quicker and
   accelerates away. Matching their durations is what makes a panel feel
   rubbery — a thing arriving and a thing leaving are not the same gesture.
   Only opacity and transform, so both stay on the compositor. */
@keyframes odcPanelIn {
  from { opacity:0; transform:translateY(14px) scale(.94); }
  60%  { opacity:1; }
  to   { opacity:1; transform:none; }
}
@keyframes odcPanelOut {
  from { opacity:1; transform:none; }
  to   { opacity:0; transform:translateY(10px) scale(.97); }
}
.odc-inline { max-width:34rem; margin:0; height:clamp(23.75rem, 52vh, 32.5rem); }

.odc-head { display:flex; align-items:center; gap:var(--s2);
  padding:var(--s3) var(--s4); background:var(--bone-2);
  border-bottom:1px solid var(--rule); flex:none; }
.odc-dot { width:.5rem; height:.5rem; border-radius:50%; background:var(--clay); flex:none; }
.odc-title { font-family:var(--display); font-weight:600; font-size:.9375rem;
             color:var(--ink); letter-spacing:-.02em; }
.odc-x { margin-inline-start:auto; background:none; border:none; font-size:1.375rem;
         line-height:1; color:var(--ink-soft); cursor:pointer; padding:0 var(--s1);
         border-radius:2px; }
.odc-x { transition:color .16s ease, transform .16s cubic-bezier(.22,.61,.36,1); }
.odc-x:hover { color:var(--ink); transform:rotate(90deg); }

.odc-log { flex:1; overflow-y:auto; padding:var(--s4);
           display:flex; flex-direction:column; gap:var(--s2); }
.odc-m { max-width:86%; padding:var(--s3) var(--s4); border-radius:var(--radius);
         font-size:.9375rem; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
.odc-m--bot { align-self:flex-start; background:var(--bone-2); border:1px solid var(--rule);
              color:var(--ink); }
.odc-m--me  { align-self:flex-end; background:var(--bone); border:1px solid var(--clay);
              color:var(--ink); }

/* Each bubble rises into place as it is appended. It leans in from the side it
   belongs to, which is the whole trick — a reply that drifts up from the left
   and one you sent that settles in from the right read as two different
   events without anything being spelled out. */
.odc-m { animation: odcMsgIn 280ms cubic-bezier(.16,1,.3,1) both; }
.odc-m--bot { transform-origin: left bottom; }
.odc-m--me  { transform-origin: right bottom; animation-name: odcMsgInMe; }

@keyframes odcMsgIn {
  from { opacity:0; transform:translate3d(-6px, 8px, 0) scale(.96); }
  to   { opacity:1; transform:none; }
}
@keyframes odcMsgInMe {
  from { opacity:0; transform:translate3d(6px, 8px, 0) scale(.96); }
  to   { opacity:1; transform:none; }
}

.odc-typing { display:flex; gap:4px; align-items:center; padding:var(--s3);
              animation: odcMsgIn 280ms cubic-bezier(.16,1,.3,1) both; }
.odc-typing span { width:5px; height:5px; border-radius:50%; background:var(--ink-soft);
                   animation:odcBlink 1.25s cubic-bezier(.4,0,.6,1) infinite; }
.odc-typing span:nth-child(2) { animation-delay:.16s; }
.odc-typing span:nth-child(3) { animation-delay:.32s; }
/* A lift as well as a fade. Opacity alone reads as a flicker; the 2px rise is
   what makes it look like someone is actually typing. */
@keyframes odcBlink {
  0%, 65%, 100% { opacity:.28; transform:translateY(0); }
  32%           { opacity:.95; transform:translateY(-2.5px); }
}

.odc-form { display:flex; gap:var(--s2); padding:var(--s3);
            border-top:1px solid var(--rule); background:var(--bone-2); flex:none; }
.odc-input { flex:1; min-width:0; background:var(--bone); border:1px solid var(--rule);
             border-radius:var(--radius); padding:var(--s3) var(--s4);
             font-family:inherit; font-size:1rem; color:var(--ink); }
.odc-input::placeholder { color:var(--ink-soft); }
.odc-input { transition:border-color .18s ease, background-color .18s ease; }
.odc-input:focus-visible { outline:2px solid var(--clay); outline-offset:1px; border-color:var(--clay); }
.odc-send { flex:none; width:2.75rem; border:none; border-radius:var(--radius);
            background:var(--clay-deep); color:var(--bone); cursor:pointer;
            display:grid; place-items:center;
            transition:background-color .18s ease, transform .14s cubic-bezier(.22,.61,.36,1); }
.odc-send:hover { background:var(--ink); }
/* A real press. Without it the button is the only part of the widget that
   never acknowledges being touched. */
.odc-send:active { transform:scale(.93); }
.odc-send svg { transition:transform .18s cubic-bezier(.16,1,.3,1); }
.odc-send:hover svg { transform:translateX(1px); }
.odc-send svg { width:1.0625rem; height:1.0625rem; }

.odc-foot { padding:0 var(--s3) var(--s3); font-size:.75rem; color:var(--ink-soft);
            background:var(--bone-2); flex:none; }

@media (max-width:35rem) {
  /* Collapse the launcher to a small square pinned bottom-right. A full-width
     bar eats too much of a small screen; the aria-label carries the meaning
     that the hidden text label was providing. */
  .odc { inset-inline-end:var(--s4); inset-block-end:var(--s4); }
  .odc-launch { width:3.25rem; height:3.25rem; padding:0; justify-content:center; }
  .odc-launch span { display:none; }
  .odc-launch svg { width:1.375rem; height:1.375rem; }
  .odc-panel { width:calc(100vw - 1.75rem); height:min(70vh, 32.5rem); }
  .odc-inline { height:clamp(21rem, 60vh, 30rem); }
}
@media (prefers-reduced-motion:reduce) {
  .odc-m, .odc-typing { animation:none; }
  .odc-typing span { animation:odcBlink 1.25s steps(2) infinite; }
  .odc-launch, .odc-send, .odc-input, .odc-x, .odc-send svg { transition:none; }
  .odc-send:active, .odc-launch:active, .odc-x:hover, .odc-send:hover svg { transform:none; }
  /* No slide/scale — the panel just appears and disappears. The widget also
     drops its close delay to zero when this is set, so nothing lingers. */
  .odc-panel--in, .odc-panel--out { animation:none; }
}