/* hea_simple.skin.css – unified & dark-mode ready */

/* ==================== 1) Tokens ==================== */
/* Skin-local shim: only things not in global tokens */
:root{
  --msgs-bg:  var(--surface-2);
  --chrome-bg: var(--surface);
  --input-border: color-mix(in oklab, var(--line) 85%, var(--ink));
  --btn-bg: linear-gradient(90deg, var(--brand1), var(--brand2));
  --btn-border: transparent;
  --radius: var(--radius-md);
  --chat-max-message-width: 880px;
}
@media (prefers-color-scheme: dark){
  :root{
    --input-border: color-mix(in oklab, var(--line) 65%, var(--ink));
  }
}
/* ==================== 2) Structure ==================== */
html,body{ height:100%; margin:0; display:flex; flex-direction:column; }
main{ flex:1 1 auto; display:flex; padding:1rem; width:100%; }
body[data-mode="fullpage"] main,
body[data-mode="embed"] main{ padding:0; align-items:stretch; }
#hea-chat-container{ flex:1 1 auto; display:flex; min-height:0; }

/* Transparent host page (for iframe overlay use) */
html.transparent,
body.transparent,
body.transparent main,
body.transparent #hea-chat-container{ background:transparent!important; }

/* Hide surrounding chrome when embedded via data-mode */
body[data-mode="embed"] .hea-header,
body[data-mode="embed"] footer.hea-footer,
body[data-mode="embed"] #shared-header{ display:none!important; }

/* ==================== 3) Chatbox Shell ==================== */
#hea-chat-container .chatbox{
  width:100%; min-height:0; border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  background:var(--chat-bg)!important;
  color:var(--ink);
  display:flex; flex-direction:column; overflow:hidden;
}

/* Modes */
[data-mode="popup"] #hea-chat-container .chatbox{
  min-height:560px; height:500px; max-width:420px; max-height:90vh;
}
body[data-mode="embed"] #hea-chat-container .chatbox,
body[data-mode="fullpage"] #hea-chat-container .chatbox{
  flex:1 1 auto; width:100%; min-height:100dvh; max-height:none;
  border:0; border-radius:0; box-shadow:none;   /* edge-to-edge */
}

/* Scroll pane */
#hea-chat-container .chat-messages{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  background:var(--msgs-bg)!important; -webkit-overflow-scrolling:touch;
}

/* Readability cap only in popup */
:root{ --chat-max-message-width:880px; }
[data-mode="popup"] #hea-chat-container .chat-message,
[data-mode="popup"] #hea-chat-container .user-message,
[data-mode="popup"] #hea-chat-container .bot-message,
[data-mode="popup"] #hea-chat-container .cta-wrapper{
  max-width:min(var(--chat-max-message-width),96%)!important;
}

/* ==================== 4) Header ==================== */
#hea-chat-container .chat-header{
  position:sticky; top:0; z-index:5;
  display:flex!important; align-items:center; gap:12px;
  padding:12px 16px; border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  color:#fff!important; border-bottom:1px solid rgba(0,0,0,.06);
}
#hea-chat-container .chat-header-left{ display:flex; align-items:center; gap:.75rem; flex:1 1 auto; min-width:0; }
#hea-chat-container .chat-header-right{ flex:0 0 auto; }
#hea-chat-container .chat-avatar{
  width:36px; height:36px; border-radius:50%; object-fit:cover; background:#fff; border:2px solid #fff; margin:0;
}
#hea-chat-container .chat-title{
  margin:0; font-weight:800; font-size:1.05rem; line-height:1.2;
  color:#fff!important; text-shadow:0 1px 0 rgba(0,0,0,.12);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}

/* ==================== 5) Bubbles ==================== */
#hea-chat-container :where(.msg,.message){ border:none!important; box-shadow:none!important; }

#hea-chat-container .bot-message,
#hea-chat-container :where(.msg,.message).agent{
  background:var(--agent-bubble)!important; color:var(--agent-text)!important; border-radius:8px;
}

#hea-chat-container .user-message,
#hea-chat-container :where(.msg,.message).you{
  background:var(--user-bubble)!important; color:var(--user-text)!important; border-radius:8px; align-self:flex-end;
}

/* Bubble polish (no new tokens, better contrast) */
.chat-message{
  display:inline-block; max-width:92%;
  padding:8px 12px; border-radius:12px;
  line-height:1.35; font-size:.95rem;
  box-shadow:var(--shadow-md);
}
.user-message{ margin:6px 0 6px auto; border:1px solid rgba(0,0,0,.03); }
.bot-message { margin:6px 0;              border:1px solid rgba(0,0,0,.03); }

:root.dark .user-message{ border-color:rgba(255,255,255,.12); }
:root.dark .bot-message { border-color:rgba(255,255,255,.10); }

