/*
 * Ekonte Comments — レビューモード時のコメントUI
 * 依存: なし (vanilla CSS)
 * 利用側で読み込む: <link rel="stylesheet" href="static/comments.css">
 */

:root {
  --ec-accent: #f06b3a;
  --ec-bg: #181b22;
  --ec-bg-2: #1f232c;
  --ec-text: #e6e8ee;
  --ec-text-dim: #9aa1ad;
  --ec-border: #2a2f3a;
  --ec-highlight: rgba(253, 216, 53, 0.35);
  --ec-highlight-active: rgba(253, 216, 53, 0.65);
  --ec-resolved: rgba(74, 222, 128, 0.3);
  --ec-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   1. ハイライト（コメント対象範囲のテキスト下線）
   ============================================================ */
/* textarea/inputには直接ハイライトできないので、外側のラッパで疑似的に出す */
.ec-host {
  position: relative;
}
.ec-host[data-has-comments="true"]::after {
  content: "💬";
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 11px;
  pointer-events: none;
  opacity: 0.6;
}

.ec-highlight {
  background: var(--ec-highlight);
  border-bottom: 1px dashed var(--ec-accent);
  cursor: pointer;
}
.ec-highlight.resolved {
  background: var(--ec-resolved);
  text-decoration: line-through;
  opacity: 0.6;
}
.ec-highlight.active {
  background: var(--ec-highlight-active);
}
.ec-highlight.dangling {
  background: transparent;
  border-bottom: 1px dashed #888;
  text-decoration: line-through wavy;
}

/* ============================================================
   2. フローティングポップ（選択時の「💬 コメント追加」）
   ============================================================ */
.ec-popup {
  position: fixed;
  z-index: 1000;
  background: var(--ec-bg-2);
  border: 1px solid var(--ec-border);
  border-radius: 6px;
  box-shadow: var(--ec-shadow);
  padding: 4px;
  display: none;
  pointer-events: auto;
}
.ec-popup.show {
  display: block;
  animation: ec-popin 0.12s ease-out;
}
.ec-popup-btn {
  background: linear-gradient(135deg, #f06b3a, #ff8a5c);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.ec-popup-btn:hover {
  filter: brightness(1.1);
}
@keyframes ec-popin {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   3. サイドパネル（既存コメント一覧）
   ============================================================ */
.ec-panel {
  background: var(--ec-bg);
  color: var(--ec-text);
  border-left: 1px solid var(--ec-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif;
  font-size: 12px;
}
.ec-panel.hidden {
  display: none;
}
.ec-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ec-border);
  background: var(--ec-bg-2);
}
.ec-panel-head .ec-title {
  font-weight: 700;
  font-size: 13px;
  flex: 1;
}
.ec-panel-head .ec-count {
  background: var(--ec-accent);
  color: white;
  border-radius: 9px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
}
.ec-panel-head .ec-filter {
  background: transparent;
  border: 1px solid var(--ec-border);
  color: var(--ec-text);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.ec-panel-head .ec-filter.active {
  border-color: var(--ec-accent);
  color: var(--ec-accent);
}

.ec-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.ec-list:empty::after {
  content: "まだコメントはありません";
  display: block;
  color: var(--ec-text-dim);
  text-align: center;
  padding: 24px 8px;
  font-size: 12px;
}

/* ============================================================
   4. コメント1件
   ============================================================ */
.ec-item {
  background: var(--ec-bg-2);
  border: 1px solid var(--ec-border);
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.ec-item:hover {
  border-color: var(--ec-accent);
}
.ec-item.resolved {
  opacity: 0.55;
}
.ec-item.active {
  border-color: var(--ec-accent);
  box-shadow: 0 0 0 2px rgba(240, 107, 58, 0.15);
}
.ec-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  margin-bottom: 6px;
}
.ec-author {
  font-weight: 600;
  color: var(--ec-text);
}
.ec-target {
  background: var(--ec-bg);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  color: var(--ec-text-dim);
}
.ec-target.title { color: #6b7;}
.ec-target.keyMessage { color: #fbbf24; }
.ec-target.script { color: #88c0ff; }
.ec-time {
  margin-left: auto;
  color: var(--ec-text-dim);
  font-size: 10px;
}

.ec-quote {
  background: var(--ec-bg);
  border-left: 2px solid var(--ec-accent);
  padding: 4px 8px;
  font-size: 11px;
  color: var(--ec-text-dim);
  margin: 6px 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 80px;
  overflow: auto;
  line-height: 1.4;
}

.ec-body {
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ec-text);
  margin: 4px 0;
}

.ec-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  border-top: 1px solid var(--ec-border);
  padding-top: 6px;
}
.ec-item-actions button {
  background: transparent;
  border: 1px solid var(--ec-border);
  color: var(--ec-text-dim);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.ec-item-actions button:hover {
  color: var(--ec-text);
  border-color: var(--ec-accent);
}
.ec-item-actions button.danger:hover {
  color: #ff8b8b;
  border-color: #a55;
}

/* ============================================================
   5. 新規コメント / 編集フォーム
   ============================================================ */
.ec-form {
  background: var(--ec-bg-2);
  border: 1px solid var(--ec-accent);
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 8px;
  box-shadow: 0 0 0 2px rgba(240, 107, 58, 0.15);
}
.ec-form .ec-quote {
  margin-bottom: 8px;
}
.ec-form textarea {
  width: 100%;
  min-height: 70px;
  background: var(--ec-bg);
  border: 1px solid var(--ec-border);
  border-radius: 4px;
  padding: 8px;
  font-size: 12px;
  font-family: inherit;
  color: var(--ec-text);
  resize: vertical;
  box-sizing: border-box;
}
.ec-form textarea:focus {
  outline: none;
  border-color: var(--ec-accent);
}
.ec-form-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 8px;
}
.ec-form-actions button {
  background: transparent;
  border: 1px solid var(--ec-border);
  color: var(--ec-text);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.ec-form-actions button.primary {
  background: var(--ec-accent);
  border-color: var(--ec-accent);
  color: white;
  font-weight: 600;
}
.ec-form-actions button.primary:hover {
  filter: brightness(1.1);
}

/* ============================================================
   6. モード表示・空状態
   ============================================================ */
.ec-empty-state {
  padding: 24px 12px;
  text-align: center;
  color: var(--ec-text-dim);
  font-size: 12px;
  line-height: 1.5;
}
.ec-mode-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.ec-mode-badge.edit { background: rgba(136, 192, 255, 0.2); color: #88c0ff; }
.ec-mode-badge.review { background: rgba(240, 107, 58, 0.2); color: var(--ec-accent); }

/* ============================================================
   7. レビューモード時の編集ロック
   ============================================================ */
.ec-readonly input,
.ec-readonly textarea {
  cursor: text;
  /* readonly 属性で実際はロック。色味で示唆する */
  background: rgba(255, 255, 255, 0.02);
}