* {
  box-sizing: border-box;
}

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-alt: #f0f2f5;
  --border: #d7dce3;
  --text: #1a1f29;
  --muted: #6b7280;
  --primary: #111827;
  --accent: #2563eb;
  --success: #1f7a3f;
  --warning: #9a6b00;
  --danger: #a22929;
}

:root[data-theme="dark"] {
  --bg: #0f172a;
  --surface: #111827;
  --surface-alt: #1f2937;
  --border: #334155;
  --text: #f8fafc;
  --muted: #94a3b8;
  --primary: #2563eb;
  --accent: #38bdf8;
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
}

:root[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .employee-chat-card,
:root[data-theme="dark"] .notifications-panel,
:root[data-theme="dark"] .mobile-topbar,
:root[data-theme="dark"] .mobile-bottom-nav,
:root[data-theme="dark"] .mobile-topbar-more-panel,
:root[data-theme="dark"] .mobile-chat-head-panel {
  background: rgba(17, 24, 39, 0.97);
  color: var(--text);
  border-color: var(--border);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .button,
:root[data-theme="dark"] .button-secondary {
  background: #0b1220;
  color: var(--text);
  border-color: var(--border);
}

:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td {
  background: #111827;
  border-color: var(--border);
}

:root[data-theme="dark"] .employee-chat-card,
:root[data-theme="dark"] .chat-mobile-search-input,
:root[data-theme="dark"] .mobile-topbar-icon-button,
:root[data-theme="dark"] .mobile-topbar-more-item {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}


html, body {
  margin: 0;
  padding: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

body {
  min-height: 100vh;
}

.layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
}

.sidebar {
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 24px 20px;
}

.brand {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.brand-title {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.01em;
}

.brand-subtitle {
  color: var(--muted);
  margin-top: 4px;
  font-size: 14px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.nav-link {
  display: block;
  text-decoration: none;
  color: var(--text);
  padding: 12px 14px;
  border: 1px solid transparent;
  background: transparent;
}

.nav-link:hover {
  background: var(--surface-alt);
  border-color: var(--border);
}

.nav-link.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.content {
  padding: 24px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.topbar h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
}

.topbar-subtitle {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

.topbar-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.user-box {
  text-align: right;
}

.user-name {
  font-weight: 700;
}

.user-email {
  font-size: 13px;
  color: var(--muted);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 18px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-label {
  color: var(--muted);
  font-size: 14px;
}

.stat-value {
  font-size: 28px;
  font-weight: 800;
  word-break: break-word;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field span {
  font-size: 13px;
  color: var(--muted);
}

.field-inline {
  min-width: 180px;
}

input,
select,
textarea,
button {
  font: inherit;
  border-radius: 0;
}

input[type="date"],
input[type="email"],
input[type="password"],
input[type="text"],
input[type="file"],
select,
textarea {
  border: 1px solid var(--border);
  background: white;
  color: var(--text);
  padding: 10px 12px;
  min-height: 44px;
}

.button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: white;
  color: var(--text);
}

.button-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.button-secondary {
  background: white;
  border-color: var(--border);
  color: var(--text);
}

.button:hover {
  opacity: 0.95;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
}

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 840px;
}

.table th,
.table td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  background: white;
}

.table th {
  background: var(--surface-alt);
  font-size: 13px;
}

.wrap {
  word-break: break-word;
  max-width: 360px;
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.badge-success {
  background: #eaf8ef;
  color: var(--success);
  border-color: #b7ddc2;
}

.badge-warning {
  background: #fff6df;
  color: var(--warning);
  border-color: #f1d48b;
}

.badge-danger {
  background: #fdecec;
  color: var(--danger);
  border-color: #f0bcbc;
}

.badge-muted {
  background: #eef0f3;
  color: var(--muted);
  border-color: #d6dbe2;
}

.two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.alert {
  border: 1px solid var(--border);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.alert-danger {
  background: #fdecec;
  border-color: #f0bcbc;
  color: var(--danger);
}

.alert-info {
  background: #eef5ff;
  border-color: #c7d8f6;
  color: #184a8d;
}

.muted {
  color: var(--muted);
}

.login-body {
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.login-card {
  width: min(100%, 420px);
  background: white;
  border: 1px solid var(--border);
  padding: 28px;
}

.login-card h1 {
  margin: 12px 0 8px;
  font-size: 28px;
}

.login-brand {
  margin-bottom: 16px;
}

@media (max-width: 1100px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .two-columns {
    grid-template-columns: 1fr;
  }
}

.code-box {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 10px 12px;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.compact-table .table {
  min-width: 0;
}

.permission-body {
  min-height: 100vh;
  background: var(--bg);
}

.permission-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.permission-card {
  width: min(100%, 720px);
  background: #fff;
  border: 1px solid var(--border);
  padding: 28px;
}

.permission-brand {
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 12px;
}

.permission-card h1 {
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.1;
}

.permission-subtitle {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.5;
}

.checkbox-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--border);
  padding: 12px;
}

.checkbox-row input {
  margin-top: 4px;
  width: auto;
  min-height: auto;
}

.permission-submit {
  width: 100%;
}

.permission-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.permission-form-error {
  margin-bottom: 16px;
}

.permission-captcha {
  display: flex;
  justify-content: center;
}

.permission-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.permission-success-card {
  width: min(100%, 640px);
}

.permission-code-box {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 16px;
  margin: 18px 0;
}

.permission-code {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.permission-next-steps {
  border-top: 1px solid var(--border);
  margin-top: 18px;
  padding-top: 18px;
}

.permission-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-top: 18px;
}

@media (max-width: 980px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .two-columns {
    grid-template-columns: 1fr;
  }
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.actions-row-top {
  margin-bottom: 20px;
}

.actions-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.button-small {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.field-search-wide {
  min-width: min(100%, 420px);
  flex: 1 1 420px;
}

.permissions-table .table,
.permissions-table.table {
  min-width: 1100px;
}

.small-text {
  font-size: 12px;
}

.stat-value-small {
  font-size: 18px;
  line-height: 1.4;
}

.share-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.share-row input {
  flex: 1 1 auto;
}

.detail-card {
  margin-bottom: 20px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.detail-item {
  border: 1px solid var(--border);
  padding: 12px;
}

.detail-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.detail-value {
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
}

.json-box {
  margin: 0;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .share-row {
    flex-direction: column;
    align-items: stretch;
  }
}

.actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.permission-section-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.permission-children-block {
  border: 1px solid var(--border);
  padding: 14px;
  background: var(--surface-alt);
}

.permission-children-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.permission-child-card {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 12px;
}

.permission-child-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.permission-child-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.compact-checkbox {
  padding: 10px 12px;
  background: var(--surface);
}

.permission-foreign-confirm {
  margin-top: 8px;
}

@media (max-width: 700px) {
  .permission-section-header,
  .permission-child-header {
    flex-direction: column;
    align-items: stretch;
  }

  .permission-child-grid {
    grid-template-columns: 1fr;
  }
}


.editable-cell {
  cursor: pointer;
  min-width: 190px;
}

.editable-cell:hover {
  background: var(--surface-alt);
}

.editable-cell.is-editing {
  cursor: default;
  background: var(--surface-alt);
}

.editable-main {
  font-weight: 600;
}

.editable-hint {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

.inline-editor-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inline-editor-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inline-editor-field span {
  font-size: 12px;
  color: var(--muted);
}

.inline-editor-input {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
}

.inline-editor-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.actions-stack-icons {
  gap: 6px;
}

.icon-button {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
}

.permissions-table .table,
.permissions-table.table {
  min-width: 980px;
}

.editable-cell-sale {
  min-width: 160px;
}

.user-role {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.inline-form-stretch {
  width: 100%;
}

.inline-form input,
.inline-form select {
  flex: 1 1 180px;
  min-width: 0;
  min-height: 36px;
  padding: 7px 10px;
}

.table-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 240px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.page-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}

.detail-row span {
  color: var(--muted);
}

.detail-text {
  white-space: pre-wrap;
  border: 1px solid var(--border);
  padding: 12px;
  background: #fff;
}

.badge-info {
  background: #e8f1ff;
  color: #1a4b8f;
  border-color: #b9d3ff;
}

.row-danger td {
  background: #fff7f7;
}

.small-text {
  font-size: 12px;
}

@media (max-width: 760px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

.feature-details {
  border: 1px solid var(--border);
  background: #fff;
  padding: 10px 12px;
}

.feature-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
}

.feature-checks,
.feature-form {
  margin-top: 10px;
}

.feature-details-compact {
  width: 100%;
}

.checkbox-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
}

.checkbox-line input[type="checkbox"] {
  margin-top: 3px;
}

.checkbox-line small {
  color: var(--muted);
}

/* Meetings / secretary mode */
.protocol-text {
  white-space: pre-wrap;
  line-height: 1.5;
}

.print-body {
  background: #ffffff;
}

.print-page {
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: 28px;
  background: #ffffff;
}

.print-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.protocol-table {
  min-width: 0;
}

@media print {
  .no-print {
    display: none !important;
  }

  body,
  .print-body {
    background: #ffffff;
  }

  .print-page {
    width: 100%;
    padding: 0;
  }

  .table th,
  .table td {
    border-color: #222;
  }
}

/* Meeting people board */
.meeting-people-board {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.person-jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.person-jump-list a {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  text-decoration: none;
  padding: 8px 10px;
  font-size: 13px;
}

.person-task-block {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px;
}

.person-task-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.person-task-name {
  font-size: 20px;
  font-weight: 800;
}

.person-task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.person-empty {
  border: 1px dashed var(--border);
  background: var(--surface-alt);
  padding: 12px;
}

.meeting-task-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 14px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 12px;
}

.meeting-task-overdue {
  border-left: 4px solid var(--danger);
}

.meeting-task-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.meeting-task-title-row a {
  color: var(--text);
  text-decoration: none;
}

.meeting-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}

.meeting-task-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.quick-status-form select {
  width: 100%;
}

.compact-field {
  gap: 4px;
}

.compact-field span {
  font-size: 12px;
}

.inline-task-editor summary,
.person-add-task summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inline-task-editor summary::-webkit-details-marker,
.person-add-task summary::-webkit-details-marker {
  display: none;
}

.inline-task-editor[open] summary,
.person-add-task[open] summary {
  margin-bottom: 10px;
}

.task-edit-form,
.person-add-task form {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 12px;
}

.person-add-task {
  margin-top: 12px;
}

.person-add-task summary {
  width: 100%;
}

@media (max-width: 900px) {
  .meeting-task-card {
    grid-template-columns: 1fr;
  }

  .person-task-header {
    flex-direction: column;
  }
}

.report-edit-block {
  border: 1px solid var(--border);
  padding: 14px;
  background: var(--surface-alt);
}

.report-edit-block h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.copy-textarea {
  width: 100%;
  min-height: 180px;
  white-space: pre-wrap;
}

/* Warehouse */
.warehouse-tabs {
  margin-bottom: 18px;
}

.warehouse-quick-form {
  margin-bottom: 0;
}

.warehouse-table .table {
  min-width: 1120px;
}

.warehouse-report-table .table {
  min-width: 760px;
}

.warehouse-action-details {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 8px;
}

.warehouse-action-details summary {
  list-style: none;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.warehouse-action-details summary::-webkit-details-marker {
  display: none;
}

.warehouse-action-details[open] summary {
  margin-bottom: 10px;
}

.warehouse-row-form {
  background: #fff;
  border: 1px solid var(--border);
  padding: 10px;
}

.warehouse-doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.warehouse-doc-links a,
.button-link {
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.warehouse-doc-links a:hover,
.button-link:hover {
  text-decoration: none;
}


/* Mobile / PWA adaptation */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

.content,
.card,
.table-wrap,
.topbar,
.detail-value,
.permission-doc-value {
  min-width: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea,
button,
.button {
  touch-action: manipulation;
}

input[type="date"],
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="time"],
input[type="datetime-local"],
input[type="file"],
select,
textarea {
  width: 100%;
  max-width: 100%;
}

.mobile-topbar,
.mobile-sidebar-backdrop {
  display: none;
}

@media (min-width: 981px) and (max-width: 1100px) {
  .sidebar {
    padding: 16px;
  }

  .nav {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 980px) {
  body.app-body {
    --mobile-bottom-nav-height: calc(76px + env(safe-area-inset-bottom));
    padding-top: calc(60px + env(safe-area-inset-top));
  }

  body.app-body.mobile-menu-open {
    overflow: hidden;
  }

  .mobile-topbar {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 14px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 26px rgba(17, 24, 39, 0.08);
    backdrop-filter: blur(12px);
  }

  .mobile-menu-button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-brand {
    min-width: 0;
    line-height: 1.1;
  }

  .mobile-brand-title {
    font-size: 16px;
    font-weight: 800;
  }

  .mobile-brand-subtitle {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100vw - 28px);
  }

  .layout {
    display: block;
    min-height: calc(100vh - 60px - env(safe-area-inset-top));
  }

  .sidebar {
    position: fixed;
    z-index: 1002;
    top: 0;
    bottom: var(--mobile-bottom-nav-height);
    left: 0;
    width: min(86vw, 320px);
    padding: calc(20px + env(safe-area-inset-top)) 16px 20px;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-bottom-right-radius: 24px;
    box-shadow: 18px 0 40px rgba(17, 24, 39, 0.18);
    transform: translateX(-104%);
    transition: transform 0.22s ease;
    -webkit-overflow-scrolling: touch;
  }

  body.app-body.mobile-menu-open .sidebar {
    transform: translateX(0);
  }

  .mobile-sidebar-backdrop:not([hidden]) {
    position: fixed;
    z-index: 1001;
    top: 0;
    right: 0;
    bottom: var(--mobile-bottom-nav-height);
    left: 0;
    display: block;
    background: rgba(17, 24, 39, 0.38);
  }

  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .content {
    padding: 16px;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
  }

  .topbar h1 {
    font-size: 26px;
    line-height: 1.15;
  }

  .topbar-subtitle {
    overflow-wrap: anywhere;
  }

  .topbar-right {
    width: 100%;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  body.app-body .topbar-right {
    display: none;
  }

  body.app-body .topbar {
    margin-bottom: 12px;
  }

  body.app-page-chats .topbar {
    display: none;
  }

  body.app-page-chats .content {
    padding-top: 10px;
  }

  body.app-page-chats .chat-hub {
    gap: 10px;
  }

  .topbar-right form {
    flex: 1 1 120px;
  }

  .user-box {
    flex: 2 1 220px;
    text-align: left;
    min-width: 0;
  }

  .user-name,
  .user-email,
  .user-role {
    overflow-wrap: anywhere;
  }

  .cards {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }

  .card,
  .permission-card,
  .person-task-block,
  .meeting-task-card,
  .report-edit-block,
  .warehouse-action-details {
    padding: 14px;
  }

  .stat-card {
    min-height: 96px;
  }

  .stat-value {
    font-size: 24px;
    line-height: 1.15;
  }

  .filters,
  .actions-row,
  .actions-bar,
  .page-actions,
  .print-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .field,
  .field-inline,
  .field-search-wide,
  .filters .field,
  .filters .button,
  .actions-row .button,
  .actions-bar .button,
  .page-actions .button,
  .print-actions .button,
  .topbar-right .button,
  .permission-back,
  .permission-submit {
    width: 100%;
    min-width: 0;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    background: var(--surface);
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap .table {
    border: 0;
  }

  .table-wrap .table th:first-child,
  .table-wrap .table td:first-child {
    border-left: 0;
  }

  .table-wrap .table th:last-child,
  .table-wrap .table td:last-child {
    border-right: 0;
  }

  .table th,
  .table td {
    padding: 9px 10px;
    font-size: 13px;
  }

  .compact-table .table,
  .protocol-table,
  .warehouse-report-table .table {
    min-width: 640px;
  }

  .two-columns,
  .detail-grid,
  .form-grid-2,
  .permission-child-grid,
  .meeting-task-card {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: 17px;
  }

  .detail-row {
    flex-direction: column;
    gap: 4px;
  }

  .share-row,
  .permission-section-header,
  .permission-child-header,
  .person-task-header {
    flex-direction: column;
    align-items: stretch;
  }

  .inline-form {
    align-items: stretch;
  }

  .inline-form input,
  .inline-form select,
  .inline-form .button {
    flex: 1 1 auto;
    width: 100%;
  }

  .inline-editor-actions,
  .actions-stack {
    align-items: stretch;
  }

  .inline-editor-actions .button,
  .actions-stack .button:not(.icon-button) {
    flex: 1 1 auto;
  }

  .table-actions-stack {
    min-width: 180px;
  }

  .login-body,
  .permission-shell {
    min-height: 100vh;
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  }

  .login-card,
  .permission-card {
    width: min(100%, 520px);
    padding: 20px;
  }

  .login-card h1,
  .permission-card h1 {
    font-size: 26px;
  }

  .permission-code {
    font-size: 34px;
  }

  .permission-code-box {
    padding: 14px;
  }

  .checkbox-row {
    gap: 10px;
    padding: 12px;
  }

  .checkbox-row input,
  .checkbox-line input[type="checkbox"] {
    flex: 0 0 auto;
  }

  .person-jump-list a {
    flex: 1 1 140px;
    justify-content: center;
  }

  .person-task-name {
    font-size: 18px;
  }

  .print-page {
    padding: 16px;
  }
}

@media (max-width: 520px) {
  .content {
    padding: 12px;
  }

  .topbar h1 {
    font-size: 23px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .card,
  .login-card,
  .permission-card,
  .person-task-block,
  .meeting-task-card,
  .report-edit-block {
    padding: 12px;
  }

  .brand-title {
    font-size: 22px;
  }

  .permission-shell,
  .login-body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .permission-code {
    font-size: 30px;
  }
}


/* Notifications / employee speed panel */
.notifications-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notifications-button {
  position: relative;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.notifications-button:hover {
  background: var(--surface-alt);
}

.notifications-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  min-height: 20px;
  padding: 2px 5px;
  border: 2px solid var(--surface);
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}

.notifications-panel {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 10px);
  right: 0;
  width: min(420px, calc(100vw - 32px));
  max-height: min(72vh, 620px);
  overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.18);
  padding: 12px;
}

.notifications-panel-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification-card {
  display: block;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  padding: 12px;
  text-decoration: none;
}

.notification-card-danger {
  border-left: 4px solid var(--danger);
}

.notification-card-warning {
  border-left: 4px solid var(--warning);
}

.notification-card-info {
  border-left: 4px solid var(--accent);
}

.notification-title-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.notification-title {
  font-weight: 800;
}

.notification-pill {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 3px 7px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.notification-detail-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.notifications-push {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 12px;
}

.audit-changes {
  max-width: 560px;
}

.audit-json {
  margin: 8px 0 0;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

@media (max-width: 980px) {
  .notifications-widget {
    order: 1;
  }

  .notifications-panel {
    position: fixed;
    top: calc(70px + env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 96px - env(safe-area-inset-top));
  }

  .topbar-right .notifications-button {
    width: 100%;
  }
}


.notifications-push-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.notifications-push-actions .button {
  flex: 0 0 auto;
}

/* Client timeline, exports and attachments */
.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 18px;
}
.inline-export-actions {
  margin-top: 12px;
}
.client-workspace {
  align-items: flex-start;
}
.soft-separator {
  border: 0;
  border-top: 1px solid var(--border-color, #e5e7eb);
  margin: 8px 0;
  width: 100%;
}
.section-subtitle {
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 2px;
}
.timeline-card {
  min-height: 240px;
}
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.timeline-item {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  position: relative;
}
.timeline-marker {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.38;
  margin-top: 8px;
}
.timeline-body {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}
.timeline-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}
.timeline-title {
  font-weight: 700;
  margin-bottom: 3px;
}
.timeline-text {
  margin-top: 6px;
  white-space: pre-wrap;
}
.attachments-card {
  margin-top: 16px;
}
.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.attachment-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.06);
}
.attachment-main {
  min-width: 0;
}
.attachment-main a {
  word-break: break-word;
}
.attachment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.attachment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.attachment-chip {
  display: inline-flex;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.10);
  border: 1px solid rgba(59, 130, 246, 0.18);
  font-size: 0.84rem;
}

@media (max-width: 720px) {
  .attachment-item {
    align-items: stretch;
    flex-direction: column;
  }
  .attachment-actions {
    justify-content: flex-start;
  }
  .timeline-item {
    grid-template-columns: 12px 1fr;
    gap: 8px;
  }
}

.attachment-thumb,
.attachment-mini-thumb {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.08);
}
.attachment-thumb {
  width: 72px;
  height: 72px;
}
.attachment-thumb img,
.attachment-mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.attachment-mini-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.05);
}
.attachment-mini-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.attachment-mini-thumb {
  width: 42px;
  height: 42px;
}
.button-tiny {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}

/* system health / duplicate clients */
.duplicate-card { gap: 16px; }
.duplicate-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.health-cards .health-card { border-left: 4px solid rgba(148, 163, 184, .55); }
.health-card.health-success { border-left-color: rgba(34, 197, 94, .75); }
.health-card.health-warning { border-left-color: rgba(245, 158, 11, .85); }
.health-card.health-danger { border-left-color: rgba(239, 68, 68, .85); }
.health-status-text { font-size: 22px; line-height: 1.2; }
.health-errors { margin-top: 20px; }
.mt-16 { margin-top: 16px; }
@media (max-width: 760px) {
  .duplicate-header { flex-direction: column; align-items: stretch; }
  .health-status-text { font-size: 18px; }
}

/* Employee mobile CRM shell */
.employee-mobile-home {
  display: none;
}

.mobile-bottom-nav {
  display: none;
}

.employee-chat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.employee-chat-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  color: var(--text);
  padding: 12px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
}

.employee-chat-card.disabled {
  cursor: default;
  opacity: 0.82;
}

.chat-inbox-card {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
}

.chat-inbox-card-pinned {
  border-color: rgba(245, 158, 11, 0.42);
  box-shadow: 0 12px 28px rgba(245, 158, 11, 0.10), 0 10px 24px rgba(17, 24, 39, 0.06);
}

.employee-chat-card-link {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.chat-card-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.chat-pin-form {
  margin: 0;
}

.chat-pin-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  opacity: 0.58;
  filter: grayscale(1);
  transition: transform .16s ease, opacity .16s ease, background .16s ease, border-color .16s ease;
}

.chat-pin-button:hover,
.chat-pin-button:focus-visible,
.chat-pin-button.is-pinned {
  opacity: 1;
  filter: none;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.46);
  color: var(--text);
}

.chat-pin-button:hover,
.chat-pin-button:focus-visible {
  transform: translateY(-1px);
}

.chat-pin-mini {
  margin-right: 4px;
  font-size: 12px;
}

.chat-inbox-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.chat-inbox-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-alt);
}

.chat-pin-inline-form {
  margin-top: 10px;
}

.chat-pin-inline-form-desktop {
  margin-top: -4px;
}

.chat-pin-inline-button {
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  min-height: 34px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

.desktop-fallback-card .chat-pin-inline-button {
  background: var(--surface-alt);
  color: var(--text);
  border-color: var(--border);
  box-shadow: none;
}

.chat-pin-inline-button.is-pinned {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.46);
}

.employee-chat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--surface-alt);
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.employee-chat-main {
  min-width: 0;
}

.employee-chat-title-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.employee-chat-title {
  font-size: 15px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-chat-time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.employee-chat-message {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-chat-badge {
  min-width: 24px;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.employee-chat-arrow {
  color: var(--muted);
  font-size: 18px;
}

.chat-desktop-shell {
  max-width: 760px;
}

.chat-thread-placeholder {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.chat-message-bubble {
  max-width: min(520px, 88%);
  padding: 12px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.45;
}

.chat-message-system {
  align-self: center;
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted);
  font-size: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  backdrop-filter: blur(2px);
}

.chat-message-incoming {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.hidden,
[hidden] {
  display: none !important;
}

.realtime-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.realtime-chat-status-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.realtime-chat-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.12);
}

.realtime-chat-status-dot.is-online {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(31, 122, 63, 0.14);
}

.realtime-chat-status-dot.is-connecting {
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(154, 107, 0, 0.14);
}

.realtime-chat-status-dot.is-offline {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(162, 41, 41, 0.14);
}

.realtime-chat-thread {
  min-height: 340px;
  max-height: min(58vh, 620px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background-color: #f7f1e7;
  background-image: linear-gradient(rgba(247, 241, 231, 0.78), rgba(247, 241, 231, 0.78)), url("/static/img/dialog-pattern.webp");
  background-position: 0 0, center top;
  background-repeat: repeat, repeat;
  background-size: auto, 360px auto;
  scroll-behavior: auto;
}

.realtime-chat-thread::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}


.realtime-chat-thread::before {
  content: '';
  flex: 0 0 0;
  margin-top: auto;
  pointer-events: none;
}

.chat-message-row {
  display: flex;
  align-items: flex-end;
  gap: 0;
  width: 100%;
}

.chat-message-row.is-own {
  justify-content: flex-end;
}

.chat-message-avatar {
  display: none;
}

.chat-message-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.chat-message-row.is-own .chat-message-meta {
  display: none;
}

.chat-message-meta strong {
  color: inherit;
  font-size: 12px;
}

.chat-message-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-message-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 4px;
  color: rgba(100, 116, 139, 0.82);
  font-size: 10.5px;
  line-height: 1;
  user-select: none;
}

.chat-message-time {
  font: inherit;
  white-space: nowrap;
}

.chat-message-react-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  opacity: 0.78;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

.chat-message-react-button:hover,
.chat-message-react-button:focus-visible {
  background: rgba(15, 23, 42, 0.08);
  opacity: 1;
  outline: none;
}

.chat-message-outgoing .chat-message-react-button:hover,
.chat-message-outgoing .chat-message-react-button:focus-visible {
  background: rgba(22, 138, 56, 0.12);
}

.chat-message-receipt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 12px;
  margin-left: 1px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -4px;
  line-height: 1;
}

.chat-message-receipt.is-delivered {
  opacity: 0.88;
}

.chat-message-receipt.is-read {
  opacity: 1;
}

.chat-message-checks {
  display: inline-block;
  transform: translateY(0.5px);
}

.chat-message-outgoing {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.chat-message-outgoing .chat-message-meta {
  color: rgba(255, 255, 255, 0.72);
}

.chat-message-outgoing .chat-message-footer {
  color: rgba(255, 255, 255, 0.72);
}

.chat-message-outgoing .chat-message-receipt.is-read {
  color: rgba(212, 255, 225, 0.96);
}

.chat-message-incoming {
  border-bottom-left-radius: 6px;
}

.realtime-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.realtime-chat-form textarea {
  width: 100%;
  min-height: 46px;
  max-height: 140px;
  resize: none;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  line-height: 1.35;
  outline: none;
}

.realtime-chat-form textarea:focus {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.realtime-chat-error {
  color: var(--danger);
}

.chat-hero-avatar {
  font-size: 16px;
  font-weight: 900;
}

.profile-mobile-account-card {
  display: none;
}

.profile-mobile-account-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-mobile-account-info {
  min-width: 0;
}

.profile-mobile-account-name {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.profile-mobile-account-email,
.profile-mobile-account-role {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.profile-mobile-account-actions {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
  align-items: stretch;
}

.profile-mobile-account-actions .notifications-button,
.profile-mobile-account-actions .profile-mobile-logout-form .button {
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
}

.profile-mobile-account-actions .profile-mobile-notifications {
  width: 100%;
}

.profile-mobile-account-actions .profile-mobile-logout-form {
  margin: 0;
}


@media (max-width: 980px) {
  body.app-body {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + 12px);
  }

  .content {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + 28px);
  }

  .profile-mobile-account-card {
    display: block;
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 1004;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
  }

  .mobile-bottom-nav-item {
    position: relative;
    min-width: 0;
    min-height: 60px;
    padding: 6px 4px 4px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
  }

  .mobile-bottom-nav-item:hover,
  .mobile-bottom-nav-item:focus-visible {
    color: #111827;
    background: rgba(15, 23, 42, 0.04);
    outline: none;
  }

  .mobile-bottom-nav-item.active {
    color: #111827;
    background: rgba(15, 23, 42, 0.06);
  }

  .mobile-bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: #111827;
  }

  .mobile-bottom-nav-icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .mobile-bottom-nav-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.98);
    background: #25d366;
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
  }

  .mobile-bottom-nav-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-bottom-nav-label {
    white-space: nowrap;
  }

  .employee-mobile-home {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
  }

  .employee-mobile-hero {
    overflow: hidden;
    border: 0;
    border-radius: 28px;
    background: linear-gradient(135deg, #101827 0%, #1f2937 58%, #374151 100%);
    color: #fff;
    box-shadow: 0 20px 42px rgba(17, 24, 39, 0.18);
  }

  .employee-mobile-hero-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
  }

  .employee-mobile-eyebrow {
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .employee-mobile-title {
    margin-top: 6px;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.08;
  }

  .employee-mobile-subtitle {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.45;
  }

  .employee-mobile-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.12);
    font-size: 24px;
  }

  .employee-role-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 4px;
    -webkit-overflow-scrolling: touch;
  }

  .employee-role-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }

  .employee-role-chip.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }

  .employee-chat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .employee-chat-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    color: var(--text);
    padding: 12px;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
  }

  .employee-chat-card.disabled {
    cursor: default;
    opacity: 0.82;
  }

  .employee-chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--surface-alt);
    font-size: 16px;
    font-weight: 900;
  }

  .employee-chat-main {
    min-width: 0;
  }

  .employee-chat-title-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
  }

  .employee-chat-title {
    font-size: 15px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .employee-chat-time {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
  }

  .employee-chat-message {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .employee-chat-badge {
    min-width: 24px;
    min-height: 24px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .employee-chat-arrow {
    color: var(--muted);
    font-size: 18px;
  }

  .employee-mobile-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 520px) {
  .mobile-bottom-nav {
    padding-left: 6px;
    padding-right: 6px;
  }

  .mobile-bottom-nav-item {
    min-height: 58px;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 10px;
  }

  .mobile-bottom-nav-icon {
    width: 22px;
    height: 22px;
  }

  .mobile-bottom-nav-icon svg {
    width: 20px;
    height: 20px;
  }

  .employee-chat-card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    border-radius: 20px;
  }

  .employee-chat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 16px;
  }
}

.desktop-fallback-card {
  display: block;
}

.employee-page-shell {
  margin-bottom: 0;
}

.my-day-task-card .badge {
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .desktop-fallback-card {
    display: none;
  }

  .my-day-summary-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
  }

  .my-day-summary-cards .stat-card {
    min-height: 86px;
  }

  .my-day-summary-cards .stat-value {
    font-size: 22px;
  }

  .my-day-task-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .my-day-task-card .badge {
    grid-column: 2;
    justify-self: flex-start;
    margin-top: -4px;
  }
}

/* Profile photos, contacts and group chat members */
.employee-chat-avatar-round {
  border-radius: 999px;
  overflow: hidden;
}

.employee-chat-avatar img,
.profile-avatar-large img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.profile-hero-card {
  position: relative;
}

.profile-hero-top {
  align-items: center;
}

.profile-avatar-large {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: var(--text);
  font-size: 26px;
  font-weight: 900;
  flex: 0 0 auto;
}

.profile-avatar-hero {
  width: 82px;
  height: 82px;
  border: 3px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.22);
}

.profile-avatar-row,
.profile-dialog-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar-upload-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-avatar-info {
  min-width: 0;
}

.profile-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.profile-avatar-actions input[type="file"] {
  max-width: 100%;
}

.profile-desktop-card {
  max-width: 760px;
}

