/* Tiago2.AI — Enerkem IT Support tab
   Brand: Enerkem green #64a70b · slate #303E47 · coral #ef6b51 */

:root {
  --green: #64a70b;
  --green-deep: #4c8106;
  --green-tint: #eef6e2;
  --slate: #303e47;
  --slate-soft: #55656f;
  --coral: #ef6b51;
  --paper: #fafbf8;
  --card: #ffffff;
  --line: #e3e8e0;
  --radius: 18px;
  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body: "Instrument Sans", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- atmosphere: soft organic field, Enerkem green breathing at the edges */
.atmosphere {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(56rem 30rem at 110% -12%, rgba(100,167,11,.14), transparent 60%),
    radial-gradient(40rem 26rem at -14% 112%, rgba(100,167,11,.10), transparent 55%),
    radial-gradient(30rem 22rem at 92% 108%, rgba(48,62,71,.06), transparent 60%);
}
.atmosphere::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .028 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shell */
.shell {
  position: relative; z-index: 1;
  height: 100dvh; max-width: 860px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: 0 clamp(14px, 4vw, 36px);
}

/* ---------- masthead */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 2px 14px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 14px;
  overflow: hidden; flex: none;
  display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(48,62,71,.12);
}
.brand-mark img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.brand-words h1 {
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.brand-words h1 .dot { color: var(--green); }
.brand-words h1 .ai { font-weight: 300; color: var(--slate-soft); }
.brand-words p {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--slate-soft); margin-top: 4px;
}
.session {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--slate-soft);
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card);
}
.pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #c9cfc6; transition: background .3s;
}
.pulse.ok { background: var(--green); box-shadow: 0 0 0 0 rgba(100,167,11,.5); animation: pulse 2.4s infinite; }
.pulse.err { background: var(--coral); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(100,167,11,.45); }
  70% { box-shadow: 0 0 0 7px rgba(100,167,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(100,167,11,0); }
}

/* ---------- thread */
.thread {
  flex: 1; overflow-y: auto; padding: 26px 2px 12px;
  scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}

/* welcome hero */
.welcome { padding: clamp(16px, 6vh, 64px) 4px 8px; animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.eyebrow {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-deep); font-weight: 600; margin-bottom: 12px;
}
.welcome h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.3rem);
  font-weight: 640; line-height: 1.02; letter-spacing: -.03em;
  margin-bottom: 26px;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font: 500 .86rem var(--font-body); color: var(--slate);
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
  transition: border-color .18s, background .18s, transform .18s;
}
.chip:hover { border-color: var(--green); background: var(--green-tint); transform: translateY(-1px); }

/* messages */
.msg {
  max-width: 78%; margin: 5px 0; padding: 11px 15px;
  border-radius: var(--radius); font-size: .93rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: break-word;
  animation: rise .35s cubic-bezier(.2,.7,.2,1) both;
}
.msg.user {
  margin-left: auto;
  background: var(--slate); color: #f4f7f2;
  border-bottom-right-radius: 6px;
}
.msg.bot {
  margin-right: auto;
  background: var(--card); border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
  box-shadow: 0 2px 10px rgba(48,62,71,.05);
}
.msg.bot::before {
  content: "Enerbot"; display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-deep); margin-bottom: 5px;
}
.msg.error {
  margin-right: auto;
  background: #fdf1ee; border: 1px solid rgba(239,107,81,.4); color: #a03a26;
  border-bottom-left-radius: 6px;
}
.msg a { color: var(--green-deep); }

/* typing indicator */
.typing { display: inline-flex; gap: 5px; padding: 15px 17px; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); opacity: .35;
  animation: blink 1.2s infinite;
}
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,100% { opacity:.25; transform: translateY(0);} 40% { opacity:1; transform: translateY(-3px);} }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- composer */
.composer { padding: 10px 0 16px; }
#chatForm {
  display: flex; align-items: flex-end; gap: 10px;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: 22px; padding: 9px 9px 9px 18px;
  transition: border-color .2s, box-shadow .2s;
}
#chatForm:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(100,167,11,.12);
}
#input {
  flex: 1; border: 0; outline: 0; resize: none; background: transparent;
  font: 400 .95rem/1.5 var(--font-body); color: var(--slate);
  max-height: 130px; padding: 6px 0;
}
#input::placeholder { color: #9aa79f; }
#sendBtn {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 14px;
  background: var(--green); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background .18s, transform .12s;
}
#sendBtn:hover { background: var(--green-deep); }
#sendBtn:active { transform: scale(.94); }
#sendBtn:disabled { background: #cdd8c2; cursor: default; }
.fineprint {
  text-align: center; font-size: .7rem; color: #9aa79f; margin-top: 9px;
}

@media (max-width: 560px) {
  .session span:last-child { display: none; }
  .msg { max-width: 90%; }
}