layouts/custom_task_layout.html

<!-- Customer Service Dialogue QA - Custom Layout -->
<!--
    This layout demonstrates:
    - Sticky header with case information
    - Overall assessment section with grouped ratings
    - Quality issues checklist
    - Professional QA workflow UI
-->

<style>
    /* ========================================
       DIALOGUE QA DASHBOARD STYLES
       ======================================== */

    /* ========================================
       FANCY DIALOGUE DISPLAY STYLES
       ======================================== */

    /* Dialogue container */
    .dialogue-display-content {
        background: #f8fafc;
        border-radius: 12px;
        padding: 16px;
        font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    /* Individual turns */
    .dialogue-turn {
        padding: 12px 16px;
        margin-bottom: 12px;
        border-radius: 12px;
        position: relative;
        transition: all 0.2s ease;
    }

    .dialogue-turn:hover {
        transform: translateX(4px);
    }

    /* Alternating shading */
    .dialogue-turn.turn-even {
        background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
        border-left: 4px solid #e2e8f0;
    }

    .dialogue-turn.turn-odd {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border-left: 4px solid #cbd5e1;
    }

    /* Speaker-specific styling - Agent (speaker-0) */
    .dialogue-turn.speaker-0 {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        border-left: 4px solid #3b82f6;
        margin-right: 20px;
    }

    .dialogue-turn.speaker-0 .dialogue-speaker {
        color: #1d4ed8;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Speaker-specific styling - Customer (speaker-1) */
    .dialogue-turn.speaker-1 {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border-left: 4px solid #22c55e;
        margin-left: 20px;
    }

    .dialogue-turn.speaker-1 .dialogue-speaker {
        color: #166534;
        font-weight: 700;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Turn numbers */
    .turn-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        margin-right: 10px;
    }

    /* Dialogue text */
    .dialogue-text {
        font-size: 15px;
        line-height: 1.6;
        color: #334155;
        display: block;
        margin-top: 6px;
        font-style: normal;
    }

    /* Speaker label */
    .dialogue-speaker {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.05);
    }

    /* Main container */
    .qa-dashboard {
        max-width: 100%;
        margin: 0 auto;
    }

    /* Case header */
    .case-header {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        border: 1px solid #3b82f6;
        border-radius: 8px;
        padding: 16px 20px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .case-title {
        font-size: 18px;
        font-weight: 700;
        color: #1e40af;
        margin: 0;
    }

    .case-meta {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .meta-badge {
        background: white;
        border: 1px solid #93c5fd;
        border-radius: 6px;
        padding: 4px 12px;
        font-size: 12px;
        color: #1e40af;
    }

    .meta-badge strong {
        color: #1d4ed8;
    }

    /* Section styling */
    .qa-section {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
    }

    .section-title {
        font-size: 13px;
        font-weight: 600;
        color: #475569;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 2px solid #64748b;
    }

    /* Overall Assessment Grid */
    .assessment-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    @media (max-width: 768px) {
        .assessment-grid {
            grid-template-columns: 1fr;
        }
    }

    /* Assessment Card */
    .assessment-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 14px;
    }

    .assessment-card-title {
        font-size: 14px;
        font-weight: 600;
        color: #334155;
        margin-bottom: 12px;
    }

    /* Resolution radio options */
    .resolution-options {
        display: flex;
        gap: 8px;
    }

    .resolution-option {
        flex: 1;
        position: relative;
    }

    .resolution-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .resolution-label {
        display: block;
        text-align: center;
        padding: 10px 8px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        border: 2px solid transparent;
    }

    /* Full resolution - Green */
    .resolution-full .resolution-label {
        background: #dcfce7;
        color: #166534;
        border-color: #bbf7d0;
    }
    .resolution-full input:checked + .resolution-label {
        background: #22c55e;
        color: white;
        border-color: #16a34a;
    }
    .resolution-full:hover .resolution-label {
        border-color: #22c55e;
    }

    /* Partial resolution - Yellow */
    .resolution-partial .resolution-label {
        background: #fef3c7;
        color: #92400e;
        border-color: #fde68a;
    }
    .resolution-partial input:checked + .resolution-label {
        background: #f59e0b;
        color: white;
        border-color: #d97706;
    }
    .resolution-partial:hover .resolution-label {
        border-color: #f59e0b;
    }

    /* No resolution - Red */
    .resolution-none .resolution-label {
        background: #fee2e2;
        color: #991b1b;
        border-color: #fecaca;
    }
    .resolution-none input:checked + .resolution-label {
        background: #ef4444;
        color: white;
        border-color: #dc2626;
    }
    .resolution-none:hover .resolution-label {
        border-color: #ef4444;
    }

    /* Effort options */
    .effort-options {
        display: flex;
        gap: 8px;
    }

    .effort-option {
        flex: 1;
        position: relative;
    }

    .effort-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .effort-label {
        display: block;
        text-align: center;
        padding: 10px 8px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        border: 2px solid #e2e8f0;
        background: white;
        color: #64748b;
    }

    .effort-option input:checked + .effort-label {
        background: #3b82f6;
        color: white;
        border-color: #2563eb;
    }

    .effort-option:hover .effort-label {
        border-color: #3b82f6;
    }

    /* Agent Ratings Section */
    .ratings-section {
        background: #fafafa;
    }

    .ratings-section .section-title {
        border-bottom-color: #8b5cf6;
        color: #6d28d9;
    }

    .rating-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .rating-row:last-child {
        border-bottom: none;
    }

    .rating-label {
        font-size: 14px;
        font-weight: 500;
        color: #334155;
        flex: 0 0 150px;
    }

    .rating-scale {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        justify-content: center;
    }

    .scale-label {
        font-size: 11px;
        color: #94a3b8;
        min-width: 70px;
    }

    .scale-label-min {
        text-align: right;
    }

    .scale-label-max {
        text-align: left;
    }

    .likert-options {
        display: flex;
        gap: 8px;
    }

    .likert-option {
        position: relative;
    }

    .likert-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .likert-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 2px solid #e2e8f0;
        background: white;
        font-size: 14px;
        font-weight: 500;
        color: #64748b;
        cursor: pointer;
        transition: all 0.2s;
    }

    .likert-option input:checked + .likert-circle {
        background: #8b5cf6;
        color: white;
        border-color: #7c3aed;
    }

    .likert-option:hover .likert-circle {
        border-color: #8b5cf6;
    }

    /* Recommendation section */
    .recommendation-section {
        background: #fffbeb;
        border-color: #fbbf24;
    }

    .recommendation-section .section-title {
        border-bottom-color: #f59e0b;
        color: #b45309;
    }

    .recommend-options {
        display: flex;
        gap: 16px;
        justify-content: center;
    }

    .recommend-option {
        position: relative;
    }

    .recommend-option input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .recommend-label {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        border: 2px solid transparent;
    }

    .recommend-yes .recommend-label {
        background: #dcfce7;
        color: #166534;
        border-color: #bbf7d0;
    }
    .recommend-yes input:checked + .recommend-label {
        background: #22c55e;
        color: white;
        border-color: #16a34a;
    }
    .recommend-yes:hover .recommend-label {
        border-color: #22c55e;
    }

    .recommend-no .recommend-label {
        background: #fee2e2;
        color: #991b1b;
        border-color: #fecaca;
    }
    .recommend-no input:checked + .recommend-label {
        background: #ef4444;
        color: white;
        border-color: #dc2626;
    }
    .recommend-no:hover .recommend-label {
        border-color: #ef4444;
    }

    /* Quality Issues Section */
    .issues-section {
        background: #fef2f2;
        border-color: #fca5a5;
    }

    .issues-section .section-title {
        border-bottom-color: #ef4444;
        color: #b91c1c;
    }

    .issues-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 8px;
    }

    .issue-option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: white;
        border: 1px solid #fecaca;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .issue-option:hover {
        border-color: #f87171;
    }

    .issue-option input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #ef4444;
    }

    .issue-option input:checked + .issue-label {
        font-weight: 600;
        color: #b91c1c;
    }

    .issue-label {
        font-size: 13px;
        color: #64748b;
        cursor: pointer;
    }

    /* Notes section */
    .notes-section textarea {
        width: 100%;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 12px;
        font-size: 14px;
        resize: vertical;
        min-height: 100px;
    }

    .notes-section textarea:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    /* Hide default form styling */
    .qa-dashboard .annotation-form {
        margin: 0;
        padding: 0;
    }

    .qa-dashboard fieldset {
        border: none;
        margin: 0;
        padding: 0;
    }

    .qa-dashboard legend {
        display: none;
    }
