:root{
  --bg0:#fbf7ee;
  --bg1:#ffffff;
  --card:#ffffffcc;
  --card2:#ffffff;
  --text:#102a23;
  --muted:#4f615b;
  --brand:#caa24f;
  --good:#0ea5a4;
  --danger:#e11d48;
  --shadow: 0 18px 55px rgba(16,42,35,.16);
  --radius: 26px;
  --radius2: 18px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(202,162,79,.30), transparent 60%),
    radial-gradient(900px 650px at 20% 20%, rgba(14,165,164,.14), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
}

.app{
  height:100dvh;
  padding: calc(14px + var(--safe-top)) 14px calc(14px + var(--safe-bottom));
  display:flex;
  flex-direction:column;
}

.screen{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 8px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.2px;
}

.brand .dot{
  width:10px;height:10px;border-radius:999px;background:var(--brand);
  box-shadow: 0 0 0 6px rgba(215,178,93,.16);
}

.pill{
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(16,42,35,.12);
  color: rgba(16,42,35,.72);
  font-size: 12px;
}

.hero{
  position:relative;
  flex:1;
  border-radius: var(--radius);
  background:
    radial-gradient(520px 320px at 50% 10%, rgba(202,162,79,.24), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border: 1px solid rgba(16,42,35,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(closest-side at 20% 55%, rgba(202,162,79,.12), transparent 70%),
    radial-gradient(closest-side at 80% 58%, rgba(14,165,164,.10), transparent 72%),
    repeating-linear-gradient(20deg, rgba(16,42,35,.06) 0 2px, transparent 2px 14px);
  transform: rotate(-8deg);
  opacity:.55;
}

.heroContent{
  position:relative;
  padding: 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.heroTitle{
  font-size: 28px;
  line-height: 1.05;
  margin:0;
  letter-spacing: .2px;
}

.heroSub{
  margin:0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:none;
  border-radius: 18px;
  padding: 14px 16px;
  font-weight: 700;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.btnPrimary{
  background: linear-gradient(180deg, #edcd7c, #cfa550);
  color:#1a1a1a;
}

.btnGhost{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(16,42,35,.12);
  color: var(--text);
}

.card{
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid rgba(16,42,35,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.cardInner{
  padding: 16px;
}

.row{
  display:flex;
  gap:12px;
}

.col{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.grow{flex:1}

.label{
  font-size: 12px;
  color: var(--muted);
}

input{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(16,42,35,.14);
  background: rgba(255,255,255,.78);
  color: var(--text);
  padding: 14px 14px;
  font-size: 16px;
  outline:none;
}

input:focus{border-color: rgba(215,178,93,.55)}

.hint{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.err{
  color: var(--danger);
  font-size: 12px;
}

.kbd{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.kbdBtn{
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(16,42,35,.12);
  background: rgba(255,255,255,.78);
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.kbdBtn:active{transform: translateY(1px)}

.pinDots{
  display:flex;
  justify-content:center;
  gap:10px;
  padding: 8px 0 2px;
}

.dotPin{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  background: transparent;
}

.dotPin.filled{
  background: var(--brand);
  border-color: rgba(215,178,93,.55);
  box-shadow: 0 0 0 6px rgba(215,178,93,.10);
}

.nav{
  display:flex;
  gap:10px;
  padding-top: 10px;
}

.navBtn{
  flex:1;
  border-radius: 22px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(16,42,35,.12);
  padding: 12px 10px;
  color: var(--muted);
  font-weight: 700;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.navBtn.active{
  background: rgba(215,178,93,.18);
  border-color: rgba(215,178,93,.38);
  color: var(--text);
}

.stat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(16,42,35,.10);
}

.badge{
  padding:8px 10px;
  border-radius: 999px;
  background: rgba(14,165,164,.12);
  border: 1px solid rgba(14,165,164,.22);
  color: rgba(16,42,35,.86);
  font-size: 12px;
  font-weight: 800;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.plot{
  border-radius: 18px;
  border: 1px solid rgba(16,42,35,.12);
  background: rgba(255,255,255,.70);
  overflow:hidden;
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height: 86px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.plot .name{
  font-weight: 900;
  font-size: 12px;
}

.plot .sub{
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.progress{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
.progress > div{
  height: 100%;
  background: linear-gradient(90deg, rgba(45,212,191,.85), rgba(215,178,93,.95));
  width:0%;
}

.list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.seedIcon{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  border: 1px solid rgba(16,42,35,.10);
  background: rgba(255,255,255,.82);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  overflow:hidden;
}
.seedIcon svg{width: 26px; height: 26px}
.seedIcon .stroke{stroke: rgba(16,42,35,.55)}
.seedIcon .fill{fill: rgba(202,162,79,.88)}
.seedIcon.maiz .fill{fill: rgba(245,158,11,.92)}
.seedIcon.uvas .fill{fill: rgba(109,40,217,.88)}
.seedIcon.olivo .fill{fill: rgba(16,185,129,.88)}

.topbarRight{
  display:flex;
  gap:10px;
  align-items:center;
}

.item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.item strong{font-weight:900}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

.muted{color:var(--muted)}

.danger{color:var(--danger)}

.plotArt{
  position:relative;
  height: 40px;
  border-radius: 14px;
  overflow:hidden;
  background:
    radial-gradient(40px 18px at 50% 30%, rgba(255,255,255,.08), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
  border: 1px solid rgba(255,255,255,.10);
}

.soil{
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-14px;
  height: 30px;
  border-radius: 50px;
  background:
    radial-gradient(20px 10px at 18% 40%, rgba(0,0,0,.22), transparent 60%),
    radial-gradient(24px 11px at 50% 20%, rgba(0,0,0,.18), transparent 65%),
    radial-gradient(24px 11px at 78% 45%, rgba(0,0,0,.20), transparent 65%),
    linear-gradient(180deg, rgba(176,120,66,.65), rgba(102,62,30,.85));
  transform: translateY(4px);
}

.plant{
  position:absolute;
  left:50%;
  bottom: 6px;
  width: 22px;
  height: 28px;
  transform: translateX(-50%) scale(0);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

.stem{
  position:absolute;
  left:50%;
  bottom:0;
  width: 6px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(45,212,191,.95), rgba(21,128,113,.95));
}

.leaf{
  position:absolute;
  bottom: 7px;
  width: 14px;
  height: 10px;
  border-radius: 999px 999px 999px 0;
  background: linear-gradient(180deg, rgba(173,255,224,.9), rgba(45,212,191,.9));
}

.leaf.l{
  left: 1px;
  transform: rotate(-18deg);
}
.leaf.r{
  right: 1px;
  transform: scaleX(-1) rotate(-18deg);
}

.head{
  position:absolute;
  left:50%;
  top: -2px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%) scale(0);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%), linear-gradient(180deg, rgba(237,205,124,.95), rgba(207,165,80,.95));
}

.plot.stage-seed .plant{transform: translateX(-50%) scale(.25)}
.plot.stage-sprout .plant{transform: translateX(-50%) scale(.55)}
.plot.stage-young .plant{transform: translateX(-50%) scale(.85)}
.plot.stage-mature .plant{transform: translateX(-50%) scale(1)}
.plot.stage-mature .head{transform: translateX(-50%) scale(1)}
.plot.stage-young .head{transform: translateX(-50%) scale(.6)}

.plot.stage-sprout .stem{height: 14px}
.plot.stage-young .stem{height: 18px}
.plot.stage-mature .stem{height: 20px}

.plot.stage-mature .plant{
  animation: plantSway 2.8s ease-in-out infinite;
}

@keyframes plantSway{
  0%,100%{transform: translateX(-50%) scale(1) rotate(-1.2deg)}
  50%{transform: translateX(-50%) scale(1) rotate(1.6deg)}
}

.plot.crop-trigo .head{background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%), linear-gradient(180deg, rgba(237,205,124,.95), rgba(207,165,80,.95))}
.plot.crop-maiz .head{background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%), linear-gradient(180deg, rgba(253,224,71,.95), rgba(245,158,11,.95))}
.plot.crop-uvas .head{background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%), linear-gradient(180deg, rgba(167,139,250,.95), rgba(109,40,217,.95))}
.plot.crop-olivo .head{background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%), linear-gradient(180deg, rgba(110,231,183,.95), rgba(16,185,129,.95))}

.wheat{
  position:absolute;
  left:50%;
  top:-2px;
  width: 18px;
  height: 22px;
  transform: translateX(-50%) scale(0);
}
.wheat i{
  position:absolute;
  left:50%;
  width: 6px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(237,205,124,.95), rgba(207,165,80,.95));
}
.wheat i:nth-child(1){top:0;left:50%}
.wheat i:nth-child(2){top:5px;left:38%}
.wheat i:nth-child(3){top:5px;left:62%}
.wheat i:nth-child(4){top:11px;left:45%}
.wheat i:nth-child(5){top:11px;left:55%}

.cob{
  position:absolute;
  left:50%;
  top:-1px;
  width: 14px;
  height: 18px;
  transform: translateX(-50%) scale(0);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(253,224,71,.95), rgba(245,158,11,.95));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}
.cob::before{
  content:"";
  position:absolute;
  inset:-2px -4px 4px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(34,197,94,.55), rgba(16,185,129,.35));
  transform: rotate(-10deg);
  filter: blur(.1px);
  opacity:.75;
}

.grapes{
  position:absolute;
  left:50%;
  top:-1px;
  width: 22px;
  height: 22px;
  transform: translateX(-50%) scale(0);
}
.grape{
  position:absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%), linear-gradient(180deg, rgba(167,139,250,.95), rgba(109,40,217,.95));
}
.grape:nth-child(1){left:7px;top:1px}
.grape:nth-child(2){left:2px;top:7px}
.grape:nth-child(3){left:12px;top:7px}
.grape:nth-child(4){left:7px;top:12px}
.grape:nth-child(5){left:2px;top:13px}
.grape:nth-child(6){left:12px;top:13px}
.grapes::before{
  content:"";
  position:absolute;
  left:10px;
  top:-2px;
  width: 10px;
  height: 6px;
  border-radius: 999px 999px 999px 0;
  background: linear-gradient(180deg, rgba(173,255,224,.9), rgba(45,212,191,.9));
  transform: rotate(-18deg);
}

.olives{
  position:absolute;
  left:50%;
  top:0px;
  width: 22px;
  height: 18px;
  transform: translateX(-50%) scale(0);
}
.olive{
  position:absolute;
  width: 9px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%), linear-gradient(180deg, rgba(110,231,183,.95), rgba(16,185,129,.95));
}
.olive:nth-child(1){left:2px;top:7px}
.olive:nth-child(2){left:11px;top:6px}
.olive:nth-child(3){left:7px;top:1px}

.plot.crop-trigo .head{display:none}
.plot.crop-maiz .head{display:none}
.plot.crop-uvas .head{display:none}
.plot.crop-olivo .head{display:none}

.plot.stage-mature .wheat,
.plot.stage-mature .cob,
.plot.stage-mature .grapes,
.plot.stage-mature .olives{transform: translateX(-50%) scale(1)}
.plot.stage-young .wheat,
.plot.stage-young .cob,
.plot.stage-young .grapes,
.plot.stage-young .olives{transform: translateX(-50%) scale(.6)}

.fxLayer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:30;
}

.fxParticle{
  position:absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 55%), linear-gradient(180deg, rgba(45,212,191,.9), rgba(215,178,93,.9));
  opacity:0;
  transform: translate(-50%,-50%) scale(.9);
  animation: fxPop 900ms ease-out forwards;
}

@keyframes fxPop{
  0%{opacity:0; transform: translate(var(--x0), var(--y0)) scale(.7)}
  15%{opacity:1}
  100%{opacity:0; transform: translate(var(--x1), var(--y1)) scale(1.2)}
}

.introHero::before{opacity:.45}
.introDots{
  display:flex;
  gap:8px;
  justify-content:center;
  padding-bottom: 6px;
}
.introDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.10);
}
.introDot.active{
  background: rgba(215,178,93,.9);
  box-shadow: 0 0 0 6px rgba(215,178,93,.12);
}

.introArt{
  height: 180px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.introArt .artBadge{
  position:absolute;
  left: 14px;
  bottom: 14px;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(215,178,93,.18);
  border: 1px solid rgba(215,178,93,.30);
  font-weight: 900;
}
.introArt .artSun{
  position:absolute;
  right: -30px;
  top: -30px;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 55%), linear-gradient(180deg, rgba(237,205,124,.95), rgba(207,165,80,.95));
  opacity:.9;
  filter: blur(.2px);
}
.introArt .artField{
  position:absolute;
  inset: 0;
  background:
    radial-gradient(520px 240px at 40% 110%, rgba(45,212,191,.22), transparent 60%),
    repeating-linear-gradient(20deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.22));
}
.introArt.artFarm .artField{
  background:
    radial-gradient(520px 240px at 40% 110%, rgba(215,178,93,.18), transparent 60%),
    repeating-linear-gradient(20deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.26));
}
.introArt .artMiniGrid{
  position:absolute;
  left: 14px;
  top: 14px;
  width: 170px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
}
.introArt .artCell{
  height: 42px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  position:relative;
  overflow:hidden;
}
.introArt .artCell::after{
  content:"";
  position:absolute;
  left: -20%;
  right: -20%;
  bottom: -14px;
  height: 24px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(176,120,66,.55), rgba(102,62,30,.78));
  opacity:.85;
}
.introArt.artUpgrades{
  background:
    radial-gradient(520px 240px at 20% 30%, rgba(45,212,191,.18), transparent 60%),
    radial-gradient(520px 240px at 80% 65%, rgba(215,178,93,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.26));
}
.introArt .artWind{
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(700px 260px at 10% 40%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(700px 260px at 80% 55%, rgba(255,255,255,.07), transparent 62%);
  opacity:.6;
  animation: windDrift 6s ease-in-out infinite;
}
.introArt .artCard{
  position:absolute;
  right: 14px;
  top: 14px;
  width: 170px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.introArt .artCard:nth-child(3){top: 92px}
.introArt .artLine{font-weight:900}

.weatherLayer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:12;
}
.weatherLayer.rain::before{
  content:"";
  position:absolute;
  inset:-30% 0;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.12) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(80deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px);
  opacity:.18;
  transform: translateY(-30%);
  animation: rainFall 900ms linear infinite;
}
.weatherLayer.wind::after{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(600px 280px at 10% 40%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(700px 320px at 80% 55%, rgba(255,255,255,.06), transparent 62%);
  opacity:.45;
  animation: windDrift 6s ease-in-out infinite;
}
@keyframes rainFall{
  0%{transform: translateY(-30%)}
  100%{transform: translateY(30%)}
}
@keyframes windDrift{
  0%,100%{transform: translateX(-8px)}
  50%{transform: translateX(10px)}
}

.chatRoot{
  position:fixed;
  right: 14px;
  bottom: calc(14px + var(--safe-bottom));
  z-index:25;
}
.chatFab{
  border:none;
  border-radius: 999px;
  padding: 14px 16px;
  font-weight: 900;
  color:#1a1a1a;
  background: linear-gradient(180deg, #edcd7c, #cfa550);
  box-shadow: var(--shadow);
}
.chatPanel{
  width: min(92vw, 420px);
  height: min(70vh, 520px);
  border-radius: 22px;
  overflow:hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(16,42,35,.12);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
}
.chatHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(16,42,35,.10);
}
.chatTitle{font-weight:900}
.chatClose{
  border:none;
  background: rgba(16,42,35,.06);
  color: var(--text);
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 20px;
  line-height: 1;
}
.chatMessages{
  flex:1;
  overflow:auto;
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chatMsg{
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(16,42,35,.10);
  background: rgba(255,255,255,.82);
}
.chatMsg.mine{
  align-self:flex-end;
  background: rgba(215,178,93,.16);
  border-color: rgba(215,178,93,.26);
}
.chatMsg.theirs{
  align-self:flex-start;
}
.chatImg{
  display:block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 8px;
}
.chatText{
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.35;
}
.chatName{
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 6px;
}
.chatMeta{
  margin-top: 6px;
  font-size: 11px;
  color: rgba(16,42,35,.55);
}
.chatComposer{
  display:flex;
  gap:10px;
  padding: 10px;
  border-top: 1px solid rgba(16,42,35,.10);
  background: rgba(255,255,255,.72);
}
.chatInput{
  flex:1;
  border-radius: 14px;
  border: 1px solid rgba(16,42,35,.14);
  background: rgba(255,255,255,.82);
  color: var(--text);
  padding: 12px 12px;
  font-size: 14px;
  outline:none;
}
.chatBtn{
  width: 44px;
  border-radius: 14px;
  border: 1px solid rgba(16,42,35,.12);
  background: rgba(16,42,35,.06);
  color: var(--text);
  font-weight: 900;
}
.chatSend{
  width:auto;
  padding: 0 12px;
}
.chatFile{display:none}
.chatAttach{
  padding: 0 12px 10px;
  font-size: 12px;
  color: rgba(16,42,35,.62);
}

.nickRainbow,
.nickRainbow2{
  display:inline-block;
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: nickShift 3.2s linear infinite;
  text-shadow: 0 0 18px rgba(0,0,0,.18);
}
.nickRainbow{
  background-image: linear-gradient(90deg, #ff3b30, #ff9500, #ffd60a, #34c759, #32ade6, #5856d6, #ff2d55);
}
.nickRainbow2{
  background-image: linear-gradient(90deg, #22c55e, #2dd4bf, #60a5fa, #a78bfa, #f472b6, #f59e0b);
}
@keyframes nickShift{
  0%{background-position: 0% 50%}
  100%{background-position: 100% 50%}
}