/* The demo office. Canvas size is set by office.js; see its header.
   Desktop (container >= 700px): the whole room fits the width.
   Phones: the room is drawn bigger and scrolls sideways inside .office-scroll. */
.office-stage{position:relative;-webkit-tap-highlight-color:transparent}
.office-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:12px;background:#1b1612;line-height:0;scrollbar-width:thin;scrollbar-color:#5e5a55 #1b1612}
.office-canvas{display:block;max-width:none;image-rendering:pixelated;image-rendering:crisp-edges;font-family:'Plus Jakarta Sans',sans-serif}
.office-hint{display:none;margin:.5rem 0 0;font-size:.875rem;line-height:1.4;color:#5e5a55;text-align:center}
.office-phone .office-hint{display:block}
.office-failed .office-scroll{min-height:180px}
.office-caption{margin:.75rem 0 0;font-size:1rem;line-height:1.55;color:#1c1c1e}

/* the card: a bottom sheet on phones, a centred dialog on desktop */
.office-card{box-sizing:border-box;width:100%;max-width:100%;max-height:100dvh;overflow-y:auto;margin:auto auto 0;padding:1.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom,0px));border:0;border-top:1px solid #e2ddd2;border-radius:16px 16px 0 0;background:#faf8f4;color:#1c1c1e;font-family:'Plus Jakarta Sans',sans-serif;text-align:center;box-shadow:0 -8px 32px rgba(28,28,30,.12)}
.office-card::backdrop{background:rgba(28,28,30,.45)}
.office-card[hidden],.office-card [hidden]{display:none!important}
.office-card-avatar{display:block;width:80px;height:80px;margin:0 auto .75rem;border-radius:50%;border:2px solid #e2ddd2;object-fit:cover;image-rendering:pixelated}
.office-card-initial{display:flex;align-items:center;justify-content:center;width:80px;height:80px;margin:0 auto .75rem;border-radius:50%;background:#e85d26;color:#ffffff;font-size:2rem;font-weight:800}
.office-card-name{margin:0 0 .75rem;font-size:1.35rem;font-weight:800;letter-spacing:-.01em}
.office-card-portrait{display:block;width:100%;height:auto;aspect-ratio:3/2;margin:0 0 .85rem;border-radius:10px;background:#e2ddd2;object-fit:cover}
.office-card-job{text-wrap:balance;margin:0 0 .75rem;font-size:1rem;font-weight:600;line-height:1.45}
.office-card-proof{margin:0 0 1.25rem;padding-top:.75rem;border-top:1px solid #e2ddd2;font-size:.95rem;line-height:1.55;color:#4a4a4f}

/* Holly's chat, inside the same card */
.office-chat{margin:0 0 1rem;text-align:left}
.office-chat-head{display:flex;align-items:center;justify-content:center;gap:.85rem;margin:0 0 .85rem}
.office-chat-face{flex:none;display:block;width:64px;height:64px;border-radius:50%;border:2px solid #e2ddd2;background:#f1ede5;object-fit:cover}
.office-chat-who{text-align:left}
.office-chat-title{margin:0;font-size:1.35rem;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.office-chat-role{display:flex;align-items:center;gap:.4rem;margin:.15rem 0 0;font-size:.9rem;color:#4a4a4f}
.office-chat-role::before{content:"";width:8px;height:8px;border-radius:50%;background:#2f9e5b;box-shadow:0 0 0 3px rgba(47,158,91,.18)}
.office-chat-note{margin:0 0 .85rem;font-size:.9rem;line-height:1.45;color:#4a4a4f;text-align:center}
.office-chat-list{display:flex;flex-direction:column;gap:.5rem;height:min(46dvh,340px);overflow-y:auto;padding:.75rem;border:1px solid #e2ddd2;border-radius:12px;background:#ffffff;overscroll-behavior:contain}
.office-chat-msg{max-width:85%;margin:0;padding:.55rem .8rem;border-radius:14px;font-size:.95rem;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.office-chat-holly{position:relative;align-self:flex-start;max-width:calc(85% - 34px);margin-left:34px;background:#f1ede5;color:#1c1c1e;border-bottom-left-radius:4px}
.office-chat-holly::before{content:"";position:absolute;left:-34px;bottom:0;width:26px;height:26px;border-radius:50%;background:#f1ede5 url(/images/agents/holly.png) center/cover no-repeat}
.office-chat-you{align-self:flex-end;background:#1c1c1e;color:#ffffff;border-bottom-right-radius:4px}
.office-chat-typing{color:#5e5a55;font-style:italic;white-space:nowrap;overflow-wrap:normal}
/* the dots are revealed with a clip, never a width, so the bubble never changes size */
.office-chat-typing::after{content:"...";display:inline-block;width:1.2em;text-align:left;animation:office-dots 1.2s steps(4,end) infinite}
@keyframes office-dots{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.office-chat-typing::after{animation:none}}
.office-chat-link{color:#b8431a;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.office-chat-you .office-chat-link{color:#ffffff}
.office-chat-form{display:flex;gap:.5rem;margin-top:.75rem}
.office-chat-input{flex:1;min-width:0;min-height:44px;padding:0 .85rem;border:1px solid #cfc8bb;border-radius:999px;background:#ffffff;color:#1c1c1e;font:inherit;font-size:16px}
.office-chat-input:focus-visible{outline:2px solid #b8431a;outline-offset:1px;border-color:#b8431a}
.office-chat-send{-webkit-tap-highlight-color:transparent;min-height:44px;padding:0 1.15rem;border:0;border-radius:999px;background:#b8431a;color:#ffffff;font:inherit;font-size:.95rem;font-weight:700;cursor:pointer}
.office-chat-send:hover{background:#a03a15}
.office-chat-send:disabled{opacity:.55;cursor:wait}
.office-chat-send:focus-visible{outline:2px solid #1c1c1e;outline-offset:2px}

/* keyboard and screen-reader way in: one button per agent, hidden until focused */
.office-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.office-agents{list-style:none}
.office-agents.office-sr-only:focus-within{top:.5rem;left:.5rem;right:.5rem;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;display:flex;flex-wrap:wrap;gap:.4rem;z-index:2;line-height:1.3}
.office-agent-btn{min-height:36px;padding:.35rem .8rem;border:0;border-radius:999px;background:rgba(28,28,30,.88);color:#ffffff;font:inherit;font-family:'Plus Jakarta Sans',sans-serif;font-size:.85rem;font-weight:600;text-align:left;cursor:pointer}
.office-agent-btn:focus-visible{outline:3px solid #e85d26;outline-offset:2px;background:#1c1c1e}
.office-card-close{min-height:44px;min-width:120px;padding:0 1.25rem;border:0;border-radius:999px;background:#1c1c1e;color:#ffffff;font:inherit;font-size:.95rem;font-weight:700;cursor:pointer}
.office-card-close:hover{background:#b8431a}
.office-card-close:focus-visible{outline:2px solid #b8431a;outline-offset:3px}

@media (max-width:639px){
  /* a phone sheet is short on height: smaller header so the portrait and proof fit */
  .office-card-avatar,.office-card-initial{width:56px;height:56px;margin-bottom:.5rem}
  .office-card-name{margin-bottom:.5rem;font-size:1.2rem}
}
@media (min-width:640px){
  .office-card{width:min(440px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);margin:auto;padding:2rem 1.75rem 1.5rem;border:1px solid #e2ddd2;border-radius:16px;box-shadow:0 16px 48px rgba(28,28,30,.18)}
}
.office-chat-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.15rem 0 0 34px}
.office-chat-chip{-webkit-tap-highlight-color:transparent;min-height:36px;padding:0 .85rem;border:1px solid #e8b9a3;border-radius:999px;background:#fff7f2;color:#b8431a;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
.office-chat-chip:hover{background:#b8431a;border-color:#b8431a;color:#ffffff}
.office-chat-chip:focus-visible{outline:2px solid #1c1c1e;outline-offset:2px}