/* Styling adapter for the existing AI page; no request or history code is changed. */
html[data-chat-skin] { height: 100%; scroll-behavior: auto; }
[data-chat-skin] body { height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 0; margin: 0; font: 16px/1.8 var(--font-body); background: var(--surface); color: var(--text); }
[data-chat-skin] header { display: flex; align-items: center; gap: 10px; min-height: 66px; padding: calc(14px + env(safe-area-inset-top, 0px)) max(22px, env(safe-area-inset-right, 0px)) 14px max(22px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--border); background: var(--surface); box-shadow: none; }
[data-chat-skin] header h1 { font-size: 20px; margin: 0; color: var(--text); }
[data-chat-skin] header > span { display: none; }
[data-chat-skin] .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
[data-chat-skin] #chat { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; background: var(--surface-muted); }
[data-chat-skin] .hint { max-width: 520px; margin: 10px auto 22px; font-size: 14px; line-height: 1.85; color: var(--muted); text-align: center; }
[data-chat-skin] .msg { width: fit-content; max-width: min(82%, 680px); margin: 0 0 18px; padding: 12px 17px; border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; font-size: 16px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: none; }
[data-chat-skin] .user { margin-left: auto; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 12%, var(--border)); color: var(--accent-text); border-radius: 14px 14px 4px 14px; }
[data-chat-skin] .bot { background: var(--surface); color: var(--text); }
[data-chat-skin] .bot.error { color: var(--accent-text); background: var(--accent-soft); }
[data-chat-skin] footer { display: flex; align-items: flex-end; gap: 12px; padding: 16px max(20px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--border); background: var(--surface); }
[data-chat-skin] #input { flex: 1; min-width: 0; max-height: 130px; min-height: 48px; padding: 11px 14px; font: 16px/1.6 var(--font-body); color: var(--text); background: var(--surface-muted); border: 1px solid var(--border); border-radius: 11px; resize: none; }
[data-chat-skin] #input::placeholder { color: var(--muted); }
[data-chat-skin] #input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
[data-chat-skin] #send { width: auto; min-height: 47px; padding: 10px 20px; font: 15px/1.6 var(--font-body); color: #fff; background: var(--button-bg); border: 0; border-radius: 11px; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background .18s; }
[data-chat-skin] #send:not(:disabled):active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  [data-chat-skin] #send:hover { background: var(--button-hover); }
}
[data-chat-skin] #send:disabled { opacity: .6; cursor: wait; }
/* The local preview's informational placeholder also follows the site theme. */
[data-chat-skin] body > h2 { font-size: 24px; padding: 32px 28px 0; color: var(--text); margin-bottom: 12px; }
[data-chat-skin] body > p { padding: 0 28px; color: var(--muted); font-size: 15px; }
@media (max-width: 600px) {
  [data-chat-skin] header { padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); min-height: 58px; }
  [data-chat-skin] header h1 { font-size: 18px; }
  [data-chat-skin] #chat { padding: 18px 15px; }
  [data-chat-skin] .msg { max-width: 90%; font-size: 15px; padding: 11px 14px; }
  [data-chat-skin] footer { padding: 12px max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); gap: 9px; }
  [data-chat-skin] #send { padding: 10px 15px; }
}
@media (pointer: coarse) { [data-chat-skin] #input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { [data-chat-skin] #send { transition: none; } [data-chat-skin] #send:active { transform: none; } }
[data-chat-skin][data-reduced-motion='reduce'] #send { transition: none; }
[data-chat-skin][data-reduced-motion='reduce'] #send:active { transform: none; }