/*
 * 琐事记录:右下角的悬浮面板 + /notes 的时间线。
 *
 * 面板的样式会被整份复制到画中画窗口里(见 notes_controller.js 的 copyStyles),
 * 所以这里只能用 application.css 里的变量,别依赖页面上的其它结构。
 * 小窗里的差异统一写在文件末尾的 .notes-pip 里。
 */

.notes-widget {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
}

.notes-fab {
  width: 52px;
  height: 52px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
}

.notes-fab:hover {
  filter: brightness(1.1);
}

.notes-panel {
  position: fixed;
  right: 16px;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  /* 手机上贴着两边留一点边距就行 */
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 140px));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: 0 8px 28px rgb(0 0 0 / 22%);
  overflow: hidden;
}

/* 作者样式里的 display 会盖掉 hidden 属性自带的 display:none,得显式挡一道 */
.notes-panel[hidden] {
  display: none;
}

.notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.notes-tabs {
  display: flex;
  gap: 4px;
}

.notes-tab {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-muted);
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.notes-tab-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

.notes-header-actions {
  display: flex;
  gap: 2px;
}

.notes-icon-button {
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}

.notes-icon-button:hover {
  background: var(--color-border);
}

.notes-messages {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  background: var(--color-bg-subtle);
}

.notes-hint {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  text-align: center;
}

/* 记的全是自己的话,所以一律靠右,跟聊天软件里发出去的消息一个位置 */
.notes-bubble {
  max-width: 88%;
  margin: 0 0 10px auto;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  border-bottom-right-radius: 2px;
  background: var(--color-bg);
}

.notes-bubble-text {
  margin: 0;
  font-size: 0.9375rem;
  /* 换行和空格照原样留着 —— 记的是随手写的东西 */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.notes-bubble-images {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.notes-bubble-images img {
  max-width: 100%;
  max-height: 180px;
  border-radius: 4px;
  object-fit: cover;
}

.notes-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
  color: var(--color-muted);
  font-size: 0.6875rem;
}

.notes-bubble-tag {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-bg-subtle);
}

.notes-bubble-delete {
  border: 0;
  padding: 0 4px;
  background: transparent;
  color: var(--color-muted);
  font-family: inherit;
  font-size: 0.6875rem;
  cursor: pointer;
}

.notes-bubble-delete:hover {
  color: var(--color-danger);
}

.notes-error {
  margin: 0;
  padding: 6px 12px;
  background: var(--color-alert-bg);
  color: var(--color-alert-text);
  font-size: 0.8125rem;
}

.notes-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0;
}

.notes-attachment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 160px;
  padding: 2px 4px 2px 8px;
  border-radius: 999px;
  background: var(--color-bg-subtle);
  color: var(--color-muted);
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notes-attachment-drop {
  border: 0;
  padding: 0 4px;
  background: transparent;
  color: var(--color-muted);
  font-family: inherit;
  cursor: pointer;
}

.notes-composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.notes-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  /* 16px 以下 iOS Safari 会在聚焦时自动放大页面 */
  font-size: 16px;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
}

.notes-composer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.notes-send {
  padding: 8px 12px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-family: inherit;
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
}

.notes-send:disabled {
  opacity: 0.6;
  cursor: progress;
}

.notes-footer {
  padding: 6px 12px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  text-align: center;
}

.notes-footer-link {
  font-size: 0.75rem;
  text-decoration: none;
}

/* ===== 画中画窗口里:面板要铺满整个小窗 =====
   小窗是常驻便签,强制亮色 —— 不然系统开了深色模式时 prefers-color-scheme: dark
   会一路生效,把 --color-bg 等变量覆写成深色,浮窗就莫名其妙变黑了。 */

.notes-pip {
  margin: 0;
  overflow: hidden;

  --color-text: #1f2328;
  --color-muted: #656d76;
  --color-border: #d1d9e0;
  --color-bg: #ffffff;
  --color-bg-subtle: #f6f8fa;
  --color-accent: #1f6feb;
  --color-accent-text: #ffffff;
  --color-danger: #cf222e;
  --color-success-bg: #dafbe1;
  --color-success-text: #0a5c2e;
  --color-alert-bg: #ffebe9;
  --color-alert-text: #a40e26;
}

.notes-pip .notes-panel {
  position: static;
  width: 100%;
  height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--color-bg);
}

/* 收起态:只留标题栏,body 其余内容缩起来,最大化减小遮挡。
   点标题栏空白处即可在「收起」与「展开」之间切换(见 notes_controller.js)。 */
.notes-pip .notes-header {
  cursor: pointer;
}

.notes-pip .notes-header [data-notes-action] {
  cursor: default;
}

.notes-pip.notes-collapsed .notes-body,
.notes-pip.notes-collapsed .notes-footer {
  display: none;
}

.notes-pip.notes-collapsed {
  height: auto;
}

/* ===== /notes 的时间线 ===== */

.note-day {
  margin-bottom: 20px;
}

.note-day-title {
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted);
}

.note-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-card {
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.note-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* button_to 包的那层 form 顶到右边,并消掉默认间距 */
.note-card-delete {
  margin: 0 0 0 auto;
}

.note-card-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.note-card-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.note-card-images img {
  max-height: 160px;
  border-radius: 4px;
}