/* Integrated help system — top-nav icon + slide-out panel (js/help.js) */

#icon_help {float: right; margin: 2px 24px 2px 0px; width: 34px; height: 34px; text-align: center; cursor: pointer;}
#icon_help p {color: #fff; font-size: 17px; font-weight: bold; box-sizing: border-box; margin: 4px auto 0; border: 2px solid #fff; border-radius: 50%; width: 26px; height: 26px; line-height: 22px; opacity: 0.85;}
#icon_help:hover p {opacity: 1;}
#icon_help.help-alert p {border-color: #e74c3c; color: #e74c3c; opacity: 1;}

#help_panel {position: fixed; top: 0; right: -400px; width: 380px; height: 100%; background: #fff; border-left: 1px solid #ccc; box-shadow: -2px 0 8px rgba(0,0,0,0.15); z-index: 10000; transition: right 0.25s ease; display: flex; flex-direction: column;}
#help_panel.open {right: 0;}

#help_panel_header {padding: 12px 16px; border-bottom: 1px solid #ddd; background: #2c3e50; color: #fff; flex: 0 0 auto;}
#help_panel_header h2 {margin: 0; font-size: 1.2em; color: #fff; display: inline-block;}
#help_panel_close {float: right; cursor: pointer; font-size: 1.5em; line-height: 1; color: #fff;}

#help_panel_body {padding: 12px 16px; overflow-y: auto; flex: 1 1 auto;}

.help-section {margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #eee;}
.help-section h3 {margin: 0 0 8px 0; font-size: 1em; color: #2c3e50;}
.help-muted {color: #888; font-size: 0.9em;}

.help-article {margin-bottom: 10px;}
.help-article-title {font-weight: bold; cursor: pointer; padding: 4px 0;}
.help-article-title:before {content: '\25B8\00a0';}
.help-article.open .help-article-title:before {content: '\25BE\00a0';}
.help-article-body {display: none; padding: 4px 0 4px 12px; font-size: 0.92em; line-height: 1.45;}
.help-article.open .help-article-body {display: block;}
.help-article-body img {max-width: 100%;}

#help_chat_messages {max-height: 260px; overflow-y: auto; margin-bottom: 8px;}
.help-bubble {padding: 8px 10px; border-radius: 8px; margin: 6px 0; font-size: 0.92em; line-height: 1.4; word-wrap: break-word;}
.help-bubble-user {background: #e8f0fe; margin-left: 30px;}
.help-bubble-assistant {background: #f2f2f2; margin-right: 30px;}
.help-bubble-tools {font-size: 0.85em; margin: -2px 0 8px 4px; color: #888;}
.help-bubble-tools span {cursor: pointer; margin-right: 10px;}
.help-bubble-tools .help-escalate {text-decoration: underline;}
.help-bubble-tools .help-flag-outdated {text-decoration: underline; color: #b0793a;}
.help-bubble-tools .help-flag-outdated.help-flagged {text-decoration: none; cursor: default; color: #7a9a6d;}
.help-rate.help-rated {opacity: 0.4; pointer-events: none;}
.help-rate.help-rated-chosen {opacity: 1;}

#help_chat_controls {display: flex; gap: 6px;}
#help_chat_input {flex: 1 1 auto; resize: vertical; font: inherit; padding: 6px;}

.help-button {background: #2c3e50; color: #fff; border: none; border-radius: 4px; padding: 7px 14px; cursor: pointer; font-size: 0.92em; margin: 4px 6px 4px 0;}
.help-button:hover {background: #3d5266;}
.help-button:disabled {opacity: 0.5; cursor: default;}
.help-button-secondary {background: #aaa;}

#help_ticket_form label {display: block; margin: 8px 0 2px 0; font-size: 0.9em; font-weight: bold;}
#help_ticket_form input[type=text], #help_ticket_form textarea, #help_ticket_form select {width: 100%; box-sizing: border-box; padding: 6px; font: inherit;}
.help-checkbox-label {font-weight: normal !important;}
.help-checkbox-label input {margin-right: 6px;}
#help_ticket_feedback {margin: 6px 0;}

.help-error-message {background: #fdf0ef; border: 1px solid #e8c4c0; border-radius: 4px; padding: 8px; font-size: 0.9em; margin-bottom: 8px; word-wrap: break-word;}
.help-solution {background: #f7f9f7; border: 1px solid #dfe8df; border-radius: 4px; padding: 8px; margin-bottom: 8px; font-size: 0.92em; line-height: 1.4;}
.help-solution-meta {margin-top: 6px; font-size: 0.85em; color: #888;}
.help-solution-meta span {margin-right: 12px;}
.help-solution-admixt {border-color: #e8c4c0; background: #fdf6f5;}
.help-solution-owner {color: #c0392b; font-weight: bold;}
.help-ticket-notice {background: #fff8e6; border: 1px solid #f0d9a0; border-radius: 4px; padding: 8px; margin-bottom: 8px; font-size: 0.9em; line-height: 1.4;}
.help-vote {cursor: pointer;}
.help-vote.help-voted {opacity: 0.4; pointer-events: none;}

.help-clip {margin-bottom: 12px;}
.help-clip-title {font-size: 0.9em; font-weight: bold; margin-bottom: 4px;}
.help-clip video {width: 100%; border-radius: 6px; border: 1px solid #ddd; background: #000;}

.help-guide-row {display: flex; align-items: center; gap: 8px; margin-bottom: 6px;}
.help-guide-row .help-button {margin: 0; padding: 4px 10px; flex: 0 0 auto;}
.help-guide-title {font-size: 0.92em;}
.help-bubble .help-guide-start {display: inline-block; margin-top: 6px;}