* {
    box-sizing: border-box;
}

body {
    background-color: #2d2d2d;
    color: #d0d0d0;
    font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 14px;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    width: 80%;
    max-width: 1000px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.header {
    background-color: #4d4d4d;
    padding: 8px;
    display: flex;
    align-items: center;
}

.buttons {
    display: flex;
    gap: 8px;
}

.button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.red { background-color: #ff5f56; }
.yellow { background-color: #ffbd2e; }
.green { background-color: #27c93f; }

.title {
    color: #d0d0d0;
    margin: 0 auto;
    font-weight: bold;
}

.terminal {
    background-color: #1e1e1e;
    padding: 10px;
    height: 60vh;
    overflow-y: auto;
}

#output {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.input-line {
    display: flex;
    align-items: center;
    background-color: #1e1e1e;
    padding: 5px 10px;
    border-top: 1px solid #4d4d4d;
}

.prompt {
    color: #5fd7ff;
    margin-right: 8px;
}

.input {
    background: none;
    border: none;
    color: #d0d0d0;
    font-family: inherit;
    font-size: inherit;
    width: 100%;
    outline: none;
}

.command-sent {
    color: #aaa;
    position: relative;
}

.response-text {
    margin-left: 120px;
}

.replay-button {
    visibility: hidden;
    position: absolute;
    right: 10px;
    top: 0;
    background: none;
    border: none;
    color: #5fd7ff;
    cursor: pointer;
    font-size: 16px;
}

.command-sent:hover .replay-button {
    visibility: visible;
}

.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #5fd7ff;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-message {
    position: relative;
    color: #ff5f56;
    padding-right: 20px; /* Space for the close button */
}

.error-close-button {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    color: #ff5f56;
    cursor: pointer;
    font-size: 16px;
}

.timestamp {
    color: #888;
    margin-right: 10px;
}

.duration {
    color: #888;
    margin-left: 10px;
    font-style: italic;
}

.settings {
    background-color: #4d4d4d;
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.settings input, .settings select, .settings button, .timeout-container {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #666;
    background-color: #3d3d3d;
    color: #d0d0d0;
}

.timeout-container {
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.timeout-container input {
    border: none;
    padding: 8px 0;
    background: none;
    width: 60px; /* Adjust width as needed */
}

/* Remove spinner from number input */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
  -moz-appearance: textfield;
}

.settings button {
    cursor: pointer;
    background-color: #666;
    color: #d0d0d0;
    font-weight: bold;
    transition: background-color 0.3s;
}

.settings button.connected {
    background-color: #27c93f;
    color: #1e1e1e;
}

.details-refresh-button {
    background: none;
    border: none;
    color: #d0d0d0;
    font-size: 18px;
    cursor: pointer;
    padding: 0 10px;
    vertical-align: middle;
}

.device-info {
    background-color: #2d2d2d;
    color: #d0d0d0;
    padding: 15px;
    border-top: 1px solid #4d4d4d;
    font-size: 12px;
}

.device-info h4 {
    margin-top: 0;
    color: #d0d0d0;
}

.device-info pre {
    background-color: #1e1e1e;
    padding: 10px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ANSI Color Classes */
.ansi-fg-black { color: #2e3436; }
.ansi-fg-red { color: #cc0000; }
.ansi-fg-green { color: #4e9a06; }
.ansi-fg-yellow { color: #c4a000; }
.ansi-fg-blue { color: #3465a4; }
.ansi-fg-magenta { color: #75507b; }
.ansi-fg-cyan { color: #06989a; }
.ansi-fg-white { color: #d3d7cf; }
.ansi-bold { font-weight: bold; }