/* Teo on shopdesk.be (app/Platform/Teo, public/marketing/teo/teo.js): the chat window from teamdigital.be, in Shopdesk's colours. */
:root{--tdc-fill:var(--night,#0e1b2c);--tdc-fill-ink:#fff;--tdc-surface:var(--raised,#fff);--tdc-surface-2:var(--surface,#f4f6f9);--tdc-text:var(--ink,#142032);--tdc-muted:var(--muted,#5d6a7c);--tdc-border:var(--line,#dde3eb);--tdc-radius:var(--radius,10px)}
.tdc-open{position:fixed;right:20px;bottom:20px;z-index:250;display:inline-flex;align-items:center;gap:.5rem;padding:.35rem 1.05rem .35rem .35rem;border:2px solid var(--gold,#fbbe13);border-radius:999px;background:var(--tdc-fill);color:var(--tdc-fill-ink);font:600 .95rem/1 var(--sans,system-ui,sans-serif);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.tdc-open:focus-visible{outline:3px solid var(--gold,#fbbe13);outline-offset:3px}
.tdc-is-open .tdc-open{display:none}
.tdc-panel{position:fixed;right:20px;bottom:20px;z-index:251;width:min(380px,calc(100vw - 40px));height:min(580px,calc(100vh - 40px));display:flex;flex-direction:column;background:var(--tdc-surface);color:var(--tdc-text);border:1px solid var(--tdc-border);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);font:400 .95rem/1.5 var(--sans,system-ui,sans-serif)}
.tdc-panel[hidden]{display:none}
.tdc-head{display:flex;align-items:center;gap:.65rem;padding:.75rem .9rem;border-bottom:1px solid var(--tdc-border);background:var(--tdc-fill);color:#fff;border-radius:16px 16px 0 0}
.tdc-head div{flex:1;min-width:0;display:flex;flex-direction:column}
.tdc-head strong{font-size:1.05rem}
.tdc-head span{font-size:.78rem;color:var(--night-text,#c9d4e3)}
.tdc-reset,.tdc-close{background:none;border:0;color:var(--night-text,#c9d4e3);cursor:pointer;font:inherit;min-height:44px}
.tdc-reset{font-size:.78rem}
.tdc-close{font-size:1.6rem;line-height:1;padding:0 .3rem;min-width:44px}
.tdc-reset:hover,.tdc-close:hover{color:#fff}
.tdc-log{flex:1;overflow-y:auto;padding:.9rem;display:flex;flex-direction:column;gap:.6rem}
.tdc-msg{max-width:88%;padding:.6rem .8rem;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.tdc-assistant{align-self:flex-start;background:var(--tdc-surface-2)}
.tdc-user{align-self:flex-end;background:var(--tdc-fill);color:#fff}
.tdc-msg a{color:var(--tdc-fill);font-weight:600;text-decoration:underline}
.tdc-user a{color:#fff}
.tdc-wait{color:var(--tdc-muted);font-style:italic}
.tdc-form{display:flex;gap:.5rem;padding:.7rem .9rem;border-top:1px solid var(--tdc-border)}
.tdc-form textarea{flex:1;resize:none;min-height:44px;max-height:140px;padding:.6rem .7rem;border:1px solid var(--tdc-border);border-radius:var(--tdc-radius);background:#fff;color:var(--tdc-text);font:inherit;box-sizing:border-box}
.tdc-form textarea:focus{outline:2px solid var(--tdc-fill);outline-offset:0}
.tdc-send{min-height:44px;padding:0 1rem;border:0;border-radius:var(--tdc-radius);background:var(--gold,#fbbe13);color:var(--night,#0e1b2c);font:700 .9rem var(--sans,system-ui,sans-serif);cursor:pointer}
.tdc-send:disabled{opacity:.6;cursor:default}
.tdc-note{margin:0;padding:0 .9rem .7rem;font-size:.75rem;color:var(--tdc-muted)}
.tdc-note a{color:var(--tdc-muted);text-decoration:underline}
@media (max-width:520px){
  .tdc-open{right:14px;bottom:14px}
  .tdc-panel{left:0;right:0;bottom:0;width:auto;height:min(88vh,100dvh);border-width:1px 0 0;border-radius:16px 16px 0 0}
  /* 16px or iOS Safari zooms in when the input gets focus. */
  .tdc-form textarea{font-size:16px}
  html.tdc-is-open,html.tdc-is-open body{overflow:hidden}
  .tdc-log{overscroll-behavior:contain}
}
@media print{.tdc-open,.tdc-panel{display:none}}
.tdc-avatar{position:relative;flex:none;display:block;border-radius:50%;overflow:hidden;background:#eef2f8}
.tdc-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.tdc-avatar img.on{opacity:1}
.tdc-avatar-btn{width:40px;height:40px;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.tdc-avatar-head{width:44px;height:44px}
@media (prefers-reduced-motion:reduce){.tdc-avatar img{transition:none}}
@media (min-width:521px) and (prefers-reduced-motion:no-preference){
  .tdc-open{transform:translateY(calc(100% + 40px));opacity:0;visibility:hidden;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .4s ease,visibility 0s .7s}
  .tdc-open.tdc-in{transform:none;opacity:1;visibility:visible;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .4s ease}
  .tdc-panel:not([hidden]){animation:tdc-rise .35s cubic-bezier(.22,1,.36,1)}
  @keyframes tdc-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}