/* =========================
   THEME VARIABLES
========================= */

:root{
  --bg1:#081126;
  --bg2:#052233;
  --glass:rgba(255,255,255,.04);
  --glass-strong:rgba(255,255,255,.06);
  --text:#e6eef6;
  --muted:rgba(230,238,246,.6);
  --accent:#4fd1c5;
  --accent-2:#60a5fa;
  --success:#22c55e;
  --danger:#f87171;
  --radius:14px;
  --shadow:0 20px 50px rgba(2,6,23,.7);
  --glass-border:rgba(255,255,255,.08);
  --transition:280ms cubic-bezier(.2,.9,.2,1);
  --max-width:1000px;
}

/* LIGHT THEME */
/* Light theme variables */
:root[data-theme="light"],
#app[data-theme="light"] {
  --bg1: #ffffff;
  --bg2: #f0f0f0;
  --text: #000000;
  --muted: rgba(0, 0, 0, 0.6);
  --accent: #38bdf8;
  --accent-2: #0ea5e9;
  --glass: rgba(255, 255, 255, 0.7);
  --glass-border: #ffffff;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .background-wrapper,
#app[data-theme="light"] .background-wrapper {
  background: linear-gradient(
    120deg,
    #ffecd2,
    #fcb69f,
    #a1c4fd,
    #c2e9fb,
    #fbc2eb,
    #fad0c4
  );
  background-size: 400% 400%;
  animation: lightBgMove 12s ease infinite;
}

@keyframes lightBgMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
:root[data-theme="light"] .logo {
  border: 5px solid #3b82f6;
  color: red;
}
:root[data-theme="light"] .card,
#app[data-theme="light"] .card {
  border: 2px solid #1e3a8a; /* dark blue border in light theme */
}

:root[data-theme="light"] .dropzone,
#app[data-theme="light"] .dropzone {
  border: 2px dashed #1e3a8a; /* dark blue dashed border for upload box */
}

:root[data-theme="light"] .caption-text,
#app[data-theme="light"] .caption-text {
  border: 2px solid #1e3a8a; /* dark blue border for caption box */
}



/* =========================
   BASE
========================= */
html,body{
  height:100%;
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(79,209,197,.18), transparent 45%),
    radial-gradient(900px 700px at 85% 90%, rgba(96,165,250,.18), transparent 45%),
    linear-gradient(135deg,var(--bg1),var(--bg2));
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================
   CONTAINER
========================= */
.container{
  width:calc(100% - 40px);
  max-width:var(--max-width);
  padding:28px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter:blur(14px) saturate(130%);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:420px 1fr;
  gap:26px;
}

/* =========================
   HEADER
========================= */
header{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:18px;
}

.logo{
  width:70px;
  height:70px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:35px;
  color:var(--accent);
  background:linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
}

h1 {
  margin:0;
  font-size:35px;
  font-weight:750;
  font-family:'Lucida Sans','Lucida Sans Regular',
              'Lucida Grande','Lucida Sans Unicode',
              Geneva,Verdana,sans-serif;
  overflow:hidden;
  border-right:.15em solid #ff6ec4;
  white-space:nowrap;
  animation:typing 4s steps(40,end) infinite,
             blink-caret .5s step-end infinite;
}

@keyframes typing {
  from { width:0 }
  to { width:100% }
}

@keyframes blink-caret {
  from,to { border-color:transparent }
  50% { border-color:#ff6ec4 }
}

header .lead{
  margin-top:4px;
  font-size:16px;
  color:var(--muted);
  line-height:1.5;
}

/* =========================
   CARDS
========================= */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border-radius:14px;
  padding:18px;
  border:1px solid var(--glass-border);
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* =========================
   DROPZONE
========================= */
.dropzone{
  height:300px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  transition:all var(--transition);
  position:relative;
  overflow:hidden;
}

.dropzone.dragover,
.dropzone:focus{
  background:linear-gradient(180deg, rgba(79,209,197,.18), rgba(96,165,250,.12));
  border-color:var(--accent);
}

.dropzone input{display:none;}

.preview{
  position:absolute;
  inset:0;
  padding:12px;
}

.preview img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
  animation:fadeIn .35s ease;
}

