:root{
  --bg:#04060a; --bg2:#070d15; --panel:#080e17; --panel2:#0b131f;
  --line:rgba(34,211,238,.16); --line2:rgba(34,211,238,.32);
  --cyan:#22d3ee; --cyan2:#7de9ff; --gold:#f5c451; --gold2:#ffe9a8;
  --text:#cddae6; --muted:#7f96a9; --dim:#5a6f80; --danger:#ff5570; --ok:#38e8a8;
  --mono:ui-monospace,"JetBrains Mono","Cascadia Code","SF Mono",Consolas,"Liberation Mono",monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--mono);
  font-size:14px; -webkit-font-smoothing:antialiased; overflow:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9;
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 110%, rgba(245,196,81,.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:screen;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:10;
  box-shadow:inset 0 0 220px 60px rgba(0,0,0,.85);
}
button{font-family:var(--mono); cursor:pointer}
input,textarea{font-family:var(--mono); color:var(--text)}
::selection{background:rgba(34,211,238,.28)}

/* ---------- reactor ---------- */
.reactor{position:relative; display:grid; place-items:center}
.reactor .ring{position:absolute; border-radius:50%; border:1px solid var(--line2)}
.reactor .ring.r1{inset:0; border-style:dashed; animation:spin 26s linear infinite; border-color:rgba(34,211,238,.35)}
.reactor .ring.r2{inset:12%; border-color:rgba(245,196,81,.45); animation:spin 18s linear infinite reverse}
.reactor .ring.r3{inset:24%; border-color:rgba(34,211,238,.22); animation:spin 40s linear infinite}
.reactor .core{
  width:38%; height:38%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #f2feff 0%, #9df3ff 22%, #22d3ee 48%, rgba(34,211,238,.15) 72%, transparent 78%);
  box-shadow:0 0 24px rgba(34,211,238,.75), 0 0 70px rgba(34,211,238,.35), inset 0 0 18px #fff;
  animation:pulse 3.4s ease-in-out infinite;
}
.reactor.big{width:150px;height:150px;margin:0 auto 20px}
.logo-lg{width:min(258px,72vw);height:auto;display:block;margin:0 auto 14px;filter:drop-shadow(0 0 22px rgba(34,211,238,.22))}
.logo-sm{height:27px;width:auto;display:block;filter:drop-shadow(0 0 10px rgba(34,211,238,.28))}
.reactor.small{width:34px;height:34px}
.reactor.small .core{box-shadow:0 0 10px rgba(34,211,238,.7), 0 0 22px rgba(34,211,238,.3)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.06);opacity:1}}

