/* Kai — a quiet, readable AI conversation layer for Khang's portfolio. */
.kai-launcher,
.kai-panel{
  --kai-ink:#203653;
  --kai-muted:#687b94;
  --kai-accent:var(--accent,#315bf4);
  --kai-line:#dce5f1;
  font-family:var(--font,'Be Vietnam Pro',Arial,sans-serif);
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.kai-panel *,
.kai-panel *:before,
.kai-panel *:after,
.kai-launcher *{box-sizing:border-box}
.kai-launcher[hidden],
.kai-panel[hidden],
.kai-panel [hidden]{display:none!important}
.kai-panel .sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.kai-launcher:focus-visible,
.kai-panel button:focus-visible,
.kai-panel a:focus-visible{
  outline:3px solid #7797f7;
  outline-offset:3px;
}
/* The launcher communicates a real assistant, without an invented presence status. */
.kai-launcher{
  position:fixed;
  right:28px;
  bottom:26px;
  z-index:80;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:66px;
  max-width:calc(100vw - 32px);
  padding:12px 16px 12px 12px;
  border:1px solid #344e79;
  border-radius:17px;
  color:#fff;
  background:linear-gradient(120deg,#233b61,#172b49);
  box-shadow:0 10px 30px #172f4938,0 2px 6px #172f491a;
  text-align:left;
  cursor:pointer;
  transition:transform .25s var(--ease,cubic-bezier(.2,.75,.25,1)),box-shadow .25s,border-color .25s,background .25s;
}
.kai-launcher:hover{
  transform:translateY(-3px);
  border-color:#6a89b6;
  box-shadow:0 15px 34px #172f4942,0 3px 8px #172f491a;
}
.kai-launcher[aria-expanded=true]{
  border-color:#6584b2;
  background:linear-gradient(120deg,#29466f,#1d3454);
}
.kai-orb{
  display:grid;
  place-items:center;
  flex:none;
  width:40px;
  height:40px;
  padding:9px;
  border:1px solid #86a2ff55;
  border-radius:12px;
  color:#e9efff;
  background:linear-gradient(145deg,#6083f6,#365cd4);
  box-shadow:0 4px 11px #0b1d3d24;
}
.kai-orb svg{display:block;width:100%;height:100%;max-width:100%}
.kai-launcher-copy{display:block;min-width:0}
.kai-launcher-copy strong{
  display:block;
  margin:0;
  color:#f4f7ff;
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.015em;
}
.kai-launcher-copy>span{display:block;margin-top:2px;color:#b4c7e6;font-size:12px;font-weight:400;line-height:1.5}
.kai-launcher-arrow{display:grid;place-items:center;flex:none;width:18px;height:18px;margin-left:5px;color:#b4c9ed}
.kai-launcher-arrow svg{width:18px;height:18px}
/* A nonmodal panel: the message area takes available room, composer stays reachable. */
.kai-panel{
  position:fixed;
  right:28px;
  bottom:104px;
  z-index:81;
  display:flex;
  flex-direction:column;
  width:410px;
  max-width:calc(100vw - 40px);
  height:min(660px,calc(100dvh - 120px));
  max-height:calc(100dvh - 120px);
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  border:1px solid #d2deef;
  border-radius:20px;
  background:#fff;
  color:var(--kai-ink);
  box-shadow:0 24px 70px #172b4a2b,0 4px 18px #172b4a12;
  opacity:1;
  transform-origin:bottom right;
}
.kai-panel:not([hidden]){animation:kai-panel-enter .24s var(--ease,cubic-bezier(.2,.75,.25,1)) both}
.kai-panel.is-closing{animation:kai-panel-exit .16s ease both;pointer-events:none}
.kai-header{
  display:flex;
  align-items:center;
  gap:11px;
  flex:none;
  padding:17px 15px 17px 18px;
  border-bottom:1px solid #e2e9f3;
  background:linear-gradient(105deg,#fff,#f7f9fd);
}
.kai-header .kai-orb{
  width:40px;
  height:40px;
  border-color:#d8e3fb;
  color:#4c71d3;
  background:linear-gradient(145deg,#edf3ff,#e4ecfd);
  box-shadow:none;
}
.kai-heading{min-width:0;flex:1}
.kai-heading h2{margin:0;font-size:17px;font-weight:700;line-height:1.4;letter-spacing:-.02em;color:#243b5a}
.kai-heading p{margin:2px 0 0;color:#60728c;font-size:12px;font-weight:400;line-height:1.55}
.kai-header-actions{display:flex;align-items:center;gap:0;flex:none;margin-left:0}
.kai-header-actions button{
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  min-height:44px;
  padding:10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#8191a8;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.kai-header-actions button:hover{background:#edf2f9;color:#3d587c}
.kai-header-actions button:disabled{opacity:.45;cursor:default}
.kai-header-actions .icon,
.kai-header-actions svg{width:18px;height:18px}
.kai-messages{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  padding:22px 20px 18px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#bac9df transparent;
  background:linear-gradient(180deg,#f8fafe,#f5f8fc);
}
.kai-messages::-webkit-scrollbar{width:6px}
.kai-messages::-webkit-scrollbar-thumb{border-radius:8px;background:#bac9df}
.kai-messages::-webkit-scrollbar-track{background:transparent}
.kai-welcome{padding:2px 1px 12px}
.kai-welcome-symbol{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin-bottom:15px;
  border:1px solid #d8e3fb;
  border-radius:14px;
  color:#6682d7;
  background:linear-gradient(140deg,#e8efff,#f1f5ff);
  font-size:25px;
  line-height:1;
}
.kai-welcome-symbol svg{width:25px;height:25px}
.kai-welcome h3{margin:0;color:#2a4265;font-size:23px;font-weight:600;line-height:1.3;letter-spacing:-.025em}
.kai-welcome>p{margin:10px 0 0;max-width:330px;color:#5e718d;font-size:15px;line-height:1.7}
.kai-prompts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:21px}
.kai-prompt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  min-height:46px;
  width:100%;
  padding:11px 13px;
  border:1px solid #dce6f4;
  border-radius:9px;
  background:#fff;
  color:#516c94;
  text-align:left;
  font:500 14px/1.55 var(--font,'Be Vietnam Pro',Arial,sans-serif);
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s,transform .2s;
}
.kai-prompt .icon{flex:none;width:16px;height:16px;color:#6f87ae}
.kai-heading h2>span{display:inline-block;margin-left:5px;padding:2px 5px;border:1px solid #d4e0f5;border-radius:5px;background:#edf3ff;color:#4265bb;font-size:10px;line-height:1.3;vertical-align:2px;letter-spacing:.04em}
.kai-prompt:hover{border-color:#a6bde9;background:#f4f7ff;color:#365c9c;transform:translateX(2px)}
.kai-prompt:disabled{opacity:.55;cursor:default;transform:none}
/* Message typography supports the safe paragraphs, lists and inline formatting renderer. */
.kai-message{min-width:0;margin:0 0 20px}
.kai-message:last-child{margin-bottom:3px}
.kai-message-author{margin:0 0 6px;color:#7b8da8;font-size:12px;font-weight:500;line-height:1.5}
.kai-message[data-source="portfolio"] .kai-message-author{color:#546c96}
.kai-message[data-source="portfolio"] .kai-message-body{border-color:#cbd8ec;background:#f0f5fc}
.kai-message-body{
  min-width:0;
  max-width:100%;
  padding:13px 15px;
  border:1px solid #e0e8f3;
  border-radius:4px 13px 13px 13px;
  background:#fff;
  color:#485e7d;
  font-size:16px;
  line-height:1.7;
  overflow-wrap:anywhere;
  word-break:normal;
}
.kai-message-body p{margin:0;white-space:pre-wrap}
.kai-message-body p+p{margin-top:10px}
.kai-message-body strong{font-weight:600;color:#2f496e}
.kai-message-body em{font-style:italic}
.kai-message-body a{color:#416bc7;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.kai-message-body a:hover{color:#254da9}
.kai-message-body ul,
.kai-message-body ol{margin:10px 0;padding-left:21px}
.kai-message-body li{padding-left:2px}
.kai-message-body li+li{margin-top:6px}
.kai-message-body li::marker{color:#7990b5}
.kai-message-body :first-child{margin-top:0}
.kai-message-body :last-child{margin-bottom:0}
.kai-message-body code{padding:2px 5px;border-radius:4px;background:#eef3fa;color:#4a6591;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.86em;overflow-wrap:anywhere}
.kai-message-body pre{max-width:100%;margin:12px 0;padding:12px;border:1px solid #dce6f4;border-radius:7px;background:#f4f7fc;overflow:auto;white-space:pre;font-size:13px;line-height:1.65}
.kai-message-body pre code{padding:0;background:none;white-space:pre;font-size:inherit}
.kai-message--assistant{margin-right:10px}
.kai-message--user{margin-left:31px}
.kai-message--user .kai-message-author{text-align:right}
.kai-message--user .kai-message-body{border-color:#4268df;border-radius:13px 4px 13px 13px;background:#375fd6;color:#f3f6ff}
.kai-message--user .kai-message-body strong,
.kai-message--user .kai-message-body a{color:#fff}
.kai-message--user .kai-message-body li::marker{color:#c2d2ff}
.kai-message--user .kai-message-body code{background:#ffffff1c;color:#f4f7ff}
.kai-message--pending .kai-message-body{display:flex;align-items:center;gap:10px;min-height:50px;padding-block:13px}
.kai-typing{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:12px}
.kai-typing i{display:block;width:5px;height:5px;border-radius:50%;background:#8aa2d0;opacity:.6;animation:kai-typing-dot 1.3s ease-in-out infinite}
.kai-typing i:nth-child(2){animation-delay:.15s}
.kai-typing i:nth-child(3){animation-delay:.3s}
.kai-wait-label{color:#5f7495;font-size:13px;line-height:1.5}
.kai-message--pending{display:flex;align-items:center;gap:10px;padding:8px 0}
.kai-error{display:flex;align-items:center;gap:13px;flex:none;padding:10px 16px;border-top:1px solid #d6e1f1;background:#eff4fb}
.kai-error p{flex:1;min-width:0;margin:0;color:#52698d;font-size:13px;line-height:1.65;overflow-wrap:anywhere}
.kai-error button{flex:none;min-height:44px;min-width:58px;padding:9px 11px;border:1px solid #c8d6eb;border-radius:7px;background:#fff;color:#395d94;font:500 13px/1.5 var(--font,'Be Vietnam Pro',Arial,sans-serif);cursor:pointer;transition:background .2s,border-color .2s}
.kai-error button:hover{background:#e8f0fc;border-color:#9eb5d9}
.kai-error button:disabled{opacity:.5;cursor:default}
/* The textarea stays at 16px to avoid focus zoom on mobile. */
.kai-form{flex:none;min-width:0;margin:0;padding:13px 16px 9px;border-top:1px solid #e1e8f2;background:#fff}
.kai-compose{display:flex;align-items:flex-end;gap:8px;min-width:0;padding:5px 5px 5px 13px;border:1px solid #cedced;border-radius:12px;background:#fafcfe;transition:border-color .2s,box-shadow .2s,background .2s}
.kai-compose:focus-within{border-color:#8aa7ed;background:#fff;box-shadow:0 0 0 3px #315bf40d}
.kai-compose textarea{
  display:block;
  flex:1;
  min-width:0;
  width:100%;
  height:44px;
  min-height:44px;
  max-height:124px;
  margin:0;
  padding:10px 0;
  border:0;
  outline:0;
  border-radius:0;
  background:transparent;
  color:#365071;
  font:400 16px/24px var(--font,'Be Vietnam Pro',Arial,sans-serif);
  resize:none;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#c3cfe1 transparent;
  -webkit-appearance:none;
}
.kai-compose textarea::placeholder{color:#71829a;opacity:1}
.kai-compose textarea:disabled{opacity:.65}
#kai-send{display:grid;place-items:center;flex:none;width:44px;min-height:44px;padding:11px;border:1px solid #4167db;border-radius:8px;background:#3b64dc;color:#fff;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s}
#kai-send .icon,
#kai-send svg{width:20px;height:20px}
#kai-send:not(:disabled):hover{border-color:#244cb8;background:#3158c8;box-shadow:0 4px 10px #315bf420}
#kai-send:disabled{border-color:#e7edf5;background:#eaf0f8;color:#a3b3cd;box-shadow:none;cursor:default}
.kai-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:none;padding:8px 1px 0;background:#fff;color:#657892;font-size:11px;line-height:1.6}
#kai-note{min-width:0}
#kai-count{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums;color:#73849e}
/* Hide the whole layer while the site's native project dialog owns focus. */
.kai-hidden-for-dialog .kai-launcher,
.kai-hidden-for-dialog .kai-panel,
.kai-launcher.kai-hidden-for-dialog,
.kai-panel.kai-hidden-for-dialog{visibility:hidden!important;opacity:0!important;pointer-events:none!important;animation:none!important}
@keyframes kai-panel-enter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes kai-panel-exit{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(8px) scale(.99)}}
@keyframes kai-typing-dot{0%,70%,100%{opacity:.4;transform:translateY(0)}35%{opacity:1;transform:translateY(-2px)}}
@media(max-width:600px){
  .kai-launcher{right:16px;bottom:max(16px,env(safe-area-inset-bottom,0px));min-height:48px;gap:8px;padding:7px 11px 7px 7px;border-radius:14px}
  .kai-launcher .kai-orb{width:32px;height:32px;padding:7px;border-radius:9px}
  .kai-launcher-copy strong{font-size:14px}.kai-launcher-copy>span,.kai-launcher-arrow{display:none}
  .kai-panel{left:12px;right:12px;bottom:96px;width:auto;max-width:none;height:min(660px,calc(100dvh - 112px));max-height:calc(100dvh - 112px);border-radius:17px}
  .kai-header{padding:13px 11px 13px 15px;gap:9px}.kai-header .kai-orb{width:38px;height:38px;padding:8px;border-radius:11px}.kai-heading h2{font-size:17px}.kai-heading p{font-size:12px}.kai-header-actions{gap:0}.kai-header-actions button{width:44px;min-height:44px;padding:11px}
  .kai-messages{padding:18px 16px 16px}.kai-welcome{padding:1px 0 10px}.kai-welcome-symbol{width:39px;height:39px;margin-bottom:12px;border-radius:12px;font-size:23px}.kai-welcome-symbol svg{width:23px;height:23px}.kai-welcome h3{font-size:21px;line-height:1.3}.kai-welcome>p{margin-top:8px;font-size:15px;line-height:1.65}.kai-prompts{gap:7px;margin-top:17px}.kai-prompt{font-size:14px;line-height:1.5;min-height:44px;padding:10px 12px}
  .kai-message{margin-bottom:18px}.kai-message--assistant{margin-right:5px}.kai-message--user{margin-left:24px}.kai-message-body{padding:12px 13px;font-size:16px;line-height:1.7}.kai-message-author{font-size:12px}.kai-error{padding:9px 13px;gap:10px}.kai-error p{font-size:13px}
  .kai-form{padding:11px 12px 12px}.kai-compose{padding-left:11px}.kai-compose textarea{font-size:16px;max-height:112px}.kai-footer{padding:8px 1px 0;gap:10px;font-size:11px;line-height:1.5}
}
@media(max-width:360px){
  .kai-header{padding-left:13px;gap:8px}.kai-header .kai-orb{width:34px;height:34px;padding:7px;border-radius:10px}.kai-heading h2{font-size:16px}.kai-heading p{font-size:12px;line-height:1.45}.kai-messages{padding-inline:13px}.kai-welcome h3{font-size:20px}.kai-prompt{padding-inline:11px}.kai-message--user{margin-left:18px}.kai-message-body{padding-inline:12px}.kai-footer{gap:7px;font-size:12px}
}
@media(max-height:520px){
  .kai-panel{bottom:87px;height:calc(100dvh - 99px);max-height:calc(100dvh - 99px)}
  .kai-header{padding-top:8px;padding-bottom:8px}.kai-messages{padding-block:14px}.kai-welcome-symbol{display:none}.kai-form{padding-top:8px;padding-bottom:6px}.kai-compose textarea{max-height:76px}.kai-footer{padding-bottom:8px}
}
:root[data-motion=off] .kai-launcher,
:root[data-motion=off] .kai-launcher *,
:root[data-motion=off] .kai-panel,
:root[data-motion=off] .kai-panel *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
:root[data-motion=off] .kai-launcher:hover,
:root[data-motion=off] .kai-prompt:hover{transform:none}
@media(prefers-reduced-motion:reduce){
  .kai-launcher,.kai-launcher *, .kai-panel,.kai-panel *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .kai-launcher:hover,.kai-prompt:hover{transform:none}
}