/* Portfolio chatbot widget — pairs with chat-widget.js */
.cw{
  --accent:#C8A87A;
  --cw-bg:#0f0e0b;
  --cw-bg2:#141210;
  --cw-text:#F0EDE6;
  --cw-muted:rgba(240,237,230,.55);
  --cw-border:rgba(200,168,122,.18);
  --cw-font:'MADE TOMMY',system-ui,sans-serif;
  --ch:120px; /* character height; art is 372×700 */
  --bs:3px;   /* speech-bubble art pixel: always a whole number of screen pixels */
  position:fixed;left:max(1.25rem,env(safe-area-inset-left));bottom:max(1.25rem,env(safe-area-inset-bottom));
  z-index:99980; /* above the page, below the site's lightboxes (99990+) and custom cursor */
  font-family:var(--cw-font);font-size:14px;line-height:1.55;color:var(--cw-text);
}
.cw *,.cw *::before,.cw *::after{box-sizing:border-box}
.cw [hidden]{display:none!important}
.cw-panel[dir=rtl]{font-family:system-ui,'Segoe UI',Tahoma,sans-serif} /* MADE TOMMY has no Arabic glyphs */

/* character: the launcher while closed, perched on the panel while open */
.cw-launch{
  position:relative;display:block;width:calc(var(--ch) * .5314);height:var(--ch);padding:0;border:none;background:none;cursor:none;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.55));transition:filter .2s;
}
.cw-launch:hover{filter:drop-shadow(0 6px 8px rgba(0,0,0,.55)) brightness(1.08)}
.cw-launch:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.cw-bob,.cw-hop{position:absolute;inset:0;display:block}
.cw-pose{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;image-rendering:pixelated;user-select:none;-webkit-user-drag:none}
.cw-pose.on{visibility:visible}
.cw:not(.open) .cw-bob{animation:cwBob 2.8s ease-in-out infinite}
@keyframes cwBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* pixel-style hop: whole-pixel jumps, no easing in between */
.cw-hop.hop{animation:cwHop .4s steps(1,end)}
@keyframes cwHop{0%{transform:translateY(0)}20%{transform:translateY(-3px)}40%{transform:translateY(-6px)}60%{transform:translateY(-3px)}80%,100%{transform:translateY(0)}}
/* perched: standing on the panel's top edge, start side, feet ~12px over the border */
.cw-launch.perched{
  position:absolute;top:calc(-1 * (var(--ch) - 12px));inset-inline-start:14px;z-index:2;pointer-events:none;
}

