@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");

body {
  font-family: "Roboto", sans-serif;
  background-color: #f0f2f5;
  margin: 0; padding: 20px;
}

h1 { text-align: center; color: #196774; font-weight: 700; }

.container {
  max-width: 600px;
  margin: 0 auto;
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.description { color: #666; font-size: 0.9rem; margin-bottom: 15px; text-align: center; }

.textarea-wrapper {
  position: relative;
  border: 2px solid #e1e4e8;
  border-radius: 8px;
  margin-bottom: 15px;
  transition: border-color 0.3s;
}
.textarea-wrapper:focus-within { border-color: #4de491; }

#inputText {
  width: 100%; height: 250px;
  border: none; padding: 15px;
  font-size: 1.1rem; color: #1c1e21;
  resize: none; outline: none;
  box-sizing: border-box;
}

#charCounter {
  text-align: right; font-size: 0.75rem;
  color: #999; padding: 5px 10px;
}

.button-grid {
  display: flex; flex-wrap: wrap;
  gap: 10px; margin-bottom: 20px;
  justify-content: center;
}

.btn-group {
  display: flex; background: #f0f2f5;
  padding: 4px; border-radius: 8px; gap: 2px;
}

.convert-button {
  border: none; background: white;
  color: #196774; padding: 8px 15px;
  cursor: pointer; border-radius: 6px;
  font-weight: bold; transition: 0.2s;
}
.convert-button:hover { background: #196774; color: white; }

.actions-container {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

.copy-button, .share-button {
  border: none; border-radius: 8px;
  padding: 14px; cursor: pointer;
  font-weight: bold; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: white; transition: transform 0.1s;
}
.copy-button:active, .share-button:active { transform: scale(0.98); }

.copy-button { background-color: #196774; }
.share-button { background-color: #25D366; } /* Color oficial WhatsApp */

.clear-button {
  width: 100%; background: none; border: none;
  color: #999; margin-top: 15px; cursor: pointer;
  text-decoration: underline; font-size: 0.8rem;
}

.modal {
  position: fixed; top: 20px; left: 50%;
  transform: translateX(-50%);
  background: #333; color: white;
  padding: 12px 25px; border-radius: 30px;
  font-size: 0.9rem; z-index: 1000;
}

@media (max-width: 480px) {
  .actions-container { grid-template-columns: 1fr; }
  .btn-group { width: 100%; justify-content: center; }
}