/* style.css */
body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
    margin-bottom: 30px;
}

.palette {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.component-box {
    width: 80px;
    height: 80px;
    background-color: #4CAF50; /* Green for AND, adjust as needed */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 8px;
    cursor: grab;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.1s ease-in-out;
    user-select: none; /* テキスト選択防止 */
}

.component-box:active {
    cursor: grabbing;
    transform: scale(1.05);
}

/* 各コンポーネントのパレット内のスタイル */
.and-gate-template { background-color: #4CAF50; }
.or-gate-template { background-color: #9C27B0; }
.not-gate-template { background-color: #F44336; }

#workspace {
    width: 90vw;
    height: 60vh;
    border: 2px dashed #ccc;
    background-color: white;
    position: relative; /* 子要素の絶対配置のため */
    overflow: hidden; /* ブロックがはみ出さないように */
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

/* ワークスペースに配置されるコンポーネントの基本スタイル */
.component {
    position: absolute;
    border: 2px solid #555;
    background-color: #eee;
    color: #333;
    display: flex;
    flex-direction: column; /* メインのコンテンツ（名前など）を縦に並べる */
    justify-content: center; /* ゲート名を中央に */
    align-items: center;
    font-weight: bold;
    border-radius: 8px;
    padding: 5px;
    box-sizing: border-box; /* paddingを含めてwidth/heightを計算 */
    cursor: grab;
    user-select: none; /* テキスト選択防止 */
}
.component:active {
    cursor: grabbing;
}

/* style.css */

/* --- 既存のCSSルールは省略 --- */

/* タイマーゲートのスタイル */
.timer-gate {
    width: 100px; /* ゲートと同じくらいの幅 */
    height: 80px; /* ゲートと同じくらいの高さ */
    background-color: #d6eaff; /* 水色系など、他のゲートと区別できる色 */
    border: 1px solid #a0c4ff;
}

/* タイマーゲート内の遅延時間表示 */
.timer-gate .delay-display {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
}

/* ドットの共通スタイル */
.dot {
    width: 10px;
    height: 10px;
    background-color: gray;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #333;
    position: absolute; /* 親要素 (.component) に対して絶対配置 */
    z-index: 1; /* ドットを前面に表示 */
}

/* 入力ドットコンテナ (左側) */
.input-dot-left {
    position: absolute;
    left: 0;
    top: 50%; /* 垂直方向の中央 */
    transform: translateY(-50%); /* 自身の高さの半分で調整 */
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* 複数の入力ドットを均等に配置 */
    height: calc(100% - 10px); /* 親要素の高さからpaddingを引く */
    padding: 5px 0;
    box-sizing: border-box;
}
.input-dot-left .dot {
    position: relative; /* 親要素 (.input-dot-left) に対して相対配置 */
    left: -5px; /* ドットの半分を外に出す */
    margin: 0; /* デフォルトマージンをリセット */
}

/* 出力ドットコンテナ (右側) */
.output-dot-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center; /* 1つの出力ドットを中央に */
    height: calc(100% - 10px);
    padding: 5px 0;
    box-sizing: border-box;
}
.output-dot-right .dot {
    position: relative;
    right: -5px; /* ドットの半分を外に出す */
    margin: 0; /* デフォルトマージンをリセット */
}

/* ワイヤーのスタイル */
.wire {
    position: absolute;
    background-color: #333; /* ワイヤーの色 */
    height: 2px; /* ワイヤーの太さ */
    z-index: 100; /* 他の要素の下に表示（見えない場合は100などにしてテスト） */
    transform-origin: 0 0; /* 回転の原点 */
    cursor: pointer; /* ワイヤーの上にカーソルを置くとポインタに変わる */
}
.wire.active { /* 信号が1の場合のワイヤーの色 */
    background-color: #FF4081; /* 赤色など目立つ色に */
}

/* 削除ボタンに関するスタイルは全て削除しました */
/* .delete-button や .component.selected .delete-button も削除済みです */

/* 選択されているコンポーネントの見た目を強調するためのスタイル（右クリック削除とは直接関係なし） */
.component.selected {
    border-color: #2196F3; /* 選択されていることを示す色 */
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.5); /* 選択されていることを示す影 */
}

.yellow-led-template { background-color: #FFC107; }

/* LEDのスタイル */
.yellow-led {
    width: 60px; /* 小さめ */
    height: 60px;
    background-color: #FFC107; /* Light Amber 黄色*/
    border-radius: 50%; /* 円形にする */
    cursor: default;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.yellow-led.on {
	background-color: #FFEB3B; /* Bright Yellow when ON */
    box-shadow: 0 0 15px #FFEB3B, 0 0 25px #FFEB3B;
}

.blue-led-template { background-color: #00008B; }
.blue-led {
    width: 60px; /* 小さめ */
    height: 60px;
    background-color: #00008B; /* Light Amber 青色*/
    border-radius: 50%; /* 円形にする */
    cursor: default;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.blue-led.on {
	background-color: #2196F3; /* Bright blue when ON */
    box-shadow: 0 0 15px #2196F3, 0 0 25px #2196F3;
}
.green-led-template { background-color: #008000; }
.green-led {
    width: 60px; /* 小さめ */
    height: 60px;
    background-color: #008000; /* Light Amber 緑色*/
    border-radius: 50%; /* 円形にする */
    cursor: default;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.green-led.on {
	background-color: #4CAF50; /* Bright green when ON */
    box-shadow: 0 0 15px #4CAF50, 0 0 25px #4CAF50;
}
.red-led-template { background-color: #CC0000; }
.red-led {
    width: 60px; /* 小さめ */
    height: 60px;
    background-color: #CC0000; /* Light Amber 赤色*/
    border-radius: 50%; /* 円形にする */
    cursor: default;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.red-led.on {
 	background-color: #FF0000; /* Bright red when ON */
    box-shadow: 0 0 15px #FF0000, 0 0 25px #FF0000;
}