/* Çiya theme v3 — Impreza's look (light sections, ink-black bars, mint accent, violet hero,
   Catamaran type) with DosyaMail's softness (18px radii, filled inputs, tonal cards, Almarai for Arabic).
   Applied over Element's LIGHT theme. */

@font-face { font-family: "Catamaran"; font-weight: 300; font-display: swap; src: url("fonts/catamaran-300.woff2") format("woff2"); }
@font-face { font-family: "Catamaran"; font-weight: 400; font-display: swap; src: url("fonts/catamaran-400.woff2") format("woff2"); }
@font-face { font-family: "Catamaran"; font-weight: 500; font-display: swap; src: url("fonts/catamaran-500.woff2") format("woff2"); }
@font-face { font-family: "Catamaran"; font-weight: 600; font-display: swap; src: url("fonts/catamaran-600.woff2") format("woff2"); }
@font-face { font-family: "Catamaran"; font-weight: 700; font-display: swap; src: url("fonts/catamaran-700.woff2") format("woff2"); }
@font-face { font-family: "Catamaran"; font-weight: 800; font-display: swap; src: url("fonts/catamaran-800.woff2") format("woff2"); }
/* Arabic / Kurdish / Persian glyphs: Almarai (DosyaMail), then Vazirmatn */
@font-face { font-family: "Almarai"; font-weight: 400; font-display: swap; src: url("fonts/almarai-400.ttf") format("truetype"); }
@font-face { font-family: "Almarai"; font-weight: 700; font-display: swap; src: url("fonts/almarai-700.ttf") format("truetype"); }
@font-face { font-family: "Vazirmatn"; font-weight: 400; font-display: swap; src: url("fonts/vazirmatn-400.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-weight: 700; font-display: swap; src: url("fonts/vazirmatn-700.woff2") format("woff2"); }

:root {
  --ciya-font: "Catamaran", "Almarai", "Vazirmatn", system-ui, sans-serif;
  /* Impreza */
  --ink: #0f1419; --ink-2: #141b1e; --ink-3: #1b2328;
  --slate: #363b3f; --gray: #6b7378; --muted: #8a9399;
  --cloud: #f8f9fa; --cloud-2: #edf0f2; --cloud-3: #e3e6e8; --white: #ffffff;
  --mint: #00bf80; --mint-2: #19d994; --mint-ink: #0a7a54; --mint-dim: rgba(0,191,128,.10);
  --violet: #6d28d9; --violet-2: #5b21b6; --lilac: #e6d6ff; --lilac-2: #d6c0ff;
  /* DosyaMail */
  --r: 14px; --r-lg: 18px; --field: #f1f4f9; --line: #dfe4ea;
}

/* ---------- design tokens (light) ---------- */
.cpd-theme-light, .mx_Theme_light, :root {
  --cpd-font-family-sans: var(--ciya-font) !important;
  --cpd-color-bg-canvas-default: var(--cloud) !important;
  --cpd-color-bg-canvas-default-level-1: var(--white) !important;
  --cpd-color-bg-subtle-primary: var(--cloud-3) !important;
  --cpd-color-bg-subtle-secondary: var(--cloud-2) !important;
  --cpd-color-bg-subtle-secondary-level-0: var(--cloud-2) !important;
  --cpd-color-bg-action-primary-rest: var(--mint) !important;
  --cpd-color-bg-action-primary-hovered: var(--mint-2) !important;
  --cpd-color-bg-action-primary-pressed: #00a66f !important;
  --cpd-color-bg-accent-rest: var(--mint) !important;
  --cpd-color-bg-accent-hovered: var(--mint-2) !important;
  --cpd-color-text-action-accent: var(--mint-ink) !important;
  --cpd-color-text-action-primary: var(--ink) !important;
  --cpd-color-icon-accent-primary: var(--mint) !important;
  --cpd-color-icon-accent-tertiary: var(--mint) !important;
  --cpd-color-icon-on-solid-primary: var(--white) !important;
  --cpd-color-text-on-solid-primary: var(--white) !important;
  --cpd-color-border-interactive-primary: var(--line) !important;
  --cpd-color-border-interactive-secondary: #c9d1d9 !important;
  --cpd-color-border-focused: var(--mint) !important;
  --cpd-color-bg-badge-accent: var(--mint) !important;
  --cpd-color-text-badge-accent: var(--white) !important;
  --cpd-color-text-primary: var(--slate) !important;
  --cpd-color-text-secondary: var(--gray) !important;
  --cpd-color-icon-primary: var(--slate) !important;
  --cpd-color-icon-secondary: var(--gray) !important;
  --cpd-color-icon-tertiary: var(--muted) !important;
  --accent: var(--mint) !important; --accent-alt: var(--mint-ink) !important;
  --background: var(--cloud) !important; --panels: var(--white) !important; --secondary-content: var(--gray) !important;
}
body { font-family: var(--ciya-font) !important; color: var(--slate); }
h1, h2, h3, .mx_Heading_h1, .mx_Heading_h2, .mx_Heading_h3 { font-weight: 800 !important; color: var(--slate); }
.mx_AccessibleButton_kind_primary {
  background: var(--mint) !important; color: var(--white) !important; font-weight: 800 !important;
  border-radius: var(--r) !important; text-transform: uppercase; letter-spacing: .05em; font-size: 13px !important; min-height: 44px;
}
.mx_AccessibleButton_kind_primary:hover { background: var(--mint-2) !important; }
.mx_AccessibleButton_kind_secondary, .mx_AccessibleButton_kind_primary_outline {
  background: var(--white) !important; color: var(--mint-ink) !important; border: 1.5px solid var(--mint) !important;
  border-radius: var(--r) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; font-size: 13px !important;
}
.mx_AccessibleButton_kind_secondary:hover { background: var(--mint-dim) !important; }
.mx_AccessibleButton_kind_danger, .mx_AccessibleButton_kind_danger_outline { border-radius: var(--r) !important; }

/* ======================= SIGN-IN (Impreza hero) ======================= */
.mx_AuthPage { position: relative; overflow: hidden; background: linear-gradient(180deg, #4c1d95 0%, #5b21b6 48%, #6d28d9 100%) !important; }
.mx_AuthPage::before { /* planet, drifting slowly */
  content: ""; position: absolute; width: 62vmax; height: 62vmax; right: -24vmax; top: -32vmax; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #d8ccff 0%, #a78bfa 30%, #7c3aed 62%, rgba(124,58,237,0) 73%);
  opacity: .6; animation: ciya-drift 40s ease-in-out infinite alternate;
}
.mx_AuthPage::after { /* hills */
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -12vh; height: 48vh; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 90% at 20% 100%, #3b0d8a 0 60%, transparent 61%),
    radial-gradient(70% 100% at 70% 110%, #4a1aa0 0 60%, transparent 61%),
    radial-gradient(90% 100% at 50% 130%, #2e0a6e 0 65%, transparent 66%);
}
@keyframes ciya-drift { to { transform: translate(-6vmax, 4vmax) scale(1.06); } }
.mx_AuthPage_modal {
  position: relative; z-index: 1; background: var(--white) !important; border: 0 !important;
  border-radius: 24px !important; box-shadow: 0 50px 100px -40px rgba(0,0,0,.6) !important; overflow: hidden;
  animation: ciya-rise .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ciya-rise { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
.mx_AuthPage_modalBlur, .mx_AuthPage_modal_withBlur { background: transparent !important; backdrop-filter: none !important; }

/* dark Impreza "header" column */
.mx_AuthHeader { background: var(--ink-2) !important; min-width: 270px; padding: 40px 28px !important; display: flex; flex-direction: column; align-items: stretch; }
.mx_AuthHeaderLogo { order: 0; width: 86px !important; height: 86px !important; margin: 0 auto 16px !important; filter: drop-shadow(0 16px 26px rgba(0,191,128,.35)); animation: ciya-float 9s ease-in-out infinite; }
@keyframes ciya-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.mx_AuthHeader::after { order: 1; content: "ÇIYA"; display: block; text-align: center; font-size: 36px; font-weight: 800; letter-spacing: .14em; color: var(--white); }
.mx_AuthHeader::before { order: 2; content: ""; display: block; width: 44px; height: 4px; margin: 10px auto 0; background: var(--mint); border-radius: 2px; }
.mx_AuthHeader .mx_AuthBody_language, .mx_AuthHeader .mx_LanguageSelector { order: 3; margin-top: auto; }
.mx_AuthBody_language .mx_Dropdown_input { background: var(--ink-3) !important; border: 1px solid #2a343a !important; border-radius: var(--r) !important; color: var(--white) !important; }
.mx_AuthBody_language .mx_Dropdown_option { color: var(--white) !important; }

/* light form column (DosyaMail fields) */
.mx_AuthBody { background: var(--white) !important; padding: 44px 46px !important; color: var(--slate) !important; }
.mx_AuthBody h1, .mx_AuthBody h2 { font-size: 36px !important; font-weight: 800 !important; margin: 0 0 4px !important; color: var(--slate) !important; line-height: 1.1; }
.mx_AuthBody h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 14px; background: var(--mint); border-radius: 2px; }
.mx_AuthBody .mx_Field { margin: 18px 0 0 !important; }
.mx_AuthBody .mx_Field input {
  background: var(--field) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important;
  padding: 15px 16px !important; height: auto !important; font-size: 15px !important; color: var(--slate) !important; transition: border-color .15s, box-shadow .15s;
}
.mx_AuthBody .mx_Field input:focus { border: 2px solid var(--mint) !important; box-shadow: none !important; }
.mx_AuthBody .mx_Field label { color: var(--gray) !important; }
.mx_AuthBody .mx_Field_focused label, .mx_AuthBody .mx_Field_labelAlwaysTopLeft label { color: var(--mint-ink) !important; background: var(--white) !important; }
.mx_Login_submit {
  background: var(--mint) !important; color: var(--white) !important; border-radius: var(--r) !important; padding: 16px !important; min-height: 52px;
  font-weight: 800 !important; font-size: 14px !important; text-transform: uppercase; letter-spacing: .08em; margin-top: 24px !important; width: 100%;
  box-shadow: 0 14px 28px -12px rgba(0,191,128,.6); transition: transform .12s, filter .12s;
}
.mx_Login_submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mx_Login_error, .mx_Login_serverError { background: #fff1f1; border: 1px solid #ffb4b4; color: #a80000 !important; border-radius: var(--r); padding: 10px 12px; }
.mx_AuthBody_changeFlow, .mx_Login_forgot, .mx_AuthBody_forgot, .mx_LoginWithQRSection { display: none !important; }
@media (max-width: 760px) {
  .mx_AuthPage_modal { flex-direction: column; }
  .mx_AuthHeader { min-width: 0; padding: 26px !important; }
  .mx_AuthBody { padding: 26px 22px !important; }
}

/* ======================= CHAT SHELL ======================= */
/* Impreza: black bars, light content */
.mx_MatrixChat { background: var(--cloud) !important; }
.mx_SpacePanel { background: var(--ink) !important; border-inline-end: 0; }
.mx_SpacePanel .mx_SpaceButton_name, .mx_SpacePanel .mx_SpaceButton_icon { color: var(--white) !important; }
.mx_SpacePanel .mx_SpaceButton_active .mx_SpaceButton_icon { background: var(--mint) !important; }
.mx_LeftPanel { background: var(--white) !important; border-inline-end: 1px solid var(--line); }
.mx_RoomSearch { background: var(--field) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; }
.mx_RoomList, .mx_RoomListPanel { background: transparent !important; }
.mx_RoomListHeader_title, .mx_RoomListPanel h1 { font-weight: 800 !important; color: var(--slate); }

.mx_RoomListItemView, .mx_RoomTile { border-radius: var(--r) !important; margin: 2px 8px !important; padding: 9px 10px !important; min-height: 64px; }
.mx_RoomListItemView:hover, .mx_RoomTile:hover { background: var(--cloud-2) !important; }
.mx_RoomListItemView_selected, .mx_RoomTile_selected { background: var(--lilac) !important; }
.mx_RoomListItemView_name, .mx_RoomTile_title { font-weight: 700 !important; font-size: 15px !important; color: var(--slate); }
.mx_RoomListItemView_messagePreview, .mx_RoomTile_subtitle { color: var(--gray) !important; font-size: 13px !important; }
.mx_BaseAvatar { border-radius: 50% !important; }
.mx_NotificationBadge_visible { background: var(--mint) !important; color: var(--white) !important; font-weight: 800; }
.mx_RoomListPrimaryFilters .mx_Chip, .mx_RoomListPrimaryFilters button { border-radius: 999px !important; border: 1px solid var(--line) !important; background: var(--white) !important; color: var(--slate) !important; text-transform: uppercase; font-size: 11px !important; letter-spacing: .06em; font-weight: 700 !important; }
.mx_RoomListPrimaryFilters [aria-selected="true"], .mx_RoomListPrimaryFilters .mx_Chip_selected { background: var(--ink) !important; color: var(--white) !important; border-color: var(--ink) !important; }

.mx_RoomHeader { background: var(--ink-2) !important; border-bottom: 0 !important; min-height: 62px; color: var(--white) !important; }
.mx_RoomHeader *, .mx_RoomHeader_heading, .mx_RoomHeader .mx_RoomHeader_name { color: var(--white) !important; }
.mx_RoomHeader_heading { font-weight: 800 !important; }
.mx_RoomHeader .mx_AccessibleButton::before, .mx_RoomHeader svg { color: var(--white) !important; fill: currentColor; }

.mx_RoomView { background: var(--cloud) !important; }
.mx_RoomView_body { background: var(--cloud) !important; }
.mx_RoomView_timeline, .mx_MainSplit, .mx_RoomView_messagePanel { background: transparent !important; }
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line { border-radius: var(--r-lg) !important; background: var(--white) !important; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,20,25,.04); }
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line { background: var(--lilac) !important; border-color: var(--lilac-2); }
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MTextBody { color: var(--slate) !important; }
.mx_EventTile_receiptSent, .mx_EventTile_receiptSending { color: var(--mint-ink); }
.mx_MessageTimestamp { color: var(--muted) !important; }
.mx_DateSeparator { color: var(--gray) !important; }
.mx_DateSeparator_dateContent { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; font-weight: 700; color: var(--gray) !important; }
.mx_NewRoomIntro h2 { font-weight: 800 !important; font-size: 30px !important; color: var(--slate) !important; }
.mx_NewRoomIntro, .mx_GenericEventListSummary { color: var(--gray); }
.mx_EventTileBubble { background: var(--white) !important; border: 1px solid var(--line) !important; border-radius: var(--r) !important; }

/* composer */
.mx_MessageComposer { background: var(--white) !important; border-top: 1px solid var(--line) !important; padding: 10px 12px !important; }
.mx_MessageComposer_wrapper { padding: 0 !important; overflow: visible !important; }
.mx_MessageComposer_row { align-items: center !important; gap: 6px; overflow: visible !important; }
.mx_MessageComposer_row .mx_BasicMessageComposer, .mx_MessageComposer_row .mx_WysiwygComposer {
  background: var(--field) !important; border: 1px solid var(--line) !important; border-radius: 24px !important; padding: 10px 16px !important; min-height: 44px; color: var(--slate) !important;
}
.mx_MessageComposer_e2eIconWrapper { display: none !important; }
.mx_MessageComposer_actions { display: flex !important; align-items: center; gap: 2px; flex: none; overflow: visible !important; }
.mx_MessageComposer_button { width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important; flex: none; }
.mx_MessageComposer_button::before { background-color: var(--gray) !important; }
.mx_MessageComposer_button:hover { background: var(--cloud-2) !important; }
.mx_MessageComposer_button:hover::before { background-color: var(--mint-ink) !important; }
.mx_MessageComposer_sendMessage { background: var(--mint) !important; width: 42px !important; height: 42px !important; min-width: 42px !important; border-radius: 50% !important; flex: none; box-shadow: 0 10px 20px -10px rgba(0,191,128,.8); }
.mx_MessageComposer_sendMessage::before { background-color: var(--white) !important; }
.mx_MessageComposer_voiceMessage::before { background-color: var(--mint-ink) !important; }
.mx_VoiceMessagePrimaryContainer, .mx_VoiceRecordComposerTile { background: var(--mint-dim) !important; border: 1px solid rgba(0,191,128,.4); border-radius: 24px !important; }

/* panels / dialogs (DosyaMail cards) */
.mx_RightPanel { background: var(--white) !important; border-inline-start: 1px solid var(--line); }
.mx_Dialog, .mx_SettingsTab, .mx_UserSettingsDialog, .mx_ContextualMenu { background: var(--white) !important; color: var(--slate) !important; }
.mx_Dialog { border: 0 !important; border-radius: 24px !important; box-shadow: 0 40px 90px -30px rgba(15,20,25,.45) !important; }
.mx_Dialog_title, .mx_Dialog h2 { font-weight: 800 !important; color: var(--slate) !important; }
.mx_Dialog_background { background: rgba(15,20,25,.55) !important; }
.mx_Dialog .mx_Field input, .mx_Dialog input[type=text] { background: var(--field) !important; border-radius: var(--r) !important; }
.mx_TabbedView_tabLabel_active { background: var(--lilac) !important; color: var(--violet-2) !important; border-radius: var(--r) !important; }
.mx_InviteDialog_footer, .mx_InviteDialog_section_hidden_suggestions_disclaimer, .mx_InviteDialog_identityServer { display: none !important; }
.mx_InviteDialog_tile { border-radius: var(--r); }
.mx_InviteDialog_tile:hover { background: var(--lilac) !important; }
.mx_InviteDialog_goButton { background: var(--mint) !important; color: var(--white) !important; border-radius: var(--r) !important; }
.mx_HomePage { background: var(--cloud) !important; }
.mx_HomePage_default_buttons .mx_HomePage_button_createGroup, .mx_HomePage_default_buttons .mx_HomePage_button_explore { display: none !important; }
.mx_HomePage_default_buttons .mx_HomePage_button_sendDm { background: var(--mint) !important; color: var(--white) !important; border-radius: var(--r-lg) !important; font-weight: 800 !important; }
.mx_HomePage h1 { font-weight: 800 !important; font-size: 44px !important; color: var(--slate) !important; }
.mx_HomePage h4 { color: var(--gray) !important; }
.mx_Toast_toast { border-radius: var(--r-lg) !important; }
.ciya-help { background: rgba(54,59,63,.12) !important; }
.ciya-help:hover, .ciya-help:focus-visible { background: var(--mint) !important; color: var(--white) !important; }
.ciya-help-pop { background: var(--ink-2) !important; color: var(--white) !important; border-radius: var(--r) !important; font-family: var(--ciya-font); }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #c9d1d9; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) { .mx_AuthPage::before, .mx_AuthHeaderLogo, .mx_AuthPage_modal { animation: none !important; } }