/* static/styles.css — responsive, mobile-first */

:root{
  --bg:#0b0b10; --panel:#15151d; --text:#f3f3f7; --muted:#b6b6c3;
  --accent:#b57bff; --card:#1f1f2b; --border:#2d2d3a;
  --radius:16px; --radius-sm:12px;
  --space-1:6px; --space-2:10px; --space-3:14px; --space-4:16px; --space-5:20px; --space-6:24px;
  --maxw: 1100px;
  /* Fluid type: clamp(min, vw-based, max) */
  --fs-sm: clamp(12px, 1.5vw, 14px);
  --fs: clamp(14px, 1.8vw, 16px);
  --fs-lg: clamp(18px, 2.5vw, 22px);
  --fs-xl: clamp(22px, 3.5vw, 28px);
  /* Font weights for Sarabun */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

*{box-sizing:border-box}
html,body{height:100%}

/* Force dark mode and prevent iOS color inversion */
html {
  color-scheme: dark;
  -webkit-color-scheme: dark;
}

body{
  margin:0;
  background: radial-gradient(1000px 600px at 10% 0%, #1a1130, #0b0b10);
  color:var(--text);
  font: var(--fs)/1.6 "Sarabun", "Noto Sans Thai", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  /* Prevent iOS color inversion */
  -webkit-filter: none;
  filter: none;
}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding: max(env(safe-area-inset-top), 12px) max(env(safe-area-inset-left), 12px) max(env(safe-area-inset-bottom), 12px) max(env(safe-area-inset-right), 12px);
}

h1{
  font-size:var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin:0 0 var(--space-4);
  letter-spacing:.3px;
}

/* Chat layout — mobile-first column */
.chatbox{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--space-4);
  min-height: 40dvh;               /* dynamic viewport on mobile */
  max-height: 70dvh;
  overflow:auto;
  scroll-behavior:smooth;
}

