/* =====================================================
   linux-simulator / simulator.css
   ターミナルUI（Linuxコマンド学習用）
   ===================================================== */

.linux-sim-widget {
    --c-bg       : #1e1e2e;
    --c-header   : #313244;
    --c-border   : #45475a;
    --c-text     : #cdd6f4;
    --c-muted    : #7f849c;
    --c-blue     : #89b4fa;
    --c-green    : #a6e3a1;
    --c-red      : #f38ba8;
    --c-yellow   : #f9e2af;
    --c-mauve    : #cba6f7;
    --c-teal     : #94e2d5;

    margin: 2rem 0;
    font-size: 14px;
}

/* ─────────────────────────────────────
   ターミナル本体
───────────────────────────────────── */
.linux-sim-widget .sim-terminal {
    background-color : var(--c-bg);
    color            : var(--c-text);
    font-family      : 'SFMono-Regular', 'Cascadia Code', 'Consolas', 'Menlo', monospace;
    border-radius    : 10px;
    overflow         : hidden;
    box-shadow       : 0 8px 32px rgba(0, 0, 0, 0.5);
    max-width        : 760px;
}

.linux-sim-widget .sim-header {
    display         : flex;
    align-items     : center;
    gap             : 6px;
    padding         : 10px 16px;
    background-color: var(--c-header);
    border-bottom   : 1px solid var(--c-border);
    user-select     : none;
}

.linux-sim-widget .sim-dot {
    display      : inline-block;
    width        : 12px;
    height       : 12px;
    border-radius: 50%;
}
.linux-sim-widget .sim-dot--red    { background-color: #f38ba8; }
.linux-sim-widget .sim-dot--yellow { background-color: #f9e2af; }
.linux-sim-widget .sim-dot--green  { background-color: #a6e3a1; }

.linux-sim-widget .sim-title {
    margin-left   : 8px;
    font-size     : 12px;
    color         : var(--c-muted);
    letter-spacing: 0.05em;
}

/* ─────────────────────────────────────
   クイックアクション
───────────────────────────────────── */
.linux-sim-widget .sim-quick-actions {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
    gap        : 6px;
    padding    : 8px 12px;
    background : #252535;
    border-bottom: 1px solid var(--c-border);
}

.linux-sim-widget .sim-quick-label {
    font-size: 11px;
    color    : var(--c-muted);
    margin-right: 4px;
}

.linux-sim-widget .sim-quick-btn {
    background : transparent;
    color      : var(--c-blue);
    border     : 1px solid var(--c-border);
    border-radius: 4px;
    padding    : 3px 8px;
    font-size  : 11px;
    font-family: inherit;
    cursor     : pointer;
    transition : background 0.15s, color 0.15s, border-color 0.15s;
}
.linux-sim-widget .sim-quick-btn:hover {
    background  : rgba(137, 180, 250, 0.15);
    border-color: var(--c-blue);
}

/* ─────────────────────────────────────
   出力エリア
───────────────────────────────────── */
.linux-sim-widget .sim-output {
    padding     : 12px 16px;
    min-height  : 120px;
    max-height  : 400px;
    overflow-y  : auto;
    white-space : pre;
    line-height : 1.5;
}

.linux-sim-widget .sim-line {
    white-space: pre-wrap;
    word-break : break-all;
}

.linux-sim-widget .sim-line--command {
    color: var(--c-text);
}
.linux-sim-widget .sim-line--error {
    color: var(--c-red);
}
.linux-sim-widget .sim-line--info {
    color: var(--c-muted);
}

/* lsの色分け用（実際のlsに近い配色） */
.linux-sim-widget .ls-dir   { color: var(--c-blue);  font-weight: 600; }
.linux-sim-widget .ls-exec  { color: var(--c-green); font-weight: 600; }
.linux-sim-widget .ls-link  { color: var(--c-teal);  }
.linux-sim-widget .ls-hidden{ color: var(--c-muted); }
.linux-sim-widget .ls-file  { color: var(--c-text);  }

/* ─────────────────────────────────────
   入力行
───────────────────────────────────── */
.linux-sim-widget .sim-input-row {
    display    : flex;
    align-items: center;
    gap        : 6px;
    padding    : 10px 16px;
    background : var(--c-bg);
    border-top : 1px solid var(--c-border);
}

.linux-sim-widget .sim-prompt {
    color      : var(--c-green);
    font-weight: 600;
    user-select: none;
}

.linux-sim-widget .sim-input {
    flex       : 1;
    background : transparent;
    border     : none;
    outline    : none;
    color      : var(--c-text);
    font-family: inherit;
    font-size  : inherit;
    caret-color: var(--c-text);
}