/* =====================================================
   simulator.css
   ターミナルUI + Docker Hub ブラウザ + レイヤーアニメーション
   ===================================================== */

/* ─────────────────────────────────────
   CSS変数
───────────────────────────────────── */
.docker-sim-widget {
    --c-bg       : #1e1e2e;
    --c-bg-light : #252535;
    --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-docker   : #1d90c8;
    --c-mauve    : #cba6f7;
    --c-teal     : #94e2d5;

    /* レイヤーカラー（下から layer 0, 1, 2）*/
    --c-layer0   : #89b4fa;
    --c-layer1   : #cba6f7;
    --c-layer2   : #94e2d5;

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

/* ─────────────────────────────────────
   3パネルレイアウト
───────────────────────────────────── */
.sim-panel {
    margin-bottom : 12px;
    border-radius : 10px;
    overflow      : hidden;
    box-shadow    : 0 4px 20px rgba(0, 0, 0, 0.35);
    max-width     : 760px;
}

/* ── ブラウザ風パネル（Docker Hub） ── */
.sim-panel--browser {
    background: #ffffff;
}

.sim-browser-chrome {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    padding         : 8px 12px;
    background-color: #e8e8e8;
    border-bottom   : 1px solid #d0d0d0;
    user-select     : none;
}

.sim-browser-addressbar {
    flex         : 1;
    display      : flex;
    align-items  : center;
    gap          : 5px;
    background   : #ffffff;
    border       : 1px solid #c8c8c8;
    border-radius: 20px;
    padding      : 3px 12px;
    font-family  : sans-serif;
    font-size    : 11px;
    color        : #444;
}

.sim-browser-lock   { font-size: 10px; }
.sim-browser-url-text { color: #222; }

/* ── しくみパネル（アニメーション） ── */
.sim-panel--visual {
    background: var(--c-bg-light);
}

.sim-panel__label {
    font-family : 'SFMono-Regular', 'Cascadia Code', 'Consolas', 'Menlo', monospace;
    font-size   : 11px;
    color       : var(--c-muted);
    padding     : 7px 16px 0;
    user-select : none;
    letter-spacing: 0.04em;
}

/* ── ターミナルパネル ── */
.sim-panel--terminal {
    /* .sim-terminal が内側に来るのでパディング不要 */
    box-shadow: none; /* .sim-terminal 自身が shadow を持つ */
}

/* ─────────────────────────────────────
   ターミナルウィンドウ全体
───────────────────────────────────── */
.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;
}

/* ─────────────────────────────────────
   ヘッダー（macOS風タイトルバー）
───────────────────────────────────── */
.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;
}

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

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

/* ─────────────────────────────────────
   アニメーションビジュアルスロット
───────────────────────────────────── */
.sim-visual-slot {
    /* しくみパネル内に収まるため border 不要 */
}

/* ─────────────────────────────────────
   ビジュアル本体レイアウト
───────────────────────────────────── */
.sim-viz {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 14px 20px;
    background     : var(--c-bg-light);
    gap            : 12px;
    min-height     : 120px;
}

/* ── 左右のエンドポイント ── */
.sim-viz__side {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 4px;
    flex-shrink   : 0;
    width         : 90px;
    text-align    : center;
}

.sim-viz__icon {
    position: relative;
    width   : 44px;
    height  : 44px;
    color   : var(--c-muted);
    transition: color 0.4s, filter 0.4s;
}
.sim-viz__icon svg {
    width : 100%;
    height: 100%;
}

.sim-viz__hub .sim-viz__icon { color: var(--c-docker); }

.sim-viz__name {
    font-size  : 11px;
    font-weight: 600;
    color      : var(--c-text);
}
.sim-viz__url {
    font-size: 10px;
    color    : var(--c-muted);
}

/* ── Hub 側レイヤー帯 ── */
.sim-viz__hub-layers {
    display       : flex;
    flex-direction: column;
    gap           : 3px;
    width         : 80px;
    margin-top    : 4px;
}

.sim-viz__hub-layer {
    height       : 7px;
    border-radius: 3px;
    opacity      : 0.45;
    transition   : opacity 0.3s;
}

[data-state="pulling"] .sim-viz__hub-layer {
    opacity  : 1;
    animation: layer-glow 1.2s ease-in-out infinite;
}
[data-state="pulling"] .sim-viz__hub-layer[data-layer="0"] { animation-delay: 0s;    }
[data-state="pulling"] .sim-viz__hub-layer[data-layer="1"] { animation-delay: 0.2s;  }
[data-state="pulling"] .sim-viz__hub-layer[data-layer="2"] { animation-delay: 0.4s;  }

