@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
html { min-height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg-page);
  color: var(--text-2);
  line-height: 1.7;
  font-size: 15px;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
#app { display: flex; flex-direction: column; min-height: 100vh; position: relative; }
#main-app { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ===== Soft Background Effects ===== */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0, 150, 199, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(72, 202, 228, 0.05) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(173, 232, 244, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Floating bubbles */
@keyframes bubbleFloat {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 0.4; }
  90% { opacity: 0.1; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

.ocean-bubbles {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.ocean-bubbles span {
  position: absolute;
  bottom: -20px;
  width: 6px; height: 6px;
  background: rgba(0, 150, 199, 0.12);
  border-radius: 50%;
  animation: bubbleFloat linear infinite;
}
.ocean-bubbles span:nth-child(1) { left: 10%; width: 4px; height: 4px; animation-duration: 12s; animation-delay: 0s; }
.ocean-bubbles span:nth-child(2) { left: 25%; width: 6px; height: 6px; animation-duration: 15s; animation-delay: 2s; }
.ocean-bubbles span:nth-child(3) { left: 45%; width: 3px; height: 3px; animation-duration: 18s; animation-delay: 4s; }
.ocean-bubbles span:nth-child(4) { left: 60%; width: 8px; height: 8px; animation-duration: 14s; animation-delay: 1s; }
.ocean-bubbles span:nth-child(5) { left: 75%; width: 5px; height: 5px; animation-duration: 16s; animation-delay: 3s; }
.ocean-bubbles span:nth-child(6) { left: 90%; width: 4px; height: 4px; animation-duration: 20s; animation-delay: 5s; }
.ocean-bubbles span:nth-child(7) { left: 35%; width: 7px; height: 7px; animation-duration: 13s; animation-delay: 6s; }
.ocean-bubbles span:nth-child(8) { left: 55%; width: 3px; height: 3px; animation-duration: 17s; animation-delay: 7s; }

/* Subtle wave on top */
@keyframes waveShift {
  0% { background-position-x: 0; }
  100% { background-position-x: 1000px; }
}

/* ===== Topbar (floating capsule) ===== */
.topbar {
  position: sticky; top: 12px; z-index: 100;
  max-width: 720px; width: calc(100% - 32px);
  margin: 12px auto 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-full);
  padding: 6px 8px 6px 16px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 150, 199, 0.08);
  transition: box-shadow 0.3s;
}
.topbar-brand {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-heading); font-weight: 800; font-size: 0.95rem;
  text-decoration: none; flex-shrink: 0;
}
.topbar-brand .dot { display: none; }
.topbar-brand .brand-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: contain; background: #fff; flex-shrink: 0;
}
.topbar-nav {
  display: flex; gap: 4px; align-items: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.topbar-nav::-webkit-scrollbar { display: none; }
.topbar-nav a {
  color: var(--text-3); text-decoration: none;
  font-size: 0.8rem; font-weight: 600;
  padding: 7px 14px; border-radius: var(--radius-full);
  transition: var(--transition); white-space: nowrap;
}
.topbar-nav a:hover { color: var(--text-1); background: rgba(0, 150, 199, 0.08); }
.topbar-nav a.active {
  color: var(--primary);
  background: rgba(0, 150, 199, 0.1);
}

@media (max-width: 768px) {
  .topbar { top: 8px; padding: 5px 6px 5px 12px; }
  .topbar-brand { font-size: 0.88rem; gap: 6px; }
  .topbar-brand .brand-avatar { width: 24px; height: 24px; }
  .topbar-nav a { padding: 6px 10px; font-size: 0.75rem; }
}
@media (max-width: 480px) {
  .topbar { top: 6px; width: calc(100% - 16px); }
  .topbar-brand { font-size: 0.82rem; }
  .topbar-nav a { padding: 5px 8px; font-size: 0.72rem; }
}

.main {
  flex: 1; max-width: 960px; width: 100%; margin: 0 auto;
  padding: 36px 24px 60px; position: relative; z-index: 1;
}
.main--wide { max-width: 1200px; }
/* Chat page: fixed height, internal scroll */
.main--chat {
  display: flex; flex-direction: column;
  max-width: 720px; padding: 24px 24px 16px;
  height: calc(100dvh - 72px); overflow: hidden;
}
.app-footer { text-align: center; padding: 24px; font-size: 0.78rem; color: var(--text-4); }
.app-footer a { color: var(--text-3); text-decoration: none; margin: 0 10px; transition: color var(--transition); }
.app-footer a:hover { color: var(--primary); }

@media (max-width: 768px) {
  .main { padding: 20px 14px 40px; }
  .main--chat { padding: 16px 12px 12px; height: calc(100dvh - 52px); }
  .app-footer { padding: 16px; font-size: 0.72rem; }
}
@media (max-width: 480px) {
  .main { padding: 16px 10px 32px; }
  .main--chat { padding: 12px 8px 8px; }
}

/* ===== Login Screen ===== */
.login-wrap {
  max-width: 380px; margin: 80px auto; text-align: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  padding: 48px 36px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 0 60px rgba(0, 150, 199, 0.05);
  border: 1px solid rgba(0, 150, 199, 0.1);
}
@media (max-width: 480px) {
  .login-wrap { margin: 40px 16px; padding: 32px 20px; border-radius: var(--radius-md); }
}
.login-logo {
  width: 64px; height: 64px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  animation: floatBob 4s ease-in-out infinite;
}
@keyframes floatBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}