import { StyleSheet } from 'react-native';
import { createThemedStyles } from '../../theme';

export const editorShellStyles = createThemedStyles({
  modalRoot: {
    backgroundColor: '#000000',
    flex: 1,
  },
  modalTopBar: {
    alignItems: 'center',
    borderBottomColor: '#1F1F23',
    borderBottomWidth: 1,
    flexDirection: 'row',
    minHeight: 64,
    paddingHorizontal: 16,
    paddingVertical: 10,
  },
  closeButton: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 20,
    borderWidth: 1,
    height: 40,
    justifyContent: 'center',
    width: 40,
  },
  modalTitleWrap: {
    alignItems: 'center',
    flex: 1,
    paddingHorizontal: 12,
  },
  modalTitle: {
    color: '#F4F4F5',
    fontSize: 17,
    fontWeight: '800',
  },
  modalScrollContent: {
    paddingBottom: 40,
  },
  stickyTabsWrap: {
    backgroundColor: '#000000',
    borderBottomColor: '#1F1F23',
    borderBottomWidth: 1,
    paddingBottom: 10,
    paddingTop: 4,
  },
  tabsContent: {
    paddingHorizontal: 16,
  },
  // Settings-modal nav: styled as DS sidebar-nav items (web SettingsModal nav
  // parity), not pills — rounded-lg, no border, transparent until active, with a
  // subtle active surface + medium-weight label in the default foreground.
  segmentButton: {
    backgroundColor: 'transparent',
    borderRadius: 8,
    height: 36,
    justifyContent: 'center',
    marginRight: 4,
    paddingHorizontal: 12,
  },
  segmentButtonActive: {
    // #1B1B1B → DS `muted` (Stone-100 light / Neutral-800 dark) — the native
    // sidebar-active surface, mirroring the web nav's "matches sidebar-active".
    backgroundColor: '#1B1B1B',
  },
  segmentLabel: {
    color: '#F7F7F7',
    fontSize: 14,
    fontWeight: '600',
  },
  segmentLabelActive: {
    color: '#F7F7F7',
    fontWeight: '700',
  },
  settingsStack: {
    paddingHorizontal: 20,
    paddingTop: 14,
  },
  baseCard: {
    alignItems: 'center',
    backgroundColor: '#111111',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    flexDirection: 'row',
    marginBottom: 14,
    padding: 16,
  },
  baseIcon: {
    alignItems: 'center',
    backgroundColor: '#21110A',
    borderColor: '#4A2413',
    borderRadius: 16,
    borderWidth: 1,
    height: 44,
    justifyContent: 'center',
    marginRight: 12,
    width: 44,
  },
  panel: {
    backgroundColor: '#0B0B0C',
    borderColor: '#242427',
    borderRadius: 8,
    borderWidth: 1,
    marginBottom: 14,
    overflow: 'visible',
  },
  panelHeader: {
    alignItems: 'center',
    borderBottomColor: '#1F1F23',
    borderBottomWidth: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 14,
  },
  panelTitle: {
    color: '#F4F4F5',
    fontSize: 15,
    fontWeight: '700',
  },
  panelSubtitle: {
    color: '#A1A1AA',
    fontSize: 13,
    fontWeight: '600',
    lineHeight: 18,
    marginTop: 3,
  },
  countBadge: {
    backgroundColor: '#1F1F23',
    borderRadius: 11,
    color: '#F4F4F5',
    fontSize: 12,
    fontWeight: '900',
    minWidth: 22,
    overflow: 'hidden',
    paddingHorizontal: 7,
    paddingVertical: 3,
    textAlign: 'center',
  },
  connectorList: {
    padding: 10,
  },
  settingsList: {
    padding: 10,
  },
  automationList: {
    padding: 10,
  },
  automationErrorBanner: {
    alignItems: 'center',
    backgroundColor: '#21110A',
    borderBottomColor: '#4A2413',
    borderBottomWidth: 1,
    flexDirection: 'row',
    gap: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
  },
  automationErrorText: {
    color: '#FCA5A5',
    flex: 1,
    fontSize: 12,
    fontWeight: '700',
  },
  automationRetryButton: {
    alignItems: 'center',
    backgroundColor: '#1F1F23',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    flexDirection: 'row',
    gap: 5,
    paddingHorizontal: 9,
    paddingVertical: 6,
  },
  automationRetryText: {
    color: '#F4F4F5',
    fontSize: 12,
    fontWeight: '800',
  },
  automationTabs: {
    flexDirection: 'row',
    gap: 8,
    paddingHorizontal: 10,
    paddingTop: 10,
  },
  automationTabButton: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    flex: 1,
    minHeight: 34,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  automationTabButtonActive: {
    backgroundColor: '#F4F4F5',
    borderColor: '#F4F4F5',
  },
  automationTabText: {
    color: '#A1A1AA',
    fontSize: 12,
    fontWeight: '900',
  },
  automationTabTextActive: {
    color: '#111111',
  },
  automationCard: {
    alignItems: 'flex-start',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    flexDirection: 'row',
    marginBottom: 9,
    paddingHorizontal: 12,
    paddingVertical: 12,
  },
  automationIcon: {
    alignItems: 'center',
    backgroundColor: '#21110A',
    borderColor: '#4A2413',
    borderRadius: 12,
    borderWidth: 1,
    height: 38,
    justifyContent: 'center',
    marginRight: 11,
    width: 38,
  },
  automationText: {
    flex: 1,
    minWidth: 0,
  },
  automationName: {
    color: '#F4F4F5',
    flexShrink: 1,
    fontSize: 14,
    fontWeight: '900',
    marginRight: 7,
  },
  automationTrigger: {
    color: '#E4E4E7',
    fontSize: 12,
    fontWeight: '700',
    lineHeight: 17,
    marginTop: 5,
  },
  automationDescription: {
    color: '#A1A1AA',
    fontSize: 12,
    fontWeight: '600',
    lineHeight: 17,
    marginTop: 4,
  },
  automationMetaRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 6,
    marginTop: 9,
  },
  automationMeta: {
    backgroundColor: '#1F1F23',
    borderRadius: 8,
    color: '#C7C7CC',
    fontSize: 10,
    fontWeight: '900',
    overflow: 'hidden',
    paddingHorizontal: 7,
    paddingVertical: 4,
  },
  automationRuns: {
    color: '#71717A',
    fontSize: 11,
    fontWeight: '700',
    marginTop: 8,
  },
  automationCreditBadge: {
    alignItems: 'center',
    backgroundColor: '#1F1F23',
    borderRadius: 8,
    flexDirection: 'row',
    maxWidth: '100%',
    paddingHorizontal: 7,
    paddingVertical: 4,
  },
  automationCreditText: {
    color: '#C7C7CC',
    fontSize: 10,
    fontWeight: '900',
    marginLeft: 4,
  },
  automationActionRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 6,
    marginTop: 11,
  },
  automationActionButton: {
    alignItems: 'center',
    backgroundColor: '#242427',
    borderColor: '#353539',
    borderRadius: 8,
    borderWidth: 1,
    flexDirection: 'row',
    minHeight: 30,
    paddingHorizontal: 8,
  },
  automationActionButtonDanger: {
    backgroundColor: '#351516',
    borderColor: '#552022',
  },
  automationActionButtonDisabled: {
    opacity: 0.65,
  },
  automationActionText: {
    color: '#F4F4F5',
    fontSize: 11,
    fontWeight: '900',
    marginLeft: 5,
  },
  automationActionTextDanger: {
    color: '#FCA5A5',
  },
  automationDetailsPanel: {
    backgroundColor: '#101012',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    marginTop: 11,
    paddingHorizontal: 11,
    paddingVertical: 10,
  },
  automationDetailBlock: {
    marginBottom: 10,
  },
  automationDetailLabel: {
    color: '#71717A',
    fontSize: 10,
    fontWeight: '900',
    letterSpacing: 0,
    marginBottom: 4,
    textTransform: 'uppercase',
  },
  automationDetailValue: {
    color: '#E4E4E7',
    fontSize: 12,
    fontWeight: '700',
    lineHeight: 17,
  },
  automationDetailValueMono: {
    fontFamily: 'Courier',
    fontSize: 11,
    lineHeight: 16,
  },
  automationDetailStats: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
    marginTop: 1,
  },
  automationDetailStatText: {
    color: '#C7C7CC',
    fontSize: 11,
    fontWeight: '800',
  },
  automationDetailSuccess: {
    color: '#34D399',
    fontSize: 11,
    fontWeight: '800',
  },
  automationDetailFailure: {
    color: '#FCA5A5',
    fontSize: 11,
    fontWeight: '800',
  },
  automationDetailMuted: {
    color: '#8E8E93',
    fontSize: 11,
    fontWeight: '700',
    lineHeight: 16,
    marginTop: 8,
  },
  automationStatusBadge: {
    borderRadius: 10,
    paddingHorizontal: 7,
    paddingVertical: 3,
  },
  automationStatusActive: {
    backgroundColor: '#11251A',
  },
  automationStatusInactive: {
    backgroundColor: '#242427',
  },
  automationStatusText: {
    fontSize: 10,
    fontWeight: '900',
  },
  automationStatusTextActive: {
    color: '#34D399',
  },
  automationStatusTextInactive: {
    color: '#A1A1AA',
  },
  settingsRow: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    flexDirection: 'row',
    marginBottom: 9,
    minHeight: 66,
    paddingHorizontal: 12,
    paddingVertical: 10,
  },
  settingsRowIcon: {
    alignItems: 'center',
    backgroundColor: '#1F1F23',
    borderRadius: 12,
    height: 40,
    justifyContent: 'center',
    marginRight: 12,
    width: 40,
  },
  settingsRowIconDanger: {
    backgroundColor: '#351516',
  },
  settingsRowText: {
    flex: 1,
    minWidth: 0,
  },
  settingsRowTitle: {
    color: '#F4F4F5',
    fontSize: 14,
    fontWeight: '900',
  },
  settingsRowBody: {
    color: '#A1A1AA',
    fontSize: 12,
    fontWeight: '600',
    lineHeight: 17,
    marginTop: 3,
  },
  settingsRowStatus: {
    backgroundColor: '#242427',
    borderRadius: 10,
    color: '#C7C7CC',
    fontSize: 10,
    fontWeight: '900',
    marginLeft: 8,
    overflow: 'hidden',
    paddingHorizontal: 7,
    paddingVertical: 4,
  },
  settingsRowStatusDanger: {
    backgroundColor: '#351516',
    color: '#FCA5A5',
  },
  subtabsContent: {
    paddingHorizontal: 10,
    paddingTop: 10,
  },
  subtabButton: {
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 999,
    borderWidth: 1,
    height: 32,
    justifyContent: 'center',
    marginRight: 7,
    paddingHorizontal: 11,
  },
  subtabButtonActive: {
    backgroundColor: '#F4F4F5',
    borderColor: '#F4F4F5',
  },
  subtabLabel: {
    color: '#A1A1AA',
    fontSize: 12,
    fontWeight: '900',
  },
  subtabLabelActive: {
    color: '#111111',
  },
  connectorSearchWrap: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    flexDirection: 'row',
    height: 42,
    marginHorizontal: 10,
    marginTop: 10,
    paddingHorizontal: 11,
  },
  connectorSearchInput: {
    color: '#F4F4F5',
    flex: 1,
    fontSize: 14,
    fontWeight: '700',
    height: 40,
    marginLeft: 8,
    padding: 0,
  },
  fileIconButton: {
    alignItems: 'center',
    backgroundColor: '#1F1F23',
    borderColor: '#2A2A2A',
    borderRadius: 11,
    borderWidth: 1,
    height: 36,
    justifyContent: 'center',
    width: 36,
  },
  fileSearchWrap: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    flexDirection: 'row',
    height: 42,
    marginHorizontal: 10,
    marginTop: 10,
    paddingHorizontal: 11,
  },
  fileSearchInput: {
    color: '#F4F4F5',
    flex: 1,
    fontSize: 14,
    fontWeight: '700',
    height: 40,
    marginLeft: 8,
    padding: 0,
  },
  fileStatusError: {
    color: '#FCA5A5',
    fontSize: 12,
    fontWeight: '700',
    lineHeight: 17,
    marginHorizontal: 12,
    marginTop: 10,
  },
  fileStatusText: {
    color: '#34D399',
    fontSize: 12,
    fontWeight: '700',
    lineHeight: 17,
    marginHorizontal: 12,
    marginTop: 10,
  },
  fileStatusBanner: {
    alignItems: 'flex-start',
    backgroundColor: 'rgba(251, 191, 36, 0.11)',
    borderColor: 'rgba(251, 191, 36, 0.24)',
    borderRadius: 8,
    borderWidth: 1,
    flexDirection: 'row',
    gap: 8,
    marginHorizontal: 10,
    marginTop: 10,
    paddingHorizontal: 11,
    paddingVertical: 10,
  },
  fileStatusBannerText: {
    color: '#FDE68A',
    flex: 1,
    fontSize: 12,
    fontWeight: '800',
    lineHeight: 17,
  },
  fileTreeWrap: {
    paddingHorizontal: 8,
    paddingVertical: 10,
  },
  fileTreeRow: {
    alignItems: 'center',
    borderRadius: 8,
    flexDirection: 'row',
    minHeight: 36,
    paddingRight: 9,
  },
  fileFolderName: {
    color: '#F4F4F5',
    flex: 1,
    fontSize: 13,
    fontWeight: '800',
    marginLeft: 7,
  },
  fileFolderCount: {
    color: '#71717A',
    fontSize: 11,
    fontWeight: '800',
    marginLeft: 6,
  },
  fileName: {
    color: '#E4E4E7',
    flex: 1,
    fontSize: 13,
    fontWeight: '700',
    marginLeft: 8,
  },
  filePath: {
    color: '#71717A',
    fontSize: 11,
    fontWeight: '700',
    marginTop: 2,
  },
  fileRowText: {
    flex: 1,
    marginLeft: 8,
    minWidth: 0,
  },
  fileSearchRow: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    flexDirection: 'row',
    marginBottom: 8,
    minHeight: 54,
    paddingHorizontal: 11,
    paddingVertical: 9,
  },
  fileModalRoot: {
    backgroundColor: '#000000',
    flex: 1,
  },
  fileModalHeader: {
    alignItems: 'center',
    borderBottomColor: '#1F1F23',
    borderBottomWidth: 1,
    flexDirection: 'row',
    minHeight: 64,
    paddingHorizontal: 12,
    paddingVertical: 10,
  },
  fileModalTitleWrap: {
    flex: 1,
    marginHorizontal: 10,
    minWidth: 0,
  },
  fileModalTitle: {
    color: '#F4F4F5',
    fontSize: 15,
    fontWeight: '900',
  },
  fileModalPath: {
    color: '#8E8E93',
    fontSize: 11,
    fontWeight: '700',
    marginTop: 2,
  },
  fileSaveButton: {
    alignItems: 'center',
    backgroundColor: '#F4F4F5',
    borderRadius: 8,
    flexDirection: 'row',
    minHeight: 36,
    paddingHorizontal: 11,
  },
  fileSaveText: {
    color: '#111111',
    fontSize: 12,
    fontWeight: '900',
    marginLeft: 5,
  },
  fileReadOnlyBadge: {
    backgroundColor: '#242427',
    borderRadius: 10,
    paddingHorizontal: 9,
    paddingVertical: 6,
  },
  fileReadOnlyText: {
    color: '#A1A1AA',
    fontSize: 11,
    fontWeight: '900',
  },
  fileEditorBody: {
    flex: 1,
  },
  fileSourceInput: {
    backgroundColor: '#050505',
    color: '#F4F4F5',
    flex: 1,
    fontFamily: 'Courier',
    fontSize: 12,
    lineHeight: 18,
    paddingHorizontal: 14,
    paddingVertical: 14,
  },
  fileSourceInputReadOnly: {
    color: '#C7C7CC',
  },
  fileImagePreviewWrap: {
    alignItems: 'center',
    flexGrow: 1,
    justifyContent: 'center',
    padding: 16,
  },
  fileImagePreview: {
    height: 420,
    width: '100%',
  },
  fileUnsupportedPreview: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 30,
  },
  fileUnsupportedTitle: {
    color: '#F4F4F5',
    fontSize: 16,
    fontWeight: '900',
    marginTop: 12,
  },
  fileUnsupportedBody: {
    color: '#A1A1AA',
    fontSize: 13,
    fontWeight: '600',
    lineHeight: 19,
    marginTop: 7,
    textAlign: 'center',
  },
  connectorCard: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    flexDirection: 'row',
    marginBottom: 9,
    minHeight: 60,
    overflow: 'visible',
    paddingHorizontal: 12,
    paddingVertical: 10,
    position: 'relative',
    zIndex: 1,
  },
  connectorCardMenuOpen: {
    zIndex: 20,
  },
  connectorIcon: {
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    borderColor: '#2A2A2A',
    borderRadius: 10,
    borderWidth: 1,
    height: 36,
    justifyContent: 'center',
    marginRight: 11,
    width: 36,
  },
  connectorSvgIcon: {
    position: 'absolute',
  },
  connectorIconImage: {
    height: 22,
    width: 22,
  },
  connectorIconFallbackText: {
    color: '#111827',
    fontSize: 11,
    fontWeight: '900',
  },
  connectorText: {
    flex: 1,
    minWidth: 0,
  },
  inlineTitleRow: {
    alignItems: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  connectorName: {
    color: '#F4F4F5',
    flexShrink: 1,
    fontSize: 13,
    fontWeight: '800',
    marginRight: 7,
  },
  connectorSubtitle: {
    color: '#A1A1AA',
    fontSize: 14,
    fontWeight: '600',
    lineHeight: 17,
    marginTop: 3,
  },
  activeBadge: {
    alignItems: 'center',
    backgroundColor: '#11251A',
    borderRadius: 10,
    flexDirection: 'row',
    paddingHorizontal: 7,
    paddingVertical: 3,
  },
  activeBadgeText: {
    color: '#34D399',
    fontSize: 10,
    fontWeight: '900',
    marginLeft: 3,
  },
  statusBadge: {
    alignItems: 'center',
    borderRadius: 10,
    flexDirection: 'row',
    paddingHorizontal: 7,
    paddingVertical: 3,
  },
  statusBadgeActive: {
    backgroundColor: '#11251A',
  },
  statusBadgeWarning: {
    backgroundColor: '#351516',
  },
  statusBadgeDisconnected: {
    backgroundColor: '#242427',
  },
  statusBadgeText: {
    fontSize: 10,
    fontWeight: '900',
    marginLeft: 3,
    textTransform: 'capitalize',
  },
  statusBadgeTextActive: {
    color: '#34D399',
  },
  statusBadgeTextWarning: {
    color: '#FCA5A5',
  },
  statusBadgeTextDisconnected: {
    color: '#A1A1AA',
  },
  accessBadge: {
    borderRadius: 10,
    marginLeft: 2,
    paddingHorizontal: 7,
    paddingVertical: 3,
  },
  accessBadgeReadOnly: {
    backgroundColor: '#102036',
  },
  accessBadgeFull: {
    backgroundColor: '#11251A',
  },
  accessBadgeText: {
    fontSize: 10,
    fontWeight: '900',
  },
  accessBadgeTextReadOnly: {
    color: '#93C5FD',
  },
  accessBadgeTextFull: {
    color: '#34D399',
  },
  connectorActions: {
    flexDirection: 'row',
    marginLeft: 8,
  },
  moreButton: {
    alignItems: 'center',
    backgroundColor: '#1F1F23',
    borderColor: '#2A2A2A',
    borderRadius: 10,
    borderWidth: 1,
    height: 34,
    justifyContent: 'center',
    width: 34,
  },
  connectorMenu: {
    backgroundColor: '#111113',
    borderColor: '#2A2A2A',
    borderRadius: 12,
    borderWidth: 1,
    elevation: 8,
    minWidth: 178,
    paddingVertical: 5,
    position: 'absolute',
    right: 10,
    shadowColor: '#000000',
    shadowOffset: { height: 8, width: 0 },
    shadowOpacity: 0.35,
    shadowRadius: 14,
    top: 48,
    zIndex: 40,
  },
  menuAction: {
    paddingHorizontal: 12,
    paddingVertical: 9,
  },
  menuActionText: {
    color: '#E4E4E7',
    fontSize: 12,
    fontWeight: '700',
  },
  menuActionTextDestructive: {
    color: '#FCA5A5',
  },
  menuNote: {
    alignItems: 'center',
    borderTopColor: '#2A2A2A',
    borderTopWidth: 1,
    flexDirection: 'row',
    gap: 6,
    marginTop: 3,
    paddingHorizontal: 12,
    paddingTop: 9,
    paddingBottom: 6,
  },
  menuNoteText: {
    color: '#8E8E93',
    flex: 1,
    fontSize: 12,
    fontWeight: '700',
    minWidth: 0,
  },
  webOnlyNote: {
    alignItems: 'center',
    backgroundColor: '#1F1F23',
    borderRadius: 8,
    flexDirection: 'row',
    gap: 5,
    paddingHorizontal: 10,
    paddingVertical: 6,
  },
  webOnlyNoteText: {
    color: '#A1A1AA',
    fontSize: 12,
    fontWeight: '900',
  },
  connectingWrap: {
    alignItems: 'center',
    flexDirection: 'row',
    flexShrink: 0,
    gap: 8,
    marginLeft: 8,
  },
  cancelConnectButton: {
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    paddingHorizontal: 10,
    paddingVertical: 6,
  },
  cancelConnectText: {
    color: '#E4E4E7',
    fontSize: 12,
    fontWeight: '800',
  },
  iconActionButton: {
    alignItems: 'center',
    backgroundColor: '#1F1F23',
    borderRadius: 17,
    height: 34,
    justifyContent: 'center',
    marginLeft: 7,
    width: 34,
  },
  disabledAction: {
    opacity: 0.4,
  },
  connectButton: {
    alignItems: 'center',
    backgroundColor: '#F4F4F5',
    borderRadius: 8,
    flexDirection: 'row',
    height: 34,
    justifyContent: 'center',
    marginLeft: 10,
    paddingLeft: 13,
    paddingRight: 10,
  },
  connectButtonText: {
    color: '#111111',
    fontSize: 12,
    fontWeight: '900',
    marginRight: 3,
  },
  availableActions: {
    alignItems: 'flex-end',
    flexShrink: 0,
    gap: 8,
    marginLeft: 10,
  },
  webConnectButton: {
    alignItems: 'center',
    backgroundColor: '#1E1B4B',
    borderRadius: 8,
    minHeight: 30,
    justifyContent: 'center',
    paddingHorizontal: 11,
    paddingVertical: 6,
  },
  webConnectText: {
    color: '#A5B4FC',
    fontSize: 12,
    fontWeight: '900',
  },
  accessToggle: {
    alignSelf: 'flex-end',
    backgroundColor: '#0B0B0C',
    borderColor: '#2A2A2A',
    borderRadius: 999,
    borderWidth: 1,
    flexDirection: 'row',
    padding: 2,
  },
  accessButton: {
    borderRadius: 999,
    paddingHorizontal: 8,
    paddingVertical: 5,
  },
  accessButtonActive: {
    backgroundColor: '#312E81',
  },
  accessButtonText: {
    color: '#A1A1AA',
    fontSize: 10,
    fontWeight: '900',
  },
  accessButtonTextActive: {
    color: '#E0E7FF',
  },
  emptyPanel: {
    alignItems: 'center',
    paddingHorizontal: 28,
    paddingVertical: 28,
  },
  emptyTitle: {
    color: '#F4F4F5',
    fontSize: 15,
    fontWeight: '800',
    marginTop: 10,
  },
  emptyBody: {
    color: '#8E8E93',
    fontSize: 13,
    fontWeight: '600',
    lineHeight: 18,
    marginTop: 5,
    textAlign: 'center',
  },
  loadingPanel: {
    alignItems: 'center',
    paddingVertical: 42,
  },
  loadingText: {
    color: '#A1A1AA',
    fontSize: 13,
    fontWeight: '700',
    marginTop: 12,
  },
  placeholderPanel: {
    alignItems: 'center',
    backgroundColor: '#0B0B0C',
    borderColor: '#242427',
    borderRadius: 8,
    borderWidth: 1,
    marginHorizontal: 16,
    marginTop: 16,
    paddingHorizontal: 28,
    paddingVertical: 34,
  },
  placeholderIcon: {
    alignItems: 'center',
    backgroundColor: '#21110A',
    borderRadius: 18,
    height: 48,
    justifyContent: 'center',
    width: 48,
  },
  placeholderTitle: {
    color: '#F4F4F5',
    fontSize: 19,
    fontWeight: '900',
    marginTop: 16,
  },
  placeholderBody: {
    color: '#A1A1AA',
    fontSize: 14,
    fontWeight: '600',
    lineHeight: 20,
    marginTop: 8,
    textAlign: 'center',
  },
});