@keyframes fadeIn{
  from{opacity:0; transform:scale(.96)}
  to{opacity:1; transform:scale(1)}
}

/* =========================
   META BUTTON ROW
========================= */
.meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  border:none;
  color:#fff;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:transform var(--transition), box-shadow var(--transition);
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}

.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

#generateBtn{
  white-space:nowrap;
  background:linear-gradient(90deg,#22c55e,#16a34a);
}

.btn.secondary{
  background:transparent;
  color:var(--text);
  border:1px solid var(--glass-border);
  box-shadow:none;
}

/* =========================
   CAPTION BOX
========================= */
/* ===== CAPTION BOX RESIZE & POLISH ===== */
.caption-text{
  width:100%;                 /* ⬅ Right side overflow fix */
  box-sizing:border-box;      /* ⬅ Padding include ho width me */
  
  min-height:160px;
  max-height:260px;

  padding:16px 18px;
  border-radius:16px;

  background:linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );

  border:1px solid var(--glass-border);

  font-size:15.5px;
  line-height:1.65;

  overflow-y:auto;
  overflow-x:hidden;          /* ⬅ Horizontal scroll band */

  word-wrap:break-word;       /* ⬅ Long text wrap */
  word-break:break-word;

  transition:box-shadow var(--transition), transform var(--transition);
}
.caption-actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}


/* Scrollbar smooth (optional but premium feel) */
.caption-text::-webkit-scrollbar{
  width:6px;
}
.caption-text::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--accent),var(--accent-2));
  border-radius:10px;
}
.caption-box{
  display:flex;
  flex-direction:column;
  gap:14px;     /* ⬅ Caption & tools ke beech spacing */
}



/* =========================
   TOOL BUTTONS (ONE LINE)
========================= */
.tools{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:nowrap;
}

.chip{
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(79,209,197,.22), rgba(96,165,250,.22));
  border:1px solid rgba(255,255,255,.18);
  cursor:pointer;
  font-weight:600;
  color:var(--text);
  transition:transform var(--transition), box-shadow var(--transition);
}

.chip:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.3);
}

.chip.success{
  background:var(--success);
  color:#022;
}

/* =========================
   FORM CONTROLS
========================= */
select,
input[type="range"]{
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--glass-border);
  color:var(--text);
}

select option{
  background:#0b1b2a;
  color:#fff;
}

/* =========================
   OVERLAY
========================= */
.overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.35);
  border-radius:inherit;
  z-index:50;
}

.overlay.show{display:flex;}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:980px){
  .container{grid-template-columns:1fr;}
}

@media(max-width:480px){
  .dropzone{height:220px;}
  .tools{flex-wrap:wrap;}
   .caption-text{
    min-height:140px;
    max-height:220px;
    font-size:18.5px;
  }
}

/* =========================
   COPY / SHARE / SPEAK FIX
========================= */

.tools{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
}

.tools button{
  height:40px;
  min-width:90px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  border:none;
  white-space:nowrap;
}

/* Copy */
#copyBtn{
  background:linear-gradient(135deg,#38bdf8,#0ea5e9);
  color:white;
}

/* Share */
#shareBtn{
  background:linear-gradient(135deg,#a78bfa,#6366f1);
  color:white;
}

/* Speak */
#speakBtn{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:white;
}

.tools button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.tools button:active{
  transform:scale(.96);
}
/* ===== ACTION ROW (Copy / Share / Speak / Voice Speed) ===== */
.action-row{
  display:flex;
  align-items:flex-start;   /* ⬅ top align */
  gap:12px;
  flex-wrap:wrap;
}

