<div class="rounded-lg overflow-hidden border border-gray-700">
    <style>
        .ssl-log-container {
            background: #0d1117;
            max-height: 400px;
            overflow: auto;
            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
            font-size: 12px;
            line-height: 1.5;
        }
        .ssl-log-container table {
            border-collapse: collapse;
            width: 100%;
        }
        .ssl-log-container .line-number {
            color: #6e7681;
            text-align: right;
            padding: 0 12px;
            user-select: none;
            background: #161b22;
            border-right: 1px solid #30363d;
            vertical-align: top;
            width: 1%;
            white-space: nowrap;
        }
        .ssl-log-container .line-content {
            color: #c9d1d9;
            padding: 0 12px;
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-all;
        }
        .ssl-log-container tr:hover {
            background: #161b22;
        }
    </style>
    <div class="ssl-log-container">
        <table>
            <tbody>
                @foreach(explode("\n", $log) as $index => $line)
                <tr>
                    <td class="line-number">{{ $index + 1 }}</td>
                    <td class="line-content">{{ $line }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
