/* My Note Page (mynote.page) | Built by Lâm Thái Sơn (sonlt.app) */
/* Merriweather Font | SIL Open Font License: https://mynote.page/fonts/merriweather-license.txt */

/* ============================================================
   ██████╗ ███████╗███████╗██╗  ██╗████████╗ ██████╗ ██████╗
   ██╔══██╗██╔════╝██╔════╝██║ ██╔╝╚══██╔══╝██╔═══██╗██╔══██╗
   ██║  ██║█████╗  ███████╗█████╔╝    ██║   ██║   ██║██████╔╝
   ██║  ██║██╔══╝  ╚════██║██╔═██╗    ██║   ██║   ██║██╔═══╝
   ██████╔╝███████╗███████║██║  ██╗   ██║   ╚██████╔╝██║
   ╚═════╝ ╚══════╝╚══════╝╚═╝  ╚═╝   ╚═╝    ╚═════╝ ╚═╝
   BASE STYLES — MÁY TÍNH (DESKTOP)
   ============================================================ */

/* ============================================
   1. VARIABLES & THEMES
   ============================================ */
:root {
  --duration-default: 250ms;
  --duration-fast: 100ms;
  --duration-medium: 150ms;
  --duration-slow: 250ms;
  --duration-theme: 260ms;
  --scrollbar-width: 8px;
  --scrollbar-thumb-border: 1px solid #fff0;
  --scrollbar-thumb-clip: content-box;
  --scrollbar-bg: #1f2023;
  --scrollbar-thumb: #3d3f44;
  --scrollbar-thumb-hover: #46484f;
  --timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --timing-theme: cubic-bezier(0.3, 0, 0.4, 1);
  --z-fab: 1000;
}

body.dark-mode,
body.light-mode {
  --body-bg: #1f2023;
  --box-scrollbar-bg: transparent;
  --box-scrollbar-track: transparent;
}

body.light-mode {
  --menu-item-check-color: #494844;
  --container-bg: #faf8f4;
  --textarea-bg: #ffffff;
  --textarea-text: #2b2a28;
  --text-primary: #2b2a28;
  --text-secondary: #736f6a;
  --text-selection-bg: #d4cfb0;
  --text-selection-color: #000000;
  --border-light: #e0dcc4;
  --border-medium: #d8d3b0;
  --input-focus-border: #c0b07c;
  --divider-border: #d2cca3;
  --box-shadow-light: rgba(0, 0, 0, 0.08);
  --box-shadow-medium: rgba(50, 35, 10, 0.11);
  --input-focus-shadow: rgba(160, 138, 72, 0.11);
  --button-primary-bg: #e5e0cd;
  --button-primary-bg-hover: #ddd8bd;
  --button-primary-text: #2b2a28;
  --button-secondary-bg: #e5e0cd;
  --button-secondary-bg-hover: #ddd8bd;
  --button-secondary-text: #353431;
  --link-bg: #e3dfca;
  --link-notification-bg: #e3dfca;
  --note-highlight-bg: #f1e99c;
  --note-highlight-text: #21201f;
  --pinned-note-border: #a89a5a;
  --pinned-note-shadow: rgba(168, 154, 90, 0.13);
  --notification-status-bg-light: #ffffff;
  --notification-status-text-light: #2b2a28;
  --box-scrollbar-thumb: #e5e0cd;
  --box-scrollbar-thumb-hover: #ddd8bd;
  --toggle-track-off: #ccc8a8;
  --toggle-track-on: #b8a882;
}

body.dark-mode {
  --menu-item-check-color: #e4e4e7;
  --container-bg: #28292d;
  --textarea-bg: #1f2023;
  --textarea-text: #e2e2e5;
  --text-primary: #e4e4e7;
  --text-secondary: #b0b0b9;
  --text-selection-bg: #4a4d51;
  --text-selection-color: #ffffff;
  --border-light: #46484f;
  --border-medium: #46484f;
  --input-focus-border: #4f5159;
  --divider-border: #4f5159;
  --box-shadow-light: rgba(0, 0, 0, 0.2);
  --box-shadow-medium: rgba(0, 0, 0, 0.3);
  --input-focus-shadow: rgba(137, 179, 247, 0.38);
  --button-primary-bg: #3d3f44;
  --button-primary-bg-hover: #46484f;
  --button-primary-text: #e4e4e7;
  --button-secondary-bg: #3d3f44;
  --button-secondary-bg-hover: #46484f;
  --button-secondary-text: #e4e4e7;
  --link-bg: #46484f;
  --link-notification-bg: rgba(0, 0, 0, 0.15);
  --note-highlight-bg: #46484f;
  --note-highlight-text: #f8f9f9;
  --pinned-note-border: #b8bac4;
  --pinned-note-shadow: rgba(184, 186, 196, 0.13);
  --notification-status-bg-dark: #f1f3f4;
  --notification-status-text-dark: #323232;
  --box-scrollbar-thumb: #3d3f44;
  --box-scrollbar-thumb-hover: #46484f;
  --toggle-track-off: #52545e;
  --toggle-track-on: #b0b0b9;
}

/* ============================================
   2. GLOBAL STYLES & TYPOGRAPHY
   ============================================ */
body,
textarea,
.edit-textarea,
#search-input,
button {
  font-family: Merriweather, serif;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
}

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 2rem;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--body-bg);
  transition: background-color var(--duration-theme) var(--timing-theme),
    color var(--duration-theme) var(--timing-theme);
}

body::selection {
  background-color: var(--text-selection-bg);
  color: var(--text-selection-color);
}

h1 {
  margin-top: 0.125rem;
  margin-bottom: 1.25rem;
  font-size: 2.25rem;
  font-weight: 700;
  text-align: center;
}

a {
  color: inherit;
  text-decoration: underline;
}

.note-content .hashtag-link,
.note-content a {
  color: inherit;
  text-decoration: underline;
}

.note-content .hashtag-link:hover,
.credit a:hover {
  text-decoration: underline;
}

/* ============================================
   3. LAYOUT & CONTAINERS
   ============================================ */
.container {
  width: 100%;
  max-width: 39.5rem;
  padding: 1.125rem;
  background-color: var(--container-bg);
  border-radius: 1rem;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05),
    0 0.25rem 0.75rem 0.125rem rgba(0, 0, 0, 0.07);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--timing-function),
    background-color var(--duration-theme) var(--timing-theme);
}

.container.show {
  opacity: 1;
}

.note-input-container {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  margin-bottom: 1.875rem;
}

.notes-list {
  display: grid;
  gap: 1.125rem;
  margin-bottom: 1.5rem;
}

/* ============================================
   4. BUTTONS
   ============================================ */
button {
  padding: 0.625rem 1.25rem;
  border: 1px solid #fff0;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: #fff0;
  transition: background-color var(--duration-fast) var(--timing-function),
    border-color var(--duration-fast) var(--timing-function),
    box-shadow var(--duration-fast) var(--timing-function),
    transform var(--duration-fast) ease;
}

button:active,
button:hover {
  box-shadow: none;
}

button:active {
  transform: translateY(1px);
}

.btn-primary {
  color: var(--button-primary-text);
  background-color: var(--button-primary-bg);
}

.btn-primary:hover {
  background-color: var(--button-primary-bg-hover);
}

.note-actions button,
.btn-read-less,
.btn-read-more {
  border-radius: 0.5rem;
  color: var(--button-secondary-text);
  background-color: var(--button-secondary-bg);
  padding: 0.5625rem 1rem;
  font-size: 0.9375rem;
}

