*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#030918;color:#eaf1ff}body{overflow-x:hidden}.app{min-height:100vh;display:flex}.sidebar{width:250px;flex:0 0 250px;background:#06112a;border-right:1px solid #153d72;padding:22px 16px;position:fixed;inset:0 auto 0 0;overflow:auto}.side-brand{display:grid;grid-template-columns:42px 1fr;align-items:center;margin:2px 8px 22px}.zmark,.mini-z,.hero-z,.auth-logo{font-weight:900;color:#6e49ff;text-shadow:0 0 24px #286dff}.zmark{font-size:31px}.brand-name{font-size:17px;font-weight:800}.brand-name b,.head-brand b,h1 b,em{color:#3da9ff}.brand-sub{grid-column:2;color:#8094b8;font-size:11px;margin-top:-5px}.newchat,.pro,.sidebar nav a{width:100%;border:0;background:transparent;color:#dbe7ff;text-align:left;border-radius:12px;cursor:pointer}.newchat{padding:12px 14px;background:#10234a;font-size:15px;margin-bottom:16px}.sidebar nav a{display:flex;gap:14px;align-items:center;padding:12px 14px;color:#9db1d5}.sidebar nav a.active,.sidebar nav a:hover{background:#0e244b;color:#fff}.history{border-top:1px solid #16335d;margin-top:15px;padding:18px 10px;color:#8196bb;font-size:12px}.history small{display:block;color:#5f79a5;margin:0 0 8px}.history div{padding:7px 4px}.pro{display:flex;gap:10px;align-items:center;padding:12px;background:#0c1d3d;color:#fff}.pro span{display:flex;flex-direction:column;gap:3px}.pro small{color:#8296b9}.main{margin-left:250px;width:calc(100% - 250px);min-height:100vh}.main header{height:72px;border-bottom:1px solid #15375f;background:rgba(3,9,24,.92);display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:5}.menu{display:none}.head-brand{display:flex;align-items:center;gap:10px}.mini-z{font-size:25px}.head-brand strong{font-size:17px}.head-brand span{display:block;font-size:10px;color:#7890b8;letter-spacing:.8px}.head-actions{margin-left:auto;display:flex;align-items:center;gap:9px}.head-actions button{background:#0b1d3e;border:1px solid #1a4e91;color:#cbdcff;border-radius:18px;padding:8px 11px}.profile{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#286eff,#a03cff);font-weight:800}.account{font-size:12px;color:#dce7fa}.account small{color:#7990b5}.logout{cursor:pointer}.hidden{display:none!important}.hero{text-align:center;padding:48px 20px 28px}.hero-z{font-size:90px;line-height:1;margin-bottom:6px}.hero h1{font-size:44px;margin:0;font-weight:850;letter-spacing:-1.5px}.hero p{color:#c3d1ea;letter-spacing:6px;font-size:14px;margin:9px 0 18px}.motto{display:inline-block;border:1px solid #1570db;border-radius:22px;padding:9px 16px;color:#d6e7ff;font-size:11px;background:#071a39}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:0 28px}.cards article{min-height:100px;border:1px solid #0872e4;border-radius:15px;background:#071936;padding:20px;display:flex;align-items:center;gap:20px}.cards article i{font-style:normal;color:#00eaff;font-size:26px}.cards b{display:block;font-size:16px}.cards small{display:block;color:#9cb2d6;margin-top:5px}.try{padding:28px}.try-title{font-weight:800;font-size:17px;margin-bottom:12px}.try-title span{float:right;color:#3da9ff;font-size:12px}.chips{display:grid;gap:10px}.chips button{padding:11px 14px;text-align:left;border:1px solid #1267c5;border-radius:11px;background:#071936;color:#e2ecff;cursor:pointer}.composer{margin:4px 28px 18px;min-height:68px;border:2px solid #2872ff;border-radius:22px;background:#071936;display:flex;align-items:center;gap:10px;padding:8px 12px;position:relative}.composer button{border:0;color:#fff;cursor:pointer}.plus,.mic{width:48px;height:48px;border-radius:50%;background:#173767;font-size:26px}.composer input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:16px}.voice{width:50px;height:50px;border-radius:50%;background:#0d2752;border:1px solid #00d9ff!important;color:#00eaff!important}.composer.locked input{cursor:not-allowed}.login-hint{position:absolute;right:8px;top:-23px;color:#8294b4;font-size:11px}footer{border-top:1px solid #17365e;margin:0 28px;padding:15px 4px;color:#c6d5ef;font-size:12px;display:flex;justify-content:space-between;gap:15px}footer span{color:#7f94b8}.modal{position:fixed;inset:0;background:rgba(0,5,17,.74);backdrop-filter:blur(10px);display:none;place-items:center;z-index:20;padding:20px}.modal.show{display:grid}.auth-card{width:min(430px,100%);background:#071a3b;border:1px solid #287cff;border-radius:22px;padding:30px;box-shadow:0 0 55px rgba(32,103,255,.22);position:relative;text-align:center}.close{position:absolute;right:17px;top:13px;background:transparent;border:0;color:#b9c8e4;font-size:29px;cursor:pointer}.auth-logo{font-size:60px;margin-bottom:5px}.auth-card h2{font-size:26px;margin:0}.auth-sub{color:#9fb2d3;margin:7px 0 22px}.google,.primary{width:100%;height:44px;border-radius:10px;border:0;cursor:pointer;font-size:14px}.google{background:#fff;color:#222}.primary{background:linear-gradient(90deg,#356bff,#9433ff);color:#fff}.divider{display:flex;align-items:center;gap:12px;color:#8da2c6;margin:20px 0}.divider:before,.divider:after{content:"";height:1px;background:#294a77;flex:1}.auth-card form{display:grid;gap:12px}.auth-card input{height:44px;background:#061632;border:1px solid #2b568e;color:#fff;border-radius:10px;padding:0 13px;outline:0}.auth-card input:focus{border-color:#4d9dff}.auth-links{display:flex;justify-content:space-between;margin-top:13px;gap:10px}.auth-links button{background:transparent;border:0;color:#43a8ff;cursor:pointer;font-size:12px}.status{min-height:18px;color:#ffb8d0;font-size:12px;margin:14px 0 0}@media(max-width:850px){.sidebar{transform:translateX(-100%);transition:.2s;z-index:10}.sidebar-open .sidebar{transform:translateX(0)}.main{margin-left:0;width:100%}.menu{display:block;background:transparent;border:0;color:#fff;font-size:24px;margin-right:14px}.head-actions .account,.head-actions button:nth-child(2),.head-actions button:nth-child(3),.head-actions button:nth-child(4){display:none}.cards{grid-template-columns:1fr;padding:0 16px}.hero h1{font-size:38px}.hero p{letter-spacing:3px}.composer,footer{margin-left:16px;margin-right:16px}footer{flex-direction:column}.hero{padding-top:35px}}


