
 :root { --bubble-max-width: 80%; --bubble-bg-color: #ffffff; --bubble-arrow-color: #ffffff; --icon-size: 64px; }
 body { font-family: 'Noto Sans JP', sans-serif; margin: 0; padding: 15px; background-color: #f3f4f6; font-size: 16px; line-height: 1.7; color: #333; }
 .log-export-container { max-width: 900px; margin: 20px auto; background-color: rgb(243, 244, 246); padding: 20px 25px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
 h1 { font-size: 1.7em; color: #111; border-bottom: 2px solid #eee; padding-bottom: 10px; margin: 0 0 25px 0; text-align: center; }
 .filter-controls.export { background-color: #f8f9fa; padding: 10px 15px; border-radius: 6px; margin-bottom: 20px; border: 1px solid #dee2e6; display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
 .filter-section { display: flex; align-items: center; gap: 8px; } .filter-section label { font-weight: bold; font-size: 0.9em; color: #495057; }
 .tab-nav.export { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 5px; }
 .tab-button.export { background-color: #e9ecef; border: 1px solid #ced4da; color: #495057; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 0.85em; transition: background-color 0.2s, color 0.2s; white-space: nowrap; } .tab-button.export:hover { background-color: #dee2e6; } .tab-button.export.active { background-color: #0d6efd; border-color: #0d6efd; color: white; font-weight: bold; }
 .speaker-filter.export { padding: 5px 8px; border: 1px solid #ced4da; border-radius: 4px; font-size: 0.9em; background-color: white; min-width: 150px; }
 .tab-nav.export .placeholder { font-size: 0.85em; color: #6c757d; }
 .log-display.export { margin-top: 10px; } .hidden-log-item { display: none !important; } .log-item { margin-bottom: 16px; }
 .message-item.export { position: relative; } .message-container.export { display: flex; align-items: flex-start; } .narration-container.export { padding: 2px 4px; line-height: inherit; color: #333; }
 .message-item.export[data-display-mode="narration"] .message-container.export { display: none; } .message-item.export[data-display-mode="bubble"] .narration-container.export { display: none; }
 .icon-container.export { flex-shrink: 0; margin-right: 12px; width: var(--icon-size); height: var(--icon-size); position: relative; border-radius: 50%; }
 .icon.export { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 0%; border: 3px solid; box-sizing: border-box; background-color: #f0f0f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
 .icon-placeholder.export { display: none; width: 100%; height: 100%; border-radius: 50%; border: 3px solid; box-sizing: border-box; background-color: #e0e0e0; color: #757575; font-weight: bold; text-align: center; overflow: hidden; text-transform: uppercase; line-height: 58px; font-size: 32px; }
 .content-container.export { flex-grow: 1; min-width: 0; }
 .speaker-name-default.export { display: block; font-weight: bold; margin-bottom: 4px; color: #1a1a1a; font-size: 0.9em; } .original-tab.export { font-weight: normal; font-size: 0.88em; color: #555; margin-left: 6px; }
 .tab-name-below-icon.export { display: none; font-size: 0.8em; color: #666; margin-bottom: 2px; }
 .speaker-name-below-icon.export { display: none; font-size: 0.85em; font-weight: bold; color: #333; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff; position: absolute; bottom: -1.5em; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(var(--icon-size) + 20px); line-height: 1.1; text-align: center; pointer-events: none; }
 .bubble.export { position: relative; padding: 10px 15px; border-radius: 16px; word-wrap: break-word; word-break: break-word; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); background-color: var(--bubble-bg-color); max-width: var(--bubble-max-width); }
 .bubble-left.export { margin-left: 0; } .bubble-left.export::before { content: ""; position: absolute; top: 10px; left: -8px; width: 0; height: 0; border-style: solid; border-width: 8px 10px 8px 0; border-color: transparent var(--bubble-arrow-color) transparent transparent; }
 .bubble.export a { color: #0066cc; text-decoration: underline; } .bubble.export a:hover { color: #004c99; text-decoration: none; }
 .message-item.export[data-display-mode="narration"] .narration-tab, .message-item.export[data-display-mode="narration"] .narration-speaker { display: none; }
 .narration-tab { font-size: 0.8em; color: #666; margin-right: 0.5em; } .narration-speaker { font-weight: bold; margin-right: 0.25em; } .narration-message { display: inline; }
 body.name-below-icon-active .icon-container.export { margin-bottom: 1.8em; overflow: visible; } body.name-below-icon-active .speaker-name-default.export { display: none; } body.name-below-icon-active .tab-name-below-icon.export { display: block; } body.name-below-icon-active .speaker-name-below-icon.export { display: block; } body.name-below-icon-active .bubble-left.export { margin-left: 0; } body.name-below-icon-active .bubble-left.export::before { left: -8px; } body.name-below-icon-active .action-button-container { margin-left: 0; }
 .inserted-image-container.export { text-align: center; } .inserted-image.export { max-width: 85%; max-height: 550px; border-radius: 6px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); display: block; margin: 0 auto; }
 .image-caption.export { font-size: 0.9em; color: #444; margin-top: 6px; padding: 0 5%; line-height: 1.4; }
 .image-error-placeholder.export { color: #d9534f; font-size: 0.9em; font-weight: bold; margin-top: 8px; padding: 5px; background-color: #f2dede; border: 1px solid #ebccd1; border-radius: 4px; display: inline-block; }
 .tab-separator.export { border: 0; border-top: 2px dashed #cccccc; margin: 25px 5%; display: none; }
 .error-message.export { background-color: #fff3cd; border: 1px solid #ffeeba; color: #856404; padding: 10px 15px; border-radius: 4px; margin: 15px 0; font-size: 0.9em; } .error-message.export strong { font-weight: bold; } .error-message.export small { color: #66512c; display: block; margin-top: 4px; }
 .empty-log-message.export { text-align: center; color: #666; font-style: italic; padding: 30px; }
 .export-error { color: red; font-weight: bold; text-align: center; margin: 10px; padding: 5px; border: 1px solid red; background-color: #ffeeee; }
 @media (max-width: 768px) { body { padding: 10px; font-size: 15px; } .log-export-container { padding: 15px; } h1 { font-size: 1.5em; margin-bottom: 20px; } .filter-controls.export { flex-direction: column; align-items: stretch; } .filter-section { flex-direction: column; align-items: flex-start; width: 100%; } .tab-nav.export { justify-content: center; } .speaker-filter.export { width: 100%; } .icon-container.export { width: 48px; height: 48px; margin-right: 10px; } .icon-placeholder.export { line-height: 43px; font-size: 24px; } .bubble.export { padding: 8px 12px; } .bubble-left.export::before { top: 8px; left: -7px; border-width: 7px 9px 7px 0;} .speaker-name-default.export { font-size: 0.92em; } .original-tab.export { font-size: 0.82em; } .tab-name-below-icon.export { font-size: 0.75em; } .speaker-name-below-icon.export { font-size: 0.8em; max-width: calc(48px + 15px); bottom: -1.3em; } body.name-below-icon-active .icon-container.export { margin-bottom: 1.5em; } .inserted-image.export { max-width: 95%; max-height: 400px; } .image-caption.export { font-size: 0.85em; padding: 0 2%; } .tab-separator.export { margin: 20px 3%; } }
 