.chat-guide-page { margin: 0; padding: 14px; color: var(--chat-text); background-color: #0c2c3e; }
.chat-guide-shell { max-width: 900px; margin: 0 auto; border: 1px solid var(--chat-border); border-bottom: 5px solid #269bc0; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.15); overflow: hidden; }
.chat-guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: linear-gradient(110deg,#087cad,#075891); color: #fff; }
.chat-guide-heading h1 { font-size: 1.35rem; line-height: 1.4; margin: 0; }
.chat-guide-heading > span { white-space: nowrap; font-size: .85rem; }
.chat-guide-content { display: flex; align-items: flex-start; gap: 24px; min-height: 300px; padding: 22px; }
.chat-guide-captain { flex: 0 0 auto; width: 160px; max-width: 30%; height: auto; object-fit: contain; }
.chat-guide-text { flex: 1; min-width: 0; line-height: 1.7; overflow-wrap: anywhere; }
.chat-guide-text img { max-width: 100%; height: auto; }
.chat-guide-text h3, .chat-guide-text h4 { font-size: 1.1rem; margin-top: 16px; }
.chat-guide-chapters { display: grid; gap: 8px; }
.chat-guide-chapters a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--chat-border); border-radius: 8px; background: #f5faff; color: #075891; }
.chat-guide-chapters span { font-weight: 600; }
.chat-guide-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--chat-border); background: #f5faff; }
.chat-guide-actions .btn { border-radius: 8px; white-space: normal; }
.chat-guide-home { font-size: .9rem; }
@media(max-width: 480px) { .chat-guide-page { padding: 8px; } .chat-guide-content { padding: 16px; gap: 12px; } .chat-guide-captain { width: 80px; } .chat-guide-actions { padding: 12px; } }