/* Chỉ btn-read-less, btn-read-more mới padding */
.btn-read-less,
.btn-read-more {
  padding: 0.5625rem 2.4rem;
  align-self: flex-start;
  margin-top: 0.875rem;
}

/* Chỉ note-actions button mới flex-grow */
.note-actions button {
  flex-grow: 1;
}

.note-actions button:hover,
.btn-read-less:hover,
.btn-read-more:hover {
  background-color: var(--button-secondary-bg-hover);
}

#load-more-btn {
  display: none;
  width: 100%;
  margin-top: -0.3125rem;
  margin-bottom: 1.5rem;
}

.btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  min-width: unset;
  padding: 0;
  border-radius: 50%;
  color: var(--text-secondary);
  background-color: transparent;
  border: 1px solid transparent;
  transition: background-color var(--duration-fast) var(--timing-function),
    color var(--duration-fast) var(--timing-function),
    border-color var(--duration-fast) var(--timing-function);
}

.btn-close:hover {
  background-color: var(--button-primary-bg);
  color: var(--text-primary);
}

.btn-close:active {
  background-color: var(--button-primary-bg-hover);
  transform: translateY(1px);
}

/* ============================================
   5. INPUTS & TEXTAREAS
   ============================================ */
#search-input,
.edit-textarea,
textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--textarea-bg);
  border: 1px solid var(--border-medium);
  outline: 0;
  resize: none;
  transition: background-color var(--duration-theme) var(--timing-theme),
    color var(--duration-theme) var(--timing-theme),
    border-color var(--duration-medium) var(--timing-function),
    box-shadow var(--duration-medium) var(--timing-function);
}

#search-input:hover,
.note-item:hover,
textarea:hover {
  box-shadow: 0 0.125rem 0.375rem var(--box-shadow-medium);
}

#search-input {
  padding: 1.125rem;
  /* margin-bottom: 0.1875rem; */
  border-radius: 0.625rem;
}

#search-input::placeholder,
textarea#note-text::placeholder {
  color: var(--text-secondary);
}

textarea#note-text:focus::placeholder {
  color: var(--text-primary);
}

#search-input:focus,
.edit-textarea:focus,
textarea#note-text:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0.125rem 0.375rem var(--box-shadow-medium);
}

textarea#note-text {
  min-height: 40svh;
  max-height: 66svh;
  padding: 1.125rem;
  border-radius: 0.625rem;
  overflow-y: auto;
}

.edit-textarea {
  padding: 1.125rem 1.125rem 0;
  overflow-y: auto;
  color: var(--textarea-text);
  border: 1px solid var(--input-focus-border);
}

/* Edit ở trang chủ (container) */
.container .edit-textarea {
  min-height: 58svh;
  max-height: 58svh;
}

/* Edit trong các modal */
.modal-content .edit-textarea {
  min-height: 58svh;
  max-height: 58svh;
}

.edit-textarea:hover {
  box-shadow: none !important;
}

/* ============================================
   6. NOTE ITEMS
   ============================================ */
.note-item {
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  background-color: var(--container-bg);
  border: 1px solid var(--border-light);
  border-radius: 0.625rem;
  box-shadow: 0 0.0625rem 0.125rem var(--box-shadow-light);
  overflow: hidden;
  word-break: break-word;
  transition: border-color var(--duration-medium) var(--timing-function),
    box-shadow var(--duration-medium) var(--timing-function),
    opacity var(--duration-slow) var(--timing-function),
    transform var(--duration-slow) var(--timing-function),
    height var(--duration-slow) var(--timing-function),
    margin var(--duration-slow) var(--timing-function),
    background-color var(--duration-theme) var(--timing-theme);
}

.note-item.pinned {
  order: -1;
  border-color: var(--pinned-note-border);
  box-shadow: 0 0.0625rem 0.125rem var(--pinned-note-shadow);
}

.note-item.pinned:hover {
  box-shadow: 0 0.125rem 0.375rem var(--pinned-note-shadow);
}

.note-content {
  flex-grow: 1;
  width: 100%;
  font-size: 1rem;
  white-space: pre-wrap;
}

.note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  width: 100%;
  margin-top: 1.125rem;
}

/* Edit State within Note Item */
.note-item:has(.edit-controls-container) {
  padding: 0;
  background-color: var(--textarea-bg);
  border-color: var(--input-focus-border);
  box-shadow: 0 0.125rem 0.375rem var(--box-shadow-medium);
}

.note-item:has(.edit-controls-container) .edit-textarea {
  background-color: #fff0;
  border-color: #fff0;
}

.note-item:has(.edit-controls-container) .edit-textarea:focus {
  box-shadow: none;
}

.edit-controls-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  animation: fadeinup var(--duration-slow) var(--timing-function);
}

.edit-buttons-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.0625rem;
  margin-bottom: 1.125rem;
  padding: 0 1.125rem;
  box-sizing: border-box;
}

.edit-buttons-container .btn-primary {
  flex: 1 1 45%;
  min-width: unset;
  padding: 0.5625rem 1rem;
  text-align: center;
  margin-left: 0;
}

/* ============================================
   7. MODALS & OVERLAYS
   ============================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-default) ease;
  z-index: 1001;
  -webkit-tap-highlight-color: #fff0;
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  width: 90%;
  max-width: 39.5rem;
  padding: 1.125rem;
  background-color: var(--container-bg);
  border-radius: 1rem;
  box-shadow: 0 0.0625rem 0.1875rem var(--box-shadow-light),
    0 0.0625rem 0.125rem var(--box-shadow-medium);
  opacity: 0;
  transform: translateY(1.25rem);
  transition: background-color var(--duration-theme) var(--timing-theme),
    opacity var(--duration-default) var(--timing-function),
    transform var(--duration-default) var(--timing-function);
}

.modal-overlay.show .modal-content {
  opacity: 1;
  transform: translateY(0);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  padding-left: 0.875rem;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem;
  /* width: 100%; */
  padding: 0 0.875rem 0.875rem;
}

.modal-actions .btn-primary {
  flex: 1 1 45%;
  min-width: unset;
  padding: 0.5625rem 1rem;
  text-align: center;
}

#menu-modal-title {
  /* padding-left: 0.8125rem; */
}

/* Statistics Modal */
.stats-content {
  /* padding: 0.25rem 0 0; */
  /* margin: 0; */
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 0;
}

.stat-item {
  text-align: center;
  padding: 1.125rem;
  background-color: var(--textarea-bg);
  border: 1px solid var(--border-light);
  border-radius: 0.625rem;
  transition: background-color var(--duration-theme) var(--timing-theme),
    border-color var(--duration-theme) var(--timing-theme);
}

.stat-item-full {
  grid-column: 1 / -1;
}

.stat-label {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 400;
  transition: color var(--duration-theme) var(--timing-theme);
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  transition: color var(--duration-theme) var(--timing-theme);
}

.stat-value-small {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.5;
  transition: color var(--duration-theme) var(--timing-theme);
}

/* Creator, Forever Free, Install as App, Clean up on save & Keyboard Shortcuts Modal */
.creator-content,
.forever-free-content,
.shortcuts-content,
.safari-home-screen-content,
.install-app-content,
.download-all-no-notes-content,
.clear-all-no-notes-content,
.confirmation-message,
.clean-up-on-save-content,
.private-drafts-content {
  /* margin-top: -0.9375rem; */
  margin-bottom: -0.25rem;
  padding-top: 0.4375rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  border-top: 1px solid var(--divider-border);
}