/* Voice speed wrapper */
.voice-control{
  display:flex;
  flex-direction:column;     /* ⬅ vertical layout */
  align-items:center;        /* ⬅ center align */
  gap:6px;
  margin-top:6px;
}
.voice-label{
  font-size:16px;            /* ⬅ readable & slightly bigger */
  font-weight:600;
  color:rgba(255,255,255,0.9);
  text-align:center;
}



/* Voice speed text */
.voice-control label{
  font-size:12.5px;
  opacity:0.85;
  margin:0;
  line-height:1;
}

/* Slider */
.voice-control input[type="range"]{
  width:120px;
}
.voice-value{
  font-size:14px;
  font-weight:600;
  text-align:center;
}
#captionText{
  font-size:20px !important;   
  line-height:1.75;
}
.container {
  position: relative;
  z-index: 1;
}

.container::before {
  content: "";
  position: absolute;
  inset: -20px; /* thicker border */
  border-radius: var(--radius);
  padding: 8px;
  background: linear-gradient(
    270deg,
    red,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet,
    red
  );
  background-size: 400% 400%;
  animation: rainbowBorder 6s linear infinite;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}
@keyframes rainbowBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.background-wrapper{
  margin:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(
    120deg,
    #020024,
    #090979,
    #052233,
    #0b3e26,
    #ca0101,blue,purple
  );
  background-size:400% 400%;
  animation:bgMove 15s ease infinite;
}
@keyframes bgMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,255,255,0.08), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(0,128,255,0.08), transparent 60%);
  animation:floatDark 18s linear infinite;
  z-index:-1;
}

@keyframes floatDark{
  0%{transform:translateY(0)}
  50%{transform:translateY(-30px)}
  100%{transform:translateY(0)}
}

body {
  position: relative;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'><rect width='100%' height='100%' fill='none'/><g font-family='Segoe UI Emoji' font-size='44'><text x='40' y='80'>🐶</text><text x='140' y='160'>🐱</text><text x='240' y='60'>🦊</text><text x='340' y='180'>🐼</text><text x='440' y='100'>🦁</text><text x='520' y='200'>🐯</text><text x='80' y='300'>🐻</text><text x='180' y='360'>🐨</text><text x='280' y='280'>🦒</text><text x='380' y='360'>🦘</text><text x='480' y='300'>🦓</text><text x='60' y='480'>🐸</text><text x='160' y='540'>🦔</text><text x='260' y='440'>🐵</text><text x='360' y='520'>🦙</text><text x='460' y='460'>🐘</text></g></svg>");
  background-size: 500px 500px;
  background-repeat: repeat;
  animation: animalsDrift 10s linear infinite;
  opacity: 0.22;
  z-index: -2;
  filter: saturate(120%);
}

body::after {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'><rect width='100%' height='100%' fill='none'/><g font-family='Segoe UI Emoji' font-size='40'><text x='100' y='120'>🐟</text><text x='200' y='220'>🦜</text><text x='300' y='140'>🦉</text><text x='400' y='240'>🦅</text><text x='500' y='160'>🦩</text><text x='120' y='340'>🦄</text><text x='220' y='420'>🐢</text><text x='320' y='340'>🦑</text><text x='420' y='420'>🦋</text><text x='520' y='340'>🐬</text></g></svg>");
  background-size: 600px 600px;
  background-repeat: repeat;
  animation: animalsDriftSlow 10s linear infinite;
  opacity: 0.18;
  z-index: -3;
  transform: rotate(2deg);
}

@keyframes animalsDrift {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 100%; }
}

@keyframes animalsDriftSlow {
  0% { background-position: 0% 0%; }
  50% { background-position: -100% 50%; }
  100% { background-position: 0% 100%; }
}
:root[data-theme="light"] body::before,
#app[data-theme="light"] body::before {
  opacity: 0.35; /* increase visibility */
  filter: none;  /* remove blur/saturate */
  z-index: -2;
}

:root[data-theme="light"] body::after,
#app[data-theme="light"] body::after {
  opacity: 0.28;
  filter: none;
  z-index: -3;
}