/* =============================================================================
   PANEL - Grok Search (sizing and layout only - base styles from shared/ui.css)
   ============================================================================= */

.panel[data-panel-type="grok"] .panel-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
}

.panel.maximized[data-panel-type="grok"] .panel-content {
    overflow: hidden;
}

/* Input sizing */
.grok-query {
    flex: 1;
    min-width: 200px;
}

.grok-domain {
    width: 150px;
}

.grok-fetch-url {
    flex: 2;
    min-width: 200px;
}

.grok-fetch-prompt {
    flex: 1;
    min-width: 150px;
}

/* Data container */
.grok-data {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--color-text-primary);
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-bottom: 5px;
}

.grok-response {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Markdown rendering (dark theme) */
.grok-response.markdown {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-primary);
    white-space: normal; /* Override pre-wrap from parent */
}

.grok-response.markdown h1,
.grok-response.markdown h2,
.grok-response.markdown h3,
.grok-response.markdown h4 {
    color: var(--color-text-bright);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.grok-response.markdown h1 { font-size: 1.4rem; border-bottom: 1px solid var(--color-border-subtle); padding-bottom: 0.3rem; }
.grok-response.markdown h2 { font-size: 1.2rem; }
.grok-response.markdown h3 { font-size: 1.05rem; }
.grok-response.markdown h4 { font-size: 0.95rem; }

.grok-response.markdown p {
    margin: 0.5rem 0;
}

.grok-response.markdown a {
    color: var(--color-syntax-keyword);
}

.grok-response.markdown a:hover {
    color: var(--color-syntax-link);
    text-decoration: underline;
}

.grok-response.markdown ul,
.grok-response.markdown ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.grok-response.markdown li {
    margin: 0.25rem 0;
}

.grok-response.markdown code {
    background: var(--color-bg-tertiary);
    color: var(--color-syntax-string);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
}

.grok-response.markdown pre {
    background: var(--color-bg-tertiary);
    padding: 0.75rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0.5rem 0;
}

.grok-response.markdown pre code {
    background: none;
    padding: 0;
}

.grok-response.markdown blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    color: var(--color-text-secondary);
}

.grok-response.markdown strong {
    color: var(--color-text-bright);
    font-weight: 600;
}

.grok-response.markdown hr {
    border: none;
    border-top: 1px solid var(--color-border-subtle);
    margin: 1rem 0;
}