/* === tool-forest サイト専用スタイル === */
/* 共通CSS (style.css / Tailwind) で不足するスタイルをここに追加 */

/* --- 共通サイドバーセクション（全画像ツール） --- */
.sidebar-section { padding: 16px; border-bottom: 1px solid #e2e8f0; }
.sidebar-section:last-child { border-bottom: none; }

/* --- キャンバスラッパー（mosaic, annotate） --- */
#canvasWrap { position: relative; overflow: hidden; background: #f1f5f9; border-radius: 0.75rem; border: 1px solid #e2e8f0; }
#displayCanvas { display: block; touch-action: none; }

/* --- トグルボタングループ（mosaic） --- */
.toggle-group { display: inline-flex; border-radius: 0.5rem; border: 1px solid #e2e8f0; overflow: hidden; }
.toggle-btn { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #64748b; background: #fff; cursor: pointer; border: none; transition: all 0.15s; }
.toggle-btn:not(:last-child) { border-right: 1px solid #e2e8f0; }
.toggle-btn:hover { background: #f1f5f9; }
.toggle-btn.active { background: #10b981; color: #fff; }
.toggle-btn.active svg { stroke: #fff; }

/* --- トースト通知（ToolUtils.showToast で動的生成） --- */
#toolToastContainer {
  position: fixed; top: 1rem; right: 1rem; z-index: 9999;
  display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none;
}
.tool-toast {
  padding: 0.75rem 1rem; border-radius: 0.5rem; color: #fff;
  font-size: 0.875rem; font-weight: 500;
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  transform: translateX(110%); opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: auto;
}
.tool-toast.show { transform: translateX(0); opacity: 1; }
.tool-toast.success { background: #059669; }
.tool-toast.error { background: #dc2626; }
.tool-toast.warn { background: #d97706; }

/* --- select カスタム矢印 (ネイティブfocus枠の回避 + 指カーソル) --- */
.tool-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 14px;
  padding-right: 2rem;
  cursor: pointer;
}
.tool-select::-ms-expand { display: none; }