/* ---- Home dashboard (practice admin / tenant admin) ---- */

.home-page {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  align-items: start;
  gap: 20px;
  padding: 24px;
}

@media (max-width: 1300px) {
  .home-page {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .home-validation-column {
    grid-column: 1 / -1;
  }
}

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

  .home-validation-column {
    grid-column: auto;
  }
}

/* ---- Queue list (left column) ---- */

/* Bounded to the viewport (minus the page's own top/bottom padding) so the card never grows taller
   than the screen - .home-queue-list below is the flexible piece that gives up space to fit, so
   "Refresh List" (a flex sibling after it) always stays visible without scrolling the page. */
.home-queue-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  max-height: calc(100vh - 48px);
}

.home-queue-owner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
}

.home-queue-owner-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.home-queue-owner-name.MuiTypography-root {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text-user, #0f172a);
}

.home-queue-owner-badge {
  display: inline-flex;
  align-items: center;
  background: #ecfdf3;
  color: #12b76a;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-queue-toolbar {
  display: flex;
  gap: 8px;
}

.home-queue-select.MuiOutlinedInput-root {
  height: 34px;
  font-size: 0.78rem;
  flex: 1;
  min-width: 0;
}

/* display:flex + width:100% (not inline-flex/auto-width) so this actually fills the select's real
   width instead of just growing to fit its content - an inline-flex box with no bounded width has
   nothing for text-overflow:ellipsis to truncate against, so the browser was hard-clipping it
   mid-glyph at the select's edge instead of showing "…" (the smeared/overlapping text). With a real
   width here, the icon stays fixed-size and .home-queue-select-value-text can shrink and truncate
   correctly. */
.home-queue-select-value {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 6px;
  color: var(--color-muted);
  min-width: 0;
  overflow: hidden;
}

.home-queue-select-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.home-queue-select-value-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* flex:1 + min-height:0 (instead of a fixed max-height) lets this shrink to whatever space is left
   in the now viewport-bounded .home-queue-panel, rather than claiming up to 620px regardless of
   whether the screen actually has room - that's what was pushing "Refresh List" below the fold. */
.home-queue-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0 2px 0 0;
  list-style: none;
}

.home-queue-empty {
  color: var(--color-muted);
  text-align: center;
  padding: 24px 0;
}

.home-queue-list-item {
  list-style: none;
}

.home-queue-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.home-queue-item-dot--teal {
  background: var(--color-primary);
}

.home-queue-item-dot--orange {
  background: #f79009;
}

.home-queue-item-dot--red {
  background: #f04438;
}

.home-queue-item-dot--gray {
  background: #98a2b3;
}

.home-queue-item-dot--blue {
  background: #2563eb;
}

.home-queue-item-dot--green {
  background: #12b76a;
}

.home-queue-item-dot--yellow {
  background: #eab308;
}

/* Two stacked rows: name+dot on top, category+date below - each row spans the full width with
   its trailing element (dot / date) pushed to the right of the leading text via space-between. */
.home-queue-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  background: var(--color-card-bg);
}

.home-queue-item-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.home-queue-item-name,
.home-queue-item-category {
  flex: 1 1 auto;
  min-width: 0;
}

.home-queue-item-dot,
.home-queue-item-due {
  flex-shrink: 0;
  white-space: nowrap;
}

.home-queue-item-dot {
  margin-top: 5px;
}

.home-queue-item-due {
  margin-top: 1px;
}

.home-queue-item--teal {
  --tone-color: var(--color-primary);
  border-color: rgba(0, 122, 129, 0.25);
  background: rgba(0, 122, 129, 0.06);
}

.home-queue-item--orange {
  --tone-color: #f79009;
  border-color: #fde3ad;
  background: #fffaeb;
}

.home-queue-item--red {
  --tone-color: #f04438;
  border-color: #fecdca;
  background: #fef3f2;
}

.home-queue-item--gray {
  --tone-color: #98a2b3;
  border-color: var(--color-border);
  background: #f8fafc;
}

.home-queue-item--blue {
  --tone-color: #2563eb;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.home-queue-item--green {
  --tone-color: #12b76a;
  border-color: #a7f3d0;
  background: #ecfdf3;
}

.home-queue-item--yellow {
  --tone-color: #eab308;
  border-color: #fde68a;
  background: #fffbeb;
}

/* Selected card: keeps the tone's tinted background, just adds a colored accent bar on the left
   (matching the tone's dot color) instead of the thick full border used before. */
.home-queue-item--active {
  padding: 10px 12px 10px 16px;
}

.home-queue-item--active::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--tone-color, var(--color-primary));
}

.home-queue-item-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-text-user, #0f172a);
}

.home-queue-item-category {
  font-size: 0.76rem;
  color: var(--color-muted);
}