.chat-member-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-member-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-member-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.chat-member-row {
  display: grid;
  grid-template-columns: auto 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.chat-member-row input {
  width: 18px;
  height: 18px;
}

.chat-member-row .employee-chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-size: 13px;
}

.chat-member-row-fixed {
  opacity: 0.78;
}

.chat-member-person {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chat-member-person strong,
.chat-member-person small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-member-person small {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 520px) {
  .chat-inbox-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .employee-chat-card-link {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
  }

  .chat-inbox-card .employee-chat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 16px;
  }

  .chat-inbox-card .employee-chat-avatar-round {
    border-radius: 999px;
  }

  .chat-pin-button {
    width: 32px;
    height: 32px;
  }

  .profile-avatar-large {
    width: 76px;
    height: 76px;
    font-size: 22px;
  }

  .profile-avatar-hero {
    width: 70px;
    height: 70px;
  }

  .profile-avatar-row,
  .profile-dialog-header {
    align-items: center;
    gap: 12px;
  }

  .chat-member-row {
    grid-template-columns: auto 38px minmax(0, 1fr);
    border-radius: 16px;
    padding: 9px;
  }

  .chat-member-row .employee-chat-avatar {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 760px) {
  .realtime-chat-thread {
    min-height: 360px;
    max-height: 58vh;
    border-radius: 22px;
    padding: 10px;
  }

  .chat-message-bubble {
    max-width: min(82vw, 520px);
  }

  .realtime-chat-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .realtime-chat-form .button {
    min-height: 46px;
    padding-inline: 12px;
  }
}

/* Mobile chat room layout */
.mobile-chat-head-details,
.mobile-chat-head-panel {
  display: none;
}

@media (max-width: 980px) {
  body.app-body {
    --mobile-topbar-height: calc(60px + env(safe-area-inset-top));
  }

  .mobile-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.app-chat-room-page {
    background-color: #f7f1e7;
    background-image: linear-gradient(rgba(247, 241, 231, 0.74), rgba(247, 241, 231, 0.74)), url("/static/img/dialog-pattern.webp");
    background-position: 0 0, center top;
    background-repeat: repeat, repeat;
    background-size: auto, 360px auto;
  }

  body.app-chat-room-page .content {
    min-height: calc(100dvh - var(--mobile-topbar-height));
    padding: 0 0 var(--mobile-bottom-nav-height);
    background-color: #f7f1e7;
    background-image: linear-gradient(rgba(247, 241, 231, 0.74), rgba(247, 241, 231, 0.74)), url("/static/img/dialog-pattern.webp");
    background-position: 0 0, center top;
    background-repeat: repeat, repeat;
    background-size: auto, 360px auto;
  }

  body.app-chat-room-page .chat-hub,
  body.app-chat-room-page .employee-mobile-home {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: calc(100dvh - var(--mobile-topbar-height) - var(--mobile-bottom-nav-height));
    min-height: 0;
    margin: 0;
  }

  body.app-chat-room-page .realtime-chat {
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    padding: 8px 10px 0;
    background: transparent;
  }

  body.app-chat-room-page,
  body.app-chat-room-page .content,
  body.app-chat-room-page .realtime-chat,
  body.app-chat-room-page .realtime-chat-thread {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scrollbar-gutter: auto !important;
  }

  body.app-chat-room-page::-webkit-scrollbar,
  body.app-chat-room-page .content::-webkit-scrollbar,
  body.app-chat-room-page .realtime-chat::-webkit-scrollbar,
  body.app-chat-room-page .realtime-chat-thread::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  body.app-chat-room-page .realtime-chat-status-row {
    padding: 3px 4px 8px;
    min-height: 24px;
  }

  body.app-chat-room-page .realtime-chat-thread {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: 8px 4px 12px;
    background: transparent;
    box-shadow: none;
  }

  body.app-chat-room-page .realtime-chat-form {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 4px 12px;
    background: transparent;
  }

  body.app-chat-room-page .realtime-chat-form textarea {
    border-color: rgba(148, 163, 184, 0.50);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  }

  body.app-chat-room-page .realtime-chat-form .button {
    min-height: 46px;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
  }

  .mobile-chat-head-details {
    display: block;
    min-width: 0;
  }

  .mobile-chat-head-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-chat-head-summary::-webkit-details-marker {
    display: none;
  }

  .mobile-chat-head-summary::after {
    content: '⌄';
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    transform: translateY(-1px);
    transition: transform .16s ease;
  }

  .mobile-chat-head-details[open] .mobile-chat-head-summary::after {
    transform: translateY(-1px) rotate(180deg);
  }

  .mobile-chat-head-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #111827;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -0.03em;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
  }

  .mobile-chat-head-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .mobile-chat-head-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-chat-head-title {
    max-width: calc(100vw - 132px);
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.12;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-chat-head-subtitle {
    max-width: calc(100vw - 132px);
    color: var(--muted);
    font-size: 11px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-chat-head-panel {
    position: fixed;
    z-index: 1003;
    top: calc(var(--mobile-topbar-height) + 8px);
    left: 10px;
    right: 10px;
    display: none;
    max-height: calc(100dvh - var(--mobile-topbar-height) - var(--mobile-bottom-nav-height) - 18px);
    overflow-y: auto;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, 0.98);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(14px);
    -webkit-overflow-scrolling: touch;
  }

  .mobile-chat-head-details[open] .mobile-chat-head-panel {
    display: block;
  }

  .mobile-chat-head-panel-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  }

  .mobile-chat-head-panel-title strong {
    color: var(--text);
    font-size: 18px;
    line-height: 1.15;
  }

  .mobile-chat-head-panel-title span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
  }

  .mobile-chat-head-pin-form {
    margin: 12px 0 0;
  }

  .mobile-chat-head-pin-form .chat-pin-inline-button {
    width: 100%;
    justify-content: center;
    color: var(--text);
    background: var(--surface-alt);
    border-color: var(--border);
    box-shadow: none;
  }

  .mobile-chat-head-section-title {
    margin: 14px 0 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mobile-chat-member-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
  }

  .mobile-chat-member-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mobile-chat-member-row {
    display: grid;
    grid-template-columns: auto 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.82);
  }

  .mobile-chat-member-row-readonly {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .mobile-chat-member-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .mobile-chat-member-row-fixed {
    background: rgba(37, 99, 235, 0.05);
  }

  .mobile-chat-member-avatar {
    width: 38px;
    height: 38px;
    font-size: 12px;
  }

  .mobile-chat-member-person {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-chat-member-person strong,
  .mobile-chat-member-person small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-chat-member-person strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1.2;
  }

  .mobile-chat-member-person small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
  }
}

@media (max-width: 760px) {
  body.app-chat-room-page .realtime-chat-thread {
    min-height: 0;
    max-height: none;
    border-radius: 0;
    padding: 8px 4px 12px;
  }

  body.app-chat-room-page .chat-message-bubble {
    max-width: min(84vw, 520px);
  }
}

/* Chat room mobile input and header cleanup */
.chat-send-icon {
  display: none;
}

.chat-send-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 980px) {
  body.app-chat-room-page.app-body {
    --mobile-bottom-nav-height: 0px;
    --chat-room-input-height: calc(74px + env(safe-area-inset-bottom));
    padding-bottom: 0 !important;
  }

  body.app-chat-room-page .mobile-menu-button,
  body.app-chat-room-page .mobile-bottom-nav {
    display: none !important;
  }

  body.app-chat-room-page .mobile-topbar {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.app-chat-room-page .mobile-brand {
    width: 100%;
    flex: 1 1 100%;
  }

  body.app-chat-room-page .mobile-chat-head-title,
  body.app-chat-room-page .mobile-chat-head-subtitle {
    max-width: calc(100vw - 24px);
  }

  body.app-chat-room-page .content {
    min-height: calc(100dvh - var(--mobile-topbar-height));
    padding: 0 !important;
  }

  body.app-chat-room-page .chat-hub,
  body.app-chat-room-page .employee-mobile-home {
    height: calc(100dvh - var(--mobile-topbar-height));
    min-height: 0;
    margin: 0;
  }

  body.app-chat-room-page .realtime-chat {
    height: calc(100dvh - var(--mobile-topbar-height));
    min-height: 0;
    padding: 8px 10px var(--chat-room-input-height);
  }

  body.app-chat-room-page .realtime-chat-thread {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 8px 4px 18px;
    overflow-y: auto;
  }

  body.app-chat-room-page .realtime-chat-form {
    position: fixed;
    z-index: 1003;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background-color: #f7f1e7;
    background-image: linear-gradient(rgba(247, 241, 231, 0.74), rgba(247, 241, 231, 0.74)), url("/static/img/dialog-pattern.webp");
    background-position: 0 0, center top;
    background-repeat: repeat, repeat;
    background-size: auto, 360px auto;
    border-top: 0;
  }

  body.app-chat-room-page .realtime-chat-form textarea {
    width: 100%;
    min-height: 50px;
    max-height: 128px;
    padding: 14px 60px 14px 16px;
    border-radius: 26px;
    border-color: rgba(148, 163, 184, 0.42);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  }

  body.app-chat-room-page .realtime-chat-form textarea:focus {
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10), 0 0 0 3px rgba(37, 99, 235, 0.10);
  }

  body.app-chat-room-page .realtime-chat-form .chat-send-button {
    position: absolute;
    right: 18px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.18);
  }

  body.app-chat-room-page .realtime-chat-form .chat-send-text {
    display: none;
  }

  body.app-chat-room-page .realtime-chat-form .chat-send-icon {
    display: block;
  }

  body.app-chat-room-page .mobile-chat-head-panel {
    max-height: calc(100dvh - var(--mobile-topbar-height) - 18px);
  }
}

@media (max-width: 980px) {
  body.app-chat-room-page .mobile-chat-head-panel {
    z-index: 1005;
  }
}

/* Mobile chat input polish: seamless patterned background + WhatsApp-like send button */
@media (max-width: 980px) {
  body.app-chat-room-page.app-body {
    background-color: #f7f1e7;
    background-image: linear-gradient(rgba(247, 241, 231, 0.74), rgba(247, 241, 231, 0.74)), url("/static/img/dialog-pattern.webp");
    background-position: 0 0, center top;
    background-repeat: repeat, repeat;
    background-size: auto, 360px auto;
  }

  body.app-chat-room-page .realtime-chat-form {
    padding: 6px 12px calc(10px + env(safe-area-inset-bottom));
    background: transparent !important;
    box-shadow: none;
  }

  body.app-chat-room-page .realtime-chat-form textarea {
    min-height: 54px;
    padding: 15px 62px 15px 18px;
    border-radius: 999px;
    border-color: rgba(203, 213, 225, 0.86);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
  }

  body.app-chat-room-page .realtime-chat-form textarea:focus {
    border-color: rgba(37, 211, 102, 0.62);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08), 0 0 0 3px rgba(37, 211, 102, 0.16);
  }

  body.app-chat-room-page .realtime-chat-form .chat-send-button {
    right: 20px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 42px;
    height: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.28);
  }

  body.app-chat-room-page .realtime-chat-form .chat-send-button:hover,
  body.app-chat-room-page .realtime-chat-form .chat-send-button:focus-visible {
    background: #1fbd5a;
    color: #ffffff;
  }

  body.app-chat-room-page .realtime-chat-form .chat-send-button:disabled {
    background: #9be7b8;
    color: rgba(255, 255, 255, 0.86);
    box-shadow: none;
  }

  body.app-chat-room-page .realtime-chat-form .chat-send-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  body.app-chat-room-page .realtime-chat-form .chat-send-icon svg {
    width: 21px;
    height: 21px;
    transform: translateX(1px);
    stroke-width: 2.25;
  }
}

/* Chat attachments and messenger-style composer */
.chat-compose-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  width: 100%;
}

.chat-compose-field {
  position: relative;
  min-width: 0;
}

.chat-attach-button {
  position: absolute;
  left: 9px;
  bottom: 7px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.chat-attach-button:hover,
.chat-attach-button:focus-visible {
  background: rgba(15, 23, 42, 0.06);
  color: var(--text);
}

.chat-attach-button svg {
  width: 21px;
  height: 21px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.realtime-chat-form textarea {
  padding-left: 50px;
}

.chat-attach-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 20;
  min-width: 210px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(10px);
}

.chat-attach-menu button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  text-align: left;
}

.chat-attach-menu button:hover,
.chat-attach-menu button:focus-visible {
  background: rgba(37, 211, 102, 0.10);
}

.chat-attachment-preview {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 2px 2px 0;
}

.chat-attachment-preview[hidden] {
  display: none !important;
}

.chat-attachment-preview-item {
  flex: 0 0 auto;
  max-width: 220px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 7px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.chat-attachment-preview-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(37, 211, 102, 0.12);
}

.chat-attachment-preview-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.chat-attachment-preview-copy strong,
.chat-attachment-preview-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment-preview-copy strong {
  font-size: 12px;
  color: var(--text);
}

.chat-attachment-preview-copy small {
  font-size: 11px;
  color: var(--muted);
}

.chat-attachment-preview-remove {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.chat-message-attachments {
  display: grid;
  gap: 8px;
  margin-top: 9px;
}

.chat-message-text + .chat-message-attachments {
  margin-top: 10px;
}

.chat-attachment {
  color: inherit;
  text-decoration: none;
}

.chat-attachment-image {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(255, 255, 255, 0.16);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.chat-attachment-image img {
  display: block;
  width: min(260px, 64vw);
  max-height: 320px;
  object-fit: cover;
}

.chat-attachment-video {
  display: grid;
  gap: 6px;
}

.chat-attachment-video video {
  display: block;
  width: min(280px, 68vw);
  max-height: 320px;
  border-radius: 14px;
  background: #020617;
}

.chat-attachment-caption {
  color: inherit;
  font-size: 12px;
  opacity: 0.86;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chat-attachment-file {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: min(260px, 68vw);
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
}

.chat-attachment-file-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.22);
}

.chat-attachment-file-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-attachment-file-copy strong,
.chat-attachment-file-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment-file-copy strong {
  font-size: 13px;
}

.chat-attachment-file-copy small {
  font-size: 11px;
  opacity: 0.76;
}

.chat-message-incoming .chat-attachment-file,
.chat-message-incoming .chat-attachment-image {
  background: rgba(248, 250, 252, 0.92);
}

@media (max-width: 980px) {
  body.app-chat-room-page.app-body {
    --chat-room-input-height: calc(82px + env(safe-area-inset-bottom));
  }

  body.app-chat-room-page .realtime-chat {
    padding-bottom: var(--chat-room-input-height) !important;
  }

  body.app-chat-room-page .realtime-chat-form {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 6px 12px calc(10px + env(safe-area-inset-bottom));
    background: transparent !important;
    box-shadow: none !important;
  }

  body.app-chat-room-page .chat-compose-row {
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 8px;
    align-items: end;
  }

  body.app-chat-room-page .chat-compose-field {
    min-height: 54px;
  }

  body.app-chat-room-page .chat-attach-button {
    left: 10px;
    bottom: 9px;
    width: 36px;
    height: 36px;
    color: #667085;
  }

  body.app-chat-room-page .realtime-chat-form textarea {
    width: 100%;
    min-height: 54px;
    max-height: 128px;
    padding: 15px 16px 15px 52px !important;
    border-radius: 999px;
    border-color: rgba(203, 213, 225, 0.86);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
  }

  body.app-chat-room-page .realtime-chat-form textarea:focus {
    border-color: rgba(37, 211, 102, 0.62);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08), 0 0 0 3px rgba(37, 211, 102, 0.16);
  }

  body.app-chat-room-page .realtime-chat-form .chat-send-button {
    position: static !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    align-self: end;
    margin: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0;
    border-radius: 999px;
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.28);
  }

  body.app-chat-room-page .realtime-chat-form .chat-send-button:hover,
  body.app-chat-room-page .realtime-chat-form .chat-send-button:focus-visible {
    background: #1fbd5a;
    color: #ffffff;
  }

  body.app-chat-room-page .realtime-chat-form .chat-send-icon {
    width: 24px;
    height: 24px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  body.app-chat-room-page .realtime-chat-form .chat-send-icon svg {
    width: 23px;
    height: 23px;
    transform: translateX(1px);
    stroke-width: 2.25;
  }

  body.app-chat-room-page .chat-send-text {
    display: none !important;
  }

  body.app-chat-room-page .chat-attach-menu {
    left: 0;
    bottom: calc(100% + 12px);
    min-width: min(260px, calc(100vw - 28px));
  }

  body.app-chat-room-page .chat-compose-field .chat-emoji-button {
    left: 10px;
    right: auto;
    bottom: 9px;
    width: 36px;
    height: 36px;
  }

  body.app-chat-room-page .chat-compose-field .chat-attach-button {
    left: auto;
    right: 10px;
    bottom: 9px;
    width: 36px;
    height: 36px;
  }

  body.app-chat-room-page .realtime-chat-form .chat-compose-field textarea {
    padding-left: 52px !important;
    padding-right: 52px !important;
  }

  body.app-chat-room-page .chat-emoji-popover {
    left: 0;
    bottom: calc(100% + 12px);
    width: min(322px, calc(100vw - 28px));
  }

  body.app-chat-room-page .chat-attachment-preview {
    padding: 0 2px 2px;
  }

  body.app-chat-room-page .chat-attachment-preview-item {
    background: rgba(255, 255, 255, 0.88);
  }
}

/* Composer row owns the textarea/send layout; the form itself stacks previews below. */
.realtime-chat-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

/* Chat attachment performance fixes: lazy media without fixed cropping */
.realtime-chat-thread {
  overflow-anchor: auto;
}

.realtime-chat-thread.is-chat-starting {
  opacity: 0;
  overflow-anchor: none;
  animation: chatThreadFallbackReveal 1ms linear 450ms forwards;
}

@keyframes chatThreadFallbackReveal {
  to {
    opacity: 1;
  }
}

.realtime-chat-thread.is-chat-bottom-ready {
  opacity: 1;
}

.chat-attachment-image {
  position: relative;
  max-width: min(260px, 64vw);
  contain: layout paint;
  transform: translateZ(0);
}

.chat-attachment-image.has-media-dimensions {
  width: min(var(--chat-media-width, 260px), 64vw);
  aspect-ratio: var(--chat-media-ratio, auto);
}

.chat-attachment-image.is-media-loading::before,
.chat-attachment-image.has-media-dimensions::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(148, 163, 184, 0.14), rgba(255, 255, 255, 0.25), rgba(148, 163, 184, 0.14));
  opacity: 0.78;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.chat-attachment-image.is-media-loaded::before,
.chat-attachment-image.chat-attachment-pending::before {
  opacity: 0;
}

.chat-attachment-image img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: min(260px, 64vw);
  max-height: 320px;
  object-fit: contain;
  transform: translateZ(0);
}

.chat-attachment-image.has-media-dimensions img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.chat-attachment-image.has-media-preview::before,
.chat-attachment-video.has-media-preview::before {
  opacity: 0.18;
}

.chat-lazy-media.is-preview,
.chat-lazy-media.has-low-preview {
  opacity: 1;
  filter: blur(7px) saturate(1.04);
  transform: scale(1.018) translateZ(0);
}

.chat-lazy-media.is-lazy-loaded {
  filter: none;
  transform: translateZ(0);
}

.chat-lazy-media {
  opacity: 0;
  transition: opacity 180ms ease;
  will-change: opacity;
}

.chat-lazy-media.is-lazy-loading {
  opacity: 0;
}

.chat-lazy-media.is-lazy-loading.is-preview,
.chat-lazy-media.is-lazy-loading.has-low-preview {
  opacity: 1;
}

.chat-lazy-media.is-lazy-loaded,
.chat-local-media {
  opacity: 1;
}

.chat-attachment-image img.chat-lazy-media,
.chat-attachment-image img.chat-lazy-media.is-lazy-loaded {
  min-height: 0;
  aspect-ratio: auto;
  background: transparent;
}

.chat-attachment-video video.chat-lazy-media {
  width: min(280px, 68vw);
  aspect-ratio: 16 / 9;
  min-height: 0;
  height: auto;
  object-fit: contain;
  background: #020617;
  opacity: 1;
}

.chat-attachment-video.has-media-dimensions {
  width: min(var(--chat-media-width, 280px), 68vw);
}

.chat-attachment-video.has-media-dimensions video,
.chat-attachment-video.has-media-dimensions video.chat-lazy-media {
  width: 100%;
  max-width: none;
  aspect-ratio: var(--chat-media-ratio, 16 / 9);
  max-height: 320px;
  object-fit: contain;
}

@media (max-width: 980px) {
  body.app-chat-room-page .chat-attachment-image {
    max-width: min(260px, 72vw);
  }

  body.app-chat-room-page .chat-attachment-image.has-media-dimensions {
    width: min(var(--chat-media-width, 260px), 72vw);
  }

  body.app-chat-room-page .chat-attachment-image img {
    max-width: min(260px, 72vw);
  }

  body.app-chat-room-page .chat-attachment-video video.chat-lazy-media {
    width: min(280px, 72vw);
  }

  body.app-chat-room-page .chat-attachment-video.has-media-dimensions {
    width: min(var(--chat-media-width, 280px), 72vw);
  }
}




/* Fast in-app image viewer for chat photos */
body.is-chat-image-viewer-open {
  overflow: hidden;
}

.chat-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.chat-image-viewer[hidden] {
  display: none !important;
}

.chat-image-viewer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(10px);
  cursor: zoom-out;
}

.chat-image-viewer-stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(96vw, 1120px);
  height: min(88vh, 820px);
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.36);
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.42);
  overflow: hidden;
}

.chat-image-viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 140ms ease, transform 140ms ease;
}

.chat-image-viewer.is-loaded .chat-image-viewer-stage img {
  opacity: 1;
  transform: scale(1);
}

.chat-image-viewer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.chat-image-viewer-loader {
  position: absolute;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.34);
  border-top-color: #ffffff;
  animation: chatUploadSpin 0.75s linear infinite;
  opacity: 0;
  pointer-events: none;
}

.chat-image-viewer.is-loading .chat-image-viewer-loader {
  opacity: 1;
}

.chat-image-viewer-error {
  position: absolute;
  z-index: 2;
  max-width: min(420px, calc(100vw - 40px));
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(127, 29, 29, 0.92);
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.chat-image-viewer.is-error .chat-image-viewer-error {
  opacity: 1;
}

.chat-image-viewer-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.68);
  color: #ffffff;
  font-size: 13px;
}

.chat-image-viewer-caption span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-image-viewer-caption a {
  flex: 0 0 auto;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 680px) {
  .chat-image-viewer {
    padding: 0;
  }

  .chat-image-viewer-stage {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    background: rgba(2, 6, 23, 0.82);
  }

  .chat-image-viewer-caption {
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* Mobile chats topbar actions, search and saved messages */
.mobile-topbar-actions {
  display: none;
}

.mobile-topbar-icon-button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-topbar-icon-button svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-topbar-icon-button svg {
  vector-effect: non-scaling-stroke;
}

.mobile-topbar-icon-button:hover,
.mobile-topbar-icon-button:focus-visible {
  background: rgba(15, 23, 42, 0.07);
  outline: none;
}

.mobile-topbar-more-icon svg {
  width: 21px;
  height: 21px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mobile-topbar-more-summary svg {
  fill: currentColor;
  stroke: none;
}

.mobile-topbar-more-summary {
  list-style: none;
}

.mobile-topbar-more-summary::-webkit-details-marker {
  display: none;
}

.mobile-topbar-more {
  position: relative;
}

.mobile-topbar-more-panel {
  position: absolute;
  z-index: 1010;
  top: calc(100% + 8px);
  right: 0;
  width: min(76vw, 260px);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(14px);
}

.mobile-topbar-more:not([open]) .mobile-topbar-more-panel {
  display: none;
}

.mobile-topbar-more-item {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mobile-topbar-more-item:hover,
.mobile-topbar-more-item:focus-visible {
  background: var(--surface-alt);
}

.mobile-topbar-more-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  font-size: 18px;
}

.mobile-topbar-bookmark-icon svg,
.mobile-chat-head-avatar-bookmark svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  stroke: none;
}

.chat-mobile-search-panel {
  display: none;
}

.chat-mobile-search-panel:not([hidden]) {
  display: block;
}

.chat-mobile-search-input {
  min-height: 44px;
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.08);
}

.chat-inbox-card[hidden] {
  display: none !important;
}

.mobile-chat-head-avatar-bookmark {
  background: #2563eb;
  color: #fff;
}

@media (max-width: 980px) {
  .mobile-topbar-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
  }

  .mobile-brand-title-large {
    font-size: 23px;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  body.app-page-chats:not(.app-chat-room-page) .mobile-brand {
    flex: 1 1 auto;
  }

  body.app-page-chats:not(.app-chat-room-page) .mobile-topbar {
    gap: 8px;
  }

  body.app-page-chats:not(.app-chat-room-page) .employee-mobile-home {
    gap: 12px;
  }
}

:root[data-theme="dark"] .mobile-bottom-nav-item,
:root[data-theme="dark"] .mobile-bottom-nav-item:hover,
:root[data-theme="dark"] .mobile-bottom-nav-item:focus-visible,
:root[data-theme="dark"] .mobile-bottom-nav-item.active {
  color: var(--text);
}

:root[data-theme="dark"] .mobile-bottom-nav-item:hover,
:root[data-theme="dark"] .mobile-bottom-nav-item:focus-visible,
:root[data-theme="dark"] .mobile-bottom-nav-item.active {
  background: rgba(148, 163, 184, 0.14);
}

:root[data-theme="dark"] .mobile-bottom-nav-item.active::before {
  background: var(--accent);
}

:root[data-theme="dark"] .employee-chat-avatar,
:root[data-theme="dark"] .mobile-chat-member-row,
:root[data-theme="dark"] .chat-inbox-meta span {
  background: var(--surface-alt);
  border-color: var(--border);
}

/* Chat list long-press selection actions */
.chat-default-actions,
.chat-selection-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.chat-default-actions[hidden],
.chat-selection-actions[hidden] {
  display: none !important;
}

.chat-selection-actions {
  gap: 6px;
  padding: 1px 0;
}

.chat-selection-action-button {
  position: relative;
  color: var(--text);
}

.chat-selection-action-button:hover,
.chat-selection-action-button:focus-visible {
  background: rgba(37, 99, 235, 0.10);
  color: var(--accent);
}

.chat-selection-action-button:disabled,
.chat-selection-action-button.is-disabled {
  opacity: 0.28;
  cursor: default;
}

.chat-selection-action-button:disabled:hover,
.chat-selection-action-button.is-disabled:hover {
  background: transparent;
  color: var(--text);
}

.chat-selection-action-button.is-busy {
  opacity: 0.5;
  pointer-events: none;
}

.chat-action-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
}

.chat-action-icon svg {
  width: 23px;
  height: 23px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chat-action-icon .chat-icon-fill {
  fill: currentColor;
  stroke: none;
}

.chat-card-actions:empty {
  display: none;
}

.chat-inbox-card {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.chat-inbox-card.is-selected {
  border-color: rgba(37, 99, 235, 0.58);
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12), 0 14px 32px rgba(37, 99, 235, 0.10);
}

.chat-inbox-card.is-selected .employee-chat-avatar {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.chat-inbox-card-muted .employee-chat-message,
.chat-inbox-card-blocked .employee-chat-message {
  opacity: 0.78;
}

.chat-selection-active .chat-mobile-search-panel,
.chat-selection-active .chat-mobile-search-sticky-shell {
  display: none !important;
}

@media (max-width: 980px) {
  .chat-selection-actions .mobile-topbar-icon-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}

:root[data-theme="dark"] .mobile-topbar-icon-button:hover,
:root[data-theme="dark"] .mobile-topbar-icon-button:focus-visible {
  background: rgba(148, 163, 184, 0.14);
}

:root[data-theme="dark"] .chat-selection-action-button:hover,
:root[data-theme="dark"] .chat-selection-action-button:focus-visible {
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
}

:root[data-theme="dark"] .chat-selection-action-button:disabled:hover,
:root[data-theme="dark"] .chat-selection-action-button.is-disabled:hover {
  background: transparent;
  color: var(--text);
}

:root[data-theme="dark"] .chat-inbox-card.is-selected {
  border-color: rgba(96, 165, 250, 0.62);
  background: rgba(96, 165, 250, 0.12);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.16), 0 14px 32px rgba(15, 23, 42, 0.24);
}

/* Refined selected chat toolbar: pin/mute upfront, extra actions in menu */
.chat-selection-more {
  position: relative;
}

.chat-selection-more-panel {
  width: min(78vw, 278px);
}

.chat-selection-more-item {
  justify-content: flex-start;
}

.chat-selection-more-item .chat-action-icon {
  color: var(--accent);
}

.chat-inbox-card .employee-chat-avatar {
  position: relative;
}

.chat-inbox-card .employee-chat-avatar-round {
  overflow: visible;
}

.chat-inbox-card .employee-chat-avatar-round img {
  border-radius: inherit;
}

.chat-inbox-card.is-selected .employee-chat-avatar::after {
  content: "✓";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 17px;
  height: 17px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.05em;
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.28);
  z-index: 3;
}

@media (max-width: 980px) {
  .chat-selection-actions {
    gap: 4px;
  }

  .chat-selection-more-panel {
    right: 0;
  }
}

:root[data-theme="dark"] .chat-inbox-card.is-selected .employee-chat-avatar::after {
  border-color: var(--surface);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.34);
}

/* Telegram-style attachment picker, preview and upload states */
.realtime-chat-form .chat-compose-field textarea {
  padding-left: 14px;
  padding-right: 50px;
}

.chat-compose-field .chat-attach-button {
  left: auto;
  right: 9px;
  bottom: 7px;
}

.chat-emoji-button {
  position: absolute;
  left: 9px;
  bottom: 7px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
}

.chat-emoji-button:hover,
.chat-emoji-button:focus-visible,
.chat-emoji-button[aria-expanded="true"] {
  background: rgba(15, 23, 42, 0.06);
  color: var(--text);
  outline: none;
}

.chat-emoji-popover[hidden] {
  display: none !important;
}

.chat-emoji-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 86;
  width: min(322px, calc(100vw - 32px));
  max-height: 218px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.chat-emoji-option {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.chat-emoji-option:hover,
.chat-emoji-option:focus-visible {
  background: rgba(37, 211, 102, 0.12);
  outline: none;
}

.realtime-chat-form .chat-compose-field textarea {
  padding-left: 50px;
  padding-right: 50px;
}

.chat-attach-backdrop[hidden],
.chat-attach-sheet[hidden] {
  display: none !important;
}

.chat-attach-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(2px);
}

.chat-attach-sheet {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 81;
  width: min(520px, calc(100vw - 28px));
  max-height: min(78dvh, 680px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  color: var(--text);
  overflow: hidden;
}

.chat-attach-sheet-grip {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.64);
  margin: 0 auto 2px;
}

.chat-attach-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.chat-attach-sheet-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.chat-attach-sheet-head strong {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.15;
}

.chat-attach-sheet-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.chat-attach-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--text);
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.chat-attach-panel {
  min-height: 130px;
  overflow-y: auto;
  padding: 2px 0;
}

.chat-attach-pick-card {
  width: 100%;
  min-height: 86px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.10), rgba(255, 255, 255, 0.92));
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.chat-attach-pick-card:hover,
.chat-attach-pick-card:focus-visible {
  border-color: rgba(37, 211, 102, 0.44);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.chat-attach-pick-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: rgba(37, 211, 102, 0.14);
  color: #16a34a;
  display: grid;
  place-items: center;
}

.chat-attach-pick-icon svg,
.chat-attach-tabs svg,
.chat-inline-svg svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-attach-pick-card span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.chat-attach-pick-card strong {
  font-size: 14px;
  font-weight: 900;
}