/* ---------- gate / login ---------- */
.gate{
  position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:24px; text-align:center; overflow:auto; z-index:20;
}
.gate-grid{
  position:absolute; inset:-20%; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(34,211,238,.07) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(34,211,238,.07) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 68%);
}
.brand-title{margin:0; font-size:38px; letter-spacing:.36em; font-weight:600; color:#eaf7ff; text-indent:.36em}
.brand-title span{color:var(--gold)}
.brand-sub{margin:6px 0 30px; font-size:10.5px; letter-spacing:.34em; color:var(--muted)}
.login{width:min(400px,92vw); display:flex; flex-direction:column; gap:14px; text-align:left}
.login label{display:flex; flex-direction:column; gap:7px; font-size:10px; letter-spacing:.22em; color:var(--muted)}
.login input{
  background:rgba(8,14,23,.85); border:1px solid var(--line); padding:13px 14px; font-size:14px;
  letter-spacing:.06em; outline:none; transition:border-color .18s, box-shadow .18s;
}
.login input:focus{border-color:var(--cyan); box-shadow:0 0 0 1px rgba(34,211,238,.25), 0 0 22px rgba(34,211,238,.18)}
.login button{
  margin-top:6px; padding:14px; border:1px solid var(--line2); background:linear-gradient(180deg, rgba(34,211,238,.16), rgba(34,211,238,.05));
  color:#dffaff; letter-spacing:.28em; font-size:11.5px; transition:.18s;
}
.login button:hover{background:linear-gradient(180deg, rgba(34,211,238,.28), rgba(34,211,238,.10)); border-color:var(--cyan); box-shadow:0 0 26px rgba(34,211,238,.28)}
.login button:disabled{opacity:.45; cursor:default}
.err{margin:2px 0 0; color:var(--danger); font-size:12px; letter-spacing:.04em}
.gate-foot{margin-top:34px; font-size:9.5px; letter-spacing:.28em; color:var(--dim)}

/* ---------- shell ---------- */
.app{height:100%; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; gap:22px; padding:0 20px; height:58px; flex:0 0 auto;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(8,14,23,.96), rgba(6,10,17,.86));
  backdrop-filter:blur(8px);
}
.brand{display:flex; align-items:center; gap:11px}
.brand-name{font-size:13px; letter-spacing:.3em; color:#e8f7ff}
.brand-name span{color:var(--gold)}
.nav{display:flex; gap:2px; margin-left:6px}
.nav button{
  background:transparent; border:1px solid transparent; color:var(--muted);
  padding:8px 14px; font-size:10px; letter-spacing:.24em; transition:.15s;
}
.nav button:hover{color:var(--cyan2)}
.nav button.on{color:#dffaff; border-color:var(--line2); background:rgba(34,211,238,.08); box-shadow:inset 0 -2px 0 var(--cyan)}
.top-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.pill{display:inline-flex; align-items:center; gap:8px; font-size:9.5px; letter-spacing:.22em; color:var(--muted); border:1px solid var(--line); padding:6px 10px}
.pill i{width:6px; height:6px; border-radius:50%; background:var(--dim); box-shadow:0 0 8px currentColor}
.pill.on{color:var(--ok); border-color:rgba(56,232,168,.35)}
.pill.on i{background:var(--ok); animation:blink 2s ease-in-out infinite}
.pill.off{color:var(--danger); border-color:rgba(255,85,112,.4)}
.pill.off i{background:var(--danger)}
@keyframes blink{50%{opacity:.35}}
.who{font-size:10px; letter-spacing:.2em; color:var(--dim)}
.ghost{background:transparent; border:1px solid var(--line); color:var(--muted); padding:7px 12px; font-size:9.5px; letter-spacing:.2em; transition:.15s}
.ghost:hover{color:var(--danger); border-color:rgba(255,85,112,.45)}

main{flex:1 1 auto; min-height:0; position:relative}
.view{height:100%; display:flex; flex-direction:column; min-height:0}
.view[hidden]{display:none}

/* ---------- terminal ---------- */
.term-bar{
  display:flex; align-items:center; gap:16px; padding:10px 18px; border-bottom:1px solid var(--line);
  background:rgba(7,12,19,.7); flex:0 0 auto; flex-wrap:wrap;
}
.term-id{display:flex; align-items:center; gap:9px; min-width:0; flex:1 1 260px}
.term-id .k{font-size:9px; letter-spacing:.24em; color:var(--dim)}
.title-input{
  background:transparent; border:none; border-bottom:1px dashed transparent; outline:none;
  font-size:13px; letter-spacing:.02em; color:#e6f4ff; width:100%; padding:3px 2px; min-width:80px;
}
.title-input:hover{border-bottom-color:var(--line)}
.title-input:focus{border-bottom-color:var(--cyan)}
.term-meta{display:flex; align-items:center; gap:10px; font-size:9.5px; letter-spacing:.16em; color:var(--muted); flex-wrap:wrap}
.term-meta b{color:#b9e9f7; font-weight:500}
.term-meta .dot{color:var(--dim)}
.chip{background:rgba(34,211,238,.06); border:1px solid var(--line); color:#a9e6f5; padding:5px 9px; font-size:9px; letter-spacing:.16em; transition:.15s}
.chip:hover{border-color:var(--cyan); color:#e6fbff}
.chip.alt{background:rgba(245,196,81,.07); border-color:rgba(245,196,81,.3); color:var(--gold2)}
.chip.alt:hover{border-color:var(--gold); box-shadow:0 0 18px rgba(245,196,81,.18)}

.log{
  flex:1 1 auto; overflow-y:auto; padding:26px 22px 34px; scroll-behavior:smooth; outline:none;
  max-width:1080px; width:100%; margin:0 auto;
}
.log::-webkit-scrollbar,.rows::-webkit-scrollbar{width:9px}
.log::-webkit-scrollbar-thumb,.rows::-webkit-scrollbar-thumb{background:rgba(34,211,238,.18); border:2px solid transparent; background-clip:content-box}
.log::-webkit-scrollbar-track{background:transparent}

.msg{margin:0 0 22px; animation:fade .22s ease-out}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.msg .txt{white-space:pre-wrap; word-break:break-word}
.msg .who{font-size:9px; letter-spacing:.3em; color:var(--dim); margin-bottom:6px}
.msg.user .line{display:flex; gap:10px}
.msg.user .sig{color:var(--cyan); flex:0 0 auto; user-select:none}
.msg.user .txt{color:#eaf6ff; white-space:pre-wrap; word-break:break-word; line-height:1.65}
.msg.ai .who{color:var(--gold); opacity:.85}
.msg.ai .txt{
  color:#bdcfdd; white-space:pre-wrap; word-break:break-word; line-height:1.72;
  border-left:1px solid rgba(245,196,81,.22); padding-left:14px;
}
.msg.ai .txt strong{color:#eaf6ff; font-weight:600}
.msg.ai .txt code{background:rgba(34,211,238,.10); color:#b7f1ff; padding:1px 5px; border-radius:2px; font-size:12.5px}
.msg.ai .txt pre.code{
  background:rgba(4,9,14,.9); border:1px solid var(--line); border-left:2px solid var(--cyan);
  padding:12px 14px; overflow-x:auto; margin:12px 0; font-size:12.5px; line-height:1.6; color:#c9e9f5;
}
.msg.ai .txt .h{color:var(--gold2); letter-spacing:.1em}
.msg.sys .txt{color:var(--dim); font-size:11.5px; letter-spacing:.08em}
.msg.err .txt{color:var(--danger)}

.think{
  margin:0 0 10px; border-left:1px solid var(--dim); padding:2px 0 2px 12px;
  color:#4b6072; font-size:11.5px; line-height:1.55; white-space:pre-wrap; max-height:150px; overflow:hidden;
  transition:max-height .3s;
}
.think.open{max-height:none}
.think summary{display:block; cursor:pointer; color:var(--dim); font-size:9px; letter-spacing:.24em; list-style:none; margin-bottom:4px}
.caret::after{content:"▋"; color:var(--cyan); margin-left:2px; animation:blink 1s steps(2) infinite}

.composer{
  flex:0 0 auto; display:flex; align-items:flex-end; gap:12px; padding:12px 18px;
  border-top:1px solid var(--line); background:rgba(6,10,17,.92); max-width:1080px; width:100%; margin:0 auto;
}
.prompt{color:var(--gold); font-size:12px; letter-spacing:.06em; padding-bottom:14px; white-space:nowrap; user-select:none}
#input{
  flex:1 1 auto; resize:none; background:rgba(9,15,24,.92); border:1px solid var(--line);
  padding:12px; font-size:13.5px; line-height:1.5; outline:none; min-height:46px; max-height:180px;
  transition:border-color .15s, box-shadow .15s;
}
#input:focus{border-color:var(--cyan); box-shadow:0 0 0 1px rgba(34,211,238,.18), 0 0 20px rgba(34,211,238,.12)}
.run{
  background:linear-gradient(180deg, rgba(34,211,238,.22), rgba(34,211,238,.06)); border:1px solid var(--line2);
  color:#e2fbff; padding:0 20px; min-height:46px; display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; letter-spacing:.22em; transition:.15s; white-space:nowrap;
}
.run:hover{border-color:var(--cyan); box-shadow:0 0 22px rgba(34,211,238,.3)}
.stop{background:rgba(255,85,112,.1); border:1px solid rgba(255,85,112,.5); color:#ffb3c0; padding:0 20px; min-height:46px; display:inline-flex; align-items:center; font-size:10px; letter-spacing:.22em}
.term-foot{display:flex; justify-content:space-between; padding:0 20px 10px; font-size:9px; letter-spacing:.14em; color:var(--dim); max-width:1080px; width:100%; margin:0 auto}

/* ---------- projects / history ---------- */
.view-head{display:flex; align-items:center; gap:16px; padding:18px 22px 12px; border-bottom:1px solid var(--line)}
.view-head h2{margin:0; font-size:11px; letter-spacing:.32em; color:#cfeeff; font-weight:500}
.view-head .chip{margin-left:auto}
.search{
  background:rgba(9,15,24,.9); border:1px solid var(--line); padding:9px 12px; font-size:12px; outline:none; min-width:220px;
}
.search:focus{border-color:var(--cyan)}
.cards{padding:22px; display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); overflow-y:auto}
.card{
  position:relative; border:1px solid var(--line); background:linear-gradient(180deg, rgba(10,17,27,.9), rgba(7,12,19,.9));
  padding:18px; transition:.18s; overflow:hidden;
}
.card::before,.card::after{content:""; position:absolute; width:12px; height:12px; border:1px solid var(--cyan); opacity:.5}
.card::before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.card::after{bottom:-1px; right:-1px; border-left:0; border-top:0}
.card:hover{border-color:var(--line2); box-shadow:0 0 30px rgba(34,211,238,.10); transform:translateY(-1px)}
.card h3{margin:0 0 8px; font-size:14px; letter-spacing:.04em; color:#e8f6ff; font-weight:500}
.card .desc{color:var(--muted); font-size:11.5px; line-height:1.6; min-height:34px; max-height:58px; overflow:hidden; white-space:pre-wrap}
.card .meta{display:flex; gap:12px; margin:14px 0 12px; font-size:9px; letter-spacing:.18em; color:var(--dim)}
.card .acts{display:flex; gap:7px; flex-wrap:wrap}
.mini{background:transparent; border:1px solid var(--line); color:var(--muted); padding:6px 9px; font-size:9px; letter-spacing:.16em}
.mini:hover{color:var(--cyan2); border-color:var(--line2)}
.mini.danger:hover{color:var(--danger); border-color:rgba(255,85,112,.45)}
.empty{padding:40px 22px; color:var(--dim); font-size:11.5px; letter-spacing:.14em}

.panel-form{margin:22px; padding:20px; border:1px solid var(--line); background:rgba(8,14,23,.85); max-width:640px}
.panel-form h3{margin:0 0 16px; font-size:10px; letter-spacing:.28em; color:var(--gold)}
.panel-form label{display:flex; flex-direction:column; gap:7px; margin-bottom:14px; font-size:9.5px; letter-spacing:.2em; color:var(--muted)}
.panel-form input,.panel-form textarea{
  background:rgba(6,11,18,.9); border:1px solid var(--line); padding:10px 11px; font-size:13px; outline:none;
}
.panel-form input:focus,.panel-form textarea:focus{border-color:var(--cyan)}
.panel-form .row{display:flex; gap:10px; margin-top:4px}

.rows{padding:14px 22px 40px; overflow-y:auto; flex:1}
.row-item{
  display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center;
  border-bottom:1px solid rgba(34,211,238,.08); padding:13px 4px; transition:.15s;
}
.row-item:hover{background:rgba(34,211,238,.03)}
.row-item .t{color:#dcecf7; font-size:13px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row-item .t:hover{color:var(--cyan2)}
.row-item .s{font-size:9px; letter-spacing:.16em; color:var(--dim); margin-top:4px}
.row-item .acts{display:flex; gap:6px}

@media (max-width:720px){
  .topbar{height:auto; padding:10px 12px; gap:10px; flex-wrap:wrap}
  .nav{order:3; width:100%}
  .nav button{flex:1}
  .who{display:none}
  .brand-title{font-size:26px}
  .reactor.big{width:140px;height:140px}
  .composer{padding:10px}
  .prompt{display:none}
  .term-foot{display:none}
  .log{padding:16px 12px}
}

[hidden]{display:none !important}

/* ---------- empty state ---------- */
.boot{max-width:620px; margin:6vh auto 0; text-align:center}
.boot .reactor.big{width:132px;height:132px;margin-bottom:22px}
.boot h2{margin:0 0 8px; font-size:15px; letter-spacing:.3em; color:#e6f7ff; font-weight:500}
.boot p{margin:0 0 26px; color:var(--muted); font-size:11.5px; letter-spacing:.1em; line-height:1.7}
.chips{display:flex; gap:9px; justify-content:center; flex-wrap:wrap}
.chips button{
  background:rgba(34,211,238,.05); border:1px solid var(--line); color:#9ddcec;
  padding:9px 13px; font-size:10.5px; letter-spacing:.08em; transition:.15s; text-align:left;
}
.chips button:hover{border-color:var(--cyan); color:#e8fcff; box-shadow:0 0 20px rgba(34,211,238,.16)}

.msg.err .retry{margin-top:10px;font:inherit;font-size:11px;letter-spacing:.12em;background:rgba(244,63,94,.10);color:#fda4af;border:1px solid rgba(244,63,94,.38);padding:7px 12px;border-radius:6px;cursor:pointer;transition:.15s}
.msg.err .retry:hover{background:rgba(244,63,94,.2);color:#fecdd3}

/* ---------- painel ao vivo do raciocínio ---------- */
.msg.ai .phase{font-size:10px;letter-spacing:.12em;color:var(--dim);margin-left:8px;text-transform:none}
.thinkBox{border-left:2px solid rgba(34,211,238,.32);padding:2px 0 2px 12px;margin:0 0 10px;max-height:240px;overflow:hidden;transition:max-height .35s ease,opacity .35s ease}
.thinkBox .thinkHead{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.thinkBox .thinkHead b{color:var(--cyan);font-weight:600}
.thinkBox .thinkHead .tinfo{color:var(--dim);letter-spacing:.08em;text-transform:none;font-size:10px}
.dots{display:inline-flex;gap:3px}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--cyan);display:block;animation:dots 1.2s infinite}
.dots i:nth-child(2){animation-delay:.18s}
.dots i:nth-child(3){animation-delay:.36s}
@keyframes dots{0%,100%{opacity:.2}50%{opacity:1}}
.thinkBox .think{max-height:170px;overflow:auto;color:#8ea7ba;font-size:12.5px;line-height:1.62;white-space:pre-wrap;word-break:break-word;margin:0}
.thinkBox.compact{max-height:104px}
.thinkBox.compact .think{max-height:52px;opacity:.55}
details.thinkDet{margin:0 0 10px;border-left:2px solid rgba(148,163,184,.25);padding-left:12px;white-space:pre-wrap;word-break:break-word;color:#8ea7ba;font-size:12.5px;line-height:1.62}
details.thinkDet summary{display:block;cursor:pointer;color:var(--dim);font-size:9px;letter-spacing:.18em;list-style:none;text-transform:uppercase;margin-bottom:0}
details.thinkDet summary::-webkit-details-marker{display:none}
details.thinkDet[open]{border-left-color:rgba(34,211,238,.35)}
details.thinkDet[open] summary{color:var(--muted);margin-bottom:6px}

/* ---------- split terminal + avatar ---------- */
.term-split{flex:1 1 auto; min-height:0; display:flex; width:100%}
.term-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:0}
.avatar-panel{
  flex:0 0 268px; width:268px; border-left:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:14px 14px 12px; background:linear-gradient(180deg, rgba(34,211,238,.035), rgba(4,6,10,0));
}
.av-head{width:100%; display:flex; align-items:center; justify-content:space-between; font-size:9px; letter-spacing:.26em; color:var(--dim)}
.av-state{color:var(--cyan); letter-spacing:.14em; opacity:.8; text-transform:lowercase}
.av-state.think{color:var(--gold)}
.avatar-panel canvas{width:100%; aspect-ratio:1/1; display:block; filter:drop-shadow(0 0 18px rgba(34,211,238,.16))}
.voice-bar{display:flex; gap:6px; width:100%; align-items:center}
.vb{
  font:inherit; font-size:9px; letter-spacing:.16em; padding:7px 9px; cursor:pointer;
  background:rgba(255,255,255,.015); border:1px solid var(--line2); color:var(--muted); border-radius:5px;
  transition:.15s;
}
.vb:hover{border-color:rgba(34,211,238,.4); color:#b9e9f7}
.vb.on{background:rgba(34,211,238,.14); border-color:rgba(34,211,238,.55); color:#d7f7ff; box-shadow:0 0 14px rgba(34,211,238,.18)}
.vb.rec{background:rgba(244,63,94,.16); border-color:rgba(244,63,94,.6); color:#fecdd3}
.voice-bar select{
  flex:1 1 auto; min-width:0; font:inherit; font-size:9.5px; letter-spacing:.06em; padding:6px 6px;
  background:#070b11; color:var(--muted); border:1px solid var(--line2); border-radius:5px; cursor:pointer;
}
.av-foot{font-size:8.5px; letter-spacing:.14em; color:var(--dim); text-transform:uppercase; text-align:center; min-height:12px}

/* ---------- cartoes de ferramenta ---------- */
.tools{display:flex; flex-direction:column; gap:7px; margin:0 0 12px}
.tool{
  border:1px solid rgba(34,211,238,.18); border-left:2px solid rgba(34,211,238,.5);
  background:rgba(34,211,238,.035); border-radius:4px; overflow:hidden;
}
.tool.run{border-left-color:var(--gold); background:rgba(245,196,81,.05)}
.tool.bad{border-left-color:var(--danger); background:rgba(244,63,94,.05)}
.tool .th{display:flex; align-items:center; gap:8px; padding:7px 10px; font-size:9.5px; letter-spacing:.14em; color:var(--muted)}
.tool .th b{color:#b9e9f7; font-weight:600; letter-spacing:.16em}
.tool .th .tg{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8ea7ba; letter-spacing:0; font-size:11px; text-transform:none}
.tool .th .ms{color:var(--dim); letter-spacing:.06em}
.tool .th .ok{color:#6ee7b7}
.tool .th .er{color:var(--danger)}
.tool pre{
  margin:0; padding:8px 10px 9px; border-top:1px solid rgba(34,211,238,.12);
  font-size:11.5px; line-height:1.5; color:#9fb6c6; white-space:pre-wrap; word-break:break-word;
  max-height:200px; overflow:auto; background:rgba(0,0,0,.28);
}
.tool pre:empty{display:none}
.tool.clip pre{max-height:74px}
@media (max-width:1000px){ .avatar-panel{display:none} }

/* saudação de abertura */
.msg.greet .txt{color:#dff6ff}
.msg.greet .retry{margin-top:10px;font:inherit;font-size:10px;letter-spacing:.14em;background:rgba(34,211,238,.10);color:#b7f1ff;border:1px solid rgba(34,211,238,.38);padding:7px 12px;border-radius:6px;cursor:pointer;transition:.15s}
.msg.greet .retry:hover{background:rgba(34,211,238,.2);color:#e6fbff}