.shortcuts-content {
  padding-top: 0.5625rem;
  padding-bottom: 0.3125rem;
}

.creator-content p {
  margin-top: 1.125rem;
}

.forever-free-content p {
  margin-top: 1.125rem;
}

.clean-up-on-save-content p {
  margin-top: 1.125rem;
}

.safari-home-screen-content p {
  margin-top: 1.125rem;
}

.install-app-content p {
  margin-top: 1.125rem;
}

.install-app-content ul,
.private-drafts-content ul {
  margin-top: 0.75rem;
  margin-bottom: 0;
  padding-left: 1.625rem;
  padding-right: 0.625rem;
}

.install-app-content li,
.private-drafts-content li {
  margin-top: 0.625rem;
  padding: 0;
}

.private-drafts-content {
  margin-bottom: 0.875rem;
}

.download-all-no-notes-content p,
.clear-all-no-notes-content p {
  margin-top: 1.125rem;
  margin-bottom: 0;
}

.shortcuts-content p {
  margin-top: 1.125rem;
}

.credit {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: -0.375rem;
}

.creator-content,
.forever-free-content,
.shortcuts-content,
.safari-home-screen-content,
.install-app-content,
.download-all-no-notes-content,
.clear-all-no-notes-content {
  overflow-y: auto;
  max-height: 74svh;
}

.private-drafts-content {
  overflow-y: auto;
  max-height: 74svh;
}

.private-drafts-content p {
  margin-top: 1.125rem;
}

.shortcuts-content::-webkit-scrollbar-track {
  background-color: var(--scrollbar-bg);
  margin-top: 1rem;
  margin-bottom: 0.0625rem;
}

/* Search & Trash & Lists */
.search-results-list,
.trash-notes-list,
.recent-edits-list,
.pinned-notes-list {
  margin: 0;
  max-height: 59svh;
  overflow-y: auto;
}

.search-results-list {
  max-height: 63svh;
} /* Tỉnh chỉnh riêng */

.recent-edits-list,
.pinned-notes-list {
  max-height: 75.5svh;
}

.trash-notes-list {
  max-height: 67svh;
}

.search-results-list .note-item,
.trash-notes-list .note-item,
.recent-edits-list .note-item,
.pinned-notes-list .note-item {
  margin: 0;
}

.browse-list {
  max-height: 75.5svh;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding-bottom: 0.0625rem;
}

#hashtags-modal .note-item,
#dates-modal .note-item,
#notes-by-date-modal .note-item,
#months-modal .note-item,
#notes-by-month-modal .note-item,
#years-modal .note-item,
#months-in-year-modal .note-item {
  padding: 1.125rem 1.125rem 1.1875rem;
}

#hashtags-modal .note-item:has(.edit-controls-container),
#dates-modal .note-item:has(.edit-controls-container),
#notes-by-date-modal .note-item:has(.edit-controls-container),
#months-modal .note-item:has(.edit-controls-container),
#notes-by-month-modal .note-item:has(.edit-controls-container),
#years-modal .note-item:has(.edit-controls-container),
#months-in-year-modal .note-item:has(.edit-controls-container) {
  padding: 0;
}

#notes-by-date-list,
#notes-by-month-list {
  max-height: 75.5svh;
}

#months-in-year-list {
  max-height: 75.5svh;
}

.browse-list .note-content,
#months-in-year-list .note-content {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.note-count-label {
  color: var(--text-secondary);
  white-space: nowrap;
  padding-left: 1rem;
  flex-shrink: 0;
}

/* ============================================
   8. NOTIFICATIONS & FEEDBACK
   ============================================ */
.copy-notification {
  position: fixed;
  left: 50%;
  bottom: 1.125rem;
  padding: 0.625rem 1.125rem;
  border-radius: 0.75rem;
  box-shadow: 0 0.125rem 0.625rem rgb(0 0 0 / 0.2);
  font-size: 1rem;
  white-space: pre-line;
  min-width: max-content;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(1.25rem);
  transition: opacity var(--duration-medium) ease-out,
    transform var(--duration-medium) ease-out,
    visibility var(--duration-medium) ease-out;
  z-index: 1100;
}

.copy-notification.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

body.light-mode .copy-notification.status {
  color: var(--notification-status-text-light);
  background-color: var(--notification-status-bg-light);
}

body.dark-mode .copy-notification.status {
  color: var(--notification-status-text-dark);
  background-color: var(--notification-status-bg-dark);
}

body.dark-mode .container {
  box-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.2),
    0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.2);
}

.highlight {
  padding: 0.125rem 0;
  color: var(--note-highlight-text);
  background-color: var(--note-highlight-bg);
  /* border-radius: 0.125rem; */
}

/* Empty States */
.empty-state-message {
  margin-top: -1.625rem;
  text-align: center;
}

.empty-search-message,
.no-search-results-message,
.no-trash-notes-message,
.no-pinned-notes-message,
.no-recent-edits-message {
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  transition: color var(--duration-theme) var(--timing-theme);
}

.no-trash-notes-message {
  margin-top: 0;
}

.modal-header-subtitle {
  /* font-size: 0.9375rem; */
  color: var(--text-secondary);
  white-space: nowrap;
  flex: 1;
  padding-left: 1rem;
}

.trash-actions {
  display: flex;
  gap: 0.5rem;
  /* padding: 0 0.75rem 0.75rem; */
}

.trash-action-btn {
  flex: 1;
  padding: 0.5625rem 1rem;
  font-size: 0.9375rem;
  border-radius: 0.5rem;
  text-align: center;
}

.trash-action-btn-destructive:hover {
  opacity: 1;
}

.no-pinned-notes-message {
  margin-top: 0;
}

.no-recent-edits-message {
  margin-top: 0;
}

.no-search-results-message {
  margin-top: 0.3125rem;
  margin-bottom: 0.625rem;
}

.empty-search-message,
.no-trash-notes-message,
.no-pinned-notes-message,
.no-recent-edits-message {
  margin-bottom: 0.6875rem;
  padding-top: 1.5625rem;
  border-top: 1px solid var(--divider-border);
}

.usage-guideline {
  margin: 1.25rem 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  transition: color var(--duration-theme) var(--timing-theme);
}

.usage-guideline p {
  padding: 0.1875rem 0.875rem;
}

#empty-trash-btn {
  display: none;
  padding: 0.5625rem 1rem;
}

/* Căn giữa công tắc và nút tắt X */
.modal-header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Reset lại style của nút bấm, chỉ để lộ mỗi công tắc */
.modal-header-actions .header-toggle-btn {
  padding: 0;
  background-color: transparent;
  border: none;
  height: 1.25rem;
  box-shadow: none; /* Đề phòng app của bạn có shadow mặc định cho button */
}

/* Ẩn hiệu ứng hover/active mặc định của button để không bị lẹm viền */
.modal-header-actions .header-toggle-btn:hover,
.modal-header-actions .header-toggle-btn:active {
  background-color: transparent;
  transform: none;
}

/* Confirmation Box */
#confirmation-title {
  /* padding-bottom: 0; */
  /* margin-bottom: -0.3125rem; */
}

