/* CSS Document */

:root{
  --bg:#0b1020; --line:rgba(255,255,255,.10); --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62); --shadow:0 18px 50px rgba(0,0,0,.35);
  --radius:18px; --btn:rgba(255,255,255,.10); --btnHover:rgba(255,255,255,.14);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(34,211,238,.10), transparent 55%),
              radial-gradient(1000px 700px at 80% 20%, rgba(168,85,247,.10), transparent 55%),
              var(--bg);
  color:var(--text);
}
.app{width:min(980px,100%); height:100%; margin:0 auto; padding:20px 14px; display:flex; flex-direction:column; gap:14px}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px; border:1px solid var(--line);
  background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter: blur(10px);
}
.brand{display:flex; align-items:center; gap:12px}
.dot{width:12px; height:12px; border-radius:999px; background: linear-gradient(180deg, rgba(34,211,238,1), rgba(168,85,247,1)); box-shadow:0 0 0 6px rgba(34,211,238,.08)}
.title{font-weight:800; letter-spacing:.2px; line-height:1.1}
.subtitle{font-size:12px; color:var(--muted); margin-top:2px}
.chat{
  flex:1; display:flex; flex-direction:column; gap:12px;
  border:1px solid var(--line);
  background: linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter: blur(10px);
  overflow:hidden;
}
.messages{flex:1; padding:16px 14px; overflow:auto}
.msg{display:flex; margin:10px 0}
.msg.user{justify-content:flex-end}
.msg.assistant{justify-content:flex-start}
.bubble{
  max-width:min(78ch,86%); padding:12px; border-radius:16px;
  border:1px solid var(--line); white-space:pre-wrap; line-height:1.35; font-size:14px;
  background: rgba(255,255,255,.06);
}
.msg.user .bubble{background: rgba(34,211,238,.16); border-color: rgba(34,211,238,.25)}
.msg.assistant .bubble{background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.22)}
.msg.error .bubble{background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.25)}
.composer{display:flex; gap:10px; padding:12px; border-top:1px solid var(--line); background: rgba(0,0,0,.12)}
.input{
  flex:1; resize:none; border:1px solid var(--line); outline:none;
  background: rgba(255,255,255,.06); color:var(--text);
  border-radius:14px; padding:12px; font-size:14px; min-height:44px; max-height:180px;
}
.input::placeholder{color: rgba(255,255,255,.45)}
.btn{
  border:1px solid var(--line); background:var(--btn); color:var(--text);
  padding:10px 14px; border-radius:14px; cursor:pointer; font-weight:700;
  transition: transform 120ms ease, background 120ms ease; user-select:none;
}
.btn:hover{background:var(--btnHover); transform: translateY(-1px)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn-primary{border-color: rgba(34,211,238,.35); background: rgba(34,211,238,.16)}
.btn-ghost{background: rgba(255,255,255,.06)}
.btn .spinner{
  display:none; width:14px; height:14px; border-radius:999px;
  border:2px solid rgba(255,255,255,.35); border-top-color: rgba(255,255,255,.95);
  margin-left:10px; animation: spin .8s linear infinite;
}
.btn.loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.hint{padding:0 14px 14px; color:var(--muted); font-size:12px}
kbd{font-family: ui-monospace, Menlo, Consolas, monospace; font-size:11px; padding:2px 6px; border-radius:8px; border:1px solid var(--line); background: rgba(255,255,255,.06); color: rgba(255,255,255,.80)}


/* Hospi Chat surfaces */
body.hospi-chat-body,
body.hospi-chat-assistant,
body.hospi-chat-header {
  background-color:#020617;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(23,37,84,.95) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size:100% 100%,60px 60px,60px 60px;
}

.hc-wrapper,
.wrapper{
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  max-width:860px;
  margin:0 auto;
  background:rgba(2,6,23,.58);
  backdrop-filter:blur(12px);
}
.hc-wrapper{max-width:800px;}

.hc-header,
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:rgba(15,23,42,.8);
  backdrop-filter:blur(12px);
}

.hc-brand,
.brand-inline{display:flex;align-items:center;gap:12px;min-width:0;}
.hc-logo{width:36px;height:36px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 28px rgba(0,0,0,.28)}
.hc-info{display:flex;flex-direction:column;line-height:1.1;min-width:0;}
.hc-title,
.header .title{font-weight:800;font-size:14px;letter-spacing:.35px;color:rgba(255,255,255,.96)}
.hc-status,
.header .status{font-size:12px;color:#9fb1c8}
.hc-nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}

.nav-btn,
.send-btn,
.chat-modal-btn,
.header button,
.header a.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);
  color:#e5eefb;
  font-weight:700;
  font-size:12px;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow:0 10px 24px rgba(2,6,23,.18);
}
.nav-btn:hover,
.send-btn:hover,
.chat-modal-btn:hover,
.header button:hover,
.header a.nav-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(34,211,238,.28);transform:translateY(-1px);box-shadow:0 14px 30px rgba(2,6,23,.24)}
.nav-btn:focus-visible,
.send-btn:focus-visible,
.chat-modal-btn:focus-visible,
textarea:focus-visible{outline:2px solid rgba(34,211,238,.42);outline-offset:2px}
.nav-btn.nav-btn--accent,
.send-btn,
button.send-btn{border-color:rgba(34,211,238,.24);background:rgba(34,211,238,.18)}
.nav-btn.nav-btn--accent:hover,
.send-btn:hover,
button.send-btn:hover{background:rgba(34,211,238,.24);border-color:rgba(34,211,238,.34)}