.home-queue-item-due {
  font-size: 0.72rem;
  color: var(--color-muted);
}

.home-queue-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  font-family: inherit;
}

.home-queue-refresh img {
  width: 15px;
  height: 15px;
  display: block;
}

.home-queue-refresh:hover {
  text-decoration: underline;
}

/* ---- Document review (middle column) ---- */

.home-document-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.home-client-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-summary-section {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 10px;
  padding: 14px 16px 40px;
  box-shadow: 0 2px 10px rgba(17, 52, 71, 0.05);
}

/* Positioning lives on this wrapper, not the button itself: the button is wrapped in a Tooltip's
   <span> (needed because a disabled element can't receive a Tooltip's mouse listeners directly),
   and Tooltip anchors to that span's own bounding box. A plain unstyled span around a
   position:absolute child has zero size (absolute positioning takes it out of normal flow
   entirely), so the tooltip would show up wherever the span happens to fall in the document flow
   instead of over the visible button. */
.home-summary-refresh-wrapper {
  position: absolute;
  right: 14px;
  bottom: 14px;
}

.home-summary-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}

.home-summary-refresh:hover {
  background: rgba(0, 122, 129, 0.08);
}

.home-summary-refresh:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.home-summary-refresh:disabled:hover {
  background: none;
}

.home-summary-refresh img {
  width: 16px;
  height: 16px;
  display: block;
}

.home-review-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.74rem;
  font-weight: 600;
}

.home-review-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.home-review-badge--blue {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #2563eb;
}

.home-review-badge--green {
  border-color: #a7f3d0;
  background: #ecfdf3;
  color: #12b76a;
}

.home-review-badge--yellow {
  border-color: #fde68a;
  background: #fffbeb;
  color: #b45309;
}

.home-review-badge--gray {
  border-color: var(--color-border);
  background: #f8fafc;
  color: #667085;
}

.home-client-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 110px;
}

.home-client-tag-icon {
  color: var(--color-primary);
  font-size: 18px;
}

.home-client-name.MuiTypography-root {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text-user, #0f172a);
}

.home-client-name-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 2px;
  cursor: pointer;
  border-radius: 4px;
}

.home-client-name-edit:hover {
  background: rgba(0, 122, 129, 0.08);
}

.home-client-name-edit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.home-client-name-edit:disabled:hover {
  background: none;
}

.home-client-name-edit img {
  width: 14px;
  height: 14px;
  display: block;
}

.home-client-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.home-client-contact span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.home-client-contact-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

.home-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-quick-reply-chip {
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.home-quick-reply-chip:hover {
  background: rgba(0, 122, 129, 0.08);
}

.home-email-compose {
  border: 1px solid var(--color-border);
  border-radius: 15px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0px 6px 20px 0px #1622330f;
}

.home-email-compose-title.MuiTypography-root {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 12px 14px 0;
}

.home-toolbar-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}

.home-email-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.84rem;
}

.home-email-field-label {
  width: 40px;
  flex-shrink: 0;
  color: var(--color-muted);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.home-email-field-value {
  flex: 1;
  min-width: 0;
  color: var(--color-text-user, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-email-row-chevron {
  margin-left: auto;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

.home-email-ccbcc-toggles {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.home-email-ccbcc-toggle {
  border: none;
  background: none;
  color: var(--color-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}

.home-email-ccbcc-toggle:hover {
  color: var(--color-primary);
}

.home-email-ccbcc-toggle:disabled {
  color: #98a2b3;
  cursor: not-allowed;
}

.home-email-ccbcc-toggle:disabled:hover {
  color: #98a2b3;
}

.home-email-field-input .MuiInputBase-input {
  font-size: 0.84rem;
  padding: 0;
}

.home-email-subject-input .MuiInputBase-input {
  font-weight: 600;
}

.home-email-compose .profile-signature-toolbar {
  border-top: none;
  border-radius: 0;
}

.home-email-editor.profile-signature-editor {
  min-height: 110px;
  border: none;
  border-radius: 0;
}

/* .profile-signature-editor p's 4px margin (main.css) is sized for a short signature block, not a
   multi-paragraph AI-drafted email - it reads as one solid wall of text otherwise. */
.home-email-editor.profile-signature-editor p {
  margin: 0 0 14px;
}

.home-email-editor.profile-signature-editor p:last-child {
  margin-bottom: 0;
}

/* Matches the 14px body-paragraph gap above, rather than a bespoke larger value, so the gap before
   "Regards," reads as just another paragraph break instead of a visually distinct jump. */
.home-email-signature {
  margin-top: 14px;
}

/* The 14px body-paragraph margin above also applies inside this nested block by default, which
   blows out a compact signature (name/company/address/phone, one per line) into widely-spaced
   lines - restore the original tight signature spacing here specifically. */
.home-email-editor.profile-signature-editor .home-email-signature p {
  margin: 0 0 4px;
}

.home-email-editor.profile-signature-editor .home-email-signature p:last-child {
  margin-bottom: 0;
}

/* main.css sets strong/b to a 14px line-height sized for the Profile page's own signature editor -
   here it squashes the bold name line's vertical spacing well below the 23.63px line-height every
   other line in this editor uses, making it look out of rhythm with the lines around it. */
.home-email-editor.profile-signature-editor strong,
.home-email-editor.profile-signature-editor b {
  line-height: inherit;
}

/* Sending isn't wired to anything real yet (see DocumentReviewPanel) - contentEditable is turned
   off in JSX so it can't be typed into, but that alone leaves the text-cursor on hover; this makes
   the "can't edit this" affordance visible too. */
.home-email-editor--disabled {
  cursor: default;
  background: #fafafa;
}

.home-email-editor-footer {
  display: flex;
  justify-content: flex-end;
  padding: 6px 14px 12px;
  background: #ffffff;
  border-radius: 0 0 15px 15px;
}

.home-regenerate-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.home-regenerate-link:hover {
  text-decoration: underline;
}

.home-regenerate-link:disabled {
  color: #98a2b3;
  cursor: not-allowed;
}

.home-regenerate-link:disabled:hover {
  text-decoration: none;
}

.home-regenerate-icon {
  width: 14px;
  height: 14px;
  display: block;
}

.home-document-preview {
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.home-document-preview-title.MuiTypography-root {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-text-user, #0f172a);
}

.home-document-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-document-pdf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #f04438;
  background: #fef3f2;
  color: #f04438;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
}

.home-document-pdf-badge img {
  width: 12px;
  height: 12px;
  display: block;
}

.home-document-frame {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}

.home-document-file-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #eef2f5;
  border-bottom: 1px solid var(--color-border);
}

.home-document-file-bar-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.home-document-file-bar-name {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-text-user, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-document-file-bar-page {
  color: var(--color-muted);
  font-size: 0.76rem;
  flex-shrink: 0;
}

.home-document-file-bar-more.MuiIconButton-root {
  margin-left: auto;
}

.home-document-page {
  background: #eef2f5;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-document-page-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(17, 52, 71, 0.08);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.home-document-page-header {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}

.home-document-page-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.home-document-page-agency.MuiTypography-root {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-user, #0f172a);
}

.home-document-page-office.MuiTypography-root {
  font-size: 0.72rem;
  color: var(--color-muted);
}

.home-document-page-title.MuiTypography-root {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-user, #0f172a);
}

.home-document-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.home-document-skeleton-line {
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
}

.home-document-refund-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #ecfdf3;
  border: 1px solid #a6f4c5;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.85rem;
  color: #12b76a;
  font-weight: 600;
}

.home-document-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--color-muted);
}

/* ---- Validation / actions / file options (right column) ---- */

.home-validation-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.home-panel-title.MuiTypography-root {
  margin-bottom: 14px;
}

.home-validation-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.home-validation-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--color-text-user, #0f172a);
}

.home-validation-item--pass {
  background: #ecfdf3;
}

.home-validation-item--fail {
  background: #fef3f2;
}

.home-validation-item--warn {
  background: #fffbeb;
}

.home-validation-item--skipped {
  background: #f3f4f6;
}

.home-validation-icon {
  flex-shrink: 0;
  font-size: 18px;
}

.home-validation-item--pass .home-validation-icon {
  color: #12b76a;
}

.home-validation-item--fail .home-validation-icon {
  color: #f04438;
}

.home-validation-item--warn .home-validation-icon {
  color: #eab308;
}

.home-validation-item--skipped .home-validation-icon {
  color: #98a2b3;
}

.home-revalidate-button.MuiButton-root {
  border-radius: 8px;
  text-transform: none;
  font-weight: 600;
  background: #f3f4f6;
  color: var(--color-text-user, #0f172a);
}

.home-revalidate-button.MuiButton-root:hover {
  background: #e5e7eb;
}

.home-revalidate-button img {
  width: 16px;
  height: 16px;
  display: block;
}

.home-actions-panel {
  display: flex;
  flex-direction: column;
}

.home-action-icon-invert {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) invert(1);
}

.home-send-email-button.MuiButton-root {
  background: #16a34a;
  color: #ffffff;
  border-radius: 8px;
  text-transform: none;
  font-weight: 600;
  padding: 10px 0;
  margin-bottom: 12px;
}

.home-send-email-button.MuiButton-root:hover {
  background: #15803d;
}

.home-action-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.84rem;
  color: var(--color-text-user, #0f172a);
  padding: 8px 10px;
  margin-bottom: 12px;
}

.home-action-toggle-row img {
  width: 15px;
  height: 15px;
  display: block;
}

.home-action-toggle-label {
  flex: 1;
}

.home-reassign-button.MuiButton-root {
  background: #7c3aed;
  color: #ffffff;
  border-radius: 8px;
  text-transform: none;
  font-weight: 600;
  margin-bottom: 10px;
}

.home-reassign-button.MuiButton-root:hover {
  background: #6d28d9;
}

.home-close-button.MuiButton-root {
  background: #1f2937;
  color: #ffffff;
  border-radius: 8px;
  text-transform: none;
  font-weight: 600;
}

.home-close-button.MuiButton-root:hover {
  background: #111827;
}

/* Once a job is closed, Close/Re-validate disable themselves (see ValidationActionsPanel's
   isClosed) - same neutral grey treatment as the Send Email/Re-Assign disabled state above. */
.home-close-button.MuiButton-root.Mui-disabled,
.home-revalidate-button.MuiButton-root.Mui-disabled {
  background: #E5E7EB;
  color: #9CA3AF;
  cursor: not-allowed;
}

/* closed_icon.svg is hardcoded white (stroke="white"), same as reasign_icon.svg above - darkened
   so it stays visible against the light grey disabled background. */
.home-close-button.MuiButton-root.Mui-disabled img {
  filter: brightness(0.55);
}

.home-close-button.MuiButton-root.Mui-disabled:hover,
.home-revalidate-button.MuiButton-root.Mui-disabled:hover {
  background: #E5E7EB;
}

/* These custom solid-color button classes otherwise override MUI's own dimmed .Mui-disabled look -
   without this, a disabled Send Email/Re-Assign button still reads as fully active. A translucent
   version of the same green/purple read as an odd pastel, so this uses the same neutral grey
   treatment MUI's own default disabled buttons use instead. */
.home-send-email-button.MuiButton-root.Mui-disabled,
.home-reassign-button.MuiButton-root.Mui-disabled {
  background: #E5E7EB;
  color: #9CA3AF;
  cursor: not-allowed;
}

/* email.svg is natively grey (#98A2B3) - .home-action-icon-invert force-inverts it to white for
   the solid green button, so disabled reverts that back to its natural grey, visible against the
   light grey disabled background below. */
.home-send-email-button.MuiButton-root.Mui-disabled img {
  filter: none;
}

/* reasign_icon.svg is hardcoded white (stroke="white" baked into the SVG, not CSS) - on the light
   grey disabled background that's nearly invisible, so this darkens it to a visible mid-grey. */
.home-reassign-button.MuiButton-root.Mui-disabled img {
  filter: brightness(0.55);
}

.home-send-email-button.MuiButton-root.Mui-disabled:hover,
.home-reassign-button.MuiButton-root.Mui-disabled:hover {
  background: #E5E7EB;
}

.home-reassign-button img,
.home-close-button img {
  width: 16px;
  height: 16px;
  display: block;
}

.home-attach-original-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.84rem;
  color: var(--color-text-user, #0f172a);
  cursor: pointer;
  margin-bottom: 10px;
}

.home-file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  color: var(--color-muted);
}

.home-file-chip img {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.home-file-chip-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.home-file-chip-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-user, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-file-chip-size {
  font-size: 0.72rem;
  color: var(--color-muted);
}

.home-attach-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  padding: 16px;
  color: var(--color-muted);
  font-size: 0.84rem;
  cursor: pointer;
}

.home-attach-dropzone:hover {
  border-color: var(--color-primary);
  background: rgba(0, 122, 129, 0.05);
}

/* Uploading has no backend counterpart yet (see ValidationActionsPanel) - dims the dropzone and
   overrides the hover highlight above so it doesn't look clickable. */
.home-attach-dropzone.home-attach-dropzone--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.home-attach-dropzone.home-attach-dropzone--disabled:hover {
  border-color: var(--color-border);
  background: none;
}

.home-attach-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 122, 129, 0.1);
  margin-bottom: 4px;
}

.home-attach-plus img {
  width: 15px;
  height: 15px;
  display: block;
}

.home-attach-dropzone-title {
  font-weight: 600;
  color: var(--color-text-user, #0f172a);
}

.home-attach-dropzone-subtitle {
  font-size: 0.74rem;
  color: var(--color-muted);
}

.home-empty-state {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: var(--color-muted);
}

/* ---- Floating help bubble ---- */

.home-help-bubble {
  position: fixed;
  right: 32px;
  bottom: 28px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: #98a2b3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(17, 52, 71, 0.12);
  z-index: 20;
}

.home-help-bubble .MuiSvgIcon-root {
  font-size: 18px;
  color: #98a2b3;
}

.home-help-bubble:hover {
  background: var(--color-card-bg);
  box-shadow: 0 6px 18px rgba(17, 52, 71, 0.16);
}