/* ==================== 6) Input Row ==================== */
#hea-chat-container .chat-input-area{
  position:sticky; bottom:0; z-index:5;
  display:flex; gap:.5rem; padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--chrome-bg); border-top:1px solid var(--input-border);
  border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius);
}

#hea-chat-container #user-input{
  flex:1; min-height:44px; font-size:16px;
  background:var(--chat-bg); color:var(--ink);
  border:1px solid var(--line); border-radius:10px;
  padding:.6rem .75rem; caret-color:currentColor;
  outline:none; box-shadow:0 0 0 0 var(--ring);
}
#hea-chat-container #user-input::placeholder{ color: color-mix(in oklab, var(--muted) 75%, var(--ink)); }
#hea-chat-container #user-input:focus{
  border-color: color-mix(in oklab, var(--brand1) 50%, var(--line));
  box-shadow:0 0 0 3px var(--ring);
}

#hea-chat-container #send-button,
#hea-chat-container button[id*="send"]{
  height:44px; padding:0 14px;
  background:var(--btn-bg)!important; border:1px solid var(--btn-border)!important;
  color:#fff!important; border-radius:10px; cursor:pointer; transition:opacity .2s ease;
}
#hea-chat-container #send-button:hover{ opacity:.95; }

/* ==================== 7) Modes & Variants ==================== */
/* Remove message width cap in embed/fullpage */
body[data-mode="embed"] #hea-chat-container .chat-message,
body[data-mode="embed"] #hea-chat-container .user-message,
body[data-mode="embed"] #hea-chat-container .bot-message,
body[data-mode="embed"] #hea-chat-container .cta-wrapper,
body[data-mode="fullpage"] #hea-chat-container .chat-message,
body[data-mode="fullpage"] #hea-chat-container .user-message,
body[data-mode="fullpage"] #hea-chat-container .bot-message,
body[data-mode="fullpage"] #hea-chat-container .cta-wrapper{
  max-width:100%!important;
}

/* Chromeless variant */
.chromeless #hea-chat-container .chat-header{ display:none!important; }

/* Chat-only fills viewport */
body.chat-only, body.chromeless-mobile{ margin:0; padding:0; background:var(--chat-bg); }
body.chat-only main, body.chromeless-mobile main{
  position:fixed; inset:0; padding:0!important; height:100svh; height:100dvh;
  display:flex; flex-direction:column; overscroll-behavior:contain;
}
body.chat-only #hea-chat-container, body.chromeless-mobile #hea-chat-container{ flex:1 1 auto; min-height:0; max-width:none; width:100%; }
body.chat-only #hea-chat-container .chatbox, body.chromeless-mobile #hea-chat-container .chatbox{
  border:0!important; border-radius:0!important; box-shadow:none!important; min-height:100%;
}

/* Transparent overlay tweaks */
body.transparent #hea-chat-container .chatbox{ background:transparent!important; border:0; box-shadow:none; }
body.transparent #hea-chat-container .chat-messages{ background:transparent!important; }
body.transparent #hea-chat-container .chat-input-area{ background:transparent!important; border-top:none!important; }
body.transparent #hea-chat-container #user-input{
  background:rgba(255,255,255,.08)!important; color:#fff!important; border:1px solid rgba(255,255,255,.2);
}
body.transparent:not(.dark) #hea-chat-container .chat-input-area{
  background:rgba(255,255,255,.85)!important; border-top:1px solid rgba(0,0,0,.08)!important;
}
body.transparent:not(.dark) #hea-chat-container #user-input{
  background:rgba(255,255,255,.95)!important; color:#0b1022!important; border:1px solid rgba(0,0,0,.15)!important;
}

/* ==================== 8) Mobile ==================== */
@media (max-width:768px){
  main{ padding:.5rem; }
  #hea-chat-container .chat-header{ padding:10px 12px; gap:10px; }
  #hea-chat-container .chat-title{ font-size:.98rem; }
}

/* ==================== 9) Safety (min-widths) ==================== */
#hea-chat-container{ min-height:0; }
#ea-chat-container .chatbox{ min-height:0; } /* (typo guard: non-breaking if selector missing) */
#hea-chat-container .chat-header > *{ min-width:0; }
#hea-chat-container .chat-title{ white-space:normal; overflow-wrap:anywhere; }

/* ==================== 10) Dark polish (extra) ==================== */
:root.dark body #hea-chat-container .chatbox{ border-color:rgba(255,255,255,.12); box-shadow:var(--shadow-lg); }
:root.dark body #hea-chat-container .chat-input-area{ background:var(--chrome-bg); border-top:1px solid rgba(255,255,255,.12); }
:root.dark body #hea-chat-container #user-input{
  background:rgba(255,255,255,.06); color:#eaf0ff; border:1px solid rgba(255,255,255,.18);
}
:root.dark body #hea-chat-container #user-input::placeholder{ color:rgba(238,243,255,.7); }