/* OrigAI Anchor UI v1 */

.origai-anchor-trigger-v1 {
  appearance: none !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  background: rgba(15, 23, 42, .42) !important;
  color: rgba(226, 232, 240, .92) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

.origai-anchor-trigger-v1:hover {
  background: rgba(59, 130, 246, .16) !important;
  border-color: rgba(96, 165, 250, .38) !important;
}

.origai-anchor-selected-slot-v1 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-height: 32px !important;
  margin: 8px 0 !important;
  padding: 7px 9px !important;
  border: 1px dashed rgba(148, 163, 184, .28) !important;
  border-radius: 16px !important;
  background: rgba(15, 23, 42, .18) !important;
  color: rgba(203, 213, 225, .78) !important;
  font-size: 12px !important;
  box-sizing: border-box !important;
}

body:not([data-page="pc"]) .origai-anchor-selected-slot-v1,
body[data-page="mobile"] .origai-anchor-selected-slot-v1 {
  margin: 2px 12px 7px !important;
  padding: 4px 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.origai-anchor-slot-placeholder-v1 {
  color: rgba(148, 163, 184, .72) !important;
}

.origai-selected-anchor-chip {
  appearance: none !important;
  border: 1px solid rgba(96, 165, 250, .34) !important;
  border-radius: 999px !important;
  padding: 5px 9px !important;
  background: rgba(37, 99, 235, .14) !important;
  color: rgba(219, 234, 254, .96) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body:not([data-page="pc"]) .origai-selected-anchor-chip,
body[data-page="mobile"] .origai-selected-anchor-chip {
  background: rgba(37, 99, 235, .10) !important;
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, .22) !important;
}

.origai-anchor-mask-v1 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482500 !important;
  display: none !important;
  background: rgba(2, 6, 23, .46) !important;
  backdrop-filter: blur(10px) !important;
}

.origai-anchor-mask-v1.show {
  display: block !important;
}

.origai-anchor-drawer-v1 {
  position: fixed !important;
  right: 18px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: min(430px, calc(100vw - 36px)) !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  border-radius: 28px !important;
  background: rgba(15, 23, 42, .96) !important;
  color: #e5e7eb !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .32) !important;
  overflow: hidden !important;
}

body:not([data-page="pc"]) .origai-anchor-drawer-v1,
body[data-page="mobile"] .origai-anchor-drawer-v1 {
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  height: min(82dvh, 720px) !important;
  border-radius: 26px 26px 0 0 !important;
  background: rgba(255, 255, 255, .98) !important;
  color: #0f172a !important;
  border-color: rgba(203, 213, 225, .9) !important;
}

.origai-anchor-head-v1 {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 18px 18px 12px !important;
  border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
}

.origai-anchor-title-v1 {
  font-size: 18px !important;
  font-weight: 800 !important;
}

.origai-anchor-close-v1,
.origai-anchor-small-btn-v1 {
  appearance: none !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .06) !important;
  color: inherit !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

body:not([data-page="pc"]) .origai-anchor-close-v1,
body:not([data-page="pc"]) .origai-anchor-small-btn-v1,
body[data-page="mobile"] .origai-anchor-close-v1,
body[data-page="mobile"] .origai-anchor-small-btn-v1 {
  background: rgba(248, 250, 252, .9) !important;
  border-color: rgba(203, 213, 225, .9) !important;
}

.origai-anchor-body-v1 {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 14px 18px 18px !important;
}

.origai-anchor-toolbar-v1 {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.origai-anchor-list-v1 {
  display: grid !important;
  gap: 10px !important;
}

.origai-anchor-card-v1 {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  background: rgba(255, 255, 255, .055) !important;
  cursor: grab !important;
}

body:not([data-page="pc"]) .origai-anchor-card-v1,
body[data-page="mobile"] .origai-anchor-card-v1 {
  background: rgba(248, 250, 252, .92) !important;
  border-color: rgba(203, 213, 225, .86) !important;
}

.origai-anchor-card-title-v1 {
  font-size: 14px !important;
  font-weight: 780 !important;
  line-height: 1.3 !important;
  margin-bottom: 5px !important;
}

.origai-anchor-card-meta-v1 {
  color: rgba(148, 163, 184, .88) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body:not([data-page="pc"]) .origai-anchor-card-meta-v1,
body[data-page="mobile"] .origai-anchor-card-meta-v1 {
  color: #64748b !important;
}

.origai-anchor-card-actions-v1 {
  display: flex !important;
  gap: 6px !important;
}

.origai-anchor-detail-v1 {
  display: none !important;
  margin-top: 14px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  background: rgba(255, 255, 255, .045) !important;
}

.origai-anchor-detail-v1.show {
  display: block !important;
}

body:not([data-page="pc"]) .origai-anchor-detail-v1,
body[data-page="mobile"] .origai-anchor-detail-v1 {
  background: rgba(248, 250, 252, .92) !important;
  border-color: rgba(203, 213, 225, .86) !important;
}

.origai-anchor-field-v1 {
  display: grid !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}

.origai-anchor-field-v1 label {
  font-size: 12px !important;
  color: rgba(148, 163, 184, .92) !important;
}

body:not([data-page="pc"]) .origai-anchor-field-v1 label,
body[data-page="mobile"] .origai-anchor-field-v1 label {
  color: #64748b !important;
}

.origai-anchor-input-v1,
.origai-anchor-select-v1,
.origai-anchor-textarea-v1 {
  width: 100% !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 14px !important;
  background: rgba(15, 23, 42, .45) !important;
  color: #e5e7eb !important;
  padding: 10px 11px !important;
  outline: none !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
}

body:not([data-page="pc"]) .origai-anchor-input-v1,
body:not([data-page="pc"]) .origai-anchor-select-v1,
body:not([data-page="pc"]) .origai-anchor-textarea-v1,
body[data-page="mobile"] .origai-anchor-input-v1,
body[data-page="mobile"] .origai-anchor-select-v1,
body[data-page="mobile"] .origai-anchor-textarea-v1 {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(203, 213, 225, .95) !important;
}

.origai-anchor-textarea-v1 {
  min-height: 104px !important;
  resize: vertical !important;
}

.origai-anchor-actions-v1 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.origai-anchor-danger-v1 {
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, .36) !important;
}

body:not([data-page="pc"]) .origai-anchor-danger-v1,
body[data-page="mobile"] .origai-anchor-danger-v1 {
  color: #dc2626 !important;
}

.origai-anchor-empty-v1 {
  padding: 18px 12px !important;
  color: rgba(148, 163, 184, .9) !important;
  font-size: 13px !important;
  text-align: center !important;
}