/**
 * Secretary Panel Styles
 * Left-side floating panel for Pinot Secretary
 * Version: 2.0
 */

/* Secretary パネル - 左側固定 */
.secretary-panel {
  position: fixed;
  top: 50px; /* ヘッダー高さ分下げる */
  left: 0;
  width: 400px;
  height: calc(100vh - 50px - 40px); /* ヘッダー(50px) + フッター(40px) */
  background: white;
  border-right: 1px solid #ddd;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: transform 0.3s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Drop zone active state - visual feedback when dragging over */
.secretary-panel.secretary-drop-active {
  border-right: 3px solid hsl(var(--theme-bourgogne));
  box-shadow: 2px 0 15px hsl(var(--theme-bourgogne) / 0.4);
  background: hsl(var(--theme-rose-mist) / 0.3);
}

.secretary-panel.secretary-drop-active::before {
  content: '📁 Drop file/folder here to send to Secretary';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: hsl(var(--theme-bourgogne));
  color: white;
  padding: 20px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  pointer-events: none;
  z-index: 10001;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}

/* リサイズ中はtransitionを無効化 */
.secretary-panel.resizing {
  transition: none;
}

/* 閉じた状態 */
.secretary-panel.closed {
  transform: translateX(-100%);
}

/* Secretary iframe */
.secretary-panel iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* リサイズハンドル - パネルの右端 */
.secretary-resize-handle {
  position: absolute;
  top: 0;
  right: -6px; /* 右側に6px張り出す（計12pxの幅） */
  width: 12px; /* 幅を12pxに拡大 */
  height: 100%;
  cursor: ew-resize;
  background: transparent;
  z-index: 1002;
  transition: background 0.2s ease;
}

/* 中央に細い線を表示（視覚的フィードバック） */
.secretary-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  left: 5px; /* 中央に配置 */
  width: 2px;
  height: 100%;
  background: hsl(var(--theme-bordeaux) / 0.2);
  transition: background 0.2s ease;
}

.secretary-resize-handle:hover {
  background: hsl(var(--theme-bourgogne) / 0.1);
}

.secretary-resize-handle:hover::after {
  background: hsl(var(--theme-bourgogne) / 0.5);
  width: 3px;
  left: 4.5px;
}

.secretary-resize-handle:active,
.secretary-resize-handle.dragging {
  background: hsl(var(--theme-bourgogne) / 0.15);
}

.secretary-resize-handle:active::after,
.secretary-resize-handle.dragging::after {
  background: hsl(var(--theme-bourgogne));
  width: 3px;
  left: 4.5px;
}

/* トグルボタン */
.secretary-toggle {
  position: fixed;
  top: 50%;
  left: 400px; /* パネルの右端（開いている時） */
  transform: translateY(-50%);
  width: 20px;
  height: 40px;
  background: hsl(var(--theme-bordeaux));
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 1001; /* パネルより上 */
  transition: background 0.2s ease; /* leftのtransitionを削除 - リサイズ時に即座に追従 */
}

/* リサイズ中はtransitionを完全に無効化 */
.secretary-toggle.resizing {
  transition: none;
}

/* 閉じた状態のボタン位置（隣接セレクタ） */
.secretary-panel.closed + .secretary-toggle {
  left: 0; /* 画面左端に配置 */
}

.secretary-toggle:hover {
  background: hsl(var(--theme-bourgogne));
}

/* アイコン表示制御（隣接セレクタ） */
.secretary-panel:not(.closed) + .secretary-toggle .icon-open {
  display: inline;
}

.secretary-panel:not(.closed) + .secretary-toggle .icon-close {
  display: none;
}

.secretary-panel.closed + .secretary-toggle .icon-open {
  display: none;
}

.secretary-panel.closed + .secretary-toggle .icon-close {
  display: inline;
}

