{% extends '@syndexAcademic/main_layout.html.twig' %}

{% trans_default_domain "Academia" %}
{% set locale = app.request.locale %}

{% block og_title %}
    {% if research.arabicFullTitle is not null %} 
        {{ research.arabicFullTitle }}
    {% else %}
        {{ research.englishFullTitle }}
    {% endif %}
{% endblock %}

{% block og_url %}{{ app.request.scheme ~'://' ~ app.request.httpHost ~ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}{% endblock %}
{% block og_description %}{{ research.arabicAbstract[0:200] }}{% endblock %}

{% block title %}
    {% if research.arabicFullTitle is not null %}
        {{ research.arabicFullTitle }} 
    {% else %}
        {{ research.englishFullTitle }}
    {% endif %}
{% endblock %}

{% block structured_data %}
    <link rel="amphtml" href="{{ path('shamra_academia_research_show_amp', {'slug': research.slug}) }}">
{% endblock %}

{% block css %}
    <style>
        .research-meta {
            color: #666;
            margin: 10px 0;
        }
        .research-meta i {
            margin-left: 5px;
            color: #888;
        }
        .abstract-section {
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 25px;
            margin: 20px 0;
        }
        .abstract-section h3 {
            color: #333;
            margin-bottom: 15px;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
        }
        /* Tabbed Abstract Styling */
        .abstract-tabs-container {
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin: 20px 0;
            overflow: hidden;
        }
        .abstract-tabs {
            display: flex;
            background: #f8f9fa;
            border-bottom: 1px solid #e0e0e0;
        }
        .abstract-tab {
            flex: 1;
            padding: 14px 20px;
            text-align: center;
            cursor: pointer;
            font-weight: 600;
            color: #666;
            border: none;
            background: transparent;
            transition: all 0.2s ease;
            position: relative;
        }
        .abstract-tab:hover {
            color: #333;
            background: #f0f0f0;
        }
        .abstract-tab.active {
            color: #007bff;
            background: #fff;
        }
        .abstract-tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 3px;
            background: #007bff;
        }
        .abstract-tab i {
            margin-left: 8px;
        }
        .abstract-content {
            padding: 25px;
            position: relative;
        }
        .abstract-panel {
            display: none;
            line-height: 1.9;
            text-align: justify;
            color: #333;
        }
        .abstract-panel.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        .abstract-panel[dir="ltr"] {
            text-align: left;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        /* Abstract Action Buttons */
        .abstract-actions {
            display: flex;
            gap: 8px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        .abstract-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background: #f8f9fa;
            color: #555;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .abstract-action-btn:hover {
            background: #e9ecef;
            border-color: #ccc;
            color: #333;
        }
        .abstract-action-btn.copied {
            background: #d4edda;
            border-color: #28a745;
            color: #155724;
        }
        .abstract-action-btn.playing {
            background: #cce5ff;
            border-color: #007bff;
            color: #004085;
        }
        /* Expandable Abstract */
        .abstract-text-wrapper {
            position: relative;
        }
        .abstract-text {
            line-height: 1.9;
            text-align: justify;
            color: #333;
            transition: max-height 0.3s ease;
        }
        .abstract-text.collapsed {
            max-height: 200px;
            overflow: hidden;
        }
        .abstract-text.collapsed::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(transparent, white);
            pointer-events: none;
        }
        .abstract-text[dir="ltr"] {
            text-align: left;
        }
        .expand-toggle {
            display: none;
            margin-top: 10px;
            padding: 8px 16px;
            border: none;
            background: transparent;
            color: #007bff;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: color 0.2s;
        }
        .expand-toggle:hover {
            color: #0056b3;
            text-decoration: underline;
        }
        .expand-toggle.visible {
            display: inline-block;
        }
        .field-tags {
            margin: 15px 0;
        }
        .field-tag {
            display: inline-block;
            background: #e9ecef;
            color: #495057;
            padding: 5px 12px;
            border-radius: 15px;
            margin: 3px;
            font-size: 13px;
            text-decoration: none;
            transition: background-color 0.2s, color 0.2s;
        }
        .field-tag:hover {
            background: #007bff;
            color: white;
            text-decoration: none;
        }
        .keyword-tags {
            margin: 15px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            align-items: center;
        }
        .keyword-tag-wrap.keyword-hidden {
            display: none;
        }
        .keyword-tags.expanded .keyword-tag-wrap.keyword-hidden {
            display: inline-flex;
        }
        .keyword-toggle-btn {
            display: inline-flex;
            align-items: center;
            background: #e2e8f0;
            color: #64748b;
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 13px;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            margin-right: 4px;
        }
        .keyword-toggle-btn:hover {
            background: #cbd5e1;
            color: #475569;
        }
        .keyword-toggle-btn i {
            margin-left: 4px;
            font-size: 11px;
        }
        html[dir="ltr"] .keyword-toggle-btn i {
            margin-left: 0;
            margin-right: 4px;
        }
        .keyword-tag-wrap {
            display: inline-flex;
            align-items: center;
            background: #d4edda;
            border-radius: 15px;
            transition: background-color 0.2s;
        }
        .keyword-tag-wrap:hover {
            background: #c3e6cb;
        }
        .keyword-tag {
            display: inline-block;
            color: #155724;
            padding: 5px 4px 5px 12px;
            font-size: 13px;
            text-decoration: none;
            transition: color 0.2s;
        }
        html[dir="ltr"] .keyword-tag {
            padding: 5px 12px 5px 4px;
        }
        .keyword-tag:hover {
            color: #0b2e13;
            text-decoration: underline;
        }
        .es-tag-follow-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            margin-left: 2px;
            margin-right: 4px;
        }
        html[dir="ltr"] .es-tag-follow-btn {
            margin-left: 4px;
            margin-right: 2px;
        }
        .es-tag-not-following {
            color: #94a3b8;
            background: transparent;
        }
        .es-tag-not-following:hover {
            color: #f59e0b;
            background: rgba(245, 158, 11, 0.15);
        }
        .es-tag-following {
            color: #f59e0b;
            background: rgba(245, 158, 11, 0.15);
        }
        .es-tag-following:hover {
            color: #dc2626;
            background: rgba(220, 38, 38, 0.1);
        }
        .es-tag-follow-btn .fa-spinner {
            font-size: 11px;
        }
        /* Bell follow hint */
        .tag-follow-hint {
            display: none;
            align-items: center;
            gap: 6px;
            margin-top: 8px;
            padding: 6px 12px;
            background: rgba(245, 158, 11, 0.08);
            border: 1px solid rgba(245, 158, 11, 0.2);
            border-radius: 8px;
            font-size: 12px;
            color: #92400e;
            animation: hintSlideIn 0.5s ease;
        }
        .tag-follow-hint .hint-arrow {
            color: #f59e0b;
            font-size: 14px;
            animation: bounceArrow 1s ease infinite;
        }
        .tag-follow-hint .hint-dismiss {
            margin-right: auto;
            margin-left: 8px;
            cursor: pointer;
            color: #b45309;
            font-size: 13px;
            opacity: 0.6;
        }
        html[dir="ltr"] .tag-follow-hint .hint-dismiss {
            margin-left: auto;
            margin-right: 8px;
        }
        .tag-follow-hint .hint-dismiss:hover {
            opacity: 1;
        }
        @keyframes bounceArrow {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }
        @keyframes hintSlideIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .download-section {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            text-align: center;
        }
        .action-buttons-row {
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
        }
        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 24px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 15px;
            flex: 1;
            max-width: 200px;
            min-width: 140px;
            transition: all 0.2s ease;
            border: none;
            cursor: pointer;
        }
        .action-btn-download {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
        }
        .action-btn-download:hover {
            background: linear-gradient(135deg, #1e7e34 0%, #17a085 100%);
            color: white;
            text-decoration: none;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
        }
        .action-btn-share {
            background: linear-gradient(135deg, #1a73a7 0%, #4facfe 100%);
            color: white;
        }
        .action-btn-share:hover {
            background: linear-gradient(135deg, #155d88 0%, #3d9ae0 100%);
            color: white;
            text-decoration: none;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(26, 115, 167, 0.3);
        }
        .action-btn-disabled {
            background: #6c757d;
            color: white;
            cursor: not-allowed;
        }
        @media (max-width: 480px) {
            .action-buttons-row {
                gap: 8px;
            }
            .action-btn {
                padding: 12px 16px;
                font-size: 13px;
                min-width: 120px;
            }
        }
        /* Legacy support */
        .download-btn {
            display: inline-block;
            padding: 15px 30px;
            border-radius: 5px;
            text-decoration: none;
            margin: 5px;
            font-weight: 500;
            font-size: 16px;
        }
        .download-btn-primary {
            background: #28a745;
            color: white;
        }
        .download-btn-primary:hover {
            background: #1e7e34;
            color: white;
            text-decoration: none;
        }
        .download-btn-disabled {
            background: #6c757d;
            color: white;
            cursor: not-allowed;
        }
        .authors-list {
            margin: 15px 0;
        }
        .author-name {
            display: inline-block;
            background: #fff3cd;
            color: #856404;
            padding: 5px 12px;
            border-radius: 15px;
            margin: 3px;
            font-size: 13px;
        }
        /* Read Also Section */
        .read-also-section {
            margin-top: 40px;
            padding-top: 30px;
            border-top: 2px solid #e0e0e0;
        }
        .read-also-section h3 {
            color: #333;
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .read-also-section h3 i {
            color: #00a550;
            margin-left: 8px;
        }
        .read-also-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
        }
        .read-also-grid .research-card {
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 18px;
            transition: all 0.2s ease;
        }
        .read-also-grid .research-card:hover {
            box-shadow: 0 4px 15px rgba(0, 165, 80, 0.15);
            border-color: #00a550;
        }
        .read-also-grid .research-title a {
            font-size: 15px;
            font-weight: 600;
            line-height: 1.5;
            color: #333;
        }
        .read-also-grid .research-title a:hover {
            color: #00a550;
        }
        .read-also-grid .research-details {
            font-size: 13px;
            color: #666;
            margin-top: 10px;
        }
        .read-also-grid .research-abstract {
            font-size: 13px;
            color: #555;
            margin-top: 10px;
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        @media (max-width: 768px) {
            .read-also-grid {
                grid-template-columns: 1fr;
            }
        }
        .promo-box {
            display: none;
            border-radius: 10px;
            padding: 18px 22px;
            margin-bottom: 20px;
            color: #fff;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .promo-box:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        }
        .promo-box.active {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .promo-box .promo-content h4 {
            margin: 0 0 6px 0;
            font-size: 16px;
            font-weight: 700;
        }
        .promo-box .promo-content p {
            margin: 0;
            font-size: 13px;
            opacity: 0.9;
        }
        .promo-box .promo-cta {
            display: inline-block;
            padding: 8px 20px;
            border-radius: 20px;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            white-space: nowrap;
            margin-right: 15px;
        }
        .promo-playground {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .promo-playground .promo-cta {
            background: #fff;
            color: #667eea;
        }
        .promo-ocr {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        .promo-ocr .promo-cta {
            background: #fff;
            color: #f5576c;
        }
        .promo-references {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        .promo-references .promo-cta {
            background: #fff;
            color: #4facfe;
        }
        @media (max-width: 768px) {
            .promo-box.active {
                flex-direction: column;
                text-align: center;
            }
            .promo-box .promo-cta {
                margin: 10px 0 0 0;
            }
        }

        /* Share to Profile - legacy, now uses .action-btn-share */
        .es-share-btn {
            display: inline-block;
            padding: 10px 20px;
            background: #1a73a7;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            margin: 5px;
            text-decoration: none;
        }
        .es-share-btn:hover {
            background: #155d88;
            color: #fff;
            text-decoration: none;
        }
        .share-modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }
        .share-modal-overlay.active {
            display: flex;
        }
        .share-modal {
            background: #fff;
            border-radius: 12px;
            max-width: 540px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            animation: shareModalIn 0.25s ease-out;
        }
        @keyframes shareModalIn {
            from { opacity: 0; transform: translateY(20px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .share-modal-header {
            padding: 20px 24px 12px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .share-modal-header h4 { margin: 0; font-size: 16px; color: #333; }
        .share-modal-close {
            background: none; border: none; font-size: 22px;
            color: #999; cursor: pointer; padding: 0 4px; line-height: 1;
        }
        .share-modal-close:hover { color: #333; }
        .share-modal-body { padding: 20px 24px; }
        .share-modal-textarea {
            width: 100%; min-height: 80px; border: 1px solid #ddd;
            border-radius: 8px; padding: 12px; font-size: 14px;
            resize: vertical; font-family: inherit; direction: auto;
        }
        .share-modal-textarea:focus {
            outline: none; border-color: #1a73a7;
            box-shadow: 0 0 0 2px rgba(26,115,167,0.15);
        }
        .share-paper-preview {
            margin-top: 14px; padding: 14px; background: #f8f9fa;
            border: 1px solid #e9ecef; border-radius: 8px;
            border-right: 3px solid #1a73a7;
        }
        html[dir="ltr"] .share-paper-preview {
            border-right: none; border-left: 3px solid #1a73a7;
        }
        .share-paper-preview h5 {
            margin: 0 0 6px; font-size: 14px; color: #333; line-height: 1.4;
        }
        .share-paper-preview .paper-meta { font-size: 12px; color: #888; margin: 0; }
        .share-paper-preview .paper-abstract-snippet {
            font-size: 13px; color: #555; margin-top: 8px; line-height: 1.5;
            display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
        }
        .share-modal-footer {
            padding: 14px 24px 20px; display: flex;
            justify-content: flex-end; gap: 10px;
        }
        .share-btn-cancel {
            padding: 8px 20px; border: 1px solid #ddd; background: #fff;
            border-radius: 6px; cursor: pointer; font-size: 14px; color: #666;
        }
        .share-btn-cancel:hover { background: #f5f5f5; }
        .share-btn-submit {
            padding: 8px 24px; border: none; background: #1a73a7; color: #fff;
            border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;
        }
        .share-btn-submit:hover { background: #155d88; }
        .share-btn-submit:disabled { background: #aaa; cursor: not-allowed; }
        .share-success-msg {
            display: none; text-align: center; padding: 30px 24px;
        }
        .share-success-msg i { font-size: 48px; color: #28a745; margin-bottom: 12px; }
        .share-success-msg p { font-size: 16px; color: #333; margin: 8px 0 0; }
        .share-success-msg .go-to-feed-link { display: inline-block; margin-top: 16px; color: #1a73e8; text-decoration: none; font-weight: 500; font-size: 14px; }
        .share-success-msg .go-to-feed-link:hover { text-decoration: underline; }
        .share-success-msg .go-to-feed-link i { font-size: 12px; color: #1a73e8; margin: 0 4px 0 0; }
        
        /* AI Tools Section */
        .ai-tools-section {
            background: linear-gradient(135deg, #f8fdf9 0%, #f0f9f4 100%);
            border: 1px solid #c8e6d0;
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0;
        }
        .ai-tools-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .ai-tools-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #00a550 0%, #008a43 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        .ai-tools-title {
            font-weight: 600;
            font-size: 15px;
            color: #333;
        }
        .ai-tools-credits {
            margin-right: auto;
            font-size: 13px;
            color: #666;
            background: white;
            padding: 4px 10px;
            border-radius: 12px;
            border: 1px solid #e0e0e0;
        }
        .ai-tools-credits i { color: #ffc107; margin-left: 4px; }
        .ai-tools-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .ai-tool-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .ai-tool-ask {
            background: linear-gradient(135deg, #00a550 0%, #008a43 100%);
            color: white;
        }
        .ai-tool-ask:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,165,80,0.3);
        }
        .ai-tool-cost {
            background: rgba(255,255,255,0.25);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
        }
        
        /* Chat Panel */
        .ai-chat-panel {
            display: none;
            background: white;
            border-radius: 12px;
            border: 1px solid #e0e0e0;
            margin-top: 16px;
            overflow: hidden;
        }
        .ai-chat-panel.active {
            display: block;
        }
        .ai-chat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: linear-gradient(135deg, #00a550 0%, #008a43 100%);
            color: white;
            font-weight: 600;
        }
        .ai-chat-close {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 0 4px;
            line-height: 1;
            opacity: 0.8;
        }
        .ai-chat-close:hover { opacity: 1; }
        .ai-chat-messages {
            padding: 16px;
            max-height: 400px;
            overflow-y: auto;
            min-height: 150px;
        }
        .ai-chat-welcome p {
            color: #666;
            margin-bottom: 12px;
            text-align: center;
        }
        .ai-quick-questions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
        }
        .ai-suggestion-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: #f0f9f4;
            border: 1px solid #00a550;
            border-radius: 20px;
            color: #00a550;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .ai-suggestion-chip:hover {
            background: #00a550;
            color: white;
        }
        .ai-suggestion-chip i { font-size: 12px; }
        .ai-chat-input-area {
            display: flex;
            gap: 8px;
            padding: 12px 16px;
            border-top: 1px solid #e0e0e0;
            background: #f9f9f9;
        }
        .ai-chat-input {
            flex: 1;
            padding: 10px 14px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            outline: none;
        }
        .ai-chat-input:focus { border-color: #00a550; }
        .ai-chat-send {
            padding: 10px 16px;
            background: #00a550;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        .ai-chat-send:hover { background: #008a43; }
        .ai-chat-send:disabled { background: #ccc; cursor: not-allowed; }
        
        /* Messages */
        .ai-message {
            padding: 14px 18px;
            border-radius: 12px;
            margin-bottom: 12px;
            max-width: 90%;
            line-height: 1.6;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .ai-message-user {
            background: #00a550;
            color: white;
            margin-right: auto;
            border-bottom-left-radius: 4px;
        }
        .ai-message-ai {
            background: #f8f9fa;
            color: #333;
            margin-left: auto;
            border-bottom-right-radius: 4px;
            border: 1px solid #e9ecef;
        }
        .ai-message-ai .ai-response-content {
            padding-bottom: 8px;
        }
        .ai-message-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid #e0e0e0;
        }
        .ai-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 12px;
            color: #666;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .ai-action-btn:hover {
            background: #f0f0f0;
            border-color: #ccc;
            color: #333;
        }
        .ai-action-btn.copied {
            background: #e8f5e9;
            border-color: #00a550;
            color: #00a550;
        }
        .ai-action-btn i { font-size: 11px; }
        .ai-message-error {
            background: #fff0f0;
            color: #c00;
            border: 1px solid #ffcdd2;
        }
        .ai-loading {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 16px 20px;
        }
        .ai-loading span {
            width: 8px;
            height: 8px;
            background: #00a550;
            border-radius: 50%;
            animation: aiLoadingBounce 1.4s infinite ease-in-out both;
        }
        .ai-loading span:nth-child(1) { animation-delay: -0.32s; }
        .ai-loading span:nth-child(2) { animation-delay: -0.16s; }
        .ai-loading span:nth-child(3) { animation-delay: 0s; }
        @keyframes aiLoadingBounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }
        
        /* Auth Modal */
        .ai-auth-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }
        .ai-auth-modal-overlay.active {
            display: flex;
        }
        .ai-auth-modal {
            background: white;
            border-radius: 16px;
            padding: 32px;
            max-width: 400px;
            width: 90%;
            text-align: center;
            position: relative;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .ai-auth-modal-close {
            position: absolute;
            top: 12px;
            left: 12px;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #999;
            padding: 4px 8px;
        }
        .ai-auth-modal-close:hover { color: #333; }
        .ai-auth-modal-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 12px;
            color: #333;
        }
        .ai-auth-modal-body {
            color: #666;
            margin-bottom: 24px;
            line-height: 1.6;
        }
        .ai-auth-modal-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .ai-auth-btn {
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }
        .ai-auth-btn-primary {
            background: #00a550;
            color: white;
            border: none;
        }
        .ai-auth-btn-primary:hover {
            background: #008a43;
            color: white;
            text-decoration: none;
        }
        .ai-auth-btn-secondary {
            background: white;
            color: #00a550;
            border: 2px solid #00a550;
        }
        .ai-auth-btn-secondary:hover {
            background: #f0fff5;
            text-decoration: none;
        }
        
        @media (max-width: 768px) {
            .ai-tools-section { padding: 12px; }
            .ai-tool-btn { padding: 8px 12px; font-size: 13px; }
            .ai-suggestion-chip { font-size: 12px; padding: 6px 10px; }
        }

        /* ── Compact Hero (Google-style search bar) ── */
        .show-hero {
            background: #fff;
            border-radius: 10px;
            padding: 14px 18px 16px;
            margin-bottom: 18px;
            text-align: center;
            border: 1px solid #e0e0e0;
            box-shadow: 0 1px 4px rgba(0,0,0,0.06);
        }
        .show-hero-top {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .show-hero-logo {
            height: 36px;
        }
        .show-hero-toggle {
            display: flex;
            gap: 6px;
        }
        .show-hero-btn {
            padding: 7px 16px;
            border: 2px solid #e5e5e5;
            border-radius: 20px;
            background: #fff;
            color: #555;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: inherit;
            text-decoration: none;
        }
        .show-hero-btn:hover {
            border-color: #00a550;
            color: #00a550;
            text-decoration: none;
        }
        .show-hero-btn.active {
            background: #00a550;
            border-color: #00a550;
            color: #fff;
        }
        .show-hero-btn.sh-chat-mode {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            border-color: transparent;
            color: #fff;
        }
        .show-hero-btn.sh-chat-mode:hover {
            background: linear-gradient(135deg, #7c3aed, #6d28d9);
        }
        .show-hero-btn.sh-chat-mode.active {
            box-shadow: 0 3px 12px rgba(124,58,237,0.35);
        }
        .show-hero-btn.sh-rw-mode {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            border-color: transparent;
            color: #fff;
        }
        .show-hero-btn.sh-rw-mode:hover {
            background: linear-gradient(135deg, #7c3aed, #6d28d9);
        }
        .sh-panel {
            display: none;
            max-width: 620px;
            margin: 0 auto;
        }
        .sh-panel.active {
            display: block;
        }
        .sh-chat-container {
            background: #fff;
            border-radius: 10px;
            border: 1px solid #e5e5e5;
            overflow: hidden;
            text-align: right;
        }
        .sh-chat-messages {
            max-height: 350px;
            overflow-y: auto;
            padding: 16px;
            display: none;
        }
        .sh-chat-messages.has-messages {
            display: block;
        }
        .sh-chat-msg {
            margin-bottom: 12px;
            padding: 12px 14px;
            border-radius: 10px;
            line-height: 1.7;
            font-size: 0.95rem;
        }
        .sh-chat-msg.user {
            background: #f0f9f4;
            border: 1px solid #d4edda;
            margin-left: 30px;
        }
        .sh-chat-msg.assistant {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            margin-right: 15px;
        }
        .sh-chat-msg-header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
            font-size: 0.85rem;
            color: #666;
        }
        .sh-chat-msg-header i {
            color: #00a550;
        }
        .sh-chat-msg-content p {
            margin: 0 0 8px 0;
        }
        .sh-chat-msg-content a {
            color: #00a550;
        }
        .sh-chat-examples {
            padding: 12px 16px;
            font-size: 0.9rem;
            color: #666;
        }
        .sh-chat-examples-title {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 8px;
        }
        .sh-chat-examples-title i {
            color: #8b5cf6;
        }
        .sh-chat-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .sh-chat-chip {
            padding: 6px 12px;
            background: #f3f0ff;
            color: #6d28d9;
            border-radius: 18px;
            font-size: 0.85rem;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }
        .sh-chat-chip:hover {
            background: #ede9fe;
            transform: translateY(-1px);
        }
        .sh-chat-credits {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.82rem;
            color: #666;
            padding: 0 16px 8px;
        }
        .sh-chat-credits i {
            color: #8b5cf6;
        }
        .sh-chat-input-area {
            padding: 12px 16px;
            border-top: 1px solid #e5e5e5;
            background: #fafafa;
        }
        .sh-chat-input-wrap {
            display: flex;
            gap: 10px;
            align-items: flex-end;
        }
        .sh-chat-input {
            flex: 1;
            padding: 10px 16px;
            border: 2px solid #e5e5e5;
            border-radius: 22px;
            font-size: 0.95rem;
            resize: none;
            min-height: 42px;
            max-height: 100px;
            font-family: inherit;
            transition: border-color 0.2s;
        }
        .sh-chat-input:focus {
            outline: none;
            border-color: #8b5cf6;
        }
        .sh-chat-send {
            padding: 10px 20px;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            color: #fff;
            border: none;
            border-radius: 22px;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
            min-width: 90px;
            justify-content: center;
        }
        .sh-chat-send:hover {
            background: linear-gradient(135deg, #7c3aed, #6d28d9);
        }
        .sh-chat-send:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .sh-chat-send .spinner {
            display: none;
            animation: spin 1s linear infinite;
        }
        .sh-chat-send.loading .spinner {
            display: inline-block;
        }
        .sh-chat-send.loading .send-icon {
            display: none;
        }
        .sh-chat-thinking {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 25px 16px;
            color: #666;
        }
        .sh-chat-thinking .thinking-animation {
            font-size: 2rem;
            margin-bottom: 8px;
            animation: bounce 1s ease-in-out infinite;
        }
        .sh-chat-thinking .thinking-text {
            font-size: 0.9rem;
            color: #8b5cf6;
        }
        .sh-chat-prompt-box {
            text-align: center;
            padding: 24px 16px;
        }
        .sh-chat-prompt-box i {
            font-size: 2.5rem;
            color: #8b5cf6;
            margin-bottom: 10px;
        }
        .sh-chat-prompt-box h4 {
            margin: 0 0 8px;
            color: #333;
            font-size: 15px;
        }
        .sh-chat-prompt-box p {
            color: #666;
            margin: 0 0 14px;
            font-size: 13px;
        }
        .sh-chat-prompt-box .btn {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            color: #fff;
            padding: 10px 24px;
            border-radius: 8px;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
        }
        .sh-feedback-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }
        .sh-feedback-overlay.show {
            display: flex;
        }
        .sh-feedback-modal {
            background: #fff;
            border-radius: 12px;
            max-width: 420px;
            width: 90%;
            padding: 24px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.25);
        }
        .sh-feedback-modal h4 {
            margin: 0 0 8px;
            font-size: 15px;
        }
        .sh-feedback-modal p {
            color: #666;
            font-size: 13px;
            margin: 0 0 12px;
        }
        .sh-feedback-modal textarea {
            width: 100%;
            min-height: 60px;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
            font-size: 13px;
            resize: vertical;
            font-family: inherit;
        }
        .sh-feedback-modal textarea:focus {
            outline: none;
            border-color: #8b5cf6;
        }
        .sh-feedback-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
            justify-content: flex-end;
        }
        .sh-feedback-actions button {
            padding: 8px 18px;
            border-radius: 6px;
            border: 1px solid #ddd;
            background: #fff;
            cursor: pointer;
            font-size: 13px;
        }
        .sh-feedback-actions button.submit {
            background: #8b5cf6;
            color: #fff;
            border-color: #8b5cf6;
        }
        .sh-chat-actions {
            display: flex;
            gap: 8px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #e9ecef;
        }
        .sh-chat-action-btn {
            padding: 5px 12px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 0.82rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s;
        }
        .sh-chat-action-btn:hover {
            border-color: #00a550;
            color: #00a550;
        }
        .sh-chat-feedback {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
        }
        .sh-fb-btn {
            padding: 5px 8px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 0.85rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 3px;
            transition: all 0.2s;
        }
        .sh-fb-btn:hover {
            border-color: #8b5cf6;
        }
        .sh-fb-btn.like.active {
            background: #dcfce7;
            border-color: #22c55e;
            color: #16a34a;
        }
        .sh-fb-btn.dislike.active {
            background: #fee2e2;
            border-color: #ef4444;
            color: #dc2626;
        }
        .sh-fb-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        @keyframes dotPulse {
            0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
            40% { transform: scale(1); opacity: 1; }
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        @media (max-width: 600px) {
            .show-hero-top {
                flex-direction: column;
                gap: 8px;
            }
            .show-hero-toggle {
                flex-wrap: wrap;
                justify-content: center;
            }
            .show-hero-btn {
                padding: 6px 12px;
                font-size: 0.82rem;
            }
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}
    <div class="container">
        {# ── Compact Hero: Search / Ask AI / Related Work ── #}
        <div class="show-hero">
            <div class="show-hero-top">
                <a href="/">
                    <img src="{{ asset('img/shamra-academia-logo.png') }}" alt="Shamra Academia" class="show-hero-logo">
                </a>
                <div class="show-hero-toggle">
                    <button type="button" class="show-hero-btn active" data-sh-mode="search">
                        <i class="fa fa-search"></i>
                        بحث
                    </button>
                    <button type="button" class="show-hero-btn sh-chat-mode" data-sh-mode="chat">
                        <i class="fa fa-magic"></i>
                        اسألني
                    </button>
                    <a href="{{ path('app_related_work_index') }}" class="show-hero-btn sh-rw-mode" style="text-decoration:none;">
                        <i class="fa fa-sitemap"></i>
                        كتابة دراسة مرجعيّة
                    </a>
                </div>
            </div>

            <div class="sh-panel active" id="sh-search-panel">
                <form action="{{ path('shamra_academia_filter') }}" method="get" style="max-width: 560px; margin: 0 auto;">
                    <div class="input-group" style="box-shadow: 0 1px 6px rgba(0,0,0,0.08); border-radius: 22px; overflow: hidden; border: 1px solid #ddd;">
                        <input type="text" name="title" class="form-control"
                               placeholder="إبحث في شمرا أكاديميا"
                               style="height: 42px; font-size: 0.95rem; border: none; padding: 0 18px;">
                        <input type="hidden" name="type" value="0">
                        <span class="input-group-btn">
                            <button class="btn btn-success" type="submit" style="height: 42px; padding: 0 22px; background: #00a550; border: none;">
                                <i class="fa fa-search" style="font-size: 1rem;"></i>
                            </button>
                        </span>
                    </div>
                </form>
            </div>

            <div class="sh-panel" id="sh-chat-panel">
                {% if app.user %}
                    <div class="sh-chat-container" id="sh-chat-container">
                        <div class="sh-chat-messages" id="sh-chat-messages"></div>
                        <div class="sh-chat-examples" id="sh-chat-examples">
                            <div class="sh-chat-examples-title">
                                <i class="fa fa-lightbulb-o"></i>
                                <span>أمثلة يمكنك تجربتها:</span>
                            </div>
                            <div class="sh-chat-chips">
                                <button type="button" class="sh-chat-chip" data-question="ما هي أحدث تقنيات الذكاء الاصطناعي في المجال الطبي؟">
                                    الذكاء الاصطناعي في الطب
                                </button>
                                <button type="button" class="sh-chat-chip" data-question="اشرح لي أهم نتائج أبحاث تغير المناخ">
                                    أبحاث تغير المناخ
                                </button>
                                <button type="button" class="sh-chat-chip" data-question="ما هي التحديات الرئيسية في معالجة اللغة العربية الطبيعية؟">
                                    معالجة اللغة العربية
                                </button>
                            </div>
                        </div>
                        <div class="sh-chat-credits" id="sh-chat-credits" style="display: none;">
                            <i class="fa fa-bolt"></i>
                            <span>الرصيد المتبقي:</span>
                            <strong id="sh-credits-count">--</strong>
                        </div>
                        <div class="sh-chat-input-area">
                            <div class="sh-chat-input-wrap">
                                <textarea class="sh-chat-input" id="sh-chat-input"
                                          placeholder="اسأل أي سؤال عن الأبحاث العلمية..."
                                          rows="1"></textarea>
                                <button type="button" class="sh-chat-send" id="sh-chat-submit">
                                    <i class="fa fa-spinner spinner"></i>
                                    <i class="fa fa-paper-plane send-icon"></i>
                                    <span>إرسال</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="sh-chat-prompt-box" id="sh-chat-upgrade" style="display: none;">
                        <i class="fa fa-bolt"></i>
                        <h4>رصيدك غير كافٍ</h4>
                        <p>قم بترقية اشتراكك للحصول على المزيد من الأرصدة</p>
                        <a href="{{ path('shamra_academia_subscription') }}" class="btn">ترقية الاشتراك</a>
                    </div>
                {% else %}
                    <div class="sh-chat-container">
                        <div class="sh-chat-prompt-box">
                            <i class="fa fa-user-circle"></i>
                            <h4>سجل دخولك للبدء</h4>
                            <p>ميزة اسألني متاحة للمستخدمين المسجلين فقط</p>
                            <a href="{{ path('app_login') }}" class="btn">تسجيل الدخول</a>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="sh-feedback-overlay" id="sh-feedback-modal">
            <div class="sh-feedback-modal">
                <h4><i class="fa fa-comment"></i> أخبرنا المزيد</h4>
                <p>ما الذي يمكننا تحسينه؟ (اختياري)</p>
                <textarea id="sh-feedback-comment" placeholder="لم تكن الإجابة دقيقة، أحتاج معلومات عن..."></textarea>
                <div class="sh-feedback-actions">
                    <button type="button" id="sh-feedback-skip">تخطي</button>
                    <button type="button" id="sh-feedback-cancel">إلغاء</button>
                    <button type="button" class="submit" id="sh-feedback-submit">إرسال</button>
                </div>
            </div>
        </div>

        {% if not app.user %}
          <div class="alert alert-info alert-dismissible" role="alert">
            <p>{{ 'homepage.subscribe'|trans }}</p>
            <a href="/register">{{ 'homepage.newUser'|trans }}</a>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        {% endif %}
        
        <div class="row">
            <div class="col-xs-12">
                
                {# Promotional Boxes - randomly show one #}
                <div class="promo-box promo-playground" data-promo="0">
                    <div class="promo-content">
                        <h4><i class="fa fa-magic"></i> {{ 'playground_banner.title'|trans({}, 'Academia') }}</h4>
                        <p>{{ 'playground_banner.description'|trans({}, 'Academia') }}</p>
                    </div>
                    <a href="/playground" class="promo-cta">
                        {{ 'playground_banner.cta'|trans({}, 'Academia') }} <i class="fa fa-arrow-left"></i>
                    </a>
                </div>
                <div class="promo-box promo-ocr" data-promo="1">
                    <div class="promo-content">
                        <h4><i class="fa fa-file-image-o"></i> {{ 'ocr_banner.title'|trans({}, 'Academia') }}</h4>
                        <p>{{ 'ocr_banner.description'|trans({}, 'Academia') }}</p>
                    </div>
                    <a href="/ocr" class="promo-cta">
                        {{ 'ocr_banner.cta'|trans({}, 'Academia') }} <i class="fa fa-arrow-left"></i>
                    </a>
                </div>
                <div class="promo-box promo-references" data-promo="2">
                    <div class="promo-content">
                        <h4><i class="fa fa-book"></i> {{ 'references_banner.title'|trans({}, 'Academia') }}</h4>
                        <p>{{ 'references_banner.description'|trans({}, 'Academia') }}</p>
                    </div>
                    <a href="/myreferences" class="promo-cta">
                        {{ 'references_banner.cta'|trans({}, 'Academia') }} <i class="fa fa-arrow-left"></i>
                    </a>
                </div>

                {# Title #}
                <div class="head-title">
                    <h1 class="res-title">
                        {{ research.arabicFullTitle }}
                    </h1>
                    {% if research.englishFullTitle %}
                        <h2 class="res-title" dir="ltr" style="font-size: 18px; color: #666;">
                            {{ research.englishFullTitle }}
                        </h2>
                    {% endif %}
                </div>

                {# Authors #}
                {% if research.textualPublisher %}
                    <div class="authors-list">
                        <strong><i class="fa fa-users"></i> الباحثون:</strong>
                        {% if research.textualPublisher is iterable %}
                            {% for author in research.textualPublisher %}
                                <span class="author-name">{{ author }}</span>
                            {% endfor %}
                        {% else %}
                            <span class="author-name">{{ research.textualPublisher }}</span>
                        {% endif %}
                    </div>
                {% endif %}

                {# Metadata #}
                <div class="research-meta">
                    {% if research.arabicCategoryName %}
                        <span><i class="fa fa-folder"></i> {{ research.arabicCategoryName }}</span> |
                    {% endif %}
                    {% if research.arabicPublisherName %}
                        <span><i class="fa fa-building"></i> {{ research.arabicPublisherName }}</span> |
                    {% endif %}
                    {% if research.publicationDate %}
                        <span><i class="fa fa-calendar"></i> {{ research.publicationDate }}</span> |
                    {% endif %}
                    {% if research.hits is defined %}
                        <span><i class="fa fa-eye"></i> {{ research.hits }} مشاهدة</span> |
                    {% endif %}
                    {% if research.downloads is defined %}
                        <span><i class="fa fa-download"></i> {{ research.downloads }} تحميل</span>
                    {% endif %}
                </div>

                {# Fields/Topics #}
                {% if research.arabicFieldNames|length > 0 %}
                    <div class="field-tags">
                        <strong><i class="fa fa-tags"></i> المجالات:</strong>
                        {% for fieldName in research.arabicFieldNames %}
                            <a href="{{ path('shamra_academia_filter', {'field': fieldName, 'type': 0}) }}" class="field-tag">{{ fieldName }}</a>
                        {% endfor %}
                    </div>
                {% endif %}

                {# Tags/Keywords #}
                {% if research.tags|length > 0 %}
                    {% set maxVisibleTags = 6 %}
                    {% set totalTags = research.tags|length %}
                    {% set hiddenCount = totalTags > maxVisibleTags ? totalTags - maxVisibleTags : 0 %}
                    <div class="keyword-tags" id="keywordTagsContainer">
                        <strong><i class="fa fa-key"></i> الكلمات المفتاحية:</strong>
                        {% for tag in research.tags %}
                            {% if tag is iterable or tag.context is defined %}
                                {% set tagSlug = tag.slug|default('') %}
                                <span class="keyword-tag-wrap{{ loop.index > maxVisibleTags ? ' keyword-hidden' : '' }}">
                                    <a href="{{ path('shamra_academia_filter', {'tags': tag.context, 'type': 0}) }}" class="keyword-tag">{{ tag.context }}</a>
                                    {% if app.user and tagSlug %}
                                        {% if followedTagSlugs is defined and tagSlug in followedTagSlugs %}
                                            <a href="#" class="es-tag-follow-btn es-tag-following" data-slug="{{ tagSlug }}" title="{{ 'tag.unfollow'|trans({}, 'Notifications') }}">
                                                <i class="fa fa-bell"></i>
                                            </a>
                                        {% else %}
                                            <a href="#" class="es-tag-follow-btn es-tag-not-following" data-slug="{{ tagSlug }}" title="{{ 'tag.follow'|trans({}, 'Notifications') }}">
                                                <i class="fa fa-bell-o"></i>
                                            </a>
                                        {% endif %}
                                    {% endif %}
                                </span>
                            {% else %}
                                {% set tagSlugStr = tagSlugs is defined and tagSlugs[loop.index0] is defined ? tagSlugs[loop.index0] : '' %}
                                <span class="keyword-tag-wrap{{ loop.index > maxVisibleTags ? ' keyword-hidden' : '' }}">
                                    <a href="{{ path('shamra_academia_filter', {'tags': tag, 'type': 0}) }}" class="keyword-tag">{{ tag }}</a>
                                    {% if app.user and tagSlugStr %}
                                        {% if followedTagSlugs is defined and tagSlugStr in followedTagSlugs %}
                                            <a href="#" class="es-tag-follow-btn es-tag-following" data-slug="{{ tagSlugStr }}" title="{{ 'tag.unfollow'|trans({}, 'Notifications') }}">
                                                <i class="fa fa-bell"></i>
                                            </a>
                                        {% else %}
                                            <a href="#" class="es-tag-follow-btn es-tag-not-following" data-slug="{{ tagSlugStr }}" title="{{ 'tag.follow'|trans({}, 'Notifications') }}">
                                                <i class="fa fa-bell-o"></i>
                                            </a>
                                        {% endif %}
                                    {% endif %}
                                </span>
                            {% endif %}
                        {% endfor %}
                        {% if hiddenCount > 0 %}
                            <button type="button" class="keyword-toggle-btn" id="keywordToggleBtn" data-hidden-count="{{ hiddenCount }}">
                                <span class="toggle-text">+{{ hiddenCount }} المزيد</span>
                                <i class="fa fa-chevron-down"></i>
                            </button>
                        {% endif %}
                    </div>
                    {% if app.user %}
                        <div class="tag-follow-hint" id="tagFollowHint">
                            <i class="fa fa-hand-o-up hint-arrow"></i>
                            <span>{{ 'tag.follow_hint'|trans({}, 'Notifications') }}</span>
                            <i class="fa fa-times hint-dismiss" id="tagFollowHintDismiss"></i>
                        </div>
                    {% endif %}
                {% endif %}

                {# Download & Share Section #}
                <div class="download-section">
                    {% if documentFound and research.document %}
                        <div class="action-buttons-row">
                            {# PDF Download button - shows for subscribed users, otherwise redirect to login/subscribe #}
                            {% if app.user and subscribed %}
                                <a href="{{ path('academia_document_download', {'name': research.document}) }}" class="action-btn action-btn-download">
                                    <i class="fa fa-download"></i> <span>{{ 'show.document.download'|trans }}</span>
                                </a>
                            {% elseif app.user %}
                                <a href="{{ path('shamra_academia_subscription') }}?ref=pdf_download" class="action-btn action-btn-download">
                                    <i class="fa fa-download"></i> <span>{{ 'show.document.download'|trans }}</span>
                                </a>
                            {% else %}
                                <a href="{{ path('app_login') }}?_target_path={{ app.request.requestUri|url_encode }}" class="action-btn action-btn-download">
                                    <i class="fa fa-download"></i> <span>{{ 'show.document.download'|trans }}</span>
                                </a>
                            {% endif %}
                            <a class="action-btn action-btn-share" id="esShareToProfileBtn" href="#">
                                <i class="fa fa-share-alt"></i> <span>{{ 'social.share_paper'|trans({}, 'Social') }}</span>
                            </a>
                        </div>
                        {# Download MD button - always visible for conversion funnel, JS handles auth redirects #}
                        <div class="action-buttons-row" style="margin-top: 10px;">
                            <a href="#" class="action-btn action-btn-download" id="es_download_md_button" 
                               data-research-slug="{{ research.slug }}"
                               data-document-name="{{ research.document }}"
                               data-is-english="0"
                               data-is-logged-in="{{ app.user ? '1' : '0' }}"
                               data-login-url="{{ path('app_login') }}"
                               data-subscription-url="{{ path('shamra_academia_subscription') }}"
                               data-status-loaded="0">
                                <i class="fa fa-file-text-o"></i> <span>{{ 'show.document.extract_md'|trans }}</span>
                            </a>
                            <span id="es_md_processing_indicator" class="action-btn" style="display:none;">
                                <i class="fa fa-spinner fa-spin"></i> <span>{{ 'show.document.processing_md'|trans }}</span>
                            </span>
                        </div>
                    {% else %}
                        <div class="alert alert-warning" style="text-align: right; border-radius: 8px; padding: 15px 20px; margin: 0;">
                            <i class="fa fa-exclamation-triangle"></i>
                            <strong>ملف PDF الأصلي غير متوفر</strong>
                            <p style="margin: 8px 0 0 0; font-size: 14px;">
                                عذراً، لا يتوفر ملف PDF لهذا البحث حالياً. يمكنك الاطلاع على الملخص أدناه.
                            </p>
                        </div>
                        <div class="action-buttons-row" style="margin-top: 15px;">
                            <a class="action-btn action-btn-share" id="esShareToProfileBtn" href="#">
                                <i class="fa fa-share-alt"></i> <span>{{ 'social.share_paper'|trans({}, 'Social') }}</span>
                            </a>
                        </div>
                    {% endif %}
                </div>

                {# Reading List Buttons #}
                {% if app.user %}
                    {% include '@syndexAcademic/Research/_reading_list_buttons.html.twig' with {
                        researchId: research.id,
                        researchSlug: research.slug,
                        researchType: 'elastic',
                        paperTitle: research.arabicFullTitle ?: research.englishFullTitle,
                        paperAuthors: research.textualPublisher is iterable ? research.textualPublisher|join(', ') : research.textualPublisher,
                        paperYear: research.publicationDate
                    } %}
                {% endif %}

                {# Abstract - Tabbed if both languages exist #}
                {% if research.arabicAbstract and research.englishAbstract %}
                    <div class="abstract-tabs-container">
                        <div class="abstract-tabs">
                            <button class="abstract-tab active" data-target="abstract-ar">
                                <i class="fa fa-file-text-o"></i> الملخص بالعربية
                            </button>
                            <button class="abstract-tab" data-target="abstract-en">
                                <i class="fa fa-file-text-o"></i> Abstract in English
                            </button>
                        </div>
                        <div class="abstract-content">
                            <div id="abstract-ar" class="abstract-panel active" dir="rtl">
                                <div class="abstract-actions">
                                    <button class="abstract-action-btn copy-btn" data-target="abstract-ar-text" title="نسخ الملخص">
                                        <i class="fa fa-copy"></i> <span>نسخ</span>
                                    </button>
                                    <button class="abstract-action-btn tts-btn" data-target="abstract-ar-text" data-lang="ar" title="قراءة صوتية">
                                        <i class="fa fa-volume-up"></i> <span>استماع</span>
                                    </button>
                                </div>
                                <div class="abstract-text-wrapper">
                                    <div id="abstract-ar-text" class="abstract-text" data-full-text="{{ research.arabicAbstract|e('html_attr') }}">
                                        {{ research.arabicAbstract }}
                                    </div>
                                    <button class="expand-toggle" data-target="abstract-ar-text">
                                        <i class="fa fa-chevron-down"></i> عرض المزيد
                                    </button>
                                </div>
                            </div>
                            <div id="abstract-en" class="abstract-panel" dir="ltr">
                                <div class="abstract-actions">
                                    <button class="abstract-action-btn copy-btn" data-target="abstract-en-text" title="Copy abstract">
                                        <i class="fa fa-copy"></i> <span>Copy</span>
                                    </button>
                                    <button class="abstract-action-btn tts-btn" data-target="abstract-en-text" data-lang="en" title="Read aloud">
                                        <i class="fa fa-volume-up"></i> <span>Listen</span>
                                    </button>
                                </div>
                                <div class="abstract-text-wrapper">
                                    <div id="abstract-en-text" class="abstract-text" data-full-text="{{ research.englishAbstract|e('html_attr') }}">
                                        {{ research.englishAbstract }}
                                    </div>
                                    <button class="expand-toggle" data-target="abstract-en-text">
                                        <i class="fa fa-chevron-down"></i> Read more
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                {% elseif research.arabicAbstract %}
                    <div class="abstract-section">
                        <h3><i class="fa fa-file-text-o"></i> الملخص</h3>
                        <div class="abstract-actions">
                            <button class="abstract-action-btn copy-btn" data-target="abstract-single-ar" title="نسخ الملخص">
                                <i class="fa fa-copy"></i> <span>نسخ</span>
                            </button>
                            <button class="abstract-action-btn tts-btn" data-target="abstract-single-ar" data-lang="ar" title="قراءة صوتية">
                                <i class="fa fa-volume-up"></i> <span>استماع</span>
                            </button>
                        </div>
                        <div class="abstract-text-wrapper">
                            <div id="abstract-single-ar" class="abstract-text" style="text-align: justify;" data-full-text="{{ research.arabicAbstract|e('html_attr') }}">
                                {{ research.arabicAbstract }}
                            </div>
                            <button class="expand-toggle" data-target="abstract-single-ar">
                                <i class="fa fa-chevron-down"></i> عرض المزيد
                            </button>
                        </div>
                    </div>
                {% elseif research.englishAbstract %}
                    <div class="abstract-section">
                        <h3><i class="fa fa-file-text-o"></i> Abstract</h3>
                        <div class="abstract-actions">
                            <button class="abstract-action-btn copy-btn" data-target="abstract-single-en" title="Copy abstract">
                                <i class="fa fa-copy"></i> <span>Copy</span>
                            </button>
                            <button class="abstract-action-btn tts-btn" data-target="abstract-single-en" data-lang="en" title="Read aloud">
                                <i class="fa fa-volume-up"></i> <span>Listen</span>
                            </button>
                        </div>
                        <div class="abstract-text-wrapper">
                            <div id="abstract-single-en" class="abstract-text" style="text-align: justify;" dir="ltr" data-full-text="{{ research.englishAbstract|e('html_attr') }}">
                                {{ research.englishAbstract }}
                            </div>
                            <button class="expand-toggle" data-target="abstract-single-en">
                                <i class="fa fa-chevron-down"></i> Read more
                            </button>
                        </div>
                    </div>
                {% endif %}

                {# === AI Tools Section (below Abstract) === #}
                <div class="ai-tools-section" id="aiToolsSection" data-slug="{{ research.slug }}">
                    <div class="ai-tools-header">
                        <span class="ai-tools-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
                            </svg>
                        </span>
                        <span class="ai-tools-title">{{ 'ai_tools.title'|trans({}, 'Research') }}</span>
                        <span class="ai-tools-credits" id="aiCreditsDisplay">
                            <i class="fa fa-coins"></i> <span id="aiCreditsCount">{% if userman.isSubscribed() and userman.getSubscription() %}{{ userman.getSubscription().availableCredits }}{% else %}--{% endif %}</span>
                        </span>
                    </div>
                    <div class="ai-tools-buttons">
                        <button class="ai-tool-btn ai-tool-ask" id="askAiBtn">
                            <i class="fa fa-comments"></i>
                            <span class="ai-tool-label">{{ 'ai_tools.ask_ai'|trans({}, 'Research') }}</span>
                            <span class="ai-tool-cost">5</span>
                        </button>
                    </div>
                    
                    {# Chat Panel - Initially Hidden #}
                    <div class="ai-chat-panel" id="aiChatPanel">
                        <div class="ai-chat-header">
                            <span>{{ 'ai_tools.ask_ai'|trans({}, 'Research') }}</span>
                            <button class="ai-chat-close" id="aiChatClose">&times;</button>
                        </div>
                        <div class="ai-chat-messages" id="aiChatMessages">
                            <div class="ai-chat-welcome">
                                <p>{{ 'ai_tools.chat_welcome'|trans({}, 'Research') }}</p>
                                <div class="ai-quick-questions">
                                    <button class="ai-suggestion-chip" data-question="{{ 'ai_tools.q_summarize'|trans({}, 'Research') }}">
                                        <i class="fa fa-compress"></i> {{ 'ai_tools.chip_summarize'|trans({}, 'Research') }}
                                    </button>
                                    <button class="ai-suggestion-chip" data-question="{{ 'ai_tools.q_methodology'|trans({}, 'Research') }}">
                                        <i class="fa fa-flask"></i> {{ 'ai_tools.chip_methodology'|trans({}, 'Research') }}
                                    </button>
                                    <button class="ai-suggestion-chip" data-question="{{ 'ai_tools.q_findings'|trans({}, 'Research') }}">
                                        <i class="fa fa-lightbulb-o"></i> {{ 'ai_tools.chip_findings'|trans({}, 'Research') }}
                                    </button>
                                    <button class="ai-suggestion-chip" data-question="{{ 'ai_tools.q_critique'|trans({}, 'Research') }}">
                                        <i class="fa fa-balance-scale"></i> {{ 'ai_tools.chip_critique'|trans({}, 'Research') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="ai-chat-input-area">
                            <input type="text" class="ai-chat-input" id="aiChatInput" 
                                   placeholder="{{ 'ai_tools.input_placeholder'|trans({}, 'Research') }}"
                                   maxlength="1000">
                            <button class="ai-chat-send" id="aiChatSend" disabled>
                                <i class="fa fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        {# Related Research (Read Also) - Full Width Section #}
        {% if matchedResearches is defined and matchedResearches is not empty %}
        <div class="read-also-section">
            <h3><i class="fa fa-book"></i> إقرأ أيضاً</h3>
            <div class="read-also-grid">
                {{ include('@syndexAcademic/Default/research_brief.html.twig', {'isSubscribed': subscribed}) }}
            </div>
        </div>
        {% endif %}

        {# Search / Chat / Related Work Mini-Widget #}
        <div style="background:#fff;border-radius:10px;padding:14px 16px 16px;margin-top:20px;text-align:center;border:1px solid #e0e0e0;">
            <p style="color:#555;margin:0 0 10px;font-size:0.95rem;">أدوات بحث علمي مدعومة بالذكاء الاصطناعي</p>
            <div style="display:flex;justify-content:center;gap:6px;flex-wrap:wrap;">
                <a href="{{ path('syndex_academic_homepage') }}" style="display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:2px solid #e5e5e5;border-radius:20px;background:#00a550;color:#fff;font-size:0.9rem;font-weight:500;text-decoration:none;transition:all 0.2s;">
                    <i class="fa fa-search"></i> بحث
                </a>
                <a href="{{ path('syndex_academic_homepage') }}#chat" style="display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:2px solid transparent;border-radius:20px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;font-size:0.9rem;font-weight:500;text-decoration:none;transition:all 0.2s;">
                    <i class="fa fa-magic"></i> اسألني
                </a>
                <a href="{{ path('app_related_work_index') }}" style="display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:2px solid transparent;border-radius:20px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;font-size:0.9rem;font-weight:500;text-decoration:none;transition:all 0.2s;">
                    <i class="fa fa-sitemap"></i> كتابة دراسة مرجعيّة
                </a>
            </div>
        </div>
        
    </div>

    {# Share to Profile Modal (ES-only research) #}
    {% if app.user %}
        <div class="share-modal-overlay" id="shareModalOverlay">
            <div class="share-modal">
                <div id="shareModalForm">
                    <div class="share-modal-header">
                        <h4><i class="fa fa-share-alt"></i> {{ 'social.share_to_profile_title'|trans({}, 'Social') }}</h4>
                        <button class="share-modal-close" id="shareModalClose">&times;</button>
                    </div>
                    <div class="share-modal-body">
                        <textarea class="share-modal-textarea" id="shareComment" placeholder="{{ 'social.share_add_comment'|trans({}, 'Social') }}" dir="auto"></textarea>
                        <div class="share-paper-preview">
                            <h5>
                                <i class="fa fa-file-text-o" style="color: #1a73a7;"></i>
                                {{ research.arabicFullTitle ?: research.englishFullTitle }}
                            </h5>
                            {% if research.arabicAbstract %}
                                <p class="paper-abstract-snippet">{{ research.arabicAbstract|slice(0, 150) }}...</p>
                            {% endif %}
                        </div>
                    </div>
                    <div class="share-modal-footer">
                        <button class="share-btn-cancel" id="shareModalCancelBtn">{{ 'social.cancel'|trans({}, 'Social') }}</button>
                        <button class="share-btn-submit" id="shareSubmitBtn">
                            <i class="fa fa-share"></i> {{ 'social.share_button'|trans({}, 'Social') }}
                        </button>
                    </div>
                </div>
                <div class="share-success-msg" id="shareSuccessMsg">
                    <i class="fa fa-check-circle"></i>
                    <p>{{ 'social.share_success'|trans({}, 'Social') }}</p>
                    <a href="{{ path('social_feed') }}" class="go-to-feed-link"><i class="fa fa-arrow-right"></i> {{ 'social.go_to_feed'|trans({}, 'Social') }}</a>
                </div>
            </div>
        </div>
    {% endif %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        (function() {
            var promos = document.querySelectorAll('.promo-box[data-promo]');
            if (promos.length > 0) {
                var idx = Math.floor(Math.random() * promos.length);
                promos[idx].classList.add('active');
            }
        })();
    </script>
    <script>
        $(document).ready(function() {
            // Tag follow/unfollow
            $(document).on('click', '.es-tag-follow-btn', function(e) {
                e.preventDefault();
                var btn = $(this);
                var slug = btn.data('slug');
                if (!slug || btn.hasClass('tag-busy')) return;
                btn.addClass('tag-busy');
                var isFollowing = btn.hasClass('es-tag-following');
                var route = isFollowing ? 'shamra_academia_tag_unfollow' : 'shamra_academia_tag_follow';
                var icon = btn.find('i');
                var origClass = icon.attr('class');
                icon.attr('class', 'fa fa-spinner fa-pulse');
                $.ajax({
                    type: 'POST',
                    url: Routing.generate(route),
                    data: { slug: slug },
                    success: function() {
                        if (isFollowing) {
                            btn.removeClass('es-tag-following').addClass('es-tag-not-following');
                            icon.attr('class', 'fa fa-bell-o');
                            btn.attr('title', "{{ 'tag.follow'|trans({}, 'Notifications')|e('js') }}");
                        } else {
                            btn.removeClass('es-tag-not-following').addClass('es-tag-following');
                            icon.attr('class', 'fa fa-bell');
                            btn.attr('title', "{{ 'tag.unfollow'|trans({}, 'Notifications')|e('js') }}");
                            // Hide hint after first follow
                            $('#tagFollowHint').fadeOut(400);
                        }
                    },
                    error: function() {
                        icon.attr('class', origClass);
                    },
                    complete: function() {
                        btn.removeClass('tag-busy');
                    }
                });
            });

            // Bell follow hint — show once per session
            if ($('.es-tag-follow-btn').length > 0 && !sessionStorage.getItem('tagFollowHintSeen')) {
                $('#tagFollowHint').css('display', 'flex');
                sessionStorage.setItem('tagFollowHintSeen', '1');
                setTimeout(function() {
                    $('#tagFollowHint').fadeOut(600);
                }, 10000);
            }
            $('#tagFollowHintDismiss').on('click', function() {
                $('#tagFollowHint').fadeOut(400);
            });

            // Download MD button functionality - handles auth redirects for conversion funnel
            (function initEsMarkdownButton() {
                var $mdBtn = $('#es_download_md_button');
                var $mdProcessing = $('#es_md_processing_indicator');
                var researchSlug = $mdBtn.data('research-slug');
                var documentName = $mdBtn.data('document-name');
                var isEnglish = false; // arabic_research index is the unified index for all research (Arabic & English)
                // Use == for loose comparison since jQuery converts numeric strings to numbers
                var isLoggedIn = $mdBtn.data('is-logged-in') == 1;
                var loginUrl = $mdBtn.data('login-url');
                var subscriptionUrl = $mdBtn.data('subscription-url');
                var statusLoaded = false;
                var userHasCredits = false;
                var hasMarkdown = false;

                if (!researchSlug || !documentName) return;

                // Check status on page load to update button state
                $.get('/api/research-markdown/status/' + researchSlug + '?english=' + isEnglish)
                    .done(function(data) {
                        // Check if research is indexed in ES
                        if (!data.existsInEs) {
                            // Hide button for non-indexed research
                            $mdBtn.hide();
                            return;
                        }
                        if (data.hasMarkdown) {
                            // MD already exists - update button text
                            $mdBtn.find('span').text('{{ "show.document.download_md"|trans }}');
                            $mdBtn.find('i').removeClass('fa-magic').addClass('fa-file-text-o');
                        }
                        // Store status for click handler
                        hasMarkdown = data.hasMarkdown;
                        userHasCredits = data.userHasCredits;
                        statusLoaded = true;
                    })
                    .fail(function() {
                        // API failed - still mark as loaded so user can try
                        statusLoaded = true;
                    });

                // Click handler with auth/subscription redirect logic
                $mdBtn.on('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // Wait for status to load if not ready
                    if (!statusLoaded) {
                        alert('{{ "show.document.loading_status"|trans }}');
                        return false;
                    }
                    
                    // Step 1: Not logged in -> redirect to login
                    if (!isLoggedIn) {
                        window.location.href = loginUrl + '?_target_path=' + encodeURIComponent(window.location.pathname);
                        return false;
                    }
                    
                    // Step 2: Logged in but no credits -> redirect to subscription
                    if (!userHasCredits) {
                        window.location.href = subscriptionUrl + '?ref=extract_md';
                        return false;
                    }
                    
                    // Step 3: Has credits - check if MD exists or extract
                    if (hasMarkdown) {
                        window.open('/api/research-markdown/download/' + researchSlug + '?english=' + isEnglish, '_blank');
                    } else {
                        startEsMdExtraction();
                    }
                    return false;
                });

                function startEsMdExtraction() {
                    $mdBtn.hide();
                    $mdProcessing.show();
                    
                    $.ajax({
                        url: '/api/research-markdown/extract',
                        method: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            slug: researchSlug,
                            documentName: documentName,
                            isEnglish: isEnglish
                        })
                    }).done(function(data) {
                        if (data.success) {
                            if (data.status === 'already_exists') {
                                $mdProcessing.hide();
                                $mdBtn.find('span').text('{{ "show.document.download_md"|trans }}');
                                $mdBtn.find('i').removeClass('fa-magic').addClass('fa-file-text-o');
                                hasMarkdown = true;
                                $mdBtn.show();
                                window.open('/api/research-markdown/download/' + researchSlug + '?english=' + isEnglish, '_blank');
                            } else {
                                alert('{{ "show.document.md_processing_started"|trans }}');
                            }
                        } else {
                            $mdProcessing.hide();
                            alert(data.error || '{{ "show.document.md_extraction_failed"|trans }}');
                            $mdBtn.show();
                        }
                    }).fail(function() {
                        $mdProcessing.hide();
                        alert('{{ "show.document.md_extraction_failed"|trans }}');
                        $mdBtn.show();
                    });
                }
            })();

            // Abstract tabs switching
            $('.abstract-tab').on('click', function() {
                var target = $(this).data('target');
                $('.abstract-tab').removeClass('active');
                $(this).addClass('active');
                $('.abstract-panel').removeClass('active');
                $('#' + target).addClass('active');
                // Re-check expand/collapse for newly visible panel
                checkAbstractLength();
            });

            // Copy abstract functionality
            var currentSpeech = null;
            $('.copy-btn').on('click', function() {
                var btn = $(this);
                var targetId = btn.data('target');
                var textEl = document.getElementById(targetId);
                // Use data-full-text attribute for clean text, fallback to textContent
                var text = textEl ? (textEl.getAttribute('data-full-text') || textEl.textContent) : '';
                text = text.replace(/<[^>]*>/g, '').trim();
                
                if (navigator.clipboard && navigator.clipboard.writeText) {
                    navigator.clipboard.writeText(text).then(function() {
                        showCopySuccess(btn);
                    }).catch(function() {
                        fallbackCopy(text, btn);
                    });
                } else {
                    fallbackCopy(text, btn);
                }
            });

            function fallbackCopy(text, btn) {
                var textarea = document.createElement('textarea');
                textarea.value = text;
                textarea.style.position = 'fixed';
                textarea.style.opacity = '0';
                document.body.appendChild(textarea);
                textarea.select();
                try {
                    document.execCommand('copy');
                    showCopySuccess(btn);
                } catch (e) {
                    alert('{{ "copy.failed"|trans({}, "Academia")|default("Failed to copy")|e("js") }}');
                }
                document.body.removeChild(textarea);
            }

            function showCopySuccess(btn) {
                var originalHtml = btn.html();
                btn.addClass('copied').html('<i class="fa fa-check"></i> <span>{{ "copy.success"|trans({}, "Academia")|default("Copied!")|e("js") }}</span>');
                setTimeout(function() {
                    btn.removeClass('copied').html(originalHtml);
                }, 2000);
            }

            // Text-to-speech functionality
            var cachedVoices = [];
            
            // Load voices (they load async in most browsers)
            function loadVoices() {
                cachedVoices = window.speechSynthesis.getVoices();
            }
            loadVoices();
            if (window.speechSynthesis.onvoiceschanged !== undefined) {
                window.speechSynthesis.onvoiceschanged = loadVoices;
            }

            function findVoice(lang) {
                // Priority order for Arabic: ar-SA, ar-EG, ar-*, any ar
                // Priority order for English: en-US, en-GB, en-*, any en  
                var langPrefixes = lang === 'ar' 
                    ? ['ar-SA', 'ar-EG', 'ar-XA', 'ar'] 
                    : ['en-US', 'en-GB', 'en'];
                
                for (var i = 0; i < langPrefixes.length; i++) {
                    var prefix = langPrefixes[i];
                    var voice = cachedVoices.find(function(v) {
                        return v.lang === prefix || v.lang.startsWith(prefix + '-');
                    });
                    if (voice) return voice;
                }
                return null;
            }

            $('.tts-btn').on('click', function() {
                var btn = $(this);
                var targetId = btn.data('target');
                var lang = btn.data('lang') || 'ar';
                var textEl = document.getElementById(targetId);
                
                // Get the clean text content from the element
                var text = textEl ? textEl.textContent : '';
                text = text.trim();

                // Check if speech synthesis is available
                if (!('speechSynthesis' in window)) {
                    alert('{{ "tts.not_supported"|trans({}, "Academia")|default("Text-to-speech is not supported in your browser")|e("js") }}');
                    return;
                }

                // If currently playing, stop it
                if (currentSpeech && btn.hasClass('playing')) {
                    window.speechSynthesis.cancel();
                    btn.removeClass('playing');
                    btn.find('i').removeClass('fa-stop').addClass('fa-volume-up');
                    btn.find('span').text(lang === 'ar' ? 'استماع' : 'Listen');
                    currentSpeech = null;
                    return;
                }

                // Stop any ongoing speech
                window.speechSynthesis.cancel();
                $('.tts-btn').removeClass('playing').find('i').removeClass('fa-stop').addClass('fa-volume-up');

                // Refresh voices cache
                if (cachedVoices.length === 0) {
                    cachedVoices = window.speechSynthesis.getVoices();
                }

                // Check if we have a voice for this language
                var voice = findVoice(lang);
                
                if (!voice && lang === 'ar') {
                    // No Arabic voice - show instructions
                    alert('لا يتوفر صوت عربي في نظامك.\n\nلتثبيت صوت عربي في Windows:\n1. الإعدادات → الوقت واللغة → اللغة\n2. إضافة لغة → العربية\n3. تأكد من تفعيل تحويل النص إلى كلام\n4. أعد تشغيل المتصفح');
                    return;
                }

                // Create utterance
                var utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = lang === 'ar' ? 'ar-SA' : 'en-US';
                utterance.rate = 0.9;

                if (voice) {
                    utterance.voice = voice;
                }

                // Update button state
                btn.addClass('playing');
                btn.find('i').removeClass('fa-volume-up').addClass('fa-stop');
                btn.find('span').text(lang === 'ar' ? 'إيقاف' : 'Stop');
                currentSpeech = utterance;

                utterance.onend = function() {
                    btn.removeClass('playing');
                    btn.find('i').removeClass('fa-stop').addClass('fa-volume-up');
                    btn.find('span').text(lang === 'ar' ? 'استماع' : 'Listen');
                    currentSpeech = null;
                };

                utterance.onerror = function(e) {
                    btn.removeClass('playing');
                    btn.find('i').removeClass('fa-stop').addClass('fa-volume-up');
                    btn.find('span').text(lang === 'ar' ? 'استماع' : 'Listen');
                    currentSpeech = null;
                };

                window.speechSynthesis.speak(utterance);
            });

            // Keyword tags expand/collapse
            $('#keywordToggleBtn').on('click', function() {
                var btn = $(this);
                var container = $('#keywordTagsContainer');
                var hiddenCount = btn.data('hidden-count');
                
                if (container.hasClass('expanded')) {
                    container.removeClass('expanded');
                    btn.find('.toggle-text').text('+' + hiddenCount + ' المزيد');
                    btn.find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
                } else {
                    container.addClass('expanded');
                    btn.find('.toggle-text').text('عرض أقل');
                    btn.find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
                }
            });

            // Expand/collapse abstract functionality
            function checkAbstractLength() {
                $('.abstract-text').each(function() {
                    var el = $(this);
                    var wrapper = el.closest('.abstract-text-wrapper');
                    var toggle = wrapper.find('.expand-toggle');
                    
                    // Reset to measure true height
                    el.removeClass('collapsed');
                    var fullHeight = el[0].scrollHeight;
                    
                    if (fullHeight > 220) {
                        el.addClass('collapsed');
                        toggle.addClass('visible');
                    } else {
                        el.removeClass('collapsed');
                        toggle.removeClass('visible');
                    }
                });
            }

            // Initial check
            checkAbstractLength();

            // Expand/collapse toggle
            $('.expand-toggle').on('click', function() {
                var btn = $(this);
                var targetId = btn.data('target');
                var textEl = $('#' + targetId);
                var isArabic = btn.text().indexOf('عرض') !== -1;

                if (textEl.hasClass('collapsed')) {
                    textEl.removeClass('collapsed');
                    btn.html('<i class="fa fa-chevron-up"></i> ' + (isArabic ? 'عرض أقل' : 'Show less'));
                } else {
                    textEl.addClass('collapsed');
                    btn.html('<i class="fa fa-chevron-down"></i> ' + (isArabic ? 'عرض المزيد' : 'Read more'));
                }
            });
        });
    </script>

    {# === AI Auth Modal === #}
    <div class="ai-auth-modal-overlay" id="aiAuthModalOverlay">
        <div class="ai-auth-modal">
            <button class="ai-auth-modal-close" id="aiAuthModalClose">&times;</button>
            <div class="ai-auth-modal-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#00a550" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
                </svg>
            </div>
            <h3 class="ai-auth-modal-title" id="aiAuthModalTitle"></h3>
            <p class="ai-auth-modal-body" id="aiAuthModalBody"></p>
            <div class="ai-auth-modal-actions" id="aiAuthModalActions"></div>
        </div>
    </div>

    {# === Ask AI Inline Tools JavaScript === #}
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var askBtn = document.getElementById('askAiBtn');
        var chatPanel = document.getElementById('aiChatPanel');
        var chatClose = document.getElementById('aiChatClose');
        var chatMessages = document.getElementById('aiChatMessages');
        var chatInput = document.getElementById('aiChatInput');
        var sendBtn = document.getElementById('aiChatSend');
        var chips = document.querySelectorAll('.ai-suggestion-chip');
        var modalOverlay = document.getElementById('aiAuthModalOverlay');
        var modalClose = document.getElementById('aiAuthModalClose');
        var modalTitle = document.getElementById('aiAuthModalTitle');
        var modalBody = document.getElementById('aiAuthModalBody');
        var modalActions = document.getElementById('aiAuthModalActions');
        
        if (!askBtn) return;
        
        var paperSlug = "{{ research.slug|e('js') }}";
        var paperTitle = "{{ (research.arabicFullTitle ?: research.englishFullTitle)|e('js') }}";
        var isAuthenticated = {{ app.user ? 'true' : 'false' }};
        var isSubscribed = {{ userman.isSubscribed() ? 'true' : 'false' }};
        var hasCredits = {{ (userman.isSubscribed() and userman.getSubscription() and userman.getSubscription().availableCredits > 0) ? 'true' : 'false' }};
        var isPanelOpen = false;
        var isProcessing = false;
        
        // Translations
        var tr = {
            loginTitle: "{{ 'ai_tools.login_title'|trans({}, 'Research')|e('js') }}",
            loginBody: "{{ 'ai_tools.login_body'|trans({}, 'Research')|e('js') }}",
            loginBtn: "{{ 'ai_tools.login_btn'|trans({}, 'Research')|e('js') }}",
            registerBtn: "{{ 'ai_tools.register_btn'|trans({}, 'Research')|e('js') }}",
            subscribeTitle: "{{ 'ai_tools.subscribe_title'|trans({}, 'Research')|e('js') }}",
            subscribeBody: "{{ 'ai_tools.subscribe_body'|trans({}, 'Research')|e('js') }}",
            trialBtn: "{{ 'ai_tools.trial_btn'|trans({}, 'Research')|e('js') }}",
            noCreditsTitle: "{{ 'ai_tools.no_credits_title'|trans({}, 'Research')|e('js') }}",
            noCreditsBody: "{{ 'ai_tools.no_credits_body'|trans({}, 'Research')|e('js') }}",
            upgradeBtn: "{{ 'ai_tools.upgrade_btn'|trans({}, 'Research')|e('js') }}",
            errorMsg: "{{ 'ai_tools.error_message'|trans({}, 'Research')|e('js') }}"
        };
        
        var loginUrl = "{{ path('app_login') }}";
        var registerUrl = "{{ path('app_register') }}";
        var subscribeUrl = "{{ path('shamra_academia_subscription') }}";
        var playgroundUrl = "{{ path('playground_index') }}";
        
        function canUseAI() {
            if (!isAuthenticated) {
                showModal('login');
                return false;
            }
            if (!isSubscribed) {
                showModal('subscribe');
                return false;
            }
            if (!hasCredits) {
                showModal('noCredits');
                return false;
            }
            return true;
        }
        
        function openPanel() {
            if (!canUseAI()) return;
            chatPanel.classList.add('active');
            isPanelOpen = true;
            chatInput.focus();
            if (typeof gtag === 'function') {
                gtag('event', 'ask_ai_open', { event_category: 'AI', paper_slug: paperSlug });
            }
        }
        
        function closePanel() {
            chatPanel.classList.remove('active');
            isPanelOpen = false;
        }
        
        function addMessage(content, isUser, isError) {
            var msg = document.createElement('div');
            msg.className = 'ai-message ' + (isUser ? 'ai-message-user' : 'ai-message-ai');
            if (isError) msg.classList.add('ai-message-error');
            
            if (!isUser && !isError) {
                // AI response: add content wrapper and action buttons
                var contentDiv = document.createElement('div');
                contentDiv.className = 'ai-response-content';
                contentDiv.textContent = content;
                msg.appendChild(contentDiv);
                
                var actions = document.createElement('div');
                actions.className = 'ai-message-actions';
                actions.innerHTML = 
                    '<button class="ai-action-btn ai-copy-btn" title="{{ "ai_tools.copy"|trans({}, "Research")|e("js") }}">' +
                        '<i class="fa fa-copy"></i> {{ "ai_tools.copy"|trans({}, "Research")|e("js") }}' +
                    '</button>' +
                    '<button class="ai-action-btn ai-share-btn" title="{{ "ai_tools.share_insight"|trans({}, "Research")|e("js") }}">' +
                        '<i class="fa fa-share-alt"></i> {{ "ai_tools.share_insight"|trans({}, "Research")|e("js") }}' +
                    '</button>';
                msg.appendChild(actions);
                
                // Copy button handler
                var copyBtn = actions.querySelector('.ai-copy-btn');
                copyBtn.addEventListener('click', function() {
                    navigator.clipboard.writeText(content).then(function() {
                        copyBtn.classList.add('copied');
                        copyBtn.innerHTML = '<i class="fa fa-check"></i> {{ "ai_tools.copied"|trans({}, "Research")|e("js") }}';
                        setTimeout(function() {
                            copyBtn.classList.remove('copied');
                            copyBtn.innerHTML = '<i class="fa fa-copy"></i> {{ "ai_tools.copy"|trans({}, "Research")|e("js") }}';
                        }, 2000);
                    });
                });
                
                // Share button handler
                var shareBtn = actions.querySelector('.ai-share-btn');
                shareBtn.addEventListener('click', function() {
                    shareAiResponse(content);
                });
            } else {
                msg.textContent = content;
            }
            
            chatMessages.appendChild(msg);
            chatMessages.scrollTop = chatMessages.scrollHeight;
            return msg;
        }
        
        function shareAiResponse(aiContent) {
            // Compose share content: AI insight + paper reference
            var shareText = '💡 ' + aiContent.substring(0, 500) + (aiContent.length > 500 ? '...' : '') + 
                           '\n\n📄 ' + paperTitle;
            var shareUrl = window.location.origin + '/show/' + paperSlug;
            
            // Use existing share modal
            var overlay = document.getElementById('shareModalOverlay');
            var textarea = document.getElementById('shareComment');
            var formDiv = document.getElementById('shareModalForm');
            var successMsg = document.getElementById('shareSuccessMsg');
            var submitBtn = document.getElementById('shareSubmitBtn');
            
            if (overlay && textarea) {
                textarea.value = shareText;
                formDiv.style.display = 'block';
                successMsg.style.display = 'none';
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fa fa-share"></i> {{ "social.share_button"|trans({}, "Social")|e("js") }}';
                overlay.classList.add('active');
                textarea.focus();
                textarea.setSelectionRange(0, 0);
            }
        }
        
        function addLoading() {
            var loading = document.createElement('div');
            loading.className = 'ai-message ai-message-ai ai-loading';
            loading.innerHTML = '<span></span><span></span><span></span>';
            loading.id = 'aiLoadingMsg';
            chatMessages.appendChild(loading);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        function removeLoading() {
            var loading = document.getElementById('aiLoadingMsg');
            if (loading) loading.remove();
        }
        
        function sendQuestion(question) {
            if (isProcessing || !question.trim()) return;
            
            isProcessing = true;
            sendBtn.disabled = true;
            chatInput.disabled = true;
            
            addMessage(question, true);
            addLoading();
            
            fetch('/api/research/' + paperSlug + '/ask', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({ question: question })
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                removeLoading();
                if (data.success) {
                    addMessage(data.answer, false);
                    // Update credits display
                    if (data.creditsRemaining !== undefined) {
                        document.getElementById('aiCreditsCount').textContent = data.creditsRemaining;
                        if (data.creditsRemaining <= 0) {
                            hasCredits = false;
                        }
                    }
                } else {
                    addMessage(data.error || tr.errorMsg, false, true);
                }
            })
            .catch(function(err) {
                removeLoading();
                addMessage(tr.errorMsg, false, true);
                console.error('AI request error:', err);
            })
            .finally(function() {
                isProcessing = false;
                sendBtn.disabled = false;
                chatInput.disabled = false;
                chatInput.value = '';
                chatInput.focus();
            });
        }
        
        askBtn.addEventListener('click', function(e) {
            e.preventDefault();
            if (isPanelOpen) {
                closePanel();
            } else {
                openPanel();
            }
        });
        
        chatClose.addEventListener('click', closePanel);
        
        sendBtn.addEventListener('click', function() {
            sendQuestion(chatInput.value);
        });
        
        chatInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendQuestion(chatInput.value);
            }
        });
        
        chatInput.addEventListener('input', function() {
            sendBtn.disabled = !chatInput.value.trim();
        });
        
        chips.forEach(function(chip) {
            chip.addEventListener('click', function(e) {
                e.preventDefault();
                if (!canUseAI()) return;
                
                var question = this.dataset.question;
                if (!isPanelOpen) {
                    chatPanel.classList.add('active');
                    isPanelOpen = true;
                }
                setTimeout(function() {
                    sendQuestion(question);
                }, 100);
            });
        });
        
        function showModal(type) {
            var title, body, actions;
            
            switch(type) {
                case 'login':
                    title = tr.loginTitle;
                    body = tr.loginBody;
                    actions = '<a href="' + registerUrl + '" class="ai-auth-btn ai-auth-btn-primary">' + tr.registerBtn + '</a>' +
                              '<a href="' + loginUrl + '" class="ai-auth-btn ai-auth-btn-secondary">' + tr.loginBtn + '</a>';
                    break;
                case 'subscribe':
                    title = tr.subscribeTitle;
                    body = tr.subscribeBody;
                    actions = '<a href="' + subscribeUrl + '" class="ai-auth-btn ai-auth-btn-primary">' + tr.trialBtn + '</a>';
                    break;
                case 'noCredits':
                    title = tr.noCreditsTitle;
                    body = tr.noCreditsBody;
                    actions = '<a href="' + playgroundUrl + '" class="ai-auth-btn ai-auth-btn-primary">' + tr.upgradeBtn + '</a>';
                    break;
            }
            
            modalTitle.textContent = title;
            modalBody.textContent = body;
            modalActions.innerHTML = actions;
            modalOverlay.classList.add('active');
        }
        
        function hideModal() {
            modalOverlay.classList.remove('active');
        }
        
        modalClose.addEventListener('click', hideModal);
        modalOverlay.addEventListener('click', function(e) {
            if (e.target === modalOverlay) {
                hideModal();
            }
        });
        
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                if (modalOverlay.classList.contains('active')) hideModal();
                if (isPanelOpen) closePanel();
            }
        });
    });
    </script>
    {% if app.user %}
    <script>
        $(document).ready(function() {
            var paperSlug = "{{ research.slug|e('js') }}";
            var paperTitle = "{{ (research.arabicFullTitle ?: research.englishFullTitle)|e('js') }}";
            var overlay = $('#shareModalOverlay');
            var form = $('#shareModalForm');
            var successMsg = $('#shareSuccessMsg');
            var submitBtn = $('#shareSubmitBtn');
            var textarea = $('#shareComment');

            // Open share modal
            $('#esShareToProfileBtn').on('click', function(e) {
                e.preventDefault();
                form.show();
                successMsg.hide();
                textarea.val('');
                submitBtn.prop('disabled', false).html('<i class="fa fa-share"></i> {{ "social.share_button"|trans({}, "Social")|e("js") }}');
                overlay.addClass('active');
                setTimeout(function() { textarea.focus(); }, 200);
            });

            // Close modal
            function closeShareModal() {
                overlay.removeClass('active');
            }
            $('#shareModalClose').on('click', closeShareModal);
            $('#shareModalCancelBtn').on('click', closeShareModal);
            overlay.on('click', function(e) {
                if (e.target === this) closeShareModal();
            });
            $(document).on('keydown', function(e) {
                if (e.key === 'Escape' && overlay.hasClass('active')) closeShareModal();
            });

            // Submit share (ES-only: use profile-post with sharedUrl)
            submitBtn.on('click', function() {
                var comment = textarea.val().trim();
                submitBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> {{ "social.publishing"|trans({}, "Social")|e("js") }}');
                var content = comment ? comment : '{{ "social.shared_a_paper"|trans({}, "Social")|e("js") }}: ' + paperTitle;

                $.ajax({
                    type: 'POST',
                    url: '/api/profile-post',
                    data: {
                        content: content,
                        sharedUrl: window.location.origin + '/show/' + paperSlug
                    },
                    success: function(resp) {
                        form.hide();
                        successMsg.css('display', 'block');
                    },
                    error: function() {
                        alert("{{ 'social.error_occurred'|trans({}, 'Social')|e('js') }}");
                        submitBtn.prop('disabled', false).html('<i class="fa fa-share"></i> {{ "social.share_button"|trans({}, "Social")|e("js") }}');
                    }
                });
            });
        });
    </script>
    {% endif %}

    {# ── Compact Hero: Search / Ask AI toggle + chat JS ── #}
    <script>
    $(function() {
        $('.show-hero-btn[data-sh-mode]').on('click', function() {
            var mode = $(this).data('sh-mode');
            $('.show-hero-btn[data-sh-mode]').removeClass('active');
            $(this).addClass('active');
            if (mode === 'search') {
                $('#sh-search-panel').addClass('active');
                $('#sh-chat-panel').removeClass('active');
            } else {
                $('#sh-chat-panel').addClass('active');
                $('#sh-search-panel').removeClass('active');
                shCheckAccess();
            }
        });

        var shChatId = null, shAccessDone = false, shPendingFbId = null;

        function shCheckAccess() {
            if (shAccessDone) return;
            $.ajax({
                url: '/api/research-chat/access', type: 'GET',
                success: function(r) {
                    shAccessDone = true;
                    if (r.canUse) {
                        $('#sh-chat-container').show();
                        $('#sh-chat-upgrade').hide();
                        $('#sh-chat-credits').show();
                        $('#sh-credits-count').text(r.creditsAvailable);
                    } else {
                        $('#sh-chat-container').hide();
                        $('#sh-chat-upgrade').show();
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 402) { $('#sh-chat-container').hide(); $('#sh-chat-upgrade').show(); }
                }
            });
        }

        $('.sh-chat-chip').on('click', function() { $('#sh-chat-input').val($(this).data('question')); shSubmit(); });
        $('#sh-chat-input').on('input', function() { this.style.height = 'auto'; this.style.height = Math.min(this.scrollHeight, 100) + 'px'; });
        $('#sh-chat-input').on('keydown', function(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); shSubmit(); } });
        $('#sh-chat-submit').on('click', shSubmit);

        function shSubmit() {
            var $input = $('#sh-chat-input'), $btn = $('#sh-chat-submit'), q = $input.val().trim();
            if (!q || $btn.hasClass('loading')) return;
            $btn.addClass('loading').prop('disabled', true);
            shAddMsg('user', q);
            $input.val('').trigger('input');
            $('#sh-chat-examples').hide();
            shShowThinking();
            var url = shChatId ? '/api/research-chat/' + shChatId + '/message' : '/api/research-chat';
            $.ajax({
                url: url, type: 'POST', contentType: 'application/json',
                data: JSON.stringify({ question: q }),
                success: function(r) {
                    shHideThinking(); $btn.removeClass('loading').prop('disabled', false);
                    if (!shChatId && r.id) shChatId = r.id;
                    if (r.messages) { var l = r.messages[r.messages.length - 1]; if (l.role === 'assistant') shAddMsg('assistant', l.content, l.id); }
                    else if (r.message) shAddMsg('assistant', r.message.content, r.message.id);
                    if (r.creditsRemaining !== undefined) $('#sh-credits-count').text(r.creditsRemaining);
                },
                error: function(xhr) {
                    shHideThinking(); $btn.removeClass('loading').prop('disabled', false);
                    var msg = 'حدث خطأ. يرجى المحاولة مرة أخرى.';
                    if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON.message;
                    if (xhr.status === 402) { $('#sh-chat-container').hide(); $('#sh-chat-upgrade').show(); }
                    else shAddMsg('assistant', msg, null, true);
                }
            });
        }

        function shAddMsg(role, content, messageId, isErr) {
            var $msgs = $('#sh-chat-messages'); $msgs.addClass('has-messages');
            var label = role === 'user' ? 'أنت' : 'شمرا أكاديميا';
            var icon = role === 'user' ? 'fa-user' : 'fa-graduation-cap';
            var html = role === 'assistant' ? shFmtMd(content) : shEsc(content);
            var rtl = shIsAr(content) ? ' rtl' : '';
            var $m = $('<div class="sh-chat-msg ' + role + rtl + (isErr ? ' error' : '') + '">' +
                '<div class="sh-chat-msg-header"><i class="fa ' + icon + '"></i><span>' + label + '</span></div>' +
                '<div class="sh-chat-msg-content">' + html + '</div></div>');
            if (role === 'assistant' && !isErr && shChatId && messageId) {
                var $acts = $('<div class="sh-chat-actions">' +
                    '<button class="sh-chat-action-btn sh-copy"><i class="fa fa-copy"></i> نسخ</button>' +
                    '<div class="sh-chat-feedback">' +
                    '<button class="sh-fb-btn like" data-mid="' + messageId + '"><i class="fa fa-thumbs-up"></i></button>' +
                    '<button class="sh-fb-btn dislike" data-mid="' + messageId + '"><i class="fa fa-thumbs-down"></i></button>' +
                    '</div></div>');
                $acts.find('.sh-copy').on('click', function() {
                    if (navigator.clipboard) navigator.clipboard.writeText(content);
                    $(this).html('<i class="fa fa-check"></i> تم');
                    var self = this; setTimeout(function() { $(self).html('<i class="fa fa-copy"></i> نسخ'); }, 2000);
                });
                $acts.find('.sh-fb-btn.like').on('click', function() {
                    var mid = $(this).data('mid'), $c = $(this).closest('.sh-chat-feedback');
                    shFeedback(mid, 'like', '', function(ok) { if (ok) { $c.find('.sh-fb-btn').prop('disabled', true); } }.bind(this));
                });
                $acts.find('.sh-fb-btn.dislike').on('click', function() {
                    shPendingFbId = $(this).data('mid'); $('#sh-feedback-comment').val(''); $('#sh-feedback-modal').addClass('show');
                });
                $m.append($acts);
            }
            $msgs.append($m); $msgs.scrollTop($msgs[0].scrollHeight);
        }

        function shFeedback(mid, fb, comment, cb) {
            $.ajax({ url: '/api/research-chat/message/' + mid + '/feedback', type: 'POST', contentType: 'application/json',
                data: JSON.stringify({ feedback: fb, comment: comment }), success: function() { cb(true); }, error: function() { cb(false); } });
        }

        $('#sh-feedback-cancel').on('click', function() { $('#sh-feedback-modal').removeClass('show'); shPendingFbId = null; });
        $('#sh-feedback-skip').on('click', function() {
            if (shPendingFbId) shFeedback(shPendingFbId, 'dislike', '', function(ok) {
                if (ok) { var $b = $('.sh-fb-btn.dislike[data-mid="' + shPendingFbId + '"]'); $b.closest('.sh-chat-feedback').find('.sh-fb-btn').prop('disabled', true); $b.addClass('active'); }
            });
            $('#sh-feedback-modal').removeClass('show'); shPendingFbId = null;
        });
        $('#sh-feedback-submit').on('click', function() {
            var c = $('#sh-feedback-comment').val().trim();
            if (shPendingFbId) shFeedback(shPendingFbId, 'dislike', c, function(ok) {
                if (ok) { var $b = $('.sh-fb-btn.dislike[data-mid="' + shPendingFbId + '"]'); $b.closest('.sh-chat-feedback').find('.sh-fb-btn').prop('disabled', true); $b.addClass('active'); }
            });
            $('#sh-feedback-modal').removeClass('show'); shPendingFbId = null;
        });
        $('#sh-feedback-modal').on('click', function(e) { if (e.target === this) { $(this).removeClass('show'); shPendingFbId = null; } });

        function shShowThinking() {
            var $m = $('#sh-chat-messages'); $m.addClass('has-messages');
            $m.append('<div class="sh-chat-thinking" id="sh-thinking"><div class="thinking-animation">🤓</div>' +
                '<div class="thinking-text">شمرا أكاديميا يفكر <span class="thinking-dots"><span></span><span></span><span></span></span></div></div>');
            $m.scrollTop($m[0].scrollHeight);
        }
        function shHideThinking() { $('#sh-thinking').remove(); }
        function shFmtMd(t) { t = shEsc(t); t = t.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>'); t = t.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>'); t = t.replace(/\n/g, '<br>'); return t; }
        function shEsc(t) { var d = document.createElement('div'); d.textContent = t; return d.innerHTML; }
        function shIsAr(t) { var ar = (t.match(/[\u0600-\u06FF\u0750-\u077F]/g) || []).length; var la = (t.match(/[a-zA-Z]/g) || []).length; return ar > la; }
    });
    </script>
{% endblock %}