/* Shared dropdown/menu primitives. Geometry and semantic states are global. */

.aidc-dropdown,
.aidc-menu {
  min-width: 180px;
  padding: 6px;
  background: var(--aidc-bg-popover);
  color: var(--aidc-text-primary);
  border: 1px solid var(--aidc-border-default);
  border-radius: var(--aidc-radius-button);
  box-shadow: var(--aidc-shadow-popover);
}

.aidc-menu__item {
  width: 100%;
  min-height: var(--aidc-menu-row-height);
  display: flex;
  align-items: center;
  gap: var(--aidc-control-gap);
  padding: 0 var(--aidc-control-padding-x);
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--aidc-radius-control);
  background: transparent;
  color: var(--aidc-text-secondary);
  font: inherit;
  font-size: var(--aidc-font-size-control);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease,color .15s ease,border-color .15s ease;
}

.aidc-menu__item:hover,
.aidc-menu__item:focus-visible {
  background: var(--aidc-btn-secondary-bg-hover);
  color: var(--aidc-text-primary);
  border-color: var(--aidc-border-subtle);
  outline: none;
}

.aidc-menu__item.is-active,
.aidc-menu__item[aria-selected="true"] {
  background: var(--aidc-control-selected-bg);
  border-color: var(--aidc-control-selected-border);
  color: var(--aidc-control-selected-text);
}

.aidc-menu__item:disabled,
.aidc-menu__item[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--aidc-control-disabled-bg);
  border-color: var(--aidc-control-disabled-border);
  color: var(--aidc-text-disabled);
  opacity: 1;
}

.aidc-menu__item--danger { color: var(--aidc-red-500); }

.aidc-menu__item--danger:hover,
.aidc-menu__item--danger:focus-visible {
  background: var(--aidc-status-danger-bg);
  border-color: var(--aidc-action-danger-border);
  color: var(--aidc-red-500);
}

.aidc-menu__separator { height:1px;margin:5px 4px;background:var(--aidc-border-subtle); }
.aidc-menu__label { padding:6px 10px 4px;color:var(--aidc-text-muted);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; }

/* Canonical portal-enhanced select contract.
   dropdown-portal.js owns positioning only; this file owns all visual states.
*/
.aidc-select { position:relative;display:inline-flex;min-width:0;max-width:100%; }
.aidc-select[hidden] { display:none; }

.aidc-select__native {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.aidc-select__btn {
  width:100%;
  height:var(--aidc-control-height-md);
  min-height:var(--aidc-control-height-md);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--aidc-control-gap);
  padding:0 var(--aidc-control-padding-x);
  box-sizing:border-box;
  border:1px solid var(--aidc-border-default);
  border-radius:var(--aidc-radius-control);
  background:var(--aidc-bg-elevated);
  color:var(--aidc-text-primary);
  box-shadow:none;
  font:inherit;
  font-size:var(--aidc-font-size-control);
  text-align:left;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease;
}

.aidc-select--sm .aidc-select__btn{height:var(--aidc-control-height-sm);min-height:var(--aidc-control-height-sm)}
.aidc-select--lg .aidc-select__btn{height:var(--aidc-control-height-lg);min-height:var(--aidc-control-height-lg)}

.aidc-select__btn::after {
  content:"" !important;
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-right:1.5px solid var(--aidc-text-muted);
  border-bottom:1.5px solid var(--aidc-text-muted);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .15s ease;
}

.aidc-select__btn:hover {
  background:var(--aidc-workspace-control-hover);
  border-color:var(--aidc-border-strong);
}

.aidc-select__btn:focus-visible,
.aidc-select__btn[aria-expanded="true"] {
  outline:none;
  border-color:var(--aidc-action-focus);
  box-shadow:0 0 0 3px var(--aidc-action-focus-ring);
}

.aidc-select__btn[aria-expanded="true"]::after { transform:rotate(225deg) translate(-1px,-1px); }

