/* ═══════════════════════════════════════════
   OASIS Portal – mockups.css
   Browser & Phone Frame Mockups
   ═══════════════════════════════════════════ */

/* ── BROWSER FRAME ── */
.mockup-browser {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
  background: #fff;
  max-width: 100%;
  font-size: 11px;
}

.mockup-browser__bar {
  background: #E8E8EC;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
}

.mockup-browser__dots {
  display: flex;
  gap: 6px;
}

.mockup-browser__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mockup-browser__dot--red { background: #FF5F57; }
.mockup-browser__dot--yellow { background: #FFBD2E; }
.mockup-browser__dot--green { background: #28CA41; }

.mockup-browser__url {
  flex: 1;
  background: #fff;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 10px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
}

.mockup-browser__url-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.mockup-browser__url-lock svg {
  width: 10px;
  height: 10px;
  color: #999;
}

.mockup-browser__content {
  display: flex;
  min-height: 420px;
  overflow: hidden;
}

/* ── Module Mockup OASIS Sidebar ── */
.mockup-app-sidebar {
  width: 48px;
  background: #fff;
  border-right: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 8px;
  gap: 2px;
  flex-shrink: 0;
}

.mockup-app-sidebar__logo {
  width: 26px;
  height: 26px;
  background: var(--oasis-gradient-primary);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  margin-bottom: 10px;
  flex-shrink: 0;
}

.mockup-app-sidebar__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 1;
  width: 100%;
}

.mockup-app-sidebar__item {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.35);
  transition: all 0.2s;
  flex-shrink: 0;
}

.mockup-app-sidebar__item--active {
  background: rgba(0, 102, 204, 0.1);
  color: var(--oasis-blue);
}

.mockup-app-sidebar__item i,
.mockup-app-sidebar__item svg {
  width: 14px;
  height: 14px;
}

.mockup-app-sidebar__divider {
  width: 24px;
  height: 1px;
  background: #E5E7EB;
  margin: 4px 0;
  flex-shrink: 0;
}

.mockup-app-sidebar__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--oasis-gradient-primary);
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 8px;
  font-weight: 700;
  flex-shrink: 0;
}

.mockup-app-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Top header bar for module mockups */
.mockup-app-header {
  height: 36px;
  background: #fff;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  flex-shrink: 0;
}

.mockup-app-header__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mockup-app-header__module-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
}

.mockup-app-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mockup-app-header__search {
  background: #F5F5F5;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 8px;
  color: #bbb;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.mockup-app-header__icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oasis-text-medium, #6B7280);
}

.mockup-app-header__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--oasis-gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 7px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════
   EDGE-STYLE BROWSER FRAME VARIANT
   ═══════════════════════════════════════════ */
.mockup-browser--edge .mockup-browser__bar {
  display: none;
}

.mockup-browser--edge .mockup-browser__edge-tabs {
  background: #F3F3F3;
  display: flex;
  align-items: flex-end;
  padding: 6px 10px 0;
  gap: 2px;
  height: 38px;
  border-bottom: 1px solid #E0E0E0;
}

.mockup-browser__edge-tab {
  padding: 6px 14px;
  font-size: 10px;
  color: #666;
  background: transparent;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  position: relative;
  bottom: -1px;
  border: 1px solid transparent;
  border-bottom: none;
  line-height: 1;
}

.mockup-browser__edge-tab--active {
  background: #fff;
  color: var(--oasis-text-dark, #1A1A2E);
  border-color: #E0E0E0;
  font-weight: 600;
}

.mockup-browser__edge-tab-icon {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--oasis-gradient-primary, linear-gradient(135deg, #0066CC, #00A3E0));
  flex-shrink: 0;
}

.mockup-browser__edge-tab-close {
  font-size: 9px;
  color: #999;
  margin-left: 4px;
  cursor: pointer;
  line-height: 1;
}

.mockup-browser__edge-tab-close:hover {
  color: #333;
}

.mockup-browser__edge-new-tab {
  padding: 6px 8px;
  font-size: 12px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  align-self: center;
}

.mockup-browser--edge .mockup-browser__edge-toolbar {
  background: #F3F3F3;
  display: flex;
  align-items: center;
  padding: 4px 10px 6px;
  gap: 6px;
  border-bottom: 1px solid #E8E8E8;
}

.mockup-browser__edge-nav-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #666;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.mockup-browser__edge-nav-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.mockup-browser__edge-nav-btn--disabled {
  color: #ccc;
  cursor: default;
}

.mockup-browser__edge-nav-btn--disabled:hover {
  background: transparent;
}

.mockup-browser__edge-url {
  flex: 1;
  background: #fff;
  border: 1px solid #E0E0E0;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 10px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}

.mockup-browser__edge-url-lock {
  font-size: 10px;
  color: #999;
  flex-shrink: 0;
}

.mockup-browser__edge-url-text {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #888;
}

.mockup-browser__edge-extensions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.mockup-browser__edge-ext-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #888;
}

.mockup-browser__edge-ext-icon:hover {
  background: rgba(0, 0, 0, 0.06);
}

.mockup-browser__edge-menu {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
  flex-shrink: 0;
}

/* ── Dashboard Mockup Content ── */
.mockup-sidebar {
  width: 48px;
  background: var(--oasis-bg-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 4px;
  flex-shrink: 0;
}

.mockup-sidebar__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  transition: all 0.2s;
}

.mockup-sidebar__icon--active {
  background: rgba(0, 163, 224, 0.2);
  color: var(--oasis-cyan);
}

.mockup-sidebar__logo {
  width: 28px;
  height: 28px;
  background: var(--oasis-gradient-primary);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  margin-bottom: 12px;
}

.mockup-sidebar__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--oasis-gradient-secondary);
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  font-weight: 600;
}

.mockup-main {
  flex: 1;
  background: var(--oasis-bg-light);
  padding: 14px;
  overflow: hidden;
}

.mockup-main__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.mockup-main__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--oasis-text-dark);
}

.mockup-main__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mockup-main__bell {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--oasis-text-medium);
  position: relative;
}

.mockup-main__bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF5F57;
  border: 2px solid var(--oasis-bg-light);
}

.mockup-main__avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--oasis-gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 8px;
  font-weight: 700;
}