.hc-main,
.main{
  flex:1;
  overflow-y:auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  scroll-behavior:smooth;
}

.hc-footer,
.footer{
  border-top:1px solid var(--line);
  padding:14px;
  background:rgba(15,23,42,.8);
  backdrop-filter:blur(12px);
}

.input-box{display:flex;gap:10px;align-items:flex-end;}
textarea,
.ai-textarea{
  flex:1;
  resize:none;
  border-radius:14px;
  padding:12px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(2,6,23,.68);
  color:#f8fafc;
  outline:none;
  font-size:13px;
  line-height:1.42;
  max-height:180px;
  overflow-y:auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
textarea::placeholder,
.ai-textarea::placeholder{color:rgba(159,177,200,.82)}

.chat-status{color:#9fb1c8;}
.chat-status--muted{font-style:italic;}
.chat-status--error{color:#fca5a5;}
.chat-status--warning{color:#fbbf24;}
.chat-status--success{color:#bbf7d0;}
.chat-status--exec{color:#cbd5e1;font-style:italic;}
.chat-result{margin-top:10px;padding-top:10px;border-top:1px solid rgba(148,163,184,.16);}
.chat-result__title{font-weight:700;margin-bottom:6px;}
.chat-result__body{color:#e2e8f0;}
.chat-result__body.chat-status--success{color:#bbf7d0;}
.chat-result__body.chat-status--error{color:#fecaca;}

/* Hospi chat consultant header layout */
.site-header-container{position:fixed;top:0;left:0;right:0;padding-top:env(safe-area-inset-top);background:#0f172a;border-bottom:1px solid #1e293b;z-index:10000;}
.auth-bar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 max(15px, env(safe-area-inset-left)) 0 max(15px, env(safe-area-inset-right));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);gap:12px;}
.logo-link img{height:55px;display:block;filter:drop-shadow(0 2px 8px rgba(34,211,238,.3));transition:filter .2s ease;}
.logo-link:hover img{filter:drop-shadow(0 4px 12px rgba(34,211,238,.5));}
.right-nav-container{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.header-spacer{height:calc(70px + env(safe-area-inset-top));}
.main-footer{position:fixed;left:0;right:0;bottom:0;width:100%;background:rgba(2,6,23,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid #1e293b;z-index:9999;padding:8px 8px calc(10px + env(safe-area-inset-bottom)) 8px;box-sizing:border-box;touch-action:manipulation;}
.preview-banner{position:absolute;bottom:100%;left:0;right:0;background:#eab308;color:#000;text-align:center;padding:6px;font-size:12px;font-weight:700;display:flex;justify-content:center;gap:10px;box-shadow:0 -2px 10px rgba(0,0,0,.2);}
.preview-banner .login-link{text-decoration:underline;color:#000;font-weight:800;}
.nav-grid{display:grid;gap:6px;width:100%;max-width:640px;margin:0 auto;}
.nav-link{position:relative;text-decoration:none;display:flex;justify-content:center;align-items:center;height:62px;border-radius:14px;overflow:hidden;background:#1e293b;border:1px solid rgba(255,255,255,.06);transition:transform .08s ease, border-color .2s ease;-webkit-tap-highlight-color:transparent;}
.nav-icon{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(100%) brightness(.5);transition:filter .3s ease;}
.nav-label{position:relative;z-index:10;font-size:9px;font-weight:900;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.9px;text-shadow:0 2px 6px rgba(0,0,0,.9);text-align:center;}
.nav-link.active{border-color:rgba(34,211,238,.45);}
.nav-link.active .nav-icon{filter:grayscale(0%) brightness(1);}
.nav-link.active .nav-label{color:#22d3ee;}
#installAppBtn{display:none;background:linear-gradient(135deg,#22d3ee 0%,#0ea5e9 100%);color:#020617;font-weight:900;padding:8px 12px;border-radius:10px;border:none;cursor:pointer;align-items:center;gap:8px;text-transform:uppercase;font-size:11px;text-decoration:none;box-shadow:0 0 10px rgba(34,211,238,.3);min-height:40px;white-space:nowrap;}
.ios-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:99999;align-items:center;justify-content:center;padding:20px;}
.ios-card{background:#1e293b;border:1px solid #334155;border-radius:16px;padding:25px;max-width:320px;text-align:center;box-shadow:0 28px 70px rgba(0,0,0,.45);}
.ios-card-title{margin:0 0 10px;color:#fff;font-size:1.1rem;}
.ios-card-copy{color:#94a3b8;font-size:12px;margin:0 0 15px;}
.chat-modal-btn{background:#334155;color:#fff;border:none;}

@media (max-width: 680px){
  .hc-header,.header{padding:14px;align-items:flex-start;}
  .hc-main,.main{padding:14px;}
  .hc-nav{width:100%;justify-content:flex-start;}
  .msg .bubble{max-width:88%;}
  .input-box{flex-wrap:wrap;}
  .send-btn,button.send-btn{width:100%;}
}

@media (max-width: 480px){
  .logo-link img{height:42px;}
  .right-nav-container{gap:8px;}
  .nav-btn,#installAppBtn,.chat-modal-btn{padding:8px 10px;font-size:10px;}
  .auth-bar{height:auto;min-height:70px;padding-top:10px;padding-bottom:10px;align-items:flex-start;}
}


.source-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.source-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(15,23,42,.72);color:#e5eefb;text-decoration:none;font-size:12px;font-weight:700;}
.source-chip:hover{border-color:rgba(34,211,238,.36);background:rgba(34,211,238,.14);}
.header .title{margin:0;}