/* Lovable editor styles - GPT tooltip and element highlighting */
.gpt-selected-tooltip {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  background-color: hsl(225, 88%, 53%);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  display: block;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  margin: -2px 0px;
  border: 1px solid rgba(255,255,255,0.3);
}

/* Hovered state: Uses pseudo-elements for standard elements */
/* Primary hovered instance (directly under mouse) - solid border */
[data-lov-hovered][data-lov-primary]:not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg) {
  position: relative;
}
[data-lov-hovered][data-lov-primary]:not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
  outline: 2px solid hsl(225, 88%, 53%) !important;
  outline-offset: 0 !important;
  z-index: 10000;
  pointer-events: none;
}

/* Secondary hovered instances - dotted border */
[data-lov-hovered]:not([data-lov-primary]):not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg) {
  position: relative;
}
[data-lov-hovered]:not([data-lov-primary]):not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
  outline: 2px dotted hsl(225, 88%, 53%) !important;
  outline-offset: 0 !important;
  z-index: 10000;
  pointer-events: none;
}

/* Selected state: Uses pseudo-elements for standard elements */
/* Primary selected instance (directly clicked) - solid border */
[data-lov-selected][data-lov-primary]:not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg) {
  position: relative;
}
[data-lov-selected][data-lov-primary]:not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
  outline: 1px solid hsl(225, 88%, 53%) !important;
  z-index: 10000;
  pointer-events: none;
}

/* Secondary selected instances - dotted border */
[data-lov-selected]:not([data-lov-primary]):not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg) {
  position: relative;
}
[data-lov-selected]:not([data-lov-primary]):not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
  outline: 1px dotted hsl(225, 88%, 53%) !important;
  z-index: 10000;
  pointer-events: none;
}

/* Primary replaced elements - solid */
:is(input, img, textarea, select, video, audio, iframe, canvas, svg)[data-lov-hovered][data-lov-primary] {
  outline: 2px solid hsl(225, 88%, 53%) !important;
  outline-offset: 0 !important;
}

/* Secondary replaced elements - dotted */
:is(input, img, textarea, select, video, audio, iframe, canvas, svg)[data-lov-hovered]:not([data-lov-primary]) {
  outline: 2px dotted hsl(225, 88%, 53%) !important;
  outline-offset: 0 !important;
}

/* Primary selected replaced elements - solid */
:is(input, img, textarea, select, video, audio, iframe, canvas, svg)[data-lov-selected][data-lov-primary] {
  outline: 1px solid hsl(225, 88%, 53%) !important;
  outline-offset: 0 !important;
}

/* Secondary selected replaced elements - dotted */
:is(input, img, textarea, select, video, audio, iframe, canvas, svg)[data-lov-selected]:not([data-lov-primary]) {
  outline: 1px dotted hsl(225, 88%, 53%) !important;
  outline-offset: 0 !important;
}

/* Remove outline from contenteditable selected elements to avoid conflicts */
[data-lov-selected][contenteditable] {
  outline: none !important;
}

/* Full-width elements use different offset for better visibility */
[data-lov-hovered][data-full-width]:not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg)::before,
[data-lov-selected][data-full-width]:not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg)::before {
  outline-offset: -5px !important;
}

/* Full-width offset for replaced elements */
:is(input, img, textarea, select, video, audio, iframe, canvas, svg):is([data-lov-hovered], [data-lov-selected])[data-full-width] {
  outline-offset: -5px !important;
}

/* Replaced elements inside overflow-hidden parents - hide their outline and style the parent instead */
:is([class*="overflow-hidden"], [class*="overflow-clip"]) > :is(img, video, iframe, canvas):is([data-lov-hovered], [data-lov-selected]) {
  outline: none !important;
}

/* Apply outline to overflow-hidden parent when it contains a hovered/selected replaced element */
:is([class*="overflow-hidden"], [class*="overflow-clip"]):has(> :is(img, video, iframe, canvas)[data-lov-hovered]) {
  outline: 2px solid hsl(225, 88%, 53%) !important;
  outline-offset: 0 !important;
}

:is([class*="overflow-hidden"], [class*="overflow-clip"]):has(> :is(img, video, iframe, canvas)[data-lov-selected]) {
  outline: 1px solid hsl(225, 88%, 53%) !important;
}

/* Child element highlighting on hover - exclude SVGs and replaced elements */
[data-lov-hovered] > *:not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg) {
  position: relative;
}
[data-lov-hovered] > *:not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
  outline: 1px dotted hsl(225, 88%, 53%) !important;
  outline-offset: 1px !important;
  z-index: 10000;
  pointer-events: none;
}

/* Index element border-radius to match iframe */
[data-lov-selected][data-lov-index]:not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg)::before,
[data-lov-hovered][data-lov-index]:not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg)::before {
  border-radius: 0px;
}

@media (min-width: 768px) {
  [data-lov-selected][data-lov-index]:not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg)::before,
  [data-lov-hovered][data-lov-index]:not(input):not(img):not(textarea):not(select):not(video):not(audio):not(iframe):not(canvas):not(svg)::before {
    border-radius: 0.75rem;
  }
}