/* ZONUNI AI — working chat layer */
.chat-shell {
  width: min(100%, 900px);
  margin: 18px auto 0;
  min-height: 170px;
  display: flex;
  flex-direction: column;
}

.chat-empty {
  text-align: center;
  padding: 28px 18px;
  color: #aebbd4;
}
.chat-empty-z, .assistant-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg,#246bff,#8d35ff);
  box-shadow: 0 0 24px rgba(76,75,255,.45);
}
.chat-empty-z {
  width: 54px; height: 54px; border-radius: 16px;
  font-size: 30px; margin-bottom: 10px;
}
.chat-empty h2 { margin: 0 0 7px; color: #eef4ff; }
.chat-empty p { margin: 0; font-size: 14px; }

.messages {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 6px 22px;
  overflow: visible;
}
.message-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
}
.message-row.user { justify-content: flex-end; }
.assistant-avatar {
  flex: 0 0 34px;
  width: 34px; height: 34px; border-radius: 10px;
  font-size: 18px;
}
.bubble {
  max-width: min(78%, 700px);
  border-radius: 18px;
  padding: 12px 15px;
  line-height: 1.55;
  font-size: 15px;
  word-wrap: break-word;
}
.user-bubble {
  color: #fff;
  background: #1748a8;
  border-bottom-right-radius: 5px;
}
.assistant-bubble {
  color: #e9f0ff;
  background: #0a1b3b;
  border: 1px solid #174c9d;
  border-bottom-left-radius: 5px;
}
.assistant-bubble code {
  background: #020817;
  border-radius: 5px;
  padding: 2px 5px;
}
.typing { display: flex; gap: 5px; align-items: center; min-width: 56px; }
.typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #24e8ff;
  animation: zonuniDot 1s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes zonuniDot { 0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)} }

.composer {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  width: min(100%, 900px);
  margin: 8px auto 18px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  min-height: 62px;
  border: 2px solid #2875ff;
  border-radius: 24px;
  background: rgba(7,24,55,.97);
  box-shadow: 0 0 28px rgba(30,95,255,.18);
}
.composer textarea {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 140px;
  padding: 10px 8px;
  border: 0;
  outline: 0;
  color: #edf4ff;
  background: transparent;
  font: inherit;
  line-height: 1.35;
}
.composer textarea::placeholder { color: #8291ad; }
.composer button {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  color: #eef5ff;
  background: #193b72;
  cursor: pointer;
  font-size: 20px;
}
.composer .send {
  background: linear-gradient(135deg,#4168ff,#9231ff);
}
.composer .voice { border: 1px solid #10e6ff; color: #18e7ff; }
.composer button:disabled { opacity: .45; cursor: not-allowed; }
.composer .mic.recording { outline: 2px solid #24e8ff; box-shadow: 0 0 18px rgba(36,232,255,.5); }
.attachment-name {
  position: absolute;
  left: 14px;
  bottom: 67px;
  max-width: 65%;
  padding: 7px 10px;
  border: 1px solid #2568d8;
  border-radius: 10px;
  background: #081a3c;
  color: #cfe0ff;
  font-size: 12px;
}
.hidden { display: none !important; }

@media (max-width: 700px) {
  .bubble { max-width: 84%; }
  .chat-shell, .composer { width: calc(100% - 18px); }
  .composer { bottom: 5px; }
  .composer .voice { display: none; }
  .head-actions .account { display: none; }
}