[data-state="complete"] .sim-viz__hub-layer { opacity: 0.7; }
[data-state="error"]    .sim-viz__hub-layer { opacity: 0.2; }

/* ── PC 側レイヤースロット ── */
.sim-viz__local-layers {
    display       : flex;
    flex-direction: column;
    gap           : 3px;
    width         : 80px;
    margin-top    : 4px;
}

.sim-viz__local-layer {
    height       : 7px;
    border-radius: 3px;
    border       : 1px dashed var(--c-border);
    background   : transparent;
    transition   : background 0.35s ease, border-color 0.35s ease;
}

.sim-viz__local-layer.is-filled[data-layer="0"] {
    background  : var(--c-layer0);
    border-color: var(--c-layer0);
}
.sim-viz__local-layer.is-filled[data-layer="1"] {
    background  : var(--c-layer1);
    border-color: var(--c-layer1);
}
.sim-viz__local-layer.is-filled[data-layer="2"] {
    background  : var(--c-layer2);
    border-color: var(--c-layer2);
}

/* ローカルPC の完了バッジ */
.sim-viz__badge {
    font-size      : 10px;
    color          : var(--c-green);
    background     : rgba(166, 227, 161, 0.12);
    border         : 1px solid rgba(166, 227, 161, 0.3);
    border-radius  : 4px;
    padding        : 1px 5px;
    max-width      : 84px;
    overflow       : hidden;
    text-overflow  : ellipsis;
    white-space    : nowrap;
    min-height     : 16px;
    opacity        : 0;
    transition     : opacity 0.3s;
}

/* ローカルPC の画像枚数バッジ */
.sim-viz__img-count {
    font-size  : 9px;
    color      : var(--c-muted);
    opacity    : 0;
    transition : opacity 0.3s;
    white-space: nowrap;
}

/* 完了チェックアイコン */
.sim-viz__check {
    position  : absolute;
    bottom    : -4px;
    right     : -4px;
    width     : 16px;
    height    : 16px;
    background: var(--c-green);
    border-radius: 50%;
    color     : #1e1e2e;
    display   : flex;
    align-items    : center;
    justify-content: center;
    opacity   : 0;
    transform : scale(0);
    transition: opacity 0.3s, transform 0.3s;
}
.sim-viz__check svg { width: 10px; height: 10px; }

/* ── 中央パイプライン ── */
.sim-viz__pipeline {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 6px;
    min-width     : 0;
}

.sim-viz__image-label {
    font-size     : 11px;
    color         : var(--c-blue);
    opacity       : 0;
    max-width     : 100%;
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
    transition    : opacity 0.3s;
    height        : 14px;
}

.sim-viz__track {
    position     : relative;
    width        : 100%;
    height       : 8px;
    border-radius: 4px;
    overflow     : visible;
}

.sim-viz__track::before {
    content      : '';
    position     : absolute;
    top          : 50%;
    left         : 0;
    right        : 0;
    height       : 2px;
    transform    : translateY(-50%);
    background   : var(--c-border);
    border-radius: 1px;
    transition   : background 0.4s;
}

.sim-viz__status {
    font-size : 10px;
    color     : var(--c-muted);
    height    : 14px;
    transition: color 0.3s;
}

/* ─────────────────────────────────────
   パケット
───────────────────────────────────── */
.sim-viz__packets {
    position: absolute;
    inset   : 0;
}

.sim-viz__pkt {
    position     : absolute;
    top          : 50%;
    left         : 0;
    width        : 10px;
    height       : 10px;
    border-radius: 3px;
    background   : var(--c-docker);
    transform    : translate(-50%, -50%);
    opacity      : 0;
    box-shadow   : 0 0 6px var(--c-docker);
}

/* ─────────────────────────────────────
   @keyframes
───────────────────────────────────── */
@keyframes packet-flow {
    0%   { left: 0%;    opacity: 0; }
    8%   { opacity: 1;              }
    90%  { opacity: 1;              }
    100% { left: 100%;  opacity: 0; }
}

@keyframes hub-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px var(--c-docker));  }
    50%       { filter: drop-shadow(0 0 12px var(--c-docker)); }
}

@keyframes layer-glow {
    0%, 100% { filter: brightness(1);   }
    50%       { filter: brightness(1.5); }
}

@keyframes complete-pop {
    0%   { transform: scale(0);   opacity: 0; }
    60%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}

@keyframes badge-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ─────────────────────────────────────
   状態: pulling
