/* modem/style.css */

/* --- Main content --- */

#command-details-input {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    flex-shrink: 0;
    padding-bottom: var(--spacing-md);
}

.details-box {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    max-height: 300px;
    overflow-y: auto;
}

#details-title {
    font-size: 1.2rem;  /* Slightly smaller than h1 */
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);  /* Use primary text color */
}
#details-description {
    /* Inherits .text-secondary from HTML */
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
}

.operations {
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.operation-tag {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: 0.75rem;  /* Smaller tags */
    font-weight: 500;
    cursor: default;
    border: 1px solid var(--border-color);
}

/* --- Syntax section styling --- */

.syntax-section {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px dashed var(--border-color);  /* Separator */
}

.syntax-section > label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: block;
    margin-bottom: var(--spacing-sm);
}

#details-syntax-variants {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.syntax-variant {
    background-color: var(--bg-primary);  /* Use primary inside details box */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);  /* More padding */
}

.syntax-type-heading {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;  /* Uppercase type */
    letter-spacing: 0.5px;
}

.syntax-variant pre {
    margin: 0;
    padding: 0;
    background: none;  /* Remove default pre background */
}

.syntax-pattern {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    background-color: var(--code-bg);
    padding: var(--spacing-sm);  /* More padding */
    border-radius: calc(var(--border-radius) / 2);
    display: block;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--code-text);
    margin-top: var(--spacing-xs);
    border: 1px solid var(--border-color);
}

.params-label {
    font-size: 0.8rem;
    font-weight: 600;  /* Bolder label */
    color: var(--text-secondary);
    margin-top: var(--spacing-md);  /* More space before params */
    margin-bottom: var(--spacing-sm);
}

.parameter-list {
    list-style: none;
    padding-left: 0;  /* Remove default padding */
    font-size: 0.85rem;
    margin-top: var(--spacing-sm);
}

.parameter-list li {
    margin-bottom: var(--spacing-sm);  /* More space between params */
    line-height: 1.5;
    padding-left: var(--spacing-md);  /* Indent parameters */
    border-left: 2px solid var(--border-color);  /* Indentation line */
}

.param-name {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--bg-accent);  /* Use accent color */
    background-color: transparent;  /* Override potential code bg */
    padding: 0;
}
html[data-theme="dark"] .param-name {
    color: var(--bg-accent);  /* Ensure it's the accent color */
}

.required-param {
    color: var(--error-color);
    font-weight: bold;
    margin-left: var(--spacing-xs);
    cursor: default;
    display: inline-block;  /* Prevent line break issues */
}

.param-type {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-left: var(--spacing-xs);
    font-style: italic;
}

.param-values {
    color: var(--text-secondary);
    font-size: 0.8rem;
    display: block;  /* Put values/description on new line */
    padding-left: var(--spacing-sm);  /* Indent further */
    margin-top: var(--spacing-xs);
}
/* Style inline code for enum values */
.param-values code {
    font-family: var(--font-mono);
    background-color: var(--code-bg);
    padding: 2px var(--spacing-xs);
    border-radius: calc(var(--border-radius) / 2);
    color: var(--code-text);
    border: 1px solid var(--border-color);
    font-size: 0.9em;  /* Slightly smaller */
}
.param-description {
    display: block;
    padding-left: var(--spacing-sm);
    margin-top: var(--spacing-xs);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* --- Input area --- */

.input-area {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;  /* Align items vertically */
}

#command-input {
    font-family: var(--font-mono);
    font-size: 1rem;  /* Slightly larger for commands */
}

.send-button {
    /* Inherits .icon-button, .primary */
    border-radius: 50%;  /* Ensure circular */
    width: 40px;
    height: 40px;
    padding: 8px;  /* Adjust padding for icon centering */
}
.send-button svg {
    width: 20px;
    height: 20px;
    fill: var(--icon-color-accent);  /* Ensure icon color */
}
.send-button:disabled {
    background-color: var(--text-secondary);  /* Grey out disabled */
    opacity: 0.6;
    cursor: not-allowed;
    border-color: transparent;
}
html[data-theme="dark"] .send-button:disabled {
    background-color: var(--bg-tertiary);
}

/* --- Terminal log --- */

#terminal-log-container {
    flex-grow: 1;
    /* flex-shrink: 0; */
    /* min-height: 200px; */
    display: flex;
    flex-direction: column;
    background-color: var(--bg-secondary);  /* Use secondary bg for log area */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;  /* Contains controls and log */
}

.log-controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);  /* Match container */
    flex-shrink: 0;
    gap: var(--spacing-md);
}

.auto-scroll-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.auto-scroll-label input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--bg-accent);  /* Style checkbox */
}

#terminal-log {
    flex-grow: 1;
    overflow-y: auto;  /* Enable scrolling */
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;  /* Allow wrapping */
    word-break: break-word;  /* Break long words */
    background-color: var(--bg-primary);  /* Use primary bg for code area */
}

/* Style individual log entries (now divs) */
#terminal-log code {
    display: block;  /* Ensure code block takes space */
}
.log-entry {
    margin-bottom: var(--spacing-xs);
    display: flex;
    gap: var(--spacing-sm);
    align-items: baseline;  /* Align timestamp and message nicely */
}

.log-timestamp {
    color: var(--text-secondary);
    flex-shrink: 0;
    font-weight: 500;
    user-select: none;  /* Prevent selecting timestamp */
    font-size: 0.8em;  /* Smaller timestamp */
    opacity: 0.8;
}

.log-message {
    flex-grow: 1;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Log message type colors */
.log-sent .log-message { color: var(--bg-accent); }
html[data-theme="dark"] .log-sent .log-message { color: var(--bg-accent); }
.log-received .log-message { color: var(--text-primary); }
.log-ok .log-message { color: var(--success-color); font-weight: 500; }
.log-error .log-message { color: var(--error-color); font-weight: 500; }
.log-urc .log-message { color: var(--info-color); font-style: italic; }
.log-prompt .log-message { color: var(--warning-color); font-weight: 500; }
.log-info .log-message { color: var(--text-secondary); font-style: italic; }

/* Clickable sent messages */
.log-sent {
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.log-sent:hover {
    background-color: rgba(0, 123, 255, 0.05);  /* Subtle hover */
}
html[data-theme="dark"] .log-sent:hover {
    background-color: rgba(122, 162, 247, 0.1);  /* Subtle hover */
}

/* --- Mobile adjustments --- */

@media (max-width: 767px) {
    /* header * { font-size: 1rem !important } */
    .details-box { max-height: 200px }  /* Limit box height */
    /* .input-area { flex-wrap: wrap } */
    #command-input { min-width: 150px }  /* Ensure input doesn't get too small */
}