/* =============================================
   SheetApp — components.css
   Buttons, Forms, Modal, Session Panel,
   Toast, Tags, Animations
   ============================================= */

/* ---- BUTTONS ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem 1rem; border-radius: var(--radius-sm); border: 1px solid transparent; font-family: var(--font-body); font-size: .825rem; font-weight: 500; cursor: pointer; transition: all var(--transition); white-space: nowrap; text-decoration: none; }
.btn svg { width: 14px; height: 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: #fff; box-shadow: 0 2px 12px var(--accent-glow); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.15); box-shadow: 0 4px 18px var(--accent-glow); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-overlay); color: var(--text-primary); border-color: rgba(109,40,217,.3); }
.btn-danger { background: rgba(220,38,38,.08); color: var(--danger); border-color: rgba(220,38,38,.25); }
.btn-danger:hover:not(:disabled) { background: rgba(220,38,38,.15); }
.btn-lg { padding: .7rem 1.5rem; font-size: .95rem; }
.btn-sm { padding: .35rem .75rem; font-size: .775rem; }
.btn-xs { padding: .2rem .5rem; font-size: .7rem; }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-xs); background: none; border: none; color: var(--text-secondary); cursor: pointer; transition: all var(--transition); flex-shrink: 0; }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--bg-overlay); color: var(--accent); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.icon-btn-xs { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 3px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .8rem; transition: all var(--transition); }
.icon-btn-xs:hover { color: var(--text-primary); background: var(--bg-raised); }

/* ---- FORM ELEMENTS ---- */
.input-group { display: flex; gap: .5rem; }
.input-group .form-input { flex: 1; }
.form-input { width: 100%; background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: .85rem; padding: .5rem .75rem; outline: none; transition: border-color var(--transition); }
.form-input:focus { border-color: var(--border-active); }
.form-input::placeholder { color: var(--text-muted); }
.form-input-sm { width: 100%; background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text-primary); font-family: var(--font-body); font-size: .8rem; padding: .4rem .6rem; outline: none; transition: border-color var(--transition); }
.form-input-sm:focus { border-color: var(--border-active); }
.form-row { display: flex; flex-direction: column; gap: .3rem; }
.form-label { font-size: .75rem; color: var(--text-muted); font-weight: 500; }

/* ---- MODAL ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: fadeIn .15s ease; }
.modal-overlay.hidden { display: none; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-box { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 520px; box-shadow: var(--shadow); animation: slideUp .2s ease; max-height: 90vh; display: flex; flex-direction: column; }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: .95rem; font-weight: 600; }
.modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 1rem; }

.tab-switcher { display: flex; background: var(--bg-overlay); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.tab-btn { flex: 1; padding: .4rem .5rem; border-radius: calc(var(--radius-sm) - 2px); background: none; border: none; color: var(--text-muted); font-size: .75rem; font-weight: 500; cursor: pointer; transition: background var(--transition), color var(--transition); font-family: var(--font-body); white-space: nowrap; }
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { background: var(--bg-raised); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.tab-content { display: none; flex-direction: column; gap: .65rem; }
.tab-content.active { display: flex; }
.help-text { font-size: .8rem; color: var(--text-secondary); }

.drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; cursor: pointer; transition: all var(--transition); background: var(--bg-overlay); }
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: var(--accent-glow); }
.drop-icon { font-size: 2rem; margin-bottom: .5rem; }
.drop-zone p { font-size: .85rem; color: var(--text-secondary); }
.file-selected { display: flex; align-items: center; gap: .5rem; background: var(--bg-overlay); border: 1px solid var(--border-active); padding: .5rem .75rem; border-radius: var(--radius-sm); font-size: .8rem; }
.file-icon { font-size: 1.1rem; }

.import-progress { display: flex; flex-direction: column; gap: .4rem; }
.progress-bar-wrap { height: 4px; background: var(--bg-raised); border-radius: 2px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--success)); border-radius: 2px; width: 0%; transition: width .4s ease; animation: shimmer 1.5s linear infinite; }
@keyframes shimmer { 0%{filter:brightness(1)} 50%{filter:brightness(1.3)} 100%{filter:brightness(1)} }
.import-result { padding: .75rem; border-radius: var(--radius-sm); font-size: .85rem; border: 1px solid; }
.import-result.success { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.3); color: var(--success); }
.import-result.error   { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); color: var(--danger); }
.url-example-code { display: block; background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: .4rem .6rem; font-size: .7rem; font-family: var(--font-mono); color: var(--text-secondary); word-break: break-all; margin-top: .25rem; }

/* ---- SESSION PANEL ---- */
.session-panel { position: fixed; right: 0; top: var(--toolbar-h); bottom: 0; width: 320px; background: var(--bg-surface); border-left: 1px solid var(--border); z-index: 200; transform: translateX(100%); transition: transform var(--transition); display: flex; flex-direction: column; }
.session-panel:not(.hidden) { transform: translateX(0); }
.session-panel.hidden { display: flex; }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.panel-header h3 { font-size: .9rem; font-weight: 600; }
.panel-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; }
.session-current h4, .session-history h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin-bottom: .65rem; font-weight: 600; }
.session-meta { display: flex; gap: .5rem; margin-bottom: .65rem; flex-wrap: wrap; }
#session-note { width: 100%; background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: .85rem; padding: .6rem .75rem; resize: vertical; outline: none; transition: border-color var(--transition); margin-bottom: .65rem; }
#session-note:focus { border-color: var(--border-active); }
.history-list { display: flex; flex-direction: column; gap: .5rem; }
.history-item { background: var(--bg-overlay); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .75rem; }
.history-item-date { font-size: .7rem; color: var(--text-muted); margin-bottom: .2rem; font-family: var(--font-mono); }
.history-item-tone { display: inline-block; font-size: .7rem; color: var(--accent); font-weight: 600; margin-bottom: .3rem; }
.history-item-note { font-size: .8rem; color: var(--text-secondary); }

/* ---- TOAST ---- */
.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; }
.toast { background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem 1rem; font-size: .825rem; color: var(--text-primary); box-shadow: 0 4px 20px rgba(0,0,0,.12); animation: slideInRight .2s ease, fadeOut .3s ease 2.7s forwards; max-width: 340px; display: flex; align-items: center; gap: .5rem; }
.toast.success { border-color: rgba(5,150,105,.4); background: rgba(5,150,105,.06); }
.toast.error   { border-color: rgba(220,38,38,.4); background: rgba(220,38,38,.06); }
.toast.info    { border-color: var(--border-active); background: rgba(109,40,217,.06); }
@keyframes slideInRight { from{transform:translateX(20px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes fadeOut { from{opacity:1} to{opacity:0;transform:translateX(10px)} }

@media (max-width: 768px) {
  .session-panel { width: 100vw; }
  .osmd-container { padding: 1rem .5rem; }
}