/* メインコンテンツのマージン調整 */
/* JavaScript で body.secretary-open class を追加/削除する */
body.secretary-open .main-content {
  margin-left: 400px;
  transition: margin-left 0.3s ease;
}

/* モバイル対応: オーバーレイモード */
@media (max-width: 768px) {
  /* パネルを全画面オーバーレイモードに変更 */
  .secretary-panel {
    width: 100vw; /* 全画面幅 */
    height: 100vh; /* 全画面高さ */
    top: 0; /* ヘッダーを含めた全画面 */
    z-index: 9999; /* 他の要素より上に表示 */
  }

  /* 閉じた状態は左側に完全に隠す */
  .secretary-panel.closed {
    transform: translateX(-100%);
  }

  /* トグルボタンのサイズと位置を調整 */
  .secretary-toggle {
    width: 30px; /* モバイルではタップしやすいサイズに */
    height: 60px;
    font-size: 16px;
    border-radius: 0 8px 8px 0;
  }

  /* 開いている時のトグルボタンの位置 */
  .secretary-panel:not(.closed) + .secretary-toggle {
    left: calc(100vw - 30px) !important; /* 右端に表示 */
  }

  /* 閉じている時のトグルボタンの位置 */
  .secretary-panel.closed + .secretary-toggle {
    left: 0 !important; /* 左端に表示 */
  }

  /* リサイズハンドルは非表示 */
  .secretary-resize-handle {
    display: none;
  }

  /* メインコンテンツのマージンは常に0 */
  body .main-content {
    margin-left: 0 !important;
  }

  /* body.secretary-open でもマージンなし */
  body.secretary-open .main-content {
    margin-left: 0 !important;
  }

  /* オーバーレイ時の背景（暗くする） */
  .secretary-panel:not(.closed)::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: -1; /* パネルの後ろ */
    pointer-events: none;
  }
}

/* Global Chat は右下に維持（z-index 調整） */
.space-chat-panel {
  z-index: 999; /* Secretary より下 */
}

/* Secretary パネルが開いている時は記事コンテンツとタイトルを左寄せにして左余白を削減 */
.secretary-panel:not(.closed) ~ #content .blog-content {
  margin-left: 30px;
  margin-right: auto;
}

.secretary-panel:not(.closed) ~ #content h1.blog-title {
  margin-left: 30px;
  text-align: left;
}

/* Secretary パネルが開いている時はブログ情報（日付、言語、ブックマーク、いいね、ボタン）も左寄せ */
/* より具体的なセレクターで確実に適用 */
body.secretary-open .mainbar .author-info,
body.secretary-open #blog-main .author-info,
.secretary-panel:not(.closed) ~ #content .author-info {
  margin-left: 30px !important;
  justify-content: flex-start !important;  /* 中央揃えを解除して左寄せに */
}

body.secretary-open .mainbar .text-center,
body.secretary-open #blog-main .text-center,
.secretary-panel:not(.closed) ~ #content .text-center {
  text-align: left !important;
  margin-left: 30px !important;
}

body.secretary-open .mainbar .language.center,
body.secretary-open #blog-main .language.center,
.secretary-panel:not(.closed) ~ #content .language.center {
  text-align: left !important;
  margin-left: 30px !important;
  justify-content: flex-start !important;  /* flexbox の中央揃えを解除して左寄せに */
}

/* カウンター（いいね・ブックマーク）のラッパー */
body.secretary-open .mainbar .counters-wrapper,
body.secretary-open #blog-main .counters-wrapper,
.secretary-panel:not(.closed) ~ #content .counters-wrapper {
  justify-content: flex-start !important;  /* 左寄せ */
  margin-left: 30px !important;
}

body.secretary-open .mainbar .blog-actions,
body.secretary-open #blog-main .blog-actions,
.secretary-panel:not(.closed) ~ #content .blog-actions {
  margin-left: 30px !important;
  justify-content: flex-start !important;  /* 中央揃えを解除して左寄せに */
}