/* =======================
   ベースレイアウト
======================= */
html, body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #f9f9f9;
  color: #111;
  display: flex;
  flex-direction: column;
  height: 100vh;
  transition: background 0.3s, color 0.3s;
  -webkit-text-size-adjust: 100%;
}

body.dark-mode {
  background: #1e1e1e;
  color: #ddd;
}

/* =======================
   考え中アニメーション
======================= */
.typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px 0;
}

.typing .dot {
  width: 8px;
  height: 8px;
  background: #666;
  border-radius: 50%;
  animation: typing-bounce 1.4s infinite ease-in-out;
}

.typing .dot:nth-child(1) {
  animation-delay: 0s;
}

.typing .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

body.dark-mode .typing .dot {
  background: #aaa;
}

/* =======================
   トップバー
======================= */
#topbar {
  display: none;
}

/* =======================
   コンテナ
======================= */
#container {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* =======================
   サイドバー
======================= */
#sidebar {
  width: 240px;
  background: #fafafa;
  padding: 12px;
  box-sizing: border-box;
  border-right: 1px solid #ddd;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
body.dark-mode #sidebar {
  background: #202020;
  border-right: 1px solid #333;
  color: #ddd;
}
#sidebar h2 {
  margin-top: 0;
  font-size: 15px;
  font-weight: 600;
}
#historyList {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  flex: 1;
  overflow-y: auto;
}
#historyList li {
  margin-bottom: 6px;
  font-size: 14px;
  background: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#historyList li:hover {
  background: #eee;
}
body.dark-mode #historyList li {
  background: #2a2a2a;
}
body.dark-mode #historyList li:hover {
  background: #333;
}
.delete-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  line-height: 1;
}
.delete-btn:hover {
  opacity: 0.7;
}
#resetBtn, #darkToggle, #helpBtn {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
}
#resetBtn {
  background: #0078d4;
  color: white;
}
#resetBtn:hover {
  background: #005fa3;
}
#darkToggle {
  background: #444;
  color: white;
  font-size: 18px;
}
#darkToggle:hover {
  background: #555;
}
body.dark-mode #darkToggle {
  background: #666;
}
body.dark-mode #darkToggle:hover {
  background: #777;
}
#helpBtn {
  background: #28a745;
  color: white;
}
#helpBtn:hover {
  background: #218838;
}
body.dark-mode #helpBtn {
  background: #2d7a3e;
}
body.dark-mode #helpBtn:hover {
  background: #256b35;
}

/* =======================
   メインエリア
======================= */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* =======================
   メッセージエリア
======================= */
#messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

/* =======================
   メッセージブロック
======================= */
.message {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #eee;
  justify-content: flex-start;
}
body.dark-mode .message {
  border-bottom: 1px solid #333;
}
.message.user {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.message.user .bubble {
  background: #001f4d;
  color: white;
}
.message.ai .bubble {
  background: #f7f7f8;
  color: #111;
}
body.dark-mode .message.ai .bubble {
  background: #2a2a2a;
  color: #ddd;
}

/* =======================
   Markdownスタイル
======================= */
.bubble {
  flex: 1;
  border-radius: 6px;
  padding: 12px;
  color: inherit;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
.bubble h1, .bubble h2, .bubble h3 {
  font-weight: 600;
  margin: 0.8em 0 0.4em 0;
}
.bubble p {
  margin: 0.4em 0;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.bubble ul, .bubble ol {
  padding-left: 1.2em;
  margin: 0.4em 0;
}
.bubble li {
  margin: 0.2em 0;
}
.bubble a {
  color: #0078d4;
  text-decoration: underline;
  word-break: break-all;
}
body.dark-mode .bubble a {
  color: cyan;
}
.bubble table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: block;
}
.bubble img {
  max-width: 100%;
  height: auto;
}

/* =======================
   コードブロック（highlight.js）
======================= */
pre {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  position: relative;
}
pre code {
  display: block;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.95em;
}

/* highlight.js VS Code風 */
.hljs { background: transparent !important; }
.hljs-comment, .hljs-quote { color: #6a9955; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: #569cd6; font-weight: bold; }
.hljs-section { color: #569cd6; font-weight: bold; }
.hljs-function, .hljs-title, .hljs-name { color: #dcdcaa; }
.hljs-params, .hljs-variable, .hljs-attr { color: #9cdcfe; }
.hljs-string, .hljs-regexp { color: #ce9178; }
.hljs-number { color: #b5cea8; }
.hljs-built_in, .hljs-builtin-name, .hljs-type { color: #4ec9b0; }
.hljs-meta, .hljs-meta-keyword { color: #569cd6; }
.hljs-bullet { color: #d7ba7d; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
.hljs-class .hljs-title { color: #4ec9b0; }
.hljs-tag { color: #569cd6; }
.hljs-attribute { color: #9cdcfe; }
.hljs-operator, .hljs-punctuation { color: #d4d4d4; }

/* コピー用ボタン */
.copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #0078d4;
  color: white;
  border: none;
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}
.copy-btn:hover {
  background: #005fa3;
}

/* =======================
   入力エリア
======================= */
#inputArea {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid #ddd;
  background: white;
}
body.dark-mode #inputArea {
  background: #1e1e1e;
  border-top: 1px solid #333;
}
#msg {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
}
body.dark-mode #msg {
  background: #2a2a2a;
  color: #ddd;
  border: 1px solid #444;
}
.button-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
#fileInput {
  flex: 1;
  font-size: 14px;
}
#cancelBtn, #sendBtn {
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#cancelBtn {
  background: #d40000;
  color: white;
}
#sendBtn {
  background: #0078d4;
  color: white;
}
#sendBtn:hover {
  background: #005fa3;
}

/* =======================
   スマホ対応
======================= */
@media (max-width: 600px) {
  html, body {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  #container {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
  }

  #sidebar {
    display: none;
  }

  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* 重要: flexboxの子要素が縮小できるようにする */
  }

  #messages {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0; /* 重要: スクロール領域を確保 */
  }

  #inputArea {
    flex-shrink: 0; /* 入力エリアを固定サイズに */
  }

  .message {
    padding: 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .bubble {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* コードブロックのスクロール対応 */
  pre {
    max-width: calc(100vw - 40px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre code {
    white-space: pre;
    word-wrap: normal;
  }

  #inputArea {
    padding: 8px;
    gap: 6px;
  }

  #msg {
    font-size: 16px; /* iOSのズーム防止 */
    min-height: 44px;
  }

  .button-row {
    flex-wrap: wrap;
  }

  #sendBtn, #cancelBtn {
    min-height: 44px; /* タップしやすいサイズ */
    padding: 10px 16px;
  }
}