/* speech bubble: Ahmad's PDF bubbles, tail tip just over the character's hat */
.cw-say{
  position:absolute;bottom:calc(var(--ch) + 2px);left:0; /* left + transform-origin set per bubble from its tail position */
  width:max-content;
}
.cw-say.measuring{visibility:hidden;animation:none}
.cw-say-open{display:block;padding:0;border:none;background:none;cursor:none;text-align:start}
.cw-say-open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cw-say-img{display:block;width:calc(var(--w) * var(--bs));height:calc(21 * var(--bs));image-rendering:pixelated}
.cw-say-x{
  position:absolute;top:calc(-2 * var(--bs));right:calc(-2 * var(--bs));
  width:calc(7 * var(--bs));height:calc(7 * var(--bs));padding:var(--bs);
  background:#fff;border:var(--bs) solid #000;cursor:none;display:flex;
}
.cw-say-x svg{width:100%;height:100%;fill:#000}
.cw-say-x:hover{background:#000}
.cw-say-x:hover svg{fill:#fff}
/* pixel pop-in: whole steps, no easing */
.cw-say.pop{animation:cwPop .24s steps(1,end)}
@keyframes cwPop{0%{transform:scale(.5)}33%{transform:scale(.8)}66%{transform:scale(1.06)}100%{transform:none}}

/* panel */
.cw-panel{
  position:absolute;left:0;bottom:0;width:min(370px,calc(100vw - 2.5rem));height:min(560px,calc(100dvh - 2.5rem - 64px - var(--ch)));
  display:flex;flex-direction:column;background:var(--cw-bg);border:1px solid var(--cw-border);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden;
  transition:opacity .25s,transform .25s,visibility 0s .25s;
}
.cw.open .cw-panel{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .25s,transform .25s}

.cw-head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;padding-inline-start:calc(14px + var(--ch) * .5314 + 12px);border-bottom:1px solid var(--cw-border);background:var(--cw-bg2)}
.cw-dot{display:none} /* the character marks the chat now */
.cw-title{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin:0}
.cw-sub{font-size:.75rem;color:var(--cw-muted);margin:0;font-weight:300;white-space:nowrap}
.cw-lang{
  margin-inline-start:auto;background:none;border:1px solid var(--cw-border);color:var(--cw-muted);
  font:inherit;font-size:.72rem;padding:.25rem .55rem;cursor:none;white-space:nowrap;transition:border-color .2s;
}
.cw-lang:hover{border-color:var(--accent)}
.cw-lang .on{color:var(--accent);font-weight:600}
.cw-lang[hidden] + .cw-x{margin-inline-start:auto}
.cw-x{margin-inline-start:.25rem;background:none;border:none;color:var(--cw-muted);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:none;transition:color .2s}
.cw-x:hover{color:var(--cw-text)}
.cw-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}

.cw-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1rem 1.25rem;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--cw-border) transparent}
.cw-log > * + *{margin-top:14px}
/* bubbles use logical sides, so Arabic (dir=rtl on the panel) mirrors sides and tails for free */
.cw-msg{
  --bub:#1f1c17;
  position:relative;max-width:80%;padding:.6rem .95rem;border-radius:18px;background:var(--bub);
  font-weight:300;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:start;
}
.cw-msg.bot{align-self:flex-start}
.cw-msg.user{--bub:var(--accent);align-self:flex-end;color:#080806;font-weight:400}
.cw-msg.err{--bub:#2a1714;color:#f0c2b8}
.cw-log > .cw-msg.cont{margin-top:3px}
/* tail: a curved nub on the bubble's own side, carved out with a second panel-coloured shape */
.cw-msg.tail.bot{border-end-start-radius:5px}
.cw-msg.tail.user{border-end-end-radius:5px}
.cw-msg.tail::before,.cw-msg.tail::after{content:'';position:absolute;bottom:0;height:18px;pointer-events:none}
.cw-msg.tail.bot::before{inset-inline-start:-7px;width:20px;background:var(--bub);border-end-end-radius:16px 14px}
.cw-msg.tail.bot::after{inset-inline-start:-26px;width:26px;background:var(--cw-bg);border-end-end-radius:10px}
.cw-msg.tail.user::before{inset-inline-end:-7px;width:20px;background:var(--bub);border-end-start-radius:16px 14px}
.cw-msg.tail.user::after{inset-inline-end:-26px;width:26px;background:var(--cw-bg);border-end-start-radius:10px}
.cw-msg a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:none}
.cw-picks{display:flex;gap:.5rem;align-self:flex-start;margin-inline-start:4px}
.cw-pick{
  background:none;border:1px solid var(--accent);color:var(--cw-text);font:inherit;font-size:.85rem;
  padding:.45rem 1.1rem;border-radius:999px;cursor:none;transition:background .2s,color .2s;
}
.cw-pick[lang=ar]{font-family:system-ui,'Segoe UI',Tahoma,sans-serif}
.cw-pick:hover,.cw-pick:focus-visible{background:var(--accent);color:#080806;outline:none}

.cw-go{
  align-self:flex-start;background:none;border:1px solid var(--accent);border-radius:999px;color:var(--accent);
  font:inherit;font-size:.72rem;font-weight:500;padding:.3rem .8rem;margin-inline-start:4px;cursor:none;
  transition:background .2s,color .2s;
}
.cw-log > .cw-go{margin-top:6px}
.cw-go::after{content:' \2192'}
.cw-panel[dir=rtl] .cw-go::after{content:' \2190'}
.cw-panel[dir=rtl] .cw-title{letter-spacing:0;font-size:.85rem}
.cw-panel[dir=rtl] .cw-send svg{transform:scaleX(-1)}
.cw-go:hover{background:var(--accent);color:#080806}

/* section highlight after the bot scrolls there (lives on page sections, outside .cw) */
.cw-flash{outline:1px solid transparent;outline-offset:-10px;animation:cwFlash 2.4s ease-out}
@keyframes cwFlash{
  0%{outline-color:rgba(200,168,122,0);box-shadow:inset 0 0 0 rgba(200,168,122,0)}
  18%{outline-color:rgba(200,168,122,.6);box-shadow:inset 0 0 80px rgba(200,168,122,.12)}
  100%{outline-color:rgba(200,168,122,0);box-shadow:inset 0 0 0 rgba(200,168,122,0)}
}

.cw-typing{display:inline-flex;gap:4px;padding:.45rem .1rem;vertical-align:middle}
.cw-typing i{width:6px;height:6px;border-radius:50%;background:var(--cw-muted);animation:cwBlink 1.2s infinite}
.cw-typing i:nth-child(2){animation-delay:.2s}
.cw-typing i:nth-child(3){animation-delay:.4s}
@keyframes cwBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}

.cw-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .75rem}
.cw-chip{background:none;border:1px solid var(--cw-border);color:var(--cw-muted);font:inherit;font-size:.75rem;padding:.35rem .7rem;cursor:none;transition:color .2s,border-color .2s}
.cw-chip:hover{color:var(--cw-text);border-color:var(--accent)}

.cw-form{display:flex;align-items:flex-end;gap:.5rem;padding:.75rem;border-top:1px solid var(--cw-border);background:var(--cw-bg2)}
.cw-input{
  flex:1;min-height:40px;max-height:120px;resize:none;background:var(--cw-bg);border:1px solid var(--cw-border);color:var(--cw-text);
  font:inherit;font-weight:300;padding:.55rem .75rem;outline:none;cursor:text;transition:border-color .2s;
}
.cw-input:focus{border-color:var(--accent)}
.cw-input::placeholder{color:var(--cw-muted)}
.cw-send{width:40px;height:40px;flex:none;border:none;background:var(--accent);color:#080806;display:flex;align-items:center;justify-content:center;cursor:none;transition:opacity .2s}
.cw-send:disabled{opacity:.4}
.cw-send svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cw-note{font-size:.65rem;color:var(--cw-muted);text-align:center;padding:0 1rem .6rem;background:var(--cw-bg2);margin:0}

/* touch devices / native cursor */
html.native-cursor .cw-launch,html.native-cursor .cw-say-open,html.native-cursor .cw-say-x,html.native-cursor .cw-x,html.native-cursor .cw-go,html.native-cursor .cw-lang,html.native-cursor .cw-pick,html.native-cursor .cw-chip,html.native-cursor .cw-send,html.native-cursor .cw-msg a{cursor:pointer!important}
html.native-cursor .cw-input{cursor:text!important}

/* step aside while the visitor types into a page form on a phone */
.cw-launch{transition:filter .2s,transform .3s}
.cw.tucked .cw-launch{transform:translateX(calc(-100% - 2rem))}

/* leave room under the site footer so its text can scroll clear of the character */
footer[role="contentinfo"]{padding-bottom:calc(2rem + 120px)}

@media (max-width:599px){
  /* 6px inset keeps him left of the page's 56px content edge */
  .cw{--ch:88px;--bs:2px;left:max(6px,env(safe-area-inset-left))}
  footer[role="contentinfo"]{padding-bottom:calc(2rem + 96px)}
}
@media (max-width:480px){
  .cw{left:max(6px,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom))}
  .cw-panel{position:fixed;inset:auto 0 0 0;width:100%;height:min(calc(100dvh - 64px - var(--ch) - 8px),620px);bottom:0;border-left:none;border-right:none;border-bottom:none}
  .cw-input{font-size:16px} /* prevents iOS zoom on focus */
}
@media (prefers-reduced-motion:reduce){
  .cw-panel,.cw-launch,.cw.tucked .cw-launch{transition:none}
  .cw:not(.open) .cw-bob,.cw-hop.hop,.cw-say.pop{animation:none}
  .cw-typing i{animation:none;opacity:.6}
  .cw-flash{animation:none;outline-color:rgba(200,168,122,.5)}
}