───────────────────────────────────── */
[data-state="pulling"] .sim-viz__track::before {
    background: linear-gradient(90deg, var(--c-docker), var(--c-blue));
}
[data-state="pulling"] .sim-viz__pkt {
    animation      : packet-flow 1.1s ease-in-out infinite;
    animation-delay: var(--delay);
}
[data-state="pulling"] .sim-viz__hub .sim-viz__icon {
    animation: hub-pulse 1s ease-in-out infinite;
}
[data-state="pulling"] .sim-viz__image-label { opacity: 1; }
[data-state="pulling"] .sim-viz__status      { color: var(--c-blue); }

/* ─────────────────────────────────────
   状態: complete
───────────────────────────────────── */
[data-state="complete"] .sim-viz__track::before { background: var(--c-green); }
[data-state="complete"] .sim-viz__local .sim-viz__icon { color: var(--c-green); }
[data-state="complete"] .sim-viz__check {
    animation: complete-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
[data-state="complete"] .sim-viz__badge {
    animation      : badge-in 0.3s ease forwards;
    animation-delay: 0.2s;
}
[data-state="complete"] .sim-viz__img-count { opacity: 1; }
[data-state="complete"] .sim-viz__status    { color: var(--c-green); }

/* ─────────────────────────────────────
   状態: error
───────────────────────────────────── */
[data-state="error"] .sim-viz__track::before { background: var(--c-red); }
[data-state="error"] .sim-viz__status        { color: var(--c-red); }

/* ─────────────────────────────────────
   Docker Hub ブラウザパネル
───────────────────────────────────── */
.sim-hub-slot {
    /* ブラウザパネル内に収まるため border 不要 */
}

.sim-hub {
    background: var(--c-bg);
}

/* ヘッダー */
.sim-hub__header {
    display         : flex;
    align-items     : center;
    gap             : 10px;
    padding         : 7px 14px;
    background-color: #0e3a52;
    border-bottom   : 1px solid #1d6087;
    user-select     : none;
}

.sim-hub__whale-svg {
    width      : 22px;
    height     : 16px;
    color      : #1d90c8;
    flex-shrink: 0;
    display    : block;
}

.sim-hub__title {
    display    : flex;
    align-items: center;
    gap        : 6px;
    font-size  : 12px;
    font-weight: 700;
    color      : #ffffff;
    flex-shrink: 0;
    white-space: nowrap;
}

.sim-hub__subtitle {
    font-weight: 400;
    color      : rgba(255,255,255,0.55);
    font-size  : 11px;
}

.sim-hub__search-wrap {
    flex    : 1;
    min-width: 0;
}

.sim-hub__search {
    width      : 100%;
    box-sizing : border-box;
    background : rgba(255,255,255,0.08);
    border     : 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    color      : #fff;
    font-family: inherit;
    font-size  : 11px;
    padding    : 3px 8px;
    outline    : none;
    transition : border-color 0.2s;
}
.sim-hub__search::placeholder { color: rgba(255,255,255,0.35); }
.sim-hub__search:focus         { border-color: #1d90c8; }

.sim-hub__toggle {
    background  : transparent;
    border      : none;
    color       : rgba(255,255,255,0.5);
    cursor      : pointer;
    font-size   : 10px;
    padding     : 2px 4px;
    flex-shrink : 0;
    line-height : 1;
}
.sim-hub__toggle:hover { color: #fff; }

/* ボディ（スクロール可能） */
.sim-hub__body {
    padding   : 8px 12px 10px;
    max-height: 210px;
    overflow-y: auto;
}
.sim-hub__body::-webkit-scrollbar       { width: 4px; }
.sim-hub__body::-webkit-scrollbar-track { background: transparent; }
.sim-hub__body::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

.sim-hub__hint {
    font-size  : 10px;
    color      : var(--c-muted);
    margin     : 0 0 8px;
    padding    : 0;
    line-height: 1.4;
}
.sim-hub__hint code {
    color      : var(--c-blue);
    font-family: inherit;
}

.sim-hub__empty {
    font-size: 11px;
    color    : var(--c-muted);
    padding  : 8px 0;
}

/* カードグリッド */
.sim-hub__grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 8px;
}

/* カード */
.sim-hub__card {
    background   : var(--c-bg-light);
    border       : 1px solid var(--c-border);
    border-radius: 6px;
    padding      : 8px 8px 6px;
    transition   : border-color 0.2s, box-shadow 0.2s;
    min-width    : 0;
}
.sim-hub__card:hover {
    border-color: var(--c-docker);
    box-shadow  : 0 0 0 1px rgba(29,144,200,0.3);
}

.sim-hub__card-top {
    display    : flex;
    align-items: flex-start;
    gap        : 5px;
    margin-bottom: 4px;
}

.sim-hub__card-icon {
    font-size  : 14px;
    flex-shrink: 0;
    line-height: 1.2;
}

.sim-hub__card-info {
    flex    : 1;
    min-width: 0;
}

.sim-hub__card-name {
    font-size    : 11px;
    font-weight  : 700;
    color        : var(--c-blue);
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.sim-hub__card-stars {
    font-size: 9px;
    color    : var(--c-yellow);
}

.sim-hub__official {
    font-size   : 7px;
    font-weight : 700;
    color       : var(--c-docker);
    border      : 1px solid var(--c-docker);
    border-radius: 2px;
    padding     : 1px 2px;
    flex-shrink : 0;
    white-space : nowrap;
    line-height : 1.3;
}

.sim-hub__card-desc {
    font-size     : 9px;
    color         : var(--c-muted);
    line-height   : 1.4;
    margin-bottom : 2px;
    overflow      : hidden;
    display       : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sim-hub__card-size {
    font-size    : 9px;
    color        : var(--c-muted);
    margin-bottom: 5px;
}

/* タグ */
.sim-hub__tags {
    display  : flex;
    flex-wrap: wrap;
    gap      : 3px;
}

.sim-hub__tag {
    background   : rgba(29,144,200,0.12);
    border       : 1px solid rgba(29,144,200,0.35);
    border-radius: 3px;
    color        : var(--c-blue);
    cursor       : pointer;
    font-family  : inherit;
    font-size    : 9px;
    line-height  : 1.3;
    padding      : 1px 5px;
    transition   : background 0.15s, border-color 0.15s, color 0.15s;
    white-space  : nowrap;
}
.sim-hub__tag:hover {
    background  : rgba(29,144,200,0.35);
    border-color: var(--c-docker);
    color       : #fff;
}
.sim-hub__tag:active {
    background: rgba(29,144,200,0.55);
}

/* ─────────────────────────────────────
   出力エリア
───────────────────────────────────── */
.sim-output {
    padding   : 14px 20px 8px;
    min-height: 100px;
    max-height: 240px;
    overflow-y: auto;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break : break-all;
}

.sim-output::-webkit-scrollbar       { width: 6px; }
.sim-output::-webkit-scrollbar-track { background: transparent; }
.sim-output::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }

/* ─────────────────────────────────────
   出力行
───────────────────────────────────── */
.sim-line               { min-height: 1.4em; }
.sim-line--command      { color: var(--c-blue);   font-weight: 600; margin-top: 6px; }
.sim-line--success      { color: var(--c-green);  }
.sim-line--error        { color: var(--c-red);    }
.sim-line--warn         { color: var(--c-yellow); }

/* ─────────────────────────────────────
   入力行
───────────────────────────────────── */
.sim-input-row {
    display     : flex;
    align-items : center;
    padding     : 8px 20px 14px;
    border-top  : 1px solid var(--c-header);
    gap         : 8px;
}

.sim-prompt {
    color      : var(--c-green);
    font-weight: 700;
    flex-shrink: 0;
    user-select: none;
}

.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);
}
.sim-input::placeholder { color: var(--c-border); }

/* ─────────────────────────────────────
   クイックアクション（スマホ向けボタン）
───────────────────────────────────── */
.sim-quick-actions {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
    gap        : 6px;
    padding    : 7px 20px 9px;
    background : var(--c-bg-light);
    border-top : 1px solid var(--c-border);
}

.sim-quick-label {
    font-size  : 11px;
    color      : var(--c-muted);
    flex-shrink: 0;
    user-select: none;
}

.sim-quick-btn {
    background   : transparent;
    border       : 1px solid var(--c-border);
    border-radius: 4px;
    color        : var(--c-blue);
    cursor       : pointer;
    font-family  : inherit;
    font-size    : 11px;
    line-height  : 1.4;
    padding      : 3px 10px;
    transition   : background 0.15s, border-color 0.15s;
    white-space  : nowrap;
}
.sim-quick-btn:hover  { background: rgba(137,180,250,0.12); border-color: var(--c-blue); }
.sim-quick-btn:active { background: rgba(137,180,250,0.25); }

/* ─────────────────────────────────────
   レスポンシブ
───────────────────────────────────── */
@media (max-width: 520px) {
    .docker-sim-widget { font-size: 12px; }
    .sim-viz           { padding: 12px 10px; }
    .sim-viz__side     { width: 72px; }
    .sim-viz__icon     { width: 36px; height: 36px; }
    .sim-viz__hub-layers,
    .sim-viz__local-layers { width: 64px; }
    .sim-output        { max-height: 180px; }
    .sim-hub__grid     { grid-template-columns: repeat(2, 1fr); }
    .sim-hub__body     { max-height: 180px; }
}