/* Widget Grid */
.mockup-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mockup-widget {
  background: white;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.mockup-widget__title {
  font-size: 9px;
  font-weight: 600;
  color: var(--oasis-text-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mockup-widget__title-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.mockup-widget__title-dot--blue { background: var(--oasis-blue); }
.mockup-widget__title-dot--cyan { background: var(--oasis-cyan); }
.mockup-widget__title-dot--mint { background: var(--oasis-mint); }
.mockup-widget__title-dot--orange { background: #FF9800; }

/* Appointment items */
.mockup-appointment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.mockup-appointment:last-child {
  border-bottom: none;
}

.mockup-appointment__time {
  font-size: 9px;
  font-weight: 600;
  color: var(--oasis-blue);
  min-width: 32px;
}

.mockup-appointment__text {
  font-size: 9px;
  color: var(--oasis-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mini Kanban */
.mockup-kanban {
  display: flex;
  gap: 6px;
}

.mockup-kanban__col {
  flex: 1;
  text-align: center;
}

.mockup-kanban__col-head {
  font-size: 7px;
  font-weight: 600;
  color: var(--oasis-text-medium);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.mockup-kanban__count {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.mockup-kanban__count--open { color: var(--oasis-blue); }
.mockup-kanban__count--wip { color: #FF9800; }
.mockup-kanban__count--done { color: var(--oasis-mint); }

.mockup-kanban__label {
  font-size: 7px;
  color: var(--oasis-text-medium);
  margin-top: 2px;
}

/* Message items */
.mockup-message {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.mockup-message:last-child {
  border-bottom: none;
}

.mockup-message__dot {
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 50%;
  background: var(--oasis-cyan);
  margin-top: 3px;
}

.mockup-message__content {
  overflow: hidden;
}

.mockup-message__sender {
  font-size: 8px;
  font-weight: 600;
  color: var(--oasis-text-dark);
}

.mockup-message__preview {
  font-size: 8px;
  color: var(--oasis-text-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Time tracking widget */
.mockup-time__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--oasis-text-dark);
  margin-bottom: 4px;
}

.mockup-time__label {
  font-size: 8px;
  color: var(--oasis-text-medium);
  margin-bottom: 8px;
}

.mockup-time__bar {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.mockup-time__bar-fill {
  height: 100%;
  width: 84%;
  background: var(--oasis-gradient-secondary);
  border-radius: 3px;
}

.mockup-time__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 7px;
  color: var(--oasis-text-medium);
}

/* ═══════════════════════════════════════════
   PHONE MOCKUP
   ═══════════════════════════════════════════ */
.mockup-phone {
  width: 260px;
  border-radius: 36px;
  border: 6px solid #1A1A2E;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  position: relative;
}

.mockup-phone__notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 22px;
  background: #1A1A2E;
  border-radius: 0 0 16px 16px;
  z-index: 10;
}

.mockup-phone__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  padding-top: 4px;
  font-size: 9px;
  font-weight: 600;
  color: #333;
  background: #fff;
}

.mockup-phone__status-right {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 8px;
}

.mockup-phone__header {
  background: var(--oasis-blue);
  color: white;
  padding: 14px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mockup-phone__header-title {
  font-size: 14px;
  font-weight: 700;
}

.mockup-phone__header-subtitle {
  font-size: 9px;
  opacity: 0.8;
  margin-top: 2px;
}

.mockup-phone__header-icon {
  font-size: 14px;
  opacity: 0.8;
}

.mockup-phone__content {
  background: #F5F5F5;
  padding: 10px;
  min-height: 340px;
  max-height: 340px;
  overflow: hidden;
}

.mockup-phone__nav {
  display: flex;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 8px 0 12px;
}

.mockup-phone__nav-item {
  flex: 1;
  text-align: center;
  font-size: 7px;
  color: #999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: color 0.2s;
  background: none;
  border: none;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.mockup-phone__nav-item:hover {
  color: var(--oasis-blue);
}

.mockup-phone__nav-item--active {
  color: var(--oasis-blue);
}

.mockup-phone__nav-icon {
  font-size: 14px;
  line-height: 1;
}

.mockup-phone__nav-badge {
  position: relative;
}

.mockup-phone__nav-badge::after {
  content: attr(data-badge);
  position: absolute;
  top: -6px;
  right: -10px;
  background: #FF5F57;
  color: white;
  font-size: 7px;
  font-weight: 700;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Interactive Phone Screen Panels ── */
.mockup-phone__screen {
  position: relative;
  min-height: 340px;
  max-height: 340px;
  overflow: hidden;
}

.mockup-phone__screen-panel {
  display: none;
  padding: 0;
  min-height: 340px;
  max-height: 340px;
  overflow: hidden;
}

.mockup-phone__screen-panel.active {
  display: block;
}

/* ── Document list (Mandant) ── */
.mockup-doc {
  background: white;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mockup-doc__icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
  background: rgba(0, 102, 204, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.mockup-doc__info {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.mockup-doc__name {
  font-size: 10px;
  font-weight: 600;
  color: var(--oasis-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup-doc__meta {
  font-size: 8px;
  color: var(--oasis-text-medium);
  margin-top: 2px;
}

.mockup-doc__status {
  font-size: 8px;
  font-weight: 600;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mockup-doc__status--confirmed { color: #28CA41; }
.mockup-doc__status--review { color: #FF9800; }
.mockup-doc__status--upload { color: var(--oasis-cyan); }

.mockup-fab {
  position: absolute;
  bottom: 70px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--oasis-gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.4);
  z-index: 5;
}

/* ── Chat (Mitarbeiter) ── */
.mockup-chat__channel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: white;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 9px;
  font-weight: 600;
  color: var(--oasis-text-dark);
}

.mockup-chat__channel-hash {
  color: var(--oasis-cyan);
  font-size: 12px;
}

.mockup-chat__online {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 8px;
  color: var(--oasis-text-medium);
  font-weight: 400;
}

.mockup-chat__online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28CA41;
}

.mockup-chat-bubble {
  margin-bottom: 8px;
  max-width: 90%;
}

.mockup-chat-bubble--other {
  margin-right: auto;
}

.mockup-chat-bubble--self {
  margin-left: auto;
}

.mockup-chat-bubble__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.mockup-chat-bubble__avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  color: white;
}

.mockup-chat-bubble__avatar--sf { background: #E91E63; }
.mockup-chat-bubble__avatar--tm { background: var(--oasis-blue); }
.mockup-chat-bubble__avatar--mh { background: var(--oasis-mint); }

.mockup-chat-bubble__name {
  font-size: 8px;
  font-weight: 600;
  color: var(--oasis-text-dark);
}

.mockup-chat-bubble__time {
  font-size: 7px;
  color: var(--oasis-text-medium);
}

.mockup-chat-bubble__text {
  background: white;
  border-radius: 0 10px 10px 10px;
  padding: 8px 10px;
  font-size: 9px;
  color: var(--oasis-text-dark);
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.mockup-chat-bubble--self .mockup-chat-bubble__text {
  background: rgba(0, 102, 204, 0.08);
  border-radius: 10px 0 10px 10px;
}

.mockup-chat__input {
  display: flex;
  align-items: center;
  gap: 6px;
  background: white;
  border-radius: 20px;
  padding: 8px 12px;
  margin-top: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.mockup-chat__input-text {
  flex: 1;
  font-size: 9px;
  color: #bbb;
}

.mockup-chat__input-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--oasis-gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
}

/* ═══════════════════════════════════════════
   FLOW BOARD MOCKUP
   ═══════════════════════════════════════════ */
.mockup-flow {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--oasis-bg-light);
  overflow: hidden;
}

.mockup-flow__col {
  flex: 1;
  min-width: 0;
}

.mockup-flow__col-header {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--oasis-text-medium);
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mockup-flow__col-count {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 7px;
}

.mockup-flow__card {
  background: white;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border-left: 3px solid transparent;
}

.mockup-flow__card--high { border-left-color: #FF5F57; }
.mockup-flow__card--medium { border-left-color: #FF9800; }
.mockup-flow__card--normal { border-left-color: var(--oasis-cyan); }
.mockup-flow__card--low { border-left-color: var(--oasis-mint); }

.mockup-flow__card-id {
  font-size: 7px;
  font-weight: 600;
  color: var(--oasis-text-medium);
  margin-bottom: 3px;
}

.mockup-flow__card-title {
  font-size: 9px;
  font-weight: 600;
  color: var(--oasis-text-dark);
  line-height: 1.3;
  margin-bottom: 6px;
}

.mockup-flow__card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mockup-flow__card-tag {
  font-size: 7px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}

.mockup-flow__card-tag--datev {
  background: rgba(0, 163, 224, 0.1);
  color: var(--oasis-cyan);
}

.mockup-flow__card-tag--frist {
  background: rgba(255, 152, 0, 0.1);
  color: #e68900;
}

.mockup-flow__card-assignee {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  color: white;
}

/* ═══════════════════════════════════════════
   OTTI CHAT MOCKUP
   ═══════════════════════════════════════════ */
.mockup-otti {
  background: var(--oasis-bg-dark);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 440px;
}

.mockup-otti__header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mockup-otti__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--oasis-gradient-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
}

.mockup-otti__name {
  font-size: 13px;
  font-weight: 600;
  color: white;
}

.mockup-otti__status {
  font-size: 9px;
  color: var(--oasis-mint);
}

.mockup-otti__chat {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mockup-otti__msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.5;
}

.mockup-otti__msg--user {
  align-self: flex-end;
  background: var(--oasis-blue);
  color: white;
  border-bottom-right-radius: 4px;
}

.mockup-otti__msg--ai {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  color: var(--oasis-text-light);
  border-bottom-left-radius: 4px;
}

.mockup-otti__input {
  margin: 0 16px 16px;
  padding: 10px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}

.mockup-otti__input-send {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--oasis-gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
}

/* ═══════════════════════════════════════════
   MODULE SHOWCASE TABS
   ═══════════════════════════════════════════ */
.module-showcase {
  margin-top: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.module-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--oasis-blue), var(--oasis-cyan));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: 20px;
  width: fit-content;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
  animation: hintFloat 2.5s ease-in-out infinite;
  transition: opacity 0.4s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease;
  max-height: 40px;
  overflow: hidden;
  white-space: nowrap;
}

.module-hint.hidden {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  padding: 0;
}

.module-hint__icon {
  vertical-align: -2px;
  margin-right: 3px;
  animation: hintClick 2s ease-in-out infinite;
}

@keyframes hintFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes hintClick {
  0%, 70%, 100% { transform: scale(1) rotate(0deg); }
  80%           { transform: scale(0.85) rotate(-8deg); }
  90%           { transform: scale(1.05) rotate(0deg); }
}

.module-showcase__desc {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.4s ease;
  opacity: 0;
  margin-top: 0;
}

.module-showcase__desc.open {
  max-height: 300px;
  opacity: 1;
  margin-top: 20px;
}

.module-showcase__desc p {
  display: none;
  font-size: 0.88rem;
  color: var(--oasis-text-medium);
  line-height: 1.9;
  padding: 0;
  margin: 0;
}

.module-showcase__desc p strong {
  color: var(--oasis-text-dark);
}

.module-showcase__desc p.active {
  display: block;
  animation: descFadeUp 0.35s ease;
}

@keyframes descFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.module-showcase__tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 2px solid #E8E8EC;
  padding: 0 8px;
  gap: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.module-showcase__tabs::-webkit-scrollbar {
  display: none;
}

.module-showcase__tab {
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--oasis-text-medium, #666);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.3s;
  margin-bottom: -2px;
  position: relative;
  outline: none;
}

.module-showcase__tab:hover {
  color: var(--oasis-text-dark, #1A1A2E);
}

.module-showcase__tab.active,
.module-showcase__tab--active {
  color: var(--oasis-blue, #0066CC);
  font-weight: 600;
  border-bottom-color: transparent;
  background-image: linear-gradient(90deg, var(--oasis-blue, #0066CC), var(--oasis-cyan, #00A3E0), var(--oasis-mint, #00C9A7));
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: bottom;
}

.module-showcase__panel {
  display: none;
  padding: 0;
  animation: showcaseFadeIn 0.3s ease;
}

/* Browser fills the full panel width inside showcase */
.module-showcase__panel .mockup-browser {
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
}

.module-showcase__panel.active,
.module-showcase__panel--active {
  display: block;
}

@keyframes showcaseFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.module-showcase__content {
  max-width: 100%;
  overflow: hidden;
}

/* ═══════════════════════════════════════════
   MODULE MOCKUP: EMAIL CLIENT
   ═══════════════════════════════════════════ */
.mockup-email {
  display: flex;
  font-size: 9px;
  min-height: 260px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E8E8EC;
}

.mockup-email__folders {
  width: 80px;
  background: var(--oasis-bg-light, #F8F9FC);
  border-right: 1px solid #E8E8EC;
  padding: 8px 0;
  flex-shrink: 0;
}

.mockup-email__folder {
  padding: 5px 10px;
  font-size: 8px;
  color: var(--oasis-text-medium, #666);
  cursor: default;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mockup-email__folder--active {
  background: rgba(0, 102, 204, 0.08);
  color: var(--oasis-blue, #0066CC);
  font-weight: 600;
}

.mockup-email__folder-icon {
  font-size: 10px;
  width: 14px;
  text-align: center;
}

.mockup-email__folder-count {
  margin-left: auto;
  background: var(--oasis-blue, #0066CC);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
}

.mockup-email__list {
  width: 160px;
  border-right: 1px solid #E8E8EC;
  overflow: hidden;
  flex-shrink: 0;
}

.mockup-email__list-header {
  padding: 8px 10px;
  font-size: 9px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
  border-bottom: 1px solid #E8E8EC;
}

.mockup-email__item {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  cursor: default;
}

.mockup-email__item--unread {
  background: rgba(0, 102, 204, 0.03);
}

.mockup-email__item--active {
  background: rgba(0, 102, 204, 0.08);
  border-left: 2px solid var(--oasis-blue, #0066CC);
}

.mockup-email__item-sender {
  font-size: 8px;
  font-weight: 600;
  color: var(--oasis-text-dark, #1A1A2E);
  margin-bottom: 1px;
}

.mockup-email__item--unread .mockup-email__item-sender {
  font-weight: 700;
}

.mockup-email__item-subject {
  font-size: 8px;
  color: var(--oasis-text-dark, #1A1A2E);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup-email__item-preview {
  font-size: 7px;
  color: var(--oasis-text-medium, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.mockup-email__item-time {
  font-size: 7px;
  color: var(--oasis-text-medium, #666);
  float: right;
}

.mockup-email__preview {
  flex: 1;
  padding: 12px;
  overflow: hidden;
}

.mockup-email__preview-subject {
  font-size: 11px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
  margin-bottom: 6px;
}

.mockup-email__preview-meta {
  font-size: 8px;
  color: var(--oasis-text-medium, #666);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E8E8EC;
}

.mockup-email__preview-body {
  font-size: 9px;
  color: var(--oasis-text-dark, #1A1A2E);
  line-height: 1.5;
}

.mockup-email__preview-body p {
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════
   MODULE MOCKUP: CALENDAR
   ═══════════════════════════════════════════ */
.mockup-calendar {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E8E8EC;
  overflow: hidden;
  font-size: 8px;
}

.mockup-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--oasis-bg-light, #F8F9FC);
  border-bottom: 1px solid #E8E8EC;
}

.mockup-calendar__month {
  font-size: 10px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
}

.mockup-calendar__nav {
  display: flex;
  gap: 6px;
}

.mockup-calendar__nav-btn {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #666;
  cursor: pointer;
}

.mockup-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}

.mockup-calendar__day-header {
  padding: 4px;
  text-align: center;
  font-size: 7px;
  font-weight: 600;
  color: var(--oasis-text-medium, #666);
  text-transform: uppercase;
  background: var(--oasis-bg-light, #F8F9FC);
}

.mockup-calendar__day {
  padding: 4px 2px;
  text-align: center;
  min-height: 28px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  position: relative;
  font-size: 8px;
  color: var(--oasis-text-dark, #1A1A2E);
}

.mockup-calendar__day--other {
  color: #ccc;
}

.mockup-calendar__day--today {
  background: rgba(0, 102, 204, 0.06);
  font-weight: 700;
}

.mockup-calendar__day--today::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 2px;
  background: var(--oasis-blue, #0066CC);
  border-radius: 1px;
}

.mockup-calendar__event-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 2px;
}

.mockup-calendar__event-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.mockup-calendar__event-dot--blue { background: var(--oasis-blue, #0066CC); }
.mockup-calendar__event-dot--cyan { background: var(--oasis-cyan, #00A3E0); }
.mockup-calendar__event-dot--mint { background: var(--oasis-mint, #00C9A7); }
.mockup-calendar__event-dot--orange { background: #FF9800; }
.mockup-calendar__event-dot--red { background: #FF5F57; }

/* ═══════════════════════════════════════════
   MODULE MOCKUP: CHAT ROOM
   ═══════════════════════════════════════════ */
.mockup-chat-room {
  display: flex;
  font-size: 9px;
  min-height: 240px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E8E8EC;
}

.mockup-chat-room__channels {
  width: 100px;
  background: var(--oasis-bg-light, #F8F9FC);
  border-right: 1px solid #E8E8EC;
  padding: 8px 0;
  flex-shrink: 0;
}

.mockup-chat-room__channel-header {
  padding: 4px 10px 8px;
  font-size: 7px;
  font-weight: 700;
  color: var(--oasis-text-medium, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mockup-chat-room__channel {
  padding: 4px 10px;
  font-size: 8px;
  color: var(--oasis-text-medium, #666);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: default;
}

.mockup-chat-room__channel--active {
  background: rgba(0, 102, 204, 0.08);
  color: var(--oasis-blue, #0066CC);
  font-weight: 600;
}

.mockup-chat-room__channel-hash {
  font-size: 10px;
  opacity: 0.6;
}

.mockup-chat-room__channel-badge {
  margin-left: auto;
  background: #FF5F57;
  color: #fff;
  font-size: 6px;
  font-weight: 700;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mockup-chat-room__messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mockup-chat-room__msg-header {
  padding: 8px 12px;
  border-bottom: 1px solid #E8E8EC;
  font-size: 10px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
  display: flex;
  align-items: center;
  gap: 4px;
}

.mockup-chat-room__msg-area {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.mockup-chat-room__msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.mockup-chat-room__msg-avatar {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.mockup-chat-room__msg-body {
  flex: 1;
  min-width: 0;
}

.mockup-chat-room__msg-name {
  font-size: 8px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
}

.mockup-chat-room__msg-time {
  font-size: 7px;
  color: var(--oasis-text-medium, #666);
  margin-left: 6px;
  font-weight: 400;
}

.mockup-chat-room__msg-text {
  font-size: 8px;
  color: var(--oasis-text-dark, #1A1A2E);
  line-height: 1.4;
  margin-top: 1px;
}

.mockup-chat-room__input {
  padding: 8px 12px;
  border-top: 1px solid #E8E8EC;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mockup-chat-room__input-field {
  flex: 1;
  background: var(--oasis-bg-light, #F8F9FC);
  border: 1px solid #E0E0E0;
  border-radius: 16px;
  padding: 5px 10px;
  font-size: 8px;
  color: #bbb;
}

/* ═══════════════════════════════════════════
   MODULE MOCKUP: TIME TRACKING
   ═══════════════════════════════════════════ */
.mockup-track {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E8E8EC;
  overflow: hidden;
  font-size: 9px;
  padding: 12px;
}

.mockup-track__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.mockup-track__clock-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.mockup-track__clock-icon--active {
  background: rgba(0, 201, 167, 0.1);
  color: var(--oasis-mint, #00C9A7);
}

.mockup-track__clock-icon--inactive {
  background: rgba(0, 0, 0, 0.04);
  color: var(--oasis-text-medium, #666);
}

.mockup-track__clock-info {
  flex: 1;
}

.mockup-track__clock-label {
  font-size: 8px;
  color: var(--oasis-text-medium, #666);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.mockup-track__clock-time {
  font-size: 16px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
}

.mockup-track__clock-badge {
  font-size: 7px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.mockup-track__clock-badge--active {
  background: rgba(0, 201, 167, 0.12);
  color: var(--oasis-mint, #00C9A7);
}

.mockup-track__clock-badge--inactive {
  background: rgba(0, 0, 0, 0.06);
  color: var(--oasis-text-medium, #666);
}

.mockup-track__daily {
  margin-top: 10px;
}

.mockup-track__daily-header {
  font-size: 8px;
  font-weight: 600;
  color: var(--oasis-text-medium, #666);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.mockup-track__daily-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.mockup-track__daily-label {
  font-size: 8px;
  color: var(--oasis-text-medium, #666);
  width: 24px;
  flex-shrink: 0;
}

.mockup-track__daily-bar {
  flex: 1;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.mockup-track__daily-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--oasis-gradient-secondary, linear-gradient(135deg, #00A3E0, #00C9A7));
}

.mockup-track__daily-hours {
  font-size: 8px;
  font-weight: 600;
  color: var(--oasis-text-dark, #1A1A2E);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

.mockup-track__summary {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #E8E8EC;
}

.mockup-track__summary-item {
  text-align: center;
  flex: 1;
}

.mockup-track__summary-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
}

.mockup-track__summary-label {
  font-size: 7px;
  color: var(--oasis-text-medium, #666);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════
   MODULE MOCKUP: VOICE / DICTATION
   ═══════════════════════════════════════════ */
.mockup-voice {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E8E8EC;
  overflow: hidden;
  font-size: 9px;
  padding: 16px;
  text-align: center;
}

.mockup-voice__status {
  font-size: 8px;
  font-weight: 600;
  color: var(--oasis-text-medium, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.mockup-voice__status--recording {
  color: #FF5F57;
}

.mockup-voice__mic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.mockup-voice__mic--active {
  background: rgba(255, 95, 87, 0.1);
  color: #FF5F57;
  box-shadow: 0 0 0 6px rgba(255, 95, 87, 0.06);
}

.mockup-voice__mic--idle {
  background: var(--oasis-bg-light, #F8F9FC);
  color: var(--oasis-text-medium, #666);
}

.mockup-voice__waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 32px;
  margin-bottom: 12px;
}

.mockup-voice__waveform-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--oasis-cyan, #00A3E0);
  animation: voiceWave 0.6s ease-in-out infinite alternate;
}

.mockup-voice__waveform-bar:nth-child(2) { animation-delay: 0.1s; }
.mockup-voice__waveform-bar:nth-child(3) { animation-delay: 0.2s; }
.mockup-voice__waveform-bar:nth-child(4) { animation-delay: 0.3s; }
.mockup-voice__waveform-bar:nth-child(5) { animation-delay: 0.15s; }
.mockup-voice__waveform-bar:nth-child(6) { animation-delay: 0.25s; }
.mockup-voice__waveform-bar:nth-child(7) { animation-delay: 0.35s; }

@keyframes voiceWave {
  from { height: 6px; }
  to   { height: 24px; }
}

.mockup-voice__transcript {
  background: var(--oasis-bg-light, #F8F9FC);
  border-radius: 6px;
  padding: 10px 12px;
  text-align: left;
  font-size: 9px;
  color: var(--oasis-text-dark, #1A1A2E);
  line-height: 1.5;
  min-height: 60px;
  border: 1px solid #E8E8EC;
}

.mockup-voice__transcript-label {
  font-size: 7px;
  font-weight: 600;
  color: var(--oasis-text-medium, #666);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.mockup-voice__transcript-cursor {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: var(--oasis-blue, #0066CC);
  animation: cursorBlink 0.8s infinite;
  vertical-align: text-bottom;
  margin-left: 1px;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ═══════════════════════════════════════════
   MODULE MOCKUP: BRIDGE (Encrypted Messages)
   ═══════════════════════════════════════════ */
.mockup-bridge {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E8E8EC;
  overflow: hidden;
  font-size: 9px;
}

.mockup-bridge__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--oasis-bg-light, #F8F9FC);
  border-bottom: 1px solid #E8E8EC;
}

.mockup-bridge__lock {
  font-size: 10px;
  color: var(--oasis-mint, #00C9A7);
}

.mockup-bridge__title {
  font-size: 10px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
}

.mockup-bridge__badge {
  margin-left: auto;
  font-size: 7px;
  font-weight: 600;
  color: var(--oasis-mint, #00C9A7);
  background: rgba(0, 201, 167, 0.1);
  padding: 2px 6px;
  border-radius: 8px;
}

.mockup-bridge__thread {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mockup-bridge__msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.mockup-bridge__msg--self {
  flex-direction: row-reverse;
}

.mockup-bridge__msg-avatar {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.mockup-bridge__msg-bubble {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 8px;
  line-height: 1.4;
  max-width: 75%;
  position: relative;
}

.mockup-bridge__msg-bubble--other {
  background: var(--oasis-bg-light, #F8F9FC);
  color: var(--oasis-text-dark, #1A1A2E);
  border-bottom-left-radius: 2px;
}

.mockup-bridge__msg-bubble--self {
  background: rgba(0, 102, 204, 0.08);
  color: var(--oasis-text-dark, #1A1A2E);
  border-bottom-right-radius: 2px;
}

.mockup-bridge__msg-lock {
  font-size: 7px;
  color: var(--oasis-mint, #00C9A7);
  margin-left: 4px;
}

.mockup-bridge__msg-time {
  font-size: 6px;
  color: var(--oasis-text-medium, #666);
  margin-top: 2px;
}

.mockup-bridge__msg--self .mockup-bridge__msg-time {
  text-align: right;
}

/* ═══════════════════════════════════════════
   MODULE MOCKUP: BULLETIN (Announcements)
   ═══════════════════════════════════════════ */
.mockup-bulletin {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E8E8EC;
  overflow: hidden;
  font-size: 9px;
}

.mockup-bulletin__header {
  padding: 8px 12px;
  background: var(--oasis-bg-light, #F8F9FC);
  border-bottom: 1px solid #E8E8EC;
  font-size: 10px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mockup-bulletin__list {
  padding: 6px 0;
}

.mockup-bulletin__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.mockup-bulletin__item:last-child {
  border-bottom: none;
}

.mockup-bulletin__icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.mockup-bulletin__icon--info {
  background: rgba(0, 163, 224, 0.1);
  color: var(--oasis-cyan, #00A3E0);
}

.mockup-bulletin__icon--warning {
  background: rgba(255, 152, 0, 0.1);
  color: #FF9800;
}

.mockup-bulletin__icon--success {
  background: rgba(0, 201, 167, 0.1);
  color: var(--oasis-mint, #00C9A7);
}

.mockup-bulletin__icon--urgent {
  background: rgba(255, 95, 87, 0.1);
  color: #FF5F57;
}

.mockup-bulletin__content {
  flex: 1;
  min-width: 0;
}

.mockup-bulletin__title {
  font-size: 9px;
  font-weight: 600;
  color: var(--oasis-text-dark, #1A1A2E);
  margin-bottom: 2px;
}

.mockup-bulletin__text {
  font-size: 8px;
  color: var(--oasis-text-medium, #666);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup-bulletin__meta {
  font-size: 7px;
  color: var(--oasis-text-medium, #666);
  margin-top: 3px;
}

/* ═══════════════════════════════════════════
   MODULE MOCKUP: ONBOARDING (Step Wizard)
   ═══════════════════════════════════════════ */
.mockup-onboarding {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E8E8EC;
  overflow: hidden;
  font-size: 9px;
  padding: 14px;
}

.mockup-onboarding__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
  margin-bottom: 12px;
  text-align: center;
}

.mockup-onboarding__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 16px;
  padding: 0 12px;
}

.mockup-onboarding__step {
  display: flex;
  align-items: center;
  gap: 0;
}

.mockup-onboarding__step-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  flex-shrink: 0;
}

.mockup-onboarding__step-circle--done {
  background: var(--oasis-mint, #00C9A7);
  color: #fff;
}

.mockup-onboarding__step-circle--active {
  background: var(--oasis-blue, #0066CC);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

.mockup-onboarding__step-circle--pending {
  background: #E8E8EC;
  color: var(--oasis-text-medium, #666);
}

.mockup-onboarding__step-line {
  width: 30px;
  height: 2px;
  flex-shrink: 0;
}

.mockup-onboarding__step-line--done {
  background: var(--oasis-mint, #00C9A7);
}

.mockup-onboarding__step-line--pending {
  background: #E8E8EC;
}

.mockup-onboarding__bar {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.mockup-onboarding__bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--oasis-gradient-primary, linear-gradient(135deg, #0066CC, #00A3E0));
  transition: width 0.3s ease;
}

.mockup-onboarding__bar-label {
  font-size: 7px;
  color: var(--oasis-text-medium, #666);
  text-align: right;
  margin-bottom: 12px;
}

.mockup-onboarding__card {
  background: var(--oasis-bg-light, #F8F9FC);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mockup-onboarding__card-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  flex-shrink: 0;
}

.mockup-onboarding__card-check--done {
  background: var(--oasis-mint, #00C9A7);
  color: #fff;
}

.mockup-onboarding__card-check--pending {
  background: #E0E0E0;
  color: #fff;
}

.mockup-onboarding__card-text {
  font-size: 8px;
  color: var(--oasis-text-dark, #1A1A2E);
  font-weight: 500;
}

.mockup-onboarding__card-text--done {
  text-decoration: line-through;
  color: var(--oasis-text-medium, #666);
}

/* ═══════════════════════════════════════════
   MODULE MOCKUP: FILES (File Browser)
   ═══════════════════════════════════════════ */
.mockup-files {
  display: flex;
  font-size: 9px;
  min-height: 220px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E8E8EC;
}

.mockup-files__tree {
  width: 100px;
  background: var(--oasis-bg-light, #F8F9FC);
  border-right: 1px solid #E8E8EC;
  padding: 8px 0;
  flex-shrink: 0;
  overflow: hidden;
}

.mockup-files__tree-item {
  padding: 3px 10px;
  font-size: 8px;
  color: var(--oasis-text-medium, #666);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: default;
  white-space: nowrap;
}

.mockup-files__tree-item--active {
  background: rgba(0, 102, 204, 0.08);
  color: var(--oasis-blue, #0066CC);
  font-weight: 600;
}

.mockup-files__tree-item--nested {
  padding-left: 22px;
}

.mockup-files__tree-icon {
  font-size: 10px;
  width: 12px;
  text-align: center;
  flex-shrink: 0;
}

.mockup-files__content {
  flex: 1;
  overflow: hidden;
}

.mockup-files__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #E8E8EC;
}

.mockup-files__path {
  font-size: 8px;
  color: var(--oasis-text-medium, #666);
}

.mockup-files__path-segment {
  color: var(--oasis-blue, #0066CC);
  font-weight: 600;
}

.mockup-files__list {
  padding: 4px 0;
}

.mockup-files__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.mockup-files__item:last-child {
  border-bottom: none;
}

.mockup-files__item-icon {
  font-size: 12px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.mockup-files__item-name {
  font-size: 8px;
  font-weight: 500;
  color: var(--oasis-text-dark, #1A1A2E);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup-files__item-size {
  font-size: 7px;
  color: var(--oasis-text-medium, #666);
  flex-shrink: 0;
}

.mockup-files__item-date {
  font-size: 7px;
  color: var(--oasis-text-medium, #666);
  flex-shrink: 0;
  width: 50px;
  text-align: right;
}

/* ═══════════════════════════════════════════
   MODULE MOCKUP: VAULT (Wiki)
   ═══════════════════════════════════════════ */
.mockup-vault {
  display: flex;
  font-size: 9px;
  min-height: 240px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E8E8EC;
}

.mockup-vault__nav {
  width: 100px;
  background: var(--oasis-bg-light, #F8F9FC);
  border-right: 1px solid #E8E8EC;
  padding: 8px 0;
  flex-shrink: 0;
}

.mockup-vault__nav-header {
  padding: 4px 10px 8px;
  font-size: 7px;
  font-weight: 700;
  color: var(--oasis-text-medium, #666);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mockup-vault__nav-item {
  padding: 4px 10px;
  font-size: 8px;
  color: var(--oasis-text-medium, #666);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: default;
}

.mockup-vault__nav-item--active {
  background: rgba(0, 102, 204, 0.08);
  color: var(--oasis-blue, #0066CC);
  font-weight: 600;
}

.mockup-vault__nav-icon {
  font-size: 9px;
  width: 12px;
  text-align: center;
}

.mockup-vault__page {
  flex: 1;
  padding: 12px 14px;
  overflow: hidden;
}

.mockup-vault__page-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
  margin-bottom: 4px;
}

.mockup-vault__page-meta {
  font-size: 7px;
  color: var(--oasis-text-medium, #666);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E8E8EC;
}

.mockup-vault__page-heading {
  font-size: 10px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
  margin: 10px 0 4px;
}

.mockup-vault__page-text {
  font-size: 8px;
  color: var(--oasis-text-dark, #1A1A2E);
  line-height: 1.5;
  margin-bottom: 6px;
}

.mockup-vault__page-list {
  padding-left: 14px;
  margin-bottom: 6px;
}

.mockup-vault__page-list li {
  font-size: 8px;
  color: var(--oasis-text-dark, #1A1A2E);
  line-height: 1.5;
  list-style: disc;
}

.mockup-vault__page-code {
  background: var(--oasis-bg-light, #F8F9FC);
  border: 1px solid #E8E8EC;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 7px;
  font-family: monospace;
  color: var(--oasis-text-dark, #1A1A2E);
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════
   MODULE MOCKUP: INSIGHTS (Dashboard/Charts)
   ═══════════════════════════════════════════ */
.mockup-insights {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E8E8EC;
  overflow: hidden;
  font-size: 9px;
  padding: 12px;
}

.mockup-insights__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mockup-insights__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
}

.mockup-insights__period {
  font-size: 7px;
  color: var(--oasis-text-medium, #666);
  background: var(--oasis-bg-light, #F8F9FC);
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid #E8E8EC;
}

.mockup-insights__kpis {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.mockup-insights__kpi {
  flex: 1;
  background: var(--oasis-bg-light, #F8F9FC);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.mockup-insights__kpi-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
}

.mockup-insights__kpi-label {
  font-size: 7px;
  color: var(--oasis-text-medium, #666);
  margin-top: 2px;
}

.mockup-insights__kpi-change {
  font-size: 7px;
  font-weight: 600;
  margin-top: 2px;
}

.mockup-insights__kpi-change--up {
  color: var(--oasis-mint, #00C9A7);
}

.mockup-insights__kpi-change--down {
  color: #FF5F57;
}

.mockup-insights__charts {
  display: flex;
  gap: 12px;
}

/* Bar Chart */
.mockup-insights__bar-chart {
  flex: 2;
  background: var(--oasis-bg-light, #F8F9FC);
  border-radius: 6px;
  padding: 10px;
}

.mockup-insights__bar-chart-title {
  font-size: 8px;
  font-weight: 600;
  color: var(--oasis-text-medium, #666);
  margin-bottom: 10px;
}

.mockup-insights__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
  padding-top: 4px;
}

.mockup-insights__bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
  justify-content: flex-end;
}

.mockup-insights__bar {
  width: 100%;
  max-width: 16px;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}

.mockup-insights__bar--primary {
  background: var(--oasis-blue, #0066CC);
}

.mockup-insights__bar--secondary {
  background: var(--oasis-cyan, #00A3E0);
  opacity: 0.5;
}

.mockup-insights__bar-label {
  font-size: 6px;
  color: var(--oasis-text-medium, #666);
  margin-top: 2px;
}

/* Donut Chart */
.mockup-insights__donut-chart {
  flex: 1;
  background: var(--oasis-bg-light, #F8F9FC);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mockup-insights__donut-chart-title {
  font-size: 8px;
  font-weight: 600;
  color: var(--oasis-text-medium, #666);
  margin-bottom: 8px;
  align-self: flex-start;
}

.mockup-insights__donut {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: relative;
  margin-bottom: 8px;
}

.mockup-insights__donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--oasis-bg-light, #F8F9FC);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
}

.mockup-insights__donut-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.mockup-insights__donut-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 7px;
  color: var(--oasis-text-medium, #666);
}

.mockup-insights__donut-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   MODULE MOCKUP: CONNECT (DATEV Connection)
   ═══════════════════════════════════════════ */
.mockup-connect {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #E8E8EC;
  overflow: hidden;
  font-size: 9px;
}

.mockup-connect__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--oasis-bg-light, #F8F9FC);
  border-bottom: 1px solid #E8E8EC;
}

.mockup-connect__logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: #006C3B;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  flex-shrink: 0;
}

.mockup-connect__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--oasis-text-dark, #1A1A2E);
}

.mockup-connect__status-badge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
}

.mockup-connect__status-badge--connected {
  background: rgba(0, 201, 167, 0.1);
  color: var(--oasis-mint, #00C9A7);
}

.mockup-connect__status-badge--disconnected {
  background: rgba(255, 95, 87, 0.1);
  color: #FF5F57;
}

.mockup-connect__status-badge--syncing {
  background: rgba(255, 152, 0, 0.1);
  color: #FF9800;
}

.mockup-connect__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.mockup-connect__status-dot--green { background: var(--oasis-mint, #00C9A7); }
.mockup-connect__status-dot--red { background: #FF5F57; }
.mockup-connect__status-dot--orange { background: #FF9800; }

.mockup-connect__body {
  padding: 12px 14px;
}

.mockup-connect__services {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mockup-connect__service {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--oasis-bg-light, #F8F9FC);
  border-radius: 6px;
}

.mockup-connect__service-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}

.mockup-connect__service-name {
  font-size: 8px;
  font-weight: 600;
  color: var(--oasis-text-dark, #1A1A2E);
  flex: 1;
}

.mockup-connect__service-status {
  font-size: 7px;
  font-weight: 600;
}

.mockup-connect__service-status--ok {
  color: var(--oasis-mint, #00C9A7);
}

.mockup-connect__service-status--error {
  color: #FF5F57;
}

.mockup-connect__service-status--pending {
  color: #FF9800;
}

.mockup-connect__sync {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #E8E8EC;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mockup-connect__sync-label {
  font-size: 8px;
  color: var(--oasis-text-medium, #666);
}

.mockup-connect__sync-time {
  font-size: 8px;
  font-weight: 600;
  color: var(--oasis-text-dark, #1A1A2E);
}

/* ═══════════════════════════════════════════
   RESPONSIVE MOCKUP SCALING
   ═══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .mockup-browser {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .mockup-browser {
    transform: scale(0.85);
    transform-origin: top center;
  }
  .mockup-phone {
    width: 230px;
  }
  .module-showcase__tab {
    padding: 10px 12px;
    font-size: 12px;
  }
  .mockup-email,
  .mockup-chat-room,
  .mockup-files,
  .mockup-vault {
    flex-direction: column;
  }
  .mockup-email__folders,
  .mockup-email__list,
  .mockup-chat-room__channels,
  .mockup-files__tree,
  .mockup-vault__nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #E8E8EC;
    max-height: 80px;
    overflow-y: auto;
  }
  .mockup-insights__charts {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .mockup-browser {
    transform: scale(0.7);
    transform-origin: top center;
  }
  .mockup-phone {
    width: 220px;
  }
  .module-showcase__tabs {
    gap: 0;
  }
  .module-showcase__tab {
    padding: 8px 10px;
    font-size: 11px;
  }
  .module-showcase__panel {
    padding: 14px;
  }
}

/* ═══════════════════════════════════════════
   INTERACTIVE MODULE STYLES
   ═══════════════════════════════════════════ */

/* Clickable items in mockups */
[data-contact], [data-channel], [data-folder], [data-email],
[data-vault-cat], [data-bulletin], [data-day],
[data-action], [data-view], [data-step] {
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

/* Active contact/channel/folder highlight */
.bridge-contact--active,
.tc-channel--active,
.email-folder--active,
.vault-cat--active {
  background: rgba(0, 102, 204, 0.08) !important;
  border-left: 3px solid var(--oasis-blue, #0066CC) !important;
}

/* Toast notification */
.mockup-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1A1A2E;
  color: white;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  z-index: 99999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease;
}

/* Timer display */
.mockup-timer {
  font-variant-numeric: tabular-nums;
}

/* Scrollable insights container */
.mockup-scrollable {
  overflow-y: auto;
  max-height: 420px;
  scrollbar-width: thin;
}

.mockup-scrollable::-webkit-scrollbar {
  width: 4px;
}

.mockup-scrollable::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}

/* License modal overlay */
.license-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

/* ============================================
   Flow Interactive — Drag & Drop + Modal
   ============================================ */

/* Flow Interactive */
.mockup-flow__card[draggable="true"] { cursor: grab; transition: opacity 0.2s ease, transform 0.2s ease; }
.mockup-flow__card[draggable="true"]:active { cursor: grabbing; opacity: 0.6; }
.mockup-flow__col.drag-over { background: rgba(0,163,224,0.08); border-radius: 6px; }
.mockup-flow__card.dragging { opacity: 0.4; transform: scale(0.95); }

/* Flow Modal */
.flow-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.flow-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.flow-modal__content { position: relative; background: white; border-radius: 12px; padding: 28px; max-width: 440px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.2); z-index: 1; animation: flowModalIn 0.25s ease; }
@keyframes flowModalIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.flow-modal__header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.flow-modal__id { font-size: 0.75rem; font-weight: 600; color: var(--oasis-text-medium); background: var(--oasis-bg-light); padding: 2px 8px; border-radius: 4px; }
.flow-modal__priority { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.flow-modal__close { margin-left: auto; font-size: 1.5rem; color: var(--oasis-text-medium); background: none; border: none; cursor: pointer; line-height: 1; }
.flow-modal__close:hover { color: var(--oasis-text-dark); }
.flow-modal__title { font-size: 1.15rem; margin-bottom: 20px; }
.flow-modal__field { font-size: 0.9rem; margin-bottom: 8px; color: var(--oasis-text-medium); }
.flow-modal__field strong { color: var(--oasis-text-dark); }
.flow-modal__desc { font-size: 0.85rem; color: var(--oasis-text-medium); line-height: 1.6; background: var(--oasis-bg-light); padding: 12px; border-radius: 8px; margin-top: 8px; }
.flow-modal__actions { margin-top: 20px; display: flex; gap: 10px; }
.flow-modal__btn { padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer; border: none; transition: opacity 0.2s; }
.flow-modal__btn:hover { opacity: 0.85; }
.flow-modal__btn--move { background: var(--oasis-gradient-primary); color: white; }


/* ═══════════════════════════════════════════
   EXTRACTED FROM MODULE MOCKUPS
   ═══════════════════════════════════════════ */

  
  .module-showcase__content h2 { font-size: 22px; color: var(--oasis-text-dark); font-weight: 700; text-align: center; }

  /* ── BROWSER FRAME ── */
  .mockup-browser { border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.1); background: #fff; max-width: 900px; width: 100%; font-size: 11px; }
  .mockup-browser__bar { background: #E8E8EC; padding: 10px 16px; display: flex; align-items: center; gap: 12px; height: 36px; }
  .mockup-browser__dots { display: flex; gap: 6px; }
  .mockup-browser__dot { width: 10px; height: 10px; border-radius: 50%; }
  .mockup-browser__dot--red { background: #FF5F57; }
  .mockup-browser__dot--yellow { background: #FFBD2E; }
  .mockup-browser__dot--green { background: #28CA41; }
  .mockup-browser__url { flex: 1; background: #fff; border-radius: 4px; padding: 4px 12px; font-size: 10px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
  .mockup-browser__url-lock { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; flex-shrink: 0; }
  .mockup-browser__url-lock svg { width: 10px; height: 10px; color: #999; }
  .mockup-browser__content { display: flex; min-height: 440px; overflow: hidden; }

  /* ── OASIS Sidebar ── */
  .mockup-app-sidebar { width: 48px; background: #fff; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; align-items: center; padding: 10px 0 8px; gap: 2px; flex-shrink: 0; }
  .mockup-app-sidebar__logo { width: 26px; height: 26px; background: var(--oasis-gradient-primary); clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); margin-bottom: 10px; flex-shrink: 0; }
  .mockup-app-sidebar__nav { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; width: 100%; }
  .mockup-app-sidebar__item { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(0,0,0,0.35); transition: all 0.2s; flex-shrink: 0; cursor: pointer; }
  .mockup-app-sidebar__item--active { background: rgba(0,102,204,0.1); color: var(--oasis-blue); }
  .mockup-app-sidebar__item i, .mockup-app-sidebar__item svg { width: 14px; height: 14px; }
  .mockup-app-sidebar__divider { width: 24px; height: 1px; background: #E5E7EB; margin: 4px 0; flex-shrink: 0; }
  .mockup-app-sidebar__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--oasis-gradient-primary); margin-top: auto; display: flex; align-items: center; justify-content: center; color: white; font-size: 8px; font-weight: 700; flex-shrink: 0; }

  /* ── App Body / Header ── */
  .mockup-app-
  .mockup-app-header { height: 36px; background: #fff; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; flex-shrink: 0; }
  .mockup-app-header__left { display: flex; align-items: center; gap: 8px; }
  .mockup-app-header__module-name { font-size: 11px; font-weight: 700; color: var(--oasis-text-dark); }
  .mockup-app-header__right { display: flex; align-items: center; gap: 8px; }
  .mockup-app-header__search { background: #F5F5F5; border-radius: 6px; padding: 3px 8px; font-size: 8px; color: #bbb; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
  .mockup-app-header__icon { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--oasis-text-medium); cursor: pointer; }
  .mockup-app-header__avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--oasis-gradient-primary); display: flex; align-items: center; justify-content: center; color: white; font-size: 7px; font-weight: 700; }

    

    

    

    .module-showcase__content h1 {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--oasis-text-dark);
      text-align: center;
    }
    .module-showcase__content h1 span { color: var(--oasis-blue); }

    .mockup-section {
      width: 100%;
      max-width: 800px;
    }

    .mockup-section__title {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--oasis-text-medium);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 12px;
      padding-left: 4px;
    }

    /* ── Browser Frame ── */
    .mockup-browser {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.1);
      background: #fff;
      font-size: 11px;
    }
    .mockup-browser__bar {
      background: #E8E8EC;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      height: 36px;
    }
    .mockup-browser__dots { display: flex; gap: 6px; }
    .mockup-browser__dot { width: 10px; height: 10px; border-radius: 50%; }
    .mockup-browser__dot--red { background: #FF5F57; }
    .mockup-browser__dot--yellow { background: #FFBD2E; }
    .mockup-browser__dot--green { background: #28CA41; }
    .mockup-browser__url {
      flex: 1; background: #fff; border-radius: 4px; padding: 4px 12px;
      font-size: 10px; color: #888; white-space: nowrap; overflow: hidden;
      text-overflow: ellipsis; display: flex; align-items: center; gap: 5px;
    }
    .mockup-browser__url-lock {
      display: inline-flex; align-items: center; justify-content: center;
      width: 12px; height: 12px; flex-shrink: 0;
    }
    .mockup-browser__url-lock svg { width: 10px; height: 10px; color: #999; }
    .mockup-browser__content {
      display: flex; min-height: 480px; overflow: hidden;
    }

    /* ── Sidebar ── */
    .mockup-app-sidebar {
      width: 48px; background: #fff; border-right: 1px solid #E5E7EB;
      display: flex; flex-direction: column; align-items: center;
      padding: 10px 0 8px; gap: 2px; flex-shrink: 0;
    }
    .mockup-app-sidebar__logo {
      width: 26px; height: 26px; background: var(--oasis-gradient-primary);
      clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
      margin-bottom: 10px; flex-shrink: 0;
    }
    .mockup-app-sidebar__nav {
      display: flex; flex-direction: column; align-items: center;
      gap: 1px; flex: 1; width: 100%;
    }
    .mockup-app-sidebar__item {
      width: 34px; height: 34px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      color: rgba(0,0,0,0.35); transition: all 0.2s; flex-shrink: 0; cursor: pointer;
    }
    .mockup-app-sidebar__item:hover { background: rgba(0,0,0,0.04); }
    .mockup-app-sidebar__item--active {
      background: rgba(0,102,204,0.1); color: var(--oasis-blue);
    }
    .mockup-app-sidebar__divider {
      width: 24px; height: 1px; background: #E5E7EB; margin: 4px 0; flex-shrink: 0;
    }
    .mockup-app-sidebar__avatar {
      width: 26px; height: 26px; border-radius: 50%;
      background: var(--oasis-gradient-primary); margin-top: auto;
      display: flex; align-items: center; justify-content: center;
      color: white; font-size: 8px; font-weight: 700; flex-shrink: 0;
    }

    /* ── App Body ── */
    .mockup-app-
    .mockup-app-header {
      height: 36px; background: #fff; border-bottom: 1px solid #E5E7EB;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 12px; flex-shrink: 0;
    }
    .mockup-app-header__left { display: flex; align-items: center; gap: 8px; }
    .mockup-app-header__module-name {
      font-size: 11px; font-weight: 700; color: var(--oasis-text-dark);
    }
    .mockup-app-header__right { display: flex; align-items: center; gap: 8px; }
    .mockup-app-header__icon {
      width: 22px; height: 22px; border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      color: var(--oasis-text-medium);
    }
    .mockup-app-header__avatar {
      width: 22px; height: 22px; border-radius: 50%;
      background: var(--oasis-gradient-primary);
      display: flex; align-items: center; justify-content: center;
      color: white; font-size: 7px; font-weight: 700;
    }

    /* ── Action buttons ── */
    .track-btn {
      padding: 6px 14px; border-radius: 6px; font-size: 9px; font-weight: 600;
      text-align: center; display: flex; align-items: center; gap: 4px;
      cursor: pointer; transition: all 0.2s; border: none; outline: none;
      user-select: none;
    }
    .track-btn:active { transform: scale(0.97); }
    .track-btn--red { background: #FF5F57; color: #fff; }
    .track-btn--red:hover { background: #e04a43; }
    .track-btn--gray { background: #f0f0f0; color: var(--oasis-text-medium); }
    .track-btn--gray:hover { background: #e4e4e4; }
    .track-btn--green { background: #28CA41; color: #fff; }
    .track-btn--green:hover { background: #22b53a; }
    .track-btn--blue { background: var(--oasis-blue); color: #fff; }
    .track-btn--blue:hover { background: #0055aa; }
    .track-btn--resume { background: var(--oasis-cyan); color: #fff; }
    .track-btn--resume:hover { background: #008ec5; }

    /* ── Weekly bar chart ── */
    .track-bar {
      transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ── Workflow step indicators ── */
    .wf-step-circle {
      width: 22px; height: 22px; border-radius: 50%;
      font-size: 9px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.3s;
    }
    .wf-step-circle--completed { background: var(--oasis-mint); color: #fff; }
    .wf-step-circle--active { background: var(--oasis-blue); color: #fff; }
    .wf-step-circle--pending { background: #ddd; color: #999; }

    .wf-step-label {
      font-size: 8px; font-weight: 600; transition: color 0.3s;
    }
    .wf-step-label--completed { color: var(--oasis-mint); }
    .wf-step-label--active { color: var(--oasis-blue); font-weight: 700; }
    .wf-step-label--pending { color: var(--oasis-text-medium); }

    .wf-step-line {
      width: 24px; height: 2px; margin: 0 2px; transition: background 0.3s;
    }
    .wf-step-line--completed { background: var(--oasis-mint); }
    .wf-step-line--pending { background: #ddd; }

    /* ── Workflow content panels ── */
    .wf-panel { display: none; }
    .wf-panel--active { display: block; }

    /* ── Workflow nav buttons ── */
    .wf-nav-btn {
      padding: 5px 14px; border-radius: 6px; font-size: 9px; font-weight: 600;
      display: flex; align-items: center; gap: 4px; cursor: pointer;
      transition: all 0.2s; border: none; outline: none; user-select: none;
    }
    .wf-nav-btn:active { transform: scale(0.97); }
    .wf-nav-btn--back { background: #f0f0f0; color: var(--oasis-text-medium); }
    .wf-nav-btn--back:hover { background: #e4e4e4; }
    .wf-nav-btn--next { background: var(--oasis-blue); color: #fff; }
    .wf-nav-btn--next:hover { background: #0055aa; }
    .wf-nav-btn--disabled { opacity: 0.4; pointer-events: none; }
    .wf-nav-btn--submit { background: var(--oasis-mint); color: #fff; }
    .wf-nav-btn--submit:hover { background: #00b396; }

    /* ── Checklist toggle ── */
    .wf-check {
      width: 22px; height: 22px; border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.2s; flex-shrink: 0;
    }
    .wf-check--done { background: var(--oasis-mint); color: #fff; }
    .wf-check--pending { background: #FF9800; color: #fff; }
    .wf-check--upload { background: var(--oasis-cyan); color: #fff; }
    .wf-check--open { background: #ddd; color: #999; }

    /* ── Modal overlay ── */
    .license-modal-overlay {
      display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.5); z-index: 9999;
      justify-content: center; align-items: center;
    }
    .license-modal-overlay--visible { display: flex; }
    .license-modal {
      background: #fff; border-radius: 12px; padding: 28px 32px;
      max-width: 420px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
      text-align: center; animation: modalIn 0.3s ease-out;
    }
    @keyframes modalIn {
      from { opacity: 0; transform: translateY(20px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .license-modal__icon {
      width: 48px; height: 48px; border-radius: 50%;
      background: rgba(0,102,204,0.1); margin: 0 auto 16px;
      display: flex; align-items: center; justify-content: center;
    }
    .license-modal__title {
      font-size: 16px; font-weight: 700; color: var(--oasis-text-dark); margin-bottom: 8px;
    }
    .license-modal__text {
      font-size: 13px; color: var(--oasis-text-medium); line-height: 1.6; margin-bottom: 20px;
    }
    .license-modal__link {
      display: inline-block; background: var(--oasis-gradient-primary); color: #fff;
      padding: 10px 24px; border-radius: 8px; font-size: 13px; font-weight: 600;
      text-decoration: none; transition: opacity 0.2s; margin-bottom: 8px;
    }
    .license-modal__link:hover { opacity: 0.9; }
    .license-modal__close {
      display: block; margin: 8px auto 0; font-size: 12px; color: var(--oasis-text-medium);
      cursor: pointer; background: none; border: none; padding: 4px;
    }
    .license-modal__close:hover { color: var(--oasis-text-dark); }

    /* ── Upload button mockup ── */
    .upload-btn {
      padding: 4px 10px; border-radius: 4px; font-size: 8px; font-weight: 600;
      background: rgba(0,102,204,0.08); color: var(--oasis-blue);
      cursor: pointer; transition: all 0.2s; border: none; display: inline-flex;
      align-items: center; gap: 3px;
    }
    .upload-btn:hover { background: rgba(0,102,204,0.15); }

    /* ── Pulse animation for timer ── */
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }
    .pulse-dot { animation: pulse-dot 1.5s ease-in-out infinite; }

    /* ── Pause state styles ── */
    @keyframes pulse-pause {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }
    .track-timer--paused {
      animation: pulse-pause 1.5s ease-in-out infinite;
      color: #FF9800 !important;
    }

    
    
    
    .demo-label span {
      background: var(--oasis-gradient-primary, linear-gradient(135deg, #0066CC, #00A3E0));
      color: #fff;
      padding: 2px 10px;
      border-radius: 4px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* ── otti typing indicator animation ── */
    @keyframes ottiBounce {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
      30% { transform: translateY(-4px); opacity: 1; }
    }
    #otti-typing .dot:nth-child(1) { animation: ottiBounce 1.4s infinite 0s; }
    #otti-typing .dot:nth-child(2) { animation: ottiBounce 1.4s infinite 0.2s; }
    #otti-typing .dot:nth-child(3) { animation: ottiBounce 1.4s infinite 0.4s; }

    /* ── Voice waveform animation ── */
    @keyframes waveBar {
      0%, 100% { transform: scaleY(0.3); }
      50% { transform: scaleY(1); }
    }
    #voice-waveform .wave-bar {
      animation-play-state: paused;
    }
    #voice-waveform.active .wave-bar {
      animation-play-state: running;
    }

    /* ── Voice transcript cursor blink ── */
    @keyframes cursorBlink {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0; }
    }
    .cursor-blink {
      animation: cursorBlink 1s infinite;
      color: var(--oasis-cyan, #00A3E0);
      font-weight: 700;
    }

    /* ── Scroll indicator pulse ── */
    @keyframes scrollPulse {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }
    .scroll-hint {
      animation: scrollPulse 2s infinite;
    }

    /* ── Spinner for generic otti response ── */
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* ── CSS Custom Properties ── */
    

    
    

    /* h2.section-title rule removed — was a global override from mockup extraction
       that caused negative margin overlap on ALL section titles */

    /* ── Browser Frame ── */
    .mockup-browser {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.1);
      background: #fff;
      max-width: 820px;
      width: 100%;
      font-size: 11px;
    }
    .mockup-browser__bar {
      background: #E8E8EC;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      height: 36px;
    }
    .mockup-browser__dots { display: flex; gap: 6px; }
    .mockup-browser__dot { width: 10px; height: 10px; border-radius: 50%; }
    .mockup-browser__dot--red { background: #FF5F57; }
    .mockup-browser__dot--yellow { background: #FFBD2E; }
    .mockup-browser__dot--green { background: #28CA41; }
    .mockup-browser__url {
      flex: 1;
      background: #fff;
      border-radius: 4px;
      padding: 4px 12px;
      font-size: 10px;
      color: #888;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .mockup-browser__url-lock {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 12px; height: 12px;
      flex-shrink: 0;
    }
    .mockup-browser__content {
      display: flex;
      min-height: 420px;
      overflow: hidden;
    }

    /* ── OASIS Sidebar ── */
    .mockup-app-sidebar {
      width: 48px;
      background: #fff;
      border-right: 1px solid #E5E7EB;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 0 8px;
      gap: 2px;
      flex-shrink: 0;
    }
    .mockup-app-sidebar__logo {
      width: 26px; height: 26px;
      background: var(--oasis-gradient-primary);
      clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
      margin-bottom: 10px;
      flex-shrink: 0;
    }
    .mockup-app-sidebar__nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      flex: 1;
      width: 100%;
    }
    .mockup-app-sidebar__item {
      width: 34px; height: 34px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(0,0,0,0.35);
      transition: all 0.2s;
      flex-shrink: 0;
    }
    .mockup-app-sidebar__item--active {
      background: rgba(0,102,204,0.1);
      color: var(--oasis-blue);
    }
    .mockup-app-sidebar__divider {
      width: 24px; height: 1px;
      background: #E5E7EB;
      margin: 4px 0;
      flex-shrink: 0;
    }
    .mockup-app-sidebar__avatar {
      width: 26px; height: 26px;
      border-radius: 50%;
      background: var(--oasis-gradient-primary);
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 8px;
      font-weight: 700;
      flex-shrink: 0;
    }

    /* ── App Body & Header ── */
    .mockup-app-
    .mockup-app-header {
      height: 36px;
      background: #fff;
      border-bottom: 1px solid #E5E7EB;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      flex-shrink: 0;
    }
    .mockup-app-header__left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .mockup-app-header__module-name {
      font-size: 11px;
      font-weight: 700;
      color: var(--oasis-text-dark);
    }
    .mockup-app-header__right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .mockup-app-header__search {
      background: #F5F5F5;
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 8px;
      color: #bbb;
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }
    .mockup-app-header__icon {
      width: 22px; height: 22px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--oasis-text-medium);
    }
    .mockup-app-header__avatar {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--oasis-gradient-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 7px;
      font-weight: 700;
    }

    /* ── Animations ── */
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }