/**
 * Thread form + modern minimal create composer.
 *
 * @package AkuAjae_Community_Core
 */

  /* ─── Page shell for full-page create/edit ───────────────── */

  .acc-page-form--composer {
    max-width: var(--acc-form-max, 680px);
  }

  .acc-composer-page {
    background: var(--acc-composer-bg, #ffffff);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--acc-composer-border, var(--acc-color-border));
    border-radius: var(--acc-radius-xl, 20px);
    box-shadow: var(--acc-composer-shadow, var(--acc-shadow-soft));
    padding: var(--acc-space-5);
    margin-top: var(--acc-space-2);
    transition: border-color 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
  }

  @supports not ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
    .acc-composer-page {
      background: var(--acc-composer-bg-solid) !important;
    }
  }

  .acc-composer-page:focus-within {
    border-color: var(--acc-color-accent) !important;
    box-shadow: var(--acc-composer-shadow), var(--acc-halo-glow) !important;
  }

  /* ─── Modern create composer ─────────────────────────────── */

  /*
 * Typography isolation: never inherit UA/theme serif (Times New Roman).
 * Full-page create and modal composer both use .acc-composer-create.
 */
  .acc-composer-create {
    display: flex;
    flex-direction: column;
    gap: var(--acc-space-3);
    font-family: var(--acc-font-family);
    color: var(--acc-color-text);
  }

  .acc-composer-create input,
  .acc-composer-create textarea,
  .acc-composer-create select,
  .acc-composer-create button {
    font-family: var(--acc-font-family);
  }

  .acc-composer-create__fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
  }

  .acc-composer-create__title,
  .acc-composer-create__body {
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    color: var(--acc-color-text);
    font-family: var(--acc-font-family);
    outline: none !important;
    resize: none;
    padding: 0;
    margin: 0;
    box-shadow: none !important;
  }

  .acc-composer-create__title:focus,
  .acc-composer-create__title:focus-visible,
  .acc-composer-create__body:focus,
  .acc-composer-create__body:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .acc-composer-create__title {
    font-size: var(--acc-font-size-xl);
    font-weight: var(--acc-font-weight-semibold);
    line-height: var(--acc-line-height-tight);
    letter-spacing: -0.02em;
    padding-bottom: var(--acc-space-2);
    border-bottom: 1px solid var(--acc-color-border) !important;
    margin-bottom: var(--acc-space-1);
  }

  .acc-composer-create__title::placeholder,
  .acc-composer-create__body::placeholder {
    color: var(--acc-color-text-subtle);
    font-weight: 400;
  }

  .acc-composer-create__body {
    font-size: var(--acc-font-size-base);
    line-height: var(--acc-line-height-relaxed);
    min-height: 120px;
    max-height: 40dvh;
    overflow-y: auto;
  }

  /* Real-time character counter */
  .acc-char-counter,
  .acc-composer-create__counter {
    align-self: flex-end;
    font-size: var(--acc-font-size-xs, 12px);
    font-family: var(--acc-font-family, system-ui, sans-serif);
    color: var(--acc-color-text-muted, #8e8e93);
    margin-top: 4px;
    text-align: right;
    transition: color 0.15s ease, font-weight 0.15s ease;
    user-select: none;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }

  .acc-char-counter.is-warning,
  .acc-char-counter.is-near-limit,
  .acc-char-counter--warning,
  .acc-composer-create__counter.is-near-limit {
    color: var(--acc-color-warning, #f59e0b) !important;
    font-weight: 500;
  }

  .acc-char-counter.is-error,
  .acc-char-counter.is-at-limit,
  .acc-char-counter--error,
  .acc-composer-create__counter.is-at-limit {
    color: var(--acc-color-danger, #ef4444) !important;
    font-weight: 600;
  }

  /* Category collapsible */
  .acc-composer-cat {
    position: relative;
    align-self: flex-start;
    max-width: 100%;
  }

  .acc-composer-cat__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 12px;
    border: 1px solid var(--acc-color-border);
    border-radius: var(--acc-radius-pill);
    background: var(--acc-color-bg-soft);
    color: var(--acc-color-text);
    font-family: var(--acc-font-family);
    font-size: var(--acc-font-size-sm);
    font-weight: var(--acc-font-weight-medium);
    cursor: pointer;
    transition:
      border-color var(--acc-transition-fast),
      background var(--acc-transition-fast),
      color var(--acc-transition-fast);
  }
  @media (hover: hover) and (pointer: fine) {
    .acc-composer-cat__trigger:hover,
    .acc-composer-cat__trigger[aria-expanded="true"] {
      border-color: var(--acc-color-accent);
      background: var(--acc-color-accent-soft);
      color: var(--acc-color-accent);
    }
  }

  .acc-composer-cat__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
  }

  .acc-composer-cat__trigger .acc-icon {
    flex-shrink: 0;
    transition: transform var(--acc-transition-fast);
  }

  .acc-composer-cat__trigger[aria-expanded="true"] .acc-icon {
    transform: rotate(180deg);
  }

  .acc-composer-cat__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--acc-z-dropdown, 100);
    min-width: min(280px, 80vw);
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 6px;
    background: var(--acc-color-bg-elevated);
    border: 1px solid var(--acc-color-border);
    border-radius: var(--acc-radius-md);
    box-shadow: var(--acc-shadow-dropdown, 0 8px 28px rgba(0, 0, 0, 0.12));
  }

  .acc-composer-cat__menu[hidden] {
    display: none;
  }

  .acc-composer-cat__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--acc-radius-sm);
    cursor: pointer;
    color: var(--acc-color-text);
    font-size: var(--acc-font-size-sm);
    transition: background var(--acc-transition-fast);
  }
  @media (hover: hover) and (pointer: fine) {
    .acc-composer-cat__option:hover {
      background: var(--acc-color-bg-soft);
    }
  }

  .acc-composer-cat__option.is-selected {
    background: var(--acc-color-accent-soft);
    color: var(--acc-color-accent);
    font-weight: var(--acc-font-weight-medium);
  }

  .acc-composer-cat__option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .acc-composer-cat__option:focus-within {
    outline: 2px solid var(--acc-color-accent);
    outline-offset: 2px;
  }

  /* Uploads strip */
  .acc-composer-create__uploads {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--acc-space-2);
  }

  .acc-composer-create__uploads[hidden] {
    display: none;
  }

  .acc-composer-create__uploads li {
    flex: 1 1 80px;
    max-width: 120px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .acc-composer-create__uploads img {
    width: 100%;
    aspect-ratio: 4/3;
    height: auto;
    object-fit: cover;
    border-radius: var(--acc-radius-sm);
    border: 1px solid var(--acc-color-border);
    display: block;
  }

  .acc-composer-create__uploads .is-uploading {
    width: 100%;
    aspect-ratio: 4/3;
    height: auto;
    border-radius: var(--acc-radius-sm);
    border: 1px dashed var(--acc-color-border);
    overflow: hidden;
    position: relative;
  }

  /* Links list */
  .acc-composer-create__links {
    display: flex;
    flex-direction: column;
    gap: var(--acc-space-2);
  }

  .acc-composer-create__links[hidden] {
    display: none;
  }

  .acc-composer-create__links .acc-link-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr auto;
    gap: var(--acc-space-2);
    align-items: center;
  }

  @media (max-width: 768px) {
    .acc-composer-create__links .acc-link-row {
      grid-template-columns: 1fr auto;
      gap: var(--acc-space-2);
    }

    .acc-composer-create__links .acc-link-row [data-acc-link-url] {
      grid-column: 1;
    }

    .acc-composer-create__links .acc-link-row [data-acc-link-label] {
      grid-column: 1;
    }

    .acc-composer-create__links .acc-link-row [data-acc-remove-link] {
      grid-column: 2;
      grid-row: 1 / 3;
      align-self: center;
    }
  }

  /* Inline link draft panel */
  .acc-composer-create__link-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--acc-space-2);
    padding: var(--acc-space-2);
    background: var(--acc-color-bg-soft);
    border-radius: var(--acc-radius-md);
  }

  .acc-composer-create__link-panel[hidden] {
    display: none;
  }

  .acc-composer-create__link-input {
    flex: 1 1 180px;
    min-width: 0;
  }

  /* Bottom bar: + | actions */
  .acc-composer-create__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--acc-space-3);
    padding-top: var(--acc-space-3);
    border-top: 1px solid var(--acc-color-border);
    margin-top: var(--acc-space-1);
  }

  .acc-composer-create__attach {
    position: relative;
  }

  .acc-composer-create__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--acc-color-border);
    background: var(--acc-color-bg-elevated);
    color: var(--acc-color-text);
    cursor: pointer;
    font-family: var(--acc-font-family);
    transition:
      border-color var(--acc-transition-fast),
      background var(--acc-transition-fast),
      color var(--acc-transition-fast),
      box-shadow var(--acc-transition-fast);
  }
  @media (hover: hover) and (pointer: fine) {
    .acc-composer-create__plus:hover,
    .acc-composer-create__plus[aria-expanded="true"] {
      border-color: var(--acc-color-accent);
      background: var(--acc-color-accent-soft);
      color: var(--acc-color-accent);
    }
  }

  .acc-composer-create__plus:focus-visible {
    outline: 2px solid var(--acc-color-accent);
    outline-offset: 2px;
  }

  .acc-composer-create__attach-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: var(--acc-z-dropdown, 100);
    min-width: 200px;
    padding: 6px;
    background: var(--acc-color-bg-elevated);
    border: 1px solid var(--acc-color-border);
    border-radius: var(--acc-radius-md);
    box-shadow: var(--acc-shadow-dropdown, 0 8px 28px rgba(0, 0, 0, 0.12));
  }

  .acc-composer-create__attach-menu[hidden] {
    display: none;
  }

  .acc-composer-create__attach-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--acc-radius-sm);
    background: transparent;
    color: var(--acc-color-text);
    font-family: var(--acc-font-family);
    font-size: var(--acc-font-size-sm);
    text-align: left;
    cursor: pointer;
    transition:
      background var(--acc-transition-fast),
      color var(--acc-transition-fast);
  }
  @media (hover: hover) and (pointer: fine) {
    .acc-composer-create__attach-item:hover {
      background: var(--acc-color-accent-soft);
      color: var(--acc-color-accent);
    }
  }

  .acc-composer-create__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--acc-space-2);
    margin-left: auto;
  }

  .acc-composer-create .acc-field-error {
    margin: 0;
    font-size: var(--acc-font-size-sm);
    color: var(--acc-color-danger);
  }

  .acc-composer-create .acc-field-error:not([hidden]) {
    display: block;
  }

  /* Legacy form section (report modal etc. still use labels) */
  .acc-form-section {
    background: var(--acc-color-bg-elevated);
    border: 1px solid var(--acc-color-border);
    border-radius: var(--acc-radius-card);
    box-shadow: var(--acc-shadow-soft);
    padding: var(--acc-space-5) var(--acc-space-5) var(--acc-space-2);
    margin-bottom: var(--acc-space-4);
  }

  .acc-form-section__title {
    margin: 0 0 var(--acc-space-4);
    font-size: var(--acc-font-size-sm);
    font-weight: var(--acc-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--acc-color-text-muted);
  }

  .acc-field {
    margin-bottom: var(--acc-space-5);
  }

  .acc-field label,
  .acc-label {
    display: block;
    font-weight: var(--acc-font-weight-semibold);
    font-size: var(--acc-font-size-sm);
    margin-bottom: 8px;
    color: var(--acc-color-text);
  }

  .acc-field-hint {
    margin: 6px 0 0;
    font-size: var(--acc-font-size-xs);
    color: var(--acc-color-text-muted);
    line-height: var(--acc-line-height-normal);
  }

  .acc-field-error {
    margin: 6px 0 0;
    font-size: var(--acc-font-size-sm);
    color: var(--acc-color-danger);
  }

  .acc-field-error:not([hidden]) {
    display: block;
  }

  .acc-textarea {
    min-height: 180px;
    resize: vertical;
    line-height: var(--acc-line-height-relaxed);
  }

  /* Upload zone (legacy / other surfaces) */
  .acc-upload-zone {
    border: 1.5px dashed var(--acc-color-border);
    border-radius: var(--acc-radius-md);
    padding: var(--acc-space-6) var(--acc-space-4);
    text-align: center;
    color: var(--acc-color-text-muted);
    position: relative;
    cursor: pointer;
    background: var(--acc-color-bg-soft);
    transition:
      border-color var(--acc-transition-fast),
      background var(--acc-transition-fast),
      color var(--acc-transition-fast),
      box-shadow var(--acc-transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  @media (hover: hover) and (pointer: fine) {
    .acc-upload-zone:hover {
      border-color: var(--acc-color-accent);
      background: var(--acc-color-accent-softer);
    }
  }

  .acc-upload-zone:focus-within {
    outline: 2px solid var(--acc-color-accent);
    outline-offset: 2px;
    border-color: var(--acc-color-accent);
    box-shadow: 0 0 0 3px var(--acc-color-accent-soft);
  }

  .acc-upload-zone.is-dragover {
    border-color: var(--acc-color-accent);
    background: var(--acc-color-accent-soft);
  }

  .acc-upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .acc-upload-zone__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--acc-color-bg-elevated);
    color: var(--acc-color-accent);
    margin-bottom: 4px;
    box-shadow: var(--acc-shadow-soft);
  }

  .acc-upload-zone__text {
    font-size: var(--acc-font-size-sm);
    font-weight: var(--acc-font-weight-medium);
    color: var(--acc-color-text);
  }
  @media (hover: hover) and (pointer: fine) {
    .acc-upload-zone:hover .acc-upload-zone__text {
      color: var(--acc-color-text);
    }
  }

  .acc-upload-zone__hint {
    font-size: var(--acc-font-size-xs);
    color: var(--acc-color-text-subtle);
  }

  .acc-upload-list {
    list-style: none;
    margin: var(--acc-space-3) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--acc-space-3);
  }

  .acc-upload-list[hidden] {
    display: none !important;
  }

  .acc-upload-list li {
    flex: 1 1 90px;
    max-width: 140px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .acc-upload-list img {
    width: 100%;
    aspect-ratio: 4/3;
    height: auto;
    object-fit: cover;
    border-radius: var(--acc-radius-sm);
    display: block;
    border: 1px solid var(--acc-color-border);
  }

  .acc-link-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr auto;
    gap: var(--acc-space-2);
    align-items: center;
    margin-bottom: var(--acc-space-2);
  }

  @media (max-width: 768px) {
    .acc-link-row {
      grid-template-columns: 1fr auto;
      gap: var(--acc-space-2);
    }

    .acc-link-row [data-acc-link-url] {
      grid-column: 1;
    }

    .acc-link-row [data-acc-link-label] {
      grid-column: 1;
    }

    .acc-link-row [data-acc-remove-link] {
      grid-column: 2;
      grid-row: 1 / 3;
      align-self: center;
    }
  }

  .acc-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--acc-space-3);
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--acc-space-2);
    padding-top: var(--acc-space-4);
    border-top: 1px solid var(--acc-color-border);
  }

  /* Invalid field ring */
  .acc-composer-create__title[aria-invalid="true"],
  .acc-composer-create__body[aria-invalid="true"],
  .acc-input[aria-invalid="true"],
  .acc-textarea[aria-invalid="true"] {
    box-shadow: 0 0 0 2px var(--acc-color-danger-soft, rgba(185, 28, 28, 0.15));
  }

  .acc-input[aria-invalid="true"],
  .acc-textarea[aria-invalid="true"],
  .acc-select[aria-invalid="true"] {
    border-color: var(--acc-color-danger);
  }

  /* ─── Freelance Form Fields ──────────────────────────────── */
  .acc-freelance-fields {
    margin-top: var(--acc-space-3);
    padding: var(--acc-space-4);
    background: var(--acc-color-bg-soft);
    border: 1px solid var(--acc-color-border);
    border-radius: var(--acc-radius-card, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--acc-space-3);
  }

  .acc-freelance-fields[hidden] {
    display: none;
  }

  .acc-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .acc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--acc-space-3);
  }

  @media (max-width: 768px) {
    .acc-form-row {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .acc-form-label {
    font-size: var(--acc-font-size-sm);
    font-weight: var(--acc-font-weight-semibold);
    color: var(--acc-color-text);
  }

  .acc-required {
    color: var(--acc-color-danger);
  }

  /* Freelance fact strip + card polish */
  .acc-freelance-facts {
    display: grid;
    gap: var(--acc-space-3);
    padding: var(--acc-space-4);
    margin: 0 0 var(--acc-space-4);
    border-radius: var(--acc-radius-card, 16px);
    background: var(--acc-color-bg-soft, #f9fafb);
    border: 1px solid var(--acc-color-border, #d1d5db);
  }
  .acc-freelance-facts__item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--acc-space-1) var(--acc-space-3);
    align-items: baseline;
  }
  .acc-freelance-facts__label {
    font-size: var(--acc-font-size-xs);
    font-weight: var(--acc-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--acc-color-text-muted);
    min-width: 5.5rem;
  }
  .acc-freelance-facts__value {
    font-size: 0.95rem;
    color: var(--acc-color-text);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .acc-freelance-facts__item--block {
    flex-direction: column;
  }
  .acc-freelance-facts__contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--acc-space-2);
    align-items: center;
    padding-top: var(--acc-space-2);
    border-top: 1px solid var(--acc-color-border, #d1d5db);
  }
  .acc-badge--freelance {
    background: var(--acc-color-success-soft);
    color: var(--acc-color-success);
  }
  .acc-freelance-card__meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--acc-space-2) var(--acc-space-3);
    margin: var(--acc-space-1) 0 var(--acc-space-2);
    font-size: var(--acc-font-size-sm);
    color: var(--acc-color-text-muted);
  }
  .acc-freelance-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--acc-space-1);
  }
  .acc-chrome__chat-hint {
    font-size: 0.8rem;
    color: var(--acc-color-text-muted, #6b7280);
  }

  /* ─── Accessibility Utilities ────────────────────────────── */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }


.acc-composer-cat__trigger:focus-visible {
    outline: 2px solid var(--acc-color-accent);
    outline-offset: 2px;
}