@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

/* ───────── Base ───────── */
html, body { margin: 0; padding: 0; overflow-x: hidden; font-family: "Inter","Helvetica Neue",sans-serif; }
body { background-color: #f8fbfe; color: #333; }
.hidden { display: none !important; }

.container { max-width: 650px; margin: 50px auto; padding: 20px; box-sizing: border-box; }

.header { text-align: center; }
.logo-crop { height: 200px; object-fit: cover; object-position: center; display: block; margin: 0 auto; border-radius: 8px; }
.logo-crop.pulse { animation: logo-pulse .6s ease-in-out; }
@keyframes logo-pulse { 0%{transform:scale(1)} 50%{transform:scale(1.05)} 100%{transform:scale(1)} }

.subtext { margin-top: 10px; font-size: 1em; color: #555; }

textarea {
  width: 100%; padding: 12px; margin-top: 10px; font-size: 1em; border: 1px solid #ccc; border-radius: 6px;
  resize: vertical; box-shadow: inset 0 1px 3px rgba(0,0,0,.05); line-height: 1.4; box-sizing: border-box;
  font-family: "Inter","Helvetica Neue",sans-serif;
}

button {
  margin-top: 15px; padding: 10px 20px; font-size: 1em; cursor: pointer; background-color: #2196f3; color: #fff;
  border: none; border-radius: 6px; transition: background-color .2s ease;
}
button:hover { background-color: #1976d2; }

/* ───────── Answer Box ───────── */
#answer-box { display:none; position:relative; margin-top:20px; min-height:140px; padding-bottom:40px; }
#response { display:flex; flex-direction:column; align-items:stretch; padding:12px 12px 60px; border:1px solid #ccc; border-radius:8px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.05); position:relative; }
#answer-text { margin:0; padding:0; opacity:0; transition:opacity .4s ease; white-space:pre-wrap; line-height:1.4; min-height:1em; }
#answer-text.show { opacity:1; }
.copy-btn { position:absolute; bottom:10px; right:10px; font-size:.8em; padding:6px 12px; background:#2196f3; color:#fff; border:none; border-radius:4px; transition:all .3s ease; }
.copy-btn.clicked { background:#ccc; color:#333; }
#timer { font-size:.9em; color:#555; margin-top:8px; }

/* ───────── Overlay / Spinner ───────── */
#overlay { display:none; position:fixed; inset:0; background-color:rgba(240,240,240,.85); z-index:9999; justify-content:center; align-items:center; flex-direction:column; font-size:1.1em; color:#333; }
.spinner { border:4px solid #ddd; border-top:4px solid #3399ff; border-radius:50%; width:36px; height:36px; animation:spin .8s linear infinite; margin-bottom:10px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────── Footer Links ───────── */
.footer-links { margin-top: 30px; display:flex; justify-content:flex-start; gap:10px; }
.footer-btn { background:none !important; border:0 !important; color:#666; font-size:.8em; cursor:pointer; text-decoration:none; padding:0; }
.footer-links .footer-btn:hover { background:none !important; color:#666; text-decoration:underline; }

/* ───────── Modals ───────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(50,50,50,.5); justify-content:center; align-items:center; z-index:10000; }
.modal-content { background:#fff; padding:20px; width:90%; max-width:500px; border-radius:8px; max-height:80%; overflow-y:auto; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.modal-text { margin-top:0; font-size:.9em; line-height:1.4; }
.modal-close { margin-top:20px; padding:6px 12px; font-size:.75em; background:#ccc; color:#333; border:none; border-radius:4px; cursor:pointer; border-bottom:2px solid #e5e7eb; }
.modal-close:hover { background:#bbb; }

/* ───────── Forms in Modals ───────── */
#signup-modal input, .modal-content input, .modal-content button { width:100%; padding:8px; margin:5px 0; font-size:1rem; border-radius:6px; border:1px solid #ccc; box-sizing:border-box; }
#signup-form button { margin-top:10px; background:#2196f3; color:#fff; border:none; border-radius:6px; }
#login-modal .modal-content { padding:20px; }
.modal-content button { background:#1d4ed8; color:#fff; border:none; margin-top:10px; }
.danger-btn { background:#ef4444; } .danger-btn:hover { background:#dc2626; }

/* ───────── Topbar ───────── */
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; padding:12px 12px 0; } /* padding from top */
.topbar-left, .topbar-right { display:flex; align-items:center; gap:10px; }
.topbar button { margin-top:0; height:36px; }  /* align buttons with status pill */

#login-status { display:flex; align-items:center; height:36px; line-height:36px; padding:0 14px; font-size:.9rem; background:#eef2ff; color:#1e40af; border-radius:10px; white-space:nowrap; box-sizing:border-box; }

/* Latest news button */
.btn-outline-pill { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; font-size:.85rem; font-weight:600; color:#2563eb; background:#fff; border:2px solid #2563eb; border-radius:10px; cursor:pointer; box-shadow:0 1px 3px rgba(37,99,235,.12); }
.btn-outline-pill:hover { background:#eff6ff; border-color:#1e40af; color:#1e40af; }
.btn-outline-pill .btn-ico { display:inline-flex; line-height:0; }

/* Login/Account button with icon swap */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; background:#2196f3; color:#fff; border:none; border-radius:10px; cursor:pointer; box-shadow:0 2px 8px rgba(33,150,243,.22); }
.icon-btn:hover { background:#1976d2; }
.icon-btn svg { display:block; width:18px; height:18px; }
.icon-btn .ico-hamburger { display:none; }              /* default (logged OUT) */
.icon-btn.logged-in .ico-person { display:none; }
.icon-btn.logged-in .ico-hamburger { display:block; }

/* Dropdown panel re-used for account menu */
.account-dropdown { position:relative; }
.account-dropdown .dropdown-menu {
  position:absolute; right:0; top:calc(100% + 6px); display:flex; flex-direction:column; background:#fff;
  border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.08); padding:6px 12px; min-width:max-content; text-align:right; z-index:1001;
}
.dropdown-menu[hidden]{ display:none; }
.dropdown-menu button { background:none; border:0; cursor:pointer; white-space:nowrap; font-size:15px; line-height:1.3; color:#1846b5; padding:8px 0; text-align:right; width:100%; border-radius:8px; }
.dropdown-menu button:hover { background:#f5f7ff; }

/* ───────── Tables ───────── */
#history-table { width:100%; border-collapse:collapse; margin-top:10px; font-size:.9rem; border:1px solid #dbeafe; border-radius:8px; overflow:hidden; table-layout:fixed; }
#history-table thead { background-color:#eff6ff; }
#history-table th, #history-table td { border:1px solid #dbeafe; padding:10px; text-align:left; vertical-align:top; line-height:1.4; }
#history-table th { font-weight:bold; color:#1e3a8a; }
#history-table td { color:#333; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; }
#history-table th:nth-child(1), #history-table td:nth-child(1) { width:40%; }
#history-table th:nth-child(2), #history-table td:nth-child(2) { width:40%; }
#history-table th:nth-child(3), #history-table td:nth-child(3) { width:20%; }

/* ───────── Mobile ───────── */
@media (max-width:600px){
  .container { margin:20px auto; padding:12px; }
  .logo-crop { width:100%; height:auto; }
  textarea { font-size:1em; padding:10px; }
  #response { font-size:1em; padding:10px 10px 40px; }
  .copy-btn { bottom:10px; right:10px; font-size:.75em; padding:4px 10px; max-width:120px; white-space:nowrap; }
  #timer { font-size:.85em; text-align:center; }
}