.modal-message {
  margin-top: -0.125rem;
  margin-bottom: 0.5625rem;
  color: var(--text-primary);
  text-align: left;
  transition: color var(--duration-theme) var(--timing-theme);
  border-top: 1px solid var(--divider-border);
  padding-top: 1.5rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.confirmation-checkbox-container {
  margin-top: -0.5625rem;
  margin-bottom: 0.5625rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.confirmation-checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 1rem;
}

.confirmation-checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.confirmation-checkbox-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 0.125rem solid var(--border-medium);
  border-radius: 0.25rem;
  background-color: var(--textarea-bg);
  cursor: pointer;
  color: transparent;
  transition: background-color var(--duration-fast) var(--timing-function),
    border-color var(--duration-fast) var(--timing-function),
    color var(--duration-fast) var(--timing-function);
}

.confirmation-checkbox-label:hover .confirmation-checkbox-box {
  border-color: var(--pinned-note-border);
}

.confirmation-checkbox:checked + .confirmation-checkbox-box {
  background-color: var(--pinned-note-border);
  border-color: var(--pinned-note-border);
  color: var(--container-bg);
}

#confirm-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   9. SCROLLBARS
   ============================================ */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  background-color: var(--scrollbar-bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-track {
  background-color: var(--scrollbar-bg);
  margin-top: 1px;
  margin-bottom: 1px;
}

.edit-textarea::-webkit-scrollbar,
.browse-list::-webkit-scrollbar,
.search-results-list::-webkit-scrollbar,
.trash-notes-list::-webkit-scrollbar,
.recent-edits-list::-webkit-scrollbar,
.pinned-notes-list::-webkit-scrollbar,
.shortcuts-content::-webkit-scrollbar,
.creator-content::-webkit-scrollbar,
.forever-free-content::-webkit-scrollbar,
.install-app-content::-webkit-scrollbar,
.private-drafts-content::-webkit-scrollbar,
.menu-nav::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  background-color: var(--box-scrollbar-bg);
  width: var(--scrollbar-width);
}

.edit-textarea::-webkit-scrollbar-track,
.browse-list::-webkit-scrollbar-track,
.search-results-list::-webkit-scrollbar-track,
.trash-notes-list::-webkit-scrollbar-track,
.recent-edits-list::-webkit-scrollbar-track,
.pinned-notes-list::-webkit-scrollbar-track,
.shortcuts-content::-webkit-scrollbar-track,
.creator-content::-webkit-scrollbar-track,
.forever-free-content::-webkit-scrollbar-track,
.install-app-content::-webkit-scrollbar-track,
.private-drafts-content::-webkit-scrollbar-track,
.menu-nav::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
  background: #fff0;
  border-radius: 10px;
}

.edit-textarea::-webkit-scrollbar-thumb,
.browse-list::-webkit-scrollbar-thumb,
.search-results-list::-webkit-scrollbar-thumb,
.trash-notes-list::-webkit-scrollbar-thumb,
.recent-edits-list::-webkit-scrollbar-thumb,
.pinned-notes-list::-webkit-scrollbar-thumb,
.shortcuts-content::-webkit-scrollbar-thumb,
.creator-content::-webkit-scrollbar-thumb,
.forever-free-content::-webkit-scrollbar-thumb,
.install-app-content::-webkit-scrollbar-thumb,
.private-drafts-content::-webkit-scrollbar-thumb,
.menu-nav::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
  border: var(--scrollbar-thumb-border);
  border-radius: 10px;
  background-color: var(--box-scrollbar-thumb);
  background-clip: var(--scrollbar-thumb-clip);
}

.edit-textarea::-webkit-scrollbar-thumb:hover,
.browse-list::-webkit-scrollbar-thumb:hover,
.search-results-list::-webkit-scrollbar-thumb:hover,
.trash-notes-list::-webkit-scrollbar-thumb:hover,
.recent-edits-list::-webkit-scrollbar-thumb:hover,
.pinned-notes-list::-webkit-scrollbar-thumb:hover,
.shortcuts-content::-webkit-scrollbar-thumb:hover,
.creator-content::-webkit-scrollbar-thumb:hover,
.forever-free-content::-webkit-scrollbar-thumb:hover,
.install-app-content::-webkit-scrollbar-thumb:hover,
.private-drafts-content::-webkit-scrollbar-thumb:hover,
.menu-nav::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
  background-color: var(--box-scrollbar-thumb-hover);
}

body::-webkit-scrollbar-track {
  margin-top: 3px;
  margin-bottom: 3px;
}

/* ============================================
   10. ANIMATIONS
   ============================================ */
@keyframes fadeinup {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.note-item.fade-in {
  animation: fadeinup var(--duration-slow) var(--timing-function);
}

/* ============================================
   11. ACCESSIBILITY & CLEANUP
   ============================================ */
.hidden {
  display: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 0.125rem solid var(--input-focus-border);
  outline-offset: 0.125rem;
  border-radius: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  a:focus-visible,
  button:focus-visible,
  input:focus-visible {
    outline: 0.125rem solid var(--input-focus-border);
    outline-offset: 0.125rem;
    transition: none;
    border-radius: 0.25rem;
  }
}

/* Chặn tất cả các thành phần giao diện gây phiền phức của Google Translate */
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-banner-frame {
  display: none !important;
}

/* ============================================
   KEYBOARD SHORTCUTS
   ============================================ */
kbd {
  position: relative;
  top: -1px;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin: 0 0.125rem;
  /* font-family: "SF Mono", "Monaco", "Consolas", monospace; */
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: 0.5rem;
}

body.light-mode kbd {
  color: #615d57;
  background-color: #ede9dd;
  border: 1px solid #cdc8a8;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgb(255 255 255 / 0.5);
}

body.light-mode kbd:hover {
  border-color: #bdb89a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgb(255 255 255 / 0.6);
}

body.dark-mode kbd {
  color: #b0b0b9;
  background-color: #35373c;
  border: 1px solid #52545e;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.05);
}

body.dark-mode kbd:hover {
  border-color: #5a5d66;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.1);
}

#search-modal .edit-textarea {
  min-height: 50svh;
  max-height: 50svh;
}

/*
 * Browse-list 1 dòng dùng fadein thay fadeinup để tránh scrollbar flash:
 * translateY(0.625rem) trong fadeinup tạm thời đẩy scrollHeight > clientHeight.
 */
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#dates-modal .note-item.fade-in,
#months-modal .note-item.fade-in,
#years-modal .note-item.fade-in,
#months-in-year-list .note-item.fade-in,
#hashtags-modal .note-item.fade-in {
  animation-name: fadein;
}
/* end: browse-list 1 dòng fadein fix */

/* ============================================
   MENU MODAL
   ============================================ */

/* Desktop: dropdown anchored near button */
.menu-modal-overlay {
  position: fixed;
  inset: 0;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
  background-color: rgb(0 0 0 / 0.6); /* nhất quán với .modal-overlay */
  pointer-events: none;
}

.menu-modal-overlay.show {
  pointer-events: all;
}

.menu-modal-content {
  /* Reset hoàn toàn các properties kế thừa từ .modal-content */
  position: fixed;
  width: min(16rem, 78vw);
  max-width: unset;
  min-width: unset;
  top: auto;
  bottom: auto;
  right: 0;
  left: auto;
  margin: 0;
  padding: 1.125rem;
  gap: 1.125rem;
  max-height: 79svh;
  overflow: hidden;
  /* Animation mở lên từ góc dưới */
  transform: translateY(0.5rem) scale(0.97);
  transform-origin: bottom right;
  opacity: 0;
  transition: opacity var(--duration-default) var(--timing-function),
    transform var(--duration-default) var(--timing-function),
    background-color var(--duration-theme) var(--timing-theme);
}

