@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');



:root{

  color-scheme:dark;

  --bg:#10080d; --panel:#1b0e16; --panel-2:#24111c;

  --wine:#78263b; --red:#c83d56; --rose:#f09aaa;

  --gold:#e8c98b; --text:#fff2f3; --muted:#bda8b0;

  --line:rgba(240,154,170,.16); --nav-h:70px;

}

*{box-sizing:border-box}

html,body{height:100%;margin:0}

body{

  background:var(--bg);color:var(--text);

  font-family:"DM Sans",sans-serif;overflow:hidden;

}

button,input,textarea{font:inherit}

button{color:inherit}

body::before{

  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;

  background:

   radial-gradient(ellipse at 82% 12%,rgba(154,37,64,.22),transparent 42%),

   radial-gradient(ellipse at 12% 90%,rgba(112,28,58,.19),transparent 43%),

   linear-gradient(135deg,#10080d,#180b12 58%,#10080d);

}

body::after{

  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.15;

  background-image:linear-gradient(rgba(255,220,225,.035) 1px,transparent 1px),

                   linear-gradient(90deg,rgba(255,220,225,.035) 1px,transparent 1px);

  background-size:42px 42px;

}

/* A única área fora do chat: a barra de navegação do KH11. */

.navbar{

  height:var(--nav-h);position:relative;z-index:10;

  display:flex;align-items:center;justify-content:space-between;gap:20px;

  padding:0 clamp(18px,4vw,58px);

  border-bottom:1px solid var(--line);

  background:rgba(16,8,13,.88);backdrop-filter:blur(18px);

}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);min-width:0}

.brand-mark{

  width:40px;height:40px;display:grid;place-items:center;border-radius:12px;

  overflow:hidden;border:1px solid rgba(240,154,170,.42);

  background:linear-gradient(145deg,rgba(200,61,86,.24),rgba(64,17,33,.3));

  box-shadow:0 0 22px rgba(200,61,86,.12);

}

.brand-dragon{width:100%;height:100%;display:block;object-fit:cover;object-position:center}

.brand-copy{display:flex;flex-direction:column;gap:2px}

.brand-name{font:800 14px Manrope,sans-serif;letter-spacing:1.7px}

.brand-sub{font-size:9px;letter-spacing:2.1px;color:var(--rose)}

.nav-links{display:flex;align-items:center;gap:clamp(10px,1.5vw,22px)}

.nav-links a{color:var(--muted);text-decoration:none;font-size:11px;transition:color .2s;white-space:nowrap}

.nav-links a:hover,.nav-links a.active{color:var(--text)}

.nav-links a.active{position:relative}

.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-26px;height:2px;background:var(--rose);box-shadow:0 0 12px var(--red)}

