/* Speech Studio — app-specific styles.
   Shared tokens and primitives come from icfoss-ds.css, loaded first. */

.page{padding-bottom:20px}

/* --- hero ----------------------------------------------------------------- */

.intro{padding:104px 0 88px}

.hero-ml{
  display:block;
  font-size:.5em;
  line-height:1.15;
  margin-top:20px;
  letter-spacing:-.03em;
  font-weight:600;
}

.intro-copy{margin-top:32px}

.status-dot{box-shadow:0 0 0 4px rgba(243,121,32,.14)}

/* --- service cards -------------------------------------------------------- */

.services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:74px;
}

.service-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  text-align:left;
  padding:22px 24px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:color .35s ease, border-color .35s ease, transform .35s ease;
}

.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--orange);
  transform:translateY(101%);
  transition:transform .35s ease;
  z-index:0;
}

.service-card:hover{color:#fff;border-color:var(--orange);transform:translateY(-3px)}
.service-card:hover::before{transform:translateY(0)}
.service-card > *{position:relative;z-index:1}

.service-card strong{display:block;font-size:16px;letter-spacing:-.02em}
.service-card small{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.5}
.service-card:hover small{color:rgba(255,255,255,.85)}

.card-icon{
  width:40px;height:40px;
  border-radius:12px;
  background:var(--soft);
  color:var(--orange-dark);
  display:grid;place-items:center;
  font-weight:800;font-size:15px;
  transition:background .35s ease, color .35s ease;
}
.service-card:hover .card-icon{background:rgba(255,255,255,.22);color:#fff}

.card-arrow{font-size:20px;transition:transform .35s ease}
.service-card:hover .card-arrow{transform:translateX(6px)}

/* --- studio panel --------------------------------------------------------- */

.studio{margin-top:26px;padding:38px 40px 42px;scroll-margin-top:96px}

.studio-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:30px;
}
.studio-head .ds-kicker{margin-bottom:12px}

.tab-content{display:none;padding-top:34px}
.tab-content.active-content{display:block}

.panel-title{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:24px;
}
.panel-title p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.6}

/* --- chat ----------------------------------------------------------------- */

.chat-box{
  height:330px;
  overflow-y:auto;
  padding:22px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.bot-message,.user-message{max-width:78%;padding:13px 16px;border-radius:16px;line-height:1.65;font-size:14.5px}
.bot-message{background:var(--white);border:1px solid var(--line);align-self:flex-start}
.user-message{background:var(--ink);color:#fff;align-self:flex-end}
.bot-message strong{display:block;margin-bottom:5px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.bot-message p,.user-message p{margin:0}

.input-row{display:flex;gap:12px;margin-top:18px}
.input-row .ds-input{flex:1}
.input-row .ds-btn{flex:none;padding-inline:26px}

/* --- tool panels (ASR / TTS) ---------------------------------------------- */

.tool-panel{display:flex;flex-direction:column;gap:18px;align-items:flex-start}

.file-drop{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:16px;
  width:100%;
  padding:24px;
  background:var(--paper);
  border:1px dashed #d6d0c7;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:border-color .25s ease, background .25s ease;
}
.file-drop:hover{border-color:var(--orange);background:var(--soft)}
.file-drop strong{display:block;font-size:15px}
.file-drop small{display:block;margin-top:3px;color:var(--muted);font-size:12.5px}
.file-drop input[type=file]{display:none}

.file-icon{
  width:44px;height:44px;
  border-radius:12px;
  background:var(--white);
  border:1px solid var(--line);
  display:grid;place-items:center;
  font-size:10.5px;font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--orange-dark);
}

.control-row{display:flex;gap:12px;width:100%;flex-wrap:wrap}
.voice-select{max-width:200px}
.control-row .ds-btn{flex:none}

.demo-audio{width:100%;max-width:520px}

.result-text{
  margin:0;
  width:100%;
  min-height:56px;
  padding:16px 18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  line-height:1.75;
  font-size:15px;
  white-space:pre-wrap;
}

/* app.js injects <span class="spinner"> — alias it onto the DS spinner */
.spinner{
  display:inline-block;
  width:13px;height:13px;
  margin-right:9px;
  vertical-align:-2px;
  border:2px solid rgba(243,121,32,.28);
  border-top-color:var(--orange);
  border-radius:50%;
  animation:ds-spin .7s linear infinite;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width:980px){
  .services{grid-template-columns:1fr}
  .studio{padding:30px 24px 34px}
  .intro{padding:76px 0 64px}
}

@media (max-width:560px){
  .studio-head{flex-direction:column;align-items:flex-start}
  .panel-title{flex-direction:column}
  .chat-box{height:280px}
  .bot-message,.user-message{max-width:90%}
  .input-row{flex-direction:column}
  .input-row .ds-btn{width:100%}
}