.menu-modal-overlay.show .menu-modal-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Nav container */
.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-top: 1px solid var(--divider-border);
  padding-top: 1rem;
  padding-right: 0.125rem;
  padding-bottom: 0.25rem;
  overflow-x: hidden;
  overflow-y: auto;
  /* max-height an toàn: JS set top động, dùng 70svh để tránh tràn trên màn hình thấp */
  /* max-height: 70svh; */
  scrollbar-gutter: stable;
  transition: border-color var(--duration-theme) var(--timing-theme);
}

.menu-nav::-webkit-scrollbar-track {
  margin-top: 1.7rem;
  margin-bottom: 0.5rem;
}

/* Each menu item */
.menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 1rem;
  line-height: 1.26;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  color: var(--text-primary);
  background-color: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: #fff0;
  transition: background-color var(--duration-fast) var(--timing-function),
    color var(--duration-fast) var(--timing-function);
}

.menu-item:hover {
  background-color: var(--button-primary-bg);
}

.menu-item:active {
  background-color: var(--button-primary-bg-hover);
  transform: translateY(1px);
}

.menu-item-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-item-shortcut {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.75rem;
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  transition: background-color var(--duration-theme) var(--timing-theme),
    border-color var(--duration-theme) var(--timing-theme),
    color var(--duration-theme) var(--timing-theme);
}

body.light-mode .menu-item-shortcut {
  color: #615d57;
  background-color: #ede9dd;
  border: 1px solid #cdc8a8;
}

body.dark-mode .menu-item-shortcut {
  color: #b0b0b9;
  background-color: #35373c;
  border: 1px solid #52545e;
}

.menu-item-shortcut-mobile {
  display: none;
  flex-shrink: 0;
  color: var(--text-secondary);
}

/* Link-style menu items (<a> tags) */
a.menu-item {
  text-decoration: none;
  display: flex;
}

/* ============================================
   RADIO-STYLE MENU ITEMS (Sort + Theme)
   Checkmark hidden by default, visible when .active
   ============================================ */
.menu-item-theme-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: transparent;
  transition: color var(--duration-fast) var(--timing-function);
}

.menu-item-sort.active .menu-item-theme-check,
.menu-item-theme.active .menu-item-theme-check {
  color: var(--menu-item-check-color);
}
/* note-input-container ẩn trên trang chủ khi người dùng tắt */
/* Chỉ ảnh hưởng .note-input-container trực tiếp trong .container (trang chủ),
   KHÔNG ảnh hưởng #new-note-modal .note-input-container */
body.hide-note-input .container > .note-input-container {
  display: none;
}

/* app name (h1) ẩn trên trang chủ khi người dùng tắt */
/* Chỉ ảnh hưởng h1 trực tiếp trong .container (trang chủ),
   KHÔNG ảnh hưởng h1 trên các trang khác */
body.hide-app-name .container > h1 {
  display: none;
}

/* Khi cả app name lẫn note input đều bị ẩn, bù lại khoảng trống trên .empty-state-message */
body.hide-app-name.hide-note-input .empty-state-message {
  margin-top: -0.75rem;
}

/* Khi app name hiện nhưng note input bị ẩn */
body:not(.hide-app-name).hide-note-input .empty-state-message {
  margin-top: -2rem;
}

/* Toggle switch — dùng trong Quick Access cho các tuỳ chọn bật/tắt */
.menu-item-toggle {
  cursor: pointer;
}

.menu-item-toggle-switch {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 0.625rem;
  background-color: var(--toggle-track-off);
  transition: background-color var(--duration-fast) var(--timing-function);
}

.menu-item-toggle-thumb {
  position: absolute;
  left: 0.1875rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  /* Màu trắng cố định — luôn nổi bật trên mọi màu nền track (tối hay sáng) */
  background-color: #ffffff;
  transition: transform var(--duration-fast) var(--timing-function);
}

.menu-item-toggle.active .menu-item-toggle-switch {
  background-color: var(--toggle-track-on);
}

.menu-item-toggle.active .menu-item-toggle-thumb {
  transform: translateX(1rem);
}

/* ============================================
   FAB POSITION — Button Side status badge
   ============================================ */
.menu-item-fab-position {
  cursor: pointer;
}

.menu-item-fab-status {
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: color var(--duration-theme) var(--timing-theme);
}

/* Desktop: menu neo góc dưới phải, khớp với FAB */
@media (min-width: 541px) {
  .menu-modal-content {
    bottom: calc(1.125rem + 2.5rem + 0.5rem);
    right: 1.125rem;
    top: auto;
    left: auto;
  }

  body.fab-left .menu-modal-content {
    right: auto;
    left: 1.125rem;
  }
}

/* FAB left position — mirror of default right */
body.fab-left .floating-menu-btn {
  right: auto !important;
  left: 1.125rem;
}

.menu-modal-content.is-sliding {
  transition: opacity var(--duration-default) var(--timing-function),
    transform var(--duration-default) var(--timing-function),
    background-color var(--duration-theme) var(--timing-theme),
    left var(--duration-default) var(--timing-function),
    right var(--duration-default) var(--timing-function);
}

body.fab-left .menu-modal-content {
  transform-origin: bottom left !important;
}

/* Keyboard Shortcuts Modal — 2-column grid on desktop, single column on mobile */
/* display: contents collapses the grid on mobile, preserving normal paragraph spacing */
.shortcuts-grid {
  display: contents;
}

@media (min-width: 541px) {
  .shortcuts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: -0.5rem; /* Compensates for padding-top of first grid item */
  }

  .shortcuts-grid p {
    margin: 0;
    padding: 0.5rem 0; /* Matches default <p> spacing of surrounding content */
  }
}

/* ============================================
   New Note Modal
   ============================================ */
.new-note-modal-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#new-note-modal .note-input-container {
  gap: 1.125rem;
  margin-bottom: 0;
}

#new-note-modal textarea {
  min-height: 66svh;
  max-height: 66svh;
  padding: 1.125rem 0.625rem 1.125rem 1.125rem;
  border-radius: 0.625rem;
  overflow-y: auto;
}

#new-note-modal textarea::placeholder {
  color: var(--text-secondary);
}

#new-note-modal textarea:focus::placeholder {
  color: var(--text-primary);
}

#new-note-modal textarea:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0.125rem 0.375rem var(--box-shadow-medium);
}

#modal-add-note-btn {
  width: 100%;
}

/* Edit Recovery Modal */
.edit-recovery-modal-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#edit-recovery-modal .note-input-container {
  gap: 1.125rem;
  margin-bottom: 0;
}

#edit-recovery-modal textarea {
  min-height: 66svh;
  max-height: 66svh;
  padding: 1.125rem 0.625rem 1.125rem 1.125rem;
  border-radius: 0.625rem;
  overflow-y: auto;
}

#edit-recovery-modal textarea:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0.125rem 0.375rem var(--box-shadow-medium);
}

.edit-recovery-actions {
  display: flex;
  gap: 0.625rem;
  width: 100%;
}

.edit-recovery-actions button {
  flex: 1;
}

/* ============================================
   FLOATING BUTTONS (FAB)
   ============================================ */