.nav-links a:hover{color:#fff0f2;text-shadow:0 0 12px rgba(240,154,170,.22)}

.nav-status{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.5px;color:#e9c8d0;white-space:nowrap}

.status-dot{width:7px;height:7px;border-radius:50%;background:#8ce6ad;box-shadow:0 0 10px #8ce6ad}



/* O chat ocupa todo o espaço restante da janela. */

.app{

  height:calc(100dvh - var(--nav-h));min-height:0;

  display:grid;grid-template-columns:minmax(265px,340px) minmax(0,1fr);

}

.profile{

  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;

  justify-content:center;padding:28px 24px 24px;border-right:1px solid var(--line);

  background:linear-gradient(180deg,rgba(87,23,43,.20),rgba(18,8,14,.2));

}

.profile::before{

  content:"";position:absolute;width:280px;height:280px;border-radius:50%;

  background:rgba(177,43,70,.16);filter:blur(65px);top:18%;left:50%;transform:translateX(-50%);

}

.portrait-wrap{

  position:relative;width:min(235px,75%);aspect-ratio:4/5;border-radius:120px 120px 34px 34px;

  border:1px solid rgba(240,154,170,.38);padding:7px;

  background:linear-gradient(145deg,rgba(240,154,170,.25),rgba(96,24,44,.12));

  box-shadow:0 18px 70px rgba(0,0,0,.35),0 0 38px rgba(200,61,86,.12);

}

.portrait{

  width:100%;height:100%;display:block;object-fit:cover;object-position:center 22%;

  border-radius:115px 115px 28px 28px;background:linear-gradient(160deg,#a32c45,#260f1b);

}

.portrait-fallback{

  position:absolute;inset:7px;border-radius:115px 115px 28px 28px;

  display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;

  background:radial-gradient(circle at 50% 30%,#a83c54,#411526 58%,#1a0b13);

  color:#ffe3e8;text-align:center;

}

.portrait-fallback strong{font:800 40px Manrope}

.portrait-fallback span{font-size:10px;letter-spacing:3px}

.portrait-glint{position:absolute;inset:13px;border:1px solid rgba(255,225,229,.22);border-radius:110px 110px 23px 23px;pointer-events:none}

.profile h1{font:800 23px Manrope;margin:24px 0 5px;letter-spacing:3px}

.profile .role{font-size:10px;color:var(--rose);letter-spacing:2.5px;text-transform:uppercase}

.profile-quote{max-width:245px;text-align:center;color:#d4bfc6;font-size:13px;line-height:1.7;margin:20px 0 22px}

.profile-quote em{color:#fff0f2;font-style:normal}

.traits{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;max-width:270px}

.trait{font-size:10px;color:#e5cbd1;padding:7px 10px;border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.025)}

.trait:first-child{border-color:rgba(240,154,170,.35);color:#ffc5d0}

.profile-foot{position:absolute;bottom:20px;color:#816b74;font-size:9px;letter-spacing:1.8px}



/* Painel principal de conversa */

.chat-panel{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}

.chat-top{

  min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:15px;

  padding:14px clamp(18px,3vw,42px);border-bottom:1px solid var(--line);

  background:rgba(19,9,15,.45);

}

.chat-title{display:flex;align-items:center;gap:12px;min-width:0}

.mini-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid rgba(240,154,170,.55);background:#51192b}

.chat-title h2{font:700 14px Manrope;margin:0 0 4px;letter-spacing:.3px}

.chat-title p{margin:0;font-size:11px;color:var(--muted)}

.chat-title p span{color:#8ce6ad}

.top-actions{display:flex;gap:8px}

.icon-btn{

  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;

  background:rgba(255,255,255,.025);border:1px solid var(--line);cursor:pointer;

  color:#d8b9c2;transition:.2s;

}

.icon-btn:hover{border-color:rgba(240,154,170,.5);color:#fff;background:rgba(200,61,86,.12)}

.messages{

  flex:1;min-height:0;overflow:auto;padding:30px clamp(18px,5vw,74px) 22px;

  scroll-behavior:smooth;overscroll-behavior:contain;

}

.messages::-webkit-scrollbar{width:7px}

.messages::-webkit-scrollbar-thumb{background:#512033;border-radius:8px}

.welcome{max-width:790px;margin:0 auto 30px;animation:rise .5s ease both}

.date-label{display:flex;align-items:center;gap:12px;color:#8f737d;font-size:10px;letter-spacing:1.7px;margin-bottom:25px}

.date-label::before,.date-label::after{content:"";height:1px;flex:1;background:var(--line)}

.welcome h3{font:700 clamp(23px,3vw,34px) Manrope;line-height:1.25;margin:0 0 12px;letter-spacing:-.8px}

.welcome h3 span{color:var(--rose)}

.welcome p{color:#c5aeb7;line-height:1.75;font-size:14px;max-width:610px;margin:0}

.suggestions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:25px}

.suggestion{

  text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:15px;

  background:linear-gradient(130deg,rgba(255,255,255,.035),rgba(255,255,255,.012));

  cursor:pointer;transition:transform .2s,border-color .2s,background .2s;

}

.suggestion:hover{transform:translateY(-2px);border-color:rgba(240,154,170,.5);background:rgba(200,61,86,.08)}

.suggestion strong{display:block;font-size:12px;margin-bottom:5px;color:#f8e7eb}

.suggestion span{display:block;font-size:11px;line-height:1.5;color:#a9919a}

.message-row{display:flex;gap:12px;align-items:flex-start;max-width:820px;margin:0 auto 23px;animation:rise .25s ease both}

.message-row.user{flex-direction:row-reverse}

.msg-avatar{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:grid;place-items:center;background:#3b1424;border:1px solid rgba(240,154,170,.24);font-size:14px}

.user .msg-avatar{background:#30202a;border-color:rgba(232,201,139,.25)}

.bubble{max-width:min(78%,720px);padding:13px 16px;border-radius:4px 16px 16px 16px;background:rgba(48,20,34,.74);border:1px solid rgba(240,154,170,.11);font-size:14px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}

.user .bubble{border-radius:16px 4px 16px 16px;background:linear-gradient(135deg,#743047,#512034);border-color:rgba(240,154,170,.18)}

.bubble .sender{display:block;color:#f0a6b5;font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px}

.user .bubble .sender{color:#f0d4b5}

.typing{display:inline-flex;gap:4px;padding:4px 0}

.typing i{width:5px;height:5px;background:var(--rose);border-radius:50%;animation:pulse 1s infinite ease-in-out}

.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}

/* Efeito de escrita rápido para as respostas da DRAGON. */

.typewriter-cursor::after{

  content:"";display:inline-block;width:2px;height:1em;margin-left:3px;

  vertical-align:-2px;background:var(--rose);border-radius:2px;

  animation:cursorBlink .7s steps(2,start) infinite;

}

@keyframes cursorBlink{to{visibility:hidden}}

.composer-area{padding:12px clamp(16px,4vw,56px) 18px;background:linear-gradient(0deg,rgba(16,8,13,.98),rgba(16,8,13,.76));}

.composer{max-width:850px;margin:auto;border:1px solid rgba(240,154,170,.25);border-radius:19px;background:rgba(34,15,25,.93);padding:9px;display:flex;align-items:flex-end;gap:9px;box-shadow:0 10px 40px rgba(0,0,0,.16);transition:border-color .2s,box-shadow .2s}

.composer:focus-within{border-color:rgba(240,154,170,.65);box-shadow:0 0 0 3px rgba(200,61,86,.08),0 10px 40px rgba(0,0,0,.2)}

#messageInput{flex:1;resize:none;min-height:43px;max-height:150px;border:0;outline:0;background:transparent;color:var(--text);padding:11px 10px;line-height:1.5;font-size:14px}

#messageInput::placeholder{color:#8e737d}

.send-btn{width:43px;height:43px;flex:0 0 43px;border:0;border-radius:13px;display:grid;place-items:center;cursor:pointer;color:#2a0c16;/* background:linear-gradient(135deg,#f3b4c0,#d65c76); */box-shadow:0 4px 18px rgba(200,61,86,.2);transition:transform .18s,filter .18s}

.send-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}

.send-btn:disabled{opacity:.45;cursor:wait;transform:none}

.composer-note{text-align:center;color:#775e68;font-size:10px;margin-top:10px;letter-spacing:.2px}

.composer-note b{color:#b98b9a;font-weight:500}

.toast{position:absolute;top:88px;left:50%;transform:translate(-50%,-10px);opacity:0;pointer-events:none;padding:10px 14px;border-radius:12px;background:#301522;border:1px solid var(--line);font-size:12px;color:#f6dce2;transition:.2s;z-index:5}

.toast.show{opacity:1;transform:translate(-50%,0)}

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

@keyframes pulse{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}



@media(max-width:850px){

  :root{--nav-h:62px}

  .app{grid-template-columns:1fr}

  .profile{display:none}

  .nav-links{gap:12px;max-width:60vw;overflow-x:auto;scrollbar-width:none}

  .nav-links::-webkit-scrollbar{display:none}

  .nav-links a{font-size:10px}

  .nav-status{display:none}

  .messages{padding:24px 18px 18px}

  .chat-top{min-height:66px}

}

@media(max-width:520px){

  .navbar{padding:0 14px;gap:10px}

  .brand-mark{width:34px;height:34px}

  .brand-name{font-size:12px;letter-spacing:1px}

  .brand-sub{font-size:8px;letter-spacing:1.2px}

  .nav-links{max-width:54vw;gap:13px}

  .nav-links a{display:none}

  .nav-links a.active{display:inline-block}

  .nav-links a.active::after{bottom:-23px}

  .chat-top{padding:12px 15px}

  .suggestions{grid-template-columns:1fr}

  .welcome h3{font-size:26px}

  .welcome p{font-size:13px}

  .bubble{max-width:88%;font-size:13px;padding:11px 13px}

  .messages{padding:21px 13px 15px}

  .composer-area{padding:10px 12px 12px}

  .composer-note{font-size:9px}

}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

.icon_dc {
    width: 25px;
    height: auto;
    border-radius: 3px;
}