@font-face {
  font-family: 'Vazirmatn';
  src: url('./font/Vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #f1f5f9;
  --card: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --muted-light: #94a3b8;
  --border: #cbd5e1;
  --filter-bg: #e2e8f0;
  --filter-hover: #cbd5e1;
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --danger: #ef4444;
  --success-bg: #dcfce7;
  --alarm-bg: rgba(239, 68, 68, 0.14);
  --alarm-border: rgba(239, 68, 68, 0.45);
  --shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --card: #1e293b;
    --text: #f1f5f9;
    --muted: #cbd5e1;
    --muted-light: #64748b;
    --border: #475569;
    --filter-bg: #334155;
    --filter-hover: #475569;
    --success-bg: rgba(20, 83, 45, 0.5);
    --alarm-bg: rgba(127, 29, 29, 0.35);
    --alarm-border: rgba(248, 113, 113, 0.45);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

.app-shell {
  width: min(100%, 34rem);
  height: 95vh;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.header {
  text-align: center;
  padding: 0.5rem 0;
}

.header h1 {
  margin: 0;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
}

.main {
  margin-top: 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.filters {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.25rem;
  background: var(--card);
  border-radius: 0.75rem;
  box-shadow: var(--shadow);
}

.filter-button {
  flex: 1;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.35rem 1rem;
  background: var(--filter-bg);
  color: var(--muted);
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.filter-button:hover {
  background: var(--filter-hover);
}

.filter-button.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 7px rgba(59, 130, 246, 0.35);
}

.filter-button:focus-visible,
#addButton:focus-visible,
.voice-button:focus-visible,
.delete-button:focus-visible,
.note-checkbox:focus-visible,
#noteInput:focus-visible,
#dueInput:focus-visible,
#alarmDismissButton:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

.notes-area {
  flex: 1;
  min-height: 0;
  margin-top: 1rem;
  overflow-y: auto;
  padding: 0 0.25rem 1rem 0;
}

.notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.note-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--card);
  transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.note-item.completed {
  background: var(--success-bg);
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
}

.note-item.due-overdue {
  border: 1px solid var(--alarm-border);
  background: var(--alarm-bg);
}

.note-item.alarming {
  animation: task-alarm-pulse 0.8s infinite ease-in-out;
}


.note-item.task-draggable {
  cursor: grab;
}

.note-item.task-draggable:active {
  cursor: grabbing;
}

.note-item.dragging {
  opacity: 0.55;
  transform: scale(0.99);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.sortable-notes-list {
  touch-action: pan-y;
}

.task-drag-handle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(148, 163, 184, 0.14);
  font-size: 1.05rem;
  line-height: 1;
  user-select: none;
  touch-action: none;
}


.task-drag-handle:hover {
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary);
}

.note-checkbox {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--primary);
}

.note-content {
  min-width: 0;
  flex: 1;
}

.note-text {
  margin: 0;
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.75rem;
  overflow-wrap: anywhere;
}

.note-item.completed .note-text {
  color: var(--muted);
  text-decoration: line-through;
}

.note-time,
.note-due {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted-light);
  font-size: 0.75rem;
  line-height: 1rem;
}

.note-due.overdue {
  color: var(--danger);
  font-weight: 700;
}

.delete-button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 0.5rem;
  background: transparent;
  color: var(--muted-light);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.delete-button svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.delete-button:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.08);
}

.empty-state {
  min-height: 200px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: var(--card);
  border-radius: 0.75rem;
  box-shadow: var(--shadow);
  color: var(--muted);
}

.input-section {
  margin-top: auto;
}

.voice-box {
  min-height: 120px;
  padding-top: 1rem;
  padding-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.voice-button {
  width: 5rem;
  height: 5rem;
  border: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow);
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.voice-button:hover {
  background: var(--primary-hover);
}

.voice-button svg {
  width: 2.5rem;
  height: 2.5rem;
}

.voice-button.denied {
  opacity: 0.5;
  background: #94a3b8;
}

.status-message {
  height: 1.25rem;
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: center;
}

.unsupported-message,
.permission-warning {
  margin: 0;
  padding: 0 1rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.25rem;
  text-align: center;
}

.permission-warning {
  margin-top: 0.5rem;
  color: var(--danger);
}

.text-input-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--card);
  border-radius: 0.75rem;
  box-shadow: var(--shadow);
}

#noteInput {
  flex: 1 1 11rem;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0.5rem;
}

.due-field {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  color: var(--muted);
  background: rgba(148, 163, 184, 0.08);
  font-size: 0.75rem;
  white-space: nowrap;
}

#dueInput {
  display: none;
}

.compact-due-field {
  padding: 0;
  border: 0;
  background: transparent;
  min-height: auto;
}

#noteInput::placeholder {
  color: var(--muted-light);
}

#addButton {
  border: 0;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

#addButton:hover {
  background: var(--primary-hover);
}

@keyframes neon-red-blink {
  0%, 100% {
    box-shadow: 0 0 4px #f87171, 0 0 8px #f87171, 0 0 15px #ef4444;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 2px #fca5a5, 0 0 4px #fca5a5, 0 0 6px #f87171;
    transform: scale(1.03);
  }
}

@keyframes neon-blue-pulse {
  0%, 100% {
    box-shadow: 0 0 3px #60a5fa, 0 0 6px #3b82f6;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 6px #93c5fd, 0 0 12px #60a5fa;
    transform: scale(1.03);
  }
}

@keyframes neon-blue-starting {
  0%, 100% {
    box-shadow: 0 0 2px #93c5fd, 0 0 4px #60a5fa;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 4px #93c5fd, 0 0 8px #60a5fa;
    transform: scale(1.02);
  }
}

@keyframes powder-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  20% {
    opacity: 0.8;
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0.3) rotate(10deg);
    filter: blur(5px);
  }
}

.voice-button.idle {
  animation: neon-blue-pulse 2s infinite ease-in-out;
}

.voice-button.starting {
  animation: neon-blue-starting 1s infinite ease-in-out;
}

.voice-button.listening {
  background: var(--danger);
  animation: neon-red-blink 1.5s infinite ease-in-out;
}

.note-item.powder-out {
  animation: powder-out 1.5s cubic-bezier(0.55, 0.09, 0.68, 0.53) forwards;
  transform-origin: center;
}


@keyframes task-alarm-pulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(239, 68, 68, 0.1);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.55);
    transform: scale(1.015);
  }
}

@keyframes page-alarm-flash {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 0.28; }
}

@keyframes page-alarm-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

body.alarm-active::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background: #ef4444;
  animation: page-alarm-flash 0.7s infinite ease-in-out;
}

body.alarm-active .app-shell {
  animation: page-alarm-shake 0.35s infinite ease-in-out;
}

.alarm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow: auto;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(5px);
}

.alarm-overlay[hidden] {
  display: none;
}

.alarm-card {
  width: min(100%, 32rem);
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--alarm-border);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
  text-align: center;
}

.alarm-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.alarm-card h2 {
  margin: 0;
  font-size: 1.35rem;
}

.alarm-card p {
  margin: 0.5rem 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.alarm-task-list {
  margin: 0.75rem 0 1rem;
  padding: 0 0 0 0.25rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: right;
  max-height: min(45vh, 22rem);
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.alarm-task-list li {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--alarm-border);
  border-radius: 0.75rem;
  background: var(--alarm-bg);
  overflow-wrap: anywhere;
}

.alarm-audio-status {
  color: var(--danger) !important;
  font-size: 0.8rem;
}

#alarmDismissButton {
  width: 100%;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--danger);
  color: #fff;
  font-weight: 700;
}

@media (max-height: 560px) {
  .alarm-overlay { align-items: flex-start; }
  .alarm-card { max-height: none; }
  .alarm-task-list { max-height: 12rem; }
}


.app-footer {
  width: 100%;
  padding: 0.35rem 0.75rem 0.65rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.8;
  opacity: 0.82;
  user-select: none;
}

.footer-heart {
  display: inline-block;
  margin: 0 0.12rem;
  font-size: 0.75rem;
  vertical-align: -0.05rem;
}

.footer-copyright {
  display: inline-block;
  margin-right: 0.25rem;
  font-size: 0.7rem;
}

@media (max-width: 520px) {
  .text-input-card {
    flex-wrap: wrap;
  }

  #noteInput {
    flex-basis: 100%;
  }

  .due-field {
    flex: 0 0 auto;
  }

  #dueInput {
    display: none;
  }
}

.note-due-editor {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.note-due-label {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1rem;
  white-space: nowrap;
}

.note-due-input {
  width: 10.75rem;
  min-height: 2rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.25rem 0.45rem;
  background: rgba(148, 163, 184, 0.08);
  color: var(--text);
  direction: ltr;
  text-align: center;
  font-size: 0.75rem;
}

.clear-due-button {
  border: 0;
  border-radius: 999px;
  padding: 0.32rem 0.65rem;
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  font-size: 0.72rem;
  font-weight: 600;
}

.clear-due-button:hover {
  background: rgba(239, 68, 68, 0.18);
}

.due-progress-wrap {
  position: relative;
  height: 0.28rem;
  margin-top: 0.55rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.24);
}

.due-progress-bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 0.45s linear;
}

.due-progress-wrap.overdue .due-progress-bar {
  background: var(--danger);
}

.due-progress-info {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.1rem;
}

.note-due-input:focus-visible,
.clear-due-button:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}


.app-footer {
  width: 100%;
  padding: 0.35rem 0.75rem 0.65rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.8;
  opacity: 0.82;
  user-select: none;
}

.footer-heart {
  display: inline-block;
  margin: 0 0.12rem;
  font-size: 0.75rem;
  vertical-align: -0.05rem;
}

.footer-copyright {
  display: inline-block;
  margin-right: 0.25rem;
  font-size: 0.7rem;
}

@media (max-width: 520px) {
  .note-due-input {
    flex: 1 1 10rem;
    width: 100%;
  }
}

.date-picker-button {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.1);
  color: var(--text);
  line-height: 1;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.date-picker-button:hover {
  background: rgba(59, 130, 246, 0.18);
  transform: translateY(-1px);
}

.add-due-picker-button {
  width: 2.55rem;
  height: 2.55rem;
  font-size: 1.05rem;
}

.add-due-picker-button.has-value {
  position: relative;
  background: rgba(59, 130, 246, 0.18);
  border-color: var(--primary);
}

.add-due-picker-button.has-value::after {
  content: '';
  position: absolute;
  top: 0.32rem;
  inset-inline-end: 0.32rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--primary);
}

.note-picker-button {
  width: 2rem;
  height: 2rem;
  font-size: 0.95rem;
}

.jalali-date-picker {
  position: fixed;
  z-index: 1200;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.28);
  direction: rtl;
}

.jalali-date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.date-picker-title {
  flex: 1;
  text-align: center;
  font-weight: 800;
  color: var(--text);
}

.date-picker-nav {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--filter-bg);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
}

.date-picker-nav:hover {
  background: var(--filter-hover);
}

.jalali-weekdays,
.jalali-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.jalali-weekdays {
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
  font-weight: 700;
}

.jalali-weekdays span {
  padding: 0.25rem 0;
}

.jalali-day,
.jalali-day-empty {
  min-width: 0;
  height: 2.05rem;
  border-radius: 0.6rem;
}

.jalali-day {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
}

.jalali-day:hover {
  background: var(--filter-bg);
}

.jalali-day.today {
  border-color: var(--primary);
}

.jalali-day.selected {
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(59, 130, 246, 0.28);
}

.jalali-time-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
}

.jalali-time-title {
  text-align: center;
  font-weight: 700;
}

.jalali-time-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.jalali-time-box {
  display: grid;
  grid-template-columns: 2.15rem 3.25rem 2.15rem;
  grid-template-rows: 2rem auto;
  align-items: center;
  gap: 0.25rem;
}

.jalali-time-input {
  width: 3.25rem;
  min-height: 2rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  padding: 0.25rem;
  background: rgba(148, 163, 184, 0.08);
  color: var(--text);
  text-align: center;
  direction: ltr;
  font-weight: 800;
}

.time-step-button {
  width: 2.15rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--filter-bg);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
}

.time-step-button:hover {
  background: var(--filter-hover);
}

.time-box-label {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: 0.68rem;
}

.time-separator {
  color: var(--muted);
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 2rem;
  align-self: flex-start;
  padding-top: 0.15rem;
}

.jalali-picker-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.date-picker-secondary,
.date-picker-primary {
  border: 0;
  border-radius: 0.65rem;
  padding: 0.5rem 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.date-picker-secondary {
  background: var(--filter-bg);
  color: var(--text);
}

.date-picker-secondary:hover {
  background: var(--filter-hover);
}

.date-picker-secondary.danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

.date-picker-primary {
  background: var(--primary);
  color: #fff;
}

.date-picker-primary:hover {
  background: var(--primary-hover);
}

.date-picker-button:focus-visible,
.date-picker-nav:focus-visible,
.jalali-day:focus-visible,
.jalali-time-input:focus-visible,
.time-step-button:focus-visible,
.date-picker-secondary:focus-visible,
.date-picker-primary:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}


.app-footer {
  width: 100%;
  padding: 0.35rem 0.75rem 0.65rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.8;
  opacity: 0.82;
  user-select: none;
}

.footer-heart {
  display: inline-block;
  margin: 0 0.12rem;
  font-size: 0.75rem;
  vertical-align: -0.05rem;
}

.footer-copyright {
  display: inline-block;
  margin-right: 0.25rem;
  font-size: 0.7rem;
}

@media (max-width: 520px) {
  .jalali-date-picker {
    width: calc(100vw - 1rem) !important;
    left: 0.5rem !important;
  }
}

/* Footer fixed to the bottom of the page, away from the task input form */
.app-shell {
  height: 100dvh;
  padding-bottom: 2.4rem;
}

.app-footer {
  position: fixed;
  right: auto;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 34rem);
  padding: 0.35rem 0.75rem max(0.6rem, env(safe-area-inset-bottom));
  text-align: center;
  color: var(--muted);
  background: var(--bg);
  font-size: 0.68rem;
  line-height: 1.8;
  opacity: 0.88;
  user-select: none;
  z-index: 30;
}


.settings-card {
  margin: 0.35rem 0 0;
  background: var(--card);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.9rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.settings-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0.55rem 0.75rem;
  text-align: right;
  font-weight: 700;
}

.settings-toggle:hover {
  background: rgba(59, 130, 246, 0.08);
}

.settings-panel {
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  padding: 0.55rem 0.75rem 0.7rem;
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  color: var(--text);
  font-size: 0.85rem;
}

.setting-row input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.setting-volume-row {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
}

.setting-volume-row > span {
  flex: 0 0 auto;
}

.setting-volume-slider {
  flex: 1 1 140px;
  min-width: 120px;
  height: 1.2rem !important;
  accent-color: var(--primary);
  cursor: pointer;
}

.setting-volume-value {
  min-width: 2.8rem;
  text-align: left;
  color: var(--primary);
  font-size: 0.8rem;
  direction: ltr;
}

.settings-help {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.8;
}

.recurrence-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin: -0.15rem 0 0.35rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary);
  font-size: 0.72rem;
  line-height: 1.6;
}

.note-item.duplicate-highlight {
  animation: duplicatePulse 0.55s ease-in-out 0s 4 alternate;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35), var(--shadow);
}

@keyframes duplicatePulse {
  from { transform: translateY(0); background: var(--card); }
  to { transform: translateY(-3px); background: rgba(245, 158, 11, 0.12); }
}


.calendar-planner {
  margin: 0.55rem 0 0;
  background: var(--card);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  padding: 0.65rem;
}

.calendar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.calendar-title-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.calendar-title {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
}

.calendar-help {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.7;
}

.calendar-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.calendar-nav-button,
.calendar-small-button,
.calendar-mode-button {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.65rem;
  background: var(--filter-bg);
  color: var(--text);
  min-height: 2rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.calendar-nav-button {
  width: 2rem;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
}

.calendar-nav-button:hover,
.calendar-small-button:hover,
.calendar-mode-button:hover {
  background: var(--filter-hover);
}

.calendar-small-button.primary,
.calendar-mode-button {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}

.calendar-small-button.primary:hover,
.calendar-mode-button:hover {
  background: var(--primary-hover);
}

.calendar-small-button.danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.18);
  color: var(--danger);
}

.task-calendar-weekdays,
.task-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.task-calendar-weekdays {
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}

.task-calendar-grid {
  margin-top: 0.35rem;
}

.task-calendar-day {
  position: relative;
  min-height: 3.25rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.75rem;
  padding: 0.35rem 0.3rem 0.3rem;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.task-calendar-day:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.55);
}

.task-calendar-day.today {
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.task-calendar-day.selected {
  background: rgba(59, 130, 246, 0.14);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}

.task-calendar-day.has-tasks::after {
  content: '';
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--primary);
  position: absolute;
  bottom: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
}

.calendar-day-number {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
}

.calendar-day-month {
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.3;
}

.calendar-task-count {
  position: absolute;
  top: 0.2rem;
  left: 0.25rem;
  min-width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  background: var(--primary);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
}

.task-calendar-empty {
  min-height: 3.25rem;
}

.calendar-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.calendar-selected-info {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.7;
}

.day-filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding: 0.55rem 0.65rem;
  background: var(--card);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.8rem;
  color: var(--text);
  box-shadow: var(--shadow);
}

@media (max-width: 520px) {
  .calendar-header {
    flex-direction: column;
  }

  .calendar-actions {
    width: 100%;
    justify-content: stretch;
  }

  .calendar-actions .calendar-small-button,
  .calendar-actions .calendar-mode-button {
    flex: 1;
  }

  .task-calendar-day,
  .task-calendar-empty {
    min-height: 2.7rem;
  }

  .calendar-day-number {
    font-size: 0.9rem;
  }

  .calendar-help {
    font-size: 0.68rem;
  }
}


/* Compact layout refinement: more room for the task list */
.app-shell {
  width: min(100%, 44rem);
  padding: 0.65rem 0.8rem 2.25rem;
}

.header {
  padding: 0.15rem 0 0.25rem;
}

.header h1 {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  line-height: 1.7;
  font-weight: 800;
  color: var(--muted);
}

.main {
  margin-top: 0.2rem;
}

.filters {
  margin: 0.25rem 0;
  gap: 0.35rem;
  padding: 0.2rem;
  border-radius: 0.7rem;
}

.filter-button {
  padding: 0.28rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.82rem;
}

.settings-card {
  margin-top: 0.25rem;
  border-radius: 0.75rem;
}

.settings-toggle {
  padding: 0.42rem 0.65rem;
  font-size: 0.82rem;
}

.calendar-planner {
  margin-top: 0.4rem;
  padding: 0.55rem;
  border-radius: 0.85rem;
}

.notes-area {
  margin-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.notes-list {
  gap: 0.52rem;
}

.note-item {
  gap: 0.65rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.7rem;
}

.note-text {
  font-size: 1rem;
  line-height: 1.55rem;
}

.note-due-editor {
  margin-top: 0.35rem;
  gap: 0.35rem;
}

.due-progress-wrap {
  margin-top: 0.38rem;
}

.input-section {
  margin-top: 0.35rem;
}

.text-input-card.compact-composer {
  gap: 0.4rem;
  padding: 0.42rem;
  border-radius: 0.8rem;
}

.compact-composer #noteInput {
  flex: 1 1 auto;
  padding: 0.55rem 0.45rem;
  min-height: 2.45rem;
}

.compact-voice-box {
  flex: 0 0 auto;
  min-height: auto;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compact-voice-box .voice-button {
  width: 2.55rem;
  height: 2.55rem;
  min-width: 2.55rem;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.28);
}

.compact-voice-box .voice-button svg {
  width: 1.28rem;
  height: 1.28rem;
}

.compact-voice-box .status-message,
.compact-voice-box .unsupported-message {
  display: none;
}

.add-due-picker-button,
#addButton {
  height: 2.55rem;
}

#addButton {
  padding: 0.45rem 0.9rem;
  border-radius: 0.7rem;
}

.app-footer {
  width: min(100%, 44rem);
}

@media (max-width: 520px) {
  .app-shell {
    padding-inline: 0.55rem;
    padding-top: 0.45rem;
  }

  .header h1 {
    font-size: 1rem;
  }

  .text-input-card.compact-composer {
    align-items: center;
    gap: 0.35rem;
  }

  .compact-composer #noteInput {
    flex-basis: 100%;
    min-height: 2.35rem;
  }

  .compact-voice-box .voice-button,
  .add-due-picker-button,
  #addButton {
    height: 2.35rem;
  }

  .compact-voice-box .voice-button,
  .add-due-picker-button {
    width: 2.35rem;
    min-width: 2.35rem;
  }

  #addButton {
    flex: 1 1 auto;
  }

  .note-item {
    padding: 0.62rem;
  }
}

.setting-select-row {
  align-items: center;
  justify-content: space-between;
}

.setting-select {
  min-width: 9rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  padding: 0.35rem 0.6rem;
  background: var(--card);
  color: var(--text);
  font: inherit;
}

html[dir="ltr"] body {
  direction: ltr;
}

html[dir="ltr"] .note-item,
html[dir="ltr"] .text-input-card,
html[dir="ltr"] .calendar-header,
html[dir="ltr"] .calendar-footer,
html[dir="ltr"] .settings-panel,
html[dir="ltr"] .setting-row,
html[dir="ltr"] .day-filter-title {
  direction: ltr;
}

html[dir="rtl"] body {
  direction: rtl;
}


/* Onboarding tutorial wizard */
.setting-action-button {
  width: 100%;
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 0.65rem;
  padding: 0.55rem 0.75rem;
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary);
  font-weight: 700;
}

.setting-action-button:hover {
  background: rgba(59, 130, 246, 0.18);
}

.tutorial-overlay[hidden] {
  display: none !important;
}

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: auto;
}

.tutorial-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}

.tutorial-spotlight {
  position: fixed;
  z-index: 5002;
  border: 3px solid #facc15;
  border-radius: 1rem;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.58), 0 0 28px rgba(250, 204, 21, 0.9);
  pointer-events: none;
  transition: top 0.28s cubic-bezier(.2,.8,.2,1), left 0.28s cubic-bezier(.2,.8,.2,1), width 0.28s cubic-bezier(.2,.8,.2,1), height 0.28s cubic-bezier(.2,.8,.2,1);
}

.tutorial-target-active {
  border-radius: 1rem;
  animation: tutorialTargetPulse 1.35s ease-in-out infinite;
}

@keyframes tutorialTargetPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(250, 204, 21, 0.08); }
}

.tutorial-card {
  position: fixed;
  z-index: 5003;
  left: 1rem;
  top: 1rem;
  width: min(92vw, 27rem);
  max-height: min(75vh, 26rem);
  overflow: auto;
  padding: 1rem;
  border: 1px solid rgba(203, 213, 225, 0.7);
  border-radius: 1.1rem;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.35);
  transition: top 0.32s cubic-bezier(.2,.8,.2,1), left 0.32s cubic-bezier(.2,.8,.2,1), transform 0.32s cubic-bezier(.2,.8,.2,1);
}

.tutorial-arrow {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--card);
  border: 1px solid rgba(203, 213, 225, 0.7);
  transform: rotate(45deg);
  pointer-events: none;
}

.tutorial-card[data-placement="bottom"] .tutorial-arrow {
  top: -8px;
  left: calc(var(--arrow-x, 50%) - 8px);
  border-right: 0;
  border-bottom: 0;
}

.tutorial-card[data-placement="top"] .tutorial-arrow {
  bottom: -8px;
  left: calc(var(--arrow-x, 50%) - 8px);
  border-left: 0;
  border-top: 0;
}

.tutorial-card[data-placement="right"] .tutorial-arrow {
  left: -8px;
  top: calc(var(--arrow-y, 50%) - 8px);
  border-right: 0;
  border-top: 0;
}

.tutorial-card[data-placement="left"] .tutorial-arrow {
  right: -8px;
  top: calc(var(--arrow-y, 50%) - 8px);
  border-left: 0;
  border-bottom: 0;
}

.tutorial-card[data-placement="floating"] .tutorial-arrow {
  display: none;
}