/* Messages */
.msg{ margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-sm); width: 100%;}
.msg.user{ background:#20252f; border:1px solid #2b3342;}
.msg.assistant{ background:#1b1b26; border:1px solid var(--border);}
.assistant-text{ white-space:pre-wrap; margin-bottom: var(--space-2); }

/* Quick action buttons */
.quick-actions{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.quick-btn{
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #2a1f3d, #3d2f5a);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-btn:hover{
  background: linear-gradient(135deg, #3d2f5a, #5a4a7a);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.quick-btn:active{
  transform: translateY(0);
}
.quick-btn:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .quick-actions{
    grid-template-columns: 1fr;
  }
}

/* Composer — stacked on small screens */
.composer{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.composer input{
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background:#12121a; color:var(--text);
  min-height: 44px;                 /* tap target */
}
.composer button{
  padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: linear-gradient(135deg,#8a5eff,#c29bff);
  color:#0b0614; font-weight:var(--fw-bold); cursor:pointer;
  min-height: 44px;
}
.composer button:focus-visible,
.composer input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Tarot / Fortune sections */
.tarot-sec, .fortune-sec{ margin-top: var(--space-3); }
.tarot-sec h3, .fortune-sec h3{ margin:0 0 var(--space-2); font-size: var(--fs-lg); color:var(--accent); }

/* Responsive grid of cards */
.card-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* phones */
  gap: var(--space-2);
}
@media (min-width: 420px){
  .card-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 768px){
  .card-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .card-grid{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}

.tarot-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding: var(--space-2);
  display:flex; flex-direction:column;
}

/* Keep images nicely proportioned on any screen */
.tarot-card img{
  width:100%;
  aspect-ratio: 3/5;
  object-fit: cover;
  border-radius:10px;
  border:1px solid var(--border);
  margin-bottom: var(--space-2);
}

.card-title{ font-weight:var(--fw-semibold); margin-bottom: var(--space-1); }
.card-pos{ color:var(--muted); font-size: var(--fs-sm); margin-bottom: var(--space-1); }
.card-meaning{ font-size: var(--fs); }

/* Make layout breathe more on larger screens */
@media (min-width: 768px){
  .container{ padding: 24px; }
  .chatbox{ min-height: 50dvh; max-height: 70dvh; }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto; animation:none; transition:none }
}

/* Support light mode (optional) */
@media (prefers-color-scheme: light){
  :root{ --bg:#fbfbfe; --panel:#ffffff; --text:#0f1220; --muted:#555b6b; --card:#fbfbfe; --border:#e7e7ef; --accent:#6a34ff; }
  body{ background: #f3f2ff; }
  .msg.user{ background:#f4f4ff; border-color:#e7e7ef; }
  .msg.assistant{ background:#ffffff; }
}

/* Force dark mode regardless of system preference */
@media (prefers-color-scheme: dark) {
  :root{ --bg:#0b0b10; --panel:#15151d; --text:#f3f3f7; --muted:#b6b6c3; --accent:#b57bff; --card:#1f1f2b; --border:#2d2d3a; }
  body{ background: radial-gradient(1000px 600px at 10% 0%, #1a1130, #0b0b10); }
  .msg.user{ background:#20252f; border-color:#2b3342; }
  .msg.assistant{ background:#1b1b26; }
}

/* เพิ่มท้ายไฟล์ static/styles.css */
.loading-bubble {
  background: #1b1b26;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--fs);
  margin: var(--space-3) 0;
}
.loading-dots span {
  animation: blink 1.4s infinite both;
}
.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes blink {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

/* ===== Loading: spinning tarot cards ===== */
.loading-bubble {
  background:#1b1b26; border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px; align-items: center;
  color: var(--muted);
  font-size: var(--fs);
  margin: var(--space-3) 0;
}

.loading-deck {
  display:flex; align-items:center; gap: 8px;
  perspective: 800px;               /* 3D */
}

.card-back {
  width: 56px; aspect-ratio: 3/5;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #6d4cff, #c7a8ff);
  position: relative;
  transform-style: preserve-3d;
  animation: floatY 1.8s ease-in-out infinite;
}

/* Optional card back image: put /static/cards/back.png if you have one */
.card-back.has-img {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    url("/static/cards/back.png") center/cover no-repeat,
    linear-gradient(135deg, #6d4cff, #c7a8ff);
}

/* shine */
.card-back::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
  transform: translateX(-120%) rotate(5deg);
  animation: shine 1.6s linear infinite;
}

/* Fan and spin offsets */
.loading-deck .card-back:nth-child(1){
  transform: rotateZ(-10deg) translateY(0);
  animation-delay: .0s, .0s;
}
.loading-deck .card-back:nth-child(2){
  transform: rotateZ(0deg) translateY(2px);
  animation-delay: .15s, .1s;
}
.loading-deck .card-back:nth-child(3){
  transform: rotateZ(10deg) translateY(0);
  animation-delay: .3s, .2s;
}

/* Dots blink */
.loading-dots span { animation: blink 1.4s infinite both; display:inline-block; transform: translateY(-2px); }
.loading-dots span:nth-child(2){ animation-delay:.2s; }
.loading-dots span:nth-child(3){ animation-delay:.4s; }

/* Keyframes */
@keyframes blink { 0%,80%,100%{opacity:0} 40%{opacity:1} }
@keyframes shine { 0%{transform:translateX(-120%) rotate(5deg)} 100%{transform:translateX(120%) rotate(5deg)} }
@keyframes floatY {
  0%,100% { transform: translateY(0) rotateZ(var(--rz,0deg)) rotateY(0deg); }
  50%     { transform: translateY(-6px) rotateZ(var(--rz,0deg)) rotateY(180deg); }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce){
  .card-back, .card-back::after, .loading-dots span { animation: none !important; }
}

/* Stop iOS input zoom */
.composer input,
.composer button,
.composer textarea,
.composer select {
  font-size: 16px;        /* >=16px stops iOS zoom */
  -webkit-text-size-adjust: 100%;
  /* Prevent iOS dark mode inversion */
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
  -webkit-color-scheme: dark;
}

/* ถ้าธีมคุณใช้ฟอนต์เล็กบนจอเล็ก ให้บังคับเฉพาะจอเล็กอีกชั้น */
@media (max-width: 480px) {
  .composer input,
  .composer button {
    font-size: 16px;
  }
}

.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.quick-replies button {
  flex: 1;
  padding: 0.5rem;
  border: none;
  border-radius: 8px;
  background: #663399;
  color: #fff;
  font-size: 14px;
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.quick-replies button:hover {
  background: #8055b5;
}

/* Social Sharing Styles */
.share-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  text-align: center;
}

.share-text {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}

.share-buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.share-btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
}

.share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.share-btn.facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
}

.share-btn.twitter:hover {
  background: #1da1f2;
  border-color: #1da1f2;
}

.share-btn.line:hover {
  background: #00b900;
  border-color: #00b900;
}

.share-btn.copy:hover {
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 480px) {
  .share-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .share-btn {
    flex: 1;
    min-width: auto;
  }
}

/* Footer Styles */
.footer {
  background: var(--panel);
  border-top: 1px solid var(--border);
  margin-top: var(--space-6);
  padding: var(--space-6) 0 var(--space-4);
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .footer-content {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer-section h3,
.footer-section h4 {
  color: var(--accent);
  margin-bottom: var(--space-2);
  font-weight: var(--fw-semibold);
}

.footer-section p {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: var(--space-1);
}

.footer-section ul li a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-section ul li a:hover {
  color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  text-align: center;
}

.footer-bottom p {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0;
}