.aidc-select__btn:disabled,
.aidc-select__btn[aria-disabled="true"]{
  cursor:not-allowed;
  background:var(--aidc-control-disabled-bg);
  border-color:var(--aidc-control-disabled-border);
  color:var(--aidc-text-disabled);
  opacity:1;
}
.aidc-select__btn:disabled::after,
.aidc-select__btn[aria-disabled="true"]::after{border-color:var(--aidc-text-disabled)}

.aidc-select__menu {
  display:none;
  position:fixed;
  min-width:180px;
  max-width:min(360px,calc(100vw - 16px));
  max-height:min(360px,calc(100dvh - 16px));
  overflow-y:auto;
  overflow-x:hidden;
  padding:6px;
  border:1px solid var(--aidc-border-default);
  border-radius:var(--aidc-radius-button);
  background:var(--aidc-bg-popover)!important;
  color:var(--aidc-text-primary);
  box-shadow:var(--aidc-shadow-popover);
  z-index:1000002;
  scrollbar-color:var(--aidc-scrollbar-thumb) transparent;
}

.aidc-select__option {
  width:100%;
  min-height:var(--aidc-menu-row-height);
  display:flex;
  align-items:center;
  gap:var(--aidc-control-gap);
  box-sizing:border-box;
  padding:0 var(--aidc-control-padding-x);
  border:1px solid transparent;
  border-radius:var(--aidc-radius-control);
  background:transparent;
  color:var(--aidc-text-secondary);
  font-size:var(--aidc-font-size-control);
  white-space:normal;
  overflow-wrap:anywhere;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}

.aidc-select__option:hover,
.aidc-select__option:focus-visible {
  outline:none;
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-subtle);
  color:var(--aidc-text-primary);
}

.aidc-select__option.is-selected,
.aidc-select__option[aria-selected="true"] {
  background:var(--aidc-control-selected-bg);
  border-color:var(--aidc-control-selected-border);
  color:var(--aidc-control-selected-text);
}

.aidc-select__option[aria-disabled="true"]{
  cursor:not-allowed;
  color:var(--aidc-text-disabled);
  background:var(--aidc-control-disabled-bg);
  opacity:1;
}

