* {
  box-sizing: border-box;
}

body {
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(212,160,160,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(195,177,212,0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(168,191,160,0.08) 0%, transparent 50%);
  background-color: #FFF8F0;
}

/* Doily border pattern */
.doily-border {
  position: relative;
}
.doily-border::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 12px;
  background: 
    radial-gradient(circle at 10px 0, transparent 8px, #D4A0A0 8px, #D4A0A0 9px, transparent 9px) repeat-x;
  background-size: 20px 12px;
  opacity: 0.5;
}

.doily-avatar {
  position: relative;
  display: inline-block;
}
.doily-avatar::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at 50% 0, transparent 5px, #D4A0A0 5px, #D4A0A0 6px, transparent 6px) repeat,
    radial-gradient(circle at 50% 100%, transparent 5px, #D4A0A0 5px, #D4A0A0 6px, transparent 6px) repeat,
    radial-gradient(circle at 0 50%, transparent 5px, #D4A0A0 5px, #D4A0A0 6px, transparent 6px) repeat,
    radial-gradient(circle at 100% 50%, transparent 5px, #D4A0A0 5px, #D4A0A0 6px, transparent 6px) repeat;
  background-size: 12px 12px;
  opacity: 0.6;
  z-index: 0;
}
.doily-avatar img, .doily-avatar > div {
  position: relative;
  z-index: 1;
}

/* Gingham pattern for recipe cards */
.gingham {
  background-color: #FFF8F0;
  background-image:
    linear-gradient(45deg, #D4A0A020 25%, transparent 25%, transparent 75%, #D4A0A020 75%),
    linear-gradient(45deg, #D4A0A020 25%, transparent 25%, transparent 75%, #D4A0A020 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

/* Polaroid frame */
.polaroid {
  background: white;
  padding: 12px 12px 40px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
  transform: rotate(-1deg);
  transition: transform 0.3s ease;
}
.polaroid:nth-child(even) {
  transform: rotate(1deg);
}
.polaroid:hover {
  transform: rotate(0deg) scale(1.02);
}

/* Warm glow button effect */
.warm-btn {
  transition: all 0.3s ease;
  position: relative;
}
.warm-btn:hover {
  box-shadow: 0 0 20px rgba(212,160,160,0.5), 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
.warm-btn:active {
  transform: translateY(0);
}

/* Floating heart animation */
@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  50% { opacity: 0.8; transform: translateY(-30px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}
.float-heart {
  animation: floatUp 1s ease-out forwards;
  pointer-events: none;
  position: absolute;
  z-index: 50;
}

/* Linen texture on cards */
.linen-card {
  background-color: #FAF0E6;
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3h1v1H1V3zm2-2h1v1H3V1z' fill='%23D4A0A0' fill-opacity='0.06'/%3E%3C/svg%3E");
}

/* Gentle fade-in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* Tab active underline */
.tab-active {
  position: relative;
}
.tab-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: #8B4557;
  border-radius: 2px;
}

/* Chat bubble styles */
.chat-bubble {
  position: relative;
  border-radius: 18px;
  padding: 12px 18px;
  max-width: 80%;
}
.chat-bubble-mine {
  border-bottom-right-radius: 4px;
  margin-left: auto;
}
.chat-bubble-other {
  border-bottom-left-radius: 4px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #FFF8F0;
}
::-webkit-scrollbar-thumb {
  background: #D4A0A0;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #C08080;
}

/* High contrast mode */
body.high-contrast {
  background-color: #FFFFFF;
  color: #000000;
}
body.high-contrast .linen-card,
body.high-contrast .gingham {
  background-image: none;
  background-color: #FFFFFF;
  border: 2px solid #000000;
}

/* Extra large font mode */
body.xl-font {
  font-size: 22px;
}
body.xl-font .text-lg { font-size: 24px; }
body.xl-font .text-xl { font-size: 28px; }
body.xl-font .text-2xl { font-size: 34px; }
body.xl-font .text-3xl { font-size: 40px; }

/* Doily top border for footer */
.doily-top::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 12px;
  background: 
    radial-gradient(circle at 10px 12px, transparent 8px, #D4A0A0 8px, #D4A0A0 9px, transparent 9px) repeat-x;
  background-size: 20px 12px;
  opacity: 0.5;
}

/* Proud level slider */
input[type="range"].proud-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #A8BFA0, #D4A847, #D4A0A0, #8B4557);
  outline: none;
}
input[type="range"].proud-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFF8F0;
  border: 3px solid #8B4557;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Spinner for loading */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1.2s linear infinite;
  border: 3px solid #D4A0A0;
  border-top-color: #8B4557;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}