/*
 * Shared FAB color variables — định nghĩa một lần, dùng cho cả
 * floating-menu-btn (⋮) lẫn floating-new-note-btn (+).
 *
 * Desktop (≥541px): màu cố định vì body-bg luôn tối (#1f2023).
 * Mobile (≤540px): màu theo theme hiện tại qua global variables.
 */
.floating-menu-btn,
.floating-new-note-btn {
  /* Desktop FAB colors — cố định vì body-bg desktop luôn tối (#1f2023) */
  --fab-desktop-color: #e4e4e7; /* = --text-primary dark-mode */
  --fab-desktop-color-hover: #e4e4e7; /* sáng rõ hơn khi hover */
  --fab-desktop-bg: #3d3f44; /* nhỉnh hơn #3d3f44 — nổi hơn trên #1f2023 */
  --fab-desktop-bg-hover: #46484f; /* hover rõ ràng hơn */

  /* Mobile FAB colors — theo theme hiện tại qua global variables */
  --fab-mobile-color: var(--text-primary);
  --fab-mobile-color-hover: var(--text-primary);
  --fab-mobile-bg: var(--button-primary-bg);
  --fab-mobile-bg-hover: var(--button-primary-bg-hover);
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  z-index: var(--z-fab);
  opacity: 0;
  pointer-events: none;
  -webkit-tap-highlight-color: #fff0;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 100ms cubic-bezier(0.4, 0, 0.2, 1),
    color 100ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * floating-menu-btn — nút duy nhất mở Quick Access trên cả desktop lẫn mobile.
 *
 * Desktop (≥541px): góc dưới phải.
 *   Animation: trượt lên từ góc dưới khi hiện.
 *
 * Mobile (≤540px): FAB góc dưới phải.
 *   h1 centered hoàn toàn vì không còn gì cạnh tranh trong header.
 *   Animation: trượt lên từ góc dưới khi hiện.
 *   menu-modal-content căn giữa màn hình, mở từ bottom-center.
 */
.floating-menu-btn {
  width: 2.5rem;
  height: 2.5rem;
}

.floating-menu-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) !important;
}

/* Desktop */
@media (min-width: 541px) {
  .floating-menu-btn {
    bottom: 1.125rem;
    right: 1.125rem;
    color: var(--fab-desktop-color);
    background-color: var(--fab-desktop-bg);
    transform: translateY(6px);
  }

  .floating-menu-btn:hover {
    background-color: var(--fab-desktop-bg-hover);
    color: var(--fab-desktop-color-hover);
  }

  .floating-menu-btn:active {
    background-color: var(--fab-desktop-bg-hover);
    transform: scale(0.93) !important;
  }

  .floating-menu-btn[aria-expanded="true"] {
    background-color: var(--fab-desktop-bg-hover);
    color: var(--fab-desktop-color-hover);
  }
}