.aidc-select__group-label {
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px 5px;
  color:var(--aidc-text-muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
}

.aidc-select__group-arrow { color:var(--aidc-text-muted);font-size:10px; }
.aidc-select__group-items.is-collapsed { display:none; }
.aidc-select__option--grouped { padding-left:18px; }
.aidc-select__option-icon { width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;color:currentColor; }
.aidc-select__option-icon svg { width:18px;height:18px;display:block; }

.aidc-select__menu::-webkit-scrollbar { width:var(--aidc-scrollbar-size); }
.aidc-select__menu::-webkit-scrollbar-thumb { background:var(--aidc-scrollbar-thumb);border-radius:999px; }


/* The main chat composer has two independent attachment owners:
   .chat-attached-files (pending uploads) and .chat-image-refs (quoted saved
   images). Their separate block wrappers used to stack image cards vertically.
   Flatten only PRESENTATION wrappers while image mode is active so the shared
   150px reference-card contract governs one flowing row. The DOM/handlers
   remain under their original owners. */
.chat-composer-reference-strip {
  display: contents;
}
body .chat-input-area--image-mode .chat-composer-reference-strip {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: var(--aidc-reference-card-gap, 10px);
  width: 100%;
  max-width: 780px;
  max-height: min(360px, 44dvh);
  margin: 0 auto 8px;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
/* After the last reference is removed the adapter remains inert, with no
   phantom empty attachment row or extra composer height. */
body .chat-input-area--image-mode .chat-composer-reference-strip:not(:has(.chat-attached-file, .chat-image-refs__item)) {
  display: none !important;
}
body .chat-input-area--image-mode .chat-composer-reference-strip > .chat-attached-files,
body .chat-input-area--image-mode .chat-composer-reference-strip > .chat-image-refs,
body .chat-input-area--image-mode .chat-composer-reference-strip .chat-image-refs__list {
  display: contents !important;
}
body .chat-input-area--image-mode .chat-composer-reference-strip .chat-image-refs__label {
  order: -1;
  flex: 0 0 100%;
  margin: 0;
  min-width: 0;
}
body .chat-input-area--image-mode .chat-composer-reference-strip :is(
  .chat-attached-file.aidc-reference-card,
  .chat-image-refs__item.aidc-reference-card
) {
  flex: 0 0 var(--aidc-reference-card-size, 150px);
  max-width: 100%;
  margin: 0;
}

/* Unified Image Engine composer, using the platform theme and existing controls. */
.chat-image-engine-controls { min-width: 0; }
.chat-image-engine-controls[hidden] { display: none !important; }
.chat-image-generate-label,
.chat-image-generate-price { display: none; }
.chat-input-area { container: aidc-image-composer / inline-size; }

body .chat-input-area--composer .chat-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 12px 16px;
  align-items: stretch;
  padding: 14px;
  box-sizing: border-box;
  border: 1px solid var(--aidc-border-default);
  border-radius: 22px;
  background: var(--aidc-bg-card);
  box-shadow: var(--aidc-shadow-card);
}
body .chat-input-area--composer .chat-input-wrap:focus-within {
  border-color: var(--aidc-action-primary-from);
}
body .chat-input-area--composer .chat-input-wrap > :is(.chat-input, .chat-prompt-field) {
  grid-area: 1 / 1 / 2 / 3;
  min-width: 0;
  width: 100%;
  min-height: 70px;
  box-sizing: border-box;
}
body #chatRoot .chat-input-area--composer .chat-input-wrap .chat-input {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 8px 4px;
  box-shadow: none;
  outline: none !important;
  outline-offset: 0 !important;
  font-size: 15px;
  line-height: 1.5;
}
body #chatRoot .chat-input-area--composer .chat-prompt-field {
  background: transparent;
  border: 0;
  box-shadow: none;
}
body .chat-input-area--image-mode .chat-attach-hint { display: none; }
.chat-image-composer-toolbar {
  grid-area: 2 / 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.chat-image-composer-toolbar > :is(.chat-attach-btn, .chat-mode-btn, .chat-expand-btn, .chat-mic-btn) {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: var(--aidc-radius-control);
}
.chat-image-composer-toolbar .chat-mode-btn__label { display: none; }
.chat-image-composer-toolbar :is(.chat-effort-select--compact,.chat-effort-trigger) {
  height: 40px;
  min-height: 40px;
  flex-shrink: 0;
}
.chat-image-composer-toolbar > .chat-attach-btn:has(.chat-image-reference-limit) { flex-basis: auto; width: auto; gap: 6px; padding: 0 10px; }
.chat-image-reference-limit { white-space: nowrap; font-size: 11px; font-weight: 600; }
.chat-image-composer-toolbar .chat-image-engine-controls { display: contents; }
.chat-image-engine-settings {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}
.chat-image-engine-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 10px;
  border: 1px solid var(--aidc-border-subtle);
  border-radius: var(--aidc-radius-control);
  background: var(--aidc-bg-elevated);
  color: var(--aidc-text-primary);
}
.chat-image-engine-field:focus-within { border-color: var(--aidc-action-primary-from); }
.chat-image-engine-field__label { display: none; }
.chat-image-engine-field__select {
  min-width: 0;
  max-width: 190px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.chat-image-engine-field__select:disabled { cursor: not-allowed; opacity: .55; }
.chat-image-engine-field__select option { background: var(--aidc-bg-elevated); color: var(--aidc-text-primary); }
.chat-image-engine-quote {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  color: var(--aidc-text-secondary);
  font-size: 11px;
  line-height: 1.3;
}
.chat-image-engine-quote[hidden] { display: none !important; }
body .chat-input-area--image-mode .chat-input-wrap:has(.chat-image-engine-quote[data-state="error"]) { padding-bottom: 48px; }
.chat-image-engine-quote[data-state="error"] {
  left: 14px;
  right: 14px;
  bottom: 8px;
  width: auto;
  height: auto;
  max-height: 30px;
  clip-path: none;
}
/* Telegram's legacy composer uses important flex/order declarations. */
body.chat-in-telegram .chat-input-area--composer .chat-input-wrap {
  display: grid !important;
  align-items: stretch !important;
  gap: 12px 16px !important;
  padding: 14px !important;
}
body.chat-in-telegram .chat-input-area--composer .chat-input-wrap::after { content: none !important; display: none !important; }
body.chat-in-telegram .chat-image-composer-toolbar > * { order: 0 !important; }
body.chat-in-telegram .chat-input-area--composer .chat-input-wrap .chat-input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.chat-in-telegram .chat-input-area--image-mode .chat-input-wrap:has(.chat-image-engine-quote[data-state="error"]) { padding-bottom: 48px !important; }
body .chat-input-area--image-mode .chat-input-wrap > .chat-send-btn {
  grid-area: 1 / 2 / 3 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 84px;
  min-height: 84px;
  align-self: end;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 16px;
  background: var(--aidc-btn-primary-bg);
  color: var(--aidc-btn-primary-text);
}
body .chat-input-area--image-mode .chat-send-btn__icon { display: none; }
body .chat-input-area--image-mode .chat-image-generate-label { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
body .chat-input-area--image-mode .chat-image-generate-price { display: block; font-size: 18px; font-weight: 700; line-height: 1.25; max-width: 100%; text-align: center; }

@container aidc-image-composer (width < 620px) {
  body .chat-input-area--composer .chat-input-wrap { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 10px; }
  body .chat-input-area--composer .chat-image-composer-toolbar { grid-area: 2 / 1; }
  body .chat-input-area--composer:not(.chat-input-area--image-mode) .chat-input-wrap { grid-template-columns: minmax(0, 1fr) 40px; }
  body .chat-input-area--image-mode .chat-input-wrap > .chat-send-btn {
    grid-area: 3 / 1;
    flex-direction: row;
    min-height: 56px;
    height: 56px;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--aidc-radius-button);
  }
  body .chat-input-area--image-mode .chat-image-generate-price { min-width: 0; max-width: 50%; font-size: 16px; line-height: 1.2; }
  body.chat-in-telegram .chat-input-area--composer .chat-input-wrap { padding: 12px !important; gap: 10px !important; }
}

/* Both modes share one prompt surface with actions along its bottom edge. */
body .chat-input-area--image-mode .chat-input-wrap { grid-template-columns: minmax(0, 1fr) 148px; }
body .chat-input-area--image-mode .chat-input-wrap > :is(.chat-input, .chat-prompt-field) { grid-area: 1 / 1; }
body .chat-input-area--composer:not(.chat-input-area--image-mode) .chat-input-wrap > .chat-send-btn {
  grid-area: 2 / 2;
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
}
#chatRoot .chat-input-area--composer .chat-input-wrap > :is(.chat-input, .chat-prompt-field),
#chatRoot .chat-image-composer-toolbar > * { order: 0 !important; }
/* Geometry and visibility only; menu visuals use the canonical select. */
body .chat-image-engine-field:has(.chat-image-select__trigger) { padding: 0; border: 0; background: transparent; }
body .chat-image-engine-field.aidc-select { width: auto; flex: 0 0 auto; }
.chat-image-select__dropdown:not(.open) { display: none; }
@container aidc-image-composer (width < 620px) {
  body .chat-input-area--image-mode .chat-input-wrap { grid-template-columns: minmax(0, 1fr); }
  body .chat-input-area--composer .chat-input-wrap > :is(.chat-input, .chat-prompt-field) { grid-area: 1 / 1 / 2 / -1; }
}