@import "../styles/ory-elements.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .form-error {
    @apply text-xs text-red-500;
  }

  /* ---- Skills brand identity: 135° diagonal hatch ---- */
  /* group-header band — softer hatch than rows/cards */
  .skill-hatch {
    background-image: var(--hatch-soft);
  }
  .skill-hatch:hover {
    background-image: var(--hatch-accent), var(--hatch-soft);
  }

  /* row: accent hatch that softly slides in from the right edge on hover */
  .skill-row-hatch {
    position: absolute;
    inset: 0 0 0 auto;
    width: 230px;
    z-index: 0;
    background-image: var(--hatch-accent);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 82%);
    mask-image: linear-gradient(90deg, transparent, #000 82%);
    opacity: 0;
    transform: translateX(14px);
    transition:
      opacity 0.2s,
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .group:hover .skill-row-hatch {
    opacity: 0.85;
    transform: none;
  }

  /* card: soft footer band (idle) that grows upward into a full wash on hover */
  .skill-card-hatch {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    z-index: 0;
    background-image: var(--hatch);
    background-position: left bottom;
    opacity: 0.72;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(0deg, #000, transparent);
    mask-image: linear-gradient(0deg, #000, transparent);
    transition:
      height 0.34s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.22s,
      background-image 0.22s;
  }
  .group:hover .skill-card-hatch {
    height: 100%;
    opacity: 0.9;
    background-image: var(--hatch-accent), var(--hatch);
    background-position: left bottom;
  }

  /* ---- Skills responsiveness (container-query driven) ---- */
  /* The page root opts into a size container so rows + toolbar respond to the
     panel width rather than the viewport (correct with the sidebar open). */
  .skills-cq {
    container-type: inline-size;
    container-name: skills;
  }
  /* hide horizontal scrollbar on the toolbar tab strip */
  .no-scrollbar {
    scrollbar-width: none;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Row meta columns drop off progressively as space tightens. */
  @container skills (max-width: 620px) {
    .skill-col-date {
      display: none;
    }
  }
  @container skills (max-width: 520px) {
    .skill-col-scope {
      display: none;
    }
  }
  @container skills (max-width: 430px) {
    .skill-col-source {
      display: none;
    }
  }
  /* Toolbar button text collapses to icons when narrow. */
  @container skills (max-width: 560px) {
    .skills-btn-label {
      display: none;
    }
  }
}

@layer base {
  :root {
    --layout-background: 0 0% 98%;
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --sidebar: 240 10% 96%;
    --text: 220 9% 19%;

    --chat-background: 0 0 98%;

    /* --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%; */
    /* perple */
    /* --primary: 263 44% 46%;
    --primary-foreground: 266 100% 99%; */
    /* blue */

    /* --primary: 238 85.2% 57.6%; */
    /* --primary-foreground: 238 85.2% 93%; */
    --primary: 225 66% 39%; /* #8C9EFF */
    --primary-foreground: 0 0% 100%; /* #FFFFFF */
    --primary-hover: 234 100% 74.7%;

    --accent: 233 100% 70.8%; /* 6A7BFF */
    --accent-foreground: 0 0% 100%; /* #FFFFFF */
    --accent-hover: 227 31.7% 51.2%; /* 5B6CAA */

    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

    /* --secondary: 263 44% 46%;
    --secondary-foreground: 266 100% 99%; */
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* skills brand identity — 135° diagonal hatch */
    --tile-base: #ffffff;
    --hatch: repeating-linear-gradient(
      135deg,
      #f7f7f9,
      #f7f7f9 9px,
      #e7e7ec 9px,
      #e7e7ec 10px
    );
    --hatch-accent: repeating-linear-gradient(
      135deg,
      transparent,
      transparent 9px,
      rgba(34, 82, 179, 0.07) 9px,
      rgba(34, 82, 179, 0.07) 10px
    );
    /* softer hatch for table group headers */
    --hatch-soft: repeating-linear-gradient(
      135deg,
      #fcfcfd,
      #fcfcfd 9px,
      #f1f1f4 9px,
      #f1f1f4 10px
    );
  }
  .dark {
    --layout-background: 240 5.9% 10%;
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --text: 0 0% 100%;
    /* --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%; */

    --chat-background: 240 4% 16%;

    /* perple */
    /* --primary: 263 44% 46%;
    --primary-foreground: 266 100% 99%; */
    --primary: 225 60% 54%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 225 60% 60%;

    --accent: 233 100% 70.8%; /* 6A7BFF */
    --accent-foreground: 224 40% 74%; /* #FFFFFF */
    --accent-hover: 227 31.7% 51.2%; /* 5B6CAA */

    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    /* --secondary: 263 44% 46%;
    --secondary-foreground: 266 100% 99%; */
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* skills brand identity — 135° diagonal hatch (dark) */
    --tile-base: #18181b;
    --hatch: repeating-linear-gradient(
      135deg,
      #1c1c1f,
      #1c1c1f 9px,
      #26262b 9px,
      #26262b 10px
    );
    --hatch-accent: repeating-linear-gradient(
      135deg,
      transparent,
      transparent 9px,
      rgba(120, 150, 235, 0.1) 9px,
      rgba(120, 150, 235, 0.1) 10px
    );
    /* softer hatch for table group headers */
    --hatch-soft: repeating-linear-gradient(
      135deg,
      #1a1a1d,
      #1a1a1d 9px,
      #212126 9px,
      #212126 10px
    );
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }

  h1 {
    @apply text-xl font-bold md:text-2xl;
  }

  h2 {
    @apply text-lg font-semibold md:text-xl;
  }

  h3 {
    @apply text-[16px] font-[500];
  }

  .content-section {
    @apply space-y-4 pb-[20px] md:pb-[20px] lg:pb-[25px];
  }

  .main-content {
    @apply h-full space-y-2 overflow-auto px-4 py-5;
  }

  .card {
    @apply rounded-md bg-white dark:bg-zinc-800;
    @apply cursor-pointer p-[14px] md:p-[16px] lg:p-[18px];
    @apply border border-zinc-200 dark:border-zinc-700;
    @apply transition-all duration-300 hover:shadow-md;
  }

  .card-shadow {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  }

  /* Brand identity: diagonal hatch. `bg-hatch-on-color` lays light stripes
     over a filled colour surface (e.g. agent avatars); `bg-hatch-soft`
     is a faint neutral texture for panels (e.g. the Test surface). */
  .bg-hatch-on-color {
    background-image: repeating-linear-gradient(
      135deg,
      transparent,
      transparent 9px,
      rgba(255, 255, 255, 0.2) 9px,
      rgba(255, 255, 255, 0.2) 10px
    );
  }

  .bg-hatch-soft {
    background-image: repeating-linear-gradient(
      135deg,
      hsl(var(--muted) / 0.45),
      hsl(var(--muted) / 0.45) 9px,
      hsl(var(--border) / 0.6) 9px,
      hsl(var(--border) / 0.6) 10px
    );
  }

  .label {
    @apply flex items-center gap-[5px];
  }

  .label-icon {
    stroke-width: 1.5;
    @apply h-4 w-4 text-primary dark:text-accent-foreground;
  }

  .note {
    @apply text-xs text-zinc-400;
  }

  .form-content {
    @apply space-y-5;
  }

  .small-link {
    @apply text-xs text-primary dark:text-accent-foreground;
    @apply flex items-center gap-2;
    @apply transition-all duration-300 hover:text-accent;
  }

  /* Force select content to match trigger width */
  [data-radix-select-content] {
    width: var(--radix-select-trigger-width) !important;
    min-width: var(--radix-select-trigger-width) !important;
  }

  /* Force popover content to match trigger width */
  [data-radix-popover-content] {
    width: var(--radix-popover-trigger-width) !important;
    min-width: var(--radix-popover-trigger-width) !important;
  }

  /* Additional popover width fixes */
  [data-radix-popper-content-wrapper] {
    width: var(--radix-popover-trigger-width) !important;
    min-width: var(--radix-popover-trigger-width) !important;
  }

  /* Force all popover content to match trigger */
  .popover-content-match-trigger {
    width: var(--radix-popover-trigger-width) !important;
    min-width: var(--radix-popover-trigger-width) !important;
  }

  .card-item {
    @apply rounded-md border border-border pr-[7px] transition-colors dark:border-zinc-700;
  }

  .loader {
    aspect-ratio: 1;
    border-radius: 50%;
    animation: spin 1s infinite linear;
    --loader-size: 8px;
    background: 
      radial-gradient(farthest-side, var(--loader-color) 94%,#0000) top/var(--loader-size) var(--loader-size) no-repeat,
      conic-gradient(#0000 30%, var(--loader-color));
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - var(--loader-size)),#000 0);
  }
  .loader-light {
    --loader-color: hsl(0 0% 100%);
  }
  .loader-primary {
    --loader-color: hsl(var(--primary));
  }
  .loader-small {
    --loader-size: 3px;
  }
  .loader-medium {
    --loader-size: 6px;
  }
  .loader-large {
    --loader-size: 8px;
  }
  @keyframes spin{ 
    100%{transform: rotate(1turn)}
  }
}

/* Hide dashed separator for the last message */
.aa-message-wrapper:last-child .aa-dashed {
  display: none;
}
/* Hide dashed when wrapper is immediately before the end marker */
.aa-message-wrapper:has(+ .aa-messages-end) .aa-dashed {
  display: none;
}
/* Hide dashed when the next message is a user message (end of assistant group) */
.aa-message-wrapper:has(+ .aa-user-message) .aa-dashed {
  display: none;
}

/* Sonner Toast Styles */
[data-sonner-toast][data-type="error"] {
  background-color: rgba(254, 226, 226, 0.95) !important;
  color: #dc2626 !important;
  border: none !important;
}

[data-sonner-toast][data-type="success"] {
  background-color: rgba(220, 252, 231, 0.95) !important;
  color: #16a34a !important;
  border: none !important;
}

[data-sonner-toast][data-type="warning"] {
  background-color: rgba(255, 237, 213, 0.95) !important;
  color: #ea580c !important;
  border: none !important;
}

/* Alternative approach using data-state attributes */
[data-sonner-toast][data-state="error"] {
  background-color: rgba(254, 226, 226, 0.95) !important;
  color: #dc2626 !important;
  border: none !important;
}

[data-sonner-toast][data-state="success"] {
  background-color: rgba(220, 252, 231, 0.95) !important;
  color: #16a34a !important;
  border: none !important;
}

[data-sonner-toast][data-state="warning"] {
  background-color: rgba(255, 237, 213, 0.95) !important;
  color: #ea580c !important;
  border: none !important;
}

/* More specific selectors for Sonner */
[data-sonner-toaster] [data-sonner-toast][data-type="error"] {
  background-color: rgba(254, 226, 226, 0.95) !important;
  color: #dc2626 !important;
  border: none !important;
}

[data-sonner-toaster] [data-sonner-toast][data-type="success"] {
  background-color: rgba(220, 252, 231, 0.95) !important;
  color: #16a34a !important;
  border: none !important;
}

[data-sonner-toaster] [data-sonner-toast][data-type="warning"] {
  background-color: rgba(255, 237, 213, 0.95) !important;
  color: #ea580c !important;
  border: none !important;
}

/* Direct class-based approach */
.toaster [data-sonner-toast][data-type="error"] {
  background-color: rgba(254, 226, 226, 0.95) !important;
  color: #dc2626 !important;
  border: none !important;
}

.toaster [data-sonner-toast][data-type="success"] {
  background-color: rgba(220, 252, 231, 0.95) !important;
  color: #16a34a !important;
  border: none !important;
}

.toaster [data-sonner-toast][data-type="warning"] {
  background-color: rgba(255, 237, 213, 0.95) !important;
  color: #ea580c !important;
  border: none !important;
}

/* Override any existing styles with higher specificity */
div[data-sonner-toast][data-type="error"] {
  background-color: rgba(254, 226, 226, 0.95) !important;
  color: #dc2626 !important;
  border: none !important;
}

div[data-sonner-toast][data-type="success"] {
  background-color: rgba(220, 252, 231, 0.95) !important;
  color: #16a34a !important;
  border: none !important;
}

div[data-sonner-toast][data-type="warning"] {
  background-color: rgba(255, 237, 213, 0.95) !important;
  color: #ea580c !important;
  border: none !important;
}

/* Force override with maximum specificity */
body div[data-sonner-toast][data-type="error"] {
  background-color: rgba(254, 226, 226, 0.95) !important;
  color: #dc2626 !important;
  border: none !important;
}

body div[data-sonner-toast][data-type="success"] {
  background-color: rgba(220, 252, 231, 0.95) !important;
  color: #16a34a !important;
  border: none !important;
}

body div[data-sonner-toast][data-type="warning"] {
  background-color: rgba(255, 237, 213, 0.95) !important;
  color: #ea580c !important;
  border: none !important;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* --- Ory Elements Overrides --- */

/* Layout & Spacing */
.ory-elements [data-testid="ory/card"] {
  position: relative !important;
  overflow: visible !important;
  padding: 1.5rem !important;
}

.ory-elements [data-testid="ory/card"] form {
  gap: 0.75rem !important;
}

.ory-elements [data-testid="ory/card"] [data-testid*="ory/form/node"] {
  margin-bottom: 0px !important;
}

/* Spacing for social buttons and other grids */
.ory-elements .grid {
  gap: 0.75rem !important;
}

.ory-elements [data-testid="ory/card"] h2, 
.ory-elements [data-testid="ory/card"] h3 {
  margin-bottom: 1rem !important;
  font-size: 1.25rem !important;
}

/* Footer area */
.ory-elements [data-testid="ory/card"] > div:last-child {
  padding-top: 1rem !important;
  margin-top: 0.5rem !important;
}

/* Hide Ory Badge */
.ory-elements [data-testid="ory/card"] > .absolute {
  display: none !important;
}

/* Typography & General sizing (15px normal) */
.ory-elements input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ory-elements select,
.ory-elements textarea,
.ory-elements button,
.ory-elements input[type="submit"],
.ory-elements label,
.ory-elements [data-testid*="form/node"] label {
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
}

/* Input fields */
.ory-elements input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ory-elements select,
.ory-elements textarea,
.ory-elements button,
.ory-elements input[type="submit"] {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

/* Labels */
.ory-elements label, 
.ory-elements [data-testid*="form/node"] label {
  margin-bottom: 0.125rem !important;
  display: block !important;
}

/* Remove gap between label and input */
.ory-elements [data-testid*="form/node"]:has(label):has(input),
.ory-elements [data-testid*="form/node"]:has(label):has(select),
.ory-elements [data-testid*="form/node"]:has(label):has(textarea),
.ory-elements form > div.flex.flex-col.gap-1:has(label):has(input) {
  gap: 0 !important;
}

/* Main Submit Button & its container */
.ory-elements [data-testid*="ory/form/node"]:has(button[data-testid*="method"]),
.ory-elements [data-testid*="ory/form/node"]:has(button[data-testid*="password"]),
.ory-elements [data-testid*="ory/form/node"]:has(input[type="submit"]),
.ory-elements button[data-testid="ory/form/node/button/method"],
.ory-elements button[data-testid="ory/form/node/button/password"],
.ory-elements input[type="submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #2252b3 !important;
  color: white !important;
  border: none !important;
  width: 100% !important;
  margin-top: 24px !important;
}

.ory-elements button[data-testid="ory/form/node/button/method"]:hover,
.ory-elements button[data-testid="ory/form/node/button/password"]:hover,
.ory-elements input[type="submit"]:hover {
  background-color: #1a3f8a !important;
}

/* Links & Anchors */
.ory-elements [data-testid="ory/form/node/anchor"] {
  text-align: center !important;
  margin-top: 1rem !important;
  display: block !important;
}

.ory-elements [data-testid="ory/form/node/anchor"] a {
  font-size: 0.75rem !important;
  color: #2252b3 !important;
}

.ory-elements a,
.ory-elements [data-testid="ory/form/node/text"],
.ory-elements [data-testid="ory/form/node/button/link"],
.ory-elements [data-testid="ory/form/node/link"] a,
.ory-elements [data-testid="ory/form/node/link/recovery"] a,
.ory-elements [data-testid="ory/form/node/link/registration"] a,
.ory-elements p, 
.ory-elements span {
  font-size: 0.75rem !important;
}

.ory-elements a, 
.ory-elements [data-testid*="link"] a,
.ory-elements button[data-testid="ory/form/node/button/link"] {
  color: #2252b3 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.ory-elements a:hover, 
.ory-elements [data-testid*="link"] a:hover,
.ory-elements button[data-testid="ory/form/node/button/link"]:hover {
  text-decoration: underline !important;
  color: #1a3f8a !important;
}

/* Inputs Focus & Hover States */
.ory-elements input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.ory-elements select:focus,
.ory-elements textarea:focus {
  border-color: #2252b3 !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: hsl(var(--background)) !important;
}

.ory-elements input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
.ory-elements select:hover,
.ory-elements textarea:hover {
  background-color: hsl(var(--background)) !important;
}

/* Password Field Special Handling */
.ory-elements div[data-radix-password-toggle-field-root] > div,
.ory-elements [data-radix-password-toggle-field-root] > div {
  height: 40px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  background-color: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
}

.ory-elements div[data-radix-password-toggle-field-root] > div input,
.ory-elements [data-radix-password-toggle-field-root] > div input {
  border: none !important;
  height: 38px !important;
  padding: 0 0.875rem !important;
  flex: 1 !important;
  background: transparent !important;
  font-size: 0.9375rem !important;
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
}

.ory-elements div[data-radix-password-toggle-field-root] > div button,
.ory-elements [data-radix-password-toggle-field-root] > div button {
  border: none !important;
  height: 38px !important;
  background: transparent !important;
  padding: 0 0.75rem !important;
  box-shadow: none !important;
}

.ory-elements div[data-radix-password-toggle-field-root]:focus-within > div {
  border-color: #2252b3 !important;
  --tw-ring-color: transparent !important;
}

/* Global focus reset for Ory */
.ory-elements *:focus {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
}

/* Horizontal Divider with Circles */
.ory-elements hr {
  height: 1px !important;
  border: none !important;
  background-color: #e2e8f0 !important;
  position: relative !important;
  margin: 1.5rem 0 !important;
  overflow: visible !important;
}

.ory-elements hr::before, 
.ory-elements hr::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 6px !important;
  height: 6px !important;
  background-color: white !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 50% !important;
  z-index: 1 !important;
}

.ory-elements hr::before { left: 0 !important; }
.ory-elements hr::after { right: 0 !important; }

.dark .ory-elements hr {
  background-color: #64748b !important;
}

.dark .ory-elements hr::before, 
.dark .ory-elements hr::after {
  background-color: #3f3f46 !important;
  border-color: #f1f5f9 !important;
}


/* Decorative Corner Crosses (AgentArea style) */
.ory-elements [data-testid="ory/card"]::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  pointer-events: none;
  z-index: 20;
  background: 
    /* Top Left Cross */
    linear-gradient(to right, #2252b3 15px, transparent 0) no-repeat 0 7px / 15px 1px,
    linear-gradient(to bottom, #2252b3 15px, transparent 0) no-repeat 7px 0 / 1px 15px,
    /* Top Right Cross */
    linear-gradient(to left, #2252b3 15px, transparent 0) no-repeat 100% 7px / 15px 1px,
    linear-gradient(to bottom, #2252b3 15px, transparent 0) no-repeat calc(100% - 7px) 0 / 1px 15px,
    /* Bottom Left Cross */
    linear-gradient(to right, #2252b3 15px, transparent 0) no-repeat 0 calc(100% - 7px) / 15px 1px,
    linear-gradient(to top, #2252b3 15px, transparent 0) no-repeat 7px 100% / 1px 15px,
    /* Bottom Right Cross */
    linear-gradient(to left, #2252b3 15px, transparent 0) no-repeat 100% calc(100% - 7px) / 15px 1px,
    linear-gradient(to top, #2252b3 15px, transparent 0) no-repeat calc(100% - 7px) 100% / 1px 15px;
}

/* Mobile Full Screen Styles */
@media (max-width: 640px) {
  .ory-elements [data-testid="ory/card"] {
    width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    max-width: none !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 3rem 1.5rem !important;
    background-color: hsl(var(--background)) !important;
    overflow-y: visible !important;
  }

  .ory-elements [data-testid="ory/card"]::before {
    display: none !important;
  }

  .ory-elements [data-testid="ory/card"] > div {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .login-ory {
    width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    max-width: none !important;
  }
}