.chat-attach-pick-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.chat-attach-tabs {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.chat-attach-tabs button {
  min-width: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 9px 4px 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.chat-attach-tabs button.is-active {
  background: rgba(37, 211, 102, 0.12);
  color: #128c3a;
}

.chat-attach-empty {
  min-height: 110px;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: 20px;
  background: rgba(148, 163, 184, 0.08);
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.chat-attachment-selected {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}

.chat-attachment-selected[hidden] {
  display: none !important;
}

.chat-attachment-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  max-height: min(34dvh, 280px);
  overflow-y: auto;
  padding: 2px;
}

.chat-attachment-selected .chat-attachment-preview-item {
  position: relative;
  min-height: 118px;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 6px;
  padding: 7px;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.96);
}

.chat-attachment-selected .chat-attachment-preview-item.is-media img,
.chat-attachment-selected .chat-attachment-preview-item.is-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-attachment-selected .chat-attachment-preview-item.is-media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  background: linear-gradient(transparent, rgba(15, 23, 42, 0.72));
  pointer-events: none;
}

.chat-attachment-selected .chat-attachment-preview-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2px;
  color: var(--text);
}

.chat-attachment-selected .chat-attachment-preview-item.is-media .chat-attachment-preview-copy {
  color: #fff;
}

.chat-attachment-selected .chat-attachment-preview-copy strong,
.chat-attachment-selected .chat-attachment-preview-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment-selected .chat-attachment-preview-copy strong {
  font-size: 12px;
  font-weight: 900;
}

.chat-attachment-selected .chat-attachment-preview-copy small {
  font-size: 11px;
  opacity: 0.82;
}

.chat-attachment-selected .chat-attachment-preview-remove {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.chat-preview-type-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.66);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.chat-contact-preview-item .chat-inline-svg,
.chat-attachment-preview-item.is-file .chat-inline-svg {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: rgba(37, 211, 102, 0.12);
  color: #16a34a;
  display: grid;
  place-items: center;
}

.chat-caption-field {
  display: grid;
  gap: 6px;
}

.chat-caption-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chat-caption-field textarea {
  width: 100%;
  min-height: 58px;
  max-height: 128px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.98);
  color: var(--text);
  font: inherit;
  line-height: 1.35;
  outline: none;
}

.chat-caption-field textarea:focus {
  border-color: rgba(37, 211, 102, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.12);
}

.chat-attachment-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.chat-contact-compose {
  display: grid;
  gap: 10px;
}

.chat-contact-fields {
  display: grid;
  gap: 8px;
}

.chat-contact-fields input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.98);
  color: var(--text);
  font: inherit;
  outline: none;
}

.chat-message-row.is-chat-pending-upload .chat-message-bubble {
  opacity: 0.96;
}

.chat-message-row.is-upload-failed .chat-message-bubble {
  background: #e11d48;
}

.chat-attachment-pending {
  position: relative;
  overflow: hidden;
}

.chat-local-media {
  display: block;
  width: min(260px, 64vw);
  max-height: 320px;
  object-fit: cover;
}

.chat-upload-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.42);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.chat-upload-inline {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: inherit;
  font-size: 12px;
}

.chat-upload-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  display: inline-block;
  animation: chatUploadSpin 820ms linear infinite;
}

@keyframes chatUploadSpin {
  to { transform: rotate(360deg); }
}

.chat-message-upload-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-weight: 800;
}

.chat-message-row.is-chat-pending-upload .chat-message-upload-status::after {
  content: '';
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.92) var(--chat-upload-progress, 0%), rgba(255,255,255,0.24) 0);
}

.chat-upload-error {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  font-weight: 800;
}

.chat-upload-retry {
  width: max-content;
  margin-top: 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #be123c;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

body.is-chat-attach-open {
  overflow: hidden;
}

:root[data-theme="dark"] .chat-attach-sheet {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(71, 85, 105, 0.72);
}

:root[data-theme="dark"] .chat-attach-pick-card,
:root[data-theme="dark"] .chat-caption-field textarea,
:root[data-theme="dark"] .chat-contact-fields input,
:root[data-theme="dark"] .chat-attachment-selected .chat-attachment-preview-item {
  background: rgba(30, 41, 59, 0.96);
  border-color: rgba(71, 85, 105, 0.72);
}

@media (max-width: 980px) {
  body.app-chat-room-page .chat-compose-field .chat-attach-button {
    left: auto;
    right: 10px;
    bottom: 9px;
    width: 36px;
    height: 36px;
    color: #667085;
  }

  body.app-chat-room-page .realtime-chat-form textarea[data-chat-input] {
    padding: 15px 52px 15px 52px !important;
  }

  body.app-chat-room-page .chat-attach-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-height: min(82dvh, 720px);
    transform: none;
    border-radius: 28px 28px 0 0;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  }

  body.app-chat-room-page .chat-attach-tabs {
    position: sticky;
    bottom: 0;
    background: inherit;
  }

  body.app-chat-room-page .chat-attachment-preview-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 34dvh;
  }

  body.app-chat-room-page .chat-attachment-selected .chat-attachment-preview-item {
    min-height: 106px;
  }

  body.app-chat-room-page .chat-local-media {
    width: min(260px, 68vw);
  }
}


/* Chat list polish: green Monkey Park logo, hidden zero badge, pinned icon and bottom timestamp */
.brand-title,
.mobile-brand-title {
  color: #20b95a;
}

.mobile-bottom-nav-badge[hidden] {
  display: none !important;
}

.chat-inbox-bottom-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-top: 6px;
}

.chat-inbox-bottom-row .chat-inbox-meta {
  min-width: 0;
  flex: 1 1 auto;
  margin-top: 0;
  overflow: hidden;
}

.chat-inbox-card-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex: 0 0 auto;
  color: var(--muted);
  line-height: 1;
  white-space: nowrap;
}

.chat-inbox-card-status .employee-chat-time {
  font-size: 11px;
  line-height: 1.15;
  color: var(--muted);
}

.chat-inbox-pin-indicator {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  opacity: 0.95;
}

.chat-inbox-pin-indicator svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-inbox-card .employee-chat-title-row {
  align-items: center;
}

:root[data-theme="dark"] .chat-inbox-pin-indicator {
  color: #94a3b8;
}

@media (max-width: 520px) {
  .chat-inbox-bottom-row {
    gap: 6px;
    margin-top: 5px;
  }

  .chat-inbox-meta span {
    padding-inline: 6px;
  }
}

/* WhatsApp-like mobile chat header: logo and search are part of the scrollable chat list */
@media (max-width: 980px) {
  body.app-page-chats:not(.app-chat-room-page) {
    padding-top: 0;
  }

  body.app-page-chats:not(.app-chat-room-page) .mobile-topbar {
    position: static;
    height: auto;
    min-height: calc(74px + env(safe-area-inset-top));
    padding: calc(24px + env(safe-area-inset-top)) 28px 8px;
    gap: 12px;
    border-bottom: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
  }

  body.app-page-chats:not(.app-chat-room-page) .mobile-brand {
    flex: 1 1 auto;
  }

  body.app-page-chats:not(.app-chat-room-page) .mobile-brand-title-large {
    font-size: clamp(31px, 8.6vw, 39px);
    line-height: 1;
    letter-spacing: -0.055em;
  }

  body.app-page-chats:not(.app-chat-room-page) .mobile-topbar-actions {
    align-self: center;
    margin-left: 0;
    gap: 4px;
  }

  body.app-page-chats:not(.app-chat-room-page) .mobile-topbar-icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  body.app-page-chats:not(.app-chat-room-page) .mobile-topbar-icon-button svg {
    width: 25px;
    height: 25px;
    stroke-width: 2.15;
  }

  body.app-page-chats:not(.app-chat-room-page) .mobile-topbar-more-summary svg {
    width: 26px;
    height: 26px;
  }

  body.app-page-chats:not(.app-chat-room-page) .content {
    padding-top: 0;
  }

  body.app-page-chats:not(.app-chat-room-page) .chat-hub {
    gap: 12px;
  }

  body.app-page-chats:not(.app-chat-room-page).chat-selection-active {
    padding-top: calc(60px + env(safe-area-inset-top));
  }

  body.app-page-chats:not(.app-chat-room-page).chat-selection-active .mobile-topbar {
    position: fixed;
    height: calc(60px + env(safe-area-inset-top));
    min-height: 0;
    padding: env(safe-area-inset-top) 14px 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 26px rgba(17, 24, 39, 0.08);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
  }

  body.app-page-chats:not(.app-chat-room-page).chat-selection-active .mobile-brand-title-large {
    font-size: 22px;
    letter-spacing: -0.03em;
  }
}

.chat-mobile-search-sticky-shell {
  width: 100%;
}

.chat-mobile-search-panel-static {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  margin: 0 0 2px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #f3f2f0;
  color: #5f666d;
  box-shadow: none;
}

.chat-mobile-search-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-grid;
  place-items: center;
  color: #626a70;
}

.chat-mobile-search-icon svg {
  width: 29px;
  height: 29px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-mobile-search-panel-static .chat-mobile-search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 54px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
  outline: none;
}

.chat-mobile-search-panel-static .chat-mobile-search-input::placeholder {
  color: #6d747b;
  opacity: 1;
}

.chat-mobile-search-panel-static:focus-within {
  background: #eeece9;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

@media (max-width: 520px) {
  .chat-mobile-search-panel-static {
    min-height: 54px;
    padding: 0 18px;
  }

  .chat-mobile-search-panel-static .chat-mobile-search-input {
    min-height: 52px;
    font-size: 19px;
  }
}

:root[data-theme="dark"] .chat-mobile-search-panel-static {
  background: rgba(30, 41, 59, 0.86);
  color: #cbd5e1;
}

:root[data-theme="dark"] .chat-mobile-search-icon,
:root[data-theme="dark"] .chat-mobile-search-panel-static .chat-mobile-search-input::placeholder {
  color: #94a3b8;
}

:root[data-theme="dark"] .chat-mobile-search-panel-static:focus-within {
  background: rgba(30, 41, 59, 0.96);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16);
}

@media (max-width: 980px) {
  :root[data-theme="dark"] body.app-page-chats:not(.app-chat-room-page).chat-selection-active .mobile-topbar {
    background: rgba(15, 23, 42, 0.96);
  }
}


/* Mobile chats: fixed logo and compact sticky search with one shared header background */
@media (max-width: 980px) {
  body.app-page-chats:not(.app-chat-room-page) {
    --chat-mobile-header-height: 80px;
    --chat-mobile-header-bg: rgba(245, 246, 248, 0.96);
    --chat-mobile-search-gap: 6px;
    --chat-mobile-page-x: 16px;
    padding-top: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
  }

  body.app-page-chats:not(.app-chat-room-page) .mobile-topbar {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
    min-height: 0;
    padding: calc(18px + env(safe-area-inset-top)) 28px 10px;
    gap: 10px;
    align-items: flex-end;
    border-bottom: 0;
    box-shadow: none;
    background: var(--chat-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.app-page-chats:not(.app-chat-room-page) .mobile-brand-title-large {
    color: #20b95a;
  }

  body.app-page-chats:not(.app-chat-room-page) .content {
    padding-top: 0;
  }

  body.app-page-chats:not(.app-chat-room-page) .chat-hub {
    gap: 10px;
  }

  body.app-page-chats:not(.app-chat-room-page) .chat-mobile-search-sticky-shell {
    position: sticky;
    z-index: 990;
    top: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
    margin: 0 calc(-1 * var(--chat-mobile-page-x)) 10px;
    padding: var(--chat-mobile-search-gap) var(--chat-mobile-page-x) 10px;
    background: var(--chat-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.app-page-chats:not(.app-chat-room-page) .chat-mobile-search-panel-static {
    position: relative;
    z-index: 1;
    min-height: 48px;
    margin: 0;
    padding: 0 16px;
    gap: 10px;
    background: rgba(243, 242, 240, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.app-page-chats:not(.app-chat-room-page) .chat-mobile-search-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  body.app-page-chats:not(.app-chat-room-page) .chat-mobile-search-icon svg {
    width: 23px;
    height: 23px;
    stroke-width: 2.25;
  }

  body.app-page-chats:not(.app-chat-room-page) .chat-mobile-search-panel-static .chat-mobile-search-input {
    min-height: 46px;
    font-size: 18px;
  }

  body.app-page-chats:not(.app-chat-room-page).chat-selection-active {
    padding-top: calc(60px + env(safe-area-inset-top));
  }
}

@media (max-width: 520px) {
  body.app-page-chats:not(.app-chat-room-page) {
    --chat-mobile-header-height: 82px;
  }

  body.app-page-chats:not(.app-chat-room-page) .mobile-topbar {
    padding-left: 24px;
    padding-right: 24px;
  }

  body.app-page-chats:not(.app-chat-room-page) .mobile-brand-title-large {
    font-size: clamp(30px, 8.1vw, 37px);
  }

  body.app-page-chats:not(.app-chat-room-page) .chat-mobile-search-panel-static {
    min-height: 46px;
    padding: 0 15px;
  }

  body.app-page-chats:not(.app-chat-room-page) .chat-mobile-search-panel-static .chat-mobile-search-input {
    min-height: 44px;
    font-size: 17px;
  }
}

:root[data-theme="dark"] body.app-page-chats:not(.app-chat-room-page) {
  --chat-mobile-header-bg: rgba(15, 23, 42, 0.96);
}

:root[data-theme="dark"] body.app-page-chats:not(.app-chat-room-page) .mobile-topbar {
  background: var(--chat-mobile-header-bg);
}

:root[data-theme="dark"] body.app-page-chats:not(.app-chat-room-page) .chat-mobile-search-sticky-shell {
  background: var(--chat-mobile-header-bg);
}

:root[data-theme="dark"] body.app-page-chats:not(.app-chat-room-page) .chat-mobile-search-panel-static {
  background: rgba(30, 41, 59, 0.94);
}

/* Chat media bubble visual polish: Telegram-like media without text bubble backing */
.chat-message-bubble.chat-message-outgoing:not(.is-media-only) {
  background: #d9fdd3;
  color: #0f172a;
  border: 1px solid rgba(134, 239, 172, 0.46);
}

.chat-message-bubble.chat-message-outgoing:not(.is-media-only) .chat-message-meta,
.chat-message-bubble.chat-message-outgoing:not(.is-media-only) .chat-message-footer {
  color: rgba(63, 98, 74, 0.88);
}

.chat-message-bubble.chat-message-outgoing:not(.is-media-only) .chat-message-receipt.is-read {
  color: #168a38;
}

.chat-message-row.is-chat-pending-upload .chat-message-bubble.chat-message-outgoing:not(.is-media-only) .chat-message-upload-status {
  border-top-color: rgba(74, 222, 128, 0.26);
  color: rgba(63, 98, 74, 0.92);
}

.chat-message-row.is-chat-pending-upload .chat-message-bubble.chat-message-outgoing:not(.is-media-only) .chat-message-upload-status::after {
  background: linear-gradient(90deg, rgba(22, 138, 56, 0.72) var(--chat-upload-progress, 0%), rgba(134, 239, 172, 0.34) 0);
}

.chat-message-bubble.is-media-only {
  position: relative;
  max-width: min(330px, 82vw);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  line-height: 1;
  overflow: visible;
}

.chat-message-row.is-upload-failed .chat-message-bubble.is-media-only {
  background: transparent;
}

.chat-message-bubble.is-media-only .chat-message-meta,
.chat-message-bubble.is-media-only .chat-attachment-caption {
  display: none;
}

.chat-message-bubble.is-media-only .chat-message-attachments {
  gap: 6px;
  margin: 0;
}

.chat-message-bubble.is-media-only .chat-attachment-image {
  max-width: min(330px, 82vw);
  border: 0;
  border-radius: 17px;
  background: transparent;
  box-shadow: none;
}

.chat-message-bubble.is-media-only .chat-attachment-image.has-media-dimensions {
  width: min(var(--chat-media-width, 260px), 82vw);
}

.chat-message-bubble.is-media-only .chat-attachment-image img {
  max-width: min(330px, 82vw);
  border-radius: inherit;
  object-fit: contain;
}

.chat-message-bubble.is-media-only .chat-attachment-image.has-media-dimensions img {
  object-fit: contain;
}

.chat-message-bubble.is-media-only .chat-attachment-video {
  display: block;
}

.chat-message-bubble.is-media-only .chat-attachment-video video,
.chat-message-bubble.is-media-only .chat-attachment-video video.chat-lazy-media {
  width: min(330px, 82vw);
  max-height: 380px;
  border: 0;
  border-radius: 17px;
  box-shadow: none;
  background: #020617;
}

.chat-message-bubble.is-media-only .chat-attachment-video.has-media-dimensions {
  width: min(var(--chat-media-width, 330px), 82vw);
}

.chat-message-bubble.is-media-only .chat-attachment-video.has-media-dimensions video,
.chat-message-bubble.is-media-only .chat-attachment-video.has-media-dimensions video.chat-lazy-media {
  width: 100%;
  max-width: none;
  aspect-ratio: var(--chat-media-ratio, 16 / 9);
  object-fit: contain;
}

.chat-message-bubble.is-media-only .chat-message-footer {
  position: absolute;
  z-index: 4;
  right: 7px;
  bottom: 7px;
  margin: 0;
  padding: 4px 7px;
  gap: 3px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.50);
  color: rgba(255, 255, 255, 0.94);
  font-size: 10.5px;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  pointer-events: auto;
}

.chat-message-bubble.is-media-only .chat-message-react-button:hover,
.chat-message-bubble.is-media-only .chat-message-react-button:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

.chat-message-bubble.is-media-only .chat-message-receipt.is-read {
  color: rgba(134, 239, 172, 0.98);
}

.chat-message-bubble.is-media-only .chat-message-upload-status {
  position: absolute;
  z-index: 5;
  left: 7px;
  bottom: 7px;
  max-width: calc(100% - 92px);
  margin: 0;
  padding: 4px 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.54);
  color: rgba(255, 255, 255, 0.94);
  font-size: 10.5px;
  line-height: 1;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.chat-message-bubble.is-media-only .chat-message-upload-status::after {
  display: none;
}

.chat-message-bubble.is-media-only .chat-upload-error {
  position: absolute;
  z-index: 6;
  left: 7px;
  right: 7px;
  bottom: 7px;
  margin: 0;
  padding: 7px 9px;
  border-radius: 13px;
  background: rgba(225, 29, 72, 0.92);
  color: #ffffff;
}

@media (max-width: 980px) {
  body.app-chat-room-page .chat-message-bubble.is-media-only {
    max-width: min(340px, 82vw);
  }

  body.app-chat-room-page .chat-message-bubble.is-media-only .chat-attachment-image {
    max-width: min(340px, 82vw);
  }

  body.app-chat-room-page .chat-message-bubble.is-media-only .chat-attachment-image img {
    max-width: min(340px, 82vw);
  }

  body.app-chat-room-page .chat-message-bubble.is-media-only .chat-attachment-video video,
  body.app-chat-room-page .chat-message-bubble.is-media-only .chat-attachment-video video.chat-lazy-media {
    width: min(340px, 82vw);
    max-width: min(340px, 82vw);
  }

  body.app-chat-room-page .chat-message-bubble.is-media-only .chat-attachment-image.has-media-dimensions {
    width: min(var(--chat-media-width, 260px), 82vw);
  }

  body.app-chat-room-page .chat-message-bubble.is-media-only .chat-attachment-image.has-media-dimensions img {
    width: 100%;
    height: 100%;
    max-width: none;
  }

  body.app-chat-room-page .chat-message-bubble.is-media-only .chat-attachment-video.has-media-dimensions {
    width: min(var(--chat-media-width, 340px), 82vw);
  }
}


/* Telegram-like message reactions and quick actions */
.chat-message-row[data-message-id] {
  position: relative;
}

.chat-message-row[data-message-id]:not(.is-chat-pending-upload) {
  cursor: pointer;
}

.chat-message-row.is-action-menu-open .chat-message-bubble {
  filter: brightness(0.98);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

.chat-message-row.is-message-deleting {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.chat-message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.chat-message-reactions[hidden] {
  display: none;
}

.chat-message-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 24px;
  padding: 2px 7px 2px 5px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.82);
  color: #334155;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.chat-message-reaction-pill span {
  font-size: 15px;
  line-height: 1;
}

.chat-message-reaction-pill strong {
  font-size: 11px;
  font-weight: 800;
}

.chat-message-reaction-pill.is-own {
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(220, 252, 231, 0.92);
  color: #166534;
}

.chat-message-bubble.is-media-only .chat-message-reactions {
  position: absolute;
  z-index: 5;
  left: 7px;
  bottom: 7px;
  max-width: calc(100% - 74px);
  margin: 0;
}

.chat-message-bubble.is-media-only .chat-message-reaction-pill {
  min-height: 24px;
  padding: 2px 7px 2px 5px;
  border: 0;
  background: rgba(15, 23, 42, 0.54);
  color: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.chat-message-bubble.is-media-only .chat-message-reaction-pill.is-own {
  background: rgba(22, 163, 74, 0.76);
  color: #ffffff;
}

.chat-message-reply-quote {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 0 7px;
  padding: 6px 7px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.45);
}

.chat-message-reply-quote.has-thumb {
  grid-template-columns: 4px 38px minmax(0, 1fr);
}

.chat-message-incoming .chat-message-reply-quote {
  background: rgba(15, 23, 42, 0.045);
}

.chat-message-reply-line {
  width: 4px;
  align-self: stretch;
  min-height: 32px;
  border-radius: 999px;
  background: #22c55e;
}

.chat-message-reply-thumb {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.10);
  color: #166534;
  font-size: 17px;
  font-weight: 900;
}

.chat-message-reply-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chat-message-reply-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.chat-message-reply-copy strong {
  color: #166534;
  font-size: 12px;
  line-height: 1.15;
}

.chat-message-reply-copy small {
  color: rgba(71, 85, 105, 0.95);
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message-bubble.is-media-only .chat-message-reply-quote {
  display: none;
}

.chat-reply-preview {
  display: grid;
  grid-template-columns: 4px auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.94);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.chat-reply-preview[hidden] {
  display: none;
}

.chat-reply-preview-line {
  width: 4px;
  height: 38px;
  border-radius: 999px;
  background: #22c55e;
}

.chat-reply-preview-thumb {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.08);
  color: #166534;
  font-size: 18px;
  font-weight: 900;
}

.chat-reply-preview-thumb[hidden],
.chat-reply-preview:not(.has-thumb) .chat-reply-preview-thumb {
  display: none;
}

.chat-reply-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chat-reply-preview-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-reply-preview-copy strong {
  color: #166534;
  font-size: 12px;
  line-height: 1.2;
}

.chat-reply-preview-copy small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-reply-preview-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.86);
  color: #475569;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.chat-action-layer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.chat-action-layer[hidden] {
  display: none;
}

.chat-action-layer.is-open {
  pointer-events: auto;
}

.chat-action-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.08);
  cursor: default;
}

.chat-action-menu {
  position: fixed;
  width: min(330px, calc(100vw - 24px));
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.25);
  overflow: hidden;
  transform-origin: center bottom;
  animation: chatActionMenuIn 0.14s ease both;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@keyframes chatActionMenuIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-action-reactions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.92));
}

.chat-action-reactions::-webkit-scrollbar {
  display: none;
}

.chat-action-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
  transform: translateZ(0);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.chat-action-emoji:hover,
.chat-action-emoji:focus-visible,
.chat-action-emoji.is-active {
  background: #dcfce7;
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.24);
  transform: translateY(-2px) scale(1.04);
}

.chat-action-list {
  display: grid;
  padding: 8px;
}

.chat-action-list button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 54px;
  width: 100%;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}

.chat-action-list button:hover,
.chat-action-list button:focus-visible {
  background: rgba(226, 232, 240, 0.74);
  outline: none;
}

.chat-action-list button > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #475569;
  font-size: 24px;
  line-height: 1;
}

.chat-action-list button > strong {
  font-size: 16px;
  font-weight: 700;
}

.chat-action-list button.is-danger {
  color: #dc2626;
}

.chat-action-list button.is-danger > span {
  color: #ef4444;
}

.chat-action-toast {
  position: fixed;
  z-index: 1300;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.chat-action-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 700px) {
  .chat-action-backdrop {
    background: rgba(15, 23, 42, 0.18);
  }

  .chat-action-menu {
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto;
    border-radius: 26px;
    animation-name: chatActionSheetIn;
  }

  @keyframes chatActionSheetIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .chat-action-reactions {
    padding: 13px 14px 11px;
  }

  .chat-action-emoji {
    width: 40px;
    height: 40px;
    font-size: 28px;
  }

  .chat-action-list button {
    min-height: 56px;
  }
}

:root[data-theme="dark"] .chat-reply-preview {
  background: rgba(30, 41, 59, 0.94);
  border-color: rgba(148, 163, 184, 0.22);
}

:root[data-theme="dark"] .chat-emoji-popover {
  background: rgba(30, 41, 59, 0.98);
  border-color: rgba(148, 163, 184, 0.24);
}

:root[data-theme="dark"] .chat-emoji-option:hover,
:root[data-theme="dark"] .chat-emoji-option:focus-visible {
  background: rgba(34, 197, 94, 0.18);
}

:root[data-theme="dark"] .chat-action-menu {
  background: rgba(30, 41, 59, 0.96);
  border-color: rgba(148, 163, 184, 0.24);
}

:root[data-theme="dark"] .chat-action-reactions {
  background: linear-gradient(180deg, rgba(51, 65, 85, 0.98), rgba(30, 41, 59, 0.92));
}

:root[data-theme="dark"] .chat-action-list button {
  color: #f8fafc;
}

:root[data-theme="dark"] .chat-action-list button:hover,
:root[data-theme="dark"] .chat-action-list button:focus-visible {
  background: rgba(71, 85, 105, 0.72);
}

/* Chat swipe and first-tap interaction polish */
.chat-action-emoji,
.chat-action-list button,
.chat-message-reaction-pill {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chat-message-row[data-message-id] {
  touch-action: pan-y;
}

.chat-message-row[data-message-id] .chat-message-bubble {
  transform: translateX(var(--chat-swipe-offset, 0));
  will-change: transform;
}

.chat-message-row.is-swipe-replying .chat-message-bubble {
  transition: none;
}

.chat-message-row.is-swipe-resetting .chat-message-bubble,
.chat-message-row.is-swipe-reply-fired .chat-message-bubble {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chat-message-row[data-message-id]::after {
  content: '↩';
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: #168a38;
  font-size: 22px;
  font-weight: 900;
  opacity: 0;
  transform: translate(8px, -50%) scale(0.86);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease, background 0.12s ease;
}

.chat-message-row.is-swipe-replying::after {
  opacity: 0.72;
  transform: translate(0, -50%) scale(1);
}

.chat-message-row.is-swipe-reply-ready::after,
.chat-message-row.is-swipe-reply-fired::after {
  opacity: 1;
  background: rgba(34, 197, 94, 0.24);
  transform: translate(-2px, -50%) scale(1.08);
}

body.app-chat-room-page::after {
  content: 'Чаты';
  position: fixed;
  z-index: 1190;
  top: calc(52px + env(safe-area-inset-top));
  left: 50%;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.76);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px) scale(0.96);
  transition: opacity 0.14s ease, transform 0.14s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.app-chat-room-page.is-chat-room-back-swipe-ready::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* Direct dialogs: the header already shows the interlocutor, so hide repeated sender names.
   Group chats keep sender names above incoming messages and in reply quotes. */
.realtime-chat[data-chat-conversation-type="direct"] .chat-message-meta,
.realtime-chat[data-chat-conversation-type="direct"] .chat-message-reply-copy strong,
.realtime-chat[data-chat-conversation-type="direct"] .chat-reply-preview-copy strong {
  display: none;
}

.realtime-chat[data-chat-conversation-type="direct"] .chat-message-reply-copy,
.realtime-chat[data-chat-conversation-type="direct"] .chat-reply-preview-copy {
  gap: 0;
}



/* Safe client-side video compression: poster is a hint, never a blurred final video. */
.chat-attachment-video .chat-lazy-media.is-preview,
.chat-attachment-video .chat-lazy-media.has-low-preview {
  filter: none !important;
  transform: translateZ(0) !important;
}

/* Banquets calendar and detail */
.banquet-top-grid {
  align-items: start;
}

.banquets-calendar-weekdays,
.banquets-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 8px;
}

.banquets-calendar-weekdays {
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--muted);
  font-size: 13px;
}

.banquets-calendar-weekdays > div {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 8px 10px;
}

.banquet-day-cell {
  min-height: 156px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.banquet-day-cell.muted-day {
  opacity: 0.58;
}

.banquet-day-cell.today {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.banquet-day-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.banquet-day-head span {
  color: var(--muted);
}

.banquet-day-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.banquet-mini-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  text-decoration: none;
}

.banquet-mini-card:hover {
  border-color: var(--accent);
}

.banquet-mini-time {
  font-weight: 800;
  font-size: 13px;
}

.banquet-mini-title {
  font-size: 13px;
  line-height: 1.25;
}

.banquets-table {
  min-width: 1420px;
}

.banquet-form-section {
  border: 1px solid var(--border);
  padding: 14px;
  background: rgba(148, 163, 184, 0.05);
}

.banquet-form-section h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.banquet-form-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.banquet-detail-lower {
  align-items: start;
}

.banquet-history-table {
  min-width: 760px;
}

@media (max-width: 1280px) {
  .banquets-calendar-weekdays,
  .banquets-calendar {
    grid-template-columns: repeat(7, minmax(130px, 1fr));
  }

  .banquet-form-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .banquets-calendar-weekdays {
    display: none;
  }

  .banquets-calendar {
    grid-template-columns: 1fr;
  }

  .banquet-day-cell.muted-day {
    display: none;
  }

  .banquet-form-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* banquets-documents-and-calendar-fix-20260520 */
.banquets-calendar-wrap,
.banquet-calendar-card {
  overflow-x: auto;
}

.banquets-calendar-weekdays,
.banquets-calendar,
.banquet-calendar {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(130px, 1fr)) !important;
  min-width: 910px !important;
  width: 100% !important;
}

.banquets-calendar-weekdays > div,
.banquet-calendar-head {
  padding: 8px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-bottom: 0;
  font-weight: 800;
  text-align: center;
}

.banquet-day-cell,
.banquet-calendar-day {
  display: block !important;
  min-height: 150px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin: -1px 0 0 -1px;
}

.banquet-day-cell.muted-day,
.banquet-calendar-day.is-muted {
  background: var(--surface-alt);
  opacity: .72;
}

.banquet-day-cell.today,
.banquet-calendar-day.is-today {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.banquet-day-head,
.banquet-calendar-date {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.banquet-day-list,
.banquet-calendar-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.banquet-mini-card,
.banquet-calendar-event {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  text-decoration: none;
}

.banquet-mini-time,
.banquet-event-time {
  font-weight: 800;
}

.banquet-mini-title,
.banquet-event-title {
  font-size: 12px;
  line-height: 1.25;
}

.banquet-doc-template-layout,
.document-editor-layout {
  align-items: start;
}

.document-editor-form textarea[data-document-content] {
  min-height: 620px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.45;
}

.document-print-paper {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px;
}

.document-preview-header h2 {
  margin: 4px 0 18px;
}

.document-preview-body {
  white-space: normal;
  line-height: 1.45;
  font-size: 15px;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.details-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 10px;
}

@media (max-width: 1100px) {
  .banquets-calendar-weekdays,
  .banquets-calendar,
  .banquet-calendar {
    grid-template-columns: repeat(7, minmax(170px, 1fr)) !important;
    min-width: 1190px !important;
  }

  .document-editor-form textarea[data-document-content] {
    min-height: 420px;
  }
}

/* Submissions CRM statuses and banquet conversion */
.submissions-head-card {
  margin-bottom: 18px;
}

.submission-head-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.submissions-filter-form {
  margin-bottom: 14px;
}

.lead-status-board {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lead-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  text-decoration: none;
}

.lead-status-chip.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.lead-status-chip strong {
  min-width: 24px;
  text-align: right;
}

.submissions-table {
  min-width: 1480px;
}

.submission-client-name {
  font-weight: 700;
}

.submission-note {
  margin-top: 8px;
  max-width: 260px;
  white-space: pre-wrap;
  color: var(--muted);
}

.submission-callback-due {
  font-weight: 800;
  color: var(--danger);
}

.submission-actions-stack {
  min-width: 280px;
}

.submission-action-details {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 8px;
}

.submission-action-details summary {
  list-style: none;
  width: 100%;
}

.submission-action-details summary::-webkit-details-marker {
  display: none;
}

.submission-action-details[open] summary {
  margin-bottom: 10px;
}

.submission-status-form,
.submission-convert-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.submission-convert-details {
  min-width: min(720px, 78vw);
}

.submission-convert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
}

.submission-convert-extra {
  border: 1px dashed var(--border);
  padding: 8px;
  background: var(--surface);
}

.submission-convert-extra summary {
  list-style: none;
  display: inline-flex;
  width: auto;
}

.submission-convert-extra summary::-webkit-details-marker {
  display: none;
}

.submission-convert-extra[open] summary {
  margin-bottom: 10px;
}

.submission-convert-grid-extra {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

@media (max-width: 980px) {
  .submission-head-row {
    flex-direction: column;
    align-items: stretch;
  }

  .lead-status-chip {
    flex: 1 1 180px;
  }

  .submission-convert-details {
    min-width: min(620px, 86vw);
  }

  .submission-convert-grid,
  .submission-convert-grid-extra {
    grid-template-columns: 1fr;
  }
}

/* Banquet responsible managers and turnover stats */
.banquet-filter-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.banquet-responsible-table {
  min-width: 1040px;
}

.banquet-responsible-detail-table {
  min-width: 1180px;
}

.banquets-table {
  min-width: 1540px;
}

.muted-row {
  opacity: 0.78;
}

@media (max-width: 980px) {
  .banquet-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* Banquet UX upgrade: responsible managers, turnover and fast assignment */
.eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.section-title-row .section-title {
  margin-bottom: 4px;
}

.banquet-workspace-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--surface), var(--surface-alt));
}

.banquet-hero-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.banquet-hero-main h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.08;
}

.banquet-hero-main p {
  max-width: 760px;
  margin: 0;
}

.banquet-hero-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
}

.banquet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.banquet-tab,
.banquet-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.banquet-tab.active,
.banquet-chip.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.banquet-chip.danger:not(.active) {
  color: var(--danger);
  border-color: rgba(162, 41, 41, .35);
}

.banquet-month-nav {
  justify-content: flex-end;
}

.banquet-kpi-cards .stat-card {
  min-height: 118px;
}

.banquet-filter-card,
.banquet-create-card,
.banquet-team-card {
  margin-bottom: 20px;
}

.banquet-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.banquet-filter-details {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 10px;
}

.banquet-filter-details summary {
  list-style: none;
  width: fit-content;
}

.banquet-filter-details summary::-webkit-details-marker {
  display: none;
}

.banquet-filter-details[open] summary {
  margin-bottom: 12px;
}

.banquet-filter-form {
  padding-top: 2px;
}

.banquet-manager-strip,
.banquet-responsible-grid {
  display: grid;
  gap: 12px;
}

.banquet-manager-strip {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.banquet-responsible-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.banquet-manager-card,
.banquet-responsible-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  text-decoration: none;
}

.banquet-manager-card:hover,
.banquet-responsible-card:hover,
.banquet-manager-card.active,
.banquet-responsible-card.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.banquet-responsible-card.is-unassigned {
  border-style: dashed;
}

.banquet-manager-name,
.banquet-responsible-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.banquet-responsible-card-head span {
  color: var(--muted);
  font-weight: 800;
}

.banquet-responsible-money {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
}

.banquet-responsible-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.banquet-progress {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}

.banquet-progress i {
  display: block;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--accent);
}

.table-progress {
  width: 120px;
  margin-bottom: 4px;
}

.banquet-mini-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.banquet-mini-top span {
  color: var(--muted);
  font-weight: 800;
}

.banquet-owner-pill,
.banquet-owner-main {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(37, 99, 235, .35);
  background: rgba(37, 99, 235, .08);
  font-size: 12px;
  font-weight: 800;
}

.banquet-owner-pill.is-empty,
.banquet-owner-main.is-empty {
  border-color: rgba(162, 41, 41, .35);
  background: rgba(162, 41, 41, .08);
  color: var(--danger);
}

.banquet-owner-main {
  margin-bottom: 8px;
}

.banquet-owner-form {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 240px;
}

.banquet-owner-form select {
  min-height: 36px;
  padding: 7px 9px;
  min-width: 0;
  flex: 1 1 160px;
}

.banquet-row-unassigned td {
  background: rgba(162, 41, 41, .035);
}

.banquet-table-actions {
  min-width: 150px;
}

.banquet-detail-hero {
  align-items: flex-start;
}

.banquet-detail-badges,
.banquet-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.banquet-detail-focus-grid {
  align-items: stretch;
}

.banquet-details-grid > div strong {
  font-size: 18px;
}

@media (max-width: 1100px) {
  .banquet-workspace-hero {
    flex-direction: column;
  }

  .banquet-hero-side {
    align-items: stretch;
  }

  .banquet-tabs,
  .banquet-month-nav {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .section-title-row {
    flex-direction: column;
    align-items: stretch;
  }

  .banquet-tab,
  .banquet-chip,
  .banquet-month-nav .button,
  .banquet-detail-actions .button {
    flex: 1 1 150px;
  }

  .banquet-filter-details summary {
    width: 100%;
  }

  .banquet-owner-form {
    min-width: 0;
  }

  .banquet-responsible-meta {
    grid-template-columns: 1fr;
  }
}

/* Task / meeting UX upgrade */
.page-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 22px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(16, 185, 129, .06)), var(--card);
  box-shadow: var(--shadow-sm);
}

.page-hero h1 {
  margin: 4px 0 8px;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05;
}

.page-hero p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
}

.eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-actions,
.hero-status-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.hero-status-form input,
.hero-status-form select {
  min-height: 36px;
}

.task-workspace-top,
.meeting-context-grid {
  align-items: start;
}

.quick-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.quick-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.quick-filter-chip:hover,
.quick-filter-chip.is-active {
  border-color: rgba(37, 99, 235, .55);
  background: rgba(37, 99, 235, .10);
}

.quick-filter-chip span {
  min-width: 20px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  background: var(--card);
  text-align: center;
}

.quick-filter-chip em {
  color: var(--danger);
  font-size: 11px;
  font-style: normal;
}

.table-wrap-wide {
  overflow-x: auto;
}

.task-board-table {
  min-width: 1180px;
}

.task-board-table th {
  white-space: nowrap;
}

.task-board-row td {
  vertical-align: top;
}

.task-title-cell {
  min-width: 310px;
}

.task-title-line {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.subtask-marker {
  color: var(--muted);
  font-weight: 900;
}

.subtask-row .task-title-cell {
  padding-left: 28px;
  border-left: 3px solid rgba(37, 99, 235, .22);
}

.block-text {
  display: block;
  margin-top: 4px;
}

.task-board-table .editable-cell {
  display: block;
  min-width: 0;
  cursor: pointer;
  border-radius: 10px;
}

.task-board-table .editable-cell > summary,
.editable-cell.request-cell > summary,
.legacy-person-board > summary {
  list-style: none;
}

.task-board-table .editable-cell > summary::-webkit-details-marker,
.editable-cell.request-cell > summary::-webkit-details-marker,
.legacy-person-board > summary::-webkit-details-marker {
  display: none;
}

.task-board-table .editable-cell > summary {
  padding: 8px;
  border: 1px dashed transparent;
}

.task-board-table .editable-cell:hover > summary,
.task-board-table .editable-cell[open] > summary {
  border-color: rgba(37, 99, 235, .35);
  background: rgba(37, 99, 235, .06);
}

.inline-edit-panel {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.compact-edit-cell {
  min-width: 150px;
}

.request-cell {
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent);
}

.mini-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 4px;
  margin: 3px 3px 0 0;
  padding: 3px 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}

.mini-chip-warning {
  border-color: rgba(245, 158, 11, .55);
  background: rgba(245, 158, 11, .12);
}

.task-due-short {
  display: block;
  font-weight: 900;
}

.status-due-inline,
.status-comment-inline {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.status-comment-inline {
  max-width: 240px;
  color: var(--text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.due-request-card {
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(245, 158, 11, .45);
  background: rgba(245, 158, 11, .10);
  font-size: 12px;
}

.danger-text {
  color: var(--danger);
}

.warning-text {
  color: var(--warning, #b45309);
}

.meeting-quick-create-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(220px, 1.2fr) minmax(180px, .8fr) minmax(130px, .55fr) minmax(110px, .45fr);
  gap: 12px;
  align-items: end;
}

.meeting-quick-create-form .field-wide {
  min-width: 0;
}

.meeting-add-task-card {
  margin-top: 18px;
}

.legacy-person-board {
  margin-top: 18px;
}

.legacy-person-board > summary {
  cursor: pointer;
}

.compact-people-board {
  margin-top: 12px;
}

.meeting-mini-task {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 130px auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.task-subtask-list {
  display: grid;
  gap: 10px;
}

.subtask-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.nowrap {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .page-hero {
    flex-direction: column;
  }

  .hero-actions,
  .hero-status-form {
    justify-content: flex-start;
  }

  .meeting-quick-create-form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .quick-filter-chip {
    flex: 1 1 150px;
    justify-content: space-between;
  }

  .meeting-quick-create-form {
    grid-template-columns: 1fr;
  }

  .hero-status-form input,
  .hero-status-form select,
  .hero-status-form .button {
    width: 100%;
  }
}

/* Tasks and meetings inline UX: filters, inline editors, subtasks */
:root {
  --card: var(--surface);
  --shadow-sm: 0 10px 24px rgba(15, 23, 42, .08);
}

.page-hero h2 {
  margin: 4px 0 8px;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.08;
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.task-kpi-cards .stat-card {
  min-height: 92px;
  gap: 12px;
}

.task-kpi-cards .stat-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.task-kpi-cards .stat-card strong {
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1;
}

.task-filter-panel,
.task-table-card,
.meeting-task-table-card {
  margin-bottom: 20px;
}

.task-workspace-top,
.meeting-workspace-top {
  align-items: start;
}

.responsible-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.filter-pill span {
  min-width: 24px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--muted);
  text-align: center;
}

.filter-pill:hover,
.filter-pill.active {
  border-color: rgba(37, 99, 235, .55);
  background: rgba(37, 99, 235, .08);
}

.filter-pill.active span {
  border-color: rgba(37, 99, 235, .35);
  background: rgba(37, 99, 235, .12);
  color: var(--accent);
}

.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.task-inline-table {
  min-width: 1560px;
  border-collapse: separate;
  border-spacing: 0;
}

.task-inline-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}

.task-inline-table td {
  vertical-align: top;
}

.task-inline-row td {
  background: var(--surface);
}

.task-inline-row.row-danger td {
  background: rgba(162, 41, 41, .06);
}

.task-inline-row.row-today td {
  background: rgba(107, 114, 128, .07);
}

.task-inline-row.task-subrow td:first-child {
  border-left: 4px solid rgba(37, 99, 235, .28);
}

.task-title-cell {
  min-width: 430px;
  max-width: 560px;
}

.task-cell-editor {
  display: block;
  position: relative;
}

.task-cell-editor > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px;
  border: 1px dashed transparent;
  border-radius: 12px;
  min-height: 44px;
}

.task-cell-editor > summary::-webkit-details-marker {
  display: none;
}

.task-cell-editor:hover > summary,
.task-cell-editor[open] > summary {
  border-color: rgba(37, 99, 235, .40);
  background: rgba(37, 99, 235, .07);
}

.task-title-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding-left: calc(var(--task-level, 0) * 18px);
}

.task-title-link {
  color: var(--text);
  text-decoration: none;
}

.task-title-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.task-subtask-mark {
  color: var(--accent);
  font-weight: 900;
}

.editable-hint {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.task-date-summary,
.task-status-summary {
  display: grid;
  gap: 6px;
}

.task-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.task-due-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(37, 99, 235, .25);
  background: rgba(37, 99, 235, .08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.task-due-pill.is-today {
  border-color: rgba(107, 114, 128, .32);
  background: rgba(107, 114, 128, .10);
  color: var(--muted);
}

.task-due-pill.is-overdue {
  border-color: rgba(162, 41, 41, .32);
  background: rgba(162, 41, 41, .10);
  color: var(--danger);
}

.task-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--border);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

.task-table-scroll .task-inline-table {
  margin: 0;
}

.table-scroll-hint {
  margin-top: 4px;
}

.task-subtasks-inline {
  margin-top: 8px;
  padding: 8px 8px 8px 10px;
  border-left: 3px solid rgba(37, 99, 235, .28);
  background: rgba(37, 99, 235, .045);
  display: grid;
  gap: 6px;
  font-size: 12px;
}

.task-subtasks-nested {
  margin-left: calc(var(--task-level, 1) * 8px);
  background: rgba(107, 114, 128, .06);
}

.task-inline-subtask-editor {
  border: 1px solid var(--border);
  background: var(--surface);
}

.task-inline-subtask-editor.is-today {
  border-color: rgba(107, 114, 128, .34);
  background: rgba(107, 114, 128, .06);
}

.task-inline-subtask-editor.is-overdue {
  border-color: rgba(162, 41, 41, .30);
  background: rgba(162, 41, 41, .045);
}

.task-inline-subtask-editor > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  cursor: pointer;
  list-style: none;
}

.task-inline-subtask-editor > summary::-webkit-details-marker {
  display: none;
}

.task-inline-subtask-editor[open] > summary,
.task-inline-subtask-editor:hover > summary {
  background: rgba(37, 99, 235, .06);
}

.task-subtask-title {
  font-weight: 900;
  color: var(--text);
}

.task-subtask-person,
.task-subtask-description,
.task-subtask-comment {
  font-size: 12px;
}

.task-compact-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.task-compact-form {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}

.task-compact-form .field span,
.task-compact-form input,
.task-compact-form select,
.task-compact-form textarea {
  font-size: 12px;
}

.task-status-comment {
  max-width: 280px;
  font-size: 12px;
  font-weight: 750;
  color: var(--text);
  overflow-wrap: anywhere;
}

.task-due-request-note {
  padding: 7px 8px;
  border: 1px solid rgba(154, 107, 0, .34);
  background: rgba(154, 107, 0, .08);
  color: var(--warning);
  font-size: 12px;
  font-weight: 800;
}

.task-popover-form {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 10px;
  min-width: min(420px, 72vw);
}

.task-popover-form .field span,
.task-due-request-form .field span {
  font-weight: 800;
}

.task-due-request-form {
  border-color: rgba(154, 107, 0, .34);
  background: rgba(154, 107, 0, .06);
}

.mini-section-title {
  font-weight: 900;
  font-size: 13px;
}

.task-subtask-editor .task-popover-form {
  min-width: min(360px, 72vw);
}

.person-mini {
  display: inline-flex;
  width: fit-content;
  margin: 0 4px 4px 0;
  padding: 3px 7px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  font-size: 12px;
  font-weight: 800;
}

.task-detail-hero .hero-status-form {
  max-width: 520px;
}

.task-detail-hero .hero-status-form input {
  min-width: min(260px, 100%);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.detail-row span {
  color: var(--muted);
}

.detail-text {
  white-space: pre-wrap;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .section-header-row,
  .page-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-pill {
    flex: 1 1 160px;
    justify-content: space-between;
  }

  .task-popover-form {
    min-width: 70vw;
  }

  .task-compact-edit-grid {
    grid-template-columns: 1fr;
  }
}


/* Tasks table follow-up UX: merged columns, sticky horizontal scrollbar, resizable grid */
.task-table-card-top {
  margin-top: 0;
}

.task-inline-table.task-resizable-table {
  width: 1480px;
  min-width: 0;
  table-layout: fixed;
}

.task-inline-table.task-resizable-table th,
.task-inline-table.task-resizable-table td {
  position: relative;
}

.task-inline-table.task-resizable-table th {
  user-select: none;
}

.task-title-cell {
  min-width: 360px;
  max-width: none;
}

.task-assignees-cell {
  min-width: 260px;
}

.task-control-cell {
  min-width: 220px;
}

.task-status-cell {
  min-width: 340px;
}

.task-inline-table.task-resizable-table th,
.task-inline-table.task-resizable-table td,
.task-inline-table.task-resizable-table .task-title-cell,
.task-inline-table.task-resizable-table .task-assignees-cell,
.task-inline-table.task-resizable-table .task-control-cell,
.task-inline-table.task-resizable-table .task-status-cell {
  min-width: 0;
  max-width: none;
  overflow-wrap: anywhere;
}

.task-inline-table.task-resizable-table .task-cell-editor,
.task-inline-table.task-resizable-table .task-status-summary,
.task-inline-table.task-resizable-table .task-assignees-summary,
.task-inline-table.task-resizable-table .task-popover-form,
.task-inline-table.task-resizable-table .task-compact-form {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.task-inline-table.task-resizable-table .task-popover-form select,
.task-inline-table.task-resizable-table .task-popover-form input,
.task-inline-table.task-resizable-table .task-popover-form textarea,
.task-inline-table.task-resizable-table .task-compact-form select,
.task-inline-table.task-resizable-table .task-compact-form input,
.task-inline-table.task-resizable-table .task-compact-form textarea {
  max-width: 100%;
}

.task-title-cell-inner {
  min-height: 100%;
  display: grid;
  gap: 8px;
}

.task-title-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.task-subtask-counter {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.task-add-subtask-panel {
  position: relative;
  margin-left: auto;
  width: fit-content;
}

.task-add-subtask-panel > summary::-webkit-details-marker {
  display: none;
}

.task-add-subtask-button {
  list-style: none;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(37, 99, 235, .28);
  background: rgba(37, 99, 235, .08);
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.task-add-subtask-button:hover,
.task-add-subtask-panel[open] > .task-add-subtask-button {
  background: rgba(37, 99, 235, .14);
  border-color: rgba(37, 99, 235, .50);
}

.task-add-subtask-panel > .task-subtask-create-form {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 35;
  min-width: min(390px, 78vw);
}

.task-add-subtask-panel.is-compact {
  margin-top: 8px;
}

.task-add-subtask-panel.is-compact > .task-subtask-create-form {
  min-width: min(350px, 76vw);
}

.task-assignees-summary {
  display: grid;
  gap: 7px;
}

.task-person-role {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.task-co-people {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.task-status-summary {
  min-width: 0;
}

.task-status-cell .task-status-comment,
.task-status-cell .task-due-request-note {
  max-width: 100%;
}

.task-status-cell .task-popover-form {
  width: 100%;
}

.task-status-line {
  align-items: center;
}

.task-inline-row.row-today td {
  background: rgba(107, 114, 128, .08);
}

.task-subtasks-inline {
  font-size: 11px;
}

.task-inline-subtask-editor {
  font-size: 11px;
  border-radius: 10px;
}

.task-inline-subtask-editor > summary {
  min-height: 32px;
  padding: 6px 8px;
}

.task-subtask-body {
  display: grid;
  gap: 7px;
  padding: 8px;
}

.task-subtask-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 7px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}

.task-subtask-count {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.task-inline-subtask-editor .task-compact-edit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-inline-subtask-editor .task-popover-form,
.task-inline-subtask-editor .task-compact-form {
  font-size: 11px;
}

.task-inline-subtask-editor .task-popover-form {
  min-width: 0;
}

.task-compact-form > .task-popover-form {
  margin-top: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.task-compact-form .task-due-request-form {
  padding: 8px;
  border: 1px solid rgba(154, 107, 0, .34);
}

.task-table-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
}

.task-sticky-scroll {
  position: sticky;
  bottom: 0;
  z-index: 22;
  height: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  border-top: 0;
  background: var(--surface);
  box-shadow: 0 -8px 18px rgba(15, 23, 42, .08);
  scrollbar-gutter: stable;
}

.task-sticky-scroll > div {
  height: 1px;
}

.task-sticky-scroll.is-hidden {
  display: none;
}

.task-col-resizer {
  position: absolute;
  top: 0;
  right: -5px;
  z-index: 5;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.task-col-resizer::after {
  content: '';
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 4px;
  width: 1px;
  background: rgba(148, 163, 184, .55);
}

.task-inline-table.task-resizable-table th:last-child {
  padding-right: 18px;
}

.task-inline-table.task-resizable-table th:last-child .task-col-resizer {
  right: 0;
  width: 16px;
}

.task-inline-table.task-resizable-table th:last-child .task-col-resizer::after {
  left: 7px;
}

.task-col-resizer:hover::after,
body.task-resizing-cols .task-col-resizer::after {
  background: rgba(37, 99, 235, .9);
}

.task-row-resizer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  z-index: 4;
  height: 8px;
  cursor: row-resize;
  touch-action: none;
}

.task-row-resizer::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 1px;
  background: rgba(148, 163, 184, .35);
}

.task-row-resizer:hover::after,
body.task-resizing-rows .task-row-resizer::after {
  background: rgba(37, 99, 235, .75);
}

body.task-resizing-cols,
body.task-resizing-rows {
  user-select: none;
}

body.task-resizing-cols {
  cursor: col-resize;
}

body.task-resizing-rows {
  cursor: row-resize;
}

@media (max-width: 900px) {
  .task-add-subtask-panel > .task-subtask-create-form {
    right: auto;
    left: 0;
  }

  .task-subtask-info-grid,
  .task-inline-subtask-editor .task-compact-edit-grid {
    grid-template-columns: 1fr;
  }
}

/* Fixed viewport scrollbar for wide task tables */
.task-sticky-scroll {
  position: fixed;
  left: 0;
  bottom: 0;
  display: none;
  width: 100%;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.task-sticky-scroll.is-active:not(.is-hidden) {
  display: block;
}

@media (max-width: 760px) {
  .task-sticky-scroll {
    bottom: 72px;
  }
}


/* Task table resize hotfix: the last column can be shrunk like the others. */
.task-inline-table.task-resizable-table {
  min-width: 0;
  max-width: none;
}

.task-inline-table.task-resizable-table th,
.task-inline-table.task-resizable-table td {
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

.task-inline-table.task-resizable-table th {
  white-space: normal;
  line-height: 1.25;
  padding-right: 18px;
}

.task-inline-table.task-resizable-table .task-title-cell,
.task-inline-table.task-resizable-table .task-assignees-cell,
.task-inline-table.task-resizable-table .task-control-cell,
.task-inline-table.task-resizable-table .task-status-cell {
  min-width: 0;
  max-width: none;
}

.task-inline-table.task-resizable-table .task-status-summary,
.task-inline-table.task-resizable-table .task-assignees-summary,
.task-inline-table.task-resizable-table .task-status-comment,
.task-inline-table.task-resizable-table .task-title-summary {
  min-width: 0;
  max-width: 100%;
}

.task-inline-table.task-resizable-table .task-popover-form,
.task-inline-table.task-resizable-table .task-compact-form,
.task-inline-table.task-resizable-table .task-due-request-form {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.task-inline-table.task-resizable-table input,
.task-inline-table.task-resizable-table select,
.task-inline-table.task-resizable-table textarea {
  min-width: 0;
  max-width: 100%;
}

.task-col-resizer {
  right: 0;
  width: 14px;
}

.task-col-resizer::after {
  left: auto;
  right: 3px;
}

/* Tasks table drag-scroll, hover actions, and mobile stacked layout */
.task-table-scroll {
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-gutter: auto;
}

.task-table-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.task-table-scroll.is-dragging,
.task-table-scroll.is-dragging * {
  cursor: grabbing !important;
}

.task-sticky-scroll {
  display: none !important;
}

.task-assignee-workbox {
  position: relative;
  min-height: 96px;
  padding-bottom: 34px;
}

.task-assignee-workbox.is-compact {
  min-height: 78px;
  padding: 8px 8px 34px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.task-assignee-workbox .task-assignees-editor {
  min-width: 0;
}

.task-hover-actions {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 28;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}

.task-assignee-workbox:hover .task-hover-actions,
.task-assignee-workbox:focus-within .task-hover-actions,
.task-assignee-workbox:has(.task-hover-action-panel[open]) .task-hover-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.task-hover-action-panel,
.task-hover-actions .task-add-subtask-panel {
  position: relative;
  margin: 0;
  width: auto;
}

.task-hover-action-panel > summary::-webkit-details-marker {
  display: none;
}

.task-hover-action-button {
  list-style: none;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(37, 99, 235, .28);
  background: rgba(37, 99, 235, .08);
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
}

.task-hover-action-button:hover,
.task-hover-action-panel[open] > .task-hover-action-button {
  border-color: rgba(37, 99, 235, .50);
  background: rgba(37, 99, 235, .14);
}

.task-hover-action-panel > .task-popover-form,
.task-hover-actions .task-add-subtask-panel > .task-popover-form,
.task-hover-actions .task-add-subtask-panel > .task-subtask-create-form {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 45;
  min-width: min(390px, 78vw);
  max-width: min(430px, 82vw);
}

.task-hover-action-panel:first-child > .task-popover-form {
  right: -112px;
}

.task-mobile-subtasks-cell {
  display: none;
}

@media (max-width: 760px) {
  .task-table-scroll {
    overflow: visible;
    border: 0;
    background: transparent;
    cursor: default;
  }

  .task-inline-table.task-resizable-table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
  }

  .task-inline-table.task-resizable-table colgroup,
  .task-inline-table.task-resizable-table thead {
    display: none;
  }

  .task-inline-table.task-resizable-table tbody {
    display: grid;
    gap: 12px;
    width: 100%;
  }

  .task-inline-table.task-resizable-table tr.task-inline-row {
    display: block;
    width: 100%;
    height: auto !important;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  .task-inline-table.task-resizable-table tr.task-inline-row.row-today {
    border-color: rgba(107, 114, 128, .24);
  }

  .task-inline-table.task-resizable-table tr.task-inline-row.row-danger {
    border-color: rgba(162, 41, 41, .28);
  }

  .task-inline-table.task-resizable-table tr.task-inline-row td {
    display: block;
    width: 100% !important;
    height: auto !important;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
  }

  .task-inline-table.task-resizable-table tr.task-inline-row td:last-child {
    border-bottom: 0;
  }

  .task-inline-table.task-resizable-table tr.task-inline-row td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .task-inline-table.task-resizable-table tr.task-inline-row .task-title-cell::before {
    display: none;
  }

  .task-title-link strong {
    font-size: 16px;
    line-height: 1.25;
  }

  .task-inline-table.task-resizable-table .task-cell-editor > summary {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .task-inline-table.task-resizable-table .task-cell-editor:hover > summary,
  .task-inline-table.task-resizable-table .task-cell-editor[open] > summary {
    border-color: transparent;
    background: transparent;
  }

  .task-title-cell .task-title-footer,
  .task-title-cell > .task-title-cell-inner > .task-subtasks-inline {
    display: none;
  }

  .task-mobile-subtasks-cell {
    display: block !important;
  }

  .task-mobile-subtasks-cell .task-subtasks-inline {
    margin-top: 0;
  }

  .task-assignee-workbox,
  .task-assignee-workbox.is-compact {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .task-hover-actions {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 8px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .task-hover-action-panel > .task-popover-form,
  .task-hover-actions .task-add-subtask-panel > .task-popover-form,
  .task-hover-actions .task-add-subtask-panel > .task-subtask-create-form,
  .task-hover-action-panel:first-child > .task-popover-form {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 8px;
  }

  .task-hover-action-panel {
    width: 100%;
  }

  .task-hover-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    width: 100%;
  }

  .task-popover-form,
  .task-due-request-form,
  .task-inline-table.task-resizable-table .task-popover-form,
  .task-inline-table.task-resizable-table .task-compact-form {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .task-col-resizer,
  .task-row-resizer {
    display: none !important;
  }

  .task-subtask-info-grid,
  .task-inline-subtask-editor .task-compact-edit-grid {
    grid-template-columns: 1fr;
  }
}

/* Tasks table: merged people/control column, clean edges, draggable column order */
.task-table-scroll {
  border: 0 !important;
  background: transparent !important;
  padding: 0;
}

.task-inline-table.task-resizable-table {
  width: max-content;
  min-width: 0 !important;
  max-width: none !important;
  table-layout: fixed;
}

.task-inline-table.task-resizable-table th {
  padding-left: 32px;
}

.task-inline-table.task-resizable-table th,
.task-inline-table.task-resizable-table td {
  background-clip: padding-box;
}

.task-col-move-handle {
  position: absolute;
  left: 9px;
  top: 50%;
  z-index: 7;
  width: 11px;
  height: 17px;
  transform: translateY(-50%);
  cursor: grab;
  touch-action: none;
}

.task-col-move-handle::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 2px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(100, 116, 139, .8);
  box-shadow:
    0 5px 0 rgba(100, 116, 139, .8),
    0 10px 0 rgba(100, 116, 139, .8),
    6px 0 0 rgba(100, 116, 139, .8),
    6px 5px 0 rgba(100, 116, 139, .8),
    6px 10px 0 rgba(100, 116, 139, .8);
}

.task-col-move-handle:hover::before,
.task-inline-table.task-resizable-table th.is-reorder-source .task-col-move-handle::before,
body.task-reordering-cols .task-col-move-handle::before {
  background: rgba(37, 99, 235, .95);
  box-shadow:
    0 5px 0 rgba(37, 99, 235, .95),
    0 10px 0 rgba(37, 99, 235, .95),
    6px 0 0 rgba(37, 99, 235, .95),
    6px 5px 0 rgba(37, 99, 235, .95),
    6px 10px 0 rgba(37, 99, 235, .95);
}

.task-inline-table.task-resizable-table th.is-reorder-source {
  outline: 2px solid rgba(37, 99, 235, .35);
  outline-offset: -2px;
}

body.task-reordering-cols {
  cursor: grabbing;
  user-select: none;
}

body.task-reordering-cols .task-col-move-handle {
  cursor: grabbing;
}

.task-people-summary {
  gap: 9px;
}

.task-control-people {
  padding-top: 5px;
  border-top: 1px dashed var(--border);
}

.task-people-edit-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.task-people-edit-stack .task-popover-form,
.task-compact-people-form .task-popover-form {
  margin-top: 0;
}

.task-compact-people-form {
  gap: 8px;
}

.task-subtask-info-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.task-mobile-subtasks-cell {
  display: none !important;
}

@media (max-width: 760px) {
  .task-inline-table.task-resizable-table th {
    padding-left: 12px;
  }

  .task-title-cell .task-title-footer,
  .task-title-cell > .task-title-cell-inner > .task-subtasks-inline {
    display: grid;
  }

  .task-title-cell > .task-title-cell-inner > .task-title-footer {
    display: flex;
  }

  .task-people-edit-stack {
    grid-template-columns: 1fr;
  }

  .task-subtask-info-grid {
    grid-template-columns: 1fr;
  }

  .task-col-move-handle {
    display: none !important;
  }
}

/* Tasks table: cleaner edge, combined people column, and column reorder handles */
.task-table-scroll {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.task-table-scroll .task-inline-table {
  background: transparent;
}

.task-inline-table.task-resizable-table {
  width: 1310px;
}

.task-inline-table.task-resizable-table th,
.task-inline-table.task-resizable-table td {
  border-color: var(--border);
}

.task-inline-table.task-resizable-table th:last-child,
.task-inline-table.task-resizable-table td:last-child {
  border-right: 1px solid var(--border);
}

.task-th-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.task-th-content > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.task-col-drag-handle {
  position: relative;
  display: inline-flex;
  flex: 0 0 18px;
  width: 18px;
  height: 22px;
  margin-left: auto;
  border-radius: 7px;
  cursor: grab;
  opacity: .52;
  touch-action: none;
}

.task-col-drag-handle::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 3px;
  height: 3px;
  background: rgba(100, 116, 139, .92);
  box-shadow:
    7px 0 rgba(100, 116, 139, .92),
    0 7px rgba(100, 116, 139, .92),
    7px 7px rgba(100, 116, 139, .92),
    0 14px rgba(100, 116, 139, .92),
    7px 14px rgba(100, 116, 139, .92);
}

.task-col-drag-handle:hover,
body.task-reordering-cols .task-col-drag-handle {
  opacity: .95;
}

body.task-reordering-cols,
body.task-reordering-cols * {
  cursor: grabbing !important;
  user-select: none;
}

.task-inline-table.is-reordering-cols th {
  transition: background-color .12s ease, outline-color .12s ease;
}

.task-inline-table.is-reordering-cols th.is-drag-source {
  outline: 2px solid rgba(37, 99, 235, .45);
  outline-offset: -2px;
  background: rgba(37, 99, 235, .10);
}

.task-people-cell .task-assignee-workbox,
.task-people-summary {
  min-width: 0;
}

.task-people-summary {
  display: grid;
  gap: 8px;
}

.task-people-summary > div,
.task-people-block {
  display: grid;
  gap: 3px;
}

.task-people-form {
  gap: 9px;
}

@media (max-width: 760px) {
  .task-inline-table.task-resizable-table tr.task-inline-row .task-people-cell::before {
    content: 'Ответственные / контроль';
  }

  .task-people-summary {
    gap: 10px;
  }

  .task-col-drag-handle {
    display: none;
  }
}

/* Tasks table polish: no empty right edge, combined people column, six-square column drag handle */
.task-table-card .table-wrap.task-table-scroll,
.meeting-task-table-card .table-wrap.task-table-scroll {
  width: max-content;
  max-width: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.task-table-scroll .task-inline-table.task-resizable-table {
  margin: 0;
}

.task-inline-table.task-resizable-table th {
  padding-left: 34px;
}

.task-col-drag-handle {
  position: absolute;
  left: 9px;
  top: 50%;
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(2, 3px);
  grid-auto-rows: 3px;
  gap: 3px;
  width: 12px;
  height: 18px;
  transform: translateY(-50%);
  cursor: grab;
  touch-action: none;
}

.task-col-drag-handle i {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: rgba(100, 116, 139, .82);
  pointer-events: none;
}

.task-col-drag-handle:hover i,
.task-inline-table.task-resizable-table th.is-drag-source .task-col-drag-handle i,
body.task-reordering-cols .task-col-drag-handle i {
  background: rgba(37, 99, 235, .95);
}

.task-inline-table.task-resizable-table th.is-drag-source,
.task-inline-table.task-resizable-table th.is-drop-target {
  outline: 2px solid rgba(37, 99, 235, .34);
  outline-offset: -2px;
}

body.task-reordering-cols,
body.task-reordering-cols .task-col-drag-handle {
  cursor: grabbing !important;
  user-select: none;
}

.task-people-edit-stack {
  grid-template-columns: 1fr;
}

.task-people-edit-stack .task-popover-form {
  max-width: min(520px, 82vw);
}

@media (max-width: 760px) {
  .task-table-card .table-wrap.task-table-scroll,
  .meeting-task-table-card .table-wrap.task-table-scroll {
    width: 100%;
    max-width: 100%;
  }

  .task-inline-table.task-resizable-table th {
    padding-left: 12px;
  }

  .task-col-drag-handle {
    display: none !important;
  }
}

/* Remove the extra visible outer edge after the last task column. */
.task-table-scroll .task-inline-table th:last-child,
.task-table-scroll .task-inline-table td:last-child {
  border-right-color: transparent !important;
}

.task-col-drag-handle::before {
  content: none !important;
  display: none !important;
}

/* Tasks table final polish: visible right edge, right-side column menu, dynamic columns */
.task-table-card .table-wrap.task-table-scroll,
.meeting-task-table-card .table-wrap.task-table-scroll {
  width: fit-content;
  max-width: 100%;
  border-left: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

.task-table-scroll .task-inline-table.task-resizable-table {
  width: auto;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-right: 1px solid var(--border) !important;
}

.task-table-scroll .task-inline-table.task-resizable-table th:last-child,
.task-table-scroll .task-inline-table.task-resizable-table td:last-child {
  border-right: 1px solid var(--border) !important;
  border-right-color: var(--border) !important;
}

.task-inline-table.task-resizable-table th {
  position: sticky;
  top: 0;
  padding-left: 12px !important;
  padding-right: 50px !important;
}

.task-th-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.task-col-drag-handle {
  position: absolute;
  right: 20px;
  left: auto !important;
  top: 50%;
  z-index: 11;
  display: grid;
  grid-template-columns: repeat(2, 3px);
  grid-auto-rows: 3px;
  gap: 3px;
  width: 18px;
  height: 22px;
  padding: 2px;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: grab;
  touch-action: none;
}

.task-col-drag-handle i {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: rgba(100, 116, 139, .82);
  pointer-events: none;
}

.task-col-drag-handle:hover i,
.task-col-drag-handle:focus-visible i,
.task-inline-table.task-resizable-table th.is-drag-source .task-col-drag-handle i,
body.task-reordering-cols .task-col-drag-handle i {
  background: rgba(37, 99, 235, .95);
}

.task-col-resizer {
  right: 0;
  z-index: 10;
}

.task-people-summary {
  display: grid;
  gap: 5px;
}

.task-people-line {
  display: block;
  min-width: 0;
  line-height: 1.25;
  word-break: break-word;
}

.task-person-separator {
  color: var(--muted);
  font-weight: 600;
}

.task-people-line:empty,
.task-people-summary:empty {
  display: none;
}

.task-custom-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.task-custom-summary strong {
  word-break: break-word;
}

.task-custom-field-form {
  min-width: min(360px, 78vw);
}

.task-custom-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.task-custom-compact-field > summary {
  display: grid;
  gap: 3px;
  min-height: 30px;
  padding: 6px 8px;
}

.task-custom-compact-field > summary span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.task-column-modal[hidden] {
  display: none !important;
}

.task-column-modal {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: grid;
  place-items: center;
  padding: 22px;
}

.task-column-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(2px);
}

.task-column-modal-card {
  position: relative;
  z-index: 1;
  width: min(640px, 96vw);
  max-height: min(86vh, 760px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .26);
}

.task-column-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.task-column-modal-head h3 {
  margin: 3px 0 0;
  font-size: 22px;
}

.task-column-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.task-column-create-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.task-column-checkbox-grid {
  align-items: flex-start;
}

.task-hidden-columns-box {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.task-hidden-column-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.task-hidden-column-row:last-child {
  border-bottom: 0;
}

.task-inline-table [data-task-hidden-col="1"] {
  display: none !important;
}

.task-inline-table.task-resizable-table th.is-pinned-col,
.task-inline-table.task-resizable-table td.is-pinned-col {
  position: sticky;
  left: var(--task-pin-left, 0px);
  z-index: 7;
  box-shadow: 8px 0 16px rgba(15, 23, 42, .08);
}

.task-inline-table.task-resizable-table th.is-pinned-col {
  z-index: 13;
}

.task-inline-table.task-resizable-table td.is-pinned-col {
  background: var(--surface);
}

.task-inline-table.task-resizable-table tr.row-danger td.is-pinned-col {
  background: rgba(162, 41, 41, .06);
}

.task-inline-table.task-resizable-table tr.row-today td.is-pinned-col {
  background: rgba(107, 114, 128, .08);
}

@media (max-width: 760px) {
  .task-table-card .table-wrap.task-table-scroll,
  .meeting-task-table-card .table-wrap.task-table-scroll {
    width: 100%;
    border: 0 !important;
    background: transparent !important;
  }

  .task-inline-table.task-resizable-table {
    width: 100% !important;
    min-width: 0 !important;
    border-right: 0 !important;
  }

  .task-inline-table.task-resizable-table th {
    padding-right: 12px !important;
  }

  .task-col-drag-handle {
    display: none !important;
  }

  .task-inline-table.task-resizable-table tr.task-inline-row .task-custom-cell::before {
    content: attr(data-label);
  }

  .task-custom-compact-grid,
  .task-column-action-grid {
    grid-template-columns: 1fr;
  }

  .task-inline-table.task-resizable-table th.is-pinned-col,
  .task-inline-table.task-resizable-table td.is-pinned-col {
    position: static;
    box-shadow: none;
  }
}

/* Task reactions and clearer responsibility roles */
.task-people-summary {
  gap: 8px;
}

.task-people-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}

.task-person-role {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .45);
  background: rgba(248, 250, 252, .85);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .045em;
  font-weight: 700;
}

.task-reaction-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.task-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .42);
  background: rgba(255, 255, 255, .78);
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

.task-reaction-chip.is-personal {
  background: rgba(239, 246, 255, .78);
}

.task-reaction-chip.is-active {
  border-color: rgba(37, 99, 235, .45);
  background: rgba(219, 234, 254, .8);
}

.task-reaction-chip b {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  text-align: center;
  font-size: 10px;
  line-height: 16px;
}

.task-reactions-panel {
  margin-top: 10px;
  padding: 9px;
  border-radius: 14px;
  border: 1px solid rgba(203, 213, 225, .72);
  background: rgba(255, 255, 255, .7);
}

.task-reactions-panel.is-compact {
  padding: 7px;
  font-size: 12px;
}

.task-reactions-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.task-reactions-details > summary::-webkit-details-marker {
  display: none;
}

.task-reactions-details > summary::after {
  content: '▾';
  color: var(--muted);
  font-size: 12px;
}

.task-reactions-details[open] > summary::after {
  transform: rotate(180deg);
}

.task-reactions-body {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.task-reaction-section {
  display: grid;
  gap: 6px;
}

.task-reaction-section-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.task-reaction-section-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.task-reaction-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-reaction-form {
  display: inline-flex;
  margin: 0;
}

.task-reaction-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.task-reaction-button:hover {
  border-color: rgba(37, 99, 235, .5);
  background: rgba(239, 246, 255, .88);
  transform: translateY(-1px);
}

.task-reaction-button.is-active {
  border-color: rgba(37, 99, 235, .75);
  background: rgba(219, 234, 254, .9);
  color: #1d4ed8;
}

.task-reaction-button.is-personal.is-active {
  border-color: rgba(14, 165, 233, .7);
  background: rgba(224, 242, 254, .9);
  color: #0369a1;
}

.task-reaction-emoji {
  font-size: 14px;
}

.task-reaction-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.task-reaction-filters {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(248, 250, 252, .75);
}

.task-detail-reactions-card .task-reactions-panel {
  margin-top: 0;
}

@media (max-width: 760px) {
  .task-people-line {
    flex-direction: column;
    align-items: flex-start;
  }

  .task-reactions-panel {
    border-radius: 12px;
  }

  .task-reactions-details > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-reaction-grid {
    gap: 5px;
  }

  .task-reaction-button {
    font-size: 11px;
    padding: 5px 7px;
  }
}

/* Task reactions follow-up: role hints and compact reaction panels */
.task-people-summary .task-people-line {
  align-items: flex-start;
}

.task-person-role {
  user-select: none;
}

.task-reaction-summary-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.task-reaction-summary-title {
  font-weight: 800;
}

.task-reactions-panel.task-reactions-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.task-reactions-panel.is-compact > summary {
  font-size: 12px;
}

.task-reaction-section-head,
.task-reaction-section-title.task-reaction-section-head {
  align-items: baseline;
}

.task-reaction-options {
  min-width: 0;
}

.task-reaction-strip {
  margin-top: 7px;
}

.task-reaction-button[aria-pressed="true"] {
  font-weight: 800;
}

.task-reaction-button .task-reaction-count[hidden] {
  display: none;
}

.task-reaction-filter-box {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(248, 250, 252, .76);
}

.task-reaction-filter-box > summary {
  cursor: pointer;
  font-weight: 800;
}

@media (max-width: 760px) {
  .task-reactions-panel.task-reactions-details > summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Tasks: clearer people roles and reaction controls */
.task-people-summary .task-people-line {
  display: grid;
  gap: 3px;
  padding: 5px 7px;
  border-radius: 10px;
  background: rgba(248, 250, 252, .68);
  border: 1px solid rgba(203, 213, 225, .55);
}

.task-person-role,
.task-people-role-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(226, 232, 240, .82);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1.1;
  text-transform: uppercase;
}

.task-reaction-option {
  font-family: inherit;
}

.task-reaction-summary-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.task-reactions-panel.task-reactions-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.task-reactions-panel.task-reactions-details > summary::-webkit-details-marker {
  display: none;
}

.task-reaction-section-head,
.task-reaction-section-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.task-reaction-section-head span,
.task-reaction-section-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 760px) {
  .task-reaction-summary-list {
    justify-content: flex-start;
  }
}

/* Task reactions final UX */
.task-people-summary {
  gap: 7px;
}

.task-people-line {
  display: grid;
  gap: 2px;
}

.task-person-role,
.task-people-mini-label {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .48);
  background: rgba(248, 250, 252, .92);
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.1;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.task-reaction-strip,
.task-reaction-summary-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.task-reaction-strip {
  margin-top: 7px;
}

.task-reactions-panel {
  margin-top: 10px;
  border: 1px solid rgba(203, 213, 225, .82);
  border-radius: 15px;
  background: rgba(255, 255, 255, .82);
  overflow: hidden;
}

.task-reactions-panel.is-compact {
  margin-top: 8px;
  border-radius: 13px;
  font-size: 12px;
}

.task-reactions-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.task-reactions-panel > summary::-webkit-details-marker {
  display: none;
}

.task-reactions-panel > summary::after {
  content: '▾';
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  transition: transform .16s ease;
}

.task-reactions-panel[open] > summary::after {
  transform: rotate(180deg);
}

.task-reaction-summary-title {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
}

.task-reactions-body {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.task-reaction-section {
  display: grid;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px dashed rgba(203, 213, 225, .86);
}

.task-reaction-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.task-reaction-section-head strong {
  font-size: 12px;
  font-weight: 900;
}

.task-reaction-section-head span {
  color: var(--muted);
  font-size: 11px;
}

.task-reaction-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-reaction-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(148, 163, 184, .52);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.task-reaction-option:hover,
.task-reaction-option:focus-visible {
  border-color: rgba(37, 99, 235, .56);
  background: rgba(239, 246, 255, .92);
  transform: translateY(-1px);
  outline: none;
}

.task-reaction-option.is-active {
  border-color: rgba(37, 99, 235, .78);
  background: rgba(219, 234, 254, .94);
  color: #1d4ed8;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .08);
}

.task-reaction-option.is-personal.is-active {
  border-color: rgba(14, 165, 233, .72);
  background: rgba(224, 242, 254, .95);
  color: #0369a1;
}

.task-reaction-option:disabled {
  opacity: .58;
  cursor: wait;
  transform: none;
}

.task-reaction-emoji {
  flex: 0 0 auto;
  font-size: 14px;
}

.task-reaction-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-reaction-count {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.task-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .42);
  background: rgba(255, 255, 255, .82);
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

.task-reaction-chip.is-personal {
  background: rgba(239, 246, 255, .88);
}

.task-reaction-chip.is-public.is-active,
.task-reaction-chip.is-active {
  border-color: rgba(37, 99, 235, .48);
  background: rgba(219, 234, 254, .88);
}

.task-reactions-panel.is-saving {
  opacity: .82;
}

.task-reaction-filters {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(248, 250, 252, .78);
}

.task-detail-reactions-card .task-reactions-panel {
  margin-top: 0;
}

@media (max-width: 760px) {
  .task-reactions-panel > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-reaction-summary-list {
    width: 100%;
  }

  .task-reaction-option {
    min-height: 29px;
    padding: 5px 7px;
    font-size: 11px;
  }
}

.task-field-label-with-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.task-field-label-with-hint small {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* Task title reactions: title opens compact picker; gear opens title editing */
.task-title-actions-details {
  position: relative;
  display: block;
  min-width: 0;
}

.task-title-actions-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px;
  border: 1px dashed transparent;
  border-radius: 12px;
  min-height: 44px;
  user-select: none;
}

.task-title-actions-details > summary::-webkit-details-marker {
  display: none;
}

.task-title-actions-details:hover > summary,
.task-title-actions-details[open] > summary {
  border-color: rgba(37, 99, 235, .38);
  background: rgba(37, 99, 235, .065);
}

.task-title-text-stack {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.task-title-text {
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
}

.task-title-trigger:hover .task-title-text,
.task-title-actions-details[open] .task-title-text {
  color: var(--accent);
}

.task-title-actions-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 70;
  width: min(560px, 78vw);
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .58);
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
}

.task-title-actions-details.is-compact .task-title-actions-popover {
  width: min(500px, 78vw);
}

.task-title-actions-bar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 8px;
}

.task-title-edit-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148, 163, 184, .48);
  border-radius: 999px;
  background: rgba(248, 250, 252, .96);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.task-title-edit-gear:hover,
.task-title-edit-gear:focus-visible {
  border-color: rgba(37, 99, 235, .58);
  background: rgba(239, 246, 255, .96);
  color: var(--accent);
  outline: none;
}

.task-title-card-link {
  min-height: 30px;
  width: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.task-title-actions-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.task-title-actions-details.is-editing-title .task-title-actions-layout {
  grid-template-columns: minmax(190px, .75fr) minmax(220px, 1fr);
  align-items: start;
}

.task-title-reaction-side {
  min-width: 0;
}

.task-title-edit-form.task-popover-form {
  margin-top: 0;
  min-width: 0;
  width: 100%;
  box-shadow: none;
}

.task-reaction-picker {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 14px;
  background: rgba(248, 250, 252, .86);
}

.task-reaction-picker .task-reaction-section {
  display: grid;
  grid-template-columns: minmax(58px, auto) minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  padding: 0;
  border: 0;
}

.task-reaction-picker .task-reaction-section-title {
  min-height: 26px;
  align-items: center;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.task-reaction-picker .task-reaction-section-title strong {
  font-size: 10px;
  font-weight: 900;
}

.task-reaction-option.is-icon-only {
  justify-content: center;
  min-width: 30px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  gap: 0;
}

.task-reaction-option.is-icon-only .task-reaction-emoji {
  font-size: 15px;
}

.task-reaction-option.is-icon-only .task-reaction-count {
  position: absolute;
  right: -5px;
  top: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .14);
}

.task-reaction-form {
  position: relative;
}

.task-title-actions-details.needs-hold-hint > summary::after {
  content: 'удерживайте';
  display: inline-flex;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .72);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.task-subtask-body .task-title-actions-details.is-compact > summary {
  padding: 6px 7px;
  min-height: 34px;
  background: rgba(255, 255, 255, .72);
}

.task-subtask-body .task-title-actions-details.is-compact .task-title-text {
  font-size: 12px;
}

@media (max-width: 900px) {
  .task-title-actions-details.is-editing-title .task-title-actions-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .task-title-actions-popover {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
    max-height: 78vh;
    overflow: auto;
    padding: 12px;
    border-radius: 18px;
  }

  .task-title-actions-details > summary {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .task-title-actions-details:hover > summary,
  .task-title-actions-details[open] > summary {
    border-color: transparent;
    background: transparent;
  }

  .task-title-text {
    font-size: 16px;
  }

  .task-reaction-picker .task-reaction-section {
    grid-template-columns: 1fr;
  }

  .task-reaction-picker .task-reaction-section-title {
    min-height: 0;
  }

  .task-reaction-option.is-icon-only {
    width: 32px;
    height: 32px;
    min-height: 32px;
  }
}

/* Tasks: title opens compact reactions, gear opens title editor */
.task-title-actions-details {
  position: relative;
  display: block;
  min-width: 0;
}

.task-title-actions-details > summary {
  list-style: none;
  cursor: pointer;
  border-radius: 12px;
  transition: background .14s ease, box-shadow .14s ease;
}

.task-title-actions-details > summary::-webkit-details-marker {
  display: none;
}

.task-title-actions-details > summary:hover,
.task-title-actions-details[open] > summary {
  background: rgba(248, 250, 252, .78);
  box-shadow: inset 0 0 0 1px rgba(203, 213, 225, .58);
}

.task-title-summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 7px;
  min-width: 0;
}

.task-title-text-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.task-title-text {
  color: var(--text);
  font-weight: 850;
  line-height: 1.25;
}

.task-title-actions-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  right: 0;
  width: min(440px, 82vw);
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .38);
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 20px 48px rgba(15, 23, 42, .18);
}

.task-title-actions-details.is-compact .task-title-actions-popover {
  right: auto;
  left: 0;
  width: min(390px, 84vw);
}

.task-title-actions-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.task-title-edit-gear {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, .52);
  border-radius: 999px;
  background: rgba(248, 250, 252, .94);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

.task-title-edit-gear:hover,
.task-title-edit-gear:focus-visible,
.task-title-actions-details.is-editing-title .task-title-edit-gear {
  background: rgba(219, 234, 254, .92);
  border-color: rgba(37, 99, 235, .46);
  outline: none;
  transform: translateY(-1px);
}

.task-title-actions-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.task-title-reaction-side {
  display: block;
  min-width: 0;
}

.task-title-reaction-side .task-reactions-body {
  padding: 0;
  display: grid;
  gap: 8px;
}

.task-reactions-body.is-compact .task-reaction-section {
  gap: 5px;
  padding-top: 7px;
}

.task-reactions-body.is-compact .task-reaction-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.task-reactions-body.is-compact .task-reaction-section-title {
  font-size: 10px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.task-reactions-body.is-compact .task-reaction-options {
  gap: 4px;
}

.task-reaction-option.is-icon-only {
  width: 30px;
  height: 30px;
  min-height: 30px;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-radius: 999px;
  font-size: 14px;
}

.task-reaction-option.is-icon-only .task-reaction-emoji {
  font-size: 16px;
}

.task-reaction-option.is-icon-only .task-reaction-count {
  position: absolute;
  transform: translate(11px, -11px);
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-size: 9px;
  line-height: 15px;
  background: rgba(15, 23, 42, .12);
}

.task-title-edit-form {
  margin-top: 0;
}

.task-title-actions-details:not(.is-editing-title) .task-title-edit-form[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .task-title-actions-details > summary:hover {
    background: transparent;
    box-shadow: none;
  }

  .task-title-actions-details[open] > summary {
    background: rgba(248, 250, 252, .78);
    box-shadow: inset 0 0 0 1px rgba(203, 213, 225, .58);
  }

  .task-title-actions-popover,
  .task-title-actions-details.is-compact .task-title-actions-popover {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin-top: 8px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
  }

  .task-title-reaction-side .task-reactions-body {
    gap: 7px;
  }

  .task-reaction-option.is-icon-only {
    width: 32px;
    height: 32px;
    min-height: 32px;
  }
}

.task-title-summary .task-title-text-stack {
  grid-column: 1 / -1;
}

.task-title-summary .task-subtask-mark + .task-title-text-stack {
  grid-column: 2;
}

/* Final task reaction placement overrides */
.task-title-actions-details .task-title-actions-popover {
  left: 0;
  right: auto;
  width: min(520px, 82vw);
}

.task-title-actions-details.is-editing-title .task-title-actions-popover {
  width: min(680px, 86vw);
}

.task-title-actions-details.is-editing-title .task-title-actions-layout {
  grid-template-columns: minmax(210px, .8fr) minmax(240px, 1fr);
}

.task-reaction-picker.task-reactions-panel {
  margin-top: 0;
  overflow: visible;
}

.task-reaction-picker .task-reactions-body {
  padding: 0;
  display: grid;
  gap: 7px;
}

.task-reaction-picker .task-reaction-section:first-child {
  border-top: 0;
}

.task-reaction-picker .task-reaction-section-title span {
  display: none;
}

.task-reaction-picker .task-reaction-options {
  gap: 4px;
}

@media (max-width: 900px) {
  .task-title-actions-details.is-editing-title .task-title-actions-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .task-title-actions-details .task-title-actions-popover,
  .task-title-actions-details.is-compact .task-title-actions-popover,
  .task-title-actions-details.is-editing-title .task-title-actions-popover {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
    max-height: 78vh;
    overflow: auto;
    margin-top: 0;
    z-index: 120;
  }
}

/* Task title reactions: title opens compact reactions, gear opens title edit. */
.task-title-menu {
  position: relative;
  min-width: 0;
}

.task-title-trigger {
  display: block;
  width: 100%;
  padding: 8px;
  border: 1px dashed transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.task-title-trigger:hover,
.task-title-menu.is-open > .task-title-trigger,
.task-title-trigger:focus-visible {
  border-color: rgba(37, 99, 235, .38);
  background: rgba(37, 99, 235, .06);
  outline: none;
}

.task-title-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.task-title-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}


.task-title-text {
  color: var(--text);
  line-height: 1.22;
}

.task-title-description {
  font-size: 12px;
}

.task-title-popover[hidden],
.task-title-edit-form[hidden] {
  display: none !important;
}

.task-title-popover {
  position: relative;
  z-index: 60;
  margin: 8px 0 2px;
  padding: 10px;
  border: 1px solid rgba(37, 99, 235, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
}

.task-title-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.task-title-popover-caption {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.task-title-popover-caption .small-text {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-title-popover-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.task-title-edit-toggle {
  min-width: 32px;
  padding-left: 8px;
  padding-right: 8px;
}

.task-title-popover-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  align-items: start;
  gap: 10px;
}

.task-title-edit-form {
  margin-top: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.task-title-reactions-side {
  min-width: 0;
}

.task-reactions-panel.task-reaction-picker {
  margin-top: 0;
  padding: 7px;
  border-radius: 13px;
  background: rgba(248, 250, 252, .86);
  overflow: visible;
}

.task-reaction-picker .task-reactions-body {
  display: grid;
  gap: 7px;
  margin-top: 0;
  padding: 0;
}

.task-reaction-picker .task-reaction-section {
  display: grid;
  gap: 5px;
  padding-top: 0;
  border-top: 0;
}

.task-reaction-picker .task-reaction-section + .task-reaction-section {
  padding-top: 6px;
  border-top: 1px dashed rgba(203, 213, 225, .72);
}

.task-reaction-picker .task-reaction-section-title {
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .055em;
}

.task-reaction-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.task-reaction-option.is-icon-only,
.task-reaction-button.is-icon-only {
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  padding: 4px 7px;
  gap: 3px;
  border-radius: 999px;
}

.task-reaction-option.is-icon-only .task-reaction-emoji,
.task-reaction-button.is-icon-only .task-reaction-emoji {
  font-size: 15px;
}

.task-reaction-option.is-icon-only .task-reaction-count,
.task-reaction-button.is-icon-only .task-reaction-count {
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-size: 9px;
  line-height: 15px;
}

.task-reaction-strip {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(203, 213, 225, .58);
  justify-content: flex-start;
}

.task-reaction-chip:empty {
  display: none;
}

.task-subtask-title-wrap {
  flex: 1 1 220px;
  min-width: min(100%, 220px);
}

.task-inline-subtask-editor > summary .task-title-menu {
  width: 100%;
}

.task-inline-subtask-editor > summary .task-title-trigger {
  padding: 2px 4px;
  border-radius: 8px;
}

.task-title-menu.is-compact .task-title-description {
  display: none;
}

.task-title-menu.is-compact .task-title-popover {
  margin-top: 6px;
}

.task-title-menu.is-compact .task-title-popover-layout {
  grid-template-columns: 1fr;
}

@media (max-width: 760px) {
  .task-title-trigger {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .task-title-trigger:hover,
  .task-title-menu.is-open > .task-title-trigger,
  .task-title-trigger:focus-visible {
    border-color: transparent;
    background: transparent;
  }

  .task-title-popover {
    margin-top: 10px;
    padding: 10px;
  }

  .task-title-popover-layout {
    grid-template-columns: 1fr;
  }

  .task-title-popover-caption .small-text {
    max-width: 72vw;
  }

  .task-reaction-option.is-icon-only,
  .task-reaction-button.is-icon-only {
    min-width: 34px;
    min-height: 34px;
  }
}

/* Task reactions: compact picker and background-free selected marks */
.task-title-popover {
  overflow: visible;
}

.task-title-popover-head {
  align-items: center;
  margin-bottom: 5px;
}

.task-title-popover-caption {
  gap: 0;
}

.task-title-popover-caption strong {
  font-size: 12px;
  line-height: 1.1;
}

.task-title-popover-caption .small-text {
  display: none;
}

.task-title-popover-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.task-title-menu.is-editing-title .task-title-popover-layout {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
}

.task-title-menu:not(.is-editing-title) .task-title-edit-form {
  display: none !important;
}

.task-reaction-summary,
.task-reaction-strip,
.task-reaction-summary-list {
  gap: 7px;
}

.task-reaction-strip {
  margin-top: 7px;
  padding-top: 0;
  border-top: 0;
}

.task-reaction-chip,
.task-reaction-chip.is-personal,
.task-reaction-chip.is-public,
.task-reaction-chip.is-public.is-active,
.task-reaction-chip.is-active {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.task-reaction-chip.is-personal {
  color: var(--muted);
}

.task-reactions-panel.task-reaction-picker {
  padding: 3px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.task-reaction-picker .task-reactions-body {
  display: grid;
  gap: 5px;
  padding: 0;
  margin: 0;
  overflow: visible;
}

.task-reaction-picker .task-reaction-section,
.task-reaction-picker .task-reaction-section + .task-reaction-section {
  display: grid;
  grid-template-columns: 62px max-content;
  align-items: start;
  gap: 4px 7px;
  padding: 0;
  border: 0;
  overflow: visible;
}

.task-reaction-picker .task-reaction-section + .task-reaction-section {
  padding-top: 4px;
  border-top: 1px dashed rgba(203, 213, 225, .62);
}

.task-reaction-picker .task-reaction-section-title {
  min-height: 26px;
  align-items: center;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.05;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.task-reaction-picker .task-reaction-section-title strong {
  font-size: inherit;
  font-weight: 900;
}

.task-reaction-picker .task-reaction-icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 26px);
  grid-auto-rows: 26px;
  gap: 3px;
  align-items: center;
  justify-items: center;
  width: max-content;
  max-width: 100%;
  overflow: visible;
}

.task-reaction-form {
  position: relative;
  overflow: visible;
}

.task-reaction-option.is-icon-only,
.task-reaction-button.is-icon-only {
  position: relative;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  overflow: visible;
}

.task-reaction-option.is-icon-only:hover,
.task-reaction-option.is-icon-only:focus-visible,
.task-reaction-button.is-icon-only:hover,
.task-reaction-button.is-icon-only:focus-visible {
  border: 0;
  background: rgba(226, 232, 240, .72);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .38);
  transform: none;
}

.task-reaction-option.is-icon-only.is-active,
.task-reaction-option.is-icon-only[aria-pressed="true"],
.task-reaction-button.is-icon-only.is-active,
.task-reaction-button.is-icon-only[aria-pressed="true"] {
  background: rgba(219, 234, 254, .9);
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .34);
}

.task-reaction-option.is-icon-only .task-reaction-emoji,
.task-reaction-button.is-icon-only .task-reaction-emoji {
  font-size: 17px;
  line-height: 1;
}

.task-reaction-option.is-icon-only .task-reaction-count,
.task-reaction-button.is-icon-only .task-reaction-count {
  position: absolute;
  right: -6px;
  top: -6px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 999px;
  background: rgba(15, 23, 42, .78);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 13px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
  transform: none;
}

.task-reaction-option[data-reaction-tooltip]::before,
.task-reaction-option[data-reaction-tooltip]::after,
.task-reaction-button[data-reaction-tooltip]::before,
.task-reaction-button[data-reaction-tooltip]::after {
  position: absolute;
  left: 50%;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.task-reaction-option[data-reaction-tooltip]::after,
.task-reaction-button[data-reaction-tooltip]::after {
  content: attr(data-reaction-tooltip);
  bottom: calc(100% + 7px);
  width: max-content;
  max-width: 260px;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(15, 23, 42, .94);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  transform: translate(-50%, 4px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
}

.task-reaction-option[data-reaction-tooltip]::before,
.task-reaction-button[data-reaction-tooltip]::before {
  content: '';
  bottom: calc(100% + 2px);
  width: 8px;
  height: 8px;
  background: rgba(15, 23, 42, .94);
  transform: translate(-50%, 4px) rotate(45deg);
}

.task-reaction-option[data-reaction-tooltip]:hover::before,
.task-reaction-option[data-reaction-tooltip]:hover::after,
.task-reaction-option[data-reaction-tooltip]:focus-visible::before,
.task-reaction-option[data-reaction-tooltip]:focus-visible::after,
.task-reaction-button[data-reaction-tooltip]:hover::before,
.task-reaction-button[data-reaction-tooltip]:hover::after,
.task-reaction-button[data-reaction-tooltip]:focus-visible::before,
.task-reaction-button[data-reaction-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) rotate(0);
}

.task-reaction-option[data-reaction-tooltip]:hover::before,
.task-reaction-option[data-reaction-tooltip]:focus-visible::before,
.task-reaction-button[data-reaction-tooltip]:hover::before,
.task-reaction-button[data-reaction-tooltip]:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

@media (max-width: 760px) {
  .task-title-popover-head {
    margin-bottom: 8px;
  }

  .task-title-menu.is-editing-title .task-title-popover-layout {
    grid-template-columns: 1fr;
  }

  .task-reaction-picker .task-reaction-section,
  .task-reaction-picker .task-reaction-section + .task-reaction-section {
    grid-template-columns: 58px max-content;
    gap: 5px 6px;
  }

  .task-reaction-picker .task-reaction-icon-grid {
    grid-template-columns: repeat(8, 28px);
    grid-auto-rows: 28px;
    gap: 4px;
  }

  .task-reaction-option.is-icon-only,
  .task-reaction-button.is-icon-only {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
  }

  .task-reaction-option[data-reaction-tooltip]::before,
  .task-reaction-option[data-reaction-tooltip]::after,
  .task-reaction-button[data-reaction-tooltip]::before,
  .task-reaction-button[data-reaction-tooltip]::after {
    display: none;
  }
}

/* Task reactions follow-up: clean edit pane and non-overlapping reaction groups. */
.task-title-popover {
  width: min(520px, calc(100vw - 40px));
  max-width: min(520px, calc(100vw - 40px));
  box-sizing: border-box;
  isolation: isolate;
  background: var(--surface);
}

.task-title-menu.is-compact .task-title-popover {
  width: min(480px, calc(100vw - 40px));
  max-width: min(480px, calc(100vw - 40px));
}

.task-title-popover-caption-edit {
  display: none;
}

.task-title-menu.is-editing-title .task-title-popover-caption-reactions {
  display: none;
}

.task-title-menu.is-editing-title .task-title-popover-caption-edit {
  display: inline;
}

.task-title-menu.is-editing-title .task-title-popover {
  background: var(--surface);
  border-color: rgba(37, 99, 235, .32);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
}

.task-title-menu.is-editing-title .task-title-popover-layout,
.task-title-menu.is-editing-title .task-title-menu.is-compact .task-title-popover-layout {
  display: block;
  grid-template-columns: 1fr;
}

.task-title-menu.is-editing-title .task-title-reactions-side {
  display: none !important;
}

.task-title-menu.is-editing-title .task-title-edit-form {
  display: grid !important;
  position: relative;
  z-index: 3;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, .94);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: none;
}

.task-title-menu.is-editing-title .task-title-edit-form input,
.task-title-menu.is-editing-title .task-title-edit-form textarea {
  background: var(--surface);
}

.task-reaction-picker .task-reaction-section,
.task-reaction-picker .task-reaction-section + .task-reaction-section {
  grid-template-columns: 96px minmax(0, 1fr) !important;
  column-gap: 10px;
  row-gap: 4px;
}

.task-reaction-picker .task-reaction-section-title {
  width: 96px;
  min-width: 0;
  max-width: 96px;
  padding-top: 7px;
  overflow: hidden;
  color: var(--muted);
  font-size: 8.5px;
  line-height: 1.15;
  letter-spacing: .045em;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
}

.task-reaction-picker .task-reaction-icon-grid {
  grid-template-columns: repeat(8, 27px) !important;
  grid-auto-rows: 27px;
  gap: 4px 5px;
  min-width: 0;
}

.task-reaction-option.is-icon-only,
.task-reaction-button.is-icon-only {
  width: 27px;
  min-width: 27px;
  height: 27px;
  min-height: 27px;
}

.task-reaction-option[data-reaction-tooltip]::after,
.task-reaction-button[data-reaction-tooltip]::after {
  z-index: 1000;
}

.task-reaction-option[data-reaction-tooltip]::before,
.task-reaction-button[data-reaction-tooltip]::before {
  z-index: 999;
}

@media (max-width: 560px) {
  .task-title-popover,
  .task-title-menu.is-compact .task-title-popover {
    width: min(100%, calc(100vw - 24px));
    max-width: min(100%, calc(100vw - 24px));
  }

  .task-reaction-picker .task-reaction-section,
  .task-reaction-picker .task-reaction-section + .task-reaction-section {
    grid-template-columns: 1fr !important;
    gap: 4px;
  }

  .task-reaction-picker .task-reaction-section-title {
    width: auto;
    max-width: none;
    padding-top: 0;
    white-space: nowrap;
  }

  .task-reaction-picker .task-reaction-icon-grid {
    grid-template-columns: repeat(8, 28px) !important;
    grid-auto-rows: 28px;
    gap: 4px;
  }
}


/* Task reactions follow-up: larger VK-like summary and hover-only labels. */
.task-reaction-summary,
.task-reaction-strip,
.task-reaction-summary-list {
  align-items: center;
  gap: 10px;
}

.task-reaction-strip {
  margin-top: 10px;
  row-gap: 8px;
}

.task-reaction-chip,
.task-reaction-chip.is-personal,
.task-reaction-chip.is-public,
.task-reaction-chip.is-public.is-active,
.task-reaction-chip.is-active {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  overflow: visible;
}

.task-reaction-chip.is-personal {
  color: var(--muted);
}

.task-reaction-chip[data-reaction-tooltip]::before,
.task-reaction-chip[data-reaction-tooltip]::after {
  position: absolute;
  left: 50%;
  z-index: 280;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.task-reaction-chip[data-reaction-tooltip]::after {
  content: attr(data-reaction-tooltip);
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 220px;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(15, 23, 42, .94);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  transform: translate(-50%, 4px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
}

.task-reaction-chip[data-reaction-tooltip]::before {
  content: '';
  bottom: calc(100% + 3px);
  width: 8px;
  height: 8px;
  background: rgba(15, 23, 42, .94);
  transform: translate(-50%, 4px) rotate(45deg);
}

.task-reaction-chip[data-reaction-tooltip]:hover::before,
.task-reaction-chip[data-reaction-tooltip]:hover::after,
.task-reaction-chip[data-reaction-tooltip]:focus-visible::before,
.task-reaction-chip[data-reaction-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.task-reaction-chip[data-reaction-tooltip]:hover::after,
.task-reaction-chip[data-reaction-tooltip]:focus-visible::after {
  transform: translate(-50%, 0);
}

.task-reaction-chip[data-reaction-tooltip]:hover::before,
.task-reaction-chip[data-reaction-tooltip]:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

@media (max-width: 760px) {
  .task-reaction-chip,
  .task-reaction-chip.is-personal,
  .task-reaction-chip.is-public,
  .task-reaction-chip.is-public.is-active,
  .task-reaction-chip.is-active {
    font-size: 16px;
  }

  .task-reaction-chip[data-reaction-tooltip]::before,
  .task-reaction-chip[data-reaction-tooltip]::after {
    display: none;
  }
}


/* Task reactions follow-up: muted smaller counters. */
.task-reaction-chip {
  gap: 3px;
}

.task-reaction-chip-emoji {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.task-reaction-chip-count {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: .72em;
  font-weight: 700;
  line-height: 1;
  transform: translateY(1px);
}

.task-reaction-chip.is-active .task-reaction-chip-count,
.task-reaction-chip.is-public.is-active .task-reaction-chip-count {
  color: var(--muted);
}

/* Tasks filter modal and responsible grouped tables. */
.task-active-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}

.task-active-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(219, 234, 254, .82);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.task-responsible-group-list {
  display: grid;
  gap: 18px;
  margin-top: 14px;
}

.task-responsible-group-card {
  display: grid;
  gap: 10px;
}

.task-responsible-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 14px;
  background: rgba(248, 250, 252, .82);
}

.task-responsible-group-head h3 {
  margin: 2px 0 0;
  font-size: 17px;
  line-height: 1.2;
}

.task-filter-modal[hidden] {
  display: none !important;
}

.task-filter-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 22px;
}

.task-filter-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(3px);
}

.task-filter-modal-card {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100vw - 32px));
  max-height: min(86vh, 920px);
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(203, 213, 225, .92);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.task-filter-modal-head,
.task-filter-block-head,
.task-filter-modal-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.task-filter-modal-head h3 {
  margin: 2px 0 4px;
  font-size: 22px;
}

.task-filter-modal-form {
  margin-top: 16px;
}

.task-filter-block {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, .72);
  border-radius: 16px;
  background: rgba(248, 250, 252, .68);
}

.task-filter-checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.task-filter-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(203, 213, 225, .76);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}

.task-filter-check:hover {
  border-color: rgba(37, 99, 235, .38);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .07);
}

.task-filter-check input {
  margin: 0;
}

.task-filter-check span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-filter-check small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(226, 232, 240, .75);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.task-filter-check:has(input:checked) {
  border-color: rgba(37, 99, 235, .45);
  background: rgba(219, 234, 254, .55);
}

body.task-filter-modal-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .task-filter-modal {
    align-items: stretch;
    padding: 10px;
  }

  .task-filter-modal-card {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 14px;
    border-radius: 18px;
  }

  .task-filter-modal-head,
  .task-filter-block-head,
  .task-filter-modal-actions,
  .task-responsible-group-head {
    align-items: stretch;
    flex-direction: column;
  }

  .task-filter-checkgrid {
    grid-template-columns: 1fr;
  }
}

/* Task filter follow-up: compact reaction filter modal and draggable responsible groups. */
.task-active-filter-row {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.task-active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(219, 234, 254, .78);
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: grab;
  user-select: none;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}

.task-active-filter-chip.is-dragging {
  opacity: .55;
  transform: scale(.98);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .16);
}

.task-active-filter-drag {
  color: rgba(37, 99, 235, .58);
  font-size: 13px;
  letter-spacing: -4px;
  line-height: 1;
}

.task-active-filter-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-active-filter-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 -2px 0 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: rgba(30, 64, 175, .86);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.task-active-filter-remove:hover,
.task-active-filter-remove:focus-visible {
  background: #fff;
  color: #b91c1c;
  outline: none;
}

.task-reaction-filter-launch-block {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.task-reaction-filter-modal[hidden] {
  display: none !important;
}

.task-reaction-filter-modal {
  position: fixed;
  inset: 0;
  z-index: 1220;
  display: grid;
  place-items: center;
  padding: 20px;
}

.task-reaction-filter-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .38);
  backdrop-filter: blur(3px);
}

.task-reaction-filter-card {
  position: relative;
  z-index: 1;
  width: min(680px, calc(100vw - 28px));
  max-height: min(84vh, 760px);
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(203, 213, 225, .92);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
}

.task-reaction-filter-head,
.task-reaction-filter-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.task-reaction-filter-head h3 {
  margin: 2px 0 4px;
  font-size: 20px;
}

.task-reaction-filter-sections {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.task-reaction-filter-section {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 8px 12px;
  padding-top: 8px;
  border-top: 1px dashed rgba(203, 213, 225, .72);
}

.task-reaction-filter-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.task-reaction-filter-title {
  padding-top: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1.15;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.task-reaction-filter-grid {
  display: grid;
  grid-template-columns: repeat(8, 34px);
  grid-auto-rows: 34px;
  gap: 5px;
  align-items: center;
  justify-items: center;
  overflow: visible;
}

.task-reaction-filter-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  overflow: visible;
}

.task-reaction-filter-option input {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.task-reaction-filter-option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 21px;
  line-height: 1;
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}

.task-reaction-filter-option.is-group-filter span {
  color: #64748b;
  font-size: 22px;
  font-weight: 900;
}

.task-reaction-filter-option:hover span,
.task-reaction-filter-option:focus-within span {
  background: rgba(226, 232, 240, .8);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .36);
}

.task-reaction-filter-option input:checked + span {
  background: rgba(219, 234, 254, .95);
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .38);
  transform: translateY(-1px);
}

.task-reaction-filter-option[data-reaction-tooltip]::before,
.task-reaction-filter-option[data-reaction-tooltip]::after {
  position: absolute;
  left: 50%;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.task-reaction-filter-option[data-reaction-tooltip]::after {
  content: attr(data-reaction-tooltip);
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 220px;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(15, 23, 42, .94);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  transform: translate(-50%, 4px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
}

.task-reaction-filter-option[data-reaction-tooltip]::before {
  content: '';
  bottom: calc(100% + 3px);
  width: 8px;
  height: 8px;
  background: rgba(15, 23, 42, .94);
  transform: translate(-50%, 4px) rotate(45deg);
}

.task-reaction-filter-option[data-reaction-tooltip]:hover::before,
.task-reaction-filter-option[data-reaction-tooltip]:hover::after,
.task-reaction-filter-option[data-reaction-tooltip]:focus-within::before,
.task-reaction-filter-option[data-reaction-tooltip]:focus-within::after {
  opacity: 1;
  visibility: visible;
}

.task-reaction-filter-option[data-reaction-tooltip]:hover::after,
.task-reaction-filter-option[data-reaction-tooltip]:focus-within::after {
  transform: translate(-50%, 0);
}

.task-reaction-filter-option[data-reaction-tooltip]:hover::before,
.task-reaction-filter-option[data-reaction-tooltip]:focus-within::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.task-reaction-filter-actions {
  margin-top: 16px;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .task-reaction-filter-launch-block,
  .task-reaction-filter-section {
    grid-template-columns: 1fr;
  }

  .task-reaction-filter-card {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 14px;
    border-radius: 18px;
  }

  .task-reaction-filter-head,
  .task-reaction-filter-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .task-reaction-filter-title {
    padding-top: 0;
    white-space: nowrap;
  }

  .task-reaction-filter-grid {
    grid-template-columns: repeat(8, 32px);
    grid-auto-rows: 32px;
    gap: 4px;
  }

  .task-reaction-filter-option,
  .task-reaction-filter-option span {
    width: 32px;
    height: 32px;
  }

  .task-reaction-filter-option[data-reaction-tooltip]::before,
  .task-reaction-filter-option[data-reaction-tooltip]::after {
    display: none;
  }
}

/* Task control / LPR / chat assistant patch 2026-05-21 */
.task-control-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}
.task-control-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.task-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.task-control-card {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.68);
}
.task-control-card h3,
.task-control-card h4 {
  margin: 0 0 6px;
}
.task-control-mini-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.task-control-settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.chat-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.chat-task-action-form {
  margin: 0;
}
.chat-task-action-button {
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: rgba(37, 99, 235, 0.12);
  color: rgb(30, 64, 175);
}
.chat-task-action-button.is-approve {
  background: rgba(22, 163, 74, 0.14);
  color: rgb(21, 128, 61);
}
.chat-task-action-button.is-reject {
  background: rgba(220, 38, 38, 0.14);
  color: rgb(185, 28, 28);
}
.chat-task-action-button.is-done {
  background: rgba(15, 118, 110, 0.14);
  color: rgb(15, 118, 110);
}
.chat-task-action-button:hover {
  filter: brightness(0.97);
}
.task-control-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: end;
}
.task-control-inline-settings {
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(248, 250, 252, 0.72);
}
.task-control-inline-settings summary {
  cursor: pointer;
  font-weight: 800;
}
.task-control-mini-line strong {
  color: #0f172a;
}
.task-decision-note {
  margin-top: 6px;
  border-radius: 10px;
  padding: 6px 8px;
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  font-weight: 700;
}
.task-control-mini-list div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 0.92rem;
}
.task-control-mini-list span {
  color: #64748b;
}
.task-control-mini-list strong {
  color: #0f172a;
  text-align: right;
}

/* Task priority hotfix: priority lives inside Status / deadline column and stays silent when disabled. */
.task-priority-pill {
  border-color: rgba(107, 114, 128, .26);
  background: rgba(107, 114, 128, .08);
  color: var(--muted);
}

.task-priority-pill.task-priority-high {
  border-color: rgba(154, 107, 0, .34);
  background: rgba(154, 107, 0, .10);
  color: var(--warning);
}

.task-priority-pill.task-priority-critical {
  border-color: rgba(162, 41, 41, .36);
  background: rgba(162, 41, 41, .12);
  color: var(--danger);
}

.task-priority-pill.task-priority-low {
  border-color: rgba(31, 122, 63, .30);
  background: rgba(31, 122, 63, .10);
  color: var(--success);
}

.task-priority-editor-block {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}

.task-priority-toggle-inline {
  min-height: 0;
  padding: 8px 10px;
  background: var(--surface);
}

.hero-status-form .task-priority-editor-block {
  min-width: 210px;
  max-width: 260px;
}

.hero-status-form .task-priority-editor-block .field {
  margin: 0;
}

.task-detail-hero .hero-status-form {
  max-width: 760px;
}

/* Task -> chat assistant quick message */
.task-person-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
}

.task-person-message-trigger {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--muted-text, #64748b);
  background: color-mix(in srgb, var(--card-bg, #fff) 82%, var(--border-color, #d1d5db));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color, #d1d5db) 78%, transparent);
  cursor: pointer;
  opacity: 0;
  transform: translateY(1px) scale(.96);
  transition: opacity .16s ease, transform .16s ease, color .16s ease, background .16s ease;
}

.task-people-line:hover .task-person-message-trigger,
.task-person-inline:focus-within .task-person-message-trigger,
.task-person-message-trigger:focus-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.task-person-message-trigger:hover,
.task-person-message-trigger:focus-visible {
  color: var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--card-bg, #fff));
  outline: none;
}

.task-person-message-modal[hidden] {
  display: none !important;
}

.task-person-message-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
}

.task-person-message-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(3px);
}

.task-person-message-card {
  position: relative;
  width: min(520px, calc(100vw - 28px));
  border-radius: 22px;
  padding: 18px;
  background: var(--card-bg, #fff);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
  border: 1px solid var(--border-color, #e5e7eb);
}

.task-person-message-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.task-person-message-head h3 {
  margin: 2px 0 4px;
}

.task-person-message-modal-form {
  display: grid;
  gap: 12px;
}

.task-person-message-modal-form textarea {
  min-height: 96px;
  resize: vertical;
  border-radius: 16px;
}

.task-person-message-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

body.task-person-message-modal-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .task-person-message-trigger {
    opacity: 1;
  }
  .task-person-message-card {
    width: min(100%, 520px);
    border-radius: 20px;
  }
}


/* Safe client-side task cards inside chat */
.chat-task-card-shell{display:grid;gap:.55rem;margin-top:.2rem}.chat-task-card-sender-row{display:flex;align-items:center;gap:.6rem}.chat-task-card-avatar{width:2.1rem;height:2.1rem;border-radius:999px;background:rgba(59,130,246,.12);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#1d4ed8;overflow:hidden;flex:0 0 auto}.chat-task-card-avatar img{width:100%;height:100%;object-fit:cover}.chat-task-card-sender-copy{display:grid;gap:.05rem;min-width:0}.chat-task-card-sender-copy strong{font-size:.93rem;line-height:1.2}.chat-task-card-sender-copy small{font-size:.74rem;color:var(--muted-color,#6b7280)}.chat-task-card{border:1px solid rgba(148,163,184,.45);border-radius:1rem;background:rgba(255,255,255,.9);padding:.85rem .9rem;display:grid;gap:.75rem;box-shadow:0 10px 30px rgba(15,23,42,.06)}[data-theme="dark"] .chat-task-card{background:rgba(17,24,39,.95);border-color:rgba(148,163,184,.2)}.chat-task-card-title-button{appearance:none;border:0;background:none;padding:0;display:grid;gap:.15rem;text-align:left;cursor:pointer}.chat-task-card-title-text{font-weight:700;font-size:1rem;line-height:1.3;color:inherit}.chat-task-card-title-hint{font-size:.73rem;color:var(--muted-color,#6b7280)}.chat-task-card-message{white-space:pre-wrap;line-height:1.45}.chat-task-card-details{display:grid;gap:.7rem}.chat-task-card-summary{display:flex;flex-wrap:wrap;gap:.45rem}.chat-task-card-summary span{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;padding:.28rem .55rem;background:rgba(148,163,184,.12);font-size:.78rem}.chat-task-card-summary b{font-weight:700}.chat-task-card-details-list{display:grid;gap:.42rem;margin:0}.chat-task-card-details-list div{display:grid;grid-template-columns:minmax(84px,120px) 1fr;gap:.4rem}.chat-task-card-details-list dt{margin:0;font-size:.78rem;color:var(--muted-color,#6b7280)}.chat-task-card-details-list dd{margin:0;font-size:.84rem}.chat-task-card-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.chat-task-card-button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.52rem .78rem;border-radius:.8rem;border:1px solid rgba(148,163,184,.35);background:rgba(255,255,255,.88);color:inherit;text-decoration:none;font-size:.82rem;cursor:pointer}.chat-task-card-button.is-primary{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.28);color:#1d4ed8}.chat-task-card-reply-form{display:grid;gap:.55rem}.chat-task-card-reply-form textarea{width:100%;min-height:4.5rem;border-radius:.85rem;padding:.7rem .8rem;border:1px solid rgba(148,163,184,.35);background:var(--surface-color,#fff);color:inherit;resize:vertical}.chat-task-card-reply-actions{display:flex;flex-wrap:wrap;gap:.45rem}.chat-task-card-actions-panel{display:grid;gap:.5rem;border-top:1px dashed rgba(148,163,184,.35);padding-top:.7rem}.chat-task-card-actions-title{font-size:.76rem;font-weight:700;color:var(--muted-color,#6b7280);text-transform:uppercase;letter-spacing:.04em}.chat-task-card-action-form{margin:0}.chat-task-card-action-button,.chat-task-card-actions-panel > a.chat-task-card-action-button{display:flex;width:100%;align-items:center;justify-content:center;padding:.6rem .75rem;border-radius:.8rem;border:1px solid rgba(148,163,184,.35);background:rgba(248,250,252,.9);text-decoration:none;color:inherit;cursor:pointer}.chat-task-card-action-button.is-approve{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.28)}.chat-task-card-action-button.is-reject{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.24)}.chat-task-card-action-button.is-start,.chat-task-card-action-button.is-accept,.chat-task-card-action-button.is-done,.chat-task-card-action-button.is-due-request{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.24)}.chat-message-bubble .chat-task-card-shell + .chat-message-attachments{margin-top:.15rem}@media (max-width:640px){.chat-task-card-details-list div{grid-template-columns:1fr}.chat-task-card-buttons,.chat-task-card-reply-actions{flex-direction:column}.chat-task-card-button{width:100%}}

.task-active-state-pill {
  border-color: rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.08);
}

.task-detail-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.task-action-board {
  min-width: 0;
}

.task-action-card,
.task-queue-item {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-action-card.is-mine,
.task-queue-item.is-decision {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.task-action-card.is-decision {
  background: rgba(37, 99, 235, 0.05);
}

.task-action-head,
.task-timeline-topline,
.task-queue-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.task-action-head h3,
.task-queue-main strong {
  margin: 0;
  font-size: 16px;
}

.task-action-description,
.task-queue-body,
.task-timeline-body {
  white-space: pre-wrap;
  word-break: break-word;
}

.task-action-meta-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.task-action-meta-list div,
.task-action-meta-line {
  font-size: 13px;
  color: var(--muted);
}

.task-action-meta-list span {
  display: block;
  margin-bottom: 4px;
}

.task-inline-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.task-inline-buttons-wrap {
  flex-wrap: wrap;
}

.task-inline-form-spaced {
  margin-top: -2px;
}

.task-quick-block {
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.task-quick-block:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.task-followup-forms-grid {
  align-items: start;
}

.task-recipient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.task-recipient-card {
  border: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-recipient-card > span {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.task-timeline-card {
  margin-bottom: 20px;
}

.task-timeline-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-timeline-filters .button.is-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.task-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-timeline-entry {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}

.task-timeline-marker {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  margin-top: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.task-timeline-marker-event {
  background: rgba(107, 114, 128, 0.32);
}

.task-timeline-marker-message {
  background: rgba(37, 99, 235, 0.28);
}

.task-timeline-marker-decision {
  background: rgba(245, 158, 11, 0.28);
}

.task-timeline-marker-file {
  background: rgba(16, 185, 129, 0.28);
}

.task-timeline-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.task-timeline-comment {
  color: var(--muted);
  font-size: 13px;
}

.task-queues-section {
  margin-bottom: 20px;
}

.task-queue-card {
  min-width: 0;
}

.task-queue-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-queue-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.task-queue-side {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.task-queue-actions {
  align-items: flex-start;
}

@media (max-width: 920px) {
  .task-action-head,
  .task-queue-item,
  .task-timeline-topline {
    flex-direction: column;
  }

  .task-queue-side {
    justify-content: flex-start;
  }
}

/* Messenger tabs / public messenger / client chat MVP additions */
.chat-inbox-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.chat-inbox-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.25));
  text-decoration: none;
  color: inherit;
  background: var(--card-bg, rgba(255,255,255,0.02));
  white-space: nowrap;
  font-weight: 600;
}

.chat-inbox-tab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  font-size: 0.8rem;
}

.chat-inbox-tab.is-active {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.36);
}

.chat-inbox-meta-rich {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

.chat-inbox-subtitle {
  margin-top: 0.2rem;
  font-size: 0.84rem;
  color: var(--muted-text, #94a3b8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-inbox-channel-badge,
.chat-client-channel-badge,
.chat-message-note-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(148, 163, 184, 0.1);
}

.chat-inbox-channel-badge.is-native_app,
.chat-client-channel-badge.is-native_app {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.28);
}

.chat-inbox-channel-badge.is-whatsapp,
.chat-client-channel-badge.is-whatsapp {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.28);
}

.chat-inbox-channel-badge.is-telegram,
.chat-client-channel-badge.is-telegram {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.28);
}

.chat-inbox-channel-badge.is-max,
.chat-client-channel-badge.is-max {
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.28);
}

.chat-inbox-sla.is-overdue {
  color: #ef4444;
  font-weight: 700;
}

.chat-inbox-sla.is-due_soon {
  color: #f59e0b;
  font-weight: 700;
}

.employee-chat-actions-inline,
.chat-client-actions,
.public-search-result {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.employee-chat-actions-inline {
  margin-top: 0.55rem;
}

.chat-send-mode-toolbar {
  margin-bottom: 0.75rem;
}

.chat-send-mode-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.chat-send-mode-field select {
  width: 100%;
}

.chat-message-row.is-internal-note {
  opacity: 0.94;
}

.chat-message-bubble.chat-message-note {
  border-style: dashed;
  background: rgba(245, 158, 11, 0.08);
}

.chat-message-note-badge {
  margin-left: 0.45rem;
  color: #f59e0b;
}

.chat-client-header-card,
.chat-client-profile-header {
  gap: 0.75rem;
}

.chat-client-channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.public-app-shell {
  max-width: 1180px;
  margin: 0 auto;
}

.public-auth-card {
  max-width: 560px;
  margin: 0 auto;
}

.public-messenger-shell {
  display: grid;
  grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
  gap: 1rem;
}

.public-dialog-list {
  max-height: 60vh;
  overflow: auto;
}

.public-messenger-thread {
  min-height: 60vh;
}

.public-message-thread {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: 52vh;
  overflow: auto;
  padding-right: 0.25rem;
}

.public-message-row {
  display: flex;
}

.public-message-row.is-own {
  justify-content: flex-end;
}

.public-message-bubble {
  max-width: min(38rem, 86%);
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.08);
}

.public-message-row.is-own .public-message-bubble {
  background: rgba(59, 130, 246, 0.12);
}

.public-client-app-card {
  max-width: 760px;
}

@media (max-width: 960px) {
  .public-messenger-shell {
    grid-template-columns: 1fr;
  }
}

/* Contacts tabs / local personal contacts */
.contacts-directory-page {
  gap: 0.85rem;
}

.contacts-directory-tabs {
  margin-top: 0.15rem;
}

.contacts-directory-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.contacts-directory-toolbar-actions {
  justify-content: flex-start;
}

.contacts-settings-menu {
  position: relative;
}

.contacts-settings-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.contacts-settings-summary::-webkit-details-marker {
  display: none;
}

.contacts-settings-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 300px;
  z-index: 15;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}

.contacts-settings-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.contacts-settings-option input {
  margin-top: 0.18rem;
}

.contacts-create-panel {
  margin: 0;
}

.contacts-directory-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.contacts-panel-empty {
  margin: 0;
}

.contacts-directory-block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

@media (max-width: 720px) {
  .contacts-directory-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .contacts-settings-panel {
    position: static;
    min-width: 0;
  }
}


.contacts-inline-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.contacts-personal-intro-card {
  margin-bottom: 0.35rem;
}

.public-contacts-shell .public-messenger-thread {
  min-height: 40vh;
}

@media (max-width: 960px) {
  .contacts-inline-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Global mobile header alignment + contacts FAB/create page safe overrides */
@media (max-width: 980px) {
  body.app-body:not(.app-chat-room-page) {
    --mp-mobile-header-height: 80px;
    --mp-mobile-header-bg: rgba(245, 246, 248, 0.96);
    --mp-mobile-page-x: 16px;
    padding-top: calc(var(--mp-mobile-header-height) + env(safe-area-inset-top));
  }

  body.app-body:not(.app-chat-room-page) .mobile-topbar {
    height: calc(var(--mp-mobile-header-height) + env(safe-area-inset-top));
    min-height: 0;
    padding: calc(18px + env(safe-area-inset-top)) 24px 10px;
    gap: 10px;
    align-items: flex-end;
    border-bottom: 0;
    box-shadow: none;
    background: var(--mp-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.app-body:not(.app-chat-room-page) .mobile-brand {
    flex: 1 1 auto;
  }

  body.app-body:not(.app-chat-room-page) .mobile-brand-title {
    color: #20b95a;
    font-size: clamp(30px, 8vw, 37px);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  body.app-body:not(.app-chat-room-page) .mobile-brand-subtitle {
    margin-top: 5px;
    font-size: 12px;
    letter-spacing: 0.01em;
  }

  body.app-body:not(.app-chat-room-page) .chat-mobile-search-sticky-shell {
    position: sticky;
    z-index: 990;
    top: calc(var(--mp-mobile-header-height) + env(safe-area-inset-top));
    margin: 0 calc(-1 * var(--mp-mobile-page-x)) 10px;
    padding: 6px var(--mp-mobile-page-x) 10px;
    background: var(--mp-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.app-body:not(.app-chat-room-page) .chat-mobile-search-panel-static {
    min-height: 48px;
    margin: 0;
    padding: 0 16px;
    gap: 10px;
    background: rgba(243, 242, 240, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.app-body:not(.app-chat-room-page) .chat-mobile-search-input {
    min-height: 46px;
    font-size: 17px;
  }

  .public-desktop-only-search {
    display: none;
  }
}

@media (max-width: 520px) {
  body.app-body:not(.app-chat-room-page) {
    --mp-mobile-header-height: 82px;
  }

  body.app-body:not(.app-chat-room-page) .mobile-topbar {
    padding-left: 20px;
    padding-right: 20px;
  }
}

:root[data-theme="dark"] body.app-body:not(.app-chat-room-page) {
  --mp-mobile-header-bg: rgba(15, 23, 42, 0.96);
}

:root[data-theme="dark"] body.app-body:not(.app-chat-room-page) .chat-mobile-search-panel-static {
  background: rgba(30, 41, 59, 0.94);
}

.contacts-directory-hint {
  margin-top: -0.15rem;
}

.contacts-desktop-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.contacts-desktop-actions {
  justify-content: flex-end;
}

.contacts-fab-stack {
  position: fixed;
  right: 18px;
  bottom: calc(var(--mobile-bottom-nav-height, 76px) + 18px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1020;
}

.contacts-fab-button {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
  font-size: 30px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
}

.contacts-fab-button.is-primary {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-color: rgba(22, 163, 74, 0.56);
  color: #fff;
  font-weight: 800;
}

.contacts-fab-button.is-secondary svg,
.contacts-fab-button.is-primary svg,
.mobile-topbar-icon-button svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contacts-fab-status {
  position: fixed;
  right: 18px;
  left: 18px;
  bottom: calc(var(--mobile-bottom-nav-height, 76px) + 86px);
  z-index: 1010;
  text-align: right;
  pointer-events: none;
}

.contact-create-page {
  max-width: 760px;
  margin: 0 auto;
}

.contact-create-head {
  justify-content: space-between;
  align-items: center;
}

.contact-create-actions {
  align-items: center;
}

.contact-create-form,
.contact-create-search-form {
  margin-top: 0.25rem;
}

@media (min-width: 981px) {
  .contacts-fab-stack,
  .contacts-fab-status {
    display: none;
  }
}

@media (max-width: 980px) {
  .contacts-desktop-head {
    flex-direction: column;
    align-items: stretch;
  }

  .contacts-directory-shell {
    padding-bottom: calc(var(--mobile-bottom-nav-height, 76px) + 90px);
  }

  .contact-create-card {
    margin-bottom: calc(var(--mobile-bottom-nav-height, 76px) + 12px);
  }
}

/* Unified mobile header + search shell for all non-room pages */
.mobile-global-search-shell form {
  width: 100%;
}

.mobile-global-search-shell {
  display: none;
}

.contacts-directory-toolbar-compact {
  align-items: flex-start;
}

.contacts-directory-title {
  margin-bottom: 0;
}

.contacts-directory-hint {
  margin-top: -2px;
}

.contacts-create-card,
.contacts-create-card-desktop {
  margin: 0;
}

.contacts-create-form-actions {
  justify-content: space-between;
  flex-wrap: wrap;
}

.contacts-create-fab {
  position: fixed;
  right: 18px;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 1015;
  width: 58px;
  height: 58px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #20b95a;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 18px 32px rgba(32, 185, 90, 0.34);
}

.contacts-create-fab span {
  display: block;
  font-size: 34px;
  line-height: 1;
  transform: translateY(-1px);
}

.contacts-create-fab:hover,
.contacts-create-fab:focus-visible {
  background: #19a34f;
  color: #fff;
}

@media (max-width: 980px) {
  body.app-body.app-mobile-search-page:not(.app-chat-room-page) {
    --chat-mobile-header-height: 82px;
    --chat-mobile-header-bg: rgba(245, 246, 248, 0.96);
    --chat-mobile-search-gap: 6px;
    --chat-mobile-page-x: 16px;
    padding-top: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
  }

  .mobile-global-search-shell {
    display: block;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
    min-height: 0;
    padding: calc(18px + env(safe-area-inset-top)) 24px 10px;
    gap: 10px;
    align-items: flex-end;
    border-bottom: 0;
    box-shadow: none;
    background: var(--chat-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-brand-title-large {
    font-size: clamp(29px, 8vw, 37px);
    line-height: 1;
    letter-spacing: -0.055em;
    color: #20b95a;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-brand-subtitle {
    margin-top: 4px;
    color: #667085;
    font-size: 13px;
    max-width: min(78vw, 420px);
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar-actions {
    align-self: center;
    margin-left: 0;
    gap: 4px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar-icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar-icon-button svg {
    width: 25px;
    height: 25px;
    stroke-width: 2.15;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar-more-summary svg {
    width: 26px;
    height: 26px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .content {
    padding-top: 0;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .topbar {
    display: none;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-sticky-shell {
    position: sticky;
    z-index: 990;
    top: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
    margin: 0 calc(-1 * var(--chat-mobile-page-x)) 10px;
    padding: var(--chat-mobile-search-gap) var(--chat-mobile-page-x) 10px;
    background: var(--chat-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-panel-static {
    position: relative;
    z-index: 1;
    min-height: 48px;
    margin: 0;
    padding: 0 16px;
    gap: 10px;
    background: rgba(243, 242, 240, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-icon svg {
    width: 23px;
    height: 23px;
    stroke-width: 2.25;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-panel-static .chat-mobile-search-input {
    min-height: 46px;
    font-size: 18px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .contacts-directory-shell,
  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .public-contacts-shell {
    gap: 10px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .contacts-directory-toolbar {
    margin-top: 0;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .contacts-directory-block {
    gap: 0.5rem;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .contacts-directory-block:first-of-type,
  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .employee-chat-list {
    margin-top: 0;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .contacts-create-fab {
    display: inline-flex;
  }
}

@media (max-width: 520px) {
  body.app-body.app-mobile-search-page:not(.app-chat-room-page) {
    --chat-mobile-header-height: 84px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar {
    padding-left: 22px;
    padding-right: 22px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-panel-static {
    min-height: 46px;
    padding: 0 15px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-panel-static .chat-mobile-search-input {
    min-height: 44px;
    font-size: 17px;
  }

  .contacts-create-fab {
    right: 16px;
    width: 56px;
    height: 56px;
  }
}

@media (min-width: 981px) {
  .contacts-create-fab {
    display: none !important;
  }
}

:root[data-theme="dark"] body.app-body.app-mobile-search-page:not(.app-chat-room-page) {
  --chat-mobile-header-bg: rgba(15, 23, 42, 0.96);
}

:root[data-theme="dark"] body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar {
  background: var(--chat-mobile-header-bg);
}

:root[data-theme="dark"] body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-brand-subtitle {
  color: #94a3b8;
}

:root[data-theme="dark"] body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-sticky-shell {
  background: var(--chat-mobile-header-bg);
}

:root[data-theme="dark"] body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-panel-static {
  background: rgba(30, 41, 59, 0.94);
}

:root[data-theme="dark"] .contacts-create-fab {
  box-shadow: 0 18px 32px rgba(22, 163, 74, 0.42);
}


/* Header exact reuse v14 */
.public-mobile-search-form {
  width: 100%;
}

@media (max-width: 980px) {
  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-brand-subtitle {
    display: none !important;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
    min-height: 0;
    padding: calc(18px + env(safe-area-inset-top)) 28px 10px;
    gap: 10px;
    align-items: flex-end;
    border-bottom: 0;
    box-shadow: none;
    background: var(--chat-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-brand-title-large {
    font-size: clamp(31px, 8.6vw, 39px);
    line-height: 1;
    letter-spacing: -0.055em;
    color: #20b95a;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar-actions {
    align-self: center;
    margin-left: 0;
    gap: 4px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-sticky-shell {
    position: sticky;
    z-index: 990;
    top: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
    margin: 0 calc(-1 * var(--chat-mobile-page-x)) 10px;
    padding: var(--chat-mobile-search-gap) var(--chat-mobile-page-x) 10px;
    background: var(--chat-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

@media (max-width: 520px) {
  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar {
    padding-left: 24px;
    padding-right: 24px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-brand-title-large {
    font-size: clamp(30px, 8.1vw, 37px);
  }
}


/* Exact copy of the chats mobile shell applied to all non-room pages */
@media (max-width: 980px) {
  body.app-mobile-chat-shell .topbar {
    display: none;
  }

  body.app-mobile-chat-shell .content {
    padding-top: 10px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) {
    padding-top: 0;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar {
    position: static;
    height: auto;
    min-height: calc(74px + env(safe-area-inset-top));
    padding: calc(24px + env(safe-area-inset-top)) 28px 8px;
    gap: 12px;
    border-bottom: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-brand {
    flex: 1 1 auto;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-brand-title-large {
    font-size: clamp(31px, 8.6vw, 39px);
    line-height: 1;
    letter-spacing: -0.055em;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar-actions {
    align-self: center;
    margin-left: 0;
    gap: 4px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar-icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar-icon-button svg {
    width: 25px;
    height: 25px;
    stroke-width: 2.15;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar-more-summary svg {
    width: 26px;
    height: 26px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .content {
    padding-top: 0;
  }
}

@media (max-width: 980px) {
  body.app-mobile-chat-shell:not(.app-chat-room-page) {
    --chat-mobile-header-height: 80px;
    --chat-mobile-header-bg: rgba(245, 246, 248, 0.96);
    --chat-mobile-search-gap: 6px;
    --chat-mobile-page-x: 16px;
    padding-top: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
    min-height: 0;
    padding: calc(18px + env(safe-area-inset-top)) 28px 10px;
    gap: 10px;
    align-items: flex-end;
    border-bottom: 0;
    box-shadow: none;
    background: var(--chat-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-brand-title-large {
    color: #20b95a;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .content {
    padding-top: 0;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-sticky-shell {
    position: sticky;
    z-index: 990;
    top: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
    margin: 0 calc(-1 * var(--chat-mobile-page-x)) 10px;
    padding: var(--chat-mobile-search-gap) var(--chat-mobile-page-x) 10px;
    background: var(--chat-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-panel-static {
    position: relative;
    z-index: 1;
    min-height: 48px;
    margin: 0;
    padding: 0 16px;
    gap: 10px;
    background: rgba(243, 242, 240, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-icon svg {
    width: 23px;
    height: 23px;
    stroke-width: 2.25;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-panel-static .chat-mobile-search-input {
    min-height: 46px;
    font-size: 18px;
  }
}

@media (max-width: 520px) {
  body.app-mobile-chat-shell:not(.app-chat-room-page) {
    --chat-mobile-header-height: 82px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar {
    padding-left: 24px;
    padding-right: 24px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-brand-title-large {
    font-size: clamp(30px, 8.1vw, 37px);
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-panel-static {
    min-height: 46px;
    padding: 0 15px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-panel-static .chat-mobile-search-input {
    min-height: 44px;
    font-size: 17px;
  }
}

:root[data-theme="dark"] body.app-mobile-chat-shell:not(.app-chat-room-page) {
  --chat-mobile-header-bg: rgba(15, 23, 42, 0.96);
}

:root[data-theme="dark"] body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar {
  background: var(--chat-mobile-header-bg);
}

:root[data-theme="dark"] body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-sticky-shell {
  background: var(--chat-mobile-header-bg);
}

:root[data-theme="dark"] body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-panel-static {
  background: rgba(30, 41, 59, 0.94);
}


/* Exact copy of chats mobile header/search for every non-room page */
@media (max-width: 980px) {
  body.app-body.app-mobile-search-page:not(.app-chat-room-page) {
    --chat-mobile-header-height: 80px;
    --chat-mobile-header-bg: rgba(245, 246, 248, 0.96);
    --chat-mobile-search-gap: 6px;
    --chat-mobile-page-x: 16px;
    padding-top: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
    min-height: 0;
    padding: calc(18px + env(safe-area-inset-top)) 28px 10px;
    gap: 10px;
    align-items: flex-end;
    border-bottom: 0;
    box-shadow: none;
    background: var(--chat-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-brand-title-large {
    font-size: clamp(31px, 8.6vw, 39px);
    line-height: 1;
    letter-spacing: -0.055em;
    color: #20b95a;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-brand-subtitle {
    display: none;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar-actions {
    align-self: center;
    margin-left: 0;
    gap: 4px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar-icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar-icon-button svg {
    width: 25px;
    height: 25px;
    stroke-width: 2.15;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar-more-summary svg {
    width: 26px;
    height: 26px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .content {
    padding-top: 0;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .topbar {
    display: none;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-sticky-shell {
    position: sticky;
    z-index: 990;
    top: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
    margin: 0 calc(-1 * var(--chat-mobile-page-x)) 10px;
    padding: var(--chat-mobile-search-gap) var(--chat-mobile-page-x) 10px;
    background: var(--chat-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-panel-static {
    position: relative;
    z-index: 1;
    min-height: 48px;
    margin: 0;
    padding: 0 16px;
    gap: 10px;
    background: rgba(243, 242, 240, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-icon svg {
    width: 23px;
    height: 23px;
    stroke-width: 2.25;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-panel-static .chat-mobile-search-input {
    min-height: 46px;
    font-size: 18px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page).app-page-contacts .contacts-directory-hint,
  body.app-body.app-mobile-search-page:not(.app-chat-room-page).app-page-app_contacts .contacts-directory-hint {
    display: none;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page).app-page-contacts .contacts-directory-shell,
  body.app-body.app-mobile-search-page:not(.app-chat-room-page).app-page-app_contacts .contacts-directory-shell,
  body.app-body.app-mobile-search-page:not(.app-chat-room-page).app-page-app_contacts .public-contacts-shell {
    gap: 10px;
  }
}

@media (max-width: 520px) {
  body.app-body.app-mobile-search-page:not(.app-chat-room-page) {
    --chat-mobile-header-height: 82px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar {
    padding-left: 24px;
    padding-right: 24px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-brand-title-large {
    font-size: clamp(30px, 8.1vw, 37px);
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-panel-static {
    min-height: 46px;
    padding: 0 15px;
  }

  body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-panel-static .chat-mobile-search-input {
    min-height: 44px;
    font-size: 17px;
  }
}

:root[data-theme="dark"] body.app-body.app-mobile-search-page:not(.app-chat-room-page) {
  --chat-mobile-header-bg: rgba(15, 23, 42, 0.96);
}

:root[data-theme="dark"] body.app-body.app-mobile-search-page:not(.app-chat-room-page) .mobile-topbar {
  background: var(--chat-mobile-header-bg);
}

:root[data-theme="dark"] body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-sticky-shell {
  background: var(--chat-mobile-header-bg);
}

:root[data-theme="dark"] body.app-body.app-mobile-search-page:not(.app-chat-room-page) .chat-mobile-search-panel-static {
  background: rgba(30, 41, 59, 0.94);
}


/* Final exact chat-shell override v14r4 */
@media (max-width: 980px) {
  body.app-mobile-chat-shell:not(.app-chat-room-page) {
    --chat-mobile-header-height: 80px;
    --chat-mobile-header-bg: rgba(245, 246, 248, 0.96);
    --chat-mobile-search-gap: 6px;
    --chat-mobile-page-x: 16px;
    padding-top: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
    min-height: 0;
    padding: calc(18px + env(safe-area-inset-top)) 28px 10px;
    gap: 10px;
    align-items: flex-end;
    border-bottom: 0;
    box-shadow: none;
    background: var(--chat-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-brand-title-large {
    font-size: clamp(31px, 8.6vw, 39px);
    line-height: 1;
    letter-spacing: -0.055em;
    color: #20b95a;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-brand-subtitle {
    display: none !important;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar-actions {
    align-self: center;
    margin-left: 0;
    gap: 4px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar-icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar-icon-button svg {
    width: 25px;
    height: 25px;
    stroke-width: 2.15;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar-more-summary svg {
    width: 26px;
    height: 26px;
  }

  body.app-mobile-chat-shell .topbar {
    display: none;
  }

  body.app-mobile-chat-shell .content {
    padding-top: 0;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-sticky-shell {
    position: sticky;
    z-index: 990;
    top: calc(var(--chat-mobile-header-height) + env(safe-area-inset-top));
    margin: 0 calc(-1 * var(--chat-mobile-page-x)) 10px;
    padding: var(--chat-mobile-search-gap) var(--chat-mobile-page-x) 10px;
    background: var(--chat-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-panel-static {
    position: relative;
    z-index: 1;
    min-height: 48px;
    margin: 0;
    padding: 0 16px;
    gap: 10px;
    background: rgba(243, 242, 240, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-icon svg {
    width: 23px;
    height: 23px;
    stroke-width: 2.25;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-panel-static .chat-mobile-search-input {
    min-height: 46px;
    font-size: 18px;
  }

  body.app-page-contacts.app-mobile-chat-shell .contacts-directory-hint,
  body.app-page-app_contacts.app-mobile-chat-shell .contacts-directory-hint {
    display: none;
  }
}

@media (max-width: 520px) {
  body.app-mobile-chat-shell:not(.app-chat-room-page) {
    --chat-mobile-header-height: 82px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar {
    padding-left: 24px;
    padding-right: 24px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-brand-title-large {
    font-size: clamp(30px, 8.1vw, 37px);
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-panel-static {
    min-height: 46px;
    padding: 0 15px;
  }

  body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-panel-static .chat-mobile-search-input {
    min-height: 44px;
    font-size: 17px;
  }
}

:root[data-theme="dark"] body.app-mobile-chat-shell:not(.app-chat-room-page) {
  --chat-mobile-header-bg: rgba(15, 23, 42, 0.96);
}

:root[data-theme="dark"] body.app-mobile-chat-shell:not(.app-chat-room-page) .mobile-topbar {
  background: var(--chat-mobile-header-bg);
}

:root[data-theme="dark"] body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-sticky-shell {
  background: var(--chat-mobile-header-bg);
}

:root[data-theme="dark"] body.app-mobile-chat-shell:not(.app-chat-room-page) .chat-mobile-search-panel-static {
  background: rgba(30, 41, 59, 0.94);
}


/* Public minimal auth pages */
.public-auth-page {
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.03), rgba(15, 23, 42, 0.06));
}

.public-auth-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1.25rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom)) 1rem;
}

.public-auth-box {
  width: min(100%, 28rem);
  gap: 1rem;
  padding: 1.4rem;
}

.public-auth-brand {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.public-auth-brand-title {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
}

.public-auth-brand-subtitle {
  font-size: 0.98rem;
  color: var(--color-text-secondary);
}

.public-auth-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.public-auth-title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.05;
}

.public-auth-form {
  gap: 0.9rem;
}

.public-auth-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.public-auth-actions .button,
.public-auth-inline-form .button,
.button-block {
  width: 100%;
  justify-content: center;
}

.public-auth-inline-form {
  margin-top: 0.1rem;
}

@media (min-width: 720px) {
  .public-auth-box {
    padding: 1.75rem;
  }
}


.workspace-switcher-inline {
  min-width: 220px;
  margin: 0;
}

.workspace-switcher-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.workspace-switcher-text {
  font-weight: 600;
}

.workspace-switcher-select {
  width: 100%;
}

.topbar-workspace-badge {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.sidebar-workspace-switcher {
  margin-top: 16px;
}

@media (max-width: 900px) {
  .workspace-switcher-inline {
    display: none;
  }

  .sidebar-workspace-switcher {
    display: block;
  }
}

/* Message work items from chat */
.message-work-items{display:grid;gap:.55rem;margin-top:.45rem}.chat-message-work-item-card{display:grid;gap:.55rem;padding:.75rem .8rem;border-radius:.9rem;border:1px solid rgba(148,163,184,.32);background:rgba(248,250,252,.9)}[data-theme="dark"] .chat-message-work-item-card{background:rgba(17,24,39,.88);border-color:rgba(148,163,184,.2)}.chat-message-work-item-head{display:flex;flex-wrap:wrap;gap:.4rem}.chat-message-work-item-title{font-weight:700;color:inherit;text-decoration:none}.chat-message-work-item-title:hover{text-decoration:underline}.chat-message-work-item-desc{white-space:pre-wrap;line-height:1.45;font-size:.93rem}.chat-message-work-item-meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.78rem;color:var(--muted-color,#6b7280)}.chat-message-work-item-draft-host{display:grid;gap:.55rem;margin-top:.45rem}.chat-message-work-item-draft{display:grid;gap:.75rem;padding:.85rem .9rem;border-radius:1rem;border:1px dashed rgba(59,130,246,.35);background:rgba(239,246,255,.82)}[data-theme="dark"] .chat-message-work-item-draft{background:rgba(17,24,39,.94);border-color:rgba(96,165,250,.35)}.chat-message-work-item-draft-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.chat-message-work-item-draft-description-field textarea{width:100%;min-height:5rem;border-radius:.85rem;padding:.72rem .8rem;border:1px solid rgba(148,163,184,.32);background:var(--surface-color,#fff);color:inherit;resize:vertical}.chat-message-work-item-draft .field input,.chat-message-work-item-draft .field select{width:100%}.chat-message-work-item-draft-actions{display:grid;gap:.55rem}.chat-message-work-item-draft-error{padding:.55rem .7rem;border-radius:.8rem;background:rgba(239,68,68,.12);color:#b91c1c;font-size:.85rem}.chat-message-bubble .message-work-items + .chat-message-attachments,.chat-message-bubble .message-work-item-draft-host + .chat-message-attachments{margin-top:.15rem}@media (max-width:640px){.chat-message-work-item-meta{flex-direction:column;gap:.3rem}.chat-message-work-item-draft-head{align-items:flex-start;flex-direction:column}.chat-message-work-item-draft .form-grid-2{grid-template-columns:1fr}}

/* Mchat task reminders: dedicated reminder column and compact editor */
.task-reminder-cell .task-cell-editor > summary {
  cursor: pointer;
}
.task-reminder-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.task-reminder-repeat {
  font-size: 12px;
}
.task-reminder-form .task-reminder-enabled-inline {
  align-items: center;
}
.task-reminder-cell .task-popover-form {
  min-width: 260px;
}


/* Mchat: explicit mobile/PWA back button in chat rooms and no visual noise from old important markers */
.mobile-chat-back-button {
  display: none;
}

@media (max-width: 980px) {
  body.app-chat-room-page .mobile-chat-back-button {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--text);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  body.app-chat-room-page .mobile-chat-back-button:active {
    transform: translateY(1px);
    background: rgba(241, 245, 249, 0.96);
  }

  body.app-chat-room-page .mobile-chat-back-button svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.app-chat-room-page .mobile-brand {
    min-width: 0;
  }

  body.app-chat-room-page .mobile-chat-head-title,
  body.app-chat-room-page .mobile-chat-head-subtitle {
    max-width: calc(100vw - 92px);
  }
}


/* Chat emoji icon hotfix: gray icon and no cursor overlap */
.chat-emoji-button {
  color: #667085;
}

.chat-emoji-button .chat-emoji-icon {
  width: 21px;
  height: 21px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-message-react-button {
  color: #667085;
}

.chat-message-react-button .chat-emoji-icon {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-emoji-button:hover,
.chat-emoji-button:focus-visible,
.chat-emoji-button[aria-expanded="true"] {
  color: #475467;
}

.realtime-chat-form .chat-compose-field textarea[data-chat-input] {
  padding-left: 52px !important;
  padding-right: 52px !important;
}

@media (max-width: 980px) {
  body.app-chat-room-page .realtime-chat-form textarea[data-chat-input] {
    padding-left: 52px !important;
    padding-right: 52px !important;
  }
}

/* Hide legacy per-message reaction smile button under chat message time. */
.chat-message-footer .chat-message-react-button {
  display: none !important;
}


/* Mchat: tighten mobile chat composer offset and remove the empty gap above input. */
@media (max-width: 980px) {
  body.app-chat-room-page.app-body {
    --chat-room-input-height: calc(70px + env(safe-area-inset-bottom));
  }

  body.app-chat-room-page .realtime-chat {
    padding-bottom: var(--chat-room-input-height) !important;
  }

  body.app-chat-room-page .realtime-chat-thread {
    padding-bottom: 4px !important;
  }
}

/* === Mobile tasks web shell (Android tasks parity) === */
.tasks-mobile-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: calc(var(--mobile-bottom-nav-height, 76px) + 26px);
}

.tasks-mobile-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

.tasks-mobile-hero-text {
  flex: 1 1 280px;
}

.tasks-mobile-hero-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-color, #2563eb);
  margin-bottom: 6px;
}

.tasks-mobile-hero-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
}

.tasks-mobile-hero-subtitle {
  margin: 10px 0 0;
  color: var(--text-muted, #64748b);
}

.tasks-mobile-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.tasks-mobile-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tasks-mobile-stat-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.tasks-mobile-stat-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tasks-mobile-stat-value {
  margin-top: 8px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.tasks-mobile-stat-note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
}

.tasks-mobile-scope-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.tasks-mobile-scope-tab {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.86);
  color: inherit;
  padding: 12px 16px;
  border-radius: 16px;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.tasks-mobile-scope-tab strong {
  font-size: 18px;
}

.tasks-mobile-scope-tab.active {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(59, 130, 246, 0.92));
  color: #fff;
  border-color: transparent;
}

.tasks-mobile-active-filters {
  display: block;
}

.tasks-mobile-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tasks-mobile-chip,
.tasks-mobile-toggle-chip span,
.tasks-mobile-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.88);
  color: inherit;
  font-size: 13px;
  font-weight: 600;
}

.tasks-mobile-chip.is-filled,
.tasks-mobile-reaction-pill.active {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.28);
  color: var(--primary-color, #2563eb);
}

.tasks-mobile-error,
.tasks-mobile-flash {
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 600;
}

.tasks-mobile-flash {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border: 1px solid rgba(34, 197, 94, 0.22);
}

.tasks-mobile-flash.is-danger,
.tasks-mobile-error {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.24);
}

.tasks-mobile-list-shell {
  display: block;
}

.tasks-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tasks-mobile-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tasks-mobile-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tasks-mobile-section-header h3,
.tasks-mobile-section-header h5 {
  margin: 0;
  font-size: 16px;
}

.tasks-mobile-section-header span {
  color: var(--text-muted, #64748b);
  font-size: 13px;
  font-weight: 700;
}

.tasks-mobile-card-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tasks-mobile-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.tasks-mobile-card-main {
  width: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 16px;
  text-align: left;
}

.tasks-mobile-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tasks-mobile-card-type {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
}

.tasks-mobile-card-title,
.tasks-mobile-detail-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.tasks-mobile-card-description,
.tasks-mobile-detail-description {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
}

.tasks-mobile-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
}

.tasks-mobile-card-footer {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 14px;
}

.tasks-mobile-card-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-muted, #64748b);
  font-size: 13px;
  font-weight: 600;
}

.tasks-mobile-card-actions,
.tasks-mobile-detail-actions,
.tasks-mobile-form-actions,
.tasks-mobile-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tasks-mobile-toolbar {
  justify-content: space-between;
}

.tasks-mobile-action-button,
.tasks-mobile-icon-button,
.tasks-mobile-action-row,
.tasks-mobile-subtask-row,
.tasks-mobile-file-row,
.tasks-mobile-detail-tab,
.tasks-mobile-sheet-close {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.94);
  color: inherit;
  text-decoration: none;
}

.tasks-mobile-action-button {
  min-height: 36px;
  border-radius: 12px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.tasks-mobile-icon-button {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.tasks-mobile-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.tasks-mobile-badge.is-success {
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
}

.tasks-mobile-badge.is-danger {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.tasks-mobile-badge.is-warning {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.tasks-mobile-badge.is-info {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.tasks-mobile-badge.is-muted,
.tasks-mobile-badge.is-neutral {
  background: rgba(148, 163, 184, 0.16);
  color: #475569;
}

.tasks-mobile-empty,
.tasks-mobile-empty-inline,
.tasks-mobile-detail-loading {
  border: 1px dashed rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  padding: 18px 16px;
  color: var(--text-muted, #64748b);
  text-align: center;
  background: rgba(255, 255, 255, 0.74);
}

.tasks-mobile-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tasks-mobile-empty-icon {
  font-size: 32px;
}

.tasks-mobile-empty-title {
  font-size: 17px;
  font-weight: 800;
  color: inherit;
}

.tasks-mobile-empty-text {
  max-width: 340px;
}

.tasks-mobile-list-loading {
  display: grid;
  gap: 12px;
}

.tasks-mobile-skeleton-card {
  height: 120px;
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.7), rgba(241, 245, 249, 0.95), rgba(226, 232, 240, 0.7));
  background-size: 200% 100%;
  animation: tasks-mobile-skeleton 1.1s linear infinite;
}

@keyframes tasks-mobile-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.tasks-mobile-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  z-index: 140;
  transition: opacity 0.18s ease;
}

.tasks-mobile-sheet {
  position: fixed;
  inset: auto 0 0;
  z-index: 141;
  padding: 0 12px 12px;
}

.tasks-mobile-sheet-card {
  width: min(860px, 100%);
  margin: 0 auto;
  max-height: calc(100dvh - var(--mobile-topbar-height, 64px) - 18px);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 28px 28px 0 0;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -28px 70px rgba(15, 23, 42, 0.24);
  padding: 12px 18px 28px;
  will-change: transform, opacity;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.tasks-mobile-sheet-card.is-sheet-dragging {
  transition: none;
}

.tasks-mobile-sheet-grip {
  width: 56px;
  height: 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.38);
  margin: 4px auto 16px;
}

.tasks-mobile-sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.tasks-mobile-sheet-subtitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.tasks-mobile-sheet-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.tasks-mobile-sheet-close {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 24px;
  line-height: 1;
}

.tasks-mobile-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tasks-mobile-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tasks-mobile-inline-form {
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.9);
}

.tasks-mobile-grid,
.tasks-mobile-detail-grid,
.tasks-mobile-people-grid,
.tasks-mobile-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tasks-mobile-meta-card,
.tasks-mobile-people-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(248, 250, 252, 0.9);
}

.tasks-mobile-meta-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tasks-mobile-meta-value {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
}

.tasks-mobile-meta-hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
}

.tasks-mobile-people-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tasks-mobile-subtasks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tasks-mobile-subtask-row,
.tasks-mobile-file-row,
.tasks-mobile-action-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 16px;
  padding: 14px 16px;
  text-align: left;
}

.tasks-mobile-subtask-row strong,
.tasks-mobile-file-row span {
  color: var(--text-muted, #64748b);
  font-size: 13px;
}

.tasks-mobile-detail-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.tasks-mobile-detail-tab {
  min-height: 42px;
  border-radius: 14px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.tasks-mobile-detail-tab.active {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.24);
  color: var(--primary-color, #2563eb);
}

.tasks-mobile-comment,
.tasks-mobile-history-row {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.96);
}

.tasks-mobile-comment.is-own {
  background: rgba(239, 246, 255, 0.96);
}

.tasks-mobile-comment-head,
.tasks-mobile-history-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.tasks-mobile-comment-head span,
.tasks-mobile-history-head span,
.tasks-mobile-comment-recipient,
.tasks-mobile-comment-footer,
.tasks-mobile-history-meta {
  font-size: 13px;
  color: var(--text-muted, #64748b);
}

.tasks-mobile-comment-body,
.tasks-mobile-history-body {
  line-height: 1.55;
  white-space: pre-wrap;
}

.tasks-mobile-files-list,
.tasks-mobile-history-list,
.tasks-mobile-action-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tasks-mobile-action-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tasks-mobile-action-group h4 {
  margin: 0;
  font-size: 15px;
}

.tasks-mobile-action-row.is-danger {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(254, 242, 242, 0.9);
}

.tasks-mobile-action-row-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tasks-mobile-action-row-main small {
  color: var(--text-muted, #64748b);
  font-size: 12px;
}

.tasks-mobile-action-row-icon,
.tasks-mobile-reaction-emoji {
  font-size: 18px;
}

.tasks-mobile-inline-note {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary-color, #2563eb);
  font-size: 13px;
  font-weight: 700;
}

.tasks-mobile-fieldset {
  margin: 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.tasks-mobile-fieldset legend {
  padding: 0 6px;
  font-weight: 700;
}

.tasks-mobile-toggle-chip {
  position: relative;
}

.tasks-mobile-toggle-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.tasks-mobile-toggle-chip input:checked + span {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.28);
  color: var(--primary-color, #2563eb);
}

.tasks-mobile-select-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.tasks-mobile-select-row input {
  width: 18px;
  height: 18px;
}

.tasks-mobile-list-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tasks-mobile-reactions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tasks-mobile-reaction-pill {
  width: 100%;
  justify-content: center;
  min-height: 46px;
}

.tasks-mobile-sheet-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .tasks-mobile-grid,
  .tasks-mobile-detail-grid,
  .tasks-mobile-people-grid,
  .tasks-mobile-check-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tasks-mobile-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tasks-mobile-page {
    gap: 14px;
  }

  .tasks-mobile-summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .tasks-mobile-card-main,
  .tasks-mobile-card-footer,
  .tasks-mobile-sheet-card,
  .tasks-mobile-inline-form,
  .tasks-mobile-meta-card,
  .tasks-mobile-people-card,
  .tasks-mobile-action-row,
  .tasks-mobile-subtask-row,
  .tasks-mobile-file-row {
    padding-left: 14px;
    padding-right: 14px;
  }

  .tasks-mobile-sheet {
    padding: 0;
  }

  .tasks-mobile-sheet-card {
    width: 100%;
    border-radius: 24px 24px 0 0;
    max-height: calc(100dvh - 10px);
    padding-bottom: calc(var(--mobile-bottom-nav-height, 76px) + 18px);
  }

  .tasks-mobile-reactions-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

:root[data-theme="dark"] .tasks-mobile-stat-card,
:root[data-theme="dark"] .tasks-mobile-scope-tab,
:root[data-theme="dark"] .tasks-mobile-card,
:root[data-theme="dark"] .tasks-mobile-chip,
:root[data-theme="dark"] .tasks-mobile-toggle-chip span,
:root[data-theme="dark"] .tasks-mobile-reaction-pill,
:root[data-theme="dark"] .tasks-mobile-empty,
:root[data-theme="dark"] .tasks-mobile-empty-inline,
:root[data-theme="dark"] .tasks-mobile-detail-loading,
:root[data-theme="dark"] .tasks-mobile-sheet-card,
:root[data-theme="dark"] .tasks-mobile-inline-form,
:root[data-theme="dark"] .tasks-mobile-meta-card,
:root[data-theme="dark"] .tasks-mobile-people-card,
:root[data-theme="dark"] .tasks-mobile-comment,
:root[data-theme="dark"] .tasks-mobile-history-row,
:root[data-theme="dark"] .tasks-mobile-action-row,
:root[data-theme="dark"] .tasks-mobile-subtask-row,
:root[data-theme="dark"] .tasks-mobile-file-row,
:root[data-theme="dark"] .tasks-mobile-detail-tab,
:root[data-theme="dark"] .tasks-mobile-action-button,
:root[data-theme="dark"] .tasks-mobile-icon-button,
:root[data-theme="dark"] .tasks-mobile-sheet-close {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(248, 250, 252, 0.96);
}

:root[data-theme="dark"] .tasks-mobile-card-description,
:root[data-theme="dark"] .tasks-mobile-detail-description,
:root[data-theme="dark"] .tasks-mobile-card-meta,
:root[data-theme="dark"] .tasks-mobile-card-counts,
:root[data-theme="dark"] .tasks-mobile-stat-note,
:root[data-theme="dark"] .tasks-mobile-stat-label,
:root[data-theme="dark"] .tasks-mobile-meta-hint,
:root[data-theme="dark"] .tasks-mobile-comment-head span,
:root[data-theme="dark"] .tasks-mobile-comment-recipient,
:root[data-theme="dark"] .tasks-mobile-comment-footer,
:root[data-theme="dark"] .tasks-mobile-history-meta,
:root[data-theme="dark"] .tasks-mobile-action-row-main small,
:root[data-theme="dark"] .tasks-mobile-subtask-row strong,
:root[data-theme="dark"] .tasks-mobile-file-row span,
:root[data-theme="dark"] .tasks-mobile-sheet-subtitle,
:root[data-theme="dark"] .tasks-mobile-empty,
:root[data-theme="dark"] .tasks-mobile-empty-inline,
:root[data-theme="dark"] .tasks-mobile-detail-loading {
  color: rgba(203, 213, 225, 0.84);
}

:root[data-theme="dark"] .tasks-mobile-sheet-backdrop {
  background: rgba(2, 6, 23, 0.7);
}

/* Mchat mobile tasks: compact list-first shell and topbar filter. */
.tasks-mobile-topbar-actions {
  align-items: center;
}

.tasks-mobile-topbar-filter {
  position: relative;
}

.tasks-mobile-topbar-filter svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tasks-mobile-topbar-filter.is-filtered {
  color: var(--primary-color, #2563eb);
  background: rgba(37, 99, 235, 0.1);
}

.tasks-mobile-filter-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 17px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}

.tasks-mobile-filter-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tasks-mobile-filter-preset {
  position: relative;
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: inherit;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tasks-mobile-filter-preset input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.tasks-mobile-filter-preset.active {
  color: var(--primary-color, #2563eb);
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.12);
}

.tasks-mobile-filter-search {
  margin-top: 2px;
}

.tasks-mobile-responsibles-fieldset {
  padding-bottom: 10px;
}

.tasks-mobile-responsible-search {
  margin-bottom: 10px;
}

.tasks-mobile-responsibles-list {
  max-height: min(42vh, 360px);
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.tasks-mobile-responsibles-list .tasks-mobile-select-row {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
}

.tasks-mobile-extra-filters {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 12px 14px;
}

.tasks-mobile-extra-filters > summary {
  cursor: pointer;
  font-weight: 800;
}

.tasks-mobile-extra-filters > *:not(summary) {
  margin-top: 12px;
}

@media (max-width: 980px) {
  .tasks-mobile-page {
    gap: 10px;
  }

  .tasks-mobile-list-shell {
    margin-top: 2px;
  }

  .tasks-mobile-toolbar {
    margin-top: 6px;
  }
}

:root[data-theme="dark"] .tasks-mobile-filter-preset,
:root[data-theme="dark"] .tasks-mobile-extra-filters,
:root[data-theme="dark"] .tasks-mobile-responsibles-list .tasks-mobile-select-row {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(148, 163, 184, 0.22);
}

:root[data-theme="dark"] .tasks-mobile-filter-preset.active {
  background: rgba(59, 130, 246, 0.16);
  color: rgba(147, 197, 253, 0.96);
}


/* === 2026-05-28 mobile tasks + calendar polish === */
.chat-mobile-search-panel-static {
  box-sizing: border-box;
  max-width: calc(100% - 96px);
  overflow: visible;
}
.chat-mobile-search-panel-input-wrapper {
  width: 100%;
  box-sizing: border-box;
}
.tasks-mobile-sheet-backdrop,
.tasks-mobile-sheet {
  z-index: 1180;
}
.tasks-mobile-sheet {
  z-index: 1181;
}
body.tasks-mobile-filter-sheet-open .chat-mobile-search-sticky-shell,
body.calendar-mobile-filter-sheet-open .chat-mobile-search-sticky-shell {
  opacity: 0;
  pointer-events: none;
}
.tasks-mobile-topbar-filter.is-open,
.tasks-mobile-topbar-filter.is-filtered,
.calendar-mobile-topbar-filter.is-open,
.calendar-mobile-topbar-filter.is-filtered,
.calendar-mobile-topbar-date.is-open {
  background: rgba(26, 64, 126, 0.08);
  border-color: rgba(26, 64, 126, 0.14);
  color: #1f3d72;
}
.tasks-mobile-topbar-filter svg,
.calendar-mobile-topbar-filter svg,
.calendar-mobile-topbar-date svg,
.calendar-mobile-nav-button svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calendar-mobile-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 calc(var(--mobile-bottom-nav-height, 92px) + 36px);
}
.calendar-mobile-topbar-actions {
  gap: 10px;
}
.calendar-mobile-filter-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: #1f3d72;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.calendar-mobile-scope-tabs,
.calendar-mobile-mode-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.calendar-mobile-scope-tabs::-webkit-scrollbar,
.calendar-mobile-mode-tabs::-webkit-scrollbar,
.calendar-mobile-week-strip::-webkit-scrollbar,
.calendar-mobile-responsibles-list::-webkit-scrollbar {
  display: none;
}
.calendar-mobile-scope-tab,
.calendar-mobile-mode-tab {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  color: #344054;
  border-radius: 18px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.calendar-mobile-scope-tab.active,
.calendar-mobile-mode-tab.active {
  background: #ece7e1;
  color: #101828;
  border-color: rgba(16, 24, 40, 0.1);
}
.calendar-mobile-datebar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
}
.calendar-mobile-nav-button {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  color: #344054;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.calendar-mobile-date-pill {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #fff;
  min-height: 44px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-align: left;
}
.calendar-mobile-date-pill-label {
  color: #101828;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.calendar-mobile-date-pill small {
  color: #667085;
  font-size: 12px;
  line-height: 1.25;
}
.calendar-mobile-flash,
.calendar-mobile-error {
  display: block;
  border-radius: 18px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.45;
}
.calendar-mobile-flash {
  background: rgba(38, 173, 108, 0.12);
  color: #166b43;
}
.calendar-mobile-flash.is-danger {
  background: rgba(208, 53, 73, 0.12);
  color: #b42318;
}
.calendar-mobile-error {
  background: rgba(208, 53, 73, 0.11);
  color: #b42318;
}
.calendar-mobile-list-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.calendar-mobile-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.calendar-mobile-loading {
  display: grid;
  gap: 12px;
}
.calendar-mobile-empty {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 24px;
  padding: 28px 20px;
  text-align: center;
  color: #667085;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.calendar-mobile-empty-icon {
  font-size: 28px;
}
.calendar-mobile-empty-title {
  color: #101828;
  font-size: 17px;
  font-weight: 700;
}
.calendar-mobile-empty-text {
  font-size: 14px;
  line-height: 1.45;
}
.calendar-mobile-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calendar-mobile-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.calendar-mobile-section-header h3 {
  margin: 0;
  color: #101828;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}
.calendar-mobile-section-header span {
  color: #667085;
  font-size: 13px;
  font-weight: 700;
}
.calendar-mobile-card-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calendar-mobile-card {
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.calendar-mobile-card-button {
  width: 100%;
  display: block;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 18px 18px 20px;
}
.calendar-mobile-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.calendar-mobile-card-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #667085;
  font-size: 13px;
  font-weight: 700;
}
.calendar-mobile-entry-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 8px;
  background: #7c8ca5;
}
.calendar-mobile-entry-dot.is-task { background: #1f3d72; }
.calendar-mobile-entry-dot.is-event { background: #2563eb; }
.calendar-mobile-entry-dot.is-reminder { background: #f79009; }
.calendar-mobile-entry-dot.is-focus { background: #8b5cf6; }
.calendar-mobile-entry-dot.is-overdue { background: #d92d20; }
.calendar-mobile-card-title {
  margin: 0;
  color: #101828;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.18;
}
.calendar-mobile-card-description {
  margin-top: 10px;
  color: #667085;
  font-size: 15px;
  line-height: 1.5;
}
.calendar-mobile-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
  color: #667085;
  font-size: 14px;
  line-height: 1.45;
}
.calendar-mobile-week-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.calendar-mobile-week-pill {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  color: #667085;
  border-radius: 20px;
  min-width: 78px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.calendar-mobile-week-pill strong {
  color: #101828;
  font-size: 14px;
  line-height: 1.2;
}
.calendar-mobile-week-pill span {
  font-size: 12px;
  line-height: 1.2;
}
.calendar-mobile-week-pill.active {
  background: #ece7e1;
  border-color: rgba(16, 24, 40, 0.08);
}
.calendar-mobile-agenda-title {
  color: #101828;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
  margin-top: 6px;
}
.calendar-mobile-month-grid-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calendar-mobile-month-weekdays,
.calendar-mobile-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.calendar-mobile-month-weekdays span {
  color: #98a2b3;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.calendar-mobile-month-cell {
  min-height: 72px;
  padding: 10px 8px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}
.calendar-mobile-month-cell.is-selected {
  background: #ece7e1;
  border-color: rgba(16, 24, 40, 0.12);
}
.calendar-mobile-month-cell.is-today {
  box-shadow: 0 0 0 1px rgba(31, 61, 114, 0.16) inset;
}
.calendar-mobile-month-cell.is-muted {
  opacity: 0.46;
}
.calendar-mobile-month-cell-number {
  color: #101828;
  font-size: 14px;
  font-weight: 800;
}
.calendar-mobile-month-cell-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.calendar-mobile-month-cell-count {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}
.calendar-mobile-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(var(--mobile-bottom-nav-height, 92px) + 18px);
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 0;
  background: #101828;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 34px rgba(16, 24, 40, 0.28);
  z-index: 90;
}
.calendar-mobile-sheet-card .tasks-mobile-sheet-body {
  padding-top: 0;
}
.calendar-mobile-filter-form,
.calendar-mobile-detail-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.calendar-mobile-filter-section,
.calendar-mobile-mode-sheet,
.calendar-mobile-create-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.calendar-mobile-filter-title {
  color: #101828;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}
.calendar-mobile-filter-pill,
.calendar-mobile-mode-chip {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  color: #475467;
  border-radius: 18px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.calendar-mobile-filter-pill input,
.calendar-mobile-mode-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.calendar-mobile-filter-pill.active,
.calendar-mobile-mode-chip.active {
  background: #ece7e1;
  color: #101828;
  border-color: rgba(16, 24, 40, 0.12);
}
.calendar-mobile-filter-pill.is-off {
  background: #fff;
}
.calendar-mobile-checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #344054;
  font-size: 14px;
  font-weight: 600;
}
.calendar-mobile-checkbox-row input {
  width: 18px;
  height: 18px;
}
.calendar-mobile-responsible-search {
  margin-top: 4px;
}
.calendar-mobile-responsibles-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calendar-mobile-responsible-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #344054;
  font-size: 14px;
  line-height: 1.35;
}
.calendar-mobile-responsible-row input {
  width: 18px;
  height: 18px;
}
.calendar-mobile-detail-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calendar-mobile-detail-title {
  margin: 0;
  color: #101828;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}
.calendar-mobile-detail-description {
  color: #667085;
  font-size: 15px;
  line-height: 1.55;
}
.calendar-mobile-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calendar-mobile-detail-actions .button,
.calendar-mobile-detail-actions a.button {
  width: 100%;
  text-align: center;
}
.tasks-mobile-empty-inline,
.tasks-mobile-detail-loading {
  padding: 18px;
  border-radius: 18px;
  background: #f8f9fb;
  color: #667085;
  font-size: 14px;
  line-height: 1.45;
}
.tasks-mobile-inline-note {
  color: #667085;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 2px;
}
@media (max-width: 480px) {
  .calendar-mobile-card-title {
    font-size: 18px;
  }
  .calendar-mobile-detail-title {
    font-size: 25px;
  }
  .calendar-mobile-month-cell {
    min-height: 66px;
    padding: 9px 6px;
  }
}


.chat-mobile-search-panel-static {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.task-board-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.task-board-header-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px;
}

.task-board-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.task-board-title {
  margin: 6px 0 8px;
  font-size: 34px;
  line-height: 1.05;
}

.task-board-subtitle {
  margin: 0;
  max-width: 820px;
  color: #667085;
  font-size: 15px;
  line-height: 1.5;
}

.task-board-header-actions,
.task-board-top-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.task-board-scope-switch,
.task-board-folder-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.task-board-scope-tab,
.task-board-folder-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
  color: #1f2937;
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.task-board-scope-tab span,
.task-board-folder-tab strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.09);
  color: #2563eb;
  font-size: 12px;
}

.task-board-scope-tab:hover,
.task-board-folder-tab:hover,
.task-board-scope-tab.is-active,
.task-board-folder-tab.is-active {
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.06);
  color: #1d4ed8;
  transform: translateY(-1px);
}

.task-board-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) repeat(4, minmax(130px, auto));
  gap: 12px;
  align-items: end;
}

.task-board-search-field,
.task-board-select-field,
.task-board-toggle-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-board-search-field input,
.task-board-select-field select {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  padding: 0 14px;
  font-size: 14px;
}

.task-board-select-field span {
  color: #667085;
  font-size: 12px;
  font-weight: 600;
}

.task-board-toggle-field {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
}

.task-board-toggle-field input {
  margin: 0;
}

.task-board-toggle-field span {
  font-size: 14px;
  font-weight: 600;
}

.task-board-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.task-board-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.task-board-active-filters-label {
  font-size: 13px;
  color: #667085;
}

.task-board-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 600;
}

.task-board-active-chip-handle {
  color: #94a3b8;
}

.task-board-active-chip-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}

.task-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 360px);
  gap: 20px;
  align-items: start;
}

.task-board-main,
.task-board-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.task-board-list-card,
.task-board-group-card {
  padding: 18px;
}

.task-board-list-head,
.task-board-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.task-board-list-head h3,
.task-board-group-head h3 {
  margin: 6px 0 0;
  font-size: 24px;
}

.task-board-list-meta,
.task-board-group-count {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: #667085;
}

.task-board-group-count {
  border-radius: 999px;
  padding: 6px 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.task-modern-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.task-modern-empty {
  padding: 40px 24px;
  border-radius: 20px;
  border: 1px dashed rgba(15, 23, 42, 0.12);
  color: #667085;
  text-align: center;
  background: #f8fafc;
}

.task-modern-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  padding: 20px;
}

.task-modern-card.is-overdue {
  border-color: rgba(239, 68, 68, 0.25);
}

.task-modern-card.is-today {
  border-color: rgba(245, 158, 11, 0.25);
}

.task-modern-card-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) minmax(180px, 0.92fr) minmax(180px, 0.9fr) minmax(300px, 1.15fr);
  gap: 20px;
  align-items: start;
}

.task-modern-main,
.task-modern-participants,
.task-modern-activity,
.task-modern-status-panel {
  min-width: 0;
}

.task-modern-title-row {
  display: flex;
  gap: 14px;
}

.task-modern-kind-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 8px;
  flex: 0 0 auto;
  background: #2563eb;
}

.task-modern-kind-task { background: #2563eb; }
.task-modern-kind-idea { background: #8b5cf6; }
.task-modern-kind-problem { background: #ef4444; }
.task-modern-kind-hypothesis { background: #f59e0b; }
.task-modern-kind-reminder { background: #0ea5e9; }
.task-modern-kind-thought { background: #22c55e; }

.task-modern-title-block {
  min-width: 0;
}

.task-modern-parent-label {
  color: #667085;
  font-size: 12px;
  margin-bottom: 4px;
}

.task-modern-title-link {
  display: inline-block;
  color: #111827;
  font-size: 25px;
  line-height: 1.18;
  font-weight: 700;
  text-decoration: none;
}

.task-modern-title-link:hover {
  color: #1d4ed8;
}

.task-modern-description {
  margin-top: 10px;
  color: #475467;
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.task-modern-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.task-modern-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.10);
  color: #4338ca;
  font-size: 12px;
  font-weight: 600;
}

.task-modern-tag.is-soft {
  background: #f2f4f7;
  color: #475467;
}

.task-modern-children-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-left: 24px;
}

.task-modern-child-link,
.task-modern-children-more {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 12px;
  background: #f8fafc;
  color: #475467;
  text-decoration: none;
  font-size: 12px;
}

.task-modern-child-link:hover {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.07);
}

.task-modern-participants {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-modern-person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-modern-avatar {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.task-modern-person-body {
  min-width: 0;
}

.task-modern-person-role {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3b82f6;
}

.task-modern-person-name {
  font-size: 14px;
  color: #111827;
  font-weight: 600;
  line-height: 1.4;
}

.task-modern-person-extra {
  color: #667085;
  font-size: 12px;
}

.task-modern-activity {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-modern-due-line {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  color: #111827;
}

.task-modern-due-line.is-overdue {
  color: #dc2626;
}

.task-modern-due-line.is-today {
  color: #f59e0b;
}

.task-modern-activity-meta {
  color: #667085;
  font-size: 13px;
}

.task-modern-last-message-box {
  padding: 12px 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.task-modern-last-message-label {
  color: #667085;
  font-size: 12px;
  margin-bottom: 6px;
}

.task-modern-last-message-author {
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.task-modern-last-message-body,
.task-modern-last-message-empty {
  color: #475467;
  font-size: 13px;
  line-height: 1.5;
}

.task-modern-status-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-modern-status-top,
.task-modern-role-chip-row,
.task-modern-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-modern-status-badge,
.task-modern-state-chip,
.task-modern-role-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.task-modern-status-badge {
  background: #eef2ff;
  color: #4338ca;
}

.task-modern-status-badge.is-new {
  background: rgba(37, 99, 235, 0.10);
  color: #2563eb;
}

.task-modern-status-badge.is-progress {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.task-modern-status-badge.is-review {
  background: rgba(139, 92, 246, 0.14);
  color: #7c3aed;
}

.task-modern-status-badge.is-decision {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.task-modern-status-badge.is-success {
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
}

.task-modern-status-badge.is-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.task-modern-state-chip {
  background: #f8fafc;
  color: #475467;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.task-modern-state-chip.is-danger {
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.16);
}

.task-modern-state-chip.is-warning {
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.18);
}

.task-modern-role-chip {
  min-height: 28px;
  background: #f2f4f7;
  color: #475467;
}

.task-modern-primary-action {
  min-height: 42px;
  border-radius: 14px;
  padding-inline: 16px;
  font-weight: 700;
}

.task-modern-secondary-action {
  min-height: 38px;
  border-radius: 12px;
}

.task-modern-action-hint {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
  font-size: 12px;
  line-height: 1.45;
}

.task-modern-message-menu {
  position: relative;
}

.task-modern-message-menu summary {
  list-style: none;
}

.task-modern-message-menu summary::-webkit-details-marker {
  display: none;
}

.task-modern-message-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.task-modern-message-option {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
  background: #f8fafc;
  cursor: pointer;
  text-align: left;
}

.task-modern-message-option:hover {
  background: rgba(37, 99, 235, 0.08);
}

.task-modern-message-role {
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.task-legacy-table-panel {
  padding: 0;
  overflow: hidden;
}

.task-legacy-table-panel summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.task-legacy-table-panel summary::-webkit-details-marker {
  display: none;
}

.task-legacy-table-panel summary small {
  color: #667085;
  font-size: 12px;
}

.task-legacy-table-body {
  padding: 0 0 12px;
}

.task-board-how-card,
.task-board-summary-card {
  padding: 18px;
}

.task-board-how-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.task-board-how-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
}

.task-board-how-number {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
}

.task-board-how-item strong {
  display: block;
  margin-bottom: 6px;
}

.task-board-how-item p {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}

.task-board-callout {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
  font-size: 13px;
  line-height: 1.55;
}

.task-board-summary-title {
  margin: 8px 0 14px;
  font-size: 22px;
  font-weight: 700;
}

.task-board-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.task-board-summary-grid div {
  padding: 12px 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.task-board-summary-grid span {
  display: block;
  color: #667085;
  font-size: 12px;
  margin-bottom: 6px;
}

.task-board-summary-grid strong {
  font-size: 18px;
  color: #111827;
}

.task-board-summary-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.task-web-action-modal[hidden] {
  display: none !important;
}

.task-web-action-modal {
  position: fixed;
  inset: 0;
  z-index: 1600;
}

.task-web-action-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
}

.task-web-action-modal-card {
  position: relative;
  width: min(720px, calc(100% - 32px));
  margin: 48px auto;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.28);
  padding: 22px;
  max-height: calc(100vh - 96px);
  overflow: auto;
}

.task-web-action-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.task-web-action-modal-subtitle {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.task-web-action-status {
  margin-bottom: 12px;
}

.task-web-action-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.task-web-action-section h4 {
  margin: 0;
  font-size: 16px;
}

.task-web-action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-web-action-row {
  display: flex;
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: #fff;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
}

.task-web-action-row:hover {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(37, 99, 235, 0.04);
}

.task-web-action-row.is-danger {
  border-color: rgba(220, 38, 38, 0.22);
}

.task-web-action-row-icon {
  font-size: 18px;
  line-height: 1;
  padding-top: 2px;
}

.task-web-action-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-web-action-row-main small {
  color: #667085;
  line-height: 1.45;
}

.task-web-action-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.task-web-action-form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-web-action-form textarea,
.task-web-action-form select,
.task-web-action-form input[type="date"],
.task-web-action-form input[type="time"] {
  width: 100%;
}

@media (max-width: 1400px) {
  .task-modern-card-grid {
    grid-template-columns: minmax(240px, 1.35fr) minmax(170px, 0.86fr) minmax(170px, 0.84fr) minmax(280px, 1.05fr);
  }
}

@media (max-width: 1240px) {
  .task-board-layout {
    grid-template-columns: 1fr;
  }

  .task-board-sidebar {
    order: -1;
  }

  .task-board-filter-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-modern-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .task-board-header {
    flex-direction: column;
  }

  .task-board-header-actions,
  .task-board-top-actions {
    align-items: flex-start;
  }

  .task-board-filter-toolbar {
    grid-template-columns: 1fr;
  }

  .task-modern-card-grid {
    grid-template-columns: 1fr;
  }

  .task-board-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .task-board-header-card,
  .task-board-list-card,
  .task-board-group-card,
  .task-board-how-card,
  .task-board-summary-card,
  .task-modern-card {
    padding: 16px;
  }

  .task-board-title {
    font-size: 28px;
  }

  .task-modern-title-link {
    font-size: 21px;
  }

  .task-board-summary-grid {
    grid-template-columns: 1fr;
  }

  .task-web-action-modal-card {
    width: calc(100% - 18px);
    margin: 24px auto;
    padding: 16px;
  }
}

/* === 2026-06-02 task board fit and sizing fixes === */
.task-board-page,
.task-board-layout,
.task-board-main,
.task-board-sidebar,
.task-board-list-card,
.task-board-group-card,
.task-modern-list,
.task-modern-card,
.task-modern-card-grid,
.task-modern-main,
.task-modern-participants,
.task-modern-activity,
.task-modern-status-panel {
  min-width: 0;
}

.task-board-layout {
  grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 360px);
}

.task-board-list-card,
.task-board-group-card,
.task-modern-card {
  overflow: hidden;
}

.task-modern-card-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.86fr) minmax(0, 0.86fr) minmax(0, 1fr);
  align-items: start;
}

.task-modern-title-link {
  font-size: clamp(20px, 1.45vw, 25px);
  word-break: break-word;
}

.task-modern-description,
.task-modern-last-message-body,
.task-modern-last-message-empty,
.task-modern-person-name,
.task-modern-person-extra,
.task-modern-child-link,
.task-modern-children-more,
.task-modern-action-hint,
.task-board-callout {
  overflow-wrap: anywhere;
}

.task-modern-due-line {
  font-size: clamp(18px, 1.35vw, 22px);
}

.task-modern-last-message-box {
  min-width: 0;
}

.task-modern-status-panel {
  gap: 10px;
}

.task-modern-status-top,
.task-modern-role-chip-row,
.task-modern-action-row {
  align-items: stretch;
}

.task-modern-action-row {
  row-gap: 10px;
}

.task-modern-action-row > * {
  max-width: 100%;
}

.task-modern-action-row .button,
.task-modern-action-row a.button,
.task-modern-action-row button,
.task-modern-message-menu summary.button {
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
}

.task-modern-primary-action {
  flex: 1 1 200px;
}

.task-modern-secondary-action,
.task-modern-message-menu {
  flex: 0 1 auto;
}

.task-modern-message-popover {
  max-width: min(280px, calc(100vw - 32px));
}

@media (max-width: 1700px) {
  .task-board-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .task-modern-card-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.95fr) minmax(0, 0.95fr);
  }

  .task-modern-status-panel {
    grid-column: 1 / -1;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
  }
}

@media (max-width: 1500px) {
  .task-board-layout {
    grid-template-columns: 1fr;
  }

  .task-board-sidebar {
    order: 2;
  }

  .task-board-filter-toolbar {
    grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(150px, 1fr));
  }

  .task-board-toolbar-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .task-modern-card-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .task-modern-activity,
  .task-modern-status-panel {
    grid-column: 1 / -1;
  }

  .task-modern-activity {
    padding-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
  }
}

@media (max-width: 1240px) {
  .task-board-sidebar {
    order: 2;
  }

  .task-board-filter-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-modern-card-grid {
    grid-template-columns: 1fr;
  }

  .task-modern-activity,
  .task-modern-status-panel {
    grid-column: auto;
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 920px) {
  .task-board-header-actions,
  .task-board-top-actions {
    width: 100%;
  }

  .task-board-top-actions {
    flex-wrap: wrap;
  }

  .task-board-scope-switch,
  .task-board-folder-bar {
    width: 100%;
  }
}

/* === 2026-06-02 compact task page layout === */
.task-board-page--compact {
  gap: 16px;
}

.task-board-header-card--compact {
  gap: 14px;
  padding: 18px 20px;
}

.task-board-compact-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.task-board-header-card--compact .task-board-title {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
}

.task-board-compact-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.task-board-top-actions--compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.task-board-icon-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.task-board-icon-button em {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  font-size: 11px;
  font-weight: 700;
}

.task-board-settings-menu {
  position: relative;
}

.task-board-settings-menu summary {
  list-style: none;
}

.task-board-settings-menu summary::-webkit-details-marker {
  display: none;
}

.task-board-settings-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.task-board-settings-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
  background: #f8fafc;
  color: #111827;
  text-decoration: none;
  cursor: pointer;
}

.task-board-settings-link:hover {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}

.task-board-compact-active-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: #667085;
  font-size: 13px;
}

.task-board-compact-active-line a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}

.task-board-main--compact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-board-list-card--compact,
.task-board-group-card {
  padding: 16px;
}

.task-board-list-head--compact,
.task-board-group-head--compact {
  margin-bottom: 14px;
}

.task-board-list-head--compact {
  justify-content: flex-end;
}

.task-board-group-head--compact h3 {
  margin: 4px 0 0;
  font-size: 22px;
}

#task-classic-view[hidden] {
  display: none !important;
}

@media (max-width: 980px) {
  .task-board-compact-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .task-board-top-actions--compact {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .task-board-header-card--compact {
    padding: 16px;
  }

  .task-board-header-card--compact .task-board-title {
    font-size: 28px;
  }

  .task-board-top-actions--compact .button,
  .task-board-top-actions--compact a.button {
    width: 100%;
    justify-content: center;
  }

  .task-board-settings-popover {
    right: auto;
    left: 0;
    min-width: min(260px, calc(100vw - 32px));
  }
}