.gate-overlay { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 500; padding: 2rem; padding-top: max(2rem, env(safe-area-inset-top)); padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
.gate-box { width: 100%; max-width: 460px; opacity: 0; animation: fadeUp 0.5s ease 0.1s forwards; }
.gate-eyebrow { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.15em; color: var(--accent); text-transform: uppercase; margin-bottom: 1rem; }
.gate-title { font-family: var(--font-serif); font-size: clamp(2rem, 6vw, 2.6rem); font-weight: 400; color: var(--text); line-height: 1.1; margin-bottom: 1.25rem; }
.gate-desc { font-size: 1rem; color: var(--text-mid); font-weight: 300; margin-bottom: 2rem; line-height: 1.6; }

.gate-input-row { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s; }
.gate-input-row:focus-within { border-color: var(--accent); }
.gate-input { flex: 1; background: var(--bg-2); border: none; outline: none; padding: 0.875rem 1.25rem; font-family: var(--font-sans); font-size: max(16px, 1rem); font-weight: 300; color: var(--text); min-width: 0; }
.gate-input::placeholder { color: var(--text-dim); }

.gate-btn { display: flex; align-items: center; gap: 0.5rem; background: var(--accent); border: none; padding: 0.875rem 1.5rem; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; color: #fff; cursor: pointer; letter-spacing: 0.06em; transition: background 0.2s, box-shadow 0.2s, transform 0.15s; white-space: nowrap; min-height: 44px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); -webkit-tap-highlight-color: transparent; }
.gate-btn:hover { background: var(--accent-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 16px rgba(192,57,43,0.4); }
.gate-btn:active { transform: scale(0.98); }
.gate-arrow { transition: transform 0.2s; }
.gate-btn:hover .gate-arrow { transform: translateX(4px); }
.gate-note { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.05em; color: var(--text-dim); }

@keyframes inputShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.input-shake { animation: inputShake 0.35s ease; }

.chat-layout { display: flex; height: 100svh; padding-top: var(--header-h); padding-bottom: env(safe-area-inset-bottom, 0px); }
.chat-sidebar { width: 190px; flex-shrink: 0; background: var(--bg-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem 1.25rem; overflow-y: auto; }
.chat-sidebar-top { display: flex; flex-direction: column; gap: 0.4rem; }
.sidebar-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.sidebar-name { font-family: var(--font-serif); font-size: 1.2rem; color: var(--accent); font-weight: 400; margin-bottom: 0.75rem; }
.sidebar-divider { height: 1px; background: var(--border); margin: 0.5rem 0 0.75rem; }
.sidebar-powered { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-mid); }

.sidebar-new-btn { background: none; border: 1.5px solid var(--border); color: var(--text-dim); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; padding: 10px 12px; border-radius: var(--radius); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s; text-align: left; min-height: 44px; -webkit-tap-highlight-color: transparent; }
.sidebar-new-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); box-shadow: 0 2px 10px rgba(192,57,43,0.15); transform: translateY(-1px); }
.sidebar-new-btn:active { transform: translateY(0); }

.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.chat-messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.msg { display: flex; flex-direction: column; gap: 0.3rem; max-width: 680px; width: 100%; opacity: 0; animation: fadeUp 0.3s ease forwards; }
.msg-user { align-self: flex-end; align-items: flex-end; }
.msg-assistant { align-self: flex-start; align-items: flex-start; }
.msg-sender { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: lowercase; color: var(--text-dim); padding: 0 4px; }
.msg-user .msg-sender { color: var(--accent); }
.msg-bubble { padding: 0.875rem 1.1rem; border-radius: 4px; font-size: 0.9rem; line-height: 1.7; font-weight: 300; word-break: break-word; }
.msg-user .msg-bubble { background: var(--accent-bg); border: 1px solid rgba(192,57,43,0.2); color: var(--text); }
.msg-assistant .msg-bubble { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-left: 2px solid var(--accent); }

.msg-typing .msg-bubble { padding: 1rem 1.1rem; }
.typing-dots { display: flex; gap: 4px; align-items: center; }
.typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); animation: typingBounce 1.2s ease infinite; }
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat-input-bar { flex-shrink: 0; border-top: 1px solid var(--border); padding: 0.875rem 1.5rem; padding-bottom: max(0.875rem, env(safe-area-inset-bottom, 0.875rem)); display: flex; align-items: flex-end; gap: 0.75rem; background: var(--bg); }
.chat-textarea { flex: 1; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; font-family: var(--font-sans); font-size: max(16px, 0.9rem); font-weight: 300; color: var(--text); resize: none; outline: none; line-height: 1.5; max-height: 140px; overflow-y: auto; transition: border-color 0.2s; }
.chat-textarea:focus { border-color: var(--accent); }
.chat-textarea::placeholder { color: var(--text-dim); }

.chat-send-btn { width: 42px; height: 42px; flex-shrink: 0; background: var(--accent); border: none; border-radius: var(--radius); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.12s, box-shadow 0.2s; min-width: 44px; min-height: 44px; box-shadow: 0 2px 8px rgba(192,57,43,0.3); -webkit-tap-highlight-color: transparent; }
.chat-send-btn:hover { background: var(--accent-2); box-shadow: 0 4px 16px rgba(192,57,43,0.45); transform: translateY(-1px); }
.chat-send-btn:active { transform: scale(0.93); }
.chat-send-btn:disabled { background: var(--border); box-shadow: none; cursor: not-allowed; transform: none; }

.chat-mobile-name { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; padding: 6px 1rem; background: var(--accent-bg); border-bottom: 1px solid rgba(192,57,43,0.15); font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em; color: var(--accent); z-index: 90; }

@media (max-width: 600px) {
  .chat-sidebar { display: none; }
  .chat-mobile-name { display: block; }
  .chat-layout { padding-top: calc(var(--header-h) + 30px); }
  .chat-messages { padding: 1.25rem 1rem; gap: 1.25rem; }
  .msg { max-width: 100%; }
  .chat-input-bar { padding: 0.75rem 1rem; padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0.75rem)); gap: 0.5rem; }
}