</style>

<div class="annotation_schema qa-dashboard">

    <!-- Case Header -->
    <div class="case-header">
        <h2 class="case-title">Conversation Review</h2>
        <div class="case-meta">
            <span class="meta-badge"><strong>Channel:</strong> Customer Service</span>
            <span class="meta-badge"><strong>Type:</strong> Quality Assessment</span>
        </div>
    </div>

    <!-- Overall Assessment Section -->
    <div class="qa-section">
        <div class="section-title">Overall Assessment</div>

        <div class="assessment-grid">

            <!-- Resolution Card -->
            <div class="assessment-card">
                <div class="assessment-card-title">Issue Resolution</div>
                <form id="resolution" class="annotation-form radio" action="/action_page.php" data-annotation-id="0">
                    <fieldset schema="resolution">
                        <legend>Resolution status</legend>
                        <div class="resolution-options">
                            <div class="resolution-option resolution-full">
                                <input class="resolution annotation-input" type="radio"
                                       id="resolution_full" name="resolution" value="full"
                                       selection_constraint="single" schema="resolution" label_name="full"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <label for="resolution_full" class="resolution-label">Full</label>
                            </div>
                            <div class="resolution-option resolution-partial">
                                <input class="resolution annotation-input" type="radio"
                                       id="resolution_partial" name="resolution" value="partial"
                                       selection_constraint="single" schema="resolution" label_name="partial"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <label for="resolution_partial" class="resolution-label">Partial</label>
                            </div>
                            <div class="resolution-option resolution-none">
                                <input class="resolution annotation-input" type="radio"
                                       id="resolution_none" name="resolution" value="none"
                                       selection_constraint="single" schema="resolution" label_name="none"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <label for="resolution_none" class="resolution-label">None</label>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>

            <!-- Customer Effort Card -->
            <div class="assessment-card">
                <div class="assessment-card-title">Customer Effort</div>
                <form id="customer_effort" class="annotation-form radio" action="/action_page.php" data-annotation-id="1">
                    <fieldset schema="customer_effort">
                        <legend>Customer effort level</legend>
                        <div class="effort-options">
                            <div class="effort-option">
                                <input class="customer_effort annotation-input" type="radio"
                                       id="customer_effort_low" name="customer_effort" value="low"
                                       selection_constraint="single" schema="customer_effort" label_name="low"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <label for="customer_effort_low" class="effort-label">Low</label>
                            </div>
                            <div class="effort-option">
                                <input class="customer_effort annotation-input" type="radio"
                                       id="customer_effort_medium" name="customer_effort" value="medium"
                                       selection_constraint="single" schema="customer_effort" label_name="medium"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <label for="customer_effort_medium" class="effort-label">Medium</label>
                            </div>
                            <div class="effort-option">
                                <input class="customer_effort annotation-input" type="radio"
                                       id="customer_effort_high" name="customer_effort" value="high"
                                       selection_constraint="single" schema="customer_effort" label_name="high"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <label for="customer_effort_high" class="effort-label">High</label>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>

        </div>
    </div>

    <!-- Agent Ratings Section -->
    <div class="qa-section ratings-section">
        <div class="section-title">Agent Performance Ratings</div>

        <!-- Professionalism Rating -->
        <div class="rating-row">
            <div class="rating-label">Professionalism</div>
            <div class="rating-scale">
                <span class="scale-label scale-label-min">Poor</span>
                <form id="professionalism" class="annotation-form likert" action="/action_page.php" data-annotation-id="2">
                    <fieldset schema="professionalism">
                        <legend>Professionalism rating</legend>
                        <div class="likert-options">
                            <label class="likert-option">
                                <input class="professionalism annotation-input" type="radio"
                                       name="professionalism" value="1"
                                       schema="professionalism" label_name="1"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">1</span>
                            </label>
                            <label class="likert-option">
                                <input class="professionalism annotation-input" type="radio"
                                       name="professionalism" value="2"
                                       schema="professionalism" label_name="2"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">2</span>
                            </label>
                            <label class="likert-option">
                                <input class="professionalism annotation-input" type="radio"
                                       name="professionalism" value="3"
                                       schema="professionalism" label_name="3"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">3</span>
                            </label>
                            <label class="likert-option">
                                <input class="professionalism annotation-input" type="radio"
                                       name="professionalism" value="4"
                                       schema="professionalism" label_name="4"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">4</span>
                            </label>
                            <label class="likert-option">
                                <input class="professionalism annotation-input" type="radio"
                                       name="professionalism" value="5"
                                       schema="professionalism" label_name="5"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">5</span>
                            </label>
                        </div>
                    </fieldset>
                </form>
                <span class="scale-label scale-label-max">Excellent</span>
            </div>
        </div>

        <!-- Helpfulness Rating -->
        <div class="rating-row">
            <div class="rating-label">Helpfulness</div>
            <div class="rating-scale">
                <span class="scale-label scale-label-min">Not helpful</span>
                <form id="helpfulness" class="annotation-form likert" action="/action_page.php" data-annotation-id="3">
                    <fieldset schema="helpfulness">
                        <legend>Helpfulness rating</legend>
                        <div class="likert-options">
                            <label class="likert-option">
                                <input class="helpfulness annotation-input" type="radio"
                                       name="helpfulness" value="1"
                                       schema="helpfulness" label_name="1"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">1</span>
                            </label>
                            <label class="likert-option">
                                <input class="helpfulness annotation-input" type="radio"
                                       name="helpfulness" value="2"
                                       schema="helpfulness" label_name="2"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">2</span>
                            </label>
                            <label class="likert-option">
                                <input class="helpfulness annotation-input" type="radio"
                                       name="helpfulness" value="3"
                                       schema="helpfulness" label_name="3"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">3</span>
                            </label>
                            <label class="likert-option">
                                <input class="helpfulness annotation-input" type="radio"
                                       name="helpfulness" value="4"
                                       schema="helpfulness" label_name="4"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">4</span>
                            </label>
                            <label class="likert-option">
                                <input class="helpfulness annotation-input" type="radio"
                                       name="helpfulness" value="5"
                                       schema="helpfulness" label_name="5"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">5</span>
                            </label>
                        </div>
                    </fieldset>
                </form>
                <span class="scale-label scale-label-max">Very helpful</span>
            </div>
        </div>

        <!-- Empathy Rating -->
        <div class="rating-row">
            <div class="rating-label">Empathy</div>
            <div class="rating-scale">
                <span class="scale-label scale-label-min">Cold</span>
                <form id="empathy" class="annotation-form likert" action="/action_page.php" data-annotation-id="4">
                    <fieldset schema="empathy">
                        <legend>Empathy rating</legend>
                        <div class="likert-options">
                            <label class="likert-option">
                                <input class="empathy annotation-input" type="radio"
                                       name="empathy" value="1"
                                       schema="empathy" label_name="1"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">1</span>
                            </label>
                            <label class="likert-option">
                                <input class="empathy annotation-input" type="radio"
                                       name="empathy" value="2"
                                       schema="empathy" label_name="2"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">2</span>
                            </label>
                            <label class="likert-option">
                                <input class="empathy annotation-input" type="radio"
                                       name="empathy" value="3"
                                       schema="empathy" label_name="3"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">3</span>
                            </label>
                            <label class="likert-option">
                                <input class="empathy annotation-input" type="radio"
                                       name="empathy" value="4"
                                       schema="empathy" label_name="4"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">4</span>
                            </label>
                            <label class="likert-option">
                                <input class="empathy annotation-input" type="radio"
                                       name="empathy" value="5"
                                       schema="empathy" label_name="5"
                                       onclick="onlyOne(this);registerAnnotation(this);">
                                <span class="likert-circle">5</span>
                            </label>
                        </div>
                    </fieldset>
                </form>
                <span class="scale-label scale-label-max">Very empathetic</span>
            </div>
        </div>

    </div>

    <!-- Recommendation Section -->
    <div class="qa-section recommendation-section">
        <div class="section-title">Training Recommendation</div>

        <form id="recommend_agent" class="annotation-form radio" action="/action_page.php" data-annotation-id="5">
            <fieldset schema="recommend_agent">
                <legend>Would you recommend this agent for training new hires?</legend>
                <p style="text-align: center; color: #92400e; margin-bottom: 16px; font-size: 14px;">
                    Would you recommend using this interaction as a training example?
                </p>
                <div class="recommend-options">
                    <div class="recommend-option recommend-yes">
                        <input class="recommend_agent annotation-input" type="radio"
                               id="recommend_agent_yes" name="recommend_agent" value="yes"
                               selection_constraint="single" schema="recommend_agent" label_name="yes"
                               onclick="onlyOne(this);registerAnnotation(this);">
                        <label for="recommend_agent_yes" class="recommend-label">&#x2713; Yes, Exemplary</label>
                    </div>
                    <div class="recommend-option recommend-no">
                        <input class="recommend_agent annotation-input" type="radio"
                               id="recommend_agent_no" name="recommend_agent" value="no"
                               selection_constraint="single" schema="recommend_agent" label_name="no"
                               onclick="onlyOne(this);registerAnnotation(this);">
                        <label for="recommend_agent_no" class="recommend-label">&#x2717; No, Needs Improvement</label>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>

    <!-- Quality Issues Section -->
    <div class="qa-section issues-section">
        <div class="section-title">Quality Issues (if any)</div>

        <form id="quality_issues" class="annotation-form multiselect" action="/action_page.php" data-annotation-id="6">
            <fieldset schema="quality_issues">
                <legend>Select any quality issues observed</legend>
                <div class="issues-grid">
                    <label class="issue-option">
                        <input class="quality_issues annotation-input" type="checkbox"
                               id="quality_issues_script_deviation" name="quality_issues" value="script_deviation"
                               schema="quality_issues" label_name="script_deviation"
                               onclick="registerAnnotation(this);">
                        <span class="issue-label">Script Deviation</span>
                    </label>
                    <label class="issue-option">
                        <input class="quality_issues annotation-input" type="checkbox"
                               id="quality_issues_policy_violation" name="quality_issues" value="policy_violation"
                               schema="quality_issues" label_name="policy_violation"
                               onclick="registerAnnotation(this);">
                        <span class="issue-label">Policy Violation</span>
                    </label>
                    <label class="issue-option">
                        <input class="quality_issues annotation-input" type="checkbox"
                               id="quality_issues_missed_opportunity" name="quality_issues" value="missed_opportunity"
                               schema="quality_issues" label_name="missed_opportunity"
                               onclick="registerAnnotation(this);">
                        <span class="issue-label">Missed Opportunity</span>
                    </label>
                    <label class="issue-option">
                        <input class="quality_issues annotation-input" type="checkbox"
                               id="quality_issues_incorrect_info" name="quality_issues" value="incorrect_info"
                               schema="quality_issues" label_name="incorrect_info"
                               onclick="registerAnnotation(this);">
                        <span class="issue-label">Incorrect Information</span>
                    </label>
                    <label class="issue-option">
                        <input class="quality_issues annotation-input" type="checkbox"
                               id="quality_issues_tone_issues" name="quality_issues" value="tone_issues"
                               schema="quality_issues" label_name="tone_issues"
                               onclick="registerAnnotation(this);">
                        <span class="issue-label">Tone Issues</span>
                    </label>
                </div>
            </fieldset>
        </form>
    </div>

    <!-- Notes Section -->
    <div class="qa-section notes-section">
        <div class="section-title">QA Notes</div>

        <form id="qa_notes" class="annotation-form text" action="/action_page.php" data-annotation-id="7">
            <fieldset schema="qa_notes">
                <legend>Additional notes</legend>
                <textarea class="qa_notes annotation-input"
                          id="qa_notes_textarea"
                          name="qa_notes"
                          schema="qa_notes"
                          label_name="notes"
                          rows="4"
                          placeholder="Document specific observations, coaching points, or notable moments from the conversation..."
                          oninput="registerTextAnnotation(this);"></textarea>
            </fieldset>
        </form>
    </div>

</div>