.tutorial-topline,
.tutorial-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tutorial-counter {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.tutorial-card h2 {
  margin: 0.75rem 0 0.45rem;
  font-size: 1.1rem;
  line-height: 1.45;
}

.tutorial-card p {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.8;
}

.tutorial-link-button,
.tutorial-secondary-button,
.tutorial-primary-button {
  border: 0;
  border-radius: 0.7rem;
  padding: 0.55rem 0.8rem;
  font-weight: 700;
}

.tutorial-link-button {
  padding-inline: 0.25rem;
  background: transparent;
  color: var(--muted);
}

.tutorial-link-button:hover {
  color: var(--text);
}

.tutorial-secondary-button {
  background: var(--filter-bg);
  color: var(--text);
}

.tutorial-secondary-button:disabled {
  opacity: 0.45;
}

.tutorial-primary-button {
  background: var(--primary);
  color: #fff;
  min-width: 7rem;
}

.tutorial-primary-button:hover {
  background: var(--primary-hover);
}

@media (max-width: 520px) {
  .tutorial-card {
    padding: 0.85rem;
    max-height: 68vh;
  }

  .tutorial-card h2 {
    font-size: 1rem;
  }

  .tutorial-card p {
    font-size: 0.85rem;
  }
}


/* Cloud account, sync and collaboration */
.cloud-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  margin: 10px 0;
}
.cloud-header, .cloud-account-row, .cloud-list-row, .cloud-inline-form, .task-send-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cloud-header { justify-content: space-between; margin-bottom: 8px; }
.cloud-server, .cloud-muted, .cloud-empty, .cloud-help { color: #64748b; font-size: 0.82rem; }
.cloud-login-grid {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(130px, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.cloud-input, .task-send-select {
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 12px;
  padding: 9px 10px;
  font-family: inherit;
  min-height: 38px;
  background: #fff;
}
.cloud-button {
  border: 0;
  border-radius: 12px;
  padding: 9px 12px;
  font-family: inherit;
  cursor: pointer;
  background: #e2e8f0;
  color: #0f172a;
  min-height: 36px;
}
.cloud-button.primary { background: #2563eb; color: #fff; }
.cloud-button.danger { background: #fee2e2; color: #991b1b; }
.cloud-button.small { padding: 6px 9px; min-height: 30px; font-size: 0.82rem; }
.cloud-button:disabled { opacity: .65; cursor: wait; }
.cloud-status {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.85rem;
}
.cloud-status.error { background: #fef2f2; color: #b91c1c; }
.cloud-subsection { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(148,163,184,.24); }
.cloud-subsection h3 { margin: 0 0 8px; font-size: .95rem; }
.cloud-list { display: grid; gap: 7px; }
.cloud-list-row { justify-content: space-between; background: rgba(248,250,252,.9); border: 1px solid rgba(226,232,240,.95); border-radius: 14px; padding: 8px; }
.cloud-list-row.stack { align-items: stretch; flex-direction: column; }
.cloud-list-title { font-weight: 700; }
.cloud-badge { background: #f1f5f9; color: #334155; border-radius: 999px; padding: 4px 8px; }
.cloud-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.task-send-box { margin-top: 8px; }
.task-send-select { min-width: 170px; flex: 1; padding: 6px 8px; min-height: 32px; font-size: .82rem; }
.note-source-badge { display: inline-flex; margin-top: 6px; border-radius: 999px; padding: 4px 8px; background: #ecfeff; color: #0e7490; font-size: .78rem; }
.assignment-status-badge { display: inline-flex; width: fit-content; margin-top: 6px; border-radius: 999px; padding: 4px 9px; background: #fff7ed; color: #9a3412; font-size: .78rem; font-weight: 700; }
@media (max-width: 680px) {
  .cloud-login-grid { grid-template-columns: 1fr; }
  .cloud-inline-form, .cloud-account-row, .task-send-box { align-items: stretch; flex-direction: column; }
  .cloud-button, .cloud-input, .task-send-select { width: 100%; }
}

/* Account/collaborators now live inside Settings */
.settings-cloud-card {
  margin: 0.75rem 0 0;
  box-shadow: none;
  background: rgba(248, 250, 252, 0.78);
}
.settings-cloud-card .cloud-header strong {
  font-size: 0.95rem;
}
.note-text {
  white-space: pre-wrap;
}

/* Server account/collaboration refinements */
.filter-button.locked-filter{opacity:.45;cursor:not-allowed}.account-tab-card{margin:12px 0}.profile-row{align-items:flex-start;gap:12px;flex-wrap:wrap}.cloud-profile-form{flex:1;min-width:240px}.account-actions{margin-inline-start:auto}.cloud-avatar{width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg,#dbeafe,#e0e7ff);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:#1e40af;overflow:hidden;flex:0 0 auto}.cloud-avatar.large{width:52px;height:52px;font-size:1rem}.cloud-avatar.tiny{width:24px;height:24px;font-size:.68rem}.cloud-avatar img{width:100%;height:100%;object-fit:cover;display:block}.cloud-person-line{display:flex;align-items:center;gap:8px;min-width:0}.collaborator-row .cloud-list-title{word-break:break-word}.chat-subsection{border-top:1px solid rgba(148,163,184,.25);padding-top:14px}.chat-shell{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:12px}.chat-collaborators{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto}.chat-person-button{display:flex;align-items:center;gap:8px;width:100%;text-align:inherit;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:8px;cursor:pointer;color:inherit}.chat-person-button.active{background:#eff6ff;border-color:#93c5fd}.chat-person-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-unread{background:#ef4444;color:#fff;border-radius:999px;padding:2px 6px;font-size:.68rem}.chat-body{border:1px solid #e2e8f0;border-radius:14px;padding:10px;min-height:260px;background:#fff}.chat-title{display:block;margin-bottom:8px}.chat-messages{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow:auto;padding:4px}.chat-message{display:flex;gap:6px;align-items:flex-end}.chat-message.mine{flex-direction:row-reverse}.chat-bubble{max-width:min(75%,520px);background:#f1f5f9;border-radius:14px;padding:8px 10px}.chat-message.mine .chat-bubble{background:#dbeafe}.chat-bubble p{margin:0;white-space:pre-wrap}.chat-bubble small{opacity:.6;font-size:.68rem}.chat-compose{display:flex;gap:8px;margin-top:10px}.chat-compose input{flex:1}@media(max-width:720px){.chat-shell{grid-template-columns:1fr}.chat-collaborators{max-height:170px}.chat-body{min-height:220px}.profile-row{flex-direction:column}.account-actions{margin-inline-start:0}}


/* Realtime collaboration, auth lock, and standalone chat refinements */
.filters[hidden]{display:none!important}.app-shell.logged-out .main{align-items:stretch}.account-tab-card{max-height:calc(100vh - 190px);overflow:auto;scrollbar-gutter:stable;padding-bottom:18px}.cloud-subsection{scroll-margin-top:16px}.cloud-list{max-height:none}.main-notifications{display:grid;gap:8px;margin:0 0 12px}.main-notifications-title{font-size:.95rem;color:#0f172a}.notification-task-card{display:flex;gap:10px;align-items:flex-start;background:linear-gradient(135deg,#fff7ed,#fffbeb);border:1px solid #fed7aa;border-radius:18px;padding:10px;box-shadow:0 10px 24px rgba(15,23,42,.06);animation:noticePop .25s ease both}.notification-task-body{flex:1;min-width:0;display:grid;gap:6px}.notification-task-body p{margin:0;font-weight:700;color:#1f2937}.chat-notification-card{background:linear-gradient(135deg,#eff6ff,#f8fafc);border-color:#bfdbfe}.incoming-assignment-card{background:linear-gradient(135deg,#ecfdf5,#f8fafc);border-color:#bbf7d0}@keyframes noticePop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}.chat-tab-card{min-height:calc(100vh - 240px);display:flex;flex-direction:column}.chat-tab-card[hidden]{display:none!important}.chat-tab-card .chat-subsection{border-top:0;margin-top:0;padding-top:0;display:flex;flex:1;flex-direction:column;min-height:0}.chat-tab-card .chat-shell{flex:1;min-height:0;grid-template-columns:minmax(190px,280px) minmax(0,1fr)}.chat-tab-card .chat-collaborators{max-height:none;overflow:auto;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:8px}.chat-tab-card .chat-body{display:flex;flex-direction:column;min-height:420px}.chat-tab-card .chat-messages{flex:1;max-height:none;min-height:260px}.chat-tab-card .chat-compose{position:sticky;bottom:0;background:#fff;padding-top:8px}.cloud-login-grid .cloud-input{min-width:0}@media(max-width:720px){.account-tab-card{max-height:calc(100vh - 150px)}.chat-tab-card{min-height:calc(100vh - 170px)}.chat-tab-card .chat-shell{grid-template-columns:1fr}.chat-tab-card .chat-collaborators{max-height:180px}.chat-tab-card .chat-body{min-height:360px}.notification-task-card{border-radius:14px}}

/* OTP-first login and profile photo upload */
.cloud-login-grid .compact-help{grid-column:1/-1;margin:0;color:#64748b;font-size:.82rem}.cloud-profile-complete{display:grid;gap:10px;padding:10px 0}.cloud-file-input{padding:8px;background:#fff}.cloud-file-input::file-selector-button{border:0;border-radius:10px;background:#e0f2fe;color:#075985;padding:7px 10px;margin-inline-end:8px;cursor:pointer;font-family:inherit}.cloud-profile-complete h3{margin:0;font-size:1rem}.cloud-profile-complete .profile-row{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:10px}


/* Patch: stable large chat workspace, attachments, and typing without refresh disruption */
.chat-tab-card{min-height:calc(100vh - 170px)!important}
.chat-shell-expanded,.chat-tab-card .chat-shell{grid-template-columns:minmax(230px,320px) minmax(0,1fr)!important;min-height:calc(100vh - 250px)!important}
.chat-tab-card .chat-collaborators{max-height:calc(100vh - 260px)!important}
.chat-tab-card .chat-body{min-height:calc(100vh - 260px)!important;display:flex;flex-direction:column}
.chat-title-line{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex:0 0 auto}
.chat-messages{flex:1 1 auto!important;max-height:none!important;min-height:360px!important;scrollbar-gutter:stable}
.chat-compose{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;flex:0 0 auto}
.chat-textarea{min-height:46px;max-height:130px;resize:vertical;line-height:1.7}
.chat-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chat-file-input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.chat-tool-button{min-width:38px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
.chat-attachment-link{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:6px 8px;border-radius:10px;background:#eef2ff;color:#1d4ed8;text-decoration:none;font-weight:800;word-break:break-all}
.chat-attachment-link::before{content:'📎'}
@media(max-width:720px){.chat-shell-expanded,.chat-tab-card .chat-shell{grid-template-columns:1fr!important;min-height:calc(100vh - 190px)!important}.chat-tab-card .chat-collaborators{max-height:160px!important}.chat-compose{grid-template-columns:1fr}.chat-tools{justify-content:stretch}.chat-tools .cloud-button,.chat-tools label{flex:1}.chat-messages{min-height:280px!important}}

/* Patch: notification audio, stable avatar upload, and 4:1 chat workspace ratio */
.chat-shell-expanded,
.chat-tab-card .chat-shell {
  grid-template-columns: minmax(170px, 1fr) minmax(0, 4fr) !important;
}
.chat-tab-card .chat-body {
  min-width: 0;
}
.chat-tab-card .chat-collaborators {
  min-width: 0;
}
@media (max-width: 720px) {
  .chat-shell-expanded,
  .chat-tab-card .chat-shell {
    grid-template-columns: 1fr !important;
  }
}

/* Patch: overdue muted tasks and single global chat composer */
.overdue-muted-card{background:linear-gradient(135deg,#fef2f2,#fff7ed)!important;border-color:#fecaca!important}.note-item.due-overdue{border-color:#fca5a5;background:linear-gradient(135deg,#fff1f2,#fff7ed)}.chat-global-composer-help{margin:8px 0 0;color:#64748b;text-align:center}.main-chat-file-button{padding:9px 12px;align-self:stretch;border-radius:14px}.input-section .main-chat-file-button[hidden]{display:none!important}.input-section .chat-file-input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}.app-shell .input-section .text-input-card.compact-composer{align-items:center}


/* Patch: mobile responsive polish, stable chat composer, and avatar upload UI */
#noteInput.chat-composer-active{background:#ffffff;border-color:#93c5fd;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
#noteInput:disabled{opacity:.72;cursor:not-allowed;background:#f8fafc}
.cloud-file-input{cursor:pointer;min-height:42px;padding-top:9px}
.chat-tab-card .chat-shell{grid-template-columns:minmax(180px,20%) minmax(0,80%)!important;gap:12px}
.chat-tab-card .chat-collaborators{min-width:0}
.chat-person-button{min-height:46px}
.chat-body,.chat-messages{min-width:0}
.text-input-card.compact-composer{width:100%}
.main-chat-file-button{white-space:nowrap}
@media (max-width: 900px){
  .app-shell{padding:10px!important}
  .main{gap:10px!important}
  .filters{overflow-x:auto;display:flex;gap:6px;padding-bottom:4px;scrollbar-width:thin}
  .filter-button{flex:0 0 auto;white-space:nowrap;padding:8px 10px;font-size:.84rem}
  .account-tab-card,.chat-tab-card{max-height:none!important;min-height:auto!important;margin-bottom:84px}
  .cloud-header{gap:6px;flex-wrap:wrap}
  .cloud-inline-form{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;width:100%}
  .cloud-profile-form,.cloud-login-grid{width:100%;min-width:0!important}
  .cloud-account-row,.profile-row{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .cloud-row-actions{display:flex;flex-wrap:wrap;gap:6px;width:100%}
  .cloud-row-actions .cloud-button{flex:1 1 auto}
  .chat-tab-card .chat-shell,.chat-shell-expanded{grid-template-columns:1fr!important;min-height:auto!important}
  .chat-tab-card .chat-collaborators{display:flex!important;flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;max-height:none!important;padding:8px!important;scroll-snap-type:x proximity}
  .chat-person-button{min-width:150px;max-width:210px;scroll-snap-align:start;flex:0 0 auto}
  .chat-tab-card .chat-body{min-height:calc(100vh - 310px)!important}
  .chat-messages{min-height:calc(100vh - 390px)!important;max-height:none!important}
  .chat-bubble{max-width:86vw!important}
  .input-section{position:sticky;bottom:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);padding:8px 0 0;margin-bottom:0}
  .text-input-card.compact-composer{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto auto!important;gap:6px!important;padding:8px!important}
  #noteInput{min-width:0!important;font-size:16px!important;height:44px!important}
  #addButton,.main-chat-file-button,.compact-voice-box .voice-button,#duePickerButton{min-height:44px!important;min-width:44px!important;padding:8px 10px!important}
  .compact-voice-box{min-width:44px!important}
  .compact-voice-box .status-message,.compact-voice-box .unsupported-message{display:none!important}
  .settings-card{max-height:calc(100vh - 120px);overflow:auto}
}
@media (max-width: 520px){
  .brand h1{font-size:1.08rem!important}
  .brand p,.cloud-server{font-size:.75rem!important}
  .note-item,.notification-task-card{border-radius:14px!important;padding:9px!important}
  .calendar-grid{font-size:.76rem!important}
  .cloud-button{font-size:.82rem!important}
  .text-input-card.compact-composer{grid-template-columns:minmax(0,1fr) 42px 42px 42px!important}
  #addButton{font-size:0!important}
  #addButton::after{content:'+';font-size:20px;font-weight:900}
  .main-chat-file-button{font-size:0!important}
  .main-chat-file-button::after{content:'📎';font-size:18px}
  .chat-person-button{min-width:135px}
  .chat-tab-card .chat-body{padding:8px!important}
}

/* Patch: tutorial after login only, mobile footer/chat stability, chat delete, cleaner mobile composer */
.chat-message-meta{display:flex;align-items:center;gap:8px;margin-top:4px;opacity:.85}
.chat-message-meta small{font-size:.67rem}
.chat-delete-button{border:0;background:transparent;color:#ef4444;font-size:.68rem;font-weight:800;padding:2px 4px;border-radius:7px;cursor:pointer}
.chat-delete-button:hover{background:#fee2e2}
.chat-message.mine .chat-delete-button{color:#b91c1c}
.chat-body{min-height:0!important;overflow:hidden!important}
.chat-messages{overflow-y:auto!important;overscroll-behavior:contain;scrollbar-gutter:stable}

@media (max-width: 900px){
  .app-shell{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
  .main{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;padding-bottom:6px!important}
  .input-section{order:3!important;flex:0 0 auto!important;position:sticky!important;bottom:0!important;z-index:30!important;background:rgba(255,255,255,.97)!important;padding:8px 0 max(8px, env(safe-area-inset-bottom))!important;border-top:1px solid rgba(148,163,184,.25)!important}
  .app-footer{order:2!important;flex:0 0 auto!important;padding:4px 8px 6px!important;margin:0!important;background:transparent!important;position:relative!important;z-index:1!important}
  .chat-tab-card{min-height:0!important;height:auto!important;margin-bottom:0!important;display:flex!important;flex-direction:column!important}
  .chat-tab-card .cloud-subsection{min-height:0!important;flex:1 1 auto!important;display:flex!important;flex-direction:column!important}
  .chat-tab-card .chat-shell,.chat-shell-expanded{min-height:0!important;height:auto!important;flex:1 1 auto!important;display:grid!important;grid-template-rows:auto minmax(0,1fr)!important}
  .chat-tab-card .chat-collaborators{flex:0 0 auto!important;max-height:96px!important}
  .chat-tab-card .chat-body{min-height:0!important;height:calc(100dvh - 330px)!important;max-height:calc(100dvh - 330px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
  .chat-tab-card .chat-messages{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;padding-bottom:10px!important}
  .chat-global-composer-help{font-size:.76rem!important;margin:4px 0 0!important}
  .app-shell .input-section .text-input-card.compact-composer{grid-template-columns:minmax(0,1fr) auto auto auto!important}
  .app-shell .input-section .text-input-card.compact-composer .compact-due-field[hidden]{display:none!important}
  #noteInput.chat-composer-active{height:46px!important}
}

@media (max-width: 520px){
  .chat-tab-card .chat-body{height:calc(100dvh - 315px)!important;max-height:calc(100dvh - 315px)!important}
  .chat-person-button{min-width:128px!important;max-width:170px!important}
  .app-footer{font-size:.62rem!important;line-height:1.5!important}
}

body.chat-mode .compact-due-field,
body.chat-mode #duePickerButton {
  display: none !important;
}


/* Patch: settings merged into final Settings tab and updated tab naming/order */
.settings-in-cloud{display:block!important;margin-top:14px!important;max-height:none!important;overflow:visible!important}
.settings-in-cloud .settings-panel{display:grid!important}
.settings-in-cloud .settings-toggle{display:none!important}
.settings-in-cloud[hidden]{display:none!important}


/* Patch: advanced tab excludes completed tasks, cleaner settings/collaborators, chat delete scope, and mobile app navigation */
.collaborators-management{display:grid!important;gap:14px!important}
.collaborator-add-card,.collaborator-list-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:12px;display:grid;gap:10px}
.collaborator-add-card h3,.collaborator-list-card h3{margin:0;font-size:.98rem;color:#0f172a}
.collaborator-add-form{align-items:end}
.collaborator-list-scroll{display:grid;gap:8px;max-height:340px;overflow:auto;padding-inline-end:2px}
.main-chat-file-button{background:#eef2ff!important;border:1px solid #c7d2fe!important;color:#3730a3!important;font-weight:900!important}
body.chat-mode .main-chat-file-button::after{content:'📁';font-size:18px;line-height:1}
body.chat-mode .main-chat-file-button{font-size:0!important;min-width:46px!important}
body.chat-mode .main-chat-file-button[hidden]{display:none!important}
.chat-delete-button{border:1px solid rgba(239,68,68,.18)!important;background:#fff5f5!important}
@media (max-width:900px){
  .header{padding:4px 0 2px!important}
  .header h1{font-size:1.05rem!important;font-weight:900!important}
  .filters{position:sticky!important;top:0!important;z-index:25!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important;margin:4px 0 8px!important;padding:8px!important;border-radius:20px!important;background:rgba(255,255,255,.92)!important;backdrop-filter:blur(14px)!important;box-shadow:0 10px 28px rgba(15,23,42,.12)!important;overflow:visible!important}
  .filter-button{min-width:0!important;flex:initial!important;padding:7px 3px!important;border-radius:15px!important;font-size:.69rem!important;line-height:1.25!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;white-space:normal!important;min-height:52px!important}
  .filter-button::before{display:block;font-size:1.15rem;line-height:1}
  .filter-button[data-filter="active"]::before{content:'✅'}
  .filter-button[data-filter="chat"]::before{content:'💬'}
  .filter-button[data-filter="all"]::before{content:'📅'}
  .filter-button[data-filter="completed"]::before{content:'🏁'}
  .filter-button[data-filter="cloud"]::before{content:'⚙️'}
  .filter-button.active{transform:translateY(-1px);box-shadow:0 8px 18px rgba(59,130,246,.28)!important}
  .collaborator-add-card,.collaborator-list-card{border-radius:16px;padding:10px}
  .collaborator-list-scroll{max-height:45dvh}
  .chat-tab-card .chat-body{height:calc(100dvh - 345px)!important;max-height:calc(100dvh - 345px)!important}
}
@media (max-width:520px){
  .filter-button{font-size:.62rem!important;min-height:48px!important;padding:6px 2px!important}
  .filter-button::before{font-size:1rem}
  .chat-tab-card .chat-body{height:calc(100dvh - 335px)!important;max-height:calc(100dvh - 335px)!important}
}


.chat-mode .voice-button {
  touch-action: manipulation;
  user-select: none;
}

.chat-mode .voice-button.listening,
.chat-mode .voice-button.chat-recording {
  background: var(--danger);
  animation: neon-red-blink 1.1s infinite ease-in-out;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12), 0 8px 20px rgba(239, 68, 68, 0.25);
}

.chat-audio-message {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: min(280px, 70vw);
}

.chat-audio-message audio {
  width: 100%;
  max-width: 320px;
}

.chat-delete-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(4px);
}

.chat-delete-dialog {
  width: min(420px, 94vw);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(15, 23, 42, 0.2));
  padding: 1rem;
}

.chat-delete-title {
  display: block;
  margin-bottom: 0.85rem;
  font-size: 0.98rem;
}

.chat-delete-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.cloud-button.ghost {
  background: var(--surface, #f8fafc);
  color: var(--text);
  border: 1px solid var(--border);
}

@media (max-width: 640px) {
  .chat-delete-actions {
    grid-template-columns: 1fr;
  }
}

/* Final patch: PWA install, sessions, cleaner mobile layout */
.install-prompt-card{background:linear-gradient(135deg,#eff6ff,#f8fafc);border:1px solid #bfdbfe;border-radius:18px;padding:12px;display:grid;gap:8px}
.sessions-subsection{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:12px;margin-top:14px;display:grid;gap:10px}
.sessions-list{display:grid;gap:8px}
.session-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
.session-info{display:grid;gap:3px;min-width:0}
.settings-footer-credit{display:none;color:var(--muted);font-size:.72rem;text-align:center;padding:10px 6px 2px}
.cloud-header .cloud-server{display:none!important}
.cloud-login-grid + .cloud-status{margin-top:10px}
body.chat-mode .compact-due-field,body.chat-mode #duePickerButton{display:none!important;visibility:hidden!important;pointer-events:none!important}
@media (max-width:900px){
  .header{display:none!important}
  .app-shell{width:100%!important;height:100dvh!important;min-height:100dvh!important;padding:0 8px!important;margin:0!important}
  .main{margin-top:0!important;overflow:auto!important}
  .filters{margin:6px 0 8px!important}
  .app-footer{display:none!important}
  .settings-footer-credit{display:block!important}
  .account-tab-card,.chat-tab-card{height:calc(100dvh - 136px)!important;max-height:none!important;min-height:0!important;overflow:auto!important;margin:0!important;padding-bottom:10px!important}
  .chat-tab-card{display:flex!important;flex-direction:column!important}
  .chat-tab-card .chat-subsection{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important}
  .chat-tab-card .chat-shell{flex:1 1 auto!important;min-height:0!important;height:100%!important;display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;gap:8px!important}
  .chat-tab-card .chat-collaborators{max-height:88px!important;display:flex!important;flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;padding:6px!important}
  .chat-tab-card .chat-body{height:auto!important;max-height:none!important;min-height:0!important;flex:1 1 auto!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
  .chat-tab-card .chat-messages{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
  .cloud-card{width:100%!important;max-width:none!important}
  .settings-in-cloud,.sessions-subsection,.collaborators-management{width:100%!important}
  .input-section{padding-inline:0!important}
}
@media (max-width:520px){
  .account-tab-card,.chat-tab-card{height:calc(100dvh - 128px)!important}
  .text-input-card.compact-composer{border-radius:18px!important}
}
body.chat-mode #addButton{font-size:0!important;min-width:46px!important}
body.chat-mode #addButton::after{content:'➤';font-size:20px;font-weight:900;line-height:1;display:block;transform:scaleX(-1)}
html[dir="ltr"] body.chat-mode #addButton::after{transform:none}

/* Assignment and incoming-task fixes */
.task-send-box.compact { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.note-due-editor .task-send-box.compact {
  margin-top: 0;
  margin-inline-start: auto;
}
.note-due-editor .task-send-inline-form {
  max-width: 360px;
}
@media (max-width: 640px) {
  .note-due-editor .task-send-box.compact {
    width: 100%;
    margin-inline-start: 0;
  }
}
.task-send-toggle { white-space: nowrap; }
.task-send-toggle.active { box-shadow: 0 0 0 3px rgba(59,130,246,.16); }
.task-send-inline-form { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 420px; }
.task-send-inline-form .task-send-select { flex: 1; min-width: 160px; }
.note-due-editor.locked { opacity: .72; }
.note-due-editor.locked input, .note-due-editor.locked button { cursor: not-allowed; }
@media (max-width: 640px) {
  .task-send-box.compact { align-items: stretch; }
  .task-send-inline-form { max-width: none; width: 100%; }
  .task-send-inline-form .task-send-select { min-width: 0; }
}

.completion-confirm-box {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7ed, #fffbeb);
}
.completion-confirm-box p {
  margin: 0;
  color: #7c2d12;
  font-weight: 700;
  line-height: 1.8;
}

/* Mobile chat redesign: Telegram-like vertical conversation list */
.chat-person-text{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px;text-align:start}
.chat-last-message{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#64748b;font-size:.75rem;font-weight:600;line-height:1.4}
.chat-back-button{display:none;border:1px solid #dbeafe;background:#eff6ff;color:#1d4ed8;border-radius:12px;padding:7px 10px;font-weight:900;cursor:pointer}
@media(max-width:720px){
  .chat-tab-card .chat-shell,.chat-shell-expanded{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr)!important;min-height:0!important;height:auto!important;gap:0!important}
  .chat-tab-card .chat-collaborators{display:flex!important;flex-direction:column!important;overflow-y:auto!important;overflow-x:hidden!important;white-space:normal!important;max-height:none!important;height:calc(100dvh - 230px)!important;padding:6px!important;gap:6px!important;background:#fff!important}
  .chat-person-button{width:100%!important;min-width:0!important;max-width:none!important;min-height:64px!important;flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:10px!important;justify-content:flex-start!important;text-align:start!important;border-radius:14px!important;padding:9px 10px!important}
  .chat-person-button .cloud-avatar{flex:0 0 auto!important}
  .chat-person-name{font-size:.92rem!important;font-weight:900!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .chat-last-message{font-size:.76rem!important}
  .chat-unread{margin-inline-start:auto!important;flex:0 0 auto!important}
  .chat-shell.has-active-chat .chat-collaborators{display:none!important}
  .chat-shell.no-active-chat .chat-body{display:none!important}
  .chat-shell.has-active-chat .chat-body{display:flex!important;height:calc(100dvh - 230px)!important;max-height:none!important;min-height:0!important;overflow:hidden!important}
  .chat-back-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important}
  .chat-title-line{gap:8px!important;padding-bottom:6px!important;border-bottom:1px solid #e2e8f0!important}
}


.settings-version-badge{margin:10px 0 0;padding:8px 10px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0;color:#475569;font-weight:800;font-size:.82rem;text-align:center}

/* Password login, profile help and group chat additions */
.professional-login-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:18px;align-items:stretch;margin-top:12px}
.login-hero-box{position:relative;overflow:hidden;border-radius:28px;padding:24px;background:radial-gradient(circle at top right,rgba(59,130,246,.28),transparent 34%),linear-gradient(135deg,#0f172a,#1e3a8a 56%,#0369a1);color:#fff;box-shadow:0 24px 60px rgba(15,23,42,.22)}
.login-hero-box:before,.login-hero-box:after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.14);filter:blur(.2px);animation:loginFloat 7s ease-in-out infinite}
.login-hero-box:before{width:110px;height:110px;left:24px;top:18px}.login-hero-box:after{width:170px;height:170px;right:-50px;bottom:-60px;animation-delay:1.4s}
.login-hero-box>*{position:relative;z-index:1}.login-kicker{display:inline-flex;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);padding:6px 10px;border-radius:999px;font-size:.78rem;font-weight:800}.login-hero-box h2{margin:16px 0 10px;font-size:clamp(1.45rem,3.8vw,2.45rem);line-height:1.45}.login-hero-box p{margin:0;color:#dbeafe;line-height:1.9}.login-feature-list{display:grid;gap:8px;margin-top:18px}.login-feature-list span{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:8px 10px}.login-feature-list span:before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:#22c55e;color:#052e16;font-weight:900}.professional-login-card{background:#fff;border:1px solid #dbeafe;border-radius:28px;padding:18px;box-shadow:0 20px 48px rgba(37,99,235,.13);align-content:start}.login-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;grid-column:1/-1;background:#eff6ff;border-radius:16px;padding:5px}.login-mode-tab{border:0;border-radius:12px;background:transparent;padding:9px 10px;font-family:inherit;font-weight:900;color:#475569;cursor:pointer}.login-mode-tab.active{background:#fff;color:#1d4ed8;box-shadow:0 8px 20px rgba(37,99,235,.16)}.cloud-button.ghost{background:#f8fafc;color:#334155;border-color:#e2e8f0}.password-section-title{display:block;margin-top:4px;color:#0f172a}.password-subsection{background:linear-gradient(135deg,#f8fafc,#eff6ff);border:1px solid #dbeafe;border-radius:18px;padding:12px!important}.password-change-form{align-items:center}.chat-group-create{display:grid;gap:7px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:10px;margin-bottom:10px}.chat-side-title{display:block;margin:8px 2px 6px;color:#0f172a;font-size:.86rem;font-weight:900}.group-list-title{margin-top:12px}.chat-group-members{display:grid;gap:5px;max-height:118px;overflow:auto;padding:4px}.chat-group-member{display:flex;align-items:center;gap:7px;font-size:.82rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:6px 8px;cursor:pointer}.group-chat-button .cloud-avatar{background:linear-gradient(135deg,#dcfce7,#dbeafe)}.chat-title-line{display:flex;align-items:center;gap:8px;margin-bottom:8px}.chat-back-button{display:none;border:0;background:#eff6ff;color:#1d4ed8;border-radius:10px;padding:7px 10px;font-family:inherit;font-weight:900;cursor:pointer}@keyframes loginFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(10px,-10px,0) scale(1.04)}}

@media(max-width:720px){.professional-login-wrap{grid-template-columns:1fr;gap:12px}.login-hero-box{padding:18px;border-radius:22px}.professional-login-card{border-radius:22px}.chat-group-create{margin-bottom:12px}.chat-back-button{display:inline-flex}.chat-shell.no-active-chat .chat-collaborators{display:flex!important;max-height:none!important;overflow:auto!important;background:#f8fafc!important;border:1px solid #e2e8f0!important;border-radius:16px!important;padding:8px!important}.chat-shell.no-active-chat .chat-body{display:none!important}.chat-shell.has-active-chat .chat-collaborators{display:none!important}.chat-shell.has-active-chat .chat-body{display:flex!important}.chat-group-members{max-height:150px}.login-feature-list{gap:6px}.login-feature-list span{font-size:.82rem}}


/* Login responsive polish and form-first order */
.professional-login-wrap{
  grid-template-columns:minmax(320px,.88fr) minmax(0,1.12fr);
  align-items:start;
}
.professional-login-card{
  width:100%;
  min-width:0;
}
.professional-login-card .cloud-input,
.professional-login-card .cloud-button{
  width:100%;
}
.login-hero-box{
  min-width:0;
}
@media(max-width:860px){
  .professional-login-wrap{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .professional-login-card{
    order:1;
  }
  .login-hero-box{
    order:2;
  }
}
@media(max-width:520px){
  .cloud-card.account-tab-card{
    padding:10px!important;
    border-radius:18px!important;
  }
  .professional-login-wrap{
    margin-top:8px!important;
  }
  .professional-login-card{
    padding:12px!important;
    border-radius:18px!important;
  }
  .login-mode-tabs{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
  .login-hero-box{
    padding:14px!important;
    border-radius:18px!important;
  }
  .login-hero-box h2{
    font-size:1.12rem!important;
    line-height:1.65!important;
    margin:10px 0 8px!important;
  }
  .login-hero-box p{
    font-size:.84rem!important;
    line-height:1.8!important;
  }
  .login-kicker{
    font-size:.72rem!important;
  }
  .login-feature-list span{
    font-size:.78rem!important;
    padding:7px 8px!important;
  }
}

/* Single-column login layout: form first, introduction after it */
.professional-login-wrap{
  display:grid!important;
  grid-template-columns:1fr!important;
  width:100%!important;
  max-width:760px!important;
  margin:12px auto 0!important;
  gap:14px!important;
  align-items:start!important;
}
.professional-login-card{
  order:1!important;
  width:100%!important;
}
.login-hero-box{
  order:2!important;
  width:100%!important;
}
.login-feature-list{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
@media(max-width:520px){
  .professional-login-wrap{
    max-width:100%!important;
    gap:10px!important;
  }
}

/* Group creation popup and saved-password login control */
.remember-password-row{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:auto;
  max-width:100%;
  padding:6px 9px;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#f8fafc;
  color:#475569;
  font-size:.76rem;
  font-weight:700;
  line-height:1.4;
  cursor:pointer;
  user-select:none;
  align-self:flex-start;
}
.remember-password-row input{width:auto!important;accent-color:#2563eb;flex:0 0 auto;transform:scale(.88)}.password-save-hint{margin-top:-4px!important}.chat-group-launcher{display:grid;margin:8px 0 10px}.create-group-open-button{width:100%;justify-content:center}.chat-group-modal-backdrop{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.42);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px}.chat-group-modal{width:min(520px,100%);max-height:min(86dvh,720px);overflow:auto;background:#fff;border:1px solid #dbeafe;border-radius:24px;padding:16px;box-shadow:0 28px 80px rgba(15,23,42,.28);animation:modalRise .18s ease both}.chat-group-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.chat-group-modal-head strong{font-size:1.02rem;color:#0f172a}.chat-modal-close{width:34px;height:34px;border:0;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:1.4rem;line-height:1;cursor:pointer;font-family:inherit}.chat-group-modal .cloud-input{width:100%}.chat-group-modal .modal-members{max-height:260px;overflow:auto;margin:10px 0;padding:6px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px}.chat-group-modal .chat-group-member{background:#fff;min-height:44px}.chat-group-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.chat-group-modal-actions .cloud-button{width:100%;justify-content:center}@keyframes modalRise{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:720px){.chat-group-launcher{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,.78),#fff);padding-top:6px;margin-top:8px}.chat-group-modal-backdrop{align-items:flex-end;padding:10px}.chat-group-modal{border-radius:22px 22px 16px 16px;max-height:88dvh;padding:14px}.chat-group-modal-actions{grid-template-columns:1fr}.chat-group-modal .modal-members{max-height:42dvh}.remember-password-row{font-size:.74rem;padding:6px 8px}}

/* v1.4.10: compact task due and assignment info controls */
.note-due-action-button {
  min-height: 2rem;
  border-radius: 999px;
  white-space: nowrap;
}
.note-due-action-button.has-value {
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary);
  font-weight: 800;
}
.note-due-hidden-input {
  display: none !important;
}
.assignment-info-button {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(14, 165, 233, 0.12);
  color: #0369a1;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}
.assignment-info-button::before {
  content: '↗';
  margin-inline-end: 5px;
  font-weight: 900;
}
@media (max-width: 640px) {
  .note-due-editor {
    align-items: stretch;
  }
  .note-due-action-button,
  .clear-due-button {
    width: 100%;
  }
}

/* v1.4.15: smaller forgot-password link */
.professional-login-card .cloud-button.ghost[data-cloud-action="switch-login-mode"][data-cloud-id="sms"]{
  font-size:.72rem!important;
  min-height:30px!important;
  padding:5px 8px!important;
  line-height:1.45!important;
  border-radius:10px!important;
}

/* v1.4.15: make web typography closer to extension display scale */
html.web-client{
  font-size:14.5px;
}
@media(max-width:720px){
  html.web-client{font-size:14px;}
}

/* 1.4.16 - Form/font visibility hardening
   Some browsers/extensions/system dark-mode settings force saved login values to white.
   Keep all data-entry controls readable and consistent across web and extension. */
html{
  -webkit-text-size-adjust:100%;
}
body,
button,
input,
textarea,
select,
option{
  font-family:'Vazirmatn',Tahoma,Arial,sans-serif!important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select{
  color:#0f172a!important;
  -webkit-text-fill-color:#0f172a!important;
  background-color:#ffffff!important;
  caret-color:#2563eb!important;
  color-scheme:light!important;
  text-shadow:none!important;
}
input::placeholder,
textarea::placeholder{
  color:#64748b!important;
  -webkit-text-fill-color:#64748b!important;
  opacity:1!important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-text-fill-color:#0f172a!important;
  caret-color:#2563eb!important;
  -webkit-box-shadow:0 0 0 1000px #ffffff inset!important;
  box-shadow:0 0 0 1000px #ffffff inset!important;
  transition:background-color 9999s ease-out 0s!important;
  color-scheme:light!important;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="text"],
input[type="search"],
input[type="email"]{
  color:#0f172a!important;
  -webkit-text-fill-color:#0f172a!important;
  background:#ffffff!important;
}
input::-webkit-calendar-picker-indicator{
  opacity:.78;
  filter:none!important;
}
.cloud-input,
.note-due-input,
.jalali-time-input,
.setting-select,
.task-send-select,
.chat-compose input,
.chat-textarea,
.cloud-file-input{
  color:#0f172a!important;
  -webkit-text-fill-color:#0f172a!important;
  background:#ffffff!important;
  font-family:'Vazirmatn',Tahoma,Arial,sans-serif!important;
}
.cloud-file-input::file-selector-button{
  font-family:'Vazirmatn',Tahoma,Arial,sans-serif!important;
}


/* 1.4.18 - Stable overdue alarm acknowledgement across sessions and extension background. */


/* 1.4.19 - Featured microphone/record button visual emphasis. */
@keyframes voice-prominent-pulse {
  0% { transform: scale(.92); opacity: .58; box-shadow: 0 0 0 0 rgba(14, 165, 233, .42); }
  55% { transform: scale(1.22); opacity: .18; box-shadow: 0 0 0 14px rgba(14, 165, 233, 0); }
  100% { transform: scale(1.28); opacity: 0; box-shadow: 0 0 0 18px rgba(14, 165, 233, 0); }
}
@keyframes voice-prominent-glow {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 2px 7px rgba(255,255,255,.24)); }
  50% { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 3px 12px rgba(255,255,255,.45)); }
}
@keyframes voice-prominent-ring {
  0%, 100% { opacity: .72; transform: rotate(0deg) scale(1); }
  50% { opacity: 1; transform: rotate(10deg) scale(1.06); }
}
@keyframes voice-recording-wave {
  0% { transform: scale(.96); opacity:.72; box-shadow: 0 0 0 0 rgba(239,68,68,.46); }
  70% { transform: scale(1.32); opacity:.16; box-shadow: 0 0 0 17px rgba(239,68,68,0); }
  100% { transform: scale(1.38); opacity:0; box-shadow: 0 0 0 20px rgba(239,68,68,0); }
}
.voice-box .voice-button,
.compact-voice-box .voice-button {
  position: relative!important;
  isolation: isolate;
  overflow: visible!important;
  border: 1px solid rgba(255,255,255,.52)!important;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #06b6d4 100%)!important;
  color: #fff!important;
  box-shadow: 0 12px 30px rgba(37,99,235,.30), 0 0 0 4px rgba(14,165,233,.12)!important;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease!important;
}
.voice-box .voice-button::before,
.compact-voice-box .voice-button::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(14,165,233,.30) 0%, rgba(124,58,237,.16) 48%, rgba(14,165,233,0) 72%);
  z-index: -1;
  pointer-events: none;
  animation: voice-prominent-pulse 2.15s ease-out infinite;
}
.voice-box .voice-button::after,
.compact-voice-box .voice-button::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  border-inline-start-color: rgba(255,255,255,.10);
  z-index: 1;
  pointer-events: none;
  animation: voice-prominent-ring 2.4s ease-in-out infinite;
}
.voice-box .voice-button svg,
.compact-voice-box .voice-button svg {
  position: relative;
  z-index: 2;
  stroke-width: 2!important;
  animation: voice-prominent-glow 1.9s ease-in-out infinite;
}
.voice-box .voice-button:hover,
.compact-voice-box .voice-button:hover {
  transform: translateY(-2px) scale(1.06)!important;
  filter: saturate(1.12);
  box-shadow: 0 16px 36px rgba(37,99,235,.38), 0 0 0 6px rgba(14,165,233,.18)!important;
}
.voice-box .voice-button:active,
.compact-voice-box .voice-button:active {
  transform: translateY(0) scale(.98)!important;
}
.compact-voice-box {
  position: relative;
  min-width: 3.25rem!important;
}
.compact-voice-box .voice-button {
  width: 3.05rem!important;
  height: 3.05rem!important;
  min-width: 3.05rem!important;
}
.compact-voice-box .voice-button svg {
  width: 1.42rem!important;
  height: 1.42rem!important;
}
.voice-button.listening,
.voice-button.chat-recording,
.chat-mode .voice-button.listening,
.chat-mode .voice-button.chat-recording {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 48%, #fb7185 100%)!important;
  box-shadow: 0 14px 34px rgba(239,68,68,.38), 0 0 0 5px rgba(239,68,68,.15)!important;
}
.voice-button.listening::before,
.voice-button.chat-recording::before,
.chat-mode .voice-button.listening::before,
.chat-mode .voice-button.chat-recording::before {
  background: radial-gradient(circle, rgba(239,68,68,.34) 0%, rgba(249,115,22,.18) 52%, rgba(239,68,68,0) 74%);
  animation: voice-recording-wave 1.05s ease-out infinite!important;
}
.voice-button.denied {
  background: linear-gradient(135deg, #94a3b8, #64748b)!important;
  box-shadow: 0 7px 18px rgba(100,116,139,.22)!important;
}
.voice-button.denied::before,
.voice-button.denied::after {
  display: none!important;
}
@media (max-width: 720px) {
  .compact-voice-box { min-width: 3rem!important; }
  .compact-voice-box .voice-button {
    width: 2.85rem!important;
    height: 2.85rem!important;
    min-width: 2.85rem!important;
  }
  .compact-voice-box .voice-button svg {
    width: 1.32rem!important;
    height: 1.32rem!important;
  }
}


/* 1.4.20 - Flat microphone button and separate centered mobile voice control. */
@keyframes voice-flat-listening-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 18px rgba(239, 68, 68, .22); }
  50% { transform: scale(1.04); box-shadow: 0 10px 24px rgba(239, 68, 68, .32); }
}
.voice-box .voice-button,
.compact-voice-box .voice-button,
.chat-mode .voice-button {
  position: relative!important;
  isolation: auto!important;
  overflow: hidden!important;
  border: 0!important;
  background: #2563eb!important;
  color: #ffffff!important;
  box-shadow: 0 7px 16px rgba(37, 99, 235, .22)!important;
  filter: none!important;
  transform: none!important;
  transition: background-color .18s ease, box-shadow .18s ease, transform .16s ease!important;
}
.voice-box .voice-button::before,
.voice-box .voice-button::after,
.compact-voice-box .voice-button::before,
.compact-voice-box .voice-button::after,
.chat-mode .voice-button::before,
.chat-mode .voice-button::after {
  display: none!important;
  content: none!important;
  animation: none!important;
}
.voice-box .voice-button svg,
.compact-voice-box .voice-button svg,
.chat-mode .voice-button svg {
  position: relative!important;
  z-index: 1!important;
  fill: currentColor!important;
  stroke: none!important;
  animation: none!important;
  filter: none!important;
}
.voice-box .voice-button:hover,
.compact-voice-box .voice-button:hover,
.chat-mode .voice-button:hover {
  background: #1d4ed8!important;
  transform: translateY(-1px)!important;
  box-shadow: 0 9px 20px rgba(37, 99, 235, .26)!important;
}
.voice-box .voice-button:active,
.compact-voice-box .voice-button:active,
.chat-mode .voice-button:active {
  transform: scale(.97)!important;
}
.voice-button.listening,
.voice-button.chat-recording,
.chat-mode .voice-button.listening,
.chat-mode .voice-button.chat-recording {
  background: #ef4444!important;
  box-shadow: 0 8px 20px rgba(239, 68, 68, .28)!important;
  animation: voice-flat-listening-pulse 1.15s ease-in-out infinite!important;
}
.voice-button.denied,
.chat-mode .voice-button.denied {
  background: #94a3b8!important;
  box-shadow: 0 5px 12px rgba(100, 116, 139, .18)!important;
  animation: none!important;
}
.compact-voice-box .voice-button {
  width: 2.75rem!important;
  height: 2.75rem!important;
  min-width: 2.75rem!important;
}
.compact-voice-box .voice-button svg {
  width: 1.42rem!important;
  height: 1.42rem!important;
}
@media (max-width: 640px) {
  .app-shell .input-section .text-input-card.compact-composer,
  .text-input-card.compact-composer {
    display: grid!important;
    grid-template-columns: 44px minmax(0, 1fr) 44px!important;
    grid-template-areas:
      "input input input"
      "due add file"
      "voice voice voice"!important;
    align-items: center!important;
    gap: 7px!important;
    padding: 9px!important;
  }
  .compact-composer #noteInput,
  #noteInput {
    grid-area: input!important;
    width: 100%!important;
  }
  .compact-due-field {
    grid-area: due!important;
    justify-self: start!important;
  }
  .main-chat-file-button {
    grid-area: file!important;
    justify-self: end!important;
  }
  #addButton {
    grid-area: add!important;
    justify-self: stretch!important;
    width: 100%!important;
  }
  .compact-voice-box {
    grid-area: voice!important;
    width: 100%!important;
    min-width: 0!important;
    justify-self: stretch!important;
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    padding: 9px 0 1px!important;
    margin-top: 2px!important;
    border-top: 1px solid rgba(148, 163, 184, .22)!important;
  }
  .compact-voice-box .voice-button {
    width: 3.15rem!important;
    height: 3.15rem!important;
    min-width: 3.15rem!important;
    border-radius: 999px!important;
  }
  .compact-voice-box .voice-button svg {
    width: 1.58rem!important;
    height: 1.58rem!important;
  }
}
body.chat-mode .compact-due-field,
body.chat-mode #duePickerButton {
  display: none !important;
}


/* 1.4.21 - Telegram-style composer send button and one-line mobile composer. */
.text-input-card.compact-composer {
  border-radius: 999px;
  padding: 0.42rem 0.48rem;
}
.text-input-card.compact-composer #noteInput {
  border-radius: 999px;
}
#addButton {
  width: 2.72rem!important;
  height: 2.72rem!important;
  min-width: 2.72rem!important;
  padding: 0!important;
  border-radius: 999px!important;
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  font-size: 0!important;
  line-height: 1!important;
  background: #229ed9!important;
  color: #fff!important;
  box-shadow: 0 8px 18px rgba(34, 158, 217, .28)!important;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease!important;
}
#addButton::after {
  content: '➤';
  display: block;
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1;
  transform: scaleX(-1) translateX(1px);
}
html[dir="ltr"] #addButton::after {
  transform: translateX(1px);
}
#addButton:hover {
  background: #1d8ec4!important;
  transform: translateY(-1px)!important;
  box-shadow: 0 10px 22px rgba(34, 158, 217, .34)!important;
}
#addButton:active {
  transform: scale(.96)!important;
}
.add-due-picker-button {
  width: 2.72rem!important;
  height: 2.72rem!important;
  min-width: 2.72rem!important;
  border-radius: 999px!important;
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
}
.compact-voice-box {
  width: auto!important;
  min-width: 2.72rem!important;
  padding: 0!important;
  margin: 0!important;
  border-top: 0!important;
}
.compact-voice-box .voice-button {
  width: 2.72rem!important;
  height: 2.72rem!important;
  min-width: 2.72rem!important;
}
@media (max-width: 640px) {
  .app-shell .input-section .text-input-card.compact-composer,
  .text-input-card.compact-composer {
    display: flex!important;
    flex-direction: row!important;
    flex-wrap: nowrap!important;
    grid-template-columns: none!important;
    grid-template-areas: none!important;
    align-items: center!important;
    gap: 5px!important;
    padding: 7px!important;
    border-radius: 999px!important;
    overflow: visible!important;
  }
  .compact-composer #noteInput,
  #noteInput {
    grid-area: auto!important;
    flex: 1 1 auto!important;
    min-width: 0!important;
    width: auto!important;
    min-height: 2.45rem!important;
    padding-inline: .55rem!important;
  }
  .compact-due-field {
    grid-area: auto!important;
    flex: 0 0 auto!important;
    justify-self: auto!important;
    width: auto!important;
  }
  .compact-voice-box {
    grid-area: auto!important;
    flex: 0 0 2.45rem!important;
    width: 2.45rem!important;
    min-width: 2.45rem!important;
    justify-self: auto!important;
    justify-content: center!important;
    padding: 0!important;
    margin: 0!important;
    border-top: 0!important;
  }
  .compact-voice-box .voice-button,
  .add-due-picker-button,
  #addButton {
    width: 2.45rem!important;
    height: 2.45rem!important;
    min-width: 2.45rem!important;
    flex: 0 0 2.45rem!important;
  }
  .compact-voice-box .voice-button svg {
    width: 1.22rem!important;
    height: 1.22rem!important;
  }
  #addButton::after {
    font-size: 1.14rem!important;
  }
  .main-chat-file-button {
    grid-area: auto!important;
    flex: 0 0 2.35rem!important;
    width: 2.35rem!important;
    min-width: 2.35rem!important;
    height: 2.35rem!important;
    padding: 0!important;
    border-radius: 999px!important;
    align-items: center!important;
    justify-content: center!important;
  }
}



/* 1.4.23 - Theme switch: light is the default, dark is opt-in from Settings. */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f1f5f9;
  --card:#ffffff;
  --text:#1e293b;
  --muted:#64748b;
  --muted-light:#94a3b8;
  --border:#cbd5e1;
  --filter-bg:#e2e8f0;
  --filter-hover:#cbd5e1;
  --primary:#3b82f6;
  --primary-hover:#2563eb;
  --danger:#ef4444;
  --success-bg:#dcfce7;
  --alarm-bg:rgba(239,68,68,.14);
  --alarm-border:rgba(239,68,68,.45);
  --shadow:0 4px 12px rgba(15,23,42,.12);
}
html[data-theme="light"] body{background:var(--bg)!important;color:var(--text)!important;}
html[data-theme="light"] body::before{display:none!important;}
html[data-theme="light"] .header h1::after,
html[data-theme="light"] .header::before{display:none!important;}

/* 1.4.22 - Premium dark voice-gradient application theme inspired by the approved microphone concept. */
html[data-theme="dark"]{
  color-scheme: dark;
  --bg:#07111f;
  --bg-2:#0a1730;
  --card:rgba(15, 30, 58, .76);
  --card-strong:rgba(18, 35, 66, .94);
  --text:#f8fbff;
  --muted:#a9b8d8;
  --muted-light:#7183aa;
  --border:rgba(126, 151, 197, .22);
  --filter-bg:rgba(22, 41, 78, .72);
  --filter-hover:rgba(41, 75, 132, .84);
  --primary:#20c4ef;
  --primary-hover:#7c5cff;
  --danger:#fb7185;
  --success-bg:rgba(34,197,94,.13);
  --alarm-bg:rgba(251,113,133,.12);
  --alarm-border:rgba(251,113,133,.42);
  --shadow:0 18px 46px rgba(0,0,0,.35);
  --voice-grad:linear-gradient(135deg,#21d4fd 0%,#3877ff 42%,#8b5cf6 74%,#13c7d6 100%);
  --voice-glow:0 14px 34px rgba(34,211,238,.25),0 0 0 8px rgba(99,102,241,.10),0 0 42px rgba(139,92,246,.22);
}
html[data-theme="dark"],html[data-theme="dark"] body{background:#07111f!important;color:var(--text)!important;}
html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 88% 8%,rgba(34,211,238,.19),transparent 30%),
    radial-gradient(circle at 12% 85%,rgba(124,58,237,.18),transparent 34%),
    linear-gradient(180deg,#07111f 0%,#09162b 52%,#050b18 100%)!important;
  text-rendering:optimizeLegibility;
}
html[data-theme="dark"] body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(130deg,rgba(255,255,255,.035),transparent 36%,rgba(96,165,250,.035));
  opacity:.85;
  z-index:-1;
}
html[data-theme="dark"] .app-shell{background:transparent!important;}
html[data-theme="dark"] .header{
  position:relative;
  padding:1rem .35rem .6rem!important;
  text-align:right!important;
}
html[data-theme="dark"] .header h1{
  font-size:1.72rem!important;
  line-height:1.35!important;
  color:#fff!important;
  text-shadow:0 8px 26px rgba(59,130,246,.22);
}
html[data-theme="dark"] .header h1::after{
  content:"برنامه‌ریزی هوشمند، انجام آسان";
  display:block;
  margin-top:.2rem;
  font-size:.78rem;
  font-weight:700;
  color:#93a9d8;
}
html[data-theme="dark"] .header::before{
  content:"✓";
  position:absolute;
  left:.35rem;
  top:.75rem;
  width:3rem;
  height:3rem;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:1000;
  font-size:1.45rem;
  background:var(--voice-grad);
  box-shadow:var(--voice-glow);
}
html[data-theme="dark"] .filters,html[data-theme="dark"] .settings-card,html[data-theme="dark"] .calendar-planner,html[data-theme="dark"] .text-input-card,html[data-theme="dark"] .note-item,html[data-theme="dark"] .account-tab-card,html[data-theme="dark"] .cloud-card,html[data-theme="dark"] .professional-login-card,html[data-theme="dark"] .login-hero-box,html[data-theme="dark"] .chat-tab-card .chat-collaborators,html[data-theme="dark"] .chat-tab-card .chat-body,html[data-theme="dark"] .chat-body,html[data-theme="dark"] .cloud-list,html[data-theme="dark"] .cloud-subsection,html[data-theme="dark"] .notification-task-card{
  background:linear-gradient(145deg,rgba(17,34,64,.86),rgba(8,18,37,.78))!important;
  border:1px solid rgba(134,160,207,.20)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.31), inset 0 1px 0 rgba(255,255,255,.055)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
html[data-theme="dark"] .filters{
  border-radius:1.25rem!important;
  padding:.42rem!important;
  gap:.35rem!important;
}
html[data-theme="dark"] .filter-button{
  border:1px solid rgba(148,163,184,.16)!important;
  background:rgba(20,39,75,.72)!important;
  color:#afc0e2!important;
  border-radius:999px!important;
  font-weight:900!important;
}
html[data-theme="dark"] .filter-button:hover{background:rgba(42,73,128,.78)!important;color:#fff!important;}
html[data-theme="dark"] .filter-button.active{
  background:linear-gradient(135deg,#22d3ee,#3b82f6 48%,#8b5cf6)!important;
  color:#fff!important;
  box-shadow:0 10px 26px rgba(34,211,238,.22),0 0 0 1px rgba(255,255,255,.12) inset!important;
}
html[data-theme="dark"] .notes-area{scrollbar-color:#35baf3 rgba(255,255,255,.08);}
html[data-theme="dark"] .note-item{
  position:relative;
  border-radius:1.35rem!important;
  overflow:hidden;
}
html[data-theme="dark"] .note-item::after{
  content:"";
  position:absolute;
  inset-inline-end:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,#22d3ee,#8b5cf6);
  opacity:.9;
}
html[data-theme="dark"] .note-item.completed::after{background:linear-gradient(180deg,#34d399,#22c55e);}
html[data-theme="dark"] .note-item.due-overdue::after{background:linear-gradient(180deg,#fb7185,#f97316);}
html[data-theme="dark"] .note-text{color:#f8fbff!important;font-weight:900!important;}
html[data-theme="dark"] .note-time,html[data-theme="dark"] .note-due,html[data-theme="dark"] .note-meta,html[data-theme="dark"] .assignment-meta,html[data-theme="dark"] .cloud-list-meta,html[data-theme="dark"] small{color:#9fb0d1!important;}
html[data-theme="dark"] .note-item.completed{background:linear-gradient(145deg,rgba(22,101,52,.25),rgba(10,25,47,.80))!important;border-color:rgba(74,222,128,.25)!important;box-shadow:0 16px 42px rgba(0,0,0,.28),0 0 25px rgba(34,197,94,.11)!important;}
html[data-theme="dark"] .note-item.completed .note-text{color:#aeb9cc!important;}
html[data-theme="dark"] .note-item.due-overdue,html[data-theme="dark"] .overdue-muted-card{background:linear-gradient(145deg,rgba(127,29,29,.26),rgba(10,25,47,.82))!important;border-color:rgba(251,113,133,.32)!important;}
html[data-theme="dark"] .note-checkbox{accent-color:#22d3ee!important;}
html[data-theme="dark"] .task-drag-handle,html[data-theme="dark"] .date-picker-button,html[data-theme="dark"] .cloud-button,html[data-theme="dark"] .setting-action-button,html[data-theme="dark"] .chat-tool-button,html[data-theme="dark"] .delete-button,html[data-theme="dark"] .task-inline-button,html[data-theme="dark"] .assignment-info-button,html[data-theme="dark"] .chat-person-button,html[data-theme="dark"] .login-mode-tab,html[data-theme="dark"] .chat-back-button{
  background:rgba(30,52,91,.82)!important;
  border:1px solid rgba(139,164,207,.23)!important;
  color:#dce8ff!important;
  box-shadow:0 8px 20px rgba(0,0,0,.18)!important;
}
html[data-theme="dark"] .cloud-button:hover,html[data-theme="dark"] .date-picker-button:hover,html[data-theme="dark"] .setting-action-button:hover,html[data-theme="dark"] .chat-tool-button:hover,html[data-theme="dark"] .chat-person-button:hover,html[data-theme="dark"] .task-inline-button:hover,html[data-theme="dark"] .assignment-info-button:hover{
  background:linear-gradient(135deg,rgba(34,211,238,.24),rgba(139,92,246,.28))!important;
  color:#fff!important;
}
html[data-theme="dark"] .cloud-button.primary,html[data-theme="dark"] .login-mode-tab.active,html[data-theme="dark"] .chat-person-button.active{
  background:linear-gradient(135deg,#22d3ee,#3b82f6 50%,#8b5cf6)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.18)!important;
}
html[data-theme="dark"] .settings-toggle{background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(139,92,246,.18))!important;border:1px solid rgba(139,164,207,.22)!important;color:#fff!important;}
html[data-theme="dark"] .settings-version-badge{background:rgba(34,211,238,.10)!important;border-color:rgba(34,211,238,.20)!important;color:#bfeaff!important;}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select,html[data-theme="dark"] .cloud-input,html[data-theme="dark"] .setting-select{
  background:rgba(7,18,35,.78)!important;
  border:1px solid rgba(139,164,207,.25)!important;
  color:#f8fbff!important;
  caret-color:#22d3ee!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#7183aa!important;opacity:1!important;}
html[data-theme="dark"] input:-webkit-autofill,html[data-theme="dark"] input:-webkit-autofill:hover,html[data-theme="dark"] input:-webkit-autofill:focus,html[data-theme="dark"] textarea:-webkit-autofill,html[data-theme="dark"] select:-webkit-autofill{
  -webkit-text-fill-color:#f8fbff!important;
  box-shadow:0 0 0 1000px #071a35 inset!important;
  caret-color:#22d3ee!important;
  border-color:rgba(34,211,238,.32)!important;
}
html[data-theme="dark"] .input-section{
  background:linear-gradient(180deg,rgba(7,17,31,0),rgba(7,17,31,.95) 32%,rgba(7,17,31,.98))!important;
}
html[data-theme="dark"] .text-input-card.compact-composer{
  border-radius:999px!important;
  background:linear-gradient(145deg,rgba(18,35,66,.90),rgba(9,20,40,.92))!important;
  border:1px solid rgba(139,164,207,.24)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.43),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
html[data-theme="dark"] .text-input-card.compact-composer #noteInput{background:rgba(9,20,40,.62)!important;border-color:rgba(139,164,207,.18)!important;color:#fff!important;}
html[data-theme="dark"] #addButton{
  background:linear-gradient(135deg,#22d3ee,#3b82f6 52%,#8b5cf6)!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(34,211,238,.24),0 0 24px rgba(139,92,246,.18)!important;
}
html[data-theme="dark"] #addButton:hover{background:linear-gradient(135deg,#67e8f9,#3b82f6 48%,#a78bfa)!important;box-shadow:0 15px 34px rgba(34,211,238,.30),0 0 30px rgba(139,92,246,.24)!important;}
html[data-theme="dark"] .date-picker-button,html[data-theme="dark"] .add-due-picker-button{background:rgba(31,50,85,.90)!important;color:#fff!important;}
@keyframes voice-theme-breathe{0%,100%{transform:scale(1);filter:saturate(1)}50%{transform:scale(1.045);filter:saturate(1.15)}}
@keyframes voice-theme-listen{0%,100%{box-shadow:0 12px 28px rgba(251,113,133,.28),0 0 0 5px rgba(251,113,133,.10)}50%{box-shadow:0 16px 38px rgba(251,113,133,.42),0 0 0 9px rgba(251,113,133,.08)}}
html[data-theme="dark"] .voice-box .voice-button,html[data-theme="dark"] .compact-voice-box .voice-button,html[data-theme="dark"] .chat-mode .voice-button{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  border:1px solid rgba(255,255,255,.22)!important;
  background:var(--voice-grad)!important;
  color:#fff!important;
  box-shadow:var(--voice-glow)!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
  animation:voice-theme-breathe 3.1s ease-in-out infinite!important;
}
html[data-theme="dark"] .voice-box .voice-button::before,html[data-theme="dark"] .compact-voice-box .voice-button::before,html[data-theme="dark"] .chat-mode .voice-button::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-8px!important;
  border-radius:inherit!important;
  background:radial-gradient(circle,rgba(34,211,238,.26),rgba(139,92,246,.13) 45%,transparent 70%)!important;
  z-index:-1!important;
  pointer-events:none!important;
}
html[data-theme="dark"] .voice-box .voice-button::after,html[data-theme="dark"] .compact-voice-box .voice-button::after,html[data-theme="dark"] .chat-mode .voice-button::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  bottom:-9px!important;
  width:3px!important;
  height:12px!important;
  border-radius:999px!important;
  transform:translateX(-50%)!important;
  background:#67e8f9!important;
  box-shadow:-14px 4px 0 -1px #8b5cf6,-9px 1px 0 0 #a78bfa,-5px 5px 0 -1px #60a5fa,5px 2px 0 0 #38bdf8,10px 5px 0 -1px #a78bfa,15px 1px 0 0 #67e8f9!important;
  opacity:.92!important;
  z-index:2!important;
  pointer-events:none!important;
}
html[data-theme="dark"] .voice-box .voice-button svg,html[data-theme="dark"] .compact-voice-box .voice-button svg,html[data-theme="dark"] .chat-mode .voice-button svg{
  position:relative!important;
  z-index:3!important;
  color:#fff!important;
  fill:currentColor!important;
  filter:drop-shadow(0 3px 9px rgba(255,255,255,.22))!important;
}
html[data-theme="dark"] .voice-box .voice-button:hover,html[data-theme="dark"] .compact-voice-box .voice-button:hover,html[data-theme="dark"] .chat-mode .voice-button:hover{transform:translateY(-1px) scale(1.045)!important;box-shadow:0 16px 38px rgba(34,211,238,.31),0 0 0 9px rgba(139,92,246,.11),0 0 48px rgba(139,92,246,.26)!important;}
html[data-theme="dark"] .voice-button.listening,html[data-theme="dark"] .voice-button.chat-recording,html[data-theme="dark"] .chat-mode .voice-button.listening,html[data-theme="dark"] .chat-mode .voice-button.chat-recording{
  background:linear-gradient(135deg,#fb7185,#ef4444 48%,#f97316)!important;
  animation:voice-theme-listen 1.1s ease-in-out infinite!important;
}
html[data-theme="dark"] .voice-button.denied,html[data-theme="dark"] .chat-mode .voice-button.denied{background:linear-gradient(135deg,#64748b,#475569)!important;animation:none!important;}
html[data-theme="dark"] .chat-bubble{background:rgba(24,42,78,.90)!important;color:#eef6ff!important;border:1px solid rgba(139,164,207,.17)!important;}
html[data-theme="dark"] .chat-message.mine .chat-bubble{background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(59,130,246,.24))!important;}
html[data-theme="dark"] .alarm-card{background:linear-gradient(145deg,rgba(15,30,58,.96),rgba(7,17,31,.97))!important;border:1px solid rgba(251,113,133,.34)!important;color:#fff!important;box-shadow:0 24px 70px rgba(0,0,0,.55)!important;}
html[data-theme="dark"] .alarm-overlay{background:rgba(1,6,18,.76)!important;backdrop-filter:blur(10px)!important;}
html[data-theme="dark"] .alarm-task-list{background:rgba(255,255,255,.035)!important;border-radius:18px!important;}
html[data-theme="dark"] #alarmDismissButton{background:linear-gradient(135deg,#22d3ee,#3b82f6 50%,#8b5cf6)!important;color:#fff!important;border:0!important;box-shadow:0 12px 30px rgba(34,211,238,.22)!important;}
html[data-theme="dark"] .app-footer{color:#7890bc!important;}
html[data-theme="dark"] .login-hero-box,html[data-theme="dark"] .professional-login-card{background:linear-gradient(145deg,rgba(17,34,64,.92),rgba(8,18,37,.86))!important;color:#fff!important;}
html[data-theme="dark"] .login-feature-list span,html[data-theme="dark"] .password-subsection,html[data-theme="dark"] .chat-group-create,html[data-theme="dark"] .chat-group-member,html[data-theme="dark"] .cloud-profile-complete .profile-row{background:rgba(255,255,255,.045)!important;border-color:rgba(139,164,207,.18)!important;color:#dfeaff!important;}
html[data-theme="dark"] .password-section-title,html[data-theme="dark"] .chat-side-title,html[data-theme="dark"] .cloud-profile-complete h3,html[data-theme="dark"] .cloud-list-title{color:#f8fbff!important;}
html[data-theme="dark"] .main-notifications-title{color:#f8fbff!important;}
html[data-theme="dark"] .notification-task-body p{color:#f8fbff!important;}
@media (max-width:640px){
  html[data-theme="dark"] .header::before{width:2.55rem;height:2.55rem;font-size:1.18rem;top:.7rem;}
  html[data-theme="dark"] .header h1{font-size:1.38rem!important;}
  html[data-theme="dark"] .text-input-card.compact-composer{padding:7px!important;gap:5px!important;}
  html[data-theme="dark"] .compact-voice-box .voice-button::after{bottom:-7px!important;transform:translateX(-50%) scale(.82)!important;}
  html[data-theme="dark"] .compact-voice-box .voice-button,html[data-theme="dark"] .add-due-picker-button,html[data-theme="dark"] #addButton{width:2.48rem!important;height:2.48rem!important;min-width:2.48rem!important;flex-basis:2.48rem!important;}
  html[data-theme="dark"] .compact-voice-box .voice-button svg{width:1.18rem!important;height:1.18rem!important;}
}

/* 1.4.23 - Complete dark coverage for settings, collaborators, sessions and form controls. */
html[data-theme="dark"] .setting-row,
html[data-theme="dark"] .settings-panel,
html[data-theme="dark"] .setting-select-row,
html[data-theme="dark"] .setting-volume-row,
html[data-theme="dark"] .settings-help,
html[data-theme="dark"] .collaborators-management,
html[data-theme="dark"] .collaborator-row,
html[data-theme="dark"] .collaborator-card,
html[data-theme="dark"] .collaborator-list,
html[data-theme="dark"] .collaborator-item,
html[data-theme="dark"] .sessions-subsection,
html[data-theme="dark"] .session-row,
html[data-theme="dark"] .install-prompt-card,
html[data-theme="dark"] .cloud-profile-complete,
html[data-theme="dark"] .profile-row,
html[data-theme="dark"] .cloud-section,
html[data-theme="dark"] .cloud-subsection,
html[data-theme="dark"] .cloud-list-item,
html[data-theme="dark"] .cloud-list-row,
html[data-theme="dark"] .chat-group-create,
html[data-theme="dark"] .chat-group-member,
html[data-theme="dark"] .chat-collaborators,
html[data-theme="dark"] .chat-side-panel{
  background:linear-gradient(145deg,rgba(17,34,64,.88),rgba(8,18,37,.82))!important;
  border-color:rgba(139,164,207,.22)!important;
  color:#e8f0ff!important;
}
html[data-theme="dark"] .setting-row span,
html[data-theme="dark"] .setting-row strong,
html[data-theme="dark"] .settings-help,
html[data-theme="dark"] .session-info,
html[data-theme="dark"] .session-info *,
html[data-theme="dark"] .collaborator-row *,
html[data-theme="dark"] .collaborator-card *,
html[data-theme="dark"] .cloud-profile-complete *,
html[data-theme="dark"] .profile-row *,
html[data-theme="dark"] .chat-group-create *,
html[data-theme="dark"] .chat-group-member *,
html[data-theme="dark"] .cloud-list-item *,
html[data-theme="dark"] .cloud-list-row *{
  color:inherit!important;
}
html[data-theme="dark"] select option{background:#0b1730!important;color:#f8fbff!important;}
html[data-theme="dark"] .setting-select,
html[data-theme="dark"] .task-send-select,
html[data-theme="dark"] .cloud-input,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background:#0b1730!important;
  color:#f8fbff!important;
  border-color:rgba(139,164,207,.32)!important;
}
html[data-theme="dark"] .setting-volume-slider{accent-color:#22d3ee!important;}
html[data-theme="dark"] .settings-theme-row{align-items:center;}
html[data-theme="dark"] .theme-select{background:#0b1730!important;color:#f8fbff!important;}
html[data-theme="dark"] .chat-last-message,
html[data-theme="dark"] .cloud-list-meta,
html[data-theme="dark"] .note-meta,
html[data-theme="dark"] .session-meta{color:#9fb0d1!important;}


/* 1.4.24 - Task quick filters and organized settings submenus */
.task-quick-filters-host{
  position:sticky;
  top:0;
  z-index:30;
  margin:0 0 12px;
}
.task-quick-filters-host[hidden]{display:none!important}
.task-quick-filters-host .task-quick-filters{margin:0;}
.task-quick-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
  padding:8px;
  border-radius:18px;
  background:rgba(148,163,184,.12);
  border:1px solid rgba(148,163,184,.18);
}
.task-quick-filter-button{
  border:1px solid rgba(148,163,184,.28);
  background:#fff;
  color:#334155;
  border-radius:999px;
  padding:8px 13px;
  font:inherit;
  font-size:.9rem;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.task-quick-filter-button:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.08)}
.task-quick-filter-button.active{
  background:linear-gradient(135deg,#16c7e8,#7c3aed);
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 26px rgba(59,130,246,.24);
}
.settings-submenu{
  border:1px solid rgba(148,163,184,.22);
  border-radius:20px;
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  overflow:hidden;
  margin:12px 0;
}
.settings-submenu-summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  font-weight:800;
  color:#0f172a;
}
.settings-submenu-summary::-webkit-details-marker{display:none}
.settings-submenu-arrow{transition:transform .2s ease;color:#64748b;font-size:.95rem}
.settings-submenu[open] .settings-submenu-arrow{transform:rotate(180deg)}
.settings-submenu-body{padding:0 14px 14px}
.settings-submenu-body>.cloud-subsection,
.settings-submenu-body>.settings-card,
.settings-submenu-body>.cloud-account-row,
.settings-submenu-body>.install-prompt-card{margin:0;box-shadow:none;background:transparent;border-color:rgba(148,163,184,.18)}
.settings-submenu-body>.settings-card{padding:0;border:0;background:transparent}
.settings-submenu-body .settings-panel{display:grid;gap:10px}
html[data-theme="dark"] .task-quick-filters,
body.dark-theme .task-quick-filters{
  background:rgba(15,23,42,.52);
  border-color:rgba(96,165,250,.16);
}
html[data-theme="dark"] .task-quick-filter-button,
body.dark-theme .task-quick-filter-button{
  background:rgba(15,23,42,.74);
  color:#dbeafe;
  border-color:rgba(125,211,252,.18);
}
html[data-theme="dark"] .task-quick-filter-button.active,
body.dark-theme .task-quick-filter-button.active{
  background:linear-gradient(135deg,#16c7e8,#7c3aed);
  color:#fff;
  box-shadow:0 14px 34px rgba(59,130,246,.36);
}
html[data-theme="dark"] .settings-submenu,
body.dark-theme .settings-submenu{
  background:rgba(8,16,36,.72);
  border-color:rgba(96,165,250,.18);
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
html[data-theme="dark"] .settings-submenu-summary,
body.dark-theme .settings-submenu-summary{color:#f8fafc}
html[data-theme="dark"] .settings-submenu-arrow,
body.dark-theme .settings-submenu-arrow{color:#93c5fd}
html[data-theme="dark"] .settings-submenu-body>.cloud-subsection,
html[data-theme="dark"] .settings-submenu-body>.cloud-account-row,
html[data-theme="dark"] .settings-submenu-body>.install-prompt-card,
body.dark-theme .settings-submenu-body>.cloud-subsection,
body.dark-theme .settings-submenu-body>.cloud-account-row,
body.dark-theme .settings-submenu-body>.install-prompt-card{background:rgba(15,23,42,.28);border-color:rgba(96,165,250,.14)}
@media (max-width:640px){
  .task-quick-filters{flex-wrap:nowrap;overflow-x:auto;padding:8px;margin-inline:-2px;scrollbar-width:none}
  .task-quick-filters::-webkit-scrollbar{display:none}
  .task-quick-filter-button{white-space:nowrap;padding:8px 12px;font-size:.84rem}
  .settings-submenu-summary{padding:13px 14px}
  .settings-submenu-body{padding:0 10px 12px}
}


/* 1.4.25 - Fixed task quick-filter host and deeper dark-theme coverage for settings/collaborators. */
.task-quick-filters-host{
  position:sticky;
  top:0;
  z-index:35;
  margin:0 0 12px;
  padding-top:2px;
}
.task-quick-filters-host[hidden]{display:none!important;}
.task-quick-filters-host .task-quick-filters{margin:0;box-shadow:0 10px 26px rgba(15,23,42,.06);}
html[data-theme="dark"] .task-quick-filters-host .task-quick-filters{box-shadow:0 14px 36px rgba(0,0,0,.32),0 0 26px rgba(34,211,238,.05);}

html[data-theme="dark"] .app-settings-menu .settings-panel,
html[data-theme="dark"] .app-settings-menu .setting-row,
html[data-theme="dark"] .app-settings-menu .setting-select-row,
html[data-theme="dark"] .app-settings-menu .setting-volume-row,
html[data-theme="dark"] .app-settings-menu .settings-help,
html[data-theme="dark"] .collaborator-add-card,
html[data-theme="dark"] .collaborator-list-card{
  background:linear-gradient(145deg,rgba(17,34,64,.92),rgba(8,18,37,.86))!important;
  color:#edf5ff!important;
  border-color:rgba(125,211,252,.20)!important;
}
html[data-theme="dark"] .app-settings-menu .settings-panel{border:1px solid rgba(125,211,252,.16)!important;border-radius:18px!important;padding:12px!important;}
html[data-theme="dark"] .app-settings-menu .setting-row span,
html[data-theme="dark"] .app-settings-menu .setting-row strong,
html[data-theme="dark"] .app-settings-menu .settings-help,
html[data-theme="dark"] .collaborator-add-card h3,
html[data-theme="dark"] .collaborator-list-card h3,
html[data-theme="dark"] .collaborator-name-help{
  color:#edf5ff!important;
}
html[data-theme="dark"] .app-settings-menu .setting-select,
html[data-theme="dark"] .app-settings-menu .theme-select,
html[data-theme="dark"] .app-settings-menu select,
html[data-theme="dark"] .collaborator-add-form .cloud-input,
html[data-theme="dark"] #cloudCollaboratorName,
html[data-theme="dark"] #cloudCollaboratorMobile{
  background:#08172f!important;
  color:#f8fbff!important;
  border-color:rgba(125,211,252,.32)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)!important;
}
html[data-theme="dark"] .app-settings-menu .setting-select option,
html[data-theme="dark"] .app-settings-menu .theme-select option{background:#08172f!important;color:#f8fbff!important;}
html[data-theme="dark"] .collaborator-row .cloud-badge,
html[data-theme="dark"] .cloud-badge{
  background:rgba(34,211,238,.10)!important;
  color:#c7f5ff!important;
  border:1px solid rgba(34,211,238,.22)!important;
}
html[data-theme="dark"] .collaborator-row .cloud-row-actions .cloud-button:not(.primary):not(.danger){background:rgba(15,23,42,.74)!important;color:#dbeafe!important;border-color:rgba(125,211,252,.18)!important;}
html[data-theme="dark"] .collaborator-list-card .cloud-empty{color:#9fb0d1!important;}
@media (max-width:640px){
  .task-quick-filters-host{top:0;margin-bottom:10px;}
}


/* 1.4.26 - Compact task filter, fixed dark select text, cleaner dark header and microphone. */
.cloud-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.cloud-header-version{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
  color:#475569;
  background:rgba(148,163,184,.14);
  border:1px solid rgba(148,163,184,.22);
  white-space:nowrap;
}
html[data-theme="dark"] .cloud-header-version{
  color:#dff7ff!important;
  background:rgba(34,211,238,.10)!important;
  border-color:rgba(34,211,238,.24)!important;
}
.task-quick-filters-host{
  position:sticky;
  top:0;
  z-index:35;
  margin:0 0 8px;
  padding:0;
  min-height:0;
}
.task-quick-filter-shell{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
}
html[dir="rtl"] .task-quick-filter-shell{align-items:flex-end;}
.task-quick-filter-toggle{
  appearance:none;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.86);
  color:#334155;
  border-radius:999px;
  padding:7px 12px;
  font:inherit;
  font-size:.82rem;
  font-weight:900;
  line-height:1.3;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(15,23,42,.06);
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.task-quick-filter-toggle::before{content:"🔎";margin-inline-end:6px;font-size:.9em;}
.task-quick-filter-toggle.has-active-filter{
  background:linear-gradient(135deg,#16c7e8,#7c3aed);
  color:#fff;
  border-color:transparent;
}
.task-quick-filter-toggle:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.10)}
.task-quick-filter-shell.collapsed .task-quick-filters{display:none!important;}
.task-quick-filter-shell.expanded .task-quick-filters{
  width:100%;
  margin:0;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
}
html[data-theme="dark"] .task-quick-filter-toggle,
body.dark-theme .task-quick-filter-toggle{
  background:rgba(15,23,42,.74)!important;
  color:#dbeafe!important;
  border-color:rgba(125,211,252,.22)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.22)!important;
}
html[data-theme="dark"] .task-quick-filter-toggle.has-active-filter,
body.dark-theme .task-quick-filter-toggle.has-active-filter{
  background:linear-gradient(135deg,#16c7e8,#7c3aed)!important;
  color:#fff!important;
  border-color:transparent!important;
}
html[data-theme="dark"] .header{
  padding:0.15rem 0 0.25rem!important;
  text-align:center!important;
}
html[data-theme="dark"] .header h1{
  font-size:clamp(1.05rem,2.4vw,1.35rem)!important;
  line-height:1.7!important;
  font-weight:800!important;
  color:var(--muted)!important;
  text-shadow:none!important;
}
html[data-theme="dark"] .header h1::after,
html[data-theme="dark"] .header::before{
  content:none!important;
  display:none!important;
}
html[data-theme="dark"] .voice-box .voice-button::after,
html[data-theme="dark"] .compact-voice-box .voice-button::after,
html[data-theme="dark"] .chat-mode .voice-button::after{
  content:none!important;
  display:none!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .voice-box .voice-button,
html[data-theme="dark"] .compact-voice-box .voice-button,
html[data-theme="dark"] .chat-mode .voice-button{
  overflow:hidden!important;
}
html[data-theme="dark"] .voice-box .voice-button::before,
html[data-theme="dark"] .compact-voice-box .voice-button::before,
html[data-theme="dark"] .chat-mode .voice-button::before{
  inset:-5px!important;
}
html[data-theme="dark"] select,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .setting-select,
html[data-theme="dark"] .setting-select:focus,
html[data-theme="dark"] .theme-select,
html[data-theme="dark"] .theme-select:focus,
html[data-theme="dark"] #settingLanguage,
html[data-theme="dark"] #settingTheme{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background-color:#08172f!important;
  background-image:none!important;
  opacity:1!important;
}
html[data-theme="dark"] select option,
html[data-theme="dark"] .setting-select option,
html[data-theme="dark"] .theme-select option,
html[data-theme="dark"] #settingLanguage option,
html[data-theme="dark"] #settingTheme option{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:#08172f!important;
}
@media (max-width:640px){
  .task-quick-filter-toggle{font-size:.78rem;padding:6px 10px;}
  .task-quick-filter-shell.expanded .task-quick-filters{flex-wrap:nowrap;overflow-x:auto;padding:7px;}
}

/* 1.4.27 - Floating compact task filters: no permanent list-space usage. */
.main{position:relative;}
.task-quick-filters-host{
  position:sticky!important;
  top:4px!important;
  z-index:90!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
  overflow:visible!important;
}
.task-quick-filter-shell{
  position:absolute!important;
  inset-inline-end:0!important;
  top:0!important;
  width:auto!important;
  min-width:0!important;
  display:block!important;
  pointer-events:none!important;
}
.task-quick-filter-toggle{
  pointer-events:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  min-width:36px!important;
  height:34px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  font-size:.76rem!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-shadow:0 8px 18px rgba(15,23,42,.10)!important;
  backdrop-filter:blur(12px)!important;
  transform:none!important;
}
.task-quick-filter-toggle::before{content:none!important;}
.task-quick-filter-icon{font-size:.88rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;}
.task-quick-filter-text{font-size:.74rem;font-weight:900;line-height:1;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.task-quick-filter-toggle:not(.has-active-filter) .task-quick-filter-text{display:none;}
.task-quick-filter-toggle:not(.has-active-filter){width:36px;padding:0!important;}
.task-quick-filter-shell.expanded .task-quick-filters{
  position:absolute!important;
  inset-inline-end:0!important;
  top:40px!important;
  width:min(240px,calc(100vw - 28px))!important;
  max-height:min(60vh,360px)!important;
  overflow:auto!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:5px!important;
  padding:7px!important;
  margin:0!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(148,163,184,.24)!important;
  box-shadow:0 18px 44px rgba(15,23,42,.18)!important;
  backdrop-filter:blur(14px)!important;
  pointer-events:auto!important;
}
.task-quick-filter-button{
  width:100%!important;
  min-height:32px!important;
  padding:7px 10px!important;
  border-radius:12px!important;
  font-size:.82rem!important;
  text-align:center!important;
  justify-content:center!important;
  box-shadow:none!important;
}
.task-quick-filter-button:hover{transform:none!important;}
html[data-theme="dark"] .task-quick-filter-shell.expanded .task-quick-filters,
body.dark-theme .task-quick-filter-shell.expanded .task-quick-filters{
  background:rgba(8,16,36,.96)!important;
  border-color:rgba(125,211,252,.24)!important;
  box-shadow:0 20px 54px rgba(0,0,0,.45),0 0 28px rgba(34,211,238,.08)!important;
}
html[data-theme="dark"] .task-quick-filter-toggle:not(.has-active-filter),
body.dark-theme .task-quick-filter-toggle:not(.has-active-filter){
  background:rgba(15,23,42,.82)!important;
  color:#e0f2fe!important;
  border-color:rgba(125,211,252,.25)!important;
}
@media(max-width:640px){
  .task-quick-filters-host{top:2px!important;}
  .task-quick-filter-toggle{height:32px!important;min-width:32px!important;}
  .task-quick-filter-toggle:not(.has-active-filter){width:32px!important;}
  .task-quick-filter-text{max-width:58px;font-size:.69rem;}
  .task-quick-filter-shell.expanded .task-quick-filters{top:37px!important;width:min(220px,calc(100vw - 20px))!important;padding:6px!important;}
  .task-quick-filter-button{min-height:30px!important;padding:6px 9px!important;font-size:.78rem!important;}
}

/* 1.4.28 - Dark theme readability, settings header theme toggle, group modal polish, and light-card shadow visibility. */
.cloud-header-actions{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-inline-start:auto;
  flex-wrap:nowrap;
}
.cloud-theme-icon-button{
  inline-size:34px;
  block-size:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(148,163,184,.28);
  border-radius:999px;
  background:linear-gradient(135deg,#fff7ed,#eff6ff);
  color:#1e293b;
  font:inherit;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(15,23,42,.08);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
.cloud-theme-icon-button:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(15,23,42,.13);border-color:rgba(59,130,246,.32)}
.cloud-theme-icon-button:active{transform:scale(.96)}
html[data-theme="dark"] .cloud-theme-icon-button,
body.dark-theme .cloud-theme-icon-button{
  background:linear-gradient(135deg,rgba(14,165,233,.22),rgba(124,58,237,.26));
  color:#fff;
  border-color:rgba(125,211,252,.28);
  box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 20px rgba(34,211,238,.07);
}

html[data-theme="dark"] #noteInput,
html[data-theme="dark"] #cloudChatMessage,
html[data-theme="dark"] .chat-compose input,
html[data-theme="dark"] .chat-textarea,
html[data-theme="dark"] .cloud-input,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
body.dark-theme #noteInput,
body.dark-theme #cloudChatMessage,
body.dark-theme .chat-compose input,
body.dark-theme .chat-textarea,
body.dark-theme .cloud-input,
body.dark-theme input[type="text"],
body.dark-theme input[type="password"],
body.dark-theme input[type="tel"],
body.dark-theme input[type="email"],
body.dark-theme input[type="search"],
body.dark-theme textarea{
  color:#f8fbff!important;
  -webkit-text-fill-color:#f8fbff!important;
  background:#08172f!important;
  border-color:rgba(125,211,252,.30)!important;
  caret-color:#38bdf8!important;
  text-shadow:none!important;
  color-scheme:dark!important;
}
html[data-theme="dark"] #noteInput::placeholder,
html[data-theme="dark"] #cloudChatMessage::placeholder,
html[data-theme="dark"] .chat-compose input::placeholder,
html[data-theme="dark"] .cloud-input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body.dark-theme #noteInput::placeholder,
body.dark-theme #cloudChatMessage::placeholder,
body.dark-theme .chat-compose input::placeholder,
body.dark-theme .cloud-input::placeholder,
body.dark-theme textarea::placeholder{
  color:#9fb0d1!important;
  -webkit-text-fill-color:#9fb0d1!important;
  opacity:1!important;
}
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill:hover,
html[data-theme="dark"] textarea:-webkit-autofill:focus{
  -webkit-text-fill-color:#f8fbff!important;
  caret-color:#38bdf8!important;
  -webkit-box-shadow:0 0 0 1000px #08172f inset!important;
  box-shadow:0 0 0 1000px #08172f inset!important;
}
html[data-theme="dark"] #settingLanguage,
html[data-theme="dark"] #settingTheme,
html[data-theme="dark"] .setting-select,
html[data-theme="dark"] select,
body.dark-theme #settingLanguage,
body.dark-theme #settingTheme,
body.dark-theme .setting-select,
body.dark-theme select{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background-color:#08172f!important;
  border-color:rgba(125,211,252,.32)!important;
  color-scheme:dark!important;
}
html[data-theme="dark"] #settingLanguage option,
html[data-theme="dark"] #settingTheme option,
html[data-theme="dark"] .setting-select option,
html[data-theme="dark"] select option,
body.dark-theme #settingLanguage option,
body.dark-theme #settingTheme option,
body.dark-theme .setting-select option,
body.dark-theme select option{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:#08172f!important;
}

html[data-theme="dark"] .text-input-card.compact-composer,
body.dark-theme .text-input-card.compact-composer,
html[data-theme="dark"] .chat-tab-card .chat-compose,
body.dark-theme .chat-tab-card .chat-compose{
  background:linear-gradient(145deg,rgba(17,34,64,.96),rgba(7,16,35,.94))!important;
  border-color:rgba(125,211,252,.22)!important;
}
html[data-theme="dark"] .chat-body,
body.dark-theme .chat-body,
html[data-theme="dark"] .chat-tab-card .chat-body,
body.dark-theme .chat-tab-card .chat-body{
  background:linear-gradient(145deg,rgba(10,25,52,.95),rgba(6,14,31,.92))!important;
  color:#edf5ff!important;
  border-color:rgba(125,211,252,.20)!important;
}
html[data-theme="dark"] .chat-bubble,
body.dark-theme .chat-bubble{
  background:rgba(15,23,42,.86)!important;
  color:#edf5ff!important;
  border:1px solid rgba(125,211,252,.14)!important;
}
html[data-theme="dark"] .chat-message.mine .chat-bubble,
body.dark-theme .chat-message.mine .chat-bubble{
  background:linear-gradient(135deg,rgba(37,99,235,.42),rgba(124,58,237,.34))!important;
}

html[data-theme="dark"] .chat-group-modal,
body.dark-theme .chat-group-modal{
  background:linear-gradient(145deg,#0b1832,#071226)!important;
  color:#edf5ff!important;
  border-color:rgba(125,211,252,.28)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.55),0 0 32px rgba(34,211,238,.08)!important;
}
html[data-theme="dark"] .chat-group-modal-head strong,
body.dark-theme .chat-group-modal-head strong,
html[data-theme="dark"] .chat-group-modal label,
body.dark-theme .chat-group-modal label{
  color:#edf5ff!important;
}
html[data-theme="dark"] .chat-group-modal .modal-members,
body.dark-theme .chat-group-modal .modal-members{
  background:rgba(8,23,47,.82)!important;
  border-color:rgba(125,211,252,.20)!important;
}
html[data-theme="dark"] .chat-group-modal .chat-group-member,
body.dark-theme .chat-group-modal .chat-group-member{
  background:rgba(15,23,42,.84)!important;
  color:#edf5ff!important;
  border-color:rgba(125,211,252,.18)!important;
}
html[data-theme="dark"] .chat-modal-close,
body.dark-theme .chat-modal-close{
  background:rgba(34,211,238,.12)!important;
  color:#dff7ff!important;
  border:1px solid rgba(125,211,252,.22)!important;
}

html[data-theme="light"] .notes-list,
html[data-theme="light"] .cloud-panel,
html[data-theme="light"] .settings-submenu-body{
  overflow:visible;
}
html[data-theme="light"] .notes-area{
  padding:8px .65rem 1.45rem!important;
}
html[data-theme="light"] .notes-list{gap:.9rem!important;}
html[data-theme="light"] .note-item,
html[data-theme="light"] .settings-submenu,
html[data-theme="light"] .cloud-subsection,
html[data-theme="light"] .collaborator-row,
html[data-theme="light"] .chat-person-button,
html[data-theme="light"] .settings-card{
  position:relative;
  z-index:1;
  overflow:visible;
}
html[data-theme="light"] .note-item{box-shadow:0 12px 26px rgba(15,23,42,.08);}
html[data-theme="light"] .note-item.completed{box-shadow:0 0 15px rgba(74,222,128,.42),0 12px 26px rgba(15,23,42,.07)!important;}
@media(max-width:640px){
  .cloud-header{align-items:center;gap:8px;}
  .cloud-header-actions{gap:6px;}
  .cloud-theme-icon-button{inline-size:32px;block-size:32px;font-size:.95rem;}
  .cloud-header-version{font-size:.72rem;padding:4px 8px;}
}

/* 1.4.29 - Task quick filters live inside the main Tasks tab button. */
.task-quick-filters-host{
  display:none!important;
}
.filters{
  position:sticky!important;
  overflow:visible!important;
}
.filter-button.task-filter-anchor{
  position:relative!important;
  overflow:visible!important;
  gap:3px!important;
}
.filter-button.task-filter-anchor.task-filter-menu-open{
  z-index:130!important;
}
.task-tab-filter-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  max-width:78px!important;
  min-height:18px!important;
  padding:2px 6px!important;
  border-radius:999px!important;
  background:rgba(148,163,184,.15)!important;
  border:1px solid rgba(148,163,184,.20)!important;
  color:#475569!important;
  font-size:.62rem!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.filter-button.active .task-tab-filter-badge{
  background:rgba(255,255,255,.22)!important;
  border-color:rgba(255,255,255,.26)!important;
  color:#fff!important;
}
.task-tab-filter-badge.active{
  padding-inline:7px!important;
}
.task-tab-filter-menu{
  position:absolute!important;
  inset-inline-start:8px!important;
  top:calc(100% + 8px)!important;
  z-index:140!important;
  width:min(235px,calc(100vw - 28px))!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
  padding:8px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.98)!important;
  border:1px solid rgba(148,163,184,.24)!important;
  box-shadow:0 20px 54px rgba(15,23,42,.20)!important;
  backdrop-filter:blur(16px)!important;
}
.task-tab-filter-menu::before{
  content:'';
  position:absolute;
  inset-inline-start:24px;
  top:-7px;
  width:14px;
  height:14px;
  transform:rotate(45deg);
  background:inherit;
  border-inline-start:1px solid rgba(148,163,184,.24);
  border-top:1px solid rgba(148,163,184,.24);
}
.task-tab-filter-menu .task-quick-filter-button{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  min-height:34px!important;
  padding:8px 10px!important;
  border-radius:12px!important;
  font-size:.82rem!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .task-tab-filter-badge,
body.dark-theme .task-tab-filter-badge{
  background:rgba(34,211,238,.10)!important;
  border-color:rgba(125,211,252,.22)!important;
  color:#dff7ff!important;
}
html[data-theme="dark"] .filter-button.active .task-tab-filter-badge,
body.dark-theme .filter-button.active .task-tab-filter-badge{
  background:rgba(255,255,255,.15)!important;
  border-color:rgba(255,255,255,.20)!important;
  color:#fff!important;
}
html[data-theme="dark"] .task-tab-filter-menu,
body.dark-theme .task-tab-filter-menu{
  background:rgba(8,16,36,.98)!important;
  border-color:rgba(125,211,252,.24)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.48),0 0 30px rgba(34,211,238,.08)!important;
}
html[data-theme="dark"] .task-tab-filter-menu::before,
body.dark-theme .task-tab-filter-menu::before{
  border-color:rgba(125,211,252,.24)!important;
}
@media(max-width:640px){
  .task-tab-filter-menu{
    inset-inline-start:6px!important;
    top:calc(100% + 7px)!important;
    width:min(220px,calc(100vw - 20px))!important;
    padding:7px!important;
    border-radius:16px!important;
  }
  .task-tab-filter-badge{
    max-width:60px!important;
    min-height:16px!important;
    padding:2px 5px!important;
    font-size:.56rem!important;
  }
  .task-tab-filter-menu .task-quick-filter-button{
    min-height:32px!important;
    padding:7px 9px!important;
    font-size:.78rem!important;
  }
}

/* 1.4.30 - keep the task filter dropdown above the task list and prevent note shadows from being clipped. */
.main{
  isolation:isolate!important;
}
.filters{
  position:relative!important;
  z-index:1200!important;
  overflow:visible!important;
}
.filters.task-filter-menu-open-host{
  z-index:5000!important;
}
.task-tab-filter-menu{
  z-index:6000!important;
  pointer-events:auto!important;
  transform:translateZ(0)!important;
}
.notes-area{
  position:relative!important;
  z-index:1!important;
  padding:12px 12px 24px!important;
  margin-top:.25rem!important;
  scrollbar-gutter:stable both-edges;
}
.notes-list{
  overflow:visible!important;
  padding:2px 2px 18px!important;
}
.note-item{
  margin-inline:1px!important;
}
html[data-theme="light"] .notes-area,
body:not(.dark-theme) .notes-area{
  padding:14px 12px 26px!important;
}
html[data-theme="light"] .note-item,
body:not(.dark-theme) .note-item{
  box-shadow:0 14px 30px rgba(15,23,42,.10)!important;
}
html[data-theme="light"] .filters.task-filter-menu-open-host,
body:not(.dark-theme) .filters.task-filter-menu-open-host{
  box-shadow:0 14px 34px rgba(15,23,42,.13)!important;
}
html[data-theme="dark"] .filters.task-filter-menu-open-host,
body.dark-theme .filters.task-filter-menu-open-host{
  box-shadow:0 14px 40px rgba(0,0,0,.42),0 0 24px rgba(34,211,238,.08)!important;
}
@media(max-width:640px){
  .filters.task-filter-menu-open-host{
    z-index:7000!important;
  }
  .task-tab-filter-menu{
    z-index:7100!important;
  }
  .notes-area{
    padding:10px 10px 22px!important;
  }
}


/* 1.4.32 - Wider workspace instead of shrinking task cards.
   Keep cards readable, give shadows breathing room, and expand the app canvas on desktop/tablet. */
@media (min-width: 721px) {
  .app-shell{
    width:min(100%,64rem)!important;
    max-width:none!important;
    padding-inline:clamp(1rem,2.2vw,1.6rem)!important;
  }
  .main{
    overflow:visible!important;
    min-width:0!important;
  }
  .notes-area{
    padding:18px 18px 30px!important;
    margin-top:.35rem!important;
    overflow-y:auto!important;
    overflow-x:visible!important;
  }
  .notes-list{
    gap:.95rem!important;
    padding:4px 4px 22px!important;
  }
  .note-item{
    padding:1rem 1.1rem!important;
    gap:.9rem!important;
    border-radius:.9rem!important;
    margin-inline:0!important;
  }
  .note-text{
    font-size:1.02rem!important;
    line-height:1.7!important;
  }
}
@media (min-width: 1180px) {
  .app-shell{
    width:min(100%,72rem)!important;
  }
  .header,
  .filters,
  .task-quick-filters-host,
  .input-section,
  .settings-card,
  .calendar-planner,
  .account-tab-card,
  .chat-tab-card,
  .notes-list{
    width:100%!important;
    max-width:68rem!important;
    margin-inline:auto!important;
  }
  .notes-area{
    padding-inline:22px!important;
  }
}
@media (max-width: 720px) {
  .note-item{
    padding:.92rem!important;
    gap:.75rem!important;
    border-radius:.85rem!important;
  }
  .notes-area{
    padding:12px 10px 24px!important;
  }
}
html[data-theme="light"] .note-item,
body:not(.dark-theme) .note-item{
  box-shadow:0 14px 34px rgba(15,23,42,.11)!important;
}
html[data-theme="dark"] .note-item,
body.dark-theme .note-item{
  box-shadow:0 16px 42px rgba(0,0,0,.32),0 0 20px rgba(34,211,238,.055)!important;
}


/* 1.4.35 - Cleaner task cards without heavy shadows */
.note-item,
.note-item.completed,
.note-item.due-overdue,
html[data-theme="dark"] .note-item,
html[data-theme="dark"] .note-item.completed,
body.dark-theme .note-item,
body.dark-theme .note-item.completed {
  box-shadow: none !important;
}
.note-item {
  padding: .82rem .9rem !important;
  border-radius: .9rem !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  gap: .75rem !important;
}
.notes-list { gap: .6rem !important; }
.notes-area { padding-inline: .25rem !important; }
.note-item.dragging,
.note-item.duplicate-highlight {
  box-shadow: none !important;
}
html[data-theme="dark"] .note-item,
body.dark-theme .note-item {
  border-color: rgba(125, 211, 252, .18) !important;
}


/* 1.4.36 - Mobile chat/card layout rewrite: prevent chat panel overlap and use dead space better. */
.input-section{
  position:relative;
  z-index:9000!important;
}
.chat-tab-card,
.chat-tab-card .chat-shell,
.chat-tab-card .chat-body{
  position:relative;
  z-index:1!important;
}
body.chat-mode .input-section{
  z-index:9500!important;
}
@media (max-width:900px){
  body.chat-mode .app-shell{
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
  }
  body.chat-mode .main{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
    padding-bottom:0!important;
  }
  body.chat-mode .chat-tab-card{
    flex:1 1 auto!important;
    min-height:0!important;
    height:100%!important;
    max-height:none!important;
    overflow:hidden!important;
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
  body.chat-mode .chat-tab-card .chat-subsection,
  body.chat-mode .chat-tab-card .cloud-subsection{
    flex:1 1 auto!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
  }
  body.chat-mode .chat-tab-card .chat-shell,
  body.chat-mode .chat-shell-expanded{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    flex:1 1 auto!important;
    min-height:0!important;
    height:100%!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  body.chat-mode .chat-tab-card .chat-collaborators{
    flex:0 0 auto!important;
    max-height:104px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }
  body.chat-mode .chat-tab-card .chat-body{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    padding-bottom:8px!important;
  }
  body.chat-mode .chat-tab-card .chat-messages{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:calc(84px + env(safe-area-inset-bottom))!important;
    scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))!important;
  }
  body.chat-mode .chat-tab-card .chat-global-composer-help{
    position:relative!important;
    z-index:1!important;
    margin-bottom:4px!important;
  }
  body.chat-mode .input-section{
    flex:0 0 auto!important;
    position:sticky!important;
    bottom:0!important;
    z-index:9500!important;
    padding-top:7px!important;
    padding-bottom:max(8px, env(safe-area-inset-bottom))!important;
  }
}
@media (max-width:640px){
  .notes-area{
    padding:8px 6px 18px!important;
  }
  .notes-list{
    gap:8px!important;
    padding:0 0 12px!important;
  }
  .note-item{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 38px!important;
    grid-template-areas:
      "check content delete"
      "drag content delete"!important;
    align-items:start!important;
    column-gap:8px!important;
    row-gap:3px!important;
    padding:10px 10px!important;
    border-radius:15px!important;
    min-height:auto!important;
    width:100%!important;
  }
  .note-item:not(.task-draggable){
    grid-template-areas:"check content delete"!important;
  }
  .note-checkbox{
    grid-area:check!important;
    width:24px!important;
    height:24px!important;
    margin:2px auto 0!important;
    align-self:start!important;
  }
  .task-drag-handle{
    grid-area:drag!important;
    width:30px!important;
    height:28px!important;
    min-width:30px!important;
    margin:0 auto!important;
    font-size:1rem!important;
  }
  .note-content{
    grid-area:content!important;
    width:100%!important;
    min-width:0!important;
    display:block!important;
  }
  .delete-button{
    grid-area:delete!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    padding:7px!important;
    align-self:start!important;
    justify-self:end!important;
  }
  .note-text{
    margin:0 0 5px!important;
    font-size:.94rem!important;
    line-height:1.55!important;
    overflow-wrap:anywhere!important;
  }
  .assignment-info-button,
  .assignment-status-badge,
  .recurrence-badge{
    max-width:100%!important;
    min-height:30px!important;
    padding:5px 9px!important;
    font-size:.72rem!important;
    border-radius:999px!important;
  }
  .note-due-editor{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:6px!important;
    margin-top:7px!important;
    width:100%!important;
  }
  .note-due-label{
    display:none!important;
  }
  .note-due-action-button,
  .task-send-box.compact .task-inline-button,
  .task-inline-button,
  .clear-due-button{
    min-height:32px!important;
    padding:5px 9px!important;
    font-size:.72rem!important;
    border-radius:11px!important;
  }
  .note-due-action-button{
    flex:1 1 auto!important;
    justify-content:center!important;
  }
  .due-progress-wrap{
    height:6px!important;
    margin-top:7px!important;
    border-radius:999px!important;
  }
  .due-progress-info,
  .note-time,
  .note-due,
  .note-meta{
    font-size:.70rem!important;
    line-height:1.35!important;
  }
  .completion-prompt,
  .outgoing-completion-prompt,
  .incoming-completion-prompt{
    width:100%!important;
    margin-top:7px!important;
    padding:8px!important;
    border-radius:13px!important;
  }
  html[data-theme="dark"] .note-item::after{
    top:10px!important;
    bottom:10px!important;
    width:2px!important;
  }
}
@media (max-width:390px){
  .note-item{
    grid-template-columns:30px minmax(0,1fr) 34px!important;
    column-gap:6px!important;
    padding:9px 8px!important;
  }
  .note-checkbox{width:22px!important;height:22px!important;}
  .delete-button{width:31px!important;height:31px!important;min-width:31px!important;padding:6px!important;}
  .note-text{font-size:.9rem!important;line-height:1.48!important;}
}

/* 1.4.37 - Mobile task cards and chat composer hit-area fix */
.note-item,
.note-item.completed,
.note-item.due-overdue,
.note-item.alarming,
.note-item.dragging,
.note-item.duplicate-highlight,
html[data-theme="light"] .note-item,
html[data-theme="dark"] .note-item,
body.dark-theme .note-item,
body:not(.dark-theme) .note-item {
  box-shadow: none !important;
  filter: none !important;
}
.note-item.alarming {
  animation: none !important;
}
.notes-area {
  width: 100% !important;
  padding-inline: 0 !important;
}
.notes-list {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
}
.note-item {
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
}
.note-mobile-actions {
  display: contents;
}
.task-drag-handle { order: -3; }
.note-checkbox { order: -2; }
.note-content { order: 0; }
.delete-button { order: 2; }
.input-section,
.input-section * {
  pointer-events: auto !important;
}

@media (max-width: 900px) {
  .main {
    padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }
  .input-section {
    position: fixed !important;
    inset-inline: 8px !important;
    bottom: 0 !important;
    z-index: 2147483000 !important;
    pointer-events: auto !important;
    transform: translateZ(0);
  }
  .input-section::before {
    content: '';
    position: absolute;
    inset: -8px -4px 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(241,245,249,0), rgba(241,245,249,.98) 35%, rgba(241,245,249,1));
    pointer-events: none;
  }
  html[data-theme="dark"] .input-section::before,
  body.dark-theme .input-section::before {
    background: linear-gradient(180deg, rgba(7,16,36,0), rgba(7,16,36,.98) 35%, rgba(7,16,36,1));
  }
  body.chat-mode .main {
    padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }
  body.chat-mode .chat-tab-card .chat-messages {
    padding-bottom: 14px !important;
    scroll-padding-bottom: 14px !important;
  }
  body.chat-mode .chat-tab-card,
  body.chat-mode .chat-tab-card .chat-shell,
  body.chat-mode .chat-tab-card .chat-body {
    z-index: 1 !important;
  }
}

@media (max-width: 640px) {
  .notes-area {
    margin-top: 8px !important;
    padding: 6px 0 calc(84px + env(safe-area-inset-bottom)) !important;
  }
  .notes-list {
    gap: 7px !important;
    padding: 0 !important;
  }
  .note-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "content" "actions" !important;
    align-items: stretch !important;
    gap: 7px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
    min-height: 0 !important;
    box-shadow: none !important;
  }
  .note-content {
    grid-area: content !important;
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .note-text {
    margin: 0 !important;
    font-size: .92rem !important;
    line-height: 1.48 !important;
  }
  .note-mobile-actions {
    grid-area: actions !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding-top: 5px !important;
    border-top: 1px solid rgba(148, 163, 184, .18) !important;
  }
  html[data-theme="dark"] .note-mobile-actions,
  body.dark-theme .note-mobile-actions {
    border-top-color: rgba(125, 211, 252, .16) !important;
  }
  .note-mobile-actions .note-checkbox,
  .note-mobile-actions .task-drag-handle,
  .note-mobile-actions .delete-button {
    position: static !important;
    grid-area: auto !important;
    order: 0 !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px !important;
    align-self: center !important;
    justify-self: auto !important;
    border-radius: 12px !important;
  }
  .note-mobile-actions .note-checkbox {
    padding: 0 !important;
    accent-color: var(--primary) !important;
  }
  .note-mobile-actions .task-drag-handle {
    background: rgba(148, 163, 184, .14) !important;
    color: var(--muted) !important;
    font-size: .95rem !important;
  }
  .note-mobile-actions .delete-button {
    background: rgba(239, 68, 68, .08) !important;
    border: 1px solid rgba(239, 68, 68, .18) !important;
  }
  .note-due-editor {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-top: 4px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 1px 0 2px !important;
    scrollbar-width: none !important;
  }
  .note-due-editor::-webkit-scrollbar { display: none; }
  .note-due-label { display: none !important; }
  .note-due-action-button,
  .task-send-box.compact .task-send-toggle,
  .task-inline-button,
  .clear-due-button {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .note-due-action-button::after {
    content: '📅';
    font-size: 17px;
  }
  .note-due-action-button.has-value::after {
    content: '⏰';
  }
  .clear-due-button::after {
    content: '×';
    font-size: 20px;
    font-weight: 900;
  }
  .task-send-box.compact {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    width: auto !important;
  }
  .task-send-box.compact .task-send-toggle::after {
    content: '👥';
    font-size: 16px;
  }
  .task-send-inline-form {
    min-width: 220px !important;
    max-width: 82vw !important;
  }
  .assignment-info-button,
  .assignment-status-badge,
  .recurrence-badge {
    align-self: start !important;
    max-width: 100% !important;
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: .70rem !important;
    border-radius: 999px !important;
  }
  .due-progress-wrap {
    height: 5px !important;
    margin-top: 2px !important;
  }
  .due-progress-info,
  .note-time,
  .note-due,
  .note-meta {
    font-size: .68rem !important;
  }
  .text-input-card.compact-composer {
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .06) !important;
  }
  html[data-theme="dark"] .text-input-card.compact-composer,
  body.dark-theme .text-input-card.compact-composer {
    box-shadow: 0 -8px 22px rgba(0, 0, 0, .24) !important;
  }
}

@media (max-width: 390px) {
  .note-item {
    padding: 8px 9px !important;
    gap: 6px !important;
  }
  .note-text {
    font-size: .88rem !important;
    line-height: 1.44 !important;
  }
  .note-mobile-actions .note-checkbox,
  .note-mobile-actions .task-drag-handle,
  .note-mobile-actions .delete-button,
  .note-due-action-button,
  .task-send-box.compact .task-send-toggle,
  .task-inline-button,
  .clear-due-button {
    flex-basis: 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 11px !important;
  }
}

/* 1.4.38 - Mobile task card action alignment and Telegram-like chat list */
@media (max-width: 720px) {
  /* Chat tab behaves like Telegram: first show a full conversation list; after selection show only that chat. */
  .chat-tab-card .chat-shell,
  .chat-shell-expanded {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 0 !important;
  }
  .chat-shell.no-active-chat .chat-collaborators {
    display: flex !important;
    flex-direction: column !important;
    max-height: none !important;
    height: calc(100dvh - 210px) !important;
    min-height: 420px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    white-space: normal !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .chat-shell.no-active-chat .chat-person-button {
    min-height: 58px !important;
    border-radius: 15px !important;
    padding: 9px 10px !important;
  }
  .chat-shell.no-active-chat .chat-last-message {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .chat-shell.no-active-chat .chat-body {
    display: none !important;
  }
  .chat-shell.has-active-chat .chat-collaborators {
    display: none !important;
  }
  .chat-shell.has-active-chat .chat-body {
    display: flex !important;
    height: calc(100dvh - 218px) !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .chat-back-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 640px) {
  /* Make task cards full-width and low-height; keep all actions in a compact icon row. */
  .notes-area {
    padding-inline: 0 !important;
  }
  .notes-list {
    width: 100% !important;
    padding-inline: 0 !important;
  }
  .note-item {
    width: 100% !important;
    margin-inline: 0 !important;
    padding: 9px 10px !important;
    border-radius: 13px !important;
    gap: 6px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "content" "actions" !important;
    box-shadow: none !important;
  }
  .note-content {
    grid-area: content !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .note-text {
    font-size: .9rem !important;
    line-height: 1.45 !important;
    margin: 0 0 3px !important;
  }
  .note-mobile-actions {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    padding-top: 4px !important;
    border-top: 1px solid rgba(148, 163, 184, .14) !important;
  }
  html[data-theme="dark"] .note-mobile-actions,
  body.dark-theme .note-mobile-actions {
    border-top-color: rgba(125, 211, 252, .14) !important;
  }
  .note-mobile-actions .note-checkbox {
    order: 0 !important;
    flex: 0 0 30px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 0 0 0 auto !important; /* pin the completion check to the right in RTL */
    padding: 0 !important;
  }
  .note-mobile-actions .delete-button,
  .note-mobile-actions .task-drag-handle {
    order: 2 !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 11px !important;
  }
  .note-mobile-actions .delete-button {
    background: rgba(239, 68, 68, .08) !important;
    border: 1px solid rgba(239, 68, 68, .18) !important;
  }
  .note-due-editor {
    direction: ltr !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    margin-top: 4px !important;
    padding-bottom: 1px !important;
  }
  .note-due-editor::-webkit-scrollbar { display: none !important; }
  .note-due-action-button,
  .task-send-box.compact .task-send-toggle,
  .task-inline-button,
  .clear-due-button {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 11px !important;
    font-size: 0 !important;
  }
  .note-due-action-button::after { content: '📅'; font-size: 16px; }
  .note-due-action-button.has-value::after { content: '⏰'; font-size: 16px; }
  .task-send-box.compact .task-send-toggle::after { content: '👥'; font-size: 15px; }
  .clear-due-button::after { content: '×'; font-size: 19px; font-weight: 900; }
  .assignment-info-button {
    float: left !important;
    max-width: 52% !important;
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: .68rem !important;
    margin: 0 0 3px 0 !important;
  }
}

/* 1.4.39 - Mobile cards: one action row + popup forms */
.mobile-task-action-button,
.mobile-clear-due-button { display: none; }

.task-action-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.task-action-modal {
  width: min(460px, 100%);
  max-height: min(88dvh, 680px);
  overflow: auto;
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 22px;
  padding: 15px;
  box-shadow: 0 24px 72px rgba(15, 23, 42, .28);
  animation: modalRise .18s ease both;
}
.task-action-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.task-action-modal-head strong { font-size: 1rem; color: inherit; }
.task-action-modal-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(37, 99, 235, .10);
  color: var(--primary, #2563eb);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.task-action-modal-body { display: grid; gap: 10px; }
.task-action-task-title {
  margin: 0;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(148, 163, 184, .12);
  color: var(--text, #0f172a);
  font-weight: 800;
  line-height: 1.6;
}
.task-action-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.task-action-modal .cloud-input,
.task-action-modal select,
.task-action-modal input {
  width: 100%;
  color: var(--text, #0f172a) !important;
  background: var(--surface, #fff) !important;
  border-color: var(--border, #e2e8f0) !important;
}
html[data-theme="dark"] .task-action-modal,
body.dark-theme .task-action-modal {
  background: #0b1630 !important;
  color: #eaf3ff !important;
  border-color: rgba(125, 211, 252, .20) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.45), 0 0 32px rgba(34,211,238,.10) !important;
}
html[data-theme="dark"] .task-action-task-title,
body.dark-theme .task-action-task-title {
  background: rgba(125, 211, 252, .09) !important;
  color: #f8fbff !important;
}
html[data-theme="dark"] .task-action-modal .cloud-input,
html[data-theme="dark"] .task-action-modal select,
html[data-theme="dark"] .task-action-modal input,
body.dark-theme .task-action-modal .cloud-input,
body.dark-theme .task-action-modal select,
body.dark-theme .task-action-modal input {
  background: rgba(7, 16, 36, .94) !important;
  color: #f8fbff !important;
  border-color: rgba(125, 211, 252, .22) !important;
}

@media (max-width: 640px) {
  .note-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "content" "actions" !important;
    gap: 5px !important;
    padding: 8px 9px !important;
    min-height: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }
  .note-content { grid-area: content !important; gap: 4px !important; }
  .note-text { font-size: .9rem !important; line-height: 1.43 !important; margin: 0 !important; }
  .note-due-editor { display: none !important; }
  .note-mobile-actions {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 5px !important;
    border-top: 1px solid rgba(148, 163, 184, .14) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }
  .note-mobile-actions::-webkit-scrollbar { display: none !important; }
  .mobile-task-action-button,
  .note-mobile-actions .delete-button,
  .note-mobile-actions .task-drag-handle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    grid-area: auto !important;
    flex: 0 0 31px !important;
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 11px !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    background: rgba(255,255,255,.88) !important;
    color: var(--text, #0f172a) !important;
    font-family: inherit !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }
  .mobile-task-action-button.action-due { color: #2563eb !important; }
  .mobile-task-action-button.action-send { color: #7c3aed !important; }
  .note-mobile-actions .delete-button { color: #dc2626 !important; background: rgba(254, 242, 242, .92) !important; border-color: rgba(239, 68, 68, .20) !important; }
  .note-mobile-actions .task-drag-handle { color: #64748b !important; font-size: .9rem !important; }
  .mobile-task-action-icon { font-size: 15px; line-height: 1; display: inline-flex; }
  .note-mobile-actions .note-checkbox {
    order: -5 !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
    padding: 0 !important;
    align-self: center !important;
  }
  .mobile-task-action-button.action-due { order: 1 !important; }
  .mobile-task-action-button.action-send { order: 2 !important; }
  .note-mobile-actions .delete-button { order: 3 !important; }
  .note-mobile-actions .task-drag-handle { order: 4 !important; }
  .due-progress-line {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  .due-progress-line .due-progress-info {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .mobile-clear-due-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border: 1px solid rgba(239, 68, 68, .22) !important;
    border-radius: 9px !important;
    background: rgba(254, 242, 242, .92) !important;
    color: #dc2626 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
  }
  html[data-theme="dark"] .mobile-task-action-button,
  html[data-theme="dark"] .note-mobile-actions .task-drag-handle,
  body.dark-theme .mobile-task-action-button,
  body.dark-theme .note-mobile-actions .task-drag-handle {
    background: rgba(15, 30, 61, .96) !important;
    border-color: rgba(125, 211, 252, .18) !important;
    color: #eaf3ff !important;
  }
  html[data-theme="dark"] .note-mobile-actions .delete-button,
  body.dark-theme .note-mobile-actions .delete-button,
  html[data-theme="dark"] .mobile-clear-due-button,
  body.dark-theme .mobile-clear-due-button {
    background: rgba(127, 29, 29, .28) !important;
    border-color: rgba(251, 113, 133, .28) !important;
    color: #fecdd3 !important;
  }
  .task-action-modal-backdrop { align-items: flex-end; padding: 10px; }
  .task-action-modal { border-radius: 22px 22px 16px 16px; max-height: 88dvh; padding: 14px; }
  .task-action-modal-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .task-action-modal-actions .cloud-button { width: 100%; justify-content: center; }
}

/* 1.4.40 - Mobile task card: title checkbox + assignment/status chips in action row */
.note-title-line {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
  width: 100%;
}
.note-title-line .note-checkbox {
  flex: 0 0 auto;
  margin-top: 0.18rem;
}
.note-title-line .note-text {
  flex: 1 1 auto;
  min-width: 0;
}
.mobile-assignment-marker {
  display: none !important;
}
.mobile-assignment-status-button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
}

@media (max-width: 640px) {
  .note-title-line {
    direction: rtl !important;
    align-items: center !important;
    gap: 7px !important;
  }
  .note-title-line .note-checkbox {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    order: -10 !important;
  }
  .note-title-line .note-text {
    margin: 0 !important;
    line-height: 1.42 !important;
  }
  .desktop-assignment-marker {
    display: none !important;
  }
  .note-mobile-actions .mobile-assignment-marker {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 48% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: .67rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    order: -20 !important;
  }
  .note-mobile-actions .assignment-info-button.mobile-assignment-marker {
    border: 1px solid rgba(59, 130, 246, .20) !important;
    background: rgba(239, 246, 255, .96) !important;
    color: #1d4ed8 !important;
  }
  .note-mobile-actions .mobile-assignment-status-button {
    border: 1px solid rgba(245, 158, 11, .24) !important;
    background: rgba(255, 247, 237, .96) !important;
    color: #9a3412 !important;
  }
  html[data-theme="dark"] .note-mobile-actions .assignment-info-button.mobile-assignment-marker,
  body.dark-theme .note-mobile-actions .assignment-info-button.mobile-assignment-marker {
    background: rgba(30, 64, 175, .22) !important;
    border-color: rgba(96, 165, 250, .28) !important;
    color: #bfdbfe !important;
  }
  html[data-theme="dark"] .note-mobile-actions .mobile-assignment-status-button,
  body.dark-theme .note-mobile-actions .mobile-assignment-status-button {
    background: rgba(146, 64, 14, .24) !important;
    border-color: rgba(251, 191, 36, .28) !important;
    color: #fde68a !important;
  }
}


/* 1.4.41 - Due popup calendar overlay + full-height mobile chat list */
.jalali-date-picker{
  z-index:2147483646!important;
}
.task-action-modal-backdrop{
  z-index:2147483638!important;
}
@media (max-width:720px){
  body.chat-mode .chat-tab-card{
    height:calc(100dvh - 112px)!important;
    max-height:calc(100dvh - 112px)!important;
    min-height:0!important;
    overflow:hidden!important;
    padding-bottom:0!important;
  }
  body.chat-mode .chat-tab-card .chat-subsection,
  body.chat-mode .chat-tab-card .chat-shell{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
  }
  body.chat-mode .chat-shell.no-active-chat{
    display:grid!important;
    grid-template-rows:minmax(0,1fr)!important;
    gap:0!important;
  }
  body.chat-mode .chat-shell.no-active-chat .chat-collaborators{
    height:100%!important;
    max-height:none!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:14px!important;
  }
  body.chat-mode .chat-shell.no-active-chat .chat-body,
  body.chat-mode .chat-shell.no-active-chat .chat-body .cloud-empty{
    display:none!important;
  }
  body.chat-mode .chat-shell.has-active-chat .chat-body{
    height:100%!important;
    max-height:none!important;
    min-height:0!important;
  }
  body.chat-mode #noteInput:disabled::placeholder{
    color:transparent!important;
  }
}


.group-invite-actions { display: flex; gap: 8px; margin: -4px 8px 10px; flex-wrap: wrap; }
.group-chat-button.pending-invite { border-style: dashed; opacity: .95; }
.group-avatar-picker { display: grid; gap: 8px; margin: 10px 0; font-size: 13px; }
.group-avatar-picker input { width: 100%; }
.chat-group-members-view { display: grid; gap: 10px; margin-top: 12px; max-height: 320px; overflow: auto; }
.chat-group-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(127,127,127,.08); }
.chat-group-member-row small { margin-inline-start: auto; opacity: .75; }
.group-members-button { margin-inline-start: auto; }


/* 1.4.49 - stable full-height cloud/chat cards and top tab notification badges */
.filter-button{position:relative!important;overflow:visible!important;}
.nav-event-badge{
  position:absolute!important;
  inset-block-start:-8px!important;
  inset-inline-end:-7px!important;
  min-width:21px!important;
  height:21px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#ef4444!important;
  color:#fff!important;
  border:2px solid #fff!important;
  box-shadow:0 8px 18px rgba(239,68,68,.28)!important;
  font-size:.68rem!important;
  font-weight:900!important;
  line-height:1!important;
  z-index:40!important;
}
.nav-event-badge::after{
  content:attr(title);
  position:absolute;
  top:calc(100% + 8px);
  inset-inline-end:0;
  width:max-content;
  max-width:180px;
  padding:6px 9px;
  border-radius:10px;
  background:#0f172a;
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:.18s ease;
  box-shadow:0 10px 26px rgba(15,23,42,.22);
}
.filter-button:hover .nav-event-badge::after{opacity:1;transform:translateY(0);}
.cloud-card.account-tab-card,
.cloud-card.chat-tab-card{
  height:calc(100dvh - 138px)!important;
  max-height:calc(100dvh - 138px)!important;
  min-height:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  margin:0!important;
}
.cloud-card.account-tab-card{overflow:auto!important;}
.cloud-card.chat-tab-card .chat-subsection,
.cloud-card.chat-tab-card .cloud-subsection{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;}
.cloud-card.chat-tab-card .chat-shell,
.cloud-card.chat-tab-card .chat-shell-expanded{flex:1 1 auto!important;min-height:0!important;height:100%!important;display:grid!important;grid-template-columns:minmax(220px,300px) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;}
.cloud-card.chat-tab-card .chat-collaborators{max-height:none!important;min-height:0!important;overflow:auto!important;}
.cloud-card.chat-tab-card .chat-body{min-height:0!important;height:auto!important;max-height:none!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;}
.cloud-card.chat-tab-card .chat-messages{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;}
.chat-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.chat-title-line .chat-title{margin:0;}
@media(max-width:720px){
  .cloud-card.account-tab-card,.cloud-card.chat-tab-card{height:calc(100dvh - 132px)!important;max-height:calc(100dvh - 132px)!important;}
  .cloud-card.chat-tab-card .chat-shell,.cloud-card.chat-tab-card .chat-shell-expanded{grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,1fr)!important;}
  .cloud-card.chat-tab-card .chat-collaborators{max-height:96px!important;display:flex!important;flex-direction:row!important;overflow-x:auto!important;overflow-y:hidden!important;}
}


/* 1.4.50 - Restore stable tab section visibility/height from 1.4.45 and prevent hidden cards from showing in other tabs */
.account-tab-card[hidden],
.chat-tab-card[hidden],
.cloud-card.account-tab-card[hidden],
.cloud-card.chat-tab-card[hidden]{
  display:none!important;
}
.cloud-card.account-tab-card:not([hidden]){
  display:block!important;
  height:calc(100dvh - 142px)!important;
  max-height:calc(100dvh - 142px)!important;
  min-height:0!important;
  overflow:auto!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.cloud-card.chat-tab-card:not([hidden]){
  display:flex!important;
  flex-direction:column!important;
  height:calc(100dvh - 142px)!important;
  max-height:calc(100dvh - 142px)!important;
  min-height:0!important;
  overflow:hidden!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.cloud-card.chat-tab-card:not([hidden]) .chat-subsection{
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.cloud-card.chat-tab-card:not([hidden]) .chat-shell,
.cloud-card.chat-tab-card:not([hidden]) .chat-shell-expanded{
  flex:1 1 auto!important;
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
}
.cloud-card.chat-tab-card:not([hidden]) .chat-collaborators{
  height:100%!important;
  max-height:none!important;
  overflow:auto!important;
}
.cloud-card.chat-tab-card:not([hidden]) .chat-body{
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.cloud-card.chat-tab-card:not([hidden]) .chat-messages{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
}
@media(max-width:720px){
  .cloud-card.account-tab-card:not([hidden]),
  .cloud-card.chat-tab-card:not([hidden]){
    height:calc(100dvh - 124px)!important;
    max-height:calc(100dvh - 124px)!important;
  }
  .cloud-card.account-tab-card:not([hidden]){overflow:auto!important;}
  .cloud-card.chat-tab-card:not([hidden]) .chat-shell,
  .cloud-card.chat-tab-card:not([hidden]) .chat-shell-expanded{
    height:100%!important;
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr)!important;
  }
  .cloud-card.chat-tab-card:not([hidden]) .chat-shell.no-active-chat .chat-collaborators{
    height:100%!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .cloud-card.chat-tab-card:not([hidden]) .chat-shell.has-active-chat .chat-body{
    height:100%!important;
    max-height:none!important;
    min-height:0!important;
    display:flex!important;
  }
}


/* v1.4.51: OTP captcha and initial password layout */
.cloud-captcha-box{display:grid;gap:8px;background:linear-gradient(135deg,#f8fafc,#eff6ff);border:1px solid #dbeafe;border-radius:16px;padding:10px;grid-column:1/-1}
.cloud-captcha-label{font-size:.82rem;font-weight:900;color:#0f172a}
.cloud-captcha-question{direction:ltr;text-align:center;font-weight:900;font-size:1.08rem;letter-spacing:.04em;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:9px;color:#1d4ed8}
.cloud-captcha-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.cloud-captcha-row .cloud-button{white-space:nowrap;min-height:42px}
.cloud-profile-complete{display:grid;gap:14px;background:#fff;border:1px solid #dbeafe;border-radius:24px;padding:16px;box-shadow:0 14px 34px rgba(37,99,235,.10)}
.cloud-profile-complete .profile-row{align-items:flex-start;gap:14px}
.cloud-profile-complete .cloud-inline-form{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.cloud-profile-complete .cloud-inline-form .cloud-file-input,.cloud-profile-complete .cloud-inline-form .cloud-help,.cloud-profile-complete .cloud-inline-form .password-section-title,.cloud-profile-complete .cloud-inline-form .cloud-button{grid-column:1/-1}
.cloud-profile-complete .password-section-title{margin-top:8px;padding-top:10px;border-top:1px solid #e2e8f0}
@media(max-width:720px){.cloud-captcha-row{grid-template-columns:1fr}.cloud-profile-complete .profile-row{display:grid}.cloud-profile-complete .cloud-inline-form{grid-template-columns:1fr}.cloud-profile-complete .cloud-avatar.large{margin:auto}}
html[data-theme="dark"] .cloud-captcha-box,body.dark-theme .cloud-captcha-box{background:rgba(255,255,255,.045)!important;border-color:rgba(139,164,207,.18)!important}
html[data-theme="dark"] .cloud-captcha-label,body.dark-theme .cloud-captcha-label{color:#f8fbff!important}
html[data-theme="dark"] .cloud-captcha-question,body.dark-theme .cloud-captcha-question{background:rgba(15,23,42,.65)!important;border-color:rgba(139,164,207,.22)!important;color:#bfdbfe!important}


/* v1.4.54 - Legal acceptance and privacy/terms modal */
.legal-accept-card{margin:8px 0 10px;padding:10px 12px;border:1px solid rgba(37,99,235,.18);border-radius:16px;background:linear-gradient(135deg,rgba(239,246,255,.9),rgba(255,255,255,.96));box-shadow:0 8px 22px rgba(15,23,42,.06)}
.legal-accept-row{display:flex;align-items:flex-start;gap:9px;font-size:.82rem;line-height:1.9;color:#334155;cursor:pointer}
.legal-accept-row input{width:auto!important;flex:0 0 auto;margin-top:5px;accent-color:#2563eb;transform:scale(.94)}
.legal-accept-text{display:inline;min-width:0}
.legal-link-button{display:inline;border:0;background:transparent;color:#1d4ed8;font-weight:800;cursor:pointer;padding:0 3px;font-family:inherit;text-decoration:underline;text-underline-offset:3px}
.legal-link-button:hover{color:#0f172a}
.legal-modal-backdrop{position:fixed;inset:0;z-index:10020;background:rgba(15,23,42,.48);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px}
.legal-modal{width:min(680px,100%);max-height:min(88dvh,760px);overflow:hidden;background:#fff;border:1px solid #dbeafe;border-radius:24px;box-shadow:0 30px 90px rgba(15,23,42,.34);display:grid;grid-template-rows:auto 1fr auto;animation:modalRise .18s ease both}
.legal-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid #e2e8f0;background:linear-gradient(135deg,#eff6ff,#fff)}
.legal-modal-head strong{font-size:1.05rem;color:#0f172a}
.legal-modal-body{overflow:auto;padding:14px 16px;display:grid;gap:12px;color:#334155;line-height:2}
.legal-section{padding:12px;border:1px solid #eef2ff;border-radius:18px;background:#f8fafc}
.legal-section h4{margin:0 0 6px;font-size:.95rem;color:#0f172a}
.legal-section p{margin:0;font-size:.86rem}
.legal-modal-actions{display:flex;justify-content:flex-end;padding:12px 16px;border-top:1px solid #e2e8f0;background:#f8fafc}
html[data-theme="dark"] .legal-accept-card,body.dark-theme .legal-accept-card{background:linear-gradient(135deg,rgba(30,41,59,.92),rgba(15,23,42,.96));border-color:rgba(148,163,184,.28);box-shadow:0 12px 28px rgba(0,0,0,.22)}
html[data-theme="dark"] .legal-accept-row,body.dark-theme .legal-accept-row{color:#dbeafe}
html[data-theme="dark"] .legal-link-button,body.dark-theme .legal-link-button{color:#93c5fd}
html[data-theme="dark"] .legal-modal,body.dark-theme .legal-modal{background:#0f172a;border-color:#334155;color:#e2e8f0}
html[data-theme="dark"] .legal-modal-head,body.dark-theme .legal-modal-head{background:linear-gradient(135deg,#1e293b,#0f172a);border-color:#334155}
html[data-theme="dark"] .legal-modal-head strong,body.dark-theme .legal-modal-head strong,html[data-theme="dark"] .legal-section h4,body.dark-theme .legal-section h4{color:#f8fafc}
html[data-theme="dark"] .legal-modal-body,body.dark-theme .legal-modal-body{color:#dbeafe}
html[data-theme="dark"] .legal-section,body.dark-theme .legal-section{background:#111827;border-color:#334155}
html[data-theme="dark"] .legal-modal-actions,body.dark-theme .legal-modal-actions{background:#111827;border-color:#334155}
@media(max-width:720px){.legal-modal-backdrop{align-items:flex-end;padding:10px}.legal-modal{max-height:90dvh;border-radius:22px 22px 16px 16px}.legal-modal-body{padding:12px}.legal-accept-row{font-size:.78rem}}


/* v1.4.54 - Full screen modern auth/login page */
body.auth-mode{
  min-height:100dvh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.18), transparent 34vw),
    radial-gradient(circle at bottom left, rgba(34,211,238,.14), transparent 30vw),
    linear-gradient(135deg,#eef6ff 0%,#f8fafc 45%,#ffffff 100%);
}
body.auth-mode .header,
body.auth-mode .filters,
body.auth-mode #taskQuickFiltersHost,
body.auth-mode #calendarPlanner,
body.auth-mode .settings-card,
body.auth-mode #notesArea,
body.auth-mode .input-section,
body.auth-mode .app-footer{
  display:none!important;
}
body.auth-mode .app-shell{min-height:100dvh;display:flex!important;}
body.auth-mode .main{width:100%;min-height:100dvh;display:flex!important;align-items:center!important;justify-content:center!important;padding:clamp(16px,3vw,38px)!important;margin:0!important;}
body.auth-mode .cloud-card.account-tab-card.login-screen-mode{
  display:flex!important;
  width:min(1120px,100%)!important;
  max-width:1120px!important;
  min-height:min(760px,calc(100dvh - 36px))!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:34px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:0 32px 90px rgba(15,23,42,.18)!important;
  backdrop-filter:blur(18px);
}
body.auth-mode .cloud-card.account-tab-card.login-screen-mode .cloud-header{
  position:absolute;
  top:18px;
  left:18px;
  right:18px;
  z-index:5;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}
body.auth-mode .cloud-card.account-tab-card.login-screen-mode .cloud-header strong{display:none!important;}
body.auth-mode .cloud-card.account-tab-card.login-screen-mode .cloud-header-actions{margin-inline-start:auto;}
body.auth-mode .cloud-card.account-tab-card.login-screen-mode .cloud-header-version{
  background:rgba(255,255,255,.76)!important;
  border-color:rgba(148,163,184,.32)!important;
  color:#334155!important;
}
body.auth-mode .cloud-card.account-tab-card.login-screen-mode .cloud-status{position:absolute;left:24px;right:24px;bottom:18px;z-index:6;margin:0!important;}
body.auth-mode .professional-login-wrap{
  width:100%;
  min-height:min(760px,calc(100dvh - 36px));
  display:grid!important;
  grid-template-columns:minmax(320px,.86fr) minmax(0,1.14fr)!important;
  gap:0!important;
  align-items:stretch!important;
  margin:0!important;
  overflow:hidden;
  border-radius:34px;
}
body.auth-mode .login-hero-box{
  order:2;
  position:relative;
  min-height:100%;
  border-radius:0!important;
  padding:clamp(42px,5vw,74px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  color:#fff!important;
  background:
    linear-gradient(145deg,rgba(15,23,42,.88),rgba(29,78,216,.86)),
    radial-gradient(circle at 25% 20%,rgba(34,211,238,.32),transparent 30%),
    radial-gradient(circle at 75% 80%,rgba(16,185,129,.22),transparent 32%)!important;
  box-shadow:none!important;
  overflow:hidden;
}
body.auth-mode .login-hero-box:before{opacity:.9!important;}
body.auth-mode .login-hero-box h2{font-size:clamp(2rem,4vw,3.45rem)!important;line-height:1.45!important;margin:18px 0 14px!important;letter-spacing:-.02em;}
body.auth-mode .login-hero-box p{font-size:1rem!important;color:#eaf2ff!important;max-width:620px;}
body.auth-mode .login-feature-list{grid-template-columns:1fr;max-width:520px;}
body.auth-mode .login-feature-list span{background:rgba(255,255,255,.13)!important;border-color:rgba(255,255,255,.22)!important;color:#f8fafc!important;}
body.auth-mode .professional-login-card{
  order:1;
  align-self:center;
  justify-self:center;
  width:min(430px,100%);
  margin:clamp(32px,5vw,70px) auto!important;
  padding:clamp(20px,3vw,30px)!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(219,234,254,.95)!important;
  box-shadow:0 24px 60px rgba(37,99,235,.16)!important;
}
body.auth-mode .professional-login-card:before{
  content:'ورود به حساب کاربری';
  display:block;
  margin-bottom:14px;
  font-weight:950;
  font-size:1.28rem;
  color:#0f172a;
}
html[lang="en"] body.auth-mode .professional-login-card:before{content:'Sign in to your account';}
body.auth-mode .professional-login-card .cloud-input{
  height:48px!important;
  border-radius:16px!important;
  background:#f8fafc!important;
  border-color:#dbeafe!important;
}
body.auth-mode .professional-login-card .cloud-button.primary{
  height:48px!important;
  border-radius:16px!important;
  font-weight:950!important;
  box-shadow:0 14px 32px rgba(37,99,235,.22)!important;
}
body.auth-mode .login-mode-tabs{background:#eef6ff!important;border:1px solid #dbeafe!important;border-radius:18px!important;}
body.auth-mode .login-mode-tab{border-radius:14px!important;}
.legal-notice-card{margin-top:10px!important;background:#f8fafc!important;border-style:dashed!important;box-shadow:none!important;}
.legal-notice-text{display:block!important;margin:0!important;line-height:1.9!important;color:#475569!important;font-size:.82rem!important;}
.legal-notice-card input,.legal-notice-card label{display:none!important;}

@media(max-width:860px){
  body.auth-mode .main{align-items:stretch!important;padding:0!important;}
  body.auth-mode .cloud-card.account-tab-card.login-screen-mode{width:100%!important;min-height:100dvh!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
  body.auth-mode .professional-login-wrap{min-height:100dvh;grid-template-columns:1fr!important;border-radius:0!important;overflow:visible;}
  body.auth-mode .login-hero-box{order:1;min-height:auto;padding:78px 22px 28px!important;border-radius:0 0 30px 30px!important;}
  body.auth-mode .login-hero-box h2{font-size:1.65rem!important;}
  body.auth-mode .login-feature-list{display:none!important;}
  body.auth-mode .professional-login-card{order:2;width:calc(100% - 28px);margin:18px auto 28px!important;border-radius:24px!important;}
  body.auth-mode .cloud-card.account-tab-card.login-screen-mode .cloud-status{position:static;margin:0 14px 16px!important;}
}

html[data-theme="dark"] body.auth-mode{
  background:radial-gradient(circle at top right,rgba(34,211,238,.13),transparent 36vw),linear-gradient(135deg,#020617,#0f172a 52%,#111827);
}
html[data-theme="dark"] body.auth-mode .professional-login-card,
body.dark-theme.auth-mode .professional-login-card{
  background:rgba(15,23,42,.94)!important;
  border-color:rgba(148,163,184,.22)!important;
}
html[data-theme="dark"] body.auth-mode .professional-login-card:before,
body.dark-theme.auth-mode .professional-login-card:before{color:#f8fafc!important;}
html[data-theme="dark"] .legal-notice-card,
body.dark-theme .legal-notice-card{background:rgba(15,23,42,.78)!important;border-color:rgba(148,163,184,.28)!important;}
html[data-theme="dark"] .legal-notice-text,
body.dark-theme .legal-notice-text{color:#cbd5e1!important;}


/* v1.4.55 - Clean responsive auth page without promotional section */
body.auth-mode{
  min-height:100dvh!important;
  overflow:auto!important;
  background:
    radial-gradient(circle at 12% 8%, rgba(59,130,246,.16), transparent 28rem),
    radial-gradient(circle at 86% 92%, rgba(20,184,166,.13), transparent 26rem),
    linear-gradient(135deg,#f8fbff 0%,#eef6ff 48%,#ffffff 100%)!important;
}
body.auth-mode .app-shell{
  width:100%!important;
  max-width:none!important;
  min-height:100dvh!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
}
body.auth-mode .main{
  width:100%!important;
  min-height:100dvh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(16px,3vw,40px)!important;
  margin:0!important;
  overflow:auto!important;
}
body.auth-mode .cloud-card.account-tab-card.login-screen-mode{
  width:min(100%,480px)!important;
  min-height:auto!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  display:block!important;
}
body.auth-mode .cloud-card.account-tab-card.login-screen-mode .cloud-header{
  position:static!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  padding:0!important;
  margin:0 0 12px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body.auth-mode .cloud-card.account-tab-card.login-screen-mode .cloud-header strong,
body.auth-mode .cloud-card.account-tab-card.login-screen-mode .cloud-header-actions,
body.auth-mode .login-hero-box,
body.auth-mode .login-feature-list,
body.auth-mode .login-kicker{
  display:none!important;
}
body.auth-mode .professional-login-wrap,
body.auth-mode .auth-login-layout{
  width:100%!important;
  max-width:480px!important;
  min-height:0!important;
  display:block!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:visible!important;
  border-radius:0!important;
}
body.auth-mode .professional-login-card,
body.auth-mode .auth-login-card{
  width:100%!important;
  max-width:480px!important;
  margin:0 auto!important;
  padding:clamp(20px,4vw,34px)!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
  align-content:start!important;
  border-radius:30px!important;
  border:1px solid rgba(191,219,254,.95)!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 28px 70px rgba(15,23,42,.16),0 1px 0 rgba(255,255,255,.9) inset!important;
  backdrop-filter:blur(18px)!important;
}
body.auth-mode .professional-login-card:before{content:none!important;display:none!important;}
.auth-card-intro{
  display:flex;
  align-items:center;
  gap:13px;
  margin:0 0 4px;
  padding:0 0 14px;
  border-bottom:1px solid rgba(226,232,240,.9);
  grid-column:1/-1;
}
.auth-logo-mark{
  width:52px;
  height:52px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:#fff;
  font-weight:950;
  font-size:1.35rem;
  background:linear-gradient(135deg,#2563eb,#14b8a6);
  box-shadow:0 14px 30px rgba(37,99,235,.26);
}
.auth-card-text{min-width:0;display:grid;gap:3px;text-align:start;}
.auth-card-text h2{margin:0;color:#0f172a;font-size:clamp(1.15rem,3vw,1.55rem);line-height:1.55;font-weight:950;letter-spacing:-.01em;}
.auth-card-text p{margin:0;color:#64748b;font-size:.88rem;line-height:1.75;font-weight:650;}
body.auth-mode .login-mode-tabs{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
  grid-column:1/-1!important;
  margin-top:4px!important;
  padding:5px!important;
  border-radius:18px!important;
  border:1px solid #dbeafe!important;
  background:#eff6ff!important;
}
body.auth-mode .login-mode-tab{
  min-height:42px!important;
  border-radius:14px!important;
  padding:9px 8px!important;
  color:#475569!important;
  font-size:.88rem!important;
  font-weight:950!important;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
body.auth-mode .login-mode-tab.active{
  background:#fff!important;
  color:#1d4ed8!important;
  box-shadow:0 9px 22px rgba(37,99,235,.14)!important;
}
body.auth-mode .professional-login-card .compact-help{
  margin:0!important;
  color:#64748b!important;
  font-size:.82rem!important;
  line-height:1.8!important;
  text-align:start!important;
}
body.auth-mode .professional-login-card .cloud-input{
  width:100%!important;
  height:50px!important;
  min-height:50px!important;
  border-radius:17px!important;
  padding:0 15px!important;
  color:#0f172a!important;
  background:#f8fafc!important;
  border:1px solid #dbeafe!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
body.auth-mode .professional-login-card .cloud-input:focus{
  background:#fff!important;
  border-color:#60a5fa!important;
  box-shadow:0 0 0 4px rgba(96,165,250,.16)!important;
}
body.auth-mode .professional-login-card .cloud-button{
  width:100%!important;
  min-height:48px!important;
  border-radius:17px!important;
  font-weight:950!important;
  border-width:1px!important;
}
body.auth-mode .professional-login-card .cloud-button.primary{
  background:linear-gradient(135deg,#2563eb,#14b8a6)!important;
  box-shadow:0 16px 34px rgba(37,99,235,.22)!important;
}
body.auth-mode .professional-login-card .cloud-button.ghost,
body.auth-mode .professional-login-card .cloud-button:not(.primary){
  background:#f8fafc!important;
  color:#334155!important;
  border-color:#e2e8f0!important;
  box-shadow:none!important;
}
body.auth-mode .remember-password-row{
  margin:0!important;
  width:fit-content!important;
  max-width:100%!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  background:#f8fafc!important;
  border-color:#e2e8f0!important;
}
body.auth-mode .cloud-captcha-box{
  display:grid!important;
  gap:8px!important;
  padding:12px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#f8fafc,#eff6ff)!important;
  border:1px solid #dbeafe!important;
}
body.auth-mode .cloud-captcha-row{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:8px!important;
  align-items:center!important;
}
body.auth-mode .legal-notice-card{
  margin:0!important;
  padding:10px 12px!important;
  border-radius:16px!important;
  background:#f8fafc!important;
  border:1px dashed #bfdbfe!important;
  box-shadow:none!important;
}
body.auth-mode .legal-notice-text{
  margin:0!important;
  font-size:.8rem!important;
  line-height:1.9!important;
  color:#475569!important;
}
body.auth-mode .cloud-card.account-tab-card.login-screen-mode .cloud-status{
  position:static!important;
  margin:12px 0 0!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
}
body.auth-mode .legal-modal-backdrop{padding:16px!important;}
body.auth-mode .legal-modal{border-radius:24px!important;}
@media(max-width:560px){
  body.auth-mode{
    background:linear-gradient(180deg,#eff6ff 0%,#fff 42%,#f8fafc 100%)!important;
  }
  body.auth-mode .main{
    align-items:flex-start!important;
    padding:14px!important;
  }
  body.auth-mode .cloud-card.account-tab-card.login-screen-mode{
    width:100%!important;
  }
  body.auth-mode .professional-login-card,
  body.auth-mode .auth-login-card{
    max-width:100%!important;
    padding:18px 14px!important;
    border-radius:24px!important;
    box-shadow:0 18px 44px rgba(15,23,42,.12)!important;
  }
  .auth-card-intro{
    align-items:flex-start!important;
    gap:10px!important;
    padding-bottom:12px!important;
  }
  .auth-logo-mark{
    width:46px!important;
    height:46px!important;
    border-radius:16px!important;
  }
  .auth-card-text h2{font-size:1.08rem!important;line-height:1.65!important;}
  .auth-card-text p{font-size:.78rem!important;line-height:1.8!important;}
  body.auth-mode .login-mode-tabs{grid-template-columns:1fr!important;}
  body.auth-mode .professional-login-card .cloud-input,
  body.auth-mode .professional-login-card .cloud-button{min-height:46px!important;height:auto!important;}
  body.auth-mode .cloud-captcha-row{grid-template-columns:1fr!important;}
}
@media(max-height:680px) and (min-width:720px){
  body.auth-mode .main{align-items:flex-start!important;}
  body.auth-mode .professional-login-card{padding:20px!important;}
  .auth-card-intro{padding-bottom:10px!important;}
}
html[data-theme="dark"] body.auth-mode,
body.dark-theme.auth-mode{
  background:radial-gradient(circle at 15% 10%,rgba(34,211,238,.12),transparent 26rem),linear-gradient(135deg,#020617,#0f172a 58%,#111827)!important;
}
html[data-theme="dark"] body.auth-mode .professional-login-card,
body.dark-theme.auth-mode .professional-login-card{
  background:rgba(15,23,42,.94)!important;
  border-color:rgba(125,211,252,.20)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.32)!important;
}
html[data-theme="dark"] .auth-card-intro,
body.dark-theme .auth-card-intro{border-bottom-color:rgba(125,211,252,.16)!important;}
html[data-theme="dark"] .auth-card-text h2,
body.dark-theme .auth-card-text h2{color:#f8fafc!important;}
html[data-theme="dark"] .auth-card-text p,
body.dark-theme .auth-card-text p{color:#cbd5e1!important;}
html[data-theme="dark"] body.auth-mode .login-mode-tabs,
body.dark-theme.auth-mode .login-mode-tabs,
html[data-theme="dark"] body.auth-mode .cloud-captcha-box,
body.dark-theme.auth-mode .cloud-captcha-box,
html[data-theme="dark"] body.auth-mode .legal-notice-card,
body.dark-theme.auth-mode .legal-notice-card{
  background:rgba(30,41,59,.68)!important;
  border-color:rgba(125,211,252,.18)!important;
}
html[data-theme="dark"] body.auth-mode .login-mode-tab,
body.dark-theme.auth-mode .login-mode-tab{color:#cbd5e1!important;}
html[data-theme="dark"] body.auth-mode .login-mode-tab.active,
body.dark-theme.auth-mode .login-mode-tab.active{background:rgba(15,23,42,.92)!important;color:#93c5fd!important;}
html[data-theme="dark"] body.auth-mode .professional-login-card .cloud-input,
body.dark-theme.auth-mode .professional-login-card .cloud-input{
  background:#0f172a!important;
  color:#f8fafc!important;
  border-color:rgba(125,211,252,.22)!important;
}
html[data-theme="dark"] body.auth-mode .professional-login-card .cloud-button:not(.primary),
body.dark-theme.auth-mode .professional-login-card .cloud-button:not(.primary),
html[data-theme="dark"] body.auth-mode .remember-password-row,
body.dark-theme.auth-mode .remember-password-row{
  background:rgba(15,23,42,.72)!important;
  color:#dbeafe!important;
  border-color:rgba(125,211,252,.18)!important;
}


/* 1.4.57 - Todo voice record button imported into TODO-Pro */
@keyframes todo-source-neon-red-blink {
  0%, 100% {
    box-shadow: 0 0 4px #f87171, 0 0 8px #f87171, 0 0 15px #ef4444;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 2px #fca5a5, 0 0 4px #fca5a5, 0 0 6px #f87171;
    transform: scale(1.03);
  }
}
@keyframes todo-source-neon-blue-pulse {
  0%, 100% {
    box-shadow: 0 0 3px #60a5fa, 0 0 6px #3b82f6;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 6px #93c5fd, 0 0 12px #60a5fa;
    transform: scale(1.03);
  }
}
@keyframes todo-source-neon-blue-starting {
  0%, 100% {
    box-shadow: 0 0 2px #93c5fd, 0 0 4px #60a5fa;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 4px #93c5fd, 0 0 8px #60a5fa;
    transform: scale(1.02);
  }
}
.voice-box .voice-button,
.compact-voice-box .voice-button,
.chat-mode .voice-button,
html[data-theme="dark"] .voice-box .voice-button,
html[data-theme="dark"] .compact-voice-box .voice-button,
html[data-theme="dark"] .chat-mode .voice-button {
  border: 0 !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 0 3px #60a5fa, 0 0 6px #3b82f6 !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: auto !important;
  overflow: hidden !important;
  transition: background-color .2s ease, opacity .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.voice-box .voice-button::before,
.voice-box .voice-button::after,
.compact-voice-box .voice-button::before,
.compact-voice-box .voice-button::after,
.chat-mode .voice-button::before,
.chat-mode .voice-button::after,
html[data-theme="dark"] .voice-box .voice-button::before,
html[data-theme="dark"] .voice-box .voice-button::after,
html[data-theme="dark"] .compact-voice-box .voice-button::before,
html[data-theme="dark"] .compact-voice-box .voice-button::after,
html[data-theme="dark"] .chat-mode .voice-button::before,
html[data-theme="dark"] .chat-mode .voice-button::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  box-shadow: none !important;
}
.voice-box .voice-button svg,
.compact-voice-box .voice-button svg,
.chat-mode .voice-button svg,
html[data-theme="dark"] .voice-box .voice-button svg,
html[data-theme="dark"] .compact-voice-box .voice-button svg,
html[data-theme="dark"] .chat-mode .voice-button svg {
  position: relative !important;
  z-index: 1 !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: none !important;
  animation: none !important;
  filter: none !important;
}
.voice-box:not(.compact-voice-box) .voice-button {
  width: 5rem !important;
  height: 5rem !important;
  min-width: 5rem !important;
}
.compact-voice-box .voice-button,
.chat-mode .voice-button,
html[data-theme="dark"] .compact-voice-box .voice-button,
html[data-theme="dark"] .chat-mode .voice-button {
  width: 2.75rem !important;
  height: 2.75rem !important;
  min-width: 2.75rem !important;
  flex-basis: 2.75rem !important;
  padding: 0 !important;
}
.compact-voice-box .voice-button svg,
.chat-mode .voice-button svg,
html[data-theme="dark"] .compact-voice-box .voice-button svg,
html[data-theme="dark"] .chat-mode .voice-button svg {
  width: 1.38rem !important;
  height: 1.38rem !important;
}
.voice-button.idle:not(.denied),
html[data-theme="dark"] .voice-button.idle:not(.denied) {
  background: #3b82f6 !important;
  animation: todo-source-neon-blue-pulse 2s infinite ease-in-out !important;
}
.voice-button.starting:not(.denied),
html[data-theme="dark"] .voice-button.starting:not(.denied) {
  background: #3b82f6 !important;
  animation: todo-source-neon-blue-starting 1s infinite ease-in-out !important;
}
.voice-button.listening:not(.denied),
.voice-button.chat-recording:not(.denied),
.chat-mode .voice-button.listening:not(.denied),
.chat-mode .voice-button.chat-recording:not(.denied),
html[data-theme="dark"] .voice-button.listening:not(.denied),
html[data-theme="dark"] .voice-button.chat-recording:not(.denied),
html[data-theme="dark"] .chat-mode .voice-button.listening:not(.denied),
html[data-theme="dark"] .chat-mode .voice-button.chat-recording:not(.denied) {
  background: #ef4444 !important;
  animation: todo-source-neon-red-blink 1.5s infinite ease-in-out !important;
}
.voice-box .voice-button:hover,
.compact-voice-box .voice-button:hover,
.chat-mode .voice-button:hover,
html[data-theme="dark"] .voice-box .voice-button:hover,
html[data-theme="dark"] .compact-voice-box .voice-button:hover,
html[data-theme="dark"] .chat-mode .voice-button:hover {
  background: #2563eb !important;
}
.voice-button.listening:hover,
.voice-button.chat-recording:hover,
.chat-mode .voice-button.listening:hover,
.chat-mode .voice-button.chat-recording:hover,
html[data-theme="dark"] .voice-button.listening:hover,
html[data-theme="dark"] .voice-button.chat-recording:hover,
html[data-theme="dark"] .chat-mode .voice-button.listening:hover,
html[data-theme="dark"] .chat-mode .voice-button.chat-recording:hover {
  background: #dc2626 !important;
}
.voice-button.denied,
.chat-mode .voice-button.denied,
html[data-theme="dark"] .voice-button.denied,
html[data-theme="dark"] .chat-mode .voice-button.denied {
  opacity: .5 !important;
  cursor: not-allowed !important;
  background: #94a3b8 !important;
  box-shadow: none !important;
  animation: none !important;
}
@media (max-width: 640px) {
  .compact-voice-box .voice-button,
  .chat-mode .voice-button,
  html[data-theme="dark"] .compact-voice-box .voice-button,
  html[data-theme="dark"] .chat-mode .voice-button {
    width: 2.55rem !important;
    height: 2.55rem !important;
    min-width: 2.55rem !important;
    flex-basis: 2.55rem !important;
  }
  .compact-voice-box .voice-button svg,
  .chat-mode .voice-button svg,
  html[data-theme="dark"] .compact-voice-box .voice-button svg,
  html[data-theme="dark"] .chat-mode .voice-button svg {
    width: 1.28rem !important;
    height: 1.28rem !important;
  }
}


/* 1.4.59 - Mobile task-mode microphone matches the Todo mobile layout screenshot */
@media (max-width: 720px) {
  body:not(.chat-mode) .notes-area {
    padding-bottom: calc(12.5rem + env(safe-area-inset-bottom)) !important;
  }
  body:not(.chat-mode) .input-section {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 40 !important;
    padding: 0 0 calc(14px + env(safe-area-inset-bottom)) !important;
    margin-top: auto !important;
    background: transparent !important;
    border-top: 0 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  body:not(.chat-mode) .text-input-card.compact-composer,
  body:not(.chat-mode) .app-shell .input-section .text-input-card.compact-composer {
    position: relative !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "add input" !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 84px !important;
    padding: 16px 18px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(226,232,240,.95) !important;
    box-shadow: 0 -10px 32px rgba(148,163,184,.16) !important;
  }
  body:not(.chat-mode) .compact-due-field,
  body:not(.chat-mode) #duePickerButton,
  body:not(.chat-mode) .main-chat-file-button,
  body:not(.chat-mode) .main-chat-file-input {
    display: none !important;
  }
  body:not(.chat-mode) #noteInput,
  body:not(.chat-mode) .compact-composer #noteInput {
    grid-area: input !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #52525b !important;
    text-align: right !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
  }
  body:not(.chat-mode) #noteInput::placeholder,
  body:not(.chat-mode) .compact-composer #noteInput::placeholder {
    color: #78716c !important;
  }
  body:not(.chat-mode) #addButton {
    grid-area: add !important;
    width: auto !important;
    min-width: 100px !important;
    height: 56px !important;
    padding: 0 22px !important;
    border-radius: 18px !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    background: #3b82f6 !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(59,130,246,.28) !important;
  }
  body:not(.chat-mode) #addButton::after {
    content: none !important;
    display: none !important;
  }
  body:not(.chat-mode) .compact-voice-box {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 38px) !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body:not(.chat-mode) .compact-voice-box .status-message,
  body:not(.chat-mode) .compact-voice-box .unsupported-message {
    display: none !important;
  }
  body:not(.chat-mode) .compact-voice-box .voice-button {
    width: 5.4rem !important;
    height: 5.4rem !important;
    min-width: 5.4rem !important;
    flex-basis: 5.4rem !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #3b82f6 !important;
    box-shadow: 0 12px 28px rgba(59,130,246,.32), 0 0 18px rgba(96,165,250,.28) !important;
  }
  body:not(.chat-mode) .compact-voice-box .voice-button svg {
    width: 2.1rem !important;
    height: 2.1rem !important;
  }
  body:not(.chat-mode) .compact-voice-box .voice-button.listening,
  body:not(.chat-mode) .compact-voice-box .voice-button.chat-recording {
    background: #ef4444 !important;
    box-shadow: 0 12px 28px rgba(239,68,68,.30), 0 0 18px rgba(248,113,113,.24) !important;
  }
  body:not(.chat-mode) .permission-warning {
    margin-top: 88px !important;
    text-align: center !important;
  }

  html[data-theme="dark"] body:not(.chat-mode) .input-section,
  body.dark-theme:not(.chat-mode) .input-section {
    background: transparent !important;
  }
  html[data-theme="dark"] body:not(.chat-mode) .text-input-card.compact-composer,
  html[data-theme="dark"] body:not(.chat-mode) .app-shell .input-section .text-input-card.compact-composer,
  body.dark-theme:not(.chat-mode) .text-input-card.compact-composer {
    background: rgba(15,23,42,.94) !important;
    border-color: rgba(71,85,105,.75) !important;
    box-shadow: 0 -10px 32px rgba(2,6,23,.42) !important;
  }
  html[data-theme="dark"] body:not(.chat-mode) #noteInput,
  html[data-theme="dark"] body:not(.chat-mode) .compact-composer #noteInput,
  body.dark-theme:not(.chat-mode) #noteInput {
    color: #e2e8f0 !important;
  }
  html[data-theme="dark"] body:not(.chat-mode) #noteInput::placeholder,
  body.dark-theme:not(.chat-mode) #noteInput::placeholder {
    color: #94a3b8 !important;
  }
}


/* 1.4.60 - Android-only UX updates: settings icons, driving mode, chat layout, completed RTL cards */
body.android-app .input-section[hidden] {
  display: none !important;
}

body.android-app #drivingModeButton.driving-mode-toggle {
  width: min(100%, 680px);
  margin: 8px auto 4px;
  min-height: 44px;
  border: 0;
  border-radius: 16px;
  padding: 9px 14px;
  background: linear-gradient(135deg, #e0f2fe, #eff6ff);
  color: #1d4ed8;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(37, 99, 235, .14);
}
body.android-app.driving-mode #drivingModeButton.driving-mode-toggle {
  position: sticky;
  top: 8px;
  z-index: 3000;
  background: linear-gradient(135deg, #16a34a, #2563eb);
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 10px 28px rgba(37, 99, 235, .24);
}
html[data-theme="dark"] body.android-app #drivingModeButton.driving-mode-toggle,
body.dark-theme.android-app #drivingModeButton.driving-mode-toggle {
  background: linear-gradient(135deg, rgba(34,211,238,.15), rgba(59,130,246,.18));
  color: #bfdbfe;
}

body.android-app .account-tab-card .settings-submenu {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 8px 0 !important;
}
body.android-app .account-tab-card .settings-submenu-summary {
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) 28px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 62px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(148,163,184,.25) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.06) !important;
  cursor: pointer !important;
}
body.android-app .settings-submenu[open] .settings-submenu-summary {
  background: #eff6ff !important;
  border-color: rgba(59,130,246,.25) !important;
}
body.android-app .settings-submenu-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #dbeafe !important;
  font-size: 1.22rem !important;
}
body.android-app .settings-submenu-title {
  font-weight: 900 !important;
  text-align: right !important;
}
body.android-app .settings-submenu-body {
  padding: 12px 4px 4px !important;
}
body.android-app .settings-submenu:not([open]) .settings-submenu-body {
  display: none !important;
}
html[data-theme="dark"] body.android-app .account-tab-card .settings-submenu-summary,
body.dark-theme.android-app .account-tab-card .settings-submenu-summary {
  background: rgba(15,23,42,.82) !important;
  border-color: rgba(125,211,252,.16) !important;
}
html[data-theme="dark"] body.android-app .settings-submenu[open] .settings-submenu-summary,
body.dark-theme.android-app .settings-submenu[open] .settings-submenu-summary {
  background: rgba(30,64,175,.22) !important;
}
html[data-theme="dark"] body.android-app .settings-submenu-icon,
body.dark-theme.android-app .settings-submenu-icon {
  background: rgba(59,130,246,.18) !important;
}

body.android-app.completed-mode .note-item,
body.android-app.completed-mode .note-content,
body.android-app.completed-mode .note-title-line,
body.android-app.completed-mode .note-text,
body.android-app.completed-mode .note-mobile-actions {
  direction: rtl !important;
  text-align: right !important;
}
body.android-app.completed-mode .note-item.completed {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
  border-right: 4px solid #22c55e !important;
  border-left: 1px solid rgba(148,163,184,.22) !important;
  padding-right: 14px !important;
}
body.android-app.completed-mode .note-title-line {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 9px !important;
}
body.android-app.completed-mode .note-checkbox {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  flex: 0 0 auto !important;
}
body.android-app.completed-mode .note-mobile-actions {
  justify-content: flex-start !important;
}
html[data-theme="dark"] body.android-app.completed-mode .note-item.completed,
body.dark-theme.android-app.completed-mode .note-item.completed {
  background: rgba(15,23,42,.78) !important;
  border-right-color: #22c55e !important;
}

@media (max-width: 900px) {
  body.android-app.chat-mode .app-shell {
    padding-inline: 4px !important;
  }
  body.android-app.chat-mode .main {
    padding-inline: 0 !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
  body.android-app.chat-mode .chat-tab-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px !important;
    border-radius: 14px !important;
    min-height: calc(100dvh - 154px) !important;
  }
  body.android-app.chat-mode .chat-tab-card .chat-shell,
  body.android-app.chat-mode .chat-tab-card .chat-body {
    height: 100% !important;
    min-height: 0 !important;
  }
  body.android-app.chat-mode .chat-tab-card .chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 6px 10px !important;
  }
  body.android-app.chat-mode .chat-tab-card .chat-collaborators {
    margin: 0 0 4px !important;
    padding: 4px !important;
    max-height: 86px !important;
  }
  body.android-app.chat-mode .input-section {
    inset-inline: 4px !important;
    padding-top: 3px !important;
    padding-bottom: max(5px, env(safe-area-inset-bottom)) !important;
  }
  body.android-app.chat-mode .text-input-card.compact-composer {
    gap: 4px !important;
    padding: 7px !important;
    min-height: 56px !important;
    border-radius: 18px !important;
  }
  html[dir="rtl"] body.android-app.chat-mode .text-input-card.compact-composer {
    direction: ltr !important;
    display: grid !important;
    grid-template-columns: 52px 42px minmax(0,1fr) 42px !important;
    grid-template-areas: "send voice input file" !important;
  }
  html[dir="rtl"] body.android-app.chat-mode #addButton { grid-area: send !important; }
  html[dir="rtl"] body.android-app.chat-mode .compact-voice-box { grid-area: voice !important; }
  html[dir="rtl"] body.android-app.chat-mode #noteInput {
    grid-area: input !important;
    direction: rtl !important;
    text-align: right !important;
  }
  html[dir="rtl"] body.android-app.chat-mode .main-chat-file-button { grid-area: file !important; }
}

@media (max-width: 720px) {
  body.android-app:not(.chat-mode):not(.driving-mode) .compact-voice-box {
    bottom: calc(100% + 18px) !important;
  }
  body.android-app:not(.chat-mode):not(.driving-mode) .notes-area {
    padding-bottom: calc(10rem + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 720px) {
  body.android-app.driving-mode .header,
  body.android-app.driving-mode .task-quick-filters-host,
  body.android-app.driving-mode .calendar-planner,
  body.android-app.driving-mode .settings-card,
  body.android-app.driving-mode .app-footer {
    display: none !important;
  }
  body.android-app.driving-mode .app-shell {
    padding: 8px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
  body.android-app.driving-mode .main {
    flex: 1 1 auto !important;
    padding: 0 0 calc(162px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }
  body.android-app.driving-mode .notes-area {
    padding: 8px 0 16px !important;
    margin-top: 4px !important;
  }
  body.android-app.driving-mode .note-item {
    border-radius: 22px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    border: 2px solid rgba(59,130,246,.16) !important;
    background: #fff !important;
  }
  body.android-app.driving-mode .note-text {
    font-size: 1.18rem !important;
    line-height: 1.8 !important;
    font-weight: 800 !important;
  }
  body.android-app.driving-mode .note-mobile-actions {
    min-height: 54px !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  body.android-app.driving-mode .note-mobile-actions .note-checkbox,
  body.android-app.driving-mode .note-mobile-actions .delete-button,
  body.android-app.driving-mode .note-mobile-actions .task-drag-handle,
  body.android-app.driving-mode .task-inline-button,
  body.android-app.driving-mode .note-due-action-button {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 18px !important;
  }
  body.android-app.driving-mode .input-section {
    position: fixed !important;
    inset-inline: 8px !important;
    bottom: 0 !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
  body.android-app.driving-mode .text-input-card.compact-composer,
  body.android-app.driving-mode .app-shell .input-section .text-input-card.compact-composer {
    min-height: 132px !important;
    padding: 12px !important;
    border-radius: 28px !important;
    grid-template-columns: 96px minmax(0,1fr) !important;
    gap: 10px !important;
  }
  body.android-app.driving-mode #noteInput {
    height: 68px !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
  }
  body.android-app.driving-mode #addButton {
    min-width: 96px !important;
    height: 68px !important;
    border-radius: 22px !important;
    font-size: 1.08rem !important;
  }
  body.android-app.driving-mode .compact-voice-box {
    bottom: calc(100% + 10px) !important;
  }
  body.android-app.driving-mode .compact-voice-box .voice-button {
    width: 6.6rem !important;
    height: 6.6rem !important;
    min-width: 6.6rem !important;
    flex-basis: 6.6rem !important;
    box-shadow: 0 16px 36px rgba(59,130,246,.34), 0 0 28px rgba(96,165,250,.30) !important;
  }
  body.android-app.driving-mode .compact-voice-box .voice-button svg {
    width: 2.65rem !important;
    height: 2.65rem !important;
  }
  html[data-theme="dark"] body.android-app.driving-mode .note-item,
  body.dark-theme.android-app.driving-mode .note-item {
    background: rgba(15,23,42,.88) !important;
    border-color: rgba(125,211,252,.16) !important;
  }
}


/* 1.4.61 - Android settings pages, full-screen chat, centered due calendar */
body.android-app #drivingModeButton {
  display: none !important;
}
body.android-app .cloud-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}
body.android-app .cloud-driving-icon-button.active {
  background: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.25) !important;
}
body.android-app .settings-page-hub {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 12px !important;
}
body.android-app .settings-page-card {
  min-height: 98px !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  background: #fff !important;
  border-radius: 22px !important;
  padding: 14px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  font-family: inherit !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.07) !important;
}
body.android-app .settings-page-card-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #eff6ff !important;
  font-size: 1.45rem !important;
}
body.android-app .settings-page-card-title {
  font-size: .92rem !important;
  line-height: 1.45 !important;
  text-align: center !important;
}
body.android-app .settings-page-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 0 !important;
}
body.android-app .settings-page-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 0 10px !important;
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
}
body.android-app .settings-page-back {
  border: 0 !important;
  border-radius: 14px !important;
  background: #e2e8f0 !important;
  color: #0f172a !important;
  padding: 9px 14px !important;
  font-family: inherit !important;
  font-weight: 900 !important;
}
body.android-app .settings-page-title {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
}
body.android-app .about-developer-section .about-ioapp-link {
  text-decoration: none !important;
  text-align: center !important;
  margin-top: 8px !important;
}

body.android-app .jalali-date-picker.android-calendar-only {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 340px) !important;
  max-height: min(82dvh, 560px) !important;
  overflow: auto !important;
  z-index: 99999 !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.28) !important;
}
body.android-app .jalali-date-picker.android-calendar-only .jalali-time-row {
  display: none !important;
}
body.android-app .jalali-date-picker.android-calendar-only .jalali-picker-actions {
  position: sticky !important;
  bottom: 0 !important;
  background: inherit !important;
  padding-top: 10px !important;
}
body.android-app .android-temp-due-input {
  position: fixed !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

@media (max-width: 900px) {
  body.android-app.chat-mode .app-shell {
    padding: 0 !important;
    overflow: hidden !important;
  }
  body.android-app.chat-mode .main {
    padding: 0 0 calc(68px + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }
  body.android-app.chat-mode .cloud-card.chat-tab-card:not([hidden]),
  body.android-app.chat-mode .chat-tab-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100dvh - 118px) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden !important;
  }
  body.android-app.chat-mode .cloud-card.chat-tab-card:not([hidden]) .chat-subsection,
  body.android-app.chat-mode .chat-tab-card .chat-subsection {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }
  body.android-app.chat-mode .chat-subsection > h3 {
    display: none !important;
  }
  body.android-app.chat-mode .chat-tab-card .chat-shell,
  body.android-app.chat-mode .chat-shell-expanded {
    height: 100% !important;
    min-height: 0 !important;
    gap: 0 !important;
  }
  body.android-app.chat-mode .chat-shell.no-active-chat .chat-collaborators {
    height: 100% !important;
    max-height: none !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.android-app.chat-mode .chat-shell.has-active-chat .chat-body {
    height: 100% !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 6px !important;
  }
  body.android-app.chat-mode .chat-title-line {
    margin: 0 !important;
    padding: 8px 4px !important;
    border-bottom: 1px solid rgba(148,163,184,.18) !important;
  }
  body.android-app.chat-mode .chat-messages {
    padding: 8px 4px 12px !important;
  }
  body.android-app.chat-mode .input-section {
    inset-inline: 0 !important;
    padding-inline: 6px !important;
  }
}

html[dir="rtl"] body.android-app.completed-mode .note-item,
html[dir="rtl"] body.android-app.completed-mode .note-content,
html[dir="rtl"] body.android-app.completed-mode .note-title-line,
html[dir="rtl"] body.android-app.completed-mode .note-text,
html[dir="rtl"] body.android-app.completed-mode .note-due,
html[dir="rtl"] body.android-app.completed-mode .note-meta,
html[dir="rtl"] body.android-app.completed-mode .note-mobile-actions {
  direction: rtl !important;
  text-align: right !important;
}
html[dir="rtl"] body.android-app.completed-mode .note-content {
  align-items: stretch !important;
  width: 100% !important;
}
html[dir="rtl"] body.android-app.completed-mode .note-title-line {
  justify-content: flex-start !important;
  flex-direction: row !important;
  width: 100% !important;
}
html[dir="rtl"] body.android-app.completed-mode .note-text {
  flex: 1 1 auto !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 8px !important;
}
html[dir="rtl"] body.android-app.completed-mode .note-mobile-actions {
  justify-content: flex-start !important;
  flex-direction: row !important;
}
html[data-theme="dark"] body.android-app .settings-page-card,
body.dark-theme.android-app .settings-page-card {
  background: rgba(15,23,42,.86) !important;
  color: #e2e8f0 !important;
  border-color: rgba(125,211,252,.16) !important;
}
html[data-theme="dark"] body.android-app .settings-page-card-icon,
body.dark-theme.android-app .settings-page-card-icon {
  background: rgba(59,130,246,.18) !important;
}
html[data-theme="dark"] body.android-app .settings-page-back,
body.dark-theme.android-app .settings-page-back {
  background: rgba(51,65,85,.95) !important;
  color: #e2e8f0 !important;
}

/* 1.4.61 - driving mode is controlled from the Settings header icon, not as a settings row */
body.android-app .setting-driving-row {
  display: none !important;
}


/* 1.4.63 - Android fixes: driving exit, Persian chat composer left send, time-enabled due picker, redesigned completed cards */
body.android-app .driving-exit-button {
  display: none;
}
@media (max-width: 720px) {
  body.android-app.driving-mode .driving-exit-button {
    display: inline-flex !important;
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    inset-inline-start: 10px !important;
    z-index: 120000 !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 18px !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: inherit !important;
    font-weight: 950 !important;
    font-size: .96rem !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ef4444, #f97316) !important;
    box-shadow: 0 12px 28px rgba(239,68,68,.30) !important;
  }
  body.android-app.driving-mode .main {
    padding-top: 62px !important;
  }
}
html[dir="rtl"] body.android-app.chat-mode .text-input-card.compact-composer,
html[dir="rtl"] body.chat-mode .text-input-card.compact-composer {
  direction: ltr !important;
  display: grid !important;
  grid-template-columns: 56px 44px minmax(0, 1fr) 42px !important;
  grid-template-areas: "send voice input file" !important;
  align-items: center !important;
}
html[dir="rtl"] body.android-app.chat-mode #addButton,
html[dir="rtl"] body.chat-mode #addButton {
  grid-area: send !important;
  justify-self: start !important;
  order: -20 !important;
  margin: 0 !important;
}
html[dir="rtl"] body.android-app.chat-mode .compact-voice-box,
html[dir="rtl"] body.chat-mode .compact-voice-box {
  grid-area: voice !important;
  justify-self: center !important;
  order: -10 !important;
}
html[dir="rtl"] body.android-app.chat-mode #noteInput,
html[dir="rtl"] body.chat-mode #noteInput {
  grid-area: input !important;
  direction: rtl !important;
  text-align: right !important;
  order: 0 !important;
}
html[dir="rtl"] body.android-app.chat-mode .main-chat-file-button,
html[dir="rtl"] body.chat-mode .main-chat-file-button {
  grid-area: file !important;
  order: 1 !important;
}
body.android-app .jalali-date-picker.android-calendar-only {
  width: min(94vw, 372px) !important;
  max-height: min(88dvh, 650px) !important;
}
body.android-app .jalali-date-picker.android-calendar-only .jalali-time-row {
  display: grid !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(148,163,184,.20) !important;
}
body.android-app .jalali-date-picker.android-calendar-only .jalali-time-title {
  display: block !important;
  text-align: center !important;
  font-weight: 900 !important;
}
body.android-app .jalali-date-picker.android-calendar-only .jalali-time-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}
body.android-app .jalali-date-picker.android-calendar-only .time-step-button {
  min-height: 34px !important;
}
body.android-app .jalali-date-picker.android-calendar-only .date-picker-primary {
  min-height: 44px !important;
}
html[data-theme="dark"] body.android-app .jalali-date-picker.android-calendar-only .jalali-time-row,
body.dark-theme.android-app .jalali-date-picker.android-calendar-only .jalali-time-row {
  background: rgba(15,23,42,.80) !important;
  border-color: rgba(125,211,252,.16) !important;
}
html[dir="rtl"] body.android-app.completed-mode .note-item.completed {
  direction: rtl !important;
  text-align: right !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "content" "actions" !important;
  gap: 12px !important;
  padding: 15px 16px !important;
  border: 0 !important;
  border-right: 7px solid #22c55e !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 56%, #eff6ff 100%) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
}
html[dir="rtl"] body.android-app.completed-mode .note-item.completed .note-content {
  grid-area: content !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 9px !important;
  direction: rtl !important;
  text-align: right !important;
}
html[dir="rtl"] body.android-app.completed-mode .note-item.completed .note-title-line {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
  direction: rtl !important;
  text-align: right !important;
}
html[dir="rtl"] body.android-app.completed-mode .note-item.completed .note-checkbox {
  grid-column: 1 !important;
  margin: 4px 0 0 !important;
  width: 28px !important;
  height: 28px !important;
  accent-color: #22c55e !important;
}
html[dir="rtl"] body.android-app.completed-mode .note-item.completed .note-text {
  grid-column: 2 !important;
  direction: rtl !important;
  text-align: right !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  margin: 0 !important;
  color: #0f172a !important;
  text-decoration: none !important;
  opacity: .92 !important;
}
html[dir="rtl"] body.android-app.completed-mode .note-item.completed .note-mobile-actions {
  grid-area: actions !important;
  direction: rtl !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  padding-top: 10px !important;
  border-top: 1px dashed rgba(34,197,94,.28) !important;
}
html[dir="rtl"] body.android-app.completed-mode .note-item.completed::before {
  content: "تکمیل شده" !important;
  justify-self: start !important;
  grid-row: 1 !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #dcfce7 !important;
  color: #166534 !important;
  font-size: .76rem !important;
  font-weight: 950 !important;
}
html[dir="rtl"] body.android-app.completed-mode .note-item.completed .note-content {
  margin-top: 0 !important;
}
html[data-theme="dark"] html[dir="rtl"] body.android-app.completed-mode .note-item.completed,
html[dir="rtl"] body.dark-theme.android-app.completed-mode .note-item.completed,
html[data-theme="dark"] body.android-app.completed-mode .note-item.completed {
  background: linear-gradient(135deg, rgba(20,83,45,.30), rgba(15,23,42,.92) 54%, rgba(30,58,138,.22)) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.30) !important;
}
html[data-theme="dark"] body.android-app.completed-mode .note-item.completed .note-text,
body.dark-theme.android-app.completed-mode .note-item.completed .note-text {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] body.android-app.completed-mode .note-item.completed::before,
body.dark-theme.android-app.completed-mode .note-item.completed::before {
  background: rgba(34,197,94,.18) !important;
  color: #bbf7d0 !important;
}


/* 1.4.63 - Shared Web/Extension polish and compact completed task cards */
body.android-app .cloud-header-actions,
body .cloud-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

/* On desktop keep the chat workspace clean without forcing the mobile full-screen layout. */
@media (min-width: 901px) {
  body.android-app.chat-mode .chat-tab-card {
    border-radius: 22px !important;
  }
  body.android-app.chat-mode .chat-tab-card .chat-shell {
    min-height: 58vh !important;
  }
  body.android-app.chat-mode .chat-tab-card .chat-body {
    min-height: 58vh !important;
  }
  body.android-app.chat-mode .chat-messages {
    min-height: 44vh !important;
  }
}

/* Driving mode must always have a visible exit route. */
body.android-app.driving-mode .driving-exit-button {
  display: inline-flex !important;
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top)) !important;
  inset-inline-start: 10px !important;
  z-index: 120000 !important;
  min-height: 46px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
  font-weight: 950 !important;
  font-size: .94rem !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #ef4444, #f97316) !important;
  box-shadow: 0 12px 28px rgba(239,68,68,.30) !important;
}

/* Completed cards: compact, delete-only, strikethrough text. */
body.completed-mode .note-item.completed,
body.android-app.completed-mode .note-item.completed,
html[dir="rtl"] body.android-app.completed-mode .note-item.completed {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  border-radius: 14px !important;
  background: rgba(248,250,252,.90) !important;
  box-shadow: none !important;
  opacity: .88 !important;
}

html[dir="rtl"] body.completed-mode .note-item.completed,
html[dir="rtl"] body.android-app.completed-mode .note-item.completed {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="ltr"] body.completed-mode .note-item.completed,
html[dir="ltr"] body.android-app.completed-mode .note-item.completed {
  direction: ltr !important;
  text-align: left !important;
}

body.completed-mode .note-item.completed .note-content,
body.android-app.completed-mode .note-item.completed .note-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

body.completed-mode .note-item.completed .note-title-line,
body.android-app.completed-mode .note-item.completed .note-title-line {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.completed-mode .note-item.completed .note-checkbox,
body.completed-mode .note-item.completed .note-due-editor,
body.completed-mode .note-item.completed .note-due,
body.completed-mode .note-item.completed .note-meta,
body.completed-mode .note-item.completed .recurrence-badge,
body.completed-mode .note-item.completed .assignment-status-badge,
body.completed-mode .note-item.completed .desktop-assignment-marker,
body.completed-mode .note-item.completed .mobile-assignment-marker,
body.completed-mode .note-item.completed .due-progress-wrap,
body.completed-mode .note-item.completed .due-progress-line,
body.completed-mode .note-item.completed .completion-confirm-box,
body.android-app.completed-mode .note-item.completed .note-checkbox,
body.android-app.completed-mode .note-item.completed .note-due-editor,
body.android-app.completed-mode .note-item.completed .note-due,
body.android-app.completed-mode .note-item.completed .note-meta,
body.android-app.completed-mode .note-item.completed .recurrence-badge,
body.android-app.completed-mode .note-item.completed .assignment-status-badge,
body.android-app.completed-mode .note-item.completed .desktop-assignment-marker,
body.android-app.completed-mode .note-item.completed .mobile-assignment-marker,
body.android-app.completed-mode .note-item.completed .due-progress-wrap,
body.android-app.completed-mode .note-item.completed .due-progress-line,
body.android-app.completed-mode .note-item.completed .completion-confirm-box,
body.android-app.completed-mode .note-item.completed::before {
  display: none !important;
  content: none !important;
}

body.completed-mode .note-item.completed .note-text,
body.android-app.completed-mode .note-item.completed .note-text {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #64748b !important;
  font-size: .92rem !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px !important;
  text-decoration-color: rgba(100,116,139,.75) !important;
  opacity: .85 !important;
  white-space: normal !important;
}

body.completed-mode .note-item.completed .note-mobile-actions,
body.android-app.completed-mode .note-item.completed .note-mobile-actions {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  background: transparent !important;
}

body.completed-mode .note-item.completed .note-mobile-actions > :not(.delete-button),
body.android-app.completed-mode .note-item.completed .note-mobile-actions > :not(.delete-button) {
  display: none !important;
}

body.completed-mode .note-item.completed .delete-button,
body.android-app.completed-mode .note-item.completed .delete-button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 7px !important;
  border-radius: 12px !important;
  opacity: .88 !important;
}

@media (max-width: 720px) {
  body.completed-mode .notes-list,
  body.android-app.completed-mode .notes-list {
    gap: 6px !important;
  }
  body.completed-mode .note-item.completed,
  body.android-app.completed-mode .note-item.completed,
  html[dir="rtl"] body.android-app.completed-mode .note-item.completed {
    padding: 7px 9px !important;
    border-radius: 13px !important;
  }
  body.completed-mode .note-item.completed .note-text,
  body.android-app.completed-mode .note-item.completed .note-text {
    font-size: .88rem !important;
    line-height: 1.45 !important;
  }
  body.completed-mode .note-item.completed .delete-button,
  body.android-app.completed-mode .note-item.completed .delete-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
}

html[data-theme="dark"] body.completed-mode .note-item.completed,
html[data-theme="dark"] body.android-app.completed-mode .note-item.completed,
body.dark-theme.completed-mode .note-item.completed,
body.dark-theme.android-app.completed-mode .note-item.completed {
  background: rgba(15,23,42,.72) !important;
  border-color: rgba(125,211,252,.13) !important;
}

html[data-theme="dark"] body.completed-mode .note-item.completed .note-text,
html[data-theme="dark"] body.android-app.completed-mode .note-item.completed .note-text,
body.dark-theme.completed-mode .note-item.completed .note-text,
body.dark-theme.android-app.completed-mode .note-item.completed .note-text {
  color: #94a3b8 !important;
  text-decoration-color: rgba(148,163,184,.70) !important;
}


/* 1.4.64 - Completed task card restore action, completion timestamp, and stronger strikethrough. */
body.completed-mode .note-item.completed .completed-task-meta,
body.android-app.completed-mode .note-item.completed .completed-task-meta {
  display: block !important;
  margin-top: 3px !important;
  color: #94a3b8 !important;
  font-size: .76rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  white-space: normal !important;
}
body.completed-mode .note-item.completed .note-text,
body.android-app.completed-mode .note-item.completed .note-text {
  text-decoration-line: line-through !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: rgba(239,68,68,.74) !important;
  text-decoration-skip-ink: none !important;
}
body.completed-mode .note-item.completed .note-mobile-actions,
body.android-app.completed-mode .note-item.completed .note-mobile-actions {
  gap: 6px !important;
}
body.completed-mode .note-item.completed .note-mobile-actions > .restore-button,
body.android-app.completed-mode .note-item.completed .note-mobile-actions > .restore-button,
body.completed-mode .note-item.completed .note-mobile-actions > .completed-restore-button,
body.android-app.completed-mode .note-item.completed .note-mobile-actions > .completed-restore-button {
  display: inline-flex !important;
}
body.completed-mode .note-item.completed .restore-button,
body.android-app.completed-mode .note-item.completed .restore-button,
body.completed-mode .note-item.completed .completed-restore-button,
body.android-app.completed-mode .note-item.completed .completed-restore-button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
  font-size: 1.1rem !important;
  font-weight: 950 !important;
  color: #0f766e !important;
  background: #ccfbf1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
body.completed-mode .note-item.completed .restore-button:hover,
body.android-app.completed-mode .note-item.completed .restore-button:hover {
  background: #99f6e4 !important;
  transform: translateY(-1px) !important;
}
@media (max-width: 720px) {
  body.completed-mode .note-item.completed .completed-task-meta,
  body.android-app.completed-mode .note-item.completed .completed-task-meta {
    font-size: .72rem !important;
  }
  body.completed-mode .note-item.completed .restore-button,
  body.android-app.completed-mode .note-item.completed .restore-button,
  body.completed-mode .note-item.completed .completed-restore-button,
  body.android-app.completed-mode .note-item.completed .completed-restore-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
}
html[data-theme="dark"] body.completed-mode .note-item.completed .completed-task-meta,
html[data-theme="dark"] body.android-app.completed-mode .note-item.completed .completed-task-meta,
body.dark-theme.completed-mode .note-item.completed .completed-task-meta,
body.dark-theme.android-app.completed-mode .note-item.completed .completed-task-meta {
  color: #7dd3fc !important;
}
html[data-theme="dark"] body.completed-mode .note-item.completed .restore-button,
html[data-theme="dark"] body.android-app.completed-mode .note-item.completed .restore-button,
body.dark-theme.completed-mode .note-item.completed .restore-button,
body.dark-theme.android-app.completed-mode .note-item.completed .restore-button {
  color: #99f6e4 !important;
  background: rgba(20,184,166,.22) !important;
}


/* 1.4.65 - Restore warning popup and muted completed-task text */
body.completed-mode .note-item.completed .note-text,
body.android-app.completed-mode .note-item.completed .note-text,
.note-item.completed .note-text {
  color: #64748b !important;
  opacity: .82 !important;
  text-decoration-line: line-through !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: rgba(100,116,139,.86) !important;
  text-decoration-skip-ink: none !important;
}
html[data-theme="dark"] body.completed-mode .note-item.completed .note-text,
html[data-theme="dark"] body.android-app.completed-mode .note-item.completed .note-text,
html[data-theme="dark"] .note-item.completed .note-text,
body.dark-theme.completed-mode .note-item.completed .note-text,
body.dark-theme.android-app.completed-mode .note-item.completed .note-text,
body.dark-theme .note-item.completed .note-text {
  color: #94a3b8 !important;
  opacity: .78 !important;
  text-decoration-color: rgba(148,163,184,.82) !important;
}
.restore-warning-popup .restore-warning-message {
  color: #475569 !important;
  font-size: .94rem !important;
  line-height: 1.8 !important;
  text-align: start !important;
  margin: 0 !important;
}
.restore-warning-popup .task-action-modal-actions {
  justify-content: center !important;
  margin-top: 14px !important;
}
.restore-warning-popup .cloud-button.primary {
  min-width: 150px !important;
}
html[data-theme="dark"] .restore-warning-popup .restore-warning-message,
body.dark-theme .restore-warning-popup .restore-warning-message {
  color: #cbd5e1 !important;
}


/* 1.4.73 - Soft update reminder for Android and Chrome Extension. */
.app-update-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .46);
  backdrop-filter: blur(8px);
}
.app-update-modal {
  width: min(92vw, 440px);
  border-radius: 24px;
  padding: 24px 22px 20px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, .92);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
  text-align: center;
  color: #0f172a;
}
.app-update-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: linear-gradient(135deg, #e0f2fe, #dbeafe);
}
.app-update-modal h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 900;
}
.app-update-message {
  margin: 0 0 14px;
  color: #334155;
  line-height: 1.8;
  font-weight: 650;
}
.app-update-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.app-update-meta span {
  border-radius: 14px;
  background: #f8fafc;
  padding: 8px 10px;
  color: #475569;
  font-size: .82rem;
  font-weight: 800;
}
.app-update-help {
  margin: 10px 0 16px;
  color: #64748b;
  font-size: .84rem;
  line-height: 1.75;
}
.app-update-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.app-update-actions .cloud-button {
  min-width: 110px;
  justify-content: center;
}
.app-update-inline-banner {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 99998;
  max-width: min(92vw, 520px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .92);
  color: #fff;
  box-shadow: 0 12px 36px rgba(15, 23, 42, .28);
  font-size: .86rem;
  font-weight: 800;
}
.app-update-inline-banner button {
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: #38bdf8;
  color: #082f49;
  font-weight: 900;
  cursor: pointer;
}
html[data-theme="dark"] .app-update-modal,
body.dark-theme .app-update-modal {
  background: #0f172a;
  border-color: rgba(148, 163, 184, .22);
  color: #e2e8f0;
}
html[data-theme="dark"] .app-update-message,
body.dark-theme .app-update-message { color: #cbd5e1; }
html[data-theme="dark"] .app-update-meta span,
body.dark-theme .app-update-meta span {
  background: rgba(30, 41, 59, .82);
  color: #cbd5e1;
}
html[data-theme="dark"] .app-update-help,
body.dark-theme .app-update-help { color: #94a3b8; }
@media (max-width: 520px) {
  .app-update-modal { padding: 22px 16px 18px; }
  .app-update-meta { grid-template-columns: 1fr; }
  .app-update-actions { flex-direction: column-reverse; }
  .app-update-actions .cloud-button { width: 100%; }
  .app-update-inline-banner { width: calc(100vw - 24px); justify-content: space-between; }
}