/* A conversation room in the manuscript house. Keep the chat viewport geometry intact. */
html body[data-page="chat"] .app-shell { background: linear-gradient(120deg, #e9d8bb, #f2e7d3 48%, #e8d6b8); }
html body[data-page="chat"] .app-shell { grid-template-columns: minmax(0, 1fr); }
html body[data-page="chat"] .app-shell::before,
html body[data-page="chat"] .app-shell::after { display: none; }
html body[data-page="chat"] .main { padding: 12px; }
html body[data-page="chat"] .chat-layout { border: 1px solid #c9ad83; border-radius: 6px 20px 6px 20px; background: #fffaf0; box-shadow: 0 12px 33px rgba(87,60,29,.12); overflow: hidden; }
html body[data-page="chat"] .sidebar.drawer { background: #f3e7d2; border-right-color: #cfb993; }
html body[data-page="chat"] .sidebar-header { background: #e8d8bc; border-bottom-color: #c8ad86; }
html body[data-page="chat"] .sidebar-title { color: #61472f; font-family: var(--font-display); }
html body[data-page="chat"] .session-item { border-radius: 4px 13px 4px 13px; }
html body[data-page="chat"] .session-item:hover { background: #fff8e9; border-color: #cdb58e; }
html body[data-page="chat"] .session-item.active { background: #fff8e9; border-color: #b9825e; color: #774b31; box-shadow: inset 3px 0 #b9825e; }
html body[data-page="chat"] .chat-area { background: radial-gradient(ellipse 65% 200px at 50% 0%, #fffdf7, transparent), #fbf5e8; }
html body[data-page="chat"] .chat-header { min-height: 69px; background: #f0e2c9; border-bottom-color: #d2ba96; padding-inline: clamp(16px, 3vw, 30px); }
html body[data-page="chat"] .chat-header-title { color: #563d2b; font-family: var(--font-display); font-size: 21px; }
html body[data-page="chat"] .chat-status { color: #765e45; }
html body[data-page="chat"] .chat-messages { padding-inline: clamp(14px, 4vw, 42px); background-image: linear-gradient(90deg, transparent 0 97%, rgba(181,143,98,.07) 97% 97.2%, transparent 97.2%); }
html body[data-page="chat"] .chat-welcome { align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, 480px); min-height: 290px; margin: auto 0; padding: 25px 25px 29px; border: 1px solid #d4bd98; border-radius: 5px 22px 5px 22px; background: radial-gradient(circle at 50% 10%, #fffef8, #f8ecd8); box-shadow: 0 8px 18px rgba(89,61,30,.07), inset 0 0 0 5px rgba(255,255,255,.35); color: #59422f; text-align: center; }
html body[data-page="chat"] .chat-welcome img { width: 100px; height: 100px; object-fit: contain; }
html body[data-page="chat"] .chat-welcome-kicker { margin-top: 8px; color: #9a6543; font: 700 10px var(--font-display); letter-spacing: .18em; }
html body[data-page="chat"] .chat-welcome h3 { margin: 10px 0 5px; font: 500 clamp(1.6rem, 4vw, 2.2rem)/1.2 var(--font-display); }
html body[data-page="chat"] .chat-welcome p { color: #78644d; font: 15px/1.6 var(--font-display); }
html body[data-page="chat"] .chat-messages:has(.message-bubble) .chat-welcome { display: none; }
html body[data-page="chat"] .message-bubble { border-radius: 4px 17px 4px 17px; box-shadow: 0 4px 10px rgba(77,51,29,.055); }
html body[data-page="chat"] .message-bubble.assistant { border-color: #d9c4a0; background: #fffdf7; color: #4e392b; }
html body[data-page="chat"] .message-bubble.user { background: #9a6544; color: #fff9ed; }
html body[data-page="chat"] .chat-input-container { border-top-color: #d0b993; background: #efe0c6; padding-inline: clamp(12px, 3vw, 28px); }
html body[data-page="chat"] .chat-input { border-color: #c6a981; border-radius: 5px 15px 5px 15px; background: #fffaf0; color: #4d392a; }
html body[data-page="chat"] .chat-input:focus { border-color: #996849; box-shadow: 0 0 0 3px rgba(153,104,73,.15); }

@media (max-width: 767px) {
  html body[data-page="chat"] .main { padding: 0; }
  html body[data-page="chat"] .chat-layout { border: 0; border-radius: 0; box-shadow: none; }
  html body[data-page="chat"] .chat-welcome { min-height: 250px; padding: 20px; }
  html body[data-page="chat"] .chat-welcome img { width: 80px; height: 80px; }
}
@media (max-width: 1199px) {
  html body[data-page="chat"] .header-nav { display: none; }
}
@media (max-width: 420px) {
  html body[data-page="chat"] .header-right .user-email { display: none; }
  html body[data-page="chat"] .header-content { min-width: 0; gap: 5px; }
}

html[data-theme="dark"] body[data-page="chat"] .app-shell { background: linear-gradient(120deg, #2d261f, #3b3026 50%, #29231e); }
html[data-theme="dark"] body[data-page="chat"] .chat-layout { border-color: #806145; background: #322a23; box-shadow: 0 12px 33px rgba(0,0,0,.25); }
html[data-theme="dark"] body[data-page="chat"] .sidebar.drawer { background: #3b3026; border-right-color: #765a3e; }
html[data-theme="dark"] body[data-page="chat"] .sidebar-header { background: #493a2b; border-bottom-color: #775c3e; }
html[data-theme="dark"] body[data-page="chat"] .sidebar-title,
html[data-theme="dark"] body[data-page="chat"] .chat-header-title { color: #f6e6ce; }
html[data-theme="dark"] body[data-page="chat"] .session-item:hover,
html[data-theme="dark"] body[data-page="chat"] .session-item.active { background: #51402f; border-color: #9e7955; color: #f4dec0; }
html[data-theme="dark"] body[data-page="chat"] .chat-area { background: radial-gradient(ellipse 65% 200px at 50% 0%, #4b3d30, transparent), #332b24; }
html[data-theme="dark"] body[data-page="chat"] .chat-header { background: #493a2b; border-bottom-color: #775b3f; }
html[data-theme="dark"] body[data-page="chat"] .chat-status { color: #d6bea0; }
html[data-theme="dark"] body[data-page="chat"] .chat-welcome { border-color: #896b49; background: radial-gradient(circle at 50% 10%, #514132, #3d3228); box-shadow: 0 8px 18px rgba(0,0,0,.14); color: #f6e6ce; }
html[data-theme="dark"] body[data-page="chat"] .chat-welcome-kicker { color: #deb288; }
html[data-theme="dark"] body[data-page="chat"] .chat-welcome p { color: #dec8aa; }
html[data-theme="dark"] body[data-page="chat"] .message-bubble.assistant { border-color: #806446; background: #493b2e; color: #f4e4cb; }
html[data-theme="dark"] body[data-page="chat"] .message-bubble.user { background: #885c42; color: #fff3e2; }
html[data-theme="dark"] body[data-page="chat"] .chat-input-container { border-top-color: #775d41; background: #403328; }
html[data-theme="dark"] body[data-page="chat"] .chat-input { border-color: #896b48; background: #302821; color: #f3e5ce; }