.explorer-shell { max-width: 940px; margin: 0 auto; color: #242424; }
.explorer-intro { padding: 18px 0 8px; }
.explorer-intro iframe { display: block; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.explorer-toolbar, .composer-actions, .suggested-questions, .dialog-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.explorer-shell button, #episode-browser button { font: inherit; cursor: pointer; border: 1px solid #cfc6b3; border-radius: 8px; padding: 10px 14px; background: #fffaf0; color: #29251d; }
.explorer-shell button:hover, #episode-browser button:hover { background: #fff0c9; }
.explorer-shell button:disabled { opacity: .55; cursor: wait; }
.explorer-composer textarea:disabled { background: #f1eee7; color: #575044; cursor: wait; opacity: 1; }
.explorer-shell button:focus-visible, .explorer-shell textarea:focus-visible, #episode-browser input:focus-visible { outline: 3px solid #9b6b12; outline-offset: 3px; }
.explorer-toolbar { padding: 12px 0 18px; border-bottom: 1px solid #e5dcc9; }
.episode-focus { padding: 10px 0; font-size: .9rem; color: #665126; }
.episode-focus:empty { display: none; }
.explorer-history { display: grid; gap: 18px; padding: 14px 0 22px; overflow-wrap: anywhere; }
.explorer-message, .welcome-message { border: 1px solid #e4dfd4; border-radius: 12px; padding: 20px; background: #fff; }
.explorer-shell .quickstart-hint { padding: 6px 0; border: 0; border-radius: 0; background: transparent; color: #756e62; font-size: .82rem; }
.quickstart-hint > p { margin: 0 0 7px; }
.quickstart-hint .suggested-questions { gap: 6px; }
.explorer-shell .quickstart-hint button { font-size: .78rem; padding: 5px 9px; border-radius: 6px; border-color: #e4dfd4; background: #faf9f5; color: #665f53; }
.explorer-message h2 { font-size: .85rem; margin: 0 0 12px; color: #6a6559; text-transform: uppercase; letter-spacing: .06em; }
.explorer-message.user-message { background: #fff8e8; margin-left: 0; }
.source-label { display: inline-block; background: #fff0c4; border-radius: 6px; padding: 6px 9px; margin: 0 6px 12px 0; font-size: .9rem; font-weight: 600; }
.episode-card { padding: 14px 0; border-top: 1px solid #e9e3d6; }
.episode-card p { font-size: .95rem; }
.explorer-composer { border: 1px solid #d7ccb5; border-radius: 12px; padding: 18px; background: #fffdf7; }
.explorer-composer label, #episode-browser label { display: block; font-weight: 600; margin-bottom: 8px; }
.composer-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; }
.composer-heading label { margin-bottom: 0; }
.composer-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.explorer-shell .composer-shortcuts button { font-size: .78rem; padding: 5px 9px; border-radius: 6px; }
.explorer-composer textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; font: inherit; line-height: 1.5; padding: 12px; border: 1px solid #c9bfae; border-radius: 8px; background: #fff; color: #242424; }
.composer-actions { margin-top: 12px; }
.explorer-composer #ask-button { background: #fad56f; font-weight: 700; min-width: 90px; }
.explorer-status { margin-top: 12px; font-size: .9rem; overflow-wrap: anywhere; }
.explorer-status strong, .explorer-status small, #explorer-progress { display: block; }
.explorer-status small { margin-top: 6px; color: #625334; }
.explorer-shell[data-processing="true"] { padding-bottom: 150px; }
.explorer-shell[data-processing="true"] .explorer-status {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000;
    width: min(680px, calc(100% - 32px)); box-sizing: border-box; margin: 0; padding: 20px;
    display: flex; align-items: center; gap: 16px; background: #fff3cb; color: #332708;
    border: 2px solid #bd8617; border-radius: 12px; box-shadow: 0 8px 32px rgb(0 0 0 / .2);
}
.explorer-status strong { font-size: 1.05rem; margin-bottom: 4px; }
.processing-spinner { width: 28px; height: 28px; flex: 0 0 28px; border: 3px solid #ddc792;
    border-top-color: #795100; border-radius: 50%; animation: explorer-spin .85s linear infinite; }
@keyframes explorer-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .processing-spinner { animation: none; } }
#episode-choices { padding: 18px; margin-bottom: 20px; border: 2px solid #e7c879; border-radius: 12px; }
.episode-choice { display: flex; gap: 10px; padding: 10px 0; align-items: flex-start; }
.episode-choice input { width: auto; margin-top: 5px; flex-shrink: 0; }
.choices-list { max-height: 400px; overflow-y: auto; margin-bottom: 14px; }
.explorer-help { padding: 22px 0; color: #5e584c; }
.explorer-help summary { cursor: pointer; font-weight: 600; }
#episode-browser { border: 1px solid #cec2a8; border-radius: 14px; width: min(700px, 90vw); max-height: 80vh; padding: 22px; }
#episode-browser::backdrop { background: rgb(0 0 0 / .35); }
.dialog-heading { justify-content: space-between; }
#episode-filter { width: 100%; box-sizing: border-box; font: inherit; padding: 10px; margin-bottom: 10px; }
#browse-results { max-height: 50vh; overflow-y: auto; }
#browse-results button { display: block; width: 100%; margin: 6px 0; text-align: left; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .explorer-message, .welcome-message, .explorer-composer { padding: 14px; }
  .explorer-toolbar button { flex: 1 1 auto; font-size: .85rem; padding: 9px; }
  .explorer-intro .lede { font-size: 1rem; }
}