/* Mobile: FAB góc dưới phải */
@media (max-width: 540px) {
  .floating-menu-btn {
    bottom: 1.75rem;
    right: 1.75rem;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--fab-mobile-color);
    background-color: var(--fab-mobile-bg);
    transform: translateY(10px);
  }

  .floating-menu-btn:hover {
    background-color: var(--fab-mobile-bg-hover);
    color: var(--fab-mobile-color-hover);
  }

  .floating-menu-btn:active {
    background-color: var(--fab-mobile-bg-hover);
    transform: scale(0.93) !important;
  }

  .floating-menu-btn[aria-expanded="true"] {
    background-color: var(--fab-mobile-bg);
    color: var(--fab-mobile-color);
  }

  /* Modal căn giữa màn hình — mobile */
  .menu-modal-content {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(0.5rem) scale(0.97);
    transform-origin: bottom center;
  }

  .menu-modal-overlay.show .menu-modal-content {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* ============================================================
   ███╗   ███╗ ██████╗ ██████╗ ██╗██╗     ███████╗
   ████╗ ████║██╔═══██╗██╔══██╗██║██║     ██╔════╝
   ██╔████╔██║██║   ██║██████╔╝██║██║     █████╗
   ██║╚██╔╝██║██║   ██║██╔══██╗██║██║     ██╔══╝
   ██║ ╚═╝ ██║╚██████╔╝██████╔╝██║███████╗███████╗
   ╚═╝     ╚═╝ ╚═════╝ ╚═════╝ ╚═╝╚══════╝╚══════╝
   RESPONSIVE STYLES — DI ĐỘNG (MOBILE)
   ============================================================ */

/* ============================================
   12. MEDIA QUERIES (RESPONSIVE)
   ============================================ */

/* ---- Màn hình laptop nhỏ / cửa sổ thu nhỏ (≤ 960px) ---- */
@media (max-width: 960px) {
  body {
    padding: 1.125rem;
  }
}

/* ---- Cửa sổ thu nhỏ / tablet dọc (541–768px): full width, không bo góc ---- */
@media (min-width: 541px) and (max-width: 768px) {
  body {
    padding: 0;
  }
  .container {
    max-width: 100%;
    border-radius: 0;
  }

  /* Khi container full-width (padding body = 0), FAB cách mép 2.25rem để
     thẳng hàng với nút bấm bên trong ghi chú (padding note-item = 1.125rem
     + padding container = 1.125rem → tổng 2.25rem từ mép màn hình).
     Áp dụng cho cả fab-right (mặc định) lẫn fab-left, và menu-modal-content
     cũng dịch theo để luôn neo sát phía trên FAB. */

  /* FAB phải — mặc định */
  .floating-menu-btn {
    right: 2.25rem;
  }
  .floating-new-note-btn {
    right: calc(2.25rem + 2.5rem + 0.5rem) !important;
  }
  .menu-modal-content {
    right: 2.25rem;
  }

  /* FAB trái */
  body.fab-left .floating-menu-btn {
    right: auto !important;
    left: 2.25rem;
  }
  body.fab-left .floating-new-note-btn {
    right: auto !important;
    left: calc(2.25rem + 2.5rem + 0.5rem) !important;
  }
  body.fab-left .menu-modal-content {
    right: auto;
    left: 2.25rem;
  }

  /* Container full-width, FAB đè lên nền sáng — override màu FAB theo theme
     thay vì màu tối cố định của desktop */
  .floating-menu-btn,
  .floating-new-note-btn {
    --fab-desktop-color: var(--text-primary);
    --fab-desktop-color-hover: var(--text-primary);
    --fab-desktop-bg: var(--button-primary-bg);
    --fab-desktop-bg-hover: var(--button-primary-bg-hover);
  }
}

/* ---- Màn hình ≤ 540px ---- */
@media (max-width: 540px) {
  :root {
    --scrollbar-width: 10px;
    --scrollbar-thumb-border: 3px solid #fff0;
    --scrollbar-thumb-clip: content-box;
  }

  a,
  a:active {
    -webkit-tap-highlight-color: #fff0;
  }

  body {
    padding: 0;
    margin: 0;
    background-color: var(--container-bg);
    background-image: none;
  }

  a:active {
    color: inherit;
    background-color: var(--link-bg);
    border-radius: 0.125rem;
  }

  .container {
    min-height: 100vh;
    padding: 0.875rem;
    border-radius: 0;
    box-shadow: none;
  }

  h1 {
    font-size: 2rem;
    line-height: 1.4;
    margin-top: 0.375rem;
  }

  .note-input-container {
    gap: 0.875rem;
    margin-bottom: 1.375rem;
  }

  .notes-list {
    gap: 0.875rem;
    /* margin-bottom: 1.5rem; */
  }

  .note-item {
    padding: 1.0625rem 0.875rem 0.875rem;
  }

  .note-item.pinned:hover,
  .note-item:hover {
    box-shadow: 0 0.0625rem 0.125rem var(--box-shadow-light);
  }

  .note-content {
    padding-bottom: 0.0625rem;
  }

  .note-actions {
    gap: 0.5rem;
    margin-top: 0.875rem;
  }

  .note-actions button {
    flex-grow: 1;
    padding: 0.5625rem;
    font-size: 0.9375rem;
  }

  .note-item.pinned .note-actions {
    gap: 0.375rem;
  }

  textarea#note-text {
    min-height: 10rem;
    min-height: calc((100vw - 1.75rem) * 1 / 1);
    max-height: 60svh;
    padding: 0.875rem;
    font-size: 1rem;
    resize: none;
  }

  .edit-textarea {
    min-height: 60svh;
    max-height: 60svh;
    padding: 0.875rem 0.875rem 0;
    resize: none;
  }

  .edit-buttons-container,
  .modal-actions {
    gap: 0.5rem;
    justify-content: center;
  }

  .edit-buttons-container {
    width: auto;
    margin: 0.8125rem 0.875rem 0.875rem;
    padding: 0;
  }

  .edit-buttons-container .btn-primary {
    margin-right: 0;
  }

  .edit-buttons-container .btn-primary,
  .modal-actions .btn-primary {
    flex: 1 1 45% !important;
    max-width: 15rem;
    min-width: unset;
    padding: 0.5625rem 0.875rem;
    font-size: 0.9375rem;
    margin: 0;
  }

  #load-more-btn {
    margin-top: -0.625rem;
    padding: 0.625rem 0.9375rem;
  }

  .modal-content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    margin: auto;
    padding: 0.875rem;
    gap: 0.875rem;
    border-radius: 0;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
  }

  .modal-header h2 {
    /* padding: 0.3125rem 0 0.3125rem; */
    font-size: 1.375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 0.3125rem;
  }

  .modal-actions {
    margin: 0;
  }

  #menu-modal-title {
    padding-left: 0.8125rem;
  }

  #search-input {
    padding: 0.875rem;
    margin-bottom: 0;
    font-size: 1rem;
  }

  #search-modal .modal-content,
  #notes-by-date-modal .modal-content,
  #notes-by-month-modal .modal-content,
  #months-in-year-modal .modal-content,
  #trash-modal .modal-content {
    padding-bottom: 1.25rem;
  }

  #hashtags-modal .note-item,
  #dates-modal .note-item,
  #notes-by-date-modal .note-item,
  #months-modal .note-item,
  #notes-by-month-modal .note-item,
  #years-modal .note-item,
  #months-in-year-modal .note-item {
    padding: 0.875rem 0.875rem 0.9375rem;
  }

  #hashtags-modal .modal-content,
  #dates-modal .modal-content,
  #months-modal .modal-content,
  #years-modal .modal-content {
    padding-bottom: 0.875rem;
  }

  .modal-message {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0.625rem;
    padding-top: 1.375rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .confirmation-checkbox-container {
    margin-top: -0.625rem;
    margin-bottom: 0.625rem;
  }

  /* padding: 0; đã được ghi đè bởi block bên dưới, không cần thiết */
  /* .creator-content {
    padding: 0;
  } */

  /* .forever-free-content {
    padding: 0;
  } */

  .creator-content,
  .forever-free-content,
  .shortcuts-content,
  .safari-home-screen-content,
  .install-app-content,
  .download-all-no-notes-content,
  .clear-all-no-notes-content,
  .confirmation-message,
  .private-drafts-content {
    /* margin-top: -0.9375rem; */
    margin-bottom: 0;
    padding-top: 0.4375rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .private-drafts-content {
    margin-bottom: 0.875rem;
  }

  .creator-content p {
    /* margin-top: 1rem; */
  }

  .forever-free-content p {
    /* margin-top: 1rem; */
  }

  .safari-home-screen-content p {
    /* margin-top: 1rem; */
  }

  .install-app-content p {
    /* margin-top: 1rem; */
  }

  .install-app-content ul,
  .private-drafts-content ul {
    margin-top: 0.625rem;
    padding-left: 1.625rem;
    padding-right: 0.625rem;
  }

  .install-app-content li,
  .private-drafts-content li {
    margin: 1rem 0 0;
  }

  .download-all-no-notes-content p,
  .clear-all-no-notes-content p {
    /* margin-top: 1rem; */
  }

  .shortcuts-content p {
    /* margin-top: 1rem; */
  }

  /* Gom những cái thực sự giống nhau */
  .search-results-list,
  .trash-notes-list {
    margin: 0 0 -0.375rem;
    padding: 0;
  }

  /* Tách riêng giá trị khác biệt */
  #notes-by-date-list,
  #notes-by-month-list,
  #months-in-year-list {
    max-height: 80svh;
  }

  .trash-notes-list {
    max-height: 73.6svh;
  }

  .browse-list,
  .recent-edits-list,
  .pinned-notes-list {
    max-height: 80svh;
  }

  .shortcuts-content {
    max-height: 79.2svh;
    padding-right: 0.625rem;
    padding-top: 0.5rem;
    padding-bottom: 0;
  }

  .search-results-list {
    max-height: 71.1svh;
  }

  .btn-close {
    width: 2.75rem;
    height: 2.75rem;
  }

  .btn-read-less,
  .btn-read-more,
  #empty-trash-btn {
    padding: 0.5625rem 0.875rem;
    font-size: 0.9375rem;
    margin-top: 0.875rem;
    margin-bottom: 0;
  }

  #empty-trash-btn {
    margin-top: auto;
    margin-bottom: auto;
  }

  .no-search-results-message {
    padding: 0;
    margin-top: 0.625rem;
    margin-bottom: 0.6875rem;
    font-size: 1rem;
  }

  .no-trash-notes-message {
    /* margin-top: -0.75rem; */
    /* margin-bottom: 0.75rem; */
  }

  .no-pinned-notes-message {
    /* margin-top: -0.75rem; */
    /* margin-bottom: 0.75rem; */
  }

  .no-recent-edits-message {
    /* margin-top: -0.75rem; */
    /* margin-bottom: 0.75rem; */
  }

  .usage-guideline {
    padding: 0;
  }

  .empty-state-message {
    margin-top: -1.125rem;
  }

  body.hide-app-name.hide-note-input .empty-state-message {
    margin-top: -0.625rem;
  }

  /* Khi app name hiện nhưng note input bị ẩn */
  body:not(.hide-app-name).hide-note-input .empty-state-message {
    margin-top: -2rem;
  }

  .empty-state-message span {
    display: block;
  }

  .credit {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    /* margin-bottom: -0.3125rem; */
    align-items: flex-start;
  }

  .search-results-list::-webkit-scrollbar,
  .trash-notes-list::-webkit-scrollbar,
  .browse-list::-webkit-scrollbar,
  .recent-edits-list::-webkit-scrollbar,
  .pinned-notes-list::-webkit-scrollbar,
  .clean-up-on-save-content::-webkit-scrollbar,
  .safari-home-screen-content::-webkit-scrollbar,
  .install-app-content::-webkit-scrollbar {
    width: 0;
  }

  .confirmation-checkbox-label {
    padding: 0;
    gap: 1rem;
  }

  .copy-notification a:active {
    background-color: var(--link-notification-bg);
  }

  /* Stats Responsive */
  .stats-grid {
    gap: 0.875rem;
  }

  .stat-item {
    padding: 0.875rem;
  }

  .stat-item-full {
    padding-bottom: 1rem;
  }

  .stat-label {
    margin-bottom: 0.4375rem;
  }

  .stat-value {
    font-size: 1.75rem;
  }

  .stat-value-small {
    font-size: 1rem;
  }

  kbd {
    padding: 0.1875rem 0.375rem;
    /* font-size: 0.75rem; */
  }

  #search-modal .edit-textarea {
    min-height: 56svh;
    max-height: 56svh;
  }

  /* Notification — Mobile */
  .copy-notification {
    /* Ngắn: co theo nội dung. Dài: full width như note-item (cách mép màn hình 0.875rem mỗi bên) */
    width: max-content;
    max-width: calc(100vw - 1.75rem);
    min-width: unset;
    white-space: pre-line;
    word-break: break-word;
    box-sizing: border-box;
    bottom: 1.75rem;
  }

  /* Menu Modal — Mobile */
  .menu-modal-content {
    /* width: min(16.5rem, 78vw); */
    width: 70vw;
    max-width: unset;
    border-radius: 0.75rem;
    padding: 0.875rem;
    gap: 0.875rem;
  }

  .menu-item-shortcut {
    display: none;
  }

  .menu-item-shortcut-mobile {
    display: flex;
    align-items: center;
  }

  .menu-item-desktop-only {
    display: none;
  }

  .menu-item {
    padding: 0.5625rem 0.875rem;
  }

  .menu-nav {
    max-height: 27.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    /* padding-right: 0.3125rem; */
    padding-bottom: 0.5rem;
  }

  .menu-nav::-webkit-scrollbar-track,
  .shortcuts-content::-webkit-scrollbar-track,
  .clean-up-on-save-content::-webkit-scrollbar-track,
  .safari-home-screen-content::-webkit-scrollbar-track,
  .install-app-content::-webkit-scrollbar-track,
  .private-drafts-content::-webkit-scrollbar-track,
  .creator-content::-webkit-scrollbar-track {
    margin-top: 1.4rem;
    margin-bottom: 0.6rem;
  }

  #shortcuts-modal {
    --scrollbar-width: 4px;
    --scrollbar-thumb-border: none;
  }

  /* New Note Modal — Mobile */
  #new-note-modal .note-input-container {
    gap: 0.875rem;
  }

  #new-note-modal textarea {
    min-height: 73svh;
    max-height: 73svh;
    padding: 0.875rem;
    font-size: 1rem;
    resize: none;
  }

  /* Edit Recovery Modal — Mobile */
  #edit-recovery-modal .note-input-container {
    gap: 0.875rem;
  }

  #edit-recovery-modal textarea {
    min-height: 73svh;
    max-height: 73svh;
    padding: 0.875rem;
    font-size: 1rem;
    resize: none;
  }

  /* FAB left — Mobile override */
  body.fab-left .floating-menu-btn {
    left: 1.75rem !important;
    right: auto !important;
  }
}

/* ---- Màn hình ≤ 375px ---- */
@media (max-width: 375px) {
  #search-input,
  .edit-buttons-container .btn-primary,
  .modal-actions .btn-primary,
  .note-actions button,
  .btn-read-less,
  .btn-read-more,
  button {
    font-size: 0.875rem;
  }

  .usage-guideline {
    padding: 0 0.0625rem;
  }
  h1 {
    font-size: 1.875rem;
  }
  .modal-header-subtitle {
    font-size: 0.9375rem;
    padding-left: 1rem;
  }
}

/* ---- Dành riêng cho đúng mức 375px ---- */
@media (width: 375px) {
  .shortcuts-content {
    overflow-y: auto;
    max-height: 77.7svh !important;
  }

  .menu-nav {
    /* max-height: 27.3rem; */
  }
}

/* ---- Màn hình ≤ 360px ---- */
@media (max-width: 360px) {
  .note-actions button {
    padding: 0.5rem 0.125rem;
  }
}

/* -------------------------
   Floating New Note Button (Quick New Note FAB)
   -------------------------
   Nút + hiện bên trái floatingMenuBtn (⋮), cùng hàng ngang.
   Khi fab-left: nút + ở bên phải floatingMenuBtn.
   Mặc định ẩn — chỉ visible khi user bật "Quick New Note" trong Quick Access.
   Animation: trượt vào từ phía floatingMenuBtn (scale + opacity).
*/
.floating-new-note-btn {
  /* Trạng thái ban đầu: thu nhỏ về phía floatingMenuBtn */
  transform: scale(0.6);
}

.floating-new-note-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* ---- Desktop (≥541px): nút + nằm bên TRÁI floatingMenuBtn ---- */
@media (min-width: 541px) {
  .floating-new-note-btn {
    width: 2.5rem;
    height: 2.5rem;
    /* Cùng bottom với floatingMenuBtn (bottom: 1.125rem) */
    bottom: 1.125rem;
    /* Cách floatingMenuBtn 8px về bên trái: right của ⋮ = 1.125rem, width ⋮ = 2.5rem */
    right: calc(1.125rem + 2.5rem + 0.5rem);
    color: var(--fab-desktop-color);
    background-color: var(--fab-desktop-bg);
  }

  .floating-new-note-btn:hover {
    background-color: var(--fab-desktop-bg-hover);
    color: var(--fab-desktop-color-hover);
  }

  .floating-new-note-btn:active {
    background-color: var(--fab-desktop-bg-hover);
    transform: scale(0.93) !important;
  }
}

/* ---- Desktop fab-left: nút + nằm bên PHẢI floatingMenuBtn ---- */
@media (min-width: 541px) {
  body.fab-left .floating-new-note-btn {
    right: auto !important;
    left: calc(1.125rem + 2.5rem + 0.5rem);
  }
}

/* ---- Mobile (≤540px): nút + nằm bên TRÁI floatingMenuBtn ---- */
@media (max-width: 540px) {
  .floating-new-note-btn {
    width: 2.75rem;
    height: 2.75rem;
    /* Cùng bottom với floatingMenuBtn (bottom: 1.75rem) */
    bottom: 1.75rem;
    /* Cách floatingMenuBtn 10px về bên trái: right của ⋮ = 1.75rem, width ⋮ = 2.75rem */
    right: calc(1.75rem + 2.75rem + 0.625rem);
    color: var(--fab-mobile-color);
    background-color: var(--fab-mobile-bg);
    /* Mobile: trượt từ phải sang */
    transform: translateX(1rem) scale(0.7);
  }

  .floating-new-note-btn.visible {
    transform: translateX(0) scale(1);
  }

  .floating-new-note-btn:hover {
    background-color: var(--fab-mobile-bg-hover);
    color: var(--fab-mobile-color-hover);
  }

  .floating-new-note-btn:active {
    background-color: var(--fab-mobile-bg-hover);
    transform: scale(0.93) !important;
  }
}

/* ---- Mobile fab-left: nút + nằm bên PHẢI floatingMenuBtn ---- */
@media (max-width: 540px) {
  body.fab-left .floating-new-note-btn {
    right: auto !important;
    left: calc(1.75rem + 2.75rem + 0.625rem);
    /* Trượt từ trái sang khi fab-left */
    transform: translateX(-1rem) scale(0.7);
  }

  body.fab-left .floating-new-note-btn.visible {
    transform